{"version":3,"file":"CategoryTile.765a869f.js","sources":["../../../../components/category/CategoryTile.vue"],"sourcesContent":["<template>\n  <div\n    class=\"category-tile\"\n    :class=\"[\n      'category-tile--' + type + brandClass,\n      {\n        'category-tile--ellipsis': useEllipsis\n      }\n    ]\"\n  >\n    <nuxt-link\n      class=\"category-tile__link cardTile\"\n      :to=\"getLink(category.TechnicalName)\"\n    >\n      <div class=\"category-tile__link__left\">\n        <div\n          class=\"category-tile__link__left__inchIcon\"\n          v-if=\"category.IsInchCategory && showInchIcon\"\n          :title=\"$tv('inchIconText', 'categories')\"\n        >\n          <Ruler />\n        </div>\n        <div class=\"category-tile__link__left__image\">\n          <img\n            v-if=\"lazy\"\n            :src=\"imageUrl(category)\"\n            :alt=\"'Design sketch '+$tv(category.TechnicalName, 'categories')\"\n            v-lazy-load\n          >\n          <img\n            v-else\n            :src=\"imageUrl(category)\"\n            :alt=\"'Design sketch '+$tv(category.TechnicalName, 'categories')\"\n          >\n        </div>\n        <div\n          class=\"category-tile__link__left__name\"\n        >\n          {{ $tv(category.TechnicalName, 'categories') }}\n        </div>\n      </div>\n      <div class=\"category-tile__link__right\">\n        <div\n          class=\"category-tile__link__right__description\"\n        >\n          <span class=\"ellipsis-text\">{{ category.ShortDescription }}</span>\n        </div>\n        <div class=\"category-tile__link__right__arrow\">\n          <NavigationChevronRight />\n        </div>\n      </div>\n    </nuxt-link>\n  </div>\n</template>\n<script>\nimport itemImageUrlMixin from '~/mixins/item_image_url'\nimport {getUrlFromTechnicalName} from '~/mixins/category_urls'\nimport {REGION_KEYS} from '~/assets/js/constants.js'\nimport NavigationChevronRight from '~/assets/icons/navigation_chevron_right.svg?component'\nimport Ruler from '~/assets/icons/ruler.svg?component'\n\nexport default {\n  components: {NavigationChevronRight, Ruler},\n  mixins: [itemImageUrlMixin],\n  props: {\n    category: {\n      type: Object,\n      default () {\n        return {}\n      }\n    },\n    type: {\n      type: String,\n      default () {\n        return 'small'\n      }\n    },\n    path: {\n      type: String,\n      default () {\n        return ''\n      }\n    },\n    lazy: {\n      type: Boolean,\n      default () {\n        return false\n      }\n    }\n  },\n  data () {\n    return {\n      image: null\n    }\n  },\n  computed: {\n    brandClass() {\n      if (this.category?.brands) {\n        let brandCodes = this.category?.brands.map(b => b.Code.toLowerCase()).sort()\n        return ` brand-${brandCodes.join('')}`\n      }\n      return null\n    },\n    showInchIcon() {\n      return this.$globalization.__currentRegion === REGION_KEYS.NA\n    },\n    useEllipsis() {\n      const nameParts = this.$tv(this.category?.TechnicalName, 'categories').split(' ')\n      return nameParts.length === 1 && nameParts[0].length > 14\n    }\n  },\n  methods: {\n    getLink(name) {\n      return this.localePath(this.path + '/' + getUrlFromTechnicalName(name, this.$i18n.locale), this.$i18n.locale)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.category-tile {\n  .category-tile__link {\n    display: flex;\n    flex-direction: row;\n    background-color: $color__content--background__primary;\n    color: $color__text__default;\n    width: 24.5rem;\n\n    &__left {\n      display: flex;\n      flex-direction: column-reverse;\n      position: relative;\n\n      &__inchIcon svg {\n        width: 2rem;\n        height: 2rem;\n        position: absolute;\n        right: 0;\n        padding: .25rem;\n        transform: rotateZ(75deg);\n        fill: $color--btn__secondary;\n      }\n\n      &__image {\n        display: flex;\n        align-items: flex-end;\n        justify-content: flex-start;\n        pointer-events: none;\n        height: 7.875rem;\n\n        @include breakpoint-down($md) {\n          height: 5.563rem;\n        }\n\n        img {\n          max-height: calc(100% - .75rem);\n        }\n      }\n\n      &__name {\n        display: flex;\n        align-items: center;\n        padding: 0 .375rem;\n        border-top: .063rem solid $color--category-tile__border;\n        min-height: 1.5rem;\n        font-size: $base-text-font-size;\n      }\n    }\n  }\n\n  &--small {\n    .category-tile__link {\n      flex-direction: column;\n      width: 9.75rem;\n\n      @include breakpoint-down($md) {\n        width: 6.75rem;\n      }\n\n      .category-tile__link__left {\n        flex-direction: column;\n      }\n\n      .category-tile__link__right {\n        display: none;\n      }\n    }\n  }\n\n  &--medium {\n    @include breakpoint-down($md) {\n      flex-basis: 100%;\n    }\n\n    .category-tile__link {\n      color: $color__text__default;\n      box-shadow: 0 .188rem .375rem $color--card__shadow;\n\n      .category-tile__link__left {\n        width: 50%;\n        color: $color__primary;\n        font-weight: $base-text-font-weight-bold;\n\n        &__name {\n          border-top: 0;\n\n          @include breakpoint-up($md) {\n            padding-left: $default-margin-padding-width-small;\n            padding-top: .375rem;\n          }\n        }\n\n        &__image {\n          @include breakpoint-up($md) {\n            height: 7.5rem;\n          }\n        }\n      }\n\n      .category-tile__link__right {\n        width: 50%;\n        margin: .75rem 1.125rem .5rem .75rem;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n\n        &__description {\n          height: 6.438rem;\n          overflow: hidden;\n          font-weight: $base-text-font-weight-light;\n          font-size: $base-text-font-size;\n          display: -webkit-box;\n          -webkit-line-clamp: 6;\n          -webkit-box-orient: vertical;\n\n          .ellipsis-text {\n            display: -webkit-box;\n            -webkit-line-clamp: 6;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n          }\n        }\n\n        &__arrow {\n          display: flex;\n          justify-content: flex-end;\n          font-size: 1.5rem;\n          width: 100%;\n          color: $color__default;\n\n          .icon--svg {\n            position: relative;\n            right: -.75rem;\n          }\n        }\n      }\n\n      @include breakpoint-down($md) {\n        width: 100%;\n        height: 3.125rem;\n\n        .category-tile__link__left {\n          flex-direction: column;\n          justify-content: center;\n          width: calc(100% - 1.875rem);\n\n          &__name {\n            font-size: $base-text-font-size;\n            line-height: $base-text-line-height;\n          }\n\n          &__image {\n            display: none;\n          }\n        }\n\n        .category-tile__link__right {\n          width: 1.25rem;\n          margin: 0 $default-margin-padding-width-small 0 0;\n          justify-content: center;\n\n          &__description {\n            display: none;\n          }\n        }\n      }\n    }\n  }\n\n  @include breakpoint-down($sm) {\n    width: calc(33% - (#{$default-margin-padding-width-small}));\n\n    & > a.category-tile__link.cardTile {\n      display: flex;\n      flex-grow: 1;\n      width: auto;\n    }\n  }\n\n  @include breakpoint-down($xs) {\n    width: calc(50% - (#{$default-margin-padding-width-small}));\n  }\n\n  &--ellipsis {\n    .category-tile__link__left__name {\n      display: inline;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n      line-height: 1.5rem;\n    }\n  }\n}\n</style>\n"],"names":["_sfc_main","NavigationChevronRight","Ruler","itemImageUrlMixin","_a","_b","b","REGION_KEYS","nameParts","name","getUrlFromTechnicalName","_hoisted_1","_hoisted_3","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_createElementBlock","$props","$options","_createVNode","_component_nuxt_link","_createElementVNode","_ctx","_component_Ruler","_toDisplayString","_component_NavigationChevronRight"],"mappings":"mUA6DA,MAAKA,EAAU,CACb,WAAY,CAAC,uBAAAC,EAAwB,MAAAC,CAAK,EAC1C,OAAQ,CAACC,CAAiB,EAC1B,MAAO,CACL,SAAU,CACR,KAAM,OACN,SAAW,CACT,MAAO,CAAC,CACV,CACD,EACD,KAAM,CACJ,KAAM,OACN,SAAW,CACT,MAAO,OACT,CACD,EACD,KAAM,CACJ,KAAM,OACN,SAAW,CACT,MAAO,EACT,CACD,EACD,KAAM,CACJ,KAAM,QACN,SAAW,CACT,MAAO,EACT,CACF,CACD,EACD,MAAQ,CACN,MAAO,CACL,MAAO,IACT,CACD,EACD,SAAU,CACR,YAAa,SACX,OAAIC,EAAA,KAAK,WAAL,MAAAA,EAAe,OAEV,YADUC,EAAA,KAAK,WAAL,YAAAA,EAAe,OAAO,IAAIC,GAAKA,EAAE,KAAK,YAAa,GAAE,QAC1C,KAAK,EAAE,IAE9B,IACR,EACD,cAAe,CACb,OAAO,KAAK,eAAe,kBAAoBC,EAAY,EAC5D,EACD,aAAc,OACZ,MAAMC,EAAY,KAAK,KAAIJ,EAAA,KAAK,WAAL,YAAAA,EAAe,cAAe,YAAY,EAAE,MAAM,GAAG,EAChF,OAAOI,EAAU,SAAW,GAAKA,EAAU,CAAC,EAAE,OAAS,EACzD,CACD,EACD,QAAS,CACP,QAAQC,EAAM,CACZ,OAAO,KAAK,WAAW,KAAK,KAAO,IAAMC,EAAwBD,EAAM,KAAK,MAAM,MAAM,EAAG,KAAK,MAAM,MAAM,CAC9G,CACF,CACF,EAtGWE,EAAA,CAAA,MAAM,2BAA2B,cAQ/BC,EAAA,CAAA,MAAM,kCAAkC,kCAc3CC,EAAA,CAAA,MAAM,iCAAiC,EAKtCC,EAAA,CAAA,MAAM,4BAA4B,EAEnCC,EAAA,CAAA,MAAM,yCAAyC,EAEzCC,EAAA,CAAA,MAAM,eAAe,EAExBC,EAAA,CAAA,MAAM,mCAAmC,2GA9CpDC,EAmDM,MAAA,CAlDJ,SAAM,gBAAe,CACe,kBAAAC,EAAA,KAAOC,EAAU,sCAA6CA,EAAW,kBAO7GC,EAyCYC,EAAA,CAxCV,MAAM,+BACL,GAAIF,EAAA,QAAQD,EAAA,SAAS,aAAa,cAEnC,IA0BM,CA1BNI,EA0BM,MA1BNZ,EA0BM,CAvBIQ,EAAQ,SAAC,gBAAkBC,EAAY,kBAF/CF,EAMM,MAAA,OALJ,MAAM,sCAEL,MAAOM,EAAG,IAAA,eAAA,YAAA,IAEXH,EAASI,CAAA,kBAEXF,EAYM,MAZNX,EAYM,CAVIO,EAAI,YADZD,EAKC,MAAA,OALI,QAAQ,OAEV,IAAKM,EAAQ,SAACL,EAAQ,QAAA,EACtB,IAAsB,iBAAAK,EAAA,IAAIL,EAAA,SAAS,cAAa,YAAA,0BAGnDD,EAIC,MAAA,OAJI,QAAQ,OAEV,IAAKM,EAAQ,SAACL,EAAQ,QAAA,EACtB,IAAsB,iBAAAK,EAAA,IAAIL,EAAA,SAAS,cAAa,YAAA,gBAGrDI,EAIM,MAJNV,EAIMa,EADDF,MAAIL,EAAA,SAAS,cAAa,YAAA,CAAA,EAAA,CAAA,IAGjCI,EASM,MATNT,EASM,CARJS,EAIM,MAJNR,EAIM,CADJQ,EAAkE,OAAlEP,EAA+BU,EAAAP,EAAA,SAAS,gBAAgB,EAAA,CAAA,IAE1DI,EAEM,MAFNN,EAEM,CADJI,EAA0BM,CAAA"}