{"version":3,"file":"CpPillCard.GEyiUe_n.js","sources":["../../../../components/cp/CpPill/CpPillCard/CpPillCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import useCpBem from '~/composables/useCpBem';\n  import CpIconStandard from '~/components/cp/CpIcon/CpIconStandard/CpIconStandard.vue';\n  import CpText from '~/components/cp/CpText/CpText.vue';\n  import type {ICpPillType} from '~/composables/useCpType';\n  import {useI18n} from 'vue-i18n';\n\n\n  withDefaults(defineProps<{\n    short?: boolean,\n    kind?: 'standard'|'discount',\n    variant: ICpPillType,\n    discount?: string | boolean,\n    amount?: string,\n    back?: boolean,\n    blackBorder?: boolean,\n  }>(), {\n    kind: 'standard',\n    variant: 'featuredProduct',\n  });\n\n  const {b, e, em} = useCpBem('cp-pill-card');\n  const {t} = useI18n();\n\n</script>\n\n<template>\n    <div :class=\"b\">\n        <div v-if=\"variant === 'offer-discount'\" :class=\"em('container', { mkt: true, left: true, 'small-padding': true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                -{{ discount }}%\n            </CpText>\n        </div>\n        <div v-else-if=\"variant ==='featured-short'\" :class=\"em('container', { mkt: true, left: true, 'feat-short': true, 'black-border': blackBorder })\">\n            <CpIconStandard kind=\"small\" icon=\"magic_button\" type=\"white\" />\n        </div>\n        <div v-else-if=\"variant ==='featured-large'\" :class=\"em('container', { mkt: true, left: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('featured') }}\n            </CpText>\n            <CpIconStandard kind=\"small\" icon=\"magic_button\" type=\"white\" />\n        </div>\n        <div v-else-if=\"variant === 'offer-label'\" :class=\"em('container', { mkt: true, left: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('offer') }}\n            </CpText>\n        </div>\n        <div v-else-if=\"variant === 'featured-offer'\" :class=\"em('container', { mkt: true, left: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                -{{ discount }}%\n            </CpText>\n            <CpIconStandard kind=\"small\" icon=\"magic_button\" type=\"white\" />\n        </div>\n        <div v-else-if=\"variant === 'Oos'\" :class=\"em('container', { 'neutral-extra-light': true, left: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('outOfStock') }}\n            </CpText>\n        </div>\n        <div v-else-if=\"variant ==='new-short'\" :class=\"em('container', { primary: true, left: true, 'feat-short': true, 'black-border': blackBorder })\">\n            <CpIconStandard kind=\"small\" icon=\"new_releases\" type=\"white\" />\n        </div>\n        <div v-else-if=\"variant ==='new-large'\" :class=\"em('container', { primary: true, left: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('newOne') }}\n            </CpText>\n            <CpIconStandard kind=\"small\" icon=\"new_releases\" type=\"white\" />\n        </div>\n\n        <div v-else-if=\"variant ==='featuredProduct'\" :class=\"em('container', {mkt: true, standard: true, 'black-border': blackBorder })\">\n            <CpText v-if=\"kind==='standard' && !short\" type=\"white\" variant=\"caption-bold\">\n                {{ t('featured') }}\n            </CpText>\n            <CpText v-if=\"kind==='discount'\" type=\"white\" variant=\"caption-bold\">\n                -{{ discount }}%\n            </CpText>\n            <CpIconStandard kind=\"small\" icon=\"magic_button\" type=\"white\" />\n        </div>\n        <div v-if=\"variant === 'offer'\" :class=\"em('container', {mkt: true, standard: true, 'black-border': blackBorder })\">\n            <CpText :class=\"e`discount`\" type=\"white\" variant=\"caption-bold\">\n                -{{ discount }}%\n            </CpText>\n        </div>\n        <div v-else-if=\"variant === 'gift'\" :class=\"em('container', {mkt: true, standard: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('gift') }}\n            </CpText>\n            <CpIconStandard kind=\"small\" icon=\"card_giftcard\" type=\"white\" />\n        </div>\n        <div v-else-if=\"variant === 'esd'\" :class=\"em('container', {primary: true, standard: true, esdDisplay: short, 'black-border': blackBorder })\">\n            <CpText v-if=\"!short\" type=\"white\" variant=\"caption-bold\">\n                {{ t('downloadable') }}\n            </CpText>\n            <CpIconStandard kind=\"small\" icon=\"download\" type=\"white\" :class=\"em('extra-width', {'back': back})\" />\n        </div>\n        <div v-else-if=\"variant === 'oosEol'\" :class=\"em('container', {neutral: true, standard: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('outOfStock') }}\n            </CpText>\n        </div>\n        <div v-else-if=\"variant === 'rowProduct'\" :class=\"em('container', {neutral: true, standard: true, 'feat-short': short, 'black-border': blackBorder })\">\n            <CpText v-if=\"!short\" type=\"white\" variant=\"caption-bold\">\n                {{ t('imported') }}\n            </CpText>\n            <CpIconStandard kind=\"small\" icon=\"public\" type=\"white\" :class=\"em('extra-width', {'back': back})\" />\n        </div>\n        <div v-else-if=\"variant === 'eol'\" :class=\"em('container', {white: true, rounded: true, 'black-border': blackBorder })\">\n            <CpText type=\"neutral\" variant=\"caption-bold\">\n                {{ t('maybeOutOfMarket') }}\n            </CpText>\n        </div>\n        <div v-else-if=\"variant === 'extendedTime'\" :class=\"em('container', {white: true, rounded: true, 'black-border': blackBorder })\">\n            <CpText type=\"neutral\" variant=\"caption-bold\">\n                {{ t('extendedDeliveryTime') }}\n            </CpText>\n        </div>\n        <div v-else-if=\"variant === 'bundle'\" :class=\"em('container', {mkt: true, rounded: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('bundleDiscount', [amount]) }}\n            </CpText>\n        </div>\n        <div v-else-if=\"variant === 'coupon'\" :class=\"em('container', {mkt: true, rounded: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('couponDiscount', [amount]) }}\n            </CpText>\n        </div>\n        <div v-else-if=\"variant === 'special-offer'\" :class=\"em('container', { mkt: true, left: true, 'black-border': blackBorder })\">\n            <CpText type=\"white\" variant=\"caption-bold\">\n                {{ t('specialOffer') }}\n            </CpText>\n        </div>\n    </div>\n</template>\n\n<style scoped lang=\"scss\">\n    .cp-pill-card {\n      width: fit-content;\n      height: 20px;\n      display: flex;\n      &__container {\n        display: flex;\n        gap: 4px;\n        justify-content: center;\n        align-items: center;\n        padding: 2px 8px;\n        border: var(--border);\n        border-right: 1px solid var(--color-white);\n        border-bottom: 1px solid var(--color-white);\n\n        &--black-border {\n          border-right: 1px solid var(--color-neutral-dark);\n          border-bottom: 1px solid var(--color-neutral-dark);\n        }\n        &--mkt {\n          background: var(--color-mkt);\n        }\n        &--primary {\n          background: var(--color-primary);\n        }\n        &--neutral {\n          background: var(--color-neutral);\n          padding: 4px 8px;\n        }\n        &--neutral-extra-light {\n          background: var(--color-neutral-extra-light);\n          padding: 4px 8px;\n        }\n        &--white {\n          background: var(--color-white);\n          border: 1px solid var(--color-neutral);\n        }\n        &--standard {\n          border-radius: 8px 0;\n        }\n        &--rounded {\n          border-radius: 16px;\n          padding: 4px 8px;\n        }\n        &--right {\n          border-radius: 0 0 0 8px;\n        }\n        &--left {\n          border-radius: 0 0 8px 0;\n        }\n        &--esd-display {\n          justify-content: flex-end;\n        }\n        &--small-padding {\n          padding: 4px 8px;\n        }\n        &--feat-short {\n          padding: 4px 8px 4px 16px;\n        }\n      }\n      &__extra-width {\n        &--back {\n          padding: 0 $cp-gutter-small 0 $cp-gutter;\n        }\n      }\n      &__discount {\n        padding: 2px;\n      }\n    }\n</style>\n\n<i18n locale=\"es-US\" lang=\"yaml\">\n  featured: 'Destacado'\n  offer: 'Oferta'\n  outOfStock: 'Agotado'\n  newOne: 'Nuevo'\n  gift: 'De regalo'\n  downloadable: 'Descargable'\n  imported: 'Importado'\n  maybeOutOfMarket: 'Quizá fuera del mercado'\n  extendedDeliveryTime: 'Tiempo de entrega prolongado'\n  bundleDiscount: 'Descuento por bundle ${0}'\n  couponDiscount: 'Descuento por cupón ${0}'\n  specialOffer: 'Precio especial'\n</i18n>\n"],"names":["b","e","em","useCpBem","t","useI18n"],"mappings":"+sBAqBE,KAAM,CAAC,EAAAA,EAAG,EAAAC,EAAG,GAAAC,CAAE,EAAIC,EAAS,cAAc,EACpC,CAAC,EAAAC,GAAKC;;;;;;;;"}