{"version":3,"file":"NavigationTiles-CRHILGFk.js","sources":["../../src/aem-components/NavigationTiles.vue"],"sourcesContent":["<script>\nexport default {\n\tname: 'NavigationTiles',\n\tinheritAttrs: false,\n};\n</script>\n\n<script setup>\nimport AppHyperlink from '~/components/AppHyperlink.vue';\nimport { isMobileViewport } from '~/logic/composables/breakpoints';\nimport { isUrlMatchCurrentHostname } from '~/logic/helpers/string.js';\n\nconst props = defineProps({\n\ttitle: { type: String, default: '' },\n\tdescription: { type: String, default: '' },\n\tisHideInDesktop: { type: Boolean, default: false },\n\tisHideInMobile: { type: Boolean, default: false },\n\timageMultiList: { type: Array, default: () => ([]) },\n\tctaMultiList: { type: Array, default: () => ([]) },\n\tcomponentIdAA: { type: String, default: '' },\n});\nconst emit = defineEmits([\n\t// 'update:modelValue',\n]);\n\nconst { isEditorMode } = useGlobalAEMState();\n\nconst siteName = window.siteName;\n\n</script>\n\n<template>\n<template v-if=\"isEditorMode && props.isHideInDesktop\">\n\t<div class=\"generic-container py-10 text-center\">\n\t\t<p>Hidden in: <span v-if=\"props.isHideInDesktop\">Desktop</span> <span v-if=\"props.isHideInMobile\">, Mobile</span></p>\n\t</div>\n</template>\n\n<template v-else>\n\t<div\n\t\tclass=\"NavigationTiles generic-container\"\n\t\t:data-use-theme=\"siteName\"\n\t\t:class=\"{ '>md:hidden': isHideInDesktop, 'hidden >md:block': isHideInMobile }\"\n\t>\n\t\t<div class=\"text-left rtl:text-right\">\n\t\t\t<h4 class=\"navigation-title\">{{ props.title }}</h4>\n\t\t\t<div>\n\t\t\t\t<p\n\t\t\t\t\tv-html-sanitize=\"props.description\"\n\t\t\t\t\tclass=\"navigation-desc\"\n\t\t\t\t></p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div\n\t\t\tv-if=\"props.imageMultiList\"\n\t\t\tclass=\"grid gap-4 pb-6 md:grid-cols-1\"\n\t\t\t:class=\"props.imageMultiList.length <= 2 ? 'grid-cols-2' : `grid-cols-${props.imageMultiList.length}`\"\n\t\t>\n\t\t\t<AppHyperlink\n\t\t\t\tv-for=\"(item, index) in props.imageMultiList\"\n\t\t\t\t:key=\"index\"\n\t\t\t\tv-aa=\"[\n\t\t\t\t\t{\n\t\t\t\t\t\tclickName: item.ctaLabel,\n\t\t\t\t\t\tclickComponentType: 'Button',\n\t\t\t\t\t\tcomponentName: 'NavigationTiles',\n\t\t\t\t\t\tcomponentID: props.componentIdAA,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: isUrlMatchCurrentHostname(item.ctaUrl) ? 'other' : 'exit',\n\t\t\t\t\t\tname: item.ctaLabel,\n\t\t\t\t\t},\n\t\t\t\t]\"\n\t\t\t\tclass=\"image-column-wrapper group rounded-xl flex flex-col-reverse h-full relative\"\n\t\t\t\t:href=\"item.ctaUrl\"\n\t\t\t\t:target=\"item.isOpenInNewTab ? '_blank' : '_self'\"\n\t\t\t\t:showExternalLinkIcon=\"false\"\n\t\t\t\tstyle=\"--focus-visible-outline-offset: 0px;\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle=\"background-image: var(--navTileBgGradient)\"\n\t\t\t\t\tclass=\"absolute z-20 w-full h-full rounded-xl\"\n\t\t\t\t>\n\t\t\t\t</div>\n\t\t\t\t<img\n\t\t\t\t\tclass=\"h-full w-full object-cover object-center rounded-xl pointer-events-none\"\n\t\t\t\t\t:src=\"isMobileViewport ? item.tileMobileImage : item.tileDesktopImage\"\n\t\t\t\t\t:alt=\"isMobileViewport ? item.tileMobileImageAltText : item.tileDesktopImageAltText\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"px-5 pb-5 flex absolute bottom-0 justify-between items-end text-neutral-white-base z-20 w-full\">\n\t\t\t\t\t<h5 class=\"line-clamp-2\">{{ item.ctaLabel }}</h5>\n\t\t\t\t\t<icon-fas-arrow-right class=\"icon-arrow-right mb-0.5 min-w-6 ml-4 fill-neutral-white-base rtl:(mr-4 ml-0)\" />\n\t\t\t\t</div>\n\t\t\t</AppHyperlink>\n\t\t</div>\n\t\t<div v-if=\"props.ctaMultiList\" class=\"grid grid-cols-2 gap-4 md:grid-cols-1\">\n\t\t\t<AppHyperlink\n\t\t\t\tv-for=\"(item, index) in props.ctaMultiList\"\n\t\t\t\t:key=\"index\"\n\t\t\t\tv-aa=\"[\n\t\t\t\t\t{\n\t\t\t\t\t\tclickName: item.ctaLabel,\n\t\t\t\t\t\tclickComponentType: 'Button',\n\t\t\t\t\t\tcomponentName: 'NavigationTiles',\n\t\t\t\t\t\tcomponentID: props.componentIdAA,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: isUrlMatchCurrentHostname(item.ctaUrl) ? 'other' : 'exit',\n\t\t\t\t\t\tname: item.ctaLabel,\n\t\t\t\t\t},\n\t\t\t\t]\"\n\t\t\t\t:href=\"item.ctaUrl\"\n\t\t\t\t:target=\"item.isOpenInNewTab ? '_blank' : '_self'\"\n\t\t\t\t:showExternalLinkIcon=\"false\"\n\t\t\t\tclass=\"navigation-text-tiles group !flex-nowrap !no-underline\"\n\t\t\t\tstyle=\"--focus-visible-outline-offset: 0px;\"\n\t\t\t>\n\t\t\t\t<span class=\"line-clamp-2 text-base\">{{ item.ctaLabel }}</span>\n\t\t\t\t<icon-fas-arrow-right\n\t\t\t\t\tv-if=\"!item.isExternalLink\"\n\t\t\t\t\tclass=\"icon-arrow-right text-link-icon\"\n\t\t\t\t/>\n\t\t\t\t<icon-far-arrow-up-right-from-square\n\t\t\t\t\tv-else\n\t\t\t\t\tclass=\"icon-external-link text-link-icon\"\n\t\t\t\t/>\n\t\t\t</AppHyperlink>\n\t\t</div>\n\t</div>\n</template>\n</template>\n\n\n\n<style scoped lang=\"scss\">\n@use 'sass:color';\n@use '~/styles/partials/_var.scss';\n\n// ---------------------- Text Tiles ----------------------\n.NavigationTiles {\n\t--navTileBgGradient: linear-gradient(to bottom, rgba(31, 64, 116, 0.1), rgba(31, 64, 116, 0.5) 50%, rgba(31, 64, 116, 1) 90%);\n\n\t@apply p-10 border border-solid rounded-3xl;\n\n\t@media #{var.$query-max-md} {\n\t\t@apply py-8 px-5;\n\t}\n}\n\n.navigation-title {\n\t@apply pb-4;\n\n\t@media #{var.$query-max-md} {\n\t\t@apply pb-3;\n\t}\n}\n\n.navigation-desc {\n\t@apply pb-8;\n\n\t@media #{var.$query-max-md} {\n\t\t@apply pb-6;\n\t}\n}\n\n// ---------------------- Text Tiles ----------------------\n.navigation-text-tiles {\n\t@apply text-left rounded-xl text-primary-blue-base fill-primary-blue-base bg-primary-blue-extralight py-4 px-5;\n\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tborder: transparent;\n\n\t&:hover {\n\t\t.icon-arrow-right {\n\t\t\t@apply transform translate-x-0.5;\n\n\t\t\thtml[dir=\"rtl\"] & {\n\t\t\t\t@apply transform -translate-x-0.5 -rotate-180;\n\t\t\t}\n\t\t}\n\n\t\t.icon-external-link {\n\t\t\t@apply transform translate-x-0.5;\n\n\t\t\thtml[dir=\"rtl\"] & {\n\t\t\t\t@apply transform -translate-x-0.5 -rotate-90;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.image-column-wrapper {\n\theight: 200px;\n\n\t&:hover {\n\t\t.icon-arrow-right {\n\t\t\t@apply transform translate-x-0.5;\n\n\t\t\thtml[dir=\"rtl\"] & {\n\t\t\t\t@apply transform -translate-x-0.5 -rotate-180;\n\t\t\t}\n\t\t}\n\n\t\t.icon-external-link {\n\t\t\t@apply transform translate-x-0.5;\n\n\t\t\thtml[dir=\"rtl\"] & {\n\t\t\t\t@apply transform -translate-x-0.5 -rotate-90;\n\t\t\t}\n\t\t}\n\t}\n\t\n\t@media #{var.$query-max-md} {\n\t\theight: 128px;\n\t}\n}\n\n.icon-arrow-right {\n\tmin-width: 24px;\n\tmin-height: 24px;\n\ttransition: transform .3s ease-in-out;\n\t\n\thtml[dir=\"rtl\"] & {\n\t\t@apply transform -rotate-180;\n\t}\n\t\n\t@media #{var.$query-max-md} {\n\t\tmin-width: 16px;\n\t\tmin-height: 16px;\n\t}\n}\n\n.text-base {\n\t@apply group-hover:text-primary-blue-light group-active:text-secondary-blue-extradark;\n}\n.text-link-icon {\n\t@apply ml-2 rtl:(ml-0 mr-2) group-hover:(fill-primary-blue-light) group-active:fill-secondary-blue-extradark;\n\tmargin-top: 2px;\n}\n\n.icon-external-link {\n\tmin-width: 24px;\n\tmin-height: 24px;\n\ttransition: transform .3s ease-in-out;\n\n\thtml[dir=\"rtl\"] & {\n\t\t@apply transform -rotate-90;\n\t}\n\t\n\t@media #{var.$query-max-md} {\n\t\tmin-width: 16px;\n\t\tmin-height: 16px;\n\t}\n}\n\n[data-use-theme=\"MAG\"] {\n\t.navigation-text-tiles {\n\t\tcolor: var(--primary-midnightgreen-base);\n\t\tfill: var(--primary-midnightgreen-base);\n\t\tbackground-color: var(--primary-midnightgreen-extralight);\n\t\t\n\t\t&:hover {\n\t\t\t.text-link-icon {\n\t\t\t\tfill: var(--primary-midnightgreen-light);\n\t\t\t}\n\n\t\t\t.text-base {\n\t\t\t\tcolor: var(--primary-midnightgreen-light);\n\t\t\t}\n\t\t}\n\n\t\t&:active {\n\t\t\t.text-link-icon {\n\t\t\t\tfill: var(--secondary-midnightgreen-extradark);\n\t\t\t}\n\n\t\t\t.text-base {\n\t\t\t\tcolor: var(--secondary-midnightgreen-extradark);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.NavigationTiles[data-use-theme=\"amal\"] {\n\n\t&.NavigationTiles {\n\t\t--navTileBgGradient: linear-gradient(to bottom, rgba(31, 64, 116, 0.1), rgba(51, 51, 51, 0.5) 50%, rgba(51, 51, 51, 1) 90%);\n\n\t\t.icon-arrow-right {\n\t\t\tmin-height: 18px;\n\t\t\tmin-width: 18px;\n\t\t}\n\t}\n\n\t.navigation-text-tiles {\n\t\tcolor: var(--primary-amal-funblue-light);\n\t\tfill: var(--primary-amal-funblue-light);\n\t\tbackground-color: var(--neutral-grey-extralight);\n\t\tfont-weight: 600;\n\n\t\t.text-link-icon {\n\t\t\tmin-height: 18px;\n\t\t\tmin-width: 18px;\n\t\t}\n\t}\n}\n\n.NavigationTiles[data-use-theme=\"firefly\"] {\n\t--navTileBgGradient: linear-gradient(to bottom, rgba(243, 130, 32, 0.1), rgba(243, 130, 32, 0.5) 50%, rgba(243, 130, 32, 0.9) 90%);\n\n\t.navigation-text-tiles {\n\t\tcolor: var(--primary-firefly-orange-base);\n\t\tfill: var(--primary-firefly-orange-base);\n\t\tbackground-color: var(--secondary-firefly-orange-ultralight);\n\t\t\n\t\t&:hover {\n\t\t\t.text-link-icon {\n\t\t\t\tfill: var(--secondary-firefly-orange-extralight);\n\t\t\t}\n\n\t\t\t.text-base {\n\t\t\t\tcolor: var(--secondary-firefly-orange-extralight);\n\t\t\t}\n\t\t}\n\n\t\t&:active {\n\t\t\t.text-link-icon {\n\t\t\t\tfill: var(--secondary-firefly-orange-extradark);\n\t\t\t}\n\n\t\t\t.text-base {\n\t\t\t\tcolor: var(--secondary-firefly-orange-extradark);\n\t\t\t}\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["__default__","props","__props","emit","__emit","isEditorMode","siteName","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_12","$setup","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_cache","_createTextVNode","_hoisted_2","_createCommentVNode","_hoisted_3","_normalizeClass","$props","_toDisplayString","_withDirectives","_directive_html_sanitize","_Fragment","_renderList","item","index","_createBlock","_withCtx","_createVNode","_component_icon_fas_arrow_right","_hoisted_11","_component_icon_far_arrow_up_right_from_square"],"mappings":"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"}