{"version":3,"file":"CollectionTile-BZxiarQT.js","sources":["../../../packs/frontend/components/MaterialCounts.vue","../../../packs/frontend/components/CollectionTile.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { AppBookmarkableEnum } from \"@/services/fobizzToolsApi\";\n\nconst props = withDefaults(\n  defineProps<{\n    kind: AppBookmarkableEnum;\n    materialId: string;\n    authorId: string;\n    bookmarksCount?: number;\n    showBookmarksCount?: boolean;\n    name: string;\n  }>(),\n  {\n    showBookmarksCount: true,\n    bookmarksCount: undefined,\n  }\n);\n\nconst userStore = useUserStore();\nconst isAuthor = computed(() => props.authorId === userStore.user?.id);\n\nconst { bookmarked, toggleBookmark } = useBookmark(\n  props.kind as AppBookmarkableEnum,\n  props.materialId,\n  isAuthor\n);\n</script>\n\n<template>\n  <div\n    v-if=\"!userStore.isAuthenticated || isAuthor || userStore.isVisitor\"\n    class=\"d-flex\"\n  >\n    <div\n      v-if=\"showBookmarksCount && bookmarksCount\"\n      tabindex=\"-1\"\n      class=\"material-counts material-counts--owner material-counts--no-action\"\n    >\n      <i class=\"bi bi-heart\"></i>\n      <span>{{ bookmarksCount }}</span>\n    </div>\n  </div>\n\n  <div v-else class=\"d-flex\">\n    <button\n      class=\"btn btn-light material-counts position-relative\"\n      :class=\"{ 'material-counts--fill': bookmarked }\"\n      :aria-label=\"\n        bookmarked ? `Remove bookmark ${name}` : `Add bookmark ${name}`\n      \"\n      @click=\"toggleBookmark\"\n    >\n      <i v-if=\"bookmarked\" class=\"bi bi-heart-fill\"></i>\n      <i v-else class=\"bi bi-heart\"></i>\n      <span v-if=\"showBookmarksCount && bookmarksCount\">\n        {{ bookmarksCount }}\n      </span>\n    </button>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.material-counts {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  background-color: $color-white;\n  border: 1px solid $gray-100;\n  font-size: $font-size-sm;\n  z-index: 1;\n\n  &:hover {\n    background-color: $gray-100;\n  }\n\n  i {\n    font-size: $font-size-xs;\n    height: 1.1rem;\n  }\n\n  @include media-breakpoint-down(sm) {\n    padding: $btn-padding-y-sm $btn-padding-x-sm;\n    font-size: $font-size-xs;\n\n    i {\n      font-size: $font-size-xxs;\n      height: 1rem;\n    }\n  }\n\n  &--fill {\n    color: $brand-3;\n  }\n\n  &--no-action {\n    cursor: default;\n    pointer-events: none;\n\n    @include media-breakpoint-down(sm) {\n      padding-bottom: 0;\n    }\n\n    &:first-of-type {\n      margin-right: $spacer-3;\n\n      @include media-breakpoint-down(sm) {\n        margin-right: $spacer-1;\n      }\n    }\n  }\n\n  &--owner {\n    background-color: $color-white;\n    padding-right: 0;\n    border: none;\n\n    &:hover {\n      background-color: $color-white;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport LazyImage from \"@/components/LazyImage.vue\";\nimport MaterialCounts from \"@/components/MaterialCounts.vue\";\nimport { AppBookmarkableEnum, Collection } from \"@/services/fobizzToolsApi\";\n\nconst { d } = useI18n();\n\ndefineProps<{ collection: Collection }>();\n</script>\n\n<template>\n  <div class=\"collection-tile\">\n    <div class=\"collection-tile__image-wrapper\">\n      <LazyImage\n        v-if=\"collection?.image?.previewUrl\"\n        :src=\"collection.image.previewUrl\"\n        :alt=\"collection.name\"\n        class=\"collection-tile__image\"\n      />\n    </div>\n\n    <div class=\"collection-tile__kind\">\n      <span class=\"collection-tile__icon\">\n        <i class=\"bi bi-collection\"> </i>\n      </span>\n      <span>{{ collection.modelName }}</span>\n    </div>\n    <div class=\"collection-tile__content\">\n      <div class=\"collection-tile__title\">\n        <a\n          :href=\"`${collection.publicUrl}`\"\n          class=\"stretched-link\"\n          data-testid=\"link-material\"\n        >\n          {{ collection.name }}\n        </a>\n      </div>\n      <div class=\"collection-tile__footer\">\n        <div class=\"collection-tile__author\">\n          {{ collection.user.publicDisplayName }}\n        </div>\n        <span\n          v-if=\"collection.publishedAt\"\n          class=\"d-none d-sm-flex text-muted font-xs\"\n        >\n          {{ d(new Date(collection.publishedAt), \"numeric\") }}\n        </span>\n      </div>\n    </div>\n    <div class=\"collection-tile__actions\">\n      <MaterialCounts\n        :kind=\"AppBookmarkableEnum.COLLECTION\"\n        :material-id=\"collection.id\"\n        :author-id=\"collection.userId\"\n        :bookmarks-count=\"collection.bookmarksCount\"\n        :name=\"collection.name || ''\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.collection-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  &__image-wrapper {\n    position: relative;\n    width: 100%;\n    height: 11.5rem;\n    object-fit: cover;\n    display: block;\n    overflow: hidden;\n\n    @include media-breakpoint-down(sm) {\n      display: block;\n      position: relative;\n      left: 0;\n      height: auto;\n      max-width: 4.85rem;\n      max-height: 8.3125rem;\n    }\n  }\n\n  &__image {\n    object-fit: cover;\n    width: 100%;\n    min-height: 100%;\n\n    @include media-breakpoint-down(sm) {\n      height: 100%;\n    }\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-300;\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      overflow: auto;\n      height: fit-content;\n    }\n\n    @include media-breakpoint-down(sm) {\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      }\n    }\n  }\n\n  &__footer {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    justify-content: space-between;\n    background: $color-white;\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":["props","__props","userStore","useUserStore","isAuthor","computed","bookmarked","toggleBookmark","useBookmark","d","useI18n"],"mappings":"+sBAGA,MAAMA,EAAQC,EAeRC,EAAYC,EAAa,EACzBC,EAAWC,EAAS,IAAML,EAAM,WAAaE,EAAU,MAAM,EAAE,EAE/D,CAAE,WAAAI,EAAY,eAAAC,CAAA,EAAmBC,EACrCR,EAAM,KACNA,EAAM,WACNI,CACF,miCCpBM,KAAA,CAAE,EAAAK,CAAE,EAAIC,EAAQ"}