{"version":3,"file":"AmalMallTiles-pgSyWcmI.js","sources":["../../src/components/amal/AmalMallTiles/AmalMallSingleTile.vue","../../src/aem-components/amal/AmalMallTiles.vue"],"sourcesContent":["<script>\nexport default {\n\tname: 'AmalMallSingleTile',\n};\n</script>\n\n<script setup>\nimport FontAwesomeLazy from '~/components/FontAwesomeLazy.vue';\n\nconst props = defineProps({\n\ttileIconType: { type: String, default: 'iconFontAwsomeId' },\n\ticonFontAwsomeId: { type: String, default: 'cart-shopping' },\n\ticonImage: { type: String, default: '' },\n\t\n\tctaText: { type: String, default: '' },\n\tctaUrl: { type: String, default: '#' },\n\tisOpenInNewTab: { type: Boolean, default: true },\n\t\n\ttileImage: { type: String, default: '' },\n\ttileImageAltText: { type: String, default: '' },\n\t\n\ttileTitle: { type: String, default: 'Telekung Modish Lian Li' },\n\ttileDescription: { type: String, default: 'Siti Khadijah' },\n\t\n\tsecondaryProductPrice: { type: String, default: '<s>MYR 450</s>' },\n\tprimaryProductPrice: { type: String, default: '<h5>MYR 345</h5>' },\n\tcomponentIdAA: { type: String, default: '' },\n});\n\n\n</script>\n\n\n\n<template>\n<AppHyperlink\n\tv-aa=\"props.ctaUrl ? [\n\t\t{\n\t\t\tclickName: props.tileTitle,\n\t\t\tclickComponentType: 'URL',\n\t\t\tcomponentName: 'AmalMallSingleTile',\n\t\t\tcomponentID: props.componentIdAA,\n\t\t},\n\t\t{\n\t\t\tname: props.tileTitle,\n\t\t\ttype: 'exit',\n\t\t},\n\t] : null\"\n\tclass=\"AmalMallSingleTile !items-start bg-white h-full\"\n\t:href=\"props.ctaUrl\"\n\t:target=\"props.isOpenInNewTab ? '_blank' : '_self'\"\n>\n\t<figure class=\"thumbnail-container\">\n\t\t<div class=\"thumbnail-img-wrapper\">\n\t\t\t<img\n\t\t\t\tclass=\"thumbnail-img mb-6\"\n\t\t\t\t:src=\"props.tileImage\"\n\t\t\t\t:alt=\"props.tileImageAltText\"\n\t\t\t/>\n\t\t</div>\n\t\t<figcaption class=\"heading-5 px-6 mb-1\">{{ props.tileTitle }}</figcaption>\n\t</figure>\n\t<div class=\"text-wrapper px-6 pb-6 flex-grow\">\n\t\t<div\n\t\t\tv-html-sanitize=\"props.tileDescription\"\n\t\t\tclass=\"typo-body-text-2 mb-3 line-clamp-2\"\n\t\t></div>\n\t\t<div class=\"flex gap-4 items-end\">\n\t\t\t<div class=\"product-price-wrapper\">\n\t\t\t\t<div\n\t\t\t\t\tv-html-sanitize=\"props.secondaryProductPrice\"\n\t\t\t\t\tclass=\"secondary-product-price\"\n\t\t\t\t></div>\n\t\t\t\t<div\n\t\t\t\t\tv-html-sanitize=\"props.primaryProductPrice\"\n\t\t\t\t\tclass=\"primary-product-price\"\n\t\t\t\t></div>\n\t\t\t</div>\n\t\t\t<div class=\"ml-auto\">\n\t\t\t\t<!-- This is not a real CTA, the CTA is the whole tile.\n\t\t\t\t\tJust the class naming is called cta to align with FD. -->\n\t\t\t\t<div class=\"cta-wrapper flex gap-1.5 items-center\">\n\t\t\t\t\t<FontAwesomeLazy\n\t\t\t\t\t\tv-if=\"props.tileIconType === 'iconFontAwsomeId'\"\n\t\t\t\t\t\t:iconId=\"props.iconFontAwsomeId\"\n\t\t\t\t\t\tclass=\"icon w-5 h-auto fill-current\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t/>\n\t\t\t\t\t<img\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:src=\"props.iconImage\"\n\t\t\t\t\t\tclass=\"w-5 h-auto\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t/>\n\t\t\t\t\t<p class=\"cta-text font-medium hover:underline\">\n\t\t\t\t\t\t{{ props.ctaText }}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</AppHyperlink>\n</template>\n\n\n\n<style scoped lang=\"scss\">\n@use 'sass:color';\n@use '~/styles/partials/_var.scss';\n\n.AmalMallSingleTile {\n\t@apply rounded-3xl;\n\tborder: solid 1px var(--neutral-grey-light);\n\toverflow: hidden;\n\t// max-width: 384px;\n\t// min-height: 542px;\n\ttransition: box-shadow 0.25s;\n\t\n\t&.AppHyperlink {\n\t\t--a-tag-color: var(--text-color);\n\t\t--a-tag-color-hover: var(--text-color);\n\t}\n\t\n\t&:hover {\n\t\t@apply shadow-type-a;\n\t\ttext-decoration: none;\n\t}\n}\n\n.primary-product-price,\n.secondary-product-price {\n\t:deep(.text-strikethrough) {\n\t\t// cannot use the text-strikethrough (using pseudo element), due to the line being in incorrect y position\n\t\ttext-decoration: line-through;\n\t}\n}\n\n.thumbnail-img-wrapper {\n\twidth: 100%;\n\taspect-ratio: 1 / 1;\n}\n\n.thumbnail-img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tobject-position: center center;\n}\n\n.cta-wrapper {\n\tcolor: var(--primary-blue-base);\n\t\n\t&:hover {\n\t\tcolor: var(--primary-blue-light);\n\t}\n}\n</style>\n","<script>\nexport default {\n\tname: 'AmalMallTiles',\n\tinheritAttrs: false,\n};\n</script>\n\n<script setup>\nimport { useGlobalAEMState } from '~/logic/aem/global-aem-state.js';\nimport AmalMallSingleTile from '~/components/amal/AmalMallTiles/AmalMallSingleTile.vue';\nimport VueSwiper from '~/components/VueSwiper.vue';\nimport { isMobileViewport, isLG, isXL } from '~/logic/composables/breakpoints.js';\n\nconst props = defineProps({\n\tisHideInDesktop: { type: Boolean, default: false },\n\tisHideInMobile: { type: Boolean, default: false },\n\tcomponentIdAA: { type: String, default: '' },\n\tamalMallTilesMultilist: { type: Array, default: () => ([]) },\n});\n\nconst { isEditorMode } = useGlobalAEMState();\nconst swiperBtnPrevEl = ref(null);\nconst swiperBtnNextEl = ref(null);\n\nconst swiperSlidesPerView = computed(() => {\n\tif (isLG.value) return 2.25;\n\tif (isMobileViewport.value) return 1.15;\n\t\n\treturn 3.2;\n});\nconst swiperSpaceBetween = computed(() => {\n\tif (isXL.value) return 16;\n\tif (isLG.value) return 16;\n\tif (isMobileViewport.value) return 16;\n\t\n\treturn 24;\n});\n\n</script>\n\n\n\n<template>\n<template v-if=\"isEditorMode && (props.isHideInDesktop || props.isHideInMobile)\">\n\t<div class=\"generic-container py-10 text-center\">\n\t\t<p>Hidden in: {{ [\n\t\t\t(props.isHideInDesktop ? 'Desktop' : null),\n\t\t\t(props.isHideInMobile ? 'Mobile' : null),\n\t\t].filter(Boolean).join(', ') }}</p>\n\t</div>\n</template>\n\n<div\n\tclass=\"AmalMallTiles relative\"\n\t:class=\"{\n\t\t'>md:hidden': props.isHideInDesktop,\n\t\t'md:hidden': props.isHideInMobile,\n\t}\"\n>\n\t<div\n\t\tv-if=\"props.amalMallTilesMultilist.length > 2\"\n\t\tclass=\"custom-navigation-container\"\n\t>\n\t\t<button\n\t\t\tref=\"swiperBtnPrevEl\"\n\t\t\tv-button-press\n\t\t\ttype=\"button\"\n\t\t\tclass=\"swiper-button-prev\"\n\t\t\t:aria-label=\"$t('Previous slide')\"\n\t\t></button>\n\t\t<button\n\t\t\tref=\"swiperBtnNextEl\"\n\t\t\tv-button-press\n\t\t\ttype=\"button\"\n\t\t\tclass=\"swiper-button-next\"\n\t\t\t:aria-label=\"$t('Next slide')\"\n\t\t></button>\n\t</div>\n\t\n\t<VueSwiper\n\t\tclass=\"amal-mall-tiles-swiper pb-3\"\n\t\t:class=\"{\n\t\t\t'wrapper-justify-center': props.amalMallTilesMultilist.length <= 2,\n\t\t}\"\n\t\t:slidesPerView=\"swiperSlidesPerView\"\n\t\t:spaceBetween=\"swiperSpaceBetween\"\n\t\t:navigation=\"{\n\t\t\tnextEl: swiperBtnNextEl,\n\t\t\tprevEl: swiperBtnPrevEl,\n\t\t}\"\n\t\tvariant=\"slides-auto-height\"\n\t>\n\t\t<AmalMallSingleTile\n\t\t\tv-for=\"(item, index) in props.amalMallTilesMultilist\"\n\t\t\t:key=\"index\"\n\t\t\t:componentIdAA=\"props.componentIdAA\"\n\t\t\tv-bind=\"item\"\n\t\t/>\n\t</VueSwiper>\n</div>\n</template>\n\n\n\n<style scoped lang=\"scss\">\n@use 'sass:color';\n@use '~/styles/partials/_var.scss';\n\n.AmalMallTiles {\n\t\n}\n\n\n.amal-mall-tiles-swiper {\n\t&.wrapper-justify-center {\n\t\t:deep(.swiper-wrapper) {\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t:deep(.swiper-wrapper),\n\t:deep(.swiper-slide) {\n\t\toverflow: visible;\n\t}\n\t:deep(.swiper-slide) {\n\t\t@apply pb-3;\n\t}\n}\n\n.custom-navigation-container {\n\tposition: absolute;\n\tz-index: 5;\n\twidth: 100%;\n\ttop: calc(50% - 13px);\n\tleft: 0;\n\t\n\t@media #{var.$query-max-md} {\n\t\tdisplay: none;\n\t}\n\n\t:deep(.swiper-button-disabled) {\n\t\tdisplay: none;\n\t}\n\t\n\t:deep(.swiper-button-prev),\n\t:deep(.swiper-button-next) {\n\t\t--x-margin: 24px;\n\t\t--after-rotate: 0deg;\n\t\t--after-translateX: 0px;\n\t\theight: 56px;\n\t\twidth: 56px;\n\t\tborder: 1px solid var(--neutral-grey-light);\n\t\tborder-radius: 100%;\n\t\ttransition: all 0.25s ease-in-out;\n\t\t@apply bg-primary-black-base/20;\n\t\t\n\t\thtml[dir=\"rtl\"] & {\n\t\t\ttransform: rotate(-180deg);\n\t\t}\n\t\t&:hover {\n\t\t\t--after-translateX: -2px;\n\t\t\t@apply bg-primary-black-base;\n\t\t}\n\t\t&:focus {\n\t\t\t@apply outline-semantic-blue-base outline-2 outline outline-offset-2;\n\t\t}\n\t\t\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tbackground-image: url('~/assets/carousel/chevron-left.svg');\n\t\t\tbackground-size: cover;\n\t\t\tbackground-position: center;\n\t\t\tbackground-color: transparent;\n\t\t\theight: 26px;\n\t\t\twidth: 13px;\n\t\t\ttransition: 0.2s ease-in-out;\n\t\t\ttransform: rotate(var(--after-rotate)) translateX(var(--after-translateX));\n\t\t}\n\t}\n\t\n\t:deep(.swiper-button-prev) {\n\t\tleft: var(--x-margin);\n\t\t\n\t\thtml[dir=\"rtl\"] & {\n\t\t\tright: var(--x-margin);\n\t\t\tleft: auto;\n\t\t}\n\t}\n\n\t:deep(.swiper-button-next) {\n\t\t--after-rotate: 180deg;\n\t\tright: var(--x-margin);\n\t\t\n\t\thtml[dir=\"rtl\"] & {\n\t\t\tleft: var(--x-margin);\n\t\t\tright: auto;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["__default__","__props","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_createBlock","_component_AppHyperlink","$setup","_withCtx","_createElementVNode","_toDisplayString","_withDirectives","_directive_html_sanitize","_createElementBlock","_directive_aa","props","isEditorMode","useGlobalAEMState","swiperBtnPrevEl","ref","swiperBtnNextEl","swiperSlidesPerView","computed","isLG","isMobileViewport","swiperSpaceBetween","isXL","_openBlock","_Fragment","_createCommentVNode","_normalizeClass","_ctx","_createVNode","_renderList","item","index","_mergeProps"],"mappings":"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"}