{"version":3,"file":"Pjd4MV3C.js","sources":["../../../../components/os-option-card.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Option } from '#imports'\nimport { isTest } from '#imports'\n\nconst props = defineProps<{\n  option?: Option\n  title?: string\n  quantity?: number\n  mode?: 'buy' | 'add' | 'quantity'\n  readonly?: boolean\n  displaySymbol?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (event: 'select'): void\n  (event: 'increment'): void\n  (event: 'decrement'): void\n  (event: 'change', value: number): void\n}>()\n\nconst mediaQuery = useMediaQuery()\n\nconst isSoldOut = computed(\n  () => !isTest() && (!props.option || props.option.stock === 0),\n)\n\nfunction change(e: CustomEvent) {\n  emit('change', e.detail.value)\n}\n</script>\n\n<template>\n  <ion-card\n    v-if=\"option\"\n    class=\"os-option-card\"\n    :class=\"{\n      'os-option-card--buy': mode === 'buy',\n      'os-option-card--add': (mode ?? 'add') === 'add',\n      'os-option-card--quantity': mode === 'quantity',\n      'os-option-card--readonly': readonly,\n      'os-option-card--compact': !mediaQuery.isMedium,\n    }\"\n    @click=\"emit('select')\"\n    :inert=\"isSoldOut\"\n  >\n    <os-row cross-axis-alignment=\"stretch\" gap=\"none\">\n      <img\n        v-if=\"mode === 'quantity' && option.image\"\n        class=\"os-option-card__image\"\n        :alt=\"option.name\"\n        :src=\"option.image.lg\"\n        :style=\"mediaQuery.isSmall ? 'width: 25%' : 'width: 40%'\"\n      />\n\n      <os-expanded>\n        <os-column\n          cross-axis-alignment=\"stretch\"\n          gap=\"narrow\"\n          class=\"os-option-card__details\"\n        >\n          <ion-card-title>\n            <os-clamp :lines=\"2\" v-if=\"title\"\n              ><b>{{ stripTags(title) }}</b></os-clamp\n            >\n            <os-clamp :lines=\"2\">{{ stripTags(option?.name) }}</os-clamp>\n            <div\n              class=\"os-option-card__variant-name\"\n              v-if=\"option?.variant && option?.name !== option?.variant\"\n            >\n              {{ stripTags(option?.variant) }}\n            </div>\n          </ion-card-title>\n\n          <os-expanded />\n\n          <template v-if=\"mediaQuery.isLarge\">\n            <os-row gap=\"narrow\" cross-axis-alignment=\"end\">\n              <os-column cross-axis-alignment=\"start\" gap=\"none\">\n                <s\n                  class=\"h3\"\n                  v-if=\"\n                    option.originalPrice &&\n                    parseFloat(option.originalPrice) >\n                      parseFloat(option.discountPrice)\n                  \"\n                  ><os-currency\n                    :value=\"option.originalPrice\"\n                    :display-symbol=\"displaySymbol\"\n                /></s>\n                <div class=\"h1\">\n                  <os-currency\n                    :value=\"option.discountPrice\"\n                    :display-symbol=\"displaySymbol\"\n                  />\n                </div>\n              </os-column>\n\n              <os-expanded />\n\n              <ion-button\n                secondary\n                inert\n                size=\"small\"\n                v-if=\"mode !== 'quantity' && option.percentOff && !isSoldOut\"\n              >\n                <b><os-percent :value=\"option.percentOff * -1\" /></b>\n              </ion-button>\n\n              <ion-button\n                size=\"small\"\n                v-if=\"mode && (mode === 'add' || mode === 'buy')\"\n              >\n                <template v-if=\"isSoldOut\" />\n                <ion-icon\n                  v-else-if=\"mode === 'add'\"\n                  slot=\"end\"\n                  :icon=\"ioniconsAddOutline\"\n                ></ion-icon>\n                <ion-icon\n                  v-else-if=\"mode === 'buy'\"\n                  slot=\"end\"\n                  :icon=\"ioniconsChevronForward\"\n                ></ion-icon>\n                <b v-if=\"isSoldOut\">{{ $t('label.sold_out') }}</b>\n                <b v-else-if=\"mode === 'add'\">{{ $t('label.add') }}</b>\n                <b v-else-if=\"mode === 'buy'\">{{ $t('label.order_now') }}</b>\n              </ion-button>\n\n              <template v-if=\"mode === 'quantity'\" gap=\"none\">\n                <ion-button\n                  v-if=\"!readonly\"\n                  class=\"os-option-card__decrement\"\n                  size=\"small\"\n                  @click=\"emit('decrement')\"\n                >\n                  <ion-icon\n                    slot=\"icon-only\"\n                    :icon=\"ioniconsRemoveOutline\"\n                  ></ion-icon>\n                </ion-button>\n\n                <ion-button size=\"small\" class=\"os-option-card__quantity\" inert>\n                  <template v-if=\"!!readonly\">&times;&nbsp;</template>\n                  <b>{{ quantity ?? 0 }}</b>\n                </ion-button>\n\n                <ion-button\n                  v-if=\"!readonly\"\n                  class=\"os-option-card__increment\"\n                  size=\"small\"\n                  @click=\"emit('increment')\"\n                >\n                  <ion-icon\n                    slot=\"icon-only\"\n                    :icon=\"ioniconsAddOutline\"\n                  ></ion-icon>\n                </ion-button>\n              </template>\n            </os-row>\n          </template>\n\n          <template v-else>\n            <os-row\n              main-axis-alignment=\"space-between\"\n              cross-axis-alignment=\"center\"\n              gap=\"none\"\n            >\n              <os-expanded>\n                <os-row\n                  cross-axis-alignment=\"center\"\n                  main-axis-alignment=\"start\"\n                  gap=\"narrow\"\n                >\n                  <s\n                    class=\"h3\"\n                    v-if=\"\n                      option.originalPrice &&\n                      parseFloat(option.originalPrice) >\n                        parseFloat(option.discountPrice)\n                    \"\n                    ><os-currency\n                      :value=\"option.originalPrice\"\n                      :display-symbol=\"displaySymbol\"\n                  /></s>\n                  <div class=\"h1\">\n                    &nbsp;<os-currency\n                      :value=\"option.discountPrice\"\n                      :display-symbol=\"displaySymbol\"\n                    />\n                  </div>\n                </os-row>\n              </os-expanded>\n\n              <os-column\n                class=\"os-option-card__percent-off\"\n                v-if=\"option.percentOff && !isSoldOut\"\n              >\n                <os-percent :value=\"option.percentOff * -1\" />\n              </os-column>\n            </os-row>\n\n            <ion-button\n              size=\"small\"\n              v-if=\"mode && (mode === 'add' || mode === 'buy')\"\n            >\n              <b v-if=\"isSoldOut\">{{ $t('label.sold_out') }}</b>\n              <template v-else>\n                <b v-if=\"isSoldOut\">{{ $t('label.sold_out') }}</b>\n                <b v-else-if=\"mode === 'add'\">{{ $t('label.add') }}</b>\n                <b v-else-if=\"mode === 'buy'\">{{ $t('label.order_now') }}</b>\n                <ion-icon\n                  v-if=\"mode === 'add'\"\n                  :slot=\"option.percentOff ? 'end' : 'icon-only'\"\n                  :icon=\"ioniconsAddOutline\"\n                ></ion-icon>\n                <ion-icon\n                  v-else-if=\"mode === 'buy'\"\n                  :slot=\"option.percentOff ? 'end' : 'icon-only'\"\n                  :icon=\"ioniconsChevronForward\"\n                ></ion-icon>\n              </template>\n            </ion-button>\n\n            <template v-if=\"mode === 'quantity'\">\n              <os-row\n                main-axis-alignment=\"end\"\n                cross-axis-alignment=\"stretch\"\n                gap=\"none\"\n              >\n                <ion-button\n                  v-if=\"!readonly\"\n                  class=\"os-option-card__decrement\"\n                  size=\"small\"\n                  @click=\"emit('decrement')\"\n                >\n                  <ion-icon\n                    slot=\"icon-only\"\n                    :icon=\"ioniconsRemoveOutline\"\n                  ></ion-icon>\n                </ion-button>\n\n                <os-expanded style=\"margin-right: -1rem\">\n                  <ion-button\n                    size=\"small\"\n                    class=\"os-option-card__quantity\"\n                    style=\"\n                      width: 100%;\n                      max-width: initial;\n                      height: 100% !important;\n                    \"\n                    inert\n                  >\n                    <template v-if=\"!!readonly\">&times;&nbsp;</template>\n                    <b>{{ quantity ?? 0 }}</b>\n                  </ion-button>\n                </os-expanded>\n\n                <ion-button\n                  v-if=\"!readonly\"\n                  class=\"os-option-card__increment\"\n                  size=\"small\"\n                  @click=\"emit('increment')\"\n                >\n                  <ion-icon\n                    slot=\"icon-only\"\n                    :icon=\"ioniconsAddOutline\"\n                  ></ion-icon>\n                </ion-button>\n              </os-row>\n            </template>\n          </template>\n        </os-column>\n      </os-expanded>\n    </os-row>\n  </ion-card>\n</template>\n\n<style scoped>\n.os-option-card {\n  background-color: var(--background--primary);\n}\n\n.os-option-card:not(.os-option-card--quantity) {\n  cursor: pointer;\n}\n\n.os-option-card[inert] {\n  opacity: 0.5;\n}\n\n.os-option-card > .os-row {\n  height: 100%;\n}\n\n.os-option-card__image {\n  object-fit: contain;\n  background-color: white;\n  display: flex;\n  flex: 0 0 0%;\n  flex-basis: auto;\n}\n\n.os-option-card__details {\n  padding: 1rem;\n}\n\n.os-option-card--compact .os-option-card__details {\n  padding: 0.75rem 1rem;\n}\n\n.os-option-card__variant-name {\n  opacity: 0.75;\n  font-weight: normal;\n}\n\n.os-option-card__quantity {\n  min-width: 2rem;\n  max-width: 5ch;\n  width: auto;\n\n  min-height: auto;\n  max-height: auto;\n  height: 28.08px;\n\n  font-weight: bold;\n  font-size: 1.075rem;\n\n  --padding-start: 0;\n  --padding-end: 0;\n  --border-radius: 0;\n\n  margin-left: -0.5rem;\n  margin-right: -0.5rem;\n\n  position: relative;\n  z-index: 1;\n}\n\n.os-option-card--compact .os-option-card__quantity {\n  height: 29.375px !important;\n}\n\n.os-option-card--readonly .os-option-card__quantity {\n  --border-radius: 0.25rem;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n.os-option-card__percent-off {\n  background-color: var(--header);\n  color: var(--white);\n  border-radius: 0.25rem;\n  padding: 5px;\n  flex-shrink: 1;\n  flex-grow: 0;\n  font-size: 0.65rem;\n  font-weight: bold;\n}\n</style>\n"],"names":["props","__props","emit","__emit","mediaQuery","useMediaQuery","isSoldOut","computed","isTest"],"mappings":"ouBAIA,MAAMA,EAAQC,EASRC,EAAOC,EAOPC,EAAaC,EAAc,EAE3BC,EAAYC,EAChB,IAAM,CAACC,EAAO,IAAM,CAACR,EAAM,QAAUA,EAAM,OAAO,QAAU,EAC9D"}