{"version":3,"file":"CpSectionAppliedFilter.GtO4OxUI.js","sources":["../../../../components/cp/CpFilterSideBar/Constructors/CpDropdownSectionRadio/CpDropdownSectionRadio.vue","../../../../components/cp/CpFilterSideBar/Constructors/CpSectionAppliedFilter/CpSectionAppliedFilter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport {useI18n} from 'vue-i18n';\nimport {computed, ref} from 'vue';\nimport useCpBem from '~/composables/useCpBem';\nimport CpText from '~/components/cp/CpText/CpText.vue';\nimport CpButtonIcon from '~/components/cp/CpButtonIcon/CpButtonIcon.vue';\nimport CpDivider from '~/components/cp/CpDivider/CpDivider.vue';\nimport type {IRadioButtonItem} from '~/types';\nimport CpIconStandard from '~/components/cp/CpIcon/CpIconStandard/CpIconStandard.vue';\n\nconst props = withDefaults(\n  defineProps<{\n    items: IRadioButtonItem<string>[]\n    title: string\n\n    // Props Aux\n    disableExpand?: boolean\n    hideAmount?: boolean\n  }>(), {\n    disableExpand: false,\n    hideAmount: false,\n  },\n);\n\nconst model = defineModel();\n\nconst {b, e} = useCpBem('cp-dropdown-section-radio');\nconst {t} = useI18n();\nconst expand = ref<boolean>(true);\nconst allValues = ref<boolean>(false);\nconst minItems = ref<number>(5);\n\ndefineEmits<{\n  (e: 'change-value', value: string): void\n}>();\n\nconst itemSelected = computed<IRadioButtonItem<string> | null>(() => {\n  const selected = props.items.find((a) => a.value === model.value);\n  if (selected) {\n    return selected;\n  }\n  return null;\n});\n\n</script>\n<template>\n    <div :class=\"b\">\n        <div :class=\"e('container-dropdown-header')\" @click=\"expand = disableExpand || !expand\">\n            <div :class=\"e('text-dropdown')\">\n                <CpText variant=\"subheading\">\n                    {{ title }}\n                </CpText>\n                <CpText variant=\"caption-bold\" type=\"primary\">\n                    {{ itemSelected?.label ?? '' }}\n                </CpText>\n            </div>\n            <div v-if=\"!disableExpand\" :class=\"e('toggle-icon')\">\n                <CpButtonIcon :kind=\"expand ? 'expand_less' : 'expand_more'\" />\n            </div>\n        </div>\n\n        <Transition name=\"list\">\n            <div v-if=\"expand\">\n                <CpDivider />\n                <v-radio-group\n                    v-model=\"model\"\n                    hide-details\n                    @update:model-value=\"$emit('change-value', $event as string)\"\n                >\n                    <TransitionGroup name=\"element\" tag=\"div\">\n                        <div\n                            v-for=\"item in (allValues ? items : items.slice(0, minItems))\"\n                            :key=\"item.value\"\n                            :class=\"e`radio-container`\"\n                            data-testid=\"filters-order-by\"\n                        >\n                            <v-radio :value=\"item.value\" color=\"#0066BB\" :ripple=\"false\">\n                                <template #label>\n                                    <div :class=\"[e`radio-text`,'pl-1']\">\n                                        <CpText\n                                            :variant=\"item.value === model ? 'body-bold' : 'body-regular'\"\n                                            type=\"primary\"\n                                        >\n                                            {{ item.label }}\n                                        </CpText>\n                                        <CpText :variant=\"item.value === model ? 'body-bold' : 'body-regular'\">\n                                            {{ item.quantity }}\n                                        </CpText>\n                                    </div>\n                                </template>\n                            </v-radio>\n                        </div>\n                    </TransitionGroup>\n                    <div v-if=\"items.length > minItems\" :class=\"e`toggle-container`\">\n                        <div :class=\"e('show-more-btn')\" @click=\"allValues = !allValues\">\n                            <CpIconStandard\n                                :icon=\"allValues ? 'expand_less' : 'expand_more'\"\n                                type=\"primary\"\n                                kind=\"standard\"\n                            />\n                            <CpText\n                                variant=\"body-bold\"\n                                type=\"primary\"\n                            >\n                                {{ allValues ? t('showLess') : t('showMore', {count: items.length - minItems}) }}\n                            </CpText>\n                        </div>\n                    </div>\n                </v-radio-group>\n            </div>\n        </Transition>\n    </div>\n</template>\n<style scoped lang=\"scss\">\n@import \"assets/style/global\";\n.cp-dropdown-section-radio {\n\n  &__show-more-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    padding: 12px $cp-gutter;\n    gap: $cp-gutter-small;\n    height: $cp-gutter-xlarge;\n    border-radius: $cp-gutter-small;\n  }\n\n  &__toggle-container {\n    padding: $cp-gutter-small $cp-gutter;\n  }\n\n  &__toggle-icon {\n    display: flex;\n    align-items: center;\n  }\n\n  .list-enter-active,\n  .list-leave-active {\n    transition: all .5s ease;\n    max-height: 300px;\n    overflow: hidden;\n  }\n  .list-enter-from,\n  .list-leave-to {\n    opacity: 0;\n    max-height: 0;\n  }\n\n  .element-enter-active,\n  .element-leave-active {\n    transition: all .5s ease;\n    max-height: 60px;\n  }\n  .element-enter-from,\n  .element-leave-to {\n    opacity: 0;\n    max-height: 0;\n    padding: 0 $cp-gutter;\n  }\n\n  &__container-dropdown-header {\n    padding: $cp-gutter-small $cp-gutter;\n    display: flex;\n    flex-direction: row;\n    gap: $cp-gutter-small;\n    min-height: 44px;\n    cursor: pointer;\n  }\n  &__text-dropdown {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  &__radio-container {\n    padding: $cp-gutter-small $cp-gutter;\n  }\n  &__radio-text {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n  }\n  &:deep(.v-label) {\n    opacity: unset;\n  }\n  &:deep(.v-selection-control__input > .v-icon){\n    color: var(--color-primary);\n    opacity: unset;\n  }\n  &:deep(.v-selection-control__wrapper) {\n    width: unset;\n    height: unset;\n  }\n  &:deep(.v-selection-control__input) {\n    height: unset;\n    width: unset;\n  }\n  &:deep(.v-btn-group--density-default.v-btn-group) {\n    height: unset;\n  }\n  &:deep(.v-label) {\n    width: 100%;\n  }\n}\n</style>\n<i18n locale=\"es-US\" lang=\"yaml\">\n  showMore: 'Mostrar {count} más'\n  showLess: 'Mostrar menos'\n</i18n>\n","\n<script lang=\"ts\" setup>\nimport {useI18n} from 'vue-i18n';\nimport useCpBem from '~/composables/useCpBem';\nimport CpText from '~/components/cp/CpText/CpText.vue';\nimport CpLink from '~/components/cp/CpLink/CpLink.vue';\nimport CpSectionHeader from '~/components/cp/CpSection/CpSectionHeader/CpSectionHeader.vue';\nimport CpFilterPill from '~/components/cp/CpFilterPill/CpFilterPill.vue';\nimport type {IAppliedFilterType} from '~/types';\n\nconst model = defineModel<IAppliedFilterType[]>();\n\nconst {b, e} = useCpBem('cp-dropdown-section-applied-filter');\nconst {t} = useI18n();\n\ndefineEmits<{\n  (e: 'change-value', value: string): void\n  (e: 'remove-all-filters'): void\n  (e: 'remove-filter', filterType: string, appliedFilter: any): void\n}>();\n\n</script>\n<template>\n    <div :class=\"b\">\n        <CpSectionHeader :class=\"e`section-header`\" :title=\"t('appliedFilters')\" type=\"h1-fake\" show-top-border />\n        <div :class=\"e('remove-filters-container')\">\n            <CpLink :with-icon=\"false\" full-width color=\"critical\" @click=\"$emit('remove-all-filters')\">\n                {{ t('removeFilters') }}\n            </CpLink>\n        </div>\n        <div :class=\"e('applied-filters-container')\">\n            <div v-for=\"filterType in model\" :key=\"filterType.value\" :class=\"e('applied-filter-container')\">\n                <CpText variant=\"subheading\">\n                    {{ filterType.label }}\n                </CpText>\n                <div :class=\"e('pills-container')\">\n                    <template v-for=\"appliedFilter in filterType.appliedFilters\" :key=\"appliedFilter.value\">\n                        <CpFilterPill\n                            :filter-tex=\"appliedFilter.label\"\n                            @click=\"$emit('remove-filter', filterType.value, appliedFilter.value)\"\n                        />\n                    </template>\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n<style scoped lang=\"scss\">\n@import \"assets/style/global\";\n\n.cp-dropdown-section-applied-filter {\n  &__remove-filters-container {\n    padding: $cp-gutter;\n  }\n  &__applied-filters-container {\n    display: flex;\n    flex-direction: column;\n    gap: $cp-gutter;\n    padding: $cp-gutter;\n  }\n\n  &__applied-filter-container {\n    display: flex;\n    flex-direction: column;\n    gap: $cp-gutter-small;\n  }\n\n  &__pills-container {\n    display: flex;\n    flex-direction: row;\n    gap: $cp-gutter-small;\n    flex-wrap: wrap;\n  }\n}\n</style>\n<i18n locale=\"es-US\" lang=\"yaml\">\nappliedFilters: 'Filtros aplicados'\nremoveFilters: 'Eliminar filtros'\n</i18n>\n"],"names":["props","__props","model","_useModel","b","e","useCpBem","t","useI18n","expand","ref","allValues","minItems","itemSelected","computed","selected","a"],"mappings":"2hCAUA,MAAMA,EAAQC,EAcRC,EAAQC,kBAER,CAAC,EAAAC,EAAG,EAAAC,CAAC,EAAIC,EAAS,2BAA2B,EAC7C,CAAC,EAAAC,GAAKC,IACNC,EAASC,EAAa,EAAI,EAC1BC,EAAYD,EAAa,EAAK,EAC9BE,EAAWF,EAAY,CAAC,EAMxBG,EAAeC,EAA0C,IAAM,CAC7D,MAAAC,EAAWf,EAAM,MAAM,KAAMgB,GAAMA,EAAE,QAAUd,EAAM,KAAK,EAChE,OAAIa,GAGG,IAAA,CACR,yxEChCK,MAAAb,EAAQC,kBAER,CAAC,EAAAC,EAAG,EAAAC,CAAC,EAAIC,EAAS,oCAAoC,EACtD,CAAC,EAAAC,GAAKC"}