{"version":3,"file":"MHTable-B3PXbpME.js","sources":["../../src/aem-components/MHTable.vue"],"sourcesContent":["<script>\nexport default {\n\tname: 'MHTable',\n\tinheritAttrs: false,\n};\n</script>\n\n<script setup>\nconst props = defineProps({\n\tdesktopColumnWidth: { type: String, default: null }, // Example: 300 | auto | 10%,\n\tmobileColumnWidth: { type: String, default: null }, // Example: 300 | auto | 10%,\n\tlockColumn: { type: String, default: 'none' }, // none | Number\n\ttableData: { type: String, default: '' },\n\trowAltColor: { type: Boolean, default: false }, // hexcode | color name\n\ttableAlignment: { type: String, default: 'left' }, // left, right, center\n});\n\nconst emit = defineEmits([\n\t// 'update:modelValue',\n]);\n\nconst root = ref(null);\nconst noOfColumnsLocked = isNaN(props.lockColumn) ? 0 : parseInt(props.lockColumn);\n\nfunction updateTableSizes () {\n\tif (!root.value) return;\n\t\n\troot.value.style.setProperty(\n\t\t'--table-w-desktop',\n\t\tprops.desktopColumnWidth?.includes('%') ? '100%' : 'max-content'\n\t);\n\troot.value.style.setProperty(\n\t\t'--table-w-mobile',\n\t\tprops.mobileColumnWidth?.includes('%') ? '100%' : 'max-content'\n\t);\n\n\troot.value.style.setProperty(\n\t\t'--root-display-desktop',\n\t\tprops.desktopColumnWidth?.includes('%') ? 'block' : 'flex'\n\t);\n\n\troot.value.style.setProperty(\n\t\t'--root-display-mobile',\n\t\tprops.mobileColumnWidth?.includes('%') ? 'block' : 'flex'\n\t);\n\n\tif (!props.rowAltColor) {\n\t\troot.value.style.setProperty('--alternate-bg-color', 'white');\n\t}\n}\n\nfunction updateColumnWidth () {\n\tconst columnWidthsDesktop = props.desktopColumnWidth?.split(',') || [];\n\tconst columnWidthsMobile = props.mobileColumnWidth?.split(',') || [];\n\tconst tableWidth = root.value.clientWidth;\n\t\n\tfunction getPixelWidth (percentage) {\n\t\tif (!percentage) return '';\n\t\tif (String(percentage).includes('px')) return percentage;\n\t\tif (tableWidth === 0) {\n\t\t\treturn 'auto';\n\t\t} else {\n\t\t\treturn `${tableWidth * String(percentage).replace('%', '') / 100}px`;\n\t\t}\n\t}\n\n\troot.value.querySelectorAll('tr:first-of-type > *').forEach((el, index) => {\n\t\tel.style.setProperty(\n\t\t\t'--column-width-desktop',\n\t\t\tgetPixelWidth(columnWidthsDesktop[index]) || 'auto'\n\t\t);\n\t\tel.style.setProperty(\n\t\t\t'--column-width-mobile',\n\t\t\tgetPixelWidth(columnWidthsMobile[index]) || 'auto'\n\t\t);\n\t});\n}\n\nfunction lockColumns () {\n\tif (!noOfColumnsLocked) return;\n\t\n\troot.value\n\t\t.querySelectorAll(`table td:nth-child(-n + ${noOfColumnsLocked}), table th:nth-child(-n + ${noOfColumnsLocked})`)\n\t\t.forEach((item) => {\n\t\t\titem.style.left = `${item.offsetLeft}px`;\n\t\t\titem.classList.add('sticky-cell');\n\t\t\tif (item.matches(`:nth-child(${noOfColumnsLocked})`)) {\n\t\t\t\titem.classList.add('last-col');\n\t\t\t}\n\t\t});\n}\n\nfunction observeParents () {\n\tconst PARENTS_THAT_COULD_BE_HIDDEN = ['.Accordion .content', '.SwitchTabContent [data-tab-id]'];\n\tconst observeConfig = {\n\t\tattributes: true,\n\t};\n\n\tconst observer = new MutationObserver((mutationList) => {\n\t\tlet needToUpdate = false;\n\n\t\tfor (const mutation of mutationList) {\n\t\t\tif (mutation.type === 'attributes' && mutation.attributeName === 'style') {\n\t\t\t\tneedToUpdate = needToUpdate || mutation.target.style.display !== 'none';\n\n\t\t\t\t// Adjusting Accordion height. Since table height may change when during updateColumnWidth()\n\t\t\t\tif (needToUpdate && mutation.target.matches('.Accordion .content.simple-slide-down-enter-active')) {\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tmutation.target.style.height = `${mutation.target.scrollHeight}px`;\n\t\t\t\t\t}, 10);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (needToUpdate) {\n\t\t\tupdateColumnWidth();\n\t\t}\n\t});\n\n\tPARENTS_THAT_COULD_BE_HIDDEN.forEach((selector) => {\n\t\tconst parentEl = root.value.closest(selector);\n\t\tif (parentEl) {\n\t\t\tobserver.observe(parentEl, observeConfig);\n\t\t}\n\t});\n\n\tonUnmounted(() => {\n\t\tobserver?.disconnect?.();\n\t});\n}\n\nonMounted(() => {\n\tupdateTableSizes();\n\tupdateColumnWidth(); // updateColumnWidth() must call before lockColumns()\n\tobserveParents();\n\tlockColumns();\n\n\twindow.addEventListener('resize', updateColumnWidth, { passive: true });\n});\n\nonUnmounted(() => {\n\twindow.removeEventListener('resize', updateColumnWidth, { passive: true });\n});\n\nconst siteName = window.siteName;\n\n</script>\n\n<template>\n<div\n\tref=\"root\"\n\tclass=\"MHTable overflow-hidden rounded-md author-html-container\"\n\t:class=\"{\n\t\t'justify-start': props.tableAlignment === 'left',\n\t\t'justify-center': props.tableAlignment === 'centre',\n\t\t'justify-end': props.tableAlignment === 'right',\n\t}\"\n\t:data-use-theme=\"siteName\"\n>\n\t<div\n\t\tv-html-sanitize=\"props.tableData\"\n\t\tclass=\"table-wrapper styled-scrollbar column-locked\"\n\t\t:class=\"{\n\t\t\t'table-center-desktop': props.desktopColumnWidth?.includes('%'),\n\t\t\t'table-center-mobile': props.mobileColumnWidth?.includes('%'),\n\t\t}\"\n\t></div>\n</div>\n</template>\n\n<style lang=\"scss\">\n@use 'sass:color';\n@use '~/styles/partials/_var.scss';\n\n.MHTable {\n\t--root-display-desktop: block;\n\t--root-display-mobile: block;\n\t--root-display: var(--root-display-desktop);\n\t--table-w-desktop: auto;\n\t--table-w-mobile: auto;\n\t--table-width: var(--table-w-desktop);\n\t--cell-padding: 1rem; /* 16px */\n\t--header-bg: #{var.$primary-blue-dark};\n\t--header-color: #{var.$neutral-white-base};\n\t--rounded-width: 0.5rem;\n\t--border-color: #{var.$neutral-grey-light};\n\t--alternate-bg-color: #{var.$neutral-grey-extralight};\n\tposition: relative;\n\tdisplay: var(--root-display);\n\n\t@media #{var.$query-max-md} {\n\t\t--table-width: var(--table-w-mobile);\n\t\t--root-display: var(--root-display-mobile);\n\t}\n\n\n\t.table-wrapper {\n\t\twidth: var(--table-width);\n\t\tposition: relative;\n\t\toverflow-x: auto;\n\t\tborder-top-left-radius: var(--rounded-width);\n\t}\n\n\ttable {\n\t\tposition: relative;\n\t\t// table-layout: fixed; <-- disabled this due to issue on safari, the table height 0 and the component not showing\n\t\twidth: var(--table-width);\n\t\toverflow: scroll;\n\t\t/* overflow: scroll; */\n\t\tborder-radius: var(--rounded-width);\n\t\tborder-collapse: separate;\n\t\tborder-spacing: 0;\n\t}\n\t.table-center-desktop table {\n\t\t@apply >md:w-auto >md:mx-auto;\n\t}\n\t.table-center-mobile table {\n\t\t@apply md:w-auto md:mx-auto;\n\t}\n\n\tthead, tbody {\n\t\tdisplay: block;\n\t}\n\n\ttd, th {\n\t\t@apply text-left;\n\t\tpadding: var(--cell-padding);\n\t}\n\n\tth {\n\t\t@apply font-bold;\n\t\tbackground-color: var(--header-bg);\n\t\tcolor: var(--header-color)\n\t}\n\n\ttr:first-of-type > * {\n\t\t--column-width-mobile: auto;\n\t\t--column-width-desktop: auto;\n\t\t--column-width: var(--column-width-desktop);\n\t\twidth: var(--column-width);\n\t\t\n\t\t@media #{var.$query-max-md} {\n\t\t\t--column-width: var(--column-width-mobile);\n\t\t}\n\t}\n\n\ttr:first-of-type > * {\n\t\tbackground-color: var(--header-bg);\n\t\tcolor: var(--header-color);\n\t\tfont-weight: 700;\n\t}\n\n\ttr:nth-child(even) > td {\n\t\tbackground-color: var(--alternate-bg-color);\n\t}\n\ttr:nth-child(odd):not(:first-of-type) > td {\n\t\t@apply bg-neutral-white-base;\n\t}\n\n\t/*------------- */\n\t/* Table Header */\n\t/*------------- */\n\ttr:first-of-type > *:first-child {\n\t\tborder-top-left-radius: var(--rounded-width);\n\t\tborder-left: 1px solid var(--header-bg);\n\t}\n\ttr:first-of-type > *:last-child {\n\t\tborder-top-right-radius: var(--rounded-width);\n\t\tborder-right: 1px solid var(--header-bg);\n\t}\n\n\t/*------------ */\n\t/* Table Body  */\n\t/*------------ */\n\ttr:not(:first-of-type) > *:first-of-type {\n\t\tborder-left: 1px solid var(--border-color);\n\t}\n\ttr:not(:first-of-type) > *:last-of-type {\n\t\tborder-right: 1px solid var(--border-color);\n\t}\n\ttr:not(:first-of-type) > *:not(:last-of-type) {\n\t\tborder-right: 1px solid var(--border-color);\n\t}\n\ttr:not(:last-of-type):not(:first-of-type) > * {\n\t\tborder-bottom: 1px solid var(--border-color);\n\t}\n\n\t/*----------*/\n\t/* Table Header other than first row */\n\t/*----------*/\n\n\ttr:not(:first-of-type) th:first-of-type {\n\t\tborder-left: none;\n\t}\n\ttr:not(:first-of-type) th:last-of-type {\n\t\tborder-right: none;\n\t}\n\ttr:not(:first-of-type) th:not(:last-of-type) {\n\t\tborder-right: none;\n\t}\n\ttr:not(:last-of-type):not(:first-of-type) th {\n\t\tborder-bottom: none;\n\t}\n\ttr:last-of-type th:first-child {\n\t\tborder-bottom-left-radius: var(--rounded-width);\n\t}\n\ttr:last-of-type > th {\n\t\tborder-bottom: none;\n\t}\n\n\t/*----------*/\n\t/* Last Row */\n\t/*----------*/\n\ttr:last-of-type > *:first-child {\n\t\tborder-bottom-left-radius: var(--rounded-width);\n\t}\n\ttr:last-of-type > *:last-child {\n\t\tborder-bottom-right-radius: var(--rounded-width);\n\t}\n\ttr:last-of-type > * {\n\t\tborder-bottom: 1px solid var(--border-color);\n\t}\n\n\t/*--------------*/\n\t/* Sticky Column */\n\t/*--------------*/\n\t.sticky-cell {\n\t\tz-index: 1;\n\t\tposition: sticky;\n\t\twidth: var(--column-width);\n\t\tleft: 0;\n\t\t\n\t\t/* &:not(th) {\n\t\t\t@apply font-bold;\n\t\t} */\n\t\t\n\t\t&.last-col:after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tright: 0px;\n\t\t\twidth: 12px;\n\t\t\tbox-shadow: 11px 0px 12px 0px color.change(var.$primary-black-base, $alpha: 0.12);\n\t\t\t@apply inset-y-0;\n\t\t}\n\t}\n}\n\ndiv[data-cq-data-path*=\"mh_table\"] {\n\t--a-tag-color: var(--primary-blue-base);\n\t--a-tag-color-hover: var(--primary-blue-dark);\n\t\n\ta {\n\t\tword-break: break-all;\n\t}\n\th1, h2, h3, h4, h5, h6 {\n\t\tmargin: revert;\n\t}\n\tblockquote, dl, dd, hr, figure, p, pre {\n\t\tmargin: revert;\n\t}\n\tul, ol {\n\t\tlist-style-type: revert;\n\t\tpadding: revert;\n\t\tmargin: revert;\n\t}\n}\n\n.MHTable[data-use-theme=\"firefly\"] {\n\t--header-bg: var(--secondary-firefly-orange-base);\n}\n</style>\n"],"names":["__default__","props","__props","emit","__emit","root","ref","noOfColumnsLocked","updateTableSizes","_a","_b","_c","_d","updateColumnWidth","columnWidthsDesktop","columnWidthsMobile","tableWidth","getPixelWidth","percentage","el","index","lockColumns","item","observeParents","PARENTS_THAT_COULD_BE_HIDDEN","observeConfig","observer","mutationList","needToUpdate","mutation","selector","parentEl","onUnmounted","onMounted","siteName","_hoisted_1","_createElementBlock","_normalizeClass","$setup","_createElementVNode","_directive_html_sanitize"],"mappings":"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"}