{"version":3,"file":"index-DWYdb0pL.js","sources":["../../../packs/frontend/components/MaterialTile/index.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MaterialTileProps } from \"@/types/partners.types\";\n\nexport default {\n  name: \"MaterialTile\",\n};\n</script>\n\n<script setup lang=\"ts\">\nwithDefaults(defineProps<MaterialTileProps>(), {\n  isAuthor: false,\n  imageUrl: undefined,\n  rounded: false,\n});\n\nconst { d } = useI18n();\n</script>\n\n<template>\n  <div class=\"material-tile\">\n    <div\n      class=\"material-tile__color-bar\"\n      :style=\"`border-color: ${color}; background-color: ${color}`\"\n    ></div>\n    <div class=\"material-tile__header\">\n      <div\n        class=\"material-tile__bg\"\n        :class=\"{ 'material-tile__bg--rounded': rounded }\"\n      >\n        <LazyImage\n          v-if=\"imageUrl\"\n          class=\"material-tile__bg-image\"\n          :src=\"imageUrl\"\n          alt=\"avatar\"\n        />\n        <i\n          v-else\n          class=\"material-tile__bg-icon\"\n          :class=\"{\n            [`bi ${icon}`]: true,\n            'material-tile__bg-icon--rounded': rounded,\n          }\"\n          :style=\"`color: ${color}`\"\n        />\n      </div>\n    </div>\n\n    <div class=\"material-tile__kind\" :style=\"`border-color: ${color}`\">\n      <span class=\"material-tile__icon\"><i :class=\"`bi ${icon}`\"></i></span>\n      <span>{{ type }}</span>\n    </div>\n\n    <div class=\"material-tile__content\">\n      <div class=\"material-tile__title\">\n        <a :href=\"url\" class=\"stretched-link\" data-testid=\"link-material\">\n          {{ name }}</a\n        >\n      </div>\n      <div class=\"material-tile__footer\">\n        <div class=\"material-tile__author\">\n          <slot name=\"author\" />\n        </div>\n        <div class=\"d-none d-sm-flex text-muted font-xs\">\n          {{ d(new Date(date), \"numeric\") }}\n        </div>\n        <div class=\"material-tile__actions\">\n          <slot name=\"actions\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.material-tile {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1;\n  height: 21rem;\n  overflow: hidden;\n  border-radius: $border-radius;\n  background: $color-white;\n  color: $color-black;\n  text-decoration: none;\n  transition: transform 0.1s ease-out;\n  box-shadow: $brand-box-shadow;\n\n  &:hover {\n    transform: scale(1.03);\n  }\n\n  @include media-breakpoint-down(sm) {\n    flex-direction: row;\n    height: 8rem;\n    border-radius: $border-radius-md;\n  }\n\n  &__color-bar {\n    background: $gray-200;\n    height: $spacer-2;\n    border-bottom: $spacer-2 solid $gray-200;\n    width: 100%;\n\n    @include media-breakpoint-down(sm) {\n      display: none;\n    }\n  }\n\n  &__header {\n    display: flex;\n    justify-content: flex-end;\n    align-items: start;\n    overflow: hidden;\n    width: 100%;\n    height: 11rem;\n    background-color: $gray-100;\n\n    @include media-breakpoint-down(sm) {\n      height: 100%;\n      width: 100%;\n      max-width: 4.85rem;\n      max-height: 8.3125rem;\n    }\n\n    @include media-breakpoint-down(sm) {\n      &:has(.material-tile__bg-icon-wrapper--assistant) {\n        display: block;\n      }\n    }\n  }\n\n  &__bg {\n    position: relative;\n    top: 1.25rem;\n    right: -$spacer-5;\n    width: 11.25rem;\n    height: 100%;\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    background-color: $color-white;\n    border-radius: 1rem;\n    overflow: hidden;\n\n    @include media-breakpoint-down(sm) {\n      top: $spacer-2;\n      left: $spacer-3;\n      height: 7rem;\n    }\n\n    &--rounded {\n      right: -35px;\n      width: 12rem;\n      height: 12rem;\n      border-radius: 50%;\n\n      @include media-breakpoint-down(sm) {\n        top: 1.5rem;\n        right: 0;\n        width: 5rem;\n        height: 5rem;\n      }\n    }\n  }\n\n  &__bg-icon {\n    position: absolute;\n    top: -$spacer-4;\n    left: $spacer-5;\n    font-size: 9.5rem;\n\n    @include media-breakpoint-down(sm) {\n      top: -0.75rem;\n      left: 0.25rem;\n      font-size: 5.5rem;\n    }\n\n    &--rounded {\n      left: 1.625rem;\n      top: -1.55rem;\n      font-size: 8.75rem;\n\n      @include media-breakpoint-down(sm) {\n        font-size: 5.5rem;\n        left: $spacer-3;\n        top: -0.85rem;\n      }\n    }\n  }\n\n  &__bg-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &__kind {\n    display: flex;\n    align-items: center;\n    position: absolute;\n    top: 1.5rem;\n    left: 1.5rem;\n    width: fit-content;\n    height: 1.75rem;\n    border: 2px solid $gray-200;\n    border-radius: $border-radius-md;\n    padding: $spacer-1 $spacer-2 $spacer-1 0.15rem;\n    background-color: $color-white;\n    color: $gray-600;\n    font-size: $font-size-xs;\n\n    @include media-breakpoint-down(sm) {\n      top: 0.5rem;\n      left: 5.35rem;\n      border: none;\n      z-index: 1;\n    }\n  }\n\n  &__icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: $white;\n    border-radius: 50%;\n    width: 24px;\n    height: 24px;\n    color: $gray-600;\n    font-size: $font-size-xs;\n  }\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 9.95rem;\n    max-height: 100%;\n  }\n\n  &__title {\n    max-height: 4.25rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    padding: $spacer-3 $spacer-4 $spacer-2 $spacer-4;\n    background: $color-white;\n\n    @include media-breakpoint-down(md) {\n      height: fit-content;\n    }\n\n    @include media-breakpoint-down(sm) {\n      max-height: 3.75rem;\n      margin-bottom: $spacer-1;\n      margin-top: 1.25rem;\n      padding: $spacer-3;\n      padding-bottom: $spacer-1;\n    }\n\n    a {\n      display: -webkit-box;\n      line-clamp: 2;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      word-wrap: anywhere;\n      font-size: $font-size-base;\n      font-weight: $font-weight-semibold;\n      text-decoration: none;\n      color: $color-black;\n\n      @include media-breakpoint-down(sm) {\n        font-size: $font-size-sm;\n        line-clamp: 2;\n        -webkit-line-clamp: 2;\n      }\n    }\n  }\n\n  &__footer {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    justify-content: space-between;\n    background: transparent;\n    padding: 0 $spacer-4 $spacer-3;\n\n    @include media-breakpoint-down(sm) {\n      padding: 0 $spacer-3 0.75rem;\n      width: 100%;\n      height: fit-content;\n    }\n  }\n\n  &__author {\n    display: flex;\n    align-items: center;\n    color: $gray-600;\n    font-size: $font-size-sm;\n\n    @include media-breakpoint-down(sm) {\n      font-size: $font-size-xs;\n      margin-top: auto;\n    }\n  }\n\n  &__actions {\n    position: absolute;\n    right: $spacer-4;\n    bottom: $spacer-3;\n\n    @include media-breakpoint-down(sm) {\n      right: $spacer-3;\n      bottom: 0.75rem;\n    }\n  }\n}\n</style>\n"],"names":["__default__","d","useI18n"],"mappings":"meAGeA,EAAA,CACb,KAAM,cACR,4KAUM,KAAA,CAAE,EAAAC,CAAE,EAAIC,EAAQ"}