{"version":3,"file":"7LxbEmS4.js","sources":["../../../../src/components/shop/product/deliveryTime.vue"],"sourcesContent":["<template>\n  <div class=\"font-roboto text-border-dark\">\n    <div\n      :class=\"[\n        'flex flex-row',\n        {\n          'justify-end': position === 'end',\n          'justify-start': position === 'start',\n        },\n      ]\"\n    >\n      <div class=\"dot flexbox-item\" :class=\"dotColorClass\"></div>\n      <div class=\"flexbox-item leading-sm pl-xs\">\n        {{ t(getAvailabilityTransKey()) }}\n      </div>\n      <div v-if=\"showHint\" class=\"self-center pl-xs\">\n        <DynamicPopup>\n          <template #trigger>\n            <Icon\n              icon-class=\"fad fa-circle-info\"\n              style=\"\n                --fa-secondary-color: var(--thm-status-warn-base);\n                --fa-secondary-opacity: 1;\n              \"\n            />\n          </template>\n          <template #content>\n            <InfoFrame>\n              <div class=\"max-w-[450px]\">\n                {{ t('shop.product.availabilityState.discontinuedItem.info') }}\n              </div>\n            </InfoFrame>\n          </template>\n        </DynamicPopup>\n      </div>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { DynamicPopup, Icon } from '~/complib';\nimport InfoFrame from '~/components/formFields/components/infoFrame.vue';\nimport {\n  ProductAvailability,\n  type ProductAvailabilityState,\n} from '~/@types/product-availibility';\nimport type { CustomDeliveryTime } from '~/server/transformers/shop/product/types';\n\nconst { t } = useTrans();\n\nconst props = defineProps({\n  deliveryTime: {\n    type: Object as PropType<CustomDeliveryTime>,\n    required: true,\n  },\n  availabilityState: {\n    type: String as PropType<ProductAvailabilityState>,\n    required: true,\n    default: ProductAvailability.AVAILABLE,\n  },\n  position: {\n    type: String as PropType<'start' | 'end'>,\n    required: false,\n    default: 'start',\n  },\n});\n\nconst dotColorClass = ref('');\n\nconst getAvailabilityTransKey = () => {\n  switch (props.availabilityState) {\n    case ProductAvailability.NOT_BUYABLE:\n      dotColorClass.value = 'bg-status-danger-base';\n      return 'shop.product.availabilityState.notAvailable';\n    case ProductAvailability.TMP_NOT_BUYABLE:\n      dotColorClass.value = 'bg-status-danger-base';\n      return 'shop.product.availabilityState.tmpNotAvailable';\n    default:\n      if (props.deliveryTime.min === 1) {\n        dotColorClass.value = 'bg-status-success-base';\n        return 'shop.product.availabilityState.available';\n      }\n\n      dotColorClass.value = 'bg-status-warn-base';\n      return 'shop.product.availabilityState.availableSoon';\n  }\n};\n\nconst showHint = computed(() => {\n  return props.availabilityState === ProductAvailability.DISCONTINUED_ITEM;\n});\n</script>\n\n<style scoped lang=\"postcss\">\n.dot {\n  @apply w-[8px] md:w-xs h-[8px] md:h-xs mr-[5px] p-1 rounded-lg inline-block self-center;\n}\n</style>\n"],"names":["t","useTrans","props","__props","dotColorClass","ref","getAvailabilityTransKey","ProductAvailability","showHint","computed"],"mappings":"mpBA+CM,KAAA,CAAE,EAAAA,GAAMC,IAERC,EAAQC,EAiBRC,EAAgBC,EAAI,EAAE,EAEtBC,EAA0B,IAAM,CACpC,OAAQJ,EAAM,kBAAmB,CAC/B,KAAKK,EAAoB,YACvB,OAAAH,EAAc,MAAQ,wBACf,8CACT,KAAKG,EAAoB,gBACvB,OAAAH,EAAc,MAAQ,wBACf,iDACT,QACM,OAAAF,EAAM,aAAa,MAAQ,GAC7BE,EAAc,MAAQ,yBACf,6CAGTA,EAAc,MAAQ,sBACf,+CACX,CAAA,EAGII,EAAWC,EAAS,IACjBP,EAAM,oBAAsBK,EAAoB,iBACxD"}