{"version":3,"file":"index.-xYAkgoe.js","sources":["../../../../components/cp/CpSection/CpSectionCatalogBrands/CpSectionCatalogBrands.vue","../../../../components/cp/CpFilterSideBar/CpFilterSidebarBrands/CpFilterSidebarBrands.vue","../../../../pages/brands/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import useCpBem from '~/composables/useCpBem';\n  import type {IBrands} from '~/utils/fixtures/brands.fixtures';\n  import CpSectionHeader from '~/components/cp/CpSection/CpSectionHeader/CpSectionHeader.vue';\n  import CpCardBrand from '~/components/cp/CpCardBrand/CpCardBrand.vue';\n\n  defineProps<{\n    brands: Array<IBrands>\n    /** props for testing */\n    alphabeticGroup: boolean,\n    headLine: string,\n  }>();\n\n  const {b, e, em} = useCpBem('cp-section-catalog-brands');\n</script>\n\n<template>\n    <div :class=\"b\">\n        <CpSectionHeader\n            v-if=\"alphabeticGroup\"\n            :title=\"headLine\"\n            type=\"h2\"\n            show-top-border\n            data-testid=\"brands-header\"\n        />\n        <div :class=\"e('brands-container')\">\n            <div :class=\"em('brands-box', { left: brands.length < 3 })\">\n                <div v-for=\"item in brands\" :key=\"item.id\" :class=\"e('brand-box')\">\n                    <CpCardBrand\n                        :id=\"item.id\"\n                        data-testid=\"brand-card\"\n                        :image=\"item.image\"\n                        :name=\"item.title\"\n                        :link=\"item.link\"\n                    />\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n\n<style scoped lang=\"scss\">\n  .cp-section-catalog-brands {\n    &__brands-container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: $cp-gutter;\n    }\n    &__brands-box {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      width: 100%;\n      gap: $cp-gutter;\n    }\n    &__brands-box--left {\n      justify-content: left;\n    }\n    &__brand-box {\n      width: calc((100% - 32px) / 3);\n    }\n  }\n</style>\n<i18n locale=\"es-US\">\n  featuredBrands: \"Marcas destacadas\"\n  search: \"Resultados de la búsqueda\"\n  AtoCBrands: \"Ver marcas de “A-C”\"\n  DtoFBrands: \"Ver marcas de “D-F”\"\n</i18n>\n","<script lang=\"ts\" setup>\n  import {useI18n} from 'vue-i18n';\n  import {computed} from 'vue';\n  import useCpBem from '~/composables/useCpBem';\n  import CpDropdownSectionRadio from '~/components/cp/CpFilterSideBar/Constructors/CpDropdownSectionRadio/CpDropdownSectionRadio.vue';\n  import CpSectionAppliedFilter from '~/components/cp/CpFilterSideBar/Constructors/CpSectionAppliedFilter/CpSectionAppliedFilter.vue';\n  import CpButton from '~/components/cp/CpButton/CpButton.vue';\n  import CpLink from '~/components/cp/CpLink/CpLink.vue';\n  import CpSectionHeader from '~/components/cp/CpSection/CpSectionHeader/CpSectionHeader.vue';\n  import {useBrandsStore} from '~/stores';\n  import type {IAppliedFilterType} from '~/types';\n\n  const show = defineModel<boolean>('show');\n\n  const brandsStore = useBrandsStore();\n\n  const emit = defineEmits<{\n    (e: 'remove-filter'): void\n    (e: 'change-value', value: string|number): void\n  }>();\n\n  const {b, e} = useCpBem('cp-filter-side-bar-brands');\n  const {t} = useI18n();\n\n  const change = async (value: any) => {\n    brandsStore.selectedFilter = value;\n    emit('change-value', value);\n    await brandsStore.applyFilters();\n  };\n\n  const removeFilter = async () => {\n    emit('remove-filter');\n    brandsStore.searchValue = '';\n    await brandsStore.applyFilters();\n  };\n\n  const appliedFilters = computed<IAppliedFilterType[]>(() => {\n    if (brandsStore.searchValue && brandsStore.searchValue.length > 0) {\n      return [{\n        value: 'search',\n        label: t('search'),\n        appliedFilters: [{\n          label: brandsStore.searchValue,\n          value: brandsStore.searchValue,\n        }],\n      }];\n    }\n    return [];\n  });\n</script>\n<template>\n    <div :class=\"b\">\n        <v-navigation-drawer v-model=\"show\" width=\"280\" location=\"right\" temporary>\n            <div>\n                <CpSectionHeader :title=\"t('filters')\" type=\"h1-fake\" />\n                <CpDropdownSectionRadio\n                    v-model=\"brandsStore.selectedFilter\"\n                    :title=\"t('brandGroups')\"\n                    :items=\"brandsStore.filterElementsData\"\n                    disable-expand\n                    @update:model-value=\"change\"\n                />\n                <CpSectionAppliedFilter\n                    v-if=\"brandsStore.searchValue.length > 0\"\n                    v-model=\"appliedFilters\"\n                    @remove-all-filters=\"removeFilter\"\n                    @remove-filter=\"removeFilter\"\n                />\n            </div>\n\n            <div :class=\"e('button-container')\">\n                <CpButton\n                    data-testid=\"filter-results-button\"\n                    :label=\"t('showResults')\"\n                    full-width\n                    type=\"button\"\n                    kind=\"label\"\n                    @click=\"show = false\"\n                />\n                <CpLink\n                    :class=\"e('remove-all-links')\"\n                    :with-icon=\"false\"\n                    full-width\n                    :disabled=\"brandsStore.searchValue.length === 0\"\n                    color=\"critical\"\n                    @click=\"removeFilter\"\n                >\n                    {{ t('removeFilters') }}\n                </CpLink>\n            </div>\n        </v-navigation-drawer>\n    </div>\n</template>\n<style scoped lang=\"scss\">\n  .cp-filter-side-bar-brands {\n    &__container {\n      border-top: $cp-border-standard;\n      padding: $cp-gutter;\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter;\n    }\n\n    &__button-container {\n      display: flex;\n      flex-direction: column;\n      gap: $cp-gutter-xsmall;\n      border-top: $cp-border-standard;\n      padding: $cp-gutter $cp-gutter $cp-gutter-small $cp-gutter;\n    }\n\n    &__remove-all-links {\n      padding: $cp-gutter;\n    }\n\n    &:deep(.v-navigation-drawer__content)::-webkit-scrollbar {\n      width: 0;\n    }\n\n    &:deep(.v-navigation-drawer--temporary) {\n      border-top-left-radius: $cp-gutter;\n      overflow: hidden;\n    }\n\n    &:deep(.v-navigation-drawer--temporary) {\n      box-shadow: unset;\n    }\n\n    &:deep(.v-navigation-drawer) {\n      border-style: unset;\n      top: 72px !important;\n      height: calc(100% - 72px) !important;\n    }\n\n    &:deep(.v-navigation-drawer__content) {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n    }\n\n    &:deep(.v-navigation-drawer__scrim) {\n      position: fixed;\n    }\n  }\n</style>\n<i18n locale=\"es-US\" lang=\"yaml\">\nbrandGroups: 'Grupos de marca'\nshowResults: 'Ver resultados'\nremoveFilters: 'Eliminar todos los filtros'\nfilters: 'Filtros'\nsearch: 'Búsqueda'\n</i18n>\n","<script setup lang=\"ts\">\n  import {ref} from 'vue';\n  import CpFilterBar from '~/components/cp/CpFilterBar/CpFilterBar.vue';\n  import CpBreadcrumb from '~/components/cp/CpBreadcrumb/CpBreadcrumb.vue';\n  import CpSectionCatalogBrands from '~/components/cp/CpSection/CpSectionCatalogBrands/CpSectionCatalogBrands.vue';\n  import CpFilterSidebarBrands from '~/components/cp/CpFilterSideBar/CpFilterSidebarBrands/CpFilterSidebarBrands.vue';\n  import useCpBem from '~/composables/useCpBem';\n  import {useBrandsStore} from '~/stores/brandsStore';\n  import CpButton from '~/components/cp/CpButton/CpButton.vue';\n  import type {BreadCrumbItem} from '~/composables/useCatalogBreadCrumb';\n\n  /** Define store */\n  const brandsStore = useBrandsStore();\n  brandsStore.init();\n  const {t} = useI18n();\n\n  /** breadcrumb **/\n  const breadcrumbItems: BreadCrumbItem[] = [\n    {label: 'Inicio', value: {name: 'home'}},\n    {label: 'Todas las marcas', value: ''},\n  ];\n\n  const {b, e} = useCpBem('brands');\n\n  /** # Step 4 Search */\n  const searchTerm = ref<string>('');\n  const showFilterSideBar = ref<boolean>(false);\n  const el = ref<HTMLElement>();\n  const lastScrollPosition = ref<number>(0);\n  const showToTopButton = ref<boolean>(false);\n\n  const nextPage = async () => {\n    toTop();\n    await brandsStore.nextPage();\n  };\n\n  const toTop = () => {\n    if (!el.value) {\n return;\n}\n    el.value?.scrollTo({top: 0, behavior: 'smooth'});\n  };\n\n  const onScroll = () => {\n    if (!el.value) {\n return;\n}\n    showToTopButton.value = el.value.scrollTop > (el.value.offsetHeight) && lastScrollPosition.value > el.value.scrollTop;\n    lastScrollPosition.value = el.value.scrollTop;\n  };\n\n  const search = (clear: boolean) => {\n    if (searchTerm.value?.trim().length > 0 && !clear) {\n      brandsStore.searchValue = searchTerm.value;\n      brandsStore.selectedFilter = null;\n      brandsStore.applyFilters();\n    } else {\n      brandsStore.selectedFilter = 'Marcas destacadas';\n      brandsStore.searchValue = '';\n      brandsStore.applyFilters();\n    }\n  };\n\n  const showFeatured = () => {\n    brandsStore.selectedFilter = 'Marcas destacadas';\n    brandsStore.searchValue = '';\n    searchTerm.value = '';\n    brandsStore.applyFilters();\n  };\n\n  const titleEmptyState = computed(() => {\n    return `\"${searchTerm.value}\" ${t('atBrands')}`;\n  });\n\n</script>\n\n<template>\n    <div ref=\"el\" :class=\"b\" data-testid=\"brands-screen\" @scroll=\"onScroll\">\n        <CpFilterSidebarBrands\n            v-model:show=\"showFilterSideBar\"\n            @remove-filter=\"showFeatured\"\n            @remove-all-filters=\"showFeatured\"\n            @change-value=\"searchTerm = ''\"\n        />\n        <CpFilterBar\n            v-model=\"searchTerm\"\n            repository=\"marcas\"\n            search-term=\"marcas\"\n            :filters=\"brandsStore.searchValue.trim().length !== 0 ? 1 : 0\"\n            :results=\"brandsStore.total\"\n            :total-results=\"brandsStore.totalCategory\"\n            :catalog=\"false\"\n            @show-filters=\"showFilterSideBar = true\"\n            @submit=\"search(false)\"\n            @clear-bar=\"search(true)\"\n        />\n        <div>\n            <CpBreadcrumb no-border-bottom :items=\"breadcrumbItems\" />\n        </div>\n        <CpButtonRound\n            v-if=\"showToTopButton\"\n            icon=\"goToTop\"\n            :class=\"e('to-top-button')\"\n            @click=\"toTop\"\n        />\n        <div v-if=\"brandsStore.loading\">\n            <CpSkeleton kind=\"brands\" without-border />\n        </div>\n        <div v-if=\"!brandsStore.loading && brandsStore.data\">\n            <div v-if=\"brandsStore.total > 0\">\n                <CpSectionCatalogBrands\n                    v-for=\"group in brandsStore.data\"\n                    :key=\"group.title\"\n                    :brands=\"group.brands\"\n                    :alphabetic-group=\"true\"\n                    :head-line=\"group.title\"\n                />\n                <div v-if=\"brandsStore.selectedFilter\" :class=\"e('button-container')\">\n                    <CpButton\n                        data-testid=\"button-see-more-brands\"\n                        :label=\"brandsStore.getNextPageLabel\"\n                        kind=\"label\"\n                        hollow\n                        type=\"submit\"\n                        full-width\n                        @click=\"nextPage\"\n                    />\n                </div>\n            </div>\n            <CpEmptyState\n                v-else\n                :title=\"t('noResults')\"\n                :subtitle=\"titleEmptyState\"\n                icon=\"search_off\"\n                :button-label=\"t('backToFeatured')\"\n                is-search\n                @empty-state-action=\"showFeatured\"\n            />\n        </div>\n    </div>\n</template>\n<style scoped lang=\"scss\">\n  .brands {\n    max-height: inherit;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    height: 100%;\n    overflow-y: auto;\n\n    &__button-container {\n      padding: $cp-gutter;\n    }\n    &__to-top-button {\n      position: fixed;\n      bottom: calc(16px + 72px);\n      right: 16px;\n      z-index: 100;\n    }\n  }\n</style>\n<i18n locale=\"es-US\">\n  noResults: \"Sin resultados para: \"\n  atBrands: \" en Marcas\"\n  backToFeatured: \"Regresar a marcas destacadas\"\n  searchResult: \"Resultados de la búsqueda\"\n  AtoCBrands: \"Ver marcas de “A-C”\"\n</i18n>\n"],"names":["b","e","em","useCpBem","show","_useModel","brandsStore","useBrandsStore","emit","__emit","t","useI18n","change","value","removeFilter","appliedFilters","computed","breadcrumbItems","searchTerm","ref","showFilterSideBar","el","lastScrollPosition","showToTopButton","nextPage","toTop","_a","onScroll","search","clear","showFeatured","titleEmptyState"],"mappings":"29CAaE,KAAM,CAAC,EAAAA,EAAG,EAAAC,EAAG,GAAAC,CAAE,EAAIC,EAAS,2BAA2B,ikCCDjD,MAAAC,EAAOC,aAEPC,EAAcC,IAEdC,EAAOC,EAKP,CAAC,EAAAT,EAAG,EAAAC,CAAC,EAAIE,EAAS,2BAA2B,EAC7C,CAAC,EAAAO,GAAKC,IAENC,EAAS,MAAOC,GAAe,CACnCP,EAAY,eAAiBO,EAC7BL,EAAK,eAAgBK,CAAK,EAC1B,MAAMP,EAAY,cAAa,EAG3BQ,EAAe,SAAY,CAC/BN,EAAK,eAAe,EACpBF,EAAY,YAAc,GAC1B,MAAMA,EAAY,cAAa,EAG3BS,EAAiBC,EAA+B,IAChDV,EAAY,aAAeA,EAAY,YAAY,OAAS,EACvD,CAAC,CACN,MAAO,SACP,MAAOI,EAAE,QAAQ,EACjB,eAAgB,CAAC,CACf,MAAOJ,EAAY,YACnB,MAAOA,EAAY,WAAA,CACpB,CAAA,CACF,EAEI,EACR,ylDCpCD,MAAMA,EAAcC,IACpBD,EAAY,KAAK,EACX,KAAA,CAAC,EAAAI,GAAKC,IAGNM,EAAoC,CACxC,CAAC,MAAO,SAAU,MAAO,CAAC,KAAM,OAAO,EACvC,CAAC,MAAO,mBAAoB,MAAO,EAAE,CAAA,EAGjC,CAAC,EAAAjB,EAAG,EAAAC,CAAC,EAAIE,EAAS,QAAQ,EAG1Be,EAAaC,EAAY,EAAE,EAC3BC,EAAoBD,EAAa,EAAK,EACtCE,EAAKF,IACLG,EAAqBH,EAAY,CAAC,EAClCI,EAAkBJ,EAAa,EAAK,EAEpCK,EAAW,SAAY,CACrBC,IACN,MAAMnB,EAAY,UAAS,EAGvBmB,EAAQ,IAAM,OACbJ,EAAG,SAGRK,EAAAL,EAAG,QAAH,MAAAK,EAAU,SAAS,CAAC,IAAK,EAAG,SAAU,WAAS,EAG3CC,EAAW,IAAM,CAChBN,EAAG,QAGQE,EAAA,MAAQF,EAAG,MAAM,UAAaA,EAAG,MAAM,cAAiBC,EAAmB,MAAQD,EAAG,MAAM,UACzFC,EAAA,MAAQD,EAAG,MAAM,UAAA,EAGhCO,EAAUC,GAAmB,SAC7BH,EAAAR,EAAW,QAAX,YAAAQ,EAAkB,OAAO,QAAS,GAAK,CAACG,GAC1CvB,EAAY,YAAcY,EAAW,MACrCZ,EAAY,eAAiB,KAC7BA,EAAY,aAAa,IAEzBA,EAAY,eAAiB,oBAC7BA,EAAY,YAAc,GAC1BA,EAAY,aAAa,EAC3B,EAGIwB,EAAe,IAAM,CACzBxB,EAAY,eAAiB,oBAC7BA,EAAY,YAAc,GAC1BY,EAAW,MAAQ,GACnBZ,EAAY,aAAa,CAAA,EAGrByB,EAAkBf,EAAS,IACxB,IAAIE,EAAW,KAAK,KAAKR,EAAE,UAAU,CAAC,EAC9C"}