@iamproperty/components 7.2.2--beta3 → 7.4.0

package/assets/js/components/tabs/tabs.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.2.2--beta3
+  * iamKey v7.4.0
   * Copyright 2022-2025 iamproperty
   */const w=(t,i,o,a)=>{const s=Math.tan(.375*Math.PI),r=window.innerWidth||document.body.clientWidth,n=Math.max(1,Math.floor(.01*r)),c=o-t,e=a-i,d=Math.abs(c/e),l=Math.abs(e/c);if(Math.abs(c)>n||Math.abs(e)>n){if(l<=s)return c<0?"left":"right";if(d<=s)return e<0?"top":"bottom"}else return"tap"},g=function(t){const i=t.querySelectorAll(":scope > details, :scope > a");let o=t.querySelector(":scope > .tabs__links"),a=t.querySelector(":scope .tabs__dropdown");if(t.shadowRoot&&t.shadowRoot.querySelector(".tabs__links")&&(o=t.shadowRoot.querySelector(".tabs__links")),!o){o=document.createElement("div"),o.classList.add("tabs__links");const r=document.createElement("div");r.classList.add("tabs__links__wrapper"),r.prepend(o),t.prepend(r)}a||(a=document.createElement("select"),a.classList.add("tabs__dropdown"),t.prepend(a));let s=0;i.forEach(r=>{let n=document.createElement("button");const c=document.createElement("option");if(r.matches("details")){const e=r.querySelector(":scope > summary"),d=e.classList.contains("disabled");e.classList.add("visually-hidden"),r.hasAttribute("id")&&n.setAttribute("data-id",`${r.getAttribute("id")}`),r.hasAttribute("open")&&n.setAttribute("aria-pressed",!0),n.innerHTML=`${e.innerText}`,n.classList.add("link"),n.setAttribute("data-index",s),n.setAttribute("part","tab-link"),c.innerHTML=`${e.innerText}`,c.value=e.innerText.replace(/\s+/g,"-").toLowerCase(),c.setAttribute("data-index",s),r.setAttribute("tabindex","-1"),d&&n.classList.add("disabled"),s++}else r.matches("a")&&(n=r);n.classList.add("link"),o.appendChild(n),a.appendChild(c)})},y=function(t){const i=t.querySelectorAll(":scope > details"),o=t.querySelectorAll(":scope > details > summary");let a=t.querySelector(":scope .tabs__links"),s=t.querySelectorAll(":scope .tabs__links > button");const r=t.querySelector(":scope .tabs__dropdown");let n=t.querySelector(":scope .tabs__next"),c;if(window.isClicked=!1,window.isScrolling=!1,t.shadowRoot&&(s=t.shadowRoot.querySelectorAll(".tabs__links > button"),a=t.shadowRoot.querySelector(".tabs__links"),n=t.shadowRoot.querySelector(".tabs__next")),s.forEach(e=>{e.addEventListener("click",d=>{if(d.preventDefault(),window.isClicked=!0,e.classList.contains("disabled"))return!1;s.forEach(l=>{const b=l==e;l.setAttribute("aria-pressed",b)}),a.scroll({top:0,left:e.offsetLeft,behavior:"smooth"}),k(i,e),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openTab",tabTitle:e.textContent}),e.matches(":last-child")?n?.setAttribute("disabled","disabled"):n?.removeAttribute("disabled")}),v(i,r)}),a.addEventListener("scrollend",()=>{clearTimeout(c),c=setTimeout(function(){let e=s[0],d=Math.abs(e.getBoundingClientRect().left);if(s.forEach(l=>{Math.abs(l.getBoundingClientRect().left)<d&&(d=Math.abs(l.getBoundingClientRect().left),e=l)}),window.isClicked)return window.isClicked=!1,!1;e.click(),e.focus()},500)}),o.forEach((e,d)=>{e.addEventListener("click",l=>{l.preventDefault(),s[d].click()})}),n?.addEventListener("click",e=>{e.preventDefault();const l=a.querySelector('[aria-pressed="true"]').nextSibling;l&&l.click()}),t.classList.contains("tabs--guided")){let e=0,d=0,l=0,b=0;i.forEach(u=>{u.addEventListener("touchstart",p=>{p.stopPropagation(),e=p.changedTouches[0].screenX,d=p.changedTouches[0].screenY}),u.addEventListener("touchend",p=>{p.stopPropagation(),l=p.changedTouches[0].screenX,b=p.changedTouches[0].screenY;const f=w(e,d,l,b),_=a.querySelector('[aria-pressed="true"]'),h=_.nextSibling,m=_.previousSibling;switch(f){case"left":h&&h.click();break;case"right":m&&m.click();break}})})}},k=function(t,i){t.forEach((o,a)=>{const s=i.getAttribute("data-index")==a;s?o.setAttribute("open",s):o.removeAttribute("open")})},v=function(t,i){i.addEventListener("change",o=>{o.preventDefault();const a=i.options[i.selectedIndex];k(t,a),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"openTab",tabTitle:a.innerText})})},x=function(t){if(!t.querySelector(":scope > details"))return!1;const i=t.querySelectorAll(":scope > details"),o=t.shadowRoot.querySelectorAll(".tabs__links > button");location.hash&&t.shadowRoot.querySelector(`.tabs__links [data-id="${location.hash.replace("#","")}"]`)?(t.shadowRoot.querySelector(`[data-id="${location.hash.replace("#","")}"]`).setAttribute("aria-pressed",!0),t.querySelector(`details[id="${location.hash.replace("#","")}"]`).setAttribute("open",!0)):t.querySelector("details[open]")||(i[0].setAttribute("open",!0),o[0].setAttribute("aria-pressed",!0))},L=function(t){g(t),y(t),x(t)};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"tabs"});class S extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",o=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
     <style>

package/assets/js/components/video-card/video-card.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.2.2--beta3
+  * iamKey v7.4.0
   * Copyright 2022-2025 iamproperty
   */const p=o=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:o})},h=(o,t,e)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:t}),e.forEach(r=>{o.addEventListener(r,function(i){const d={event:r,element:t,target:i.target};Object.keys(i.detail).forEach(a=>{const n=i.detail[a];d[a]=n}),window.dataLayer.push(d)})}),!0),b=`<div class="card__head" part="head">
   <slot name="head"></slot>

package/assets/js/components/video-card/video-card.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","../../modules/videos.js","video-card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n  <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n  <slot></slot>\n  <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n  <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n  <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n    cardComponent.classList.add('card');\n    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n    if (cardComponent.hasAttribute('data-image')) {\n        cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n    }\n    // Inset the HTML for the data total or icon fallback\n    if (cardComponent.hasAttribute('data-total')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n    }\n    else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n    }\n    if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n    }\n    else {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n    }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nconst videoSupport = (body) => __awaiter(void 0, void 0, void 0, function* () {\n    if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const loaded = yield loadYouTubeScripts();\n    }\n    setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {\n        if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            const loaded = yield loadYouTubeScripts();\n        }\n    }), \"2000\");\n    body.addEventListener('click', (event) => __awaiter(void 0, void 0, void 0, function* () {\n        let target = event.target.closest('.youtube-link[data-youtube]');\n        if (!target) {\n            target = event.target.closest('.vimeo-link[data-vimeo]');\n        }\n        if (target && target.hasAttribute('data-youtube')) {\n            event.preventDefault();\n            if (!document.body.classList.contains('youtubeLoaded')) {\n                // eslint-disable-next-line @typescript-eslint/no-unused-vars\n                const loaded = yield loadYouTubeScripts();\n            }\n            const link_id = 'youtube-' + target.getAttribute('data-youtube');\n            if (!document.getElementById(`${link_id}-dialog`)) {\n                document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n            }\n            const dialog = document.getElementById(`${link_id}-dialog`);\n            const embed = document.getElementById(link_id);\n            const customEvent = new CustomEvent('play-video', {\n                detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n            });\n            target.dispatchEvent(customEvent);\n            window.dataLayer.push(customEvent.detail);\n            createYoutTubeVideo(embed, target.getAttribute('data-youtube'));\n            dialog.showModal();\n            dialog.addEventListener('close', () => {\n                if (window.player[embed.getAttribute('id')] &&\n                    typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n                    window.player[embed.getAttribute('id')].pauseVideo();\n                }\n                const customEvent = new CustomEvent('close-video', {\n                    detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n                });\n                target.dispatchEvent(customEvent);\n                window.dataLayer.push(customEvent.detail);\n            });\n        }\n        else if (target && target.hasAttribute('data-vimeo')) {\n            event.preventDefault();\n            const link_id = 'vimeo-' + target.getAttribute('data-youtube');\n            if (!document.getElementById(`${link_id}-dialog`)) {\n                document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n            }\n            const dialog = document.getElementById(`${link_id}-dialog`);\n            const embed = document.getElementById(link_id);\n            const videoId = target.getAttribute('data-vimeo');\n            const customEvent = new CustomEvent('play-video', {\n                detail: { 'Video Type': 'Vimeo', ID: videoId },\n            });\n            target.dispatchEvent(customEvent);\n            window.dataLayer.push(customEvent.detail);\n            if (!embed.querySelector('iframe'))\n                embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n            dialog.showModal();\n            dialog.addEventListener('close', () => {\n                embed.innerHTML = ``; // Remove the video since we cant pause it\n                const customEvent = new CustomEvent('close-video', {\n                    detail: { 'Video Type': 'Vimeo', ID: target.getAttribute('data-vimeo') },\n                });\n                target.dispatchEvent(customEvent);\n                window.dataLayer.push(customEvent.detail);\n            });\n        }\n    }));\n});\nexport const loadYouTubeScripts = () => __awaiter(void 0, void 0, void 0, function* () {\n    return new Promise((resolve, reject) => {\n        const image = new Image();\n        image.onload = function () {\n            // This code loads the IFrame Player API code asynchronously.\n            const tag = document.createElement('script');\n            tag.src = 'https://www.youtube.com/iframe_api';\n            const firstScriptTag = document.getElementsByTagName('script')[0];\n            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n            document.body.classList.add('youtubeLoaded');\n            resolve(true);\n        };\n        image.onerror = function () {\n            reject(false);\n        };\n        image.src = 'https://youtube.com/favicon.ico';\n    });\n});\nexport const createYoutTubeVideo = (target, video_id) => __awaiter(void 0, void 0, void 0, function* () {\n    if (typeof window.player == 'undefined') {\n        window.player = [];\n    }\n    const link_id = target.getAttribute('id');\n    if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {\n        window.player[link_id].playVideo();\n        return false;\n    }\n    // This function creates an <iframe> (and YouTube player) after the API code downloads.\n    //function onYouTubeIframeAPIReady() {\n    window.player[link_id] = new YT.Player(link_id, {\n        height: '100%',\n        width: '100%',\n        videoId: video_id,\n        playerVars: {\n            modestbranding: 1,\n            playsinline: 1,\n            rel: 0,\n            showinfo: 0,\n        },\n        events: {\n            onReady: onPlayerReady,\n            onStateChange: onPlayerStateChange,\n        },\n    });\n    //}\n    //onYouTubeIframeAPIReady();\n    // The API will call this function when the video player is ready.\n    function onPlayerReady(event) {\n        // Play the video straight away\n        event.target.playVideo();\n    }\n    // The API calls this function when the player's state changes.\n    // The function indicates that when playing a video (state=1)\n    let done = false;\n    function onPlayerStateChange(event) {\n        if (event.data == YT.PlayerState.PLAYING && !done) {\n            const link = document.getElementById(link_id);\n            link.classList.add('player-ready');\n            done = true;\n        }\n    }\n});\nexport default videoSupport;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\nimport { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos.js';\ntrackComponentRegistered('iam-video-card');\nclass iamVideoCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/video-card.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    ${loadCSS}\n    </style>\n    ${cardHTML}\n    <dialog>\n      <div class=\"embed\"></div>\n    </dialog>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        return __awaiter(this, void 0, void 0, function* () {\n            // eslint-disable-next-line @typescript-eslint/no-this-alias\n            const cardComponent = this;\n            const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n            const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n            const link_id = randLetter + Date.now();\n            let dialog;\n            let embed;\n            setupCard(cardComponent);\n            // Check if youtube or vimeo video link is present\n            if (cardComponent.querySelector('[data-youtube]'))\n                cardComponent.setAttribute('data-youtube', cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));\n            if (cardComponent.querySelector('[data-vimeo]'))\n                cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));\n            // General dialog stuff\n            if (cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')) {\n                cardHead.setAttribute('tabindex', '0');\n                // Add dialog to page\n                if (!document.getElementById(`${link_id}-dialog`)) {\n                    document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n                }\n                dialog = document.getElementById(`${link_id}-dialog`);\n                embed = document.getElementById(link_id);\n            }\n            // Youtube\n            if (cardComponent.hasAttribute('data-youtube')) {\n                // Load the scripts only once\n                if (!document.body.classList.contains('youtubeLoaded')) {\n                    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n                    const loaded = yield loadYouTubeScripts();\n                }\n                cardHead.addEventListener('click', function () {\n                    const customEvent = new CustomEvent('play-video', {\n                        detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                    createYoutTubeVideo(embed, this.getAttribute('[data-youtbue]'));\n                    dialog.showModal();\n                });\n                dialog.addEventListener('close', () => {\n                    if (window.player[embed.getAttribute('id')] &&\n                        typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n                        window.player[embed.getAttribute('id')].pauseVideo();\n                    }\n                    const customEvent = new CustomEvent('close-video', {\n                        detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            else if (cardComponent.hasAttribute('data-vimeo')) {\n                // Vimeo\n                cardHead.addEventListener('click', function () {\n                    const videoId = cardComponent.getAttribute('data-vimeo');\n                    const customEvent = new CustomEvent('play-video', {\n                        detail: { 'Video Type': 'Vimeo', ID: videoId },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                    if (!embed.querySelector('iframe'))\n                        embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n                    dialog.showModal();\n                });\n                dialog.addEventListener('close', () => {\n                    embed.innerHTML = ``; // Remove the video since we cant pause it\n                    const customEvent = new CustomEvent('close-video', {\n                        detail: { 'Video Type': 'Vimeo', ID: cardComponent.getAttribute('data-vimeo') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);\n        });\n    }\n    static get observedAttributes() {\n        return ['data-image'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case 'data-image': {\n                if (oldVal != newVal) {\n                    const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n                    if (cardHeadImg)\n                        cardHeadImg.setAttribute('src', newVal);\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamVideoCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","loadYouTubeScripts","image","tag","firstScriptTag","createYoutTubeVideo","target","video_id","link_id","onPlayerReady","onPlayerStateChange","done","iamVideoCard","template","dialog","embed","customEvent","videoId","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
+{"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","../../modules/videos.js","video-card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","export const cardHTML = `<div class=\"card__head\" part=\"head\">\n  <slot name=\"head\"></slot>\n</div>\n<div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n<slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n<div class=\"card__body\" part=\"body\">\n  <slot></slot>\n  <slot name=\"secondary\" part=\"secondary\"></slot>\n</div>\n<div class=\"card__details\" part=\"details\">\n  <slot name=\"details\"></slot>\n</div>\n<div class=\"card__footer\" part=\"footer\">\n  <slot name=\"footer\"></slot>\n</div>`;\nexport const setupCard = (cardComponent) => {\n    cardComponent.classList.add('card');\n    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n    if (cardComponent.hasAttribute('data-image')) {\n        cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n    }\n    // Inset the HTML for the data total or icon fallback\n    if (cardComponent.hasAttribute('data-total')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n    }\n    else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n        cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n    }\n    if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n    }\n    else {\n        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n    }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nconst videoSupport = (body) => __awaiter(void 0, void 0, void 0, function* () {\n    if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        const loaded = yield loadYouTubeScripts();\n    }\n    setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {\n        if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            const loaded = yield loadYouTubeScripts();\n        }\n    }), '2000');\n    body.addEventListener('click', (event) => __awaiter(void 0, void 0, void 0, function* () {\n        let target = event.target.closest('.youtube-link[data-youtube]');\n        if (!target) {\n            target = event.target.closest('.vimeo-link[data-vimeo]');\n        }\n        if (target && target.hasAttribute('data-youtube')) {\n            event.preventDefault();\n            if (!document.body.classList.contains('youtubeLoaded')) {\n                // eslint-disable-next-line @typescript-eslint/no-unused-vars\n                const loaded = yield loadYouTubeScripts();\n            }\n            const link_id = 'youtube-' + target.getAttribute('data-youtube');\n            if (!document.getElementById(`${link_id}-dialog`)) {\n                document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n            }\n            const dialog = document.getElementById(`${link_id}-dialog`);\n            const embed = document.getElementById(link_id);\n            const customEvent = new CustomEvent('play-video', {\n                detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n            });\n            target.dispatchEvent(customEvent);\n            window.dataLayer.push(customEvent.detail);\n            createYoutTubeVideo(embed, target.getAttribute('data-youtube'));\n            dialog.showModal();\n            dialog.addEventListener('close', () => {\n                if (window.player[embed.getAttribute('id')] &&\n                    typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n                    window.player[embed.getAttribute('id')].pauseVideo();\n                }\n                const customEvent = new CustomEvent('close-video', {\n                    detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n                });\n                target.dispatchEvent(customEvent);\n                window.dataLayer.push(customEvent.detail);\n            });\n        }\n        else if (target && target.hasAttribute('data-vimeo')) {\n            event.preventDefault();\n            const link_id = 'vimeo-' + target.getAttribute('data-youtube');\n            if (!document.getElementById(`${link_id}-dialog`)) {\n                document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n            }\n            const dialog = document.getElementById(`${link_id}-dialog`);\n            const embed = document.getElementById(link_id);\n            const videoId = target.getAttribute('data-vimeo');\n            const customEvent = new CustomEvent('play-video', {\n                detail: { 'Video Type': 'Vimeo', ID: videoId },\n            });\n            target.dispatchEvent(customEvent);\n            window.dataLayer.push(customEvent.detail);\n            if (!embed.querySelector('iframe'))\n                embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n            dialog.showModal();\n            dialog.addEventListener('close', () => {\n                embed.innerHTML = ``; // Remove the video since we cant pause it\n                const customEvent = new CustomEvent('close-video', {\n                    detail: { 'Video Type': 'Vimeo', ID: target.getAttribute('data-vimeo') },\n                });\n                target.dispatchEvent(customEvent);\n                window.dataLayer.push(customEvent.detail);\n            });\n        }\n    }));\n});\nexport const loadYouTubeScripts = () => __awaiter(void 0, void 0, void 0, function* () {\n    return new Promise((resolve, reject) => {\n        const image = new Image();\n        image.onload = function () {\n            // This code loads the IFrame Player API code asynchronously.\n            const tag = document.createElement('script');\n            tag.src = 'https://www.youtube.com/iframe_api';\n            const firstScriptTag = document.getElementsByTagName('script')[0];\n            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n            document.body.classList.add('youtubeLoaded');\n            resolve(true);\n        };\n        image.onerror = function () {\n            reject(false);\n        };\n        image.src = 'https://youtube.com/favicon.ico';\n    });\n});\nexport const createYoutTubeVideo = (target, video_id) => __awaiter(void 0, void 0, void 0, function* () {\n    if (typeof window.player == 'undefined') {\n        window.player = [];\n    }\n    const link_id = target.getAttribute('id');\n    if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {\n        window.player[link_id].playVideo();\n        return false;\n    }\n    // This function creates an <iframe> (and YouTube player) after the API code downloads.\n    //function onYouTubeIframeAPIReady() {\n    window.player[link_id] = new YT.Player(link_id, {\n        height: '100%',\n        width: '100%',\n        videoId: video_id,\n        playerVars: {\n            modestbranding: 1,\n            playsinline: 1,\n            rel: 0,\n            showinfo: 0,\n        },\n        events: {\n            onReady: onPlayerReady,\n            onStateChange: onPlayerStateChange,\n        },\n    });\n    //}\n    //onYouTubeIframeAPIReady();\n    // The API will call this function when the video player is ready.\n    function onPlayerReady(event) {\n        // Play the video straight away\n        event.target.playVideo();\n    }\n    // The API calls this function when the player's state changes.\n    // The function indicates that when playing a video (state=1)\n    let done = false;\n    function onPlayerStateChange(event) {\n        if (event.data == YT.PlayerState.PLAYING && !done) {\n            const link = document.getElementById(link_id);\n            link.classList.add('player-ready');\n            done = true;\n        }\n    }\n});\nexport default videoSupport;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global.js';\nimport { cardHTML, setupCard } from '../../modules/card.module.js';\nimport { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos.js';\ntrackComponentRegistered('iam-video-card');\nclass iamVideoCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/video-card.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    \n    ${loadCSS}\n    </style>\n    ${cardHTML}\n    <dialog>\n      <div class=\"embed\"></div>\n    </dialog>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        return __awaiter(this, void 0, void 0, function* () {\n            // eslint-disable-next-line @typescript-eslint/no-this-alias\n            const cardComponent = this;\n            const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n            const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));\n            const link_id = randLetter + Date.now();\n            let dialog;\n            let embed;\n            setupCard(cardComponent);\n            // Check if youtube or vimeo video link is present\n            if (cardComponent.querySelector('[data-youtube]'))\n                cardComponent.setAttribute('data-youtube', cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));\n            if (cardComponent.querySelector('[data-vimeo]'))\n                cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));\n            // General dialog stuff\n            if (cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')) {\n                cardHead.setAttribute('tabindex', '0');\n                // Add dialog to page\n                if (!document.getElementById(`${link_id}-dialog`)) {\n                    document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n                }\n                dialog = document.getElementById(`${link_id}-dialog`);\n                embed = document.getElementById(link_id);\n            }\n            // Youtube\n            if (cardComponent.hasAttribute('data-youtube')) {\n                // Load the scripts only once\n                if (!document.body.classList.contains('youtubeLoaded')) {\n                    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n                    const loaded = yield loadYouTubeScripts();\n                }\n                cardHead.addEventListener('click', function () {\n                    const customEvent = new CustomEvent('play-video', {\n                        detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                    createYoutTubeVideo(embed, this.getAttribute('[data-youtbue]'));\n                    dialog.showModal();\n                });\n                dialog.addEventListener('close', () => {\n                    if (window.player[embed.getAttribute('id')] &&\n                        typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n                        window.player[embed.getAttribute('id')].pauseVideo();\n                    }\n                    const customEvent = new CustomEvent('close-video', {\n                        detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            else if (cardComponent.hasAttribute('data-vimeo')) {\n                // Vimeo\n                cardHead.addEventListener('click', function () {\n                    const videoId = cardComponent.getAttribute('data-vimeo');\n                    const customEvent = new CustomEvent('play-video', {\n                        detail: { 'Video Type': 'Vimeo', ID: videoId },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                    if (!embed.querySelector('iframe'))\n                        embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n                    dialog.showModal();\n                });\n                dialog.addEventListener('close', () => {\n                    embed.innerHTML = ``; // Remove the video since we cant pause it\n                    const customEvent = new CustomEvent('close-video', {\n                        detail: { 'Video Type': 'Vimeo', ID: cardComponent.getAttribute('data-vimeo') },\n                    });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);\n        });\n    }\n    static get observedAttributes() {\n        return ['data-image'];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case 'data-image': {\n                if (oldVal != newVal) {\n                    const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n                    if (cardHeadImg)\n                        cardHeadImg.setAttribute('src', newVal);\n                }\n                break;\n            }\n        }\n    }\n}\nexport default iamVideoCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","loadYouTubeScripts","image","tag","firstScriptTag","createYoutTubeVideo","target","video_id","link_id","onPlayerReady","onPlayerStateChange","done","iamVideoCard","template","dialog","embed","customEvent","videoId","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}

package/assets/js/components.js

@@ -0,0 +1,58 @@
+// @ts-nocheck
+const components = [
+    'accordion',
+    'header',
+    'table',
+    'tabs',
+    'card',
+    'filter-card',
+    'video-card',
+    'record-card',
+    'filterlist',
+    'applied-filters',
+    'pagination',
+    'notification',
+    'actionbar',
+    'nav',
+    'collapsible-side',
+    'address-lookup',
+    'fileupload',
+    'search',
+    'inline-edit',
+    'multiselect',
+    'multi-step',
+    'slider',
+    'carousel',
+    'marketing',
+    'barchart',
+    'splitbutton',
+];
+const prefix = 'iam';
+const options = {
+    rootMargin: '50px',
+    threshold: 0.1,
+};
+const componentExt = '.component.min.js';
+// Load components - Each component will load once the first of its type has been loaded
+components.forEach((component) => {
+    if (document.getElementsByTagName(`${prefix}-${component}`).length === 0)
+        return;
+    const callback = (entries) => {
+        entries.forEach((entry) => {
+            if (entry.intersectionRatio > 0) {
+                console.log(component);
+                import(`./components/${component}/${component}${componentExt}`)
+                    .then((module) => {
+                    if (!window.customElements.get(`${prefix}-${component}`))
+                        window.customElements.define(`${prefix}-${component}`, module.default);
+                })
+                    .catch((err) => {
+                    console.log(err.message);
+                });
+                intObserver.unobserve(entry.target);
+            }
+        });
+    };
+    const intObserver = new IntersectionObserver(callback, options);
+    intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
+});

package/assets/js/modules/advanced-select.js

@@ -0,0 +1,106 @@
+function advancedSelect(advancedSelect, displayInputField, datalist, isSearch = false) {
+    let currentFocus = -1;
+    if (!isSearch) {
+        displayInputField.addEventListener('focus', function () {
+            displayInputField.setAttribute('placeholder', displayInputField.value);
+            displayInputField.setAttribute('data-value', displayInputField.value);
+            displayInputField.value = '';
+            displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
+            displayInputField.setAttribute('list', '');
+            datalist.style.display = 'block';
+        });
+    }
+    else {
+        displayInputField.addEventListener('focus', function () {
+            displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
+            displayInputField.setAttribute('list', '');
+            datalist.style.display = 'block';
+        });
+    }
+    displayInputField.addEventListener('blur', function () {
+        if (displayInputField.hasAttribute('data-value')) {
+            displayInputField.value = displayInputField.getAttribute('data-value');
+        }
+        setTimeout(() => {
+            datalist.style.display = 'none';
+        }, 500);
+    });
+    for (const option of datalist.options) {
+        if (option.innerHTML == '')
+            option.innerHTML = option.value;
+    }
+    advancedSelect.addEventListener('click', function () {
+        if (event && event.target instanceof HTMLElement && event.target.closest('datalist option')) {
+            const option = event.target.closest('datalist option');
+            displayInputField.value = option.value;
+            if (typeof window.triggerDynamicEvent == "function")
+                window.triggerDynamicEvent(displayInputField);
+            datalist.style.display = 'none';
+            for (const optionInner of datalist.options) {
+                optionInner.classList.remove('active');
+            }
+            option.classList.add('active');
+        }
+    });
+    displayInputField.addEventListener('input', function () {
+        displayInputField.removeAttribute('data-value');
+        currentFocus = -1;
+        const text = displayInputField.value.toUpperCase();
+        for (const option of datalist.options) {
+            if (option.value.toUpperCase().indexOf(text) > -1) {
+                option.style.display = 'block';
+            }
+            else {
+                option.style.display = 'none';
+            }
+        }
+    });
+    displayInputField.addEventListener('keydown', function (e) {
+        if (e.keyCode == 40) {
+            currentFocus++;
+            addActive(datalist.options);
+        }
+        else if (e.keyCode == 38) {
+            currentFocus--;
+            addActive(datalist.options);
+        }
+        else if (e.keyCode == 13) {
+            e.preventDefault();
+            if (currentFocus > -1) {
+                /*and simulate a click on the "active" item:*/
+                if (datalist.options)
+                    datalist.options[currentFocus].click();
+            }
+        }
+    });
+    function addActive(x) {
+        if (!x)
+            return false;
+        removeActive(x);
+        if (currentFocus >= x.length)
+            currentFocus = 0;
+        if (currentFocus < 0)
+            currentFocus = x.length - 1;
+        x[currentFocus].classList.add('active');
+    }
+    function removeActive(x) {
+        for (let i = 0; i < x.length; i++) {
+            x[i].classList.remove('active');
+        }
+    }
+    // Add the empty button
+    displayInputField
+        .closest('label')
+        .insertAdjacentHTML('beforeend', '<button class="empty btn btn-action"><i class="fa-light fa-times me-0"></i></button>');
+    const closeBtn = advancedSelect.querySelector('.empty');
+    closeBtn.addEventListener('click', function (e) {
+        displayInputField.removeAttribute('placeholder');
+        displayInputField.removeAttribute('data-value');
+        displayInputField.value = '';
+        for (const optionInner of datalist.options) {
+            optionInner.classList.remove('active');
+            optionInner.removeAttribute('style');
+        }
+    });
+}
+export default advancedSelect;

package/assets/js/modules/dialogs.js

@@ -105,63 +105,65 @@ const extendDialogs = (body) => {
         }
         // Popover
         if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')) {
-            event.stopPropagation();
             const btn = event.target.closest('.dialog__wrapper > button');
             const parent = btn.parentNode;
-            let dataEvent = 'openPopover';
-            const popover = parent.querySelector(':scope > dialog');
-            // close open dialogs
-            if (document.querySelector('*:not([data-keep-open]) > dialog[open]') &&
-                document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover) {
-                // Check that the ope dialog isn't a parent of the dialog being opened
-                if (btn.closest('dialog[open]') != document.querySelector('*:not([data-keep-open]) > dialog[open]')) {
-                    document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
+            if (parent.querySelector('dialog')) {
+                event.stopPropagation();
+                let dataEvent = 'openPopover';
+                const popover = parent.querySelector(':scope > dialog');
+                // close open dialogs
+                if (document.querySelector('*:not([data-keep-open]) > dialog[open]') &&
+                    document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover) {
+                    // Check that the ope dialog isn't a parent of the dialog being opened
+                    if (btn.closest('dialog[open]') != document.querySelector('*:not([data-keep-open]) > dialog[open]')) {
+                        document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
+                    }
                 }
-            }
-            // Remove active class from exiting active buttons
-            Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
-                btnElement.removeAttribute('aria-expanded');
-            });
-            if (popover.hasAttribute('open')) {
-                popover.close();
-                dataEvent = 'closePopover';
-                popover.removeAttribute('style');
-                btn.removeAttribute('aria-expanded');
-            }
-            else {
-                popover.show();
-                btn.setAttribute('aria-expanded', true);
-                const position = btn.getBoundingClientRect();
-                let topOffset = position.top;
-                let leftOffset = position.left;
-                if (btn.closest('iam-table')) {
-                    const container = btn.closest('iam-table').parentNode.getBoundingClientRect();
-                    topOffset -= container.top;
-                    leftOffset -= container.left;
+                // Remove active class from exiting active buttons
+                Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement) => {
+                    btnElement.removeAttribute('aria-expanded');
+                });
+                if (popover.hasAttribute('open')) {
+                    popover.close();
+                    dataEvent = 'closePopover';
+                    popover.removeAttribute('style');
+                    btn.removeAttribute('aria-expanded');
                 }
-                if (popover.classList.contains('dialog--fix')) {
-                    popover.setAttribute('style', `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`);
+                else {
+                    popover.show();
+                    btn.setAttribute('aria-expanded', true);
+                    const position = btn.getBoundingClientRect();
+                    let topOffset = position.top;
+                    let leftOffset = position.left;
+                    if (btn.closest('iam-table')) {
+                        const container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+                        topOffset -= container.top;
+                        leftOffset -= container.left;
+                    }
+                    if (popover.classList.contains('dialog--fix')) {
+                        popover.setAttribute('style', `position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`);
+                    }
                 }
+                // When the dialog is fixed it could dip under the viewport
+                // Lets check the dimensions and transform it to appear above
+                let boundingRec = popover.getBoundingClientRect();
+                const popoverBottom = boundingRec.bottom - window.scrollY;
+                const windowPos = window.innerHeight - window.scrollY;
+                if (popoverBottom > windowPos) {
+                    const currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';
+                    popover.setAttribute('style', currentStyle + `transform: translate(0, calc(-100% - 4rem))`);
+                    // Check that the dialog doesn't go over the top of the page
+                    boundingRec = popover.getBoundingClientRect();
+                    const popoverTop = boundingRec.top - window.scrollY;
+                    if (popoverTop < 100)
+                        popover.removeAttribute('style');
+                }
+                window.dataLayer = window.dataLayer || [];
+                window.dataLayer.push({
+                    event: dataEvent,
+                    id: btn.textContent,
+                });
             }
-            // When the dialog is fixed it could dip under the viewport
-            // Lets check the dimensions and transform it to appear above
-            let boundingRec = popover.getBoundingClientRect();
-            const popoverBottom = boundingRec.bottom - window.scrollY;
-            const windowPos = window.innerHeight - window.scrollY;
-            if (popoverBottom > windowPos) {
-                const currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style') + ' ' : '';
-                popover.setAttribute('style', currentStyle + `transform: translate(0, calc(-100% - 4rem))`);
-                // Check that the dialog doesn't go over the top of the page
-                boundingRec = popover.getBoundingClientRect();
-                const popoverTop = boundingRec.top - window.scrollY;
-                if (popoverTop < 100)
-                    popover.removeAttribute('style');
-            }
-            window.dataLayer = window.dataLayer || [];
-            window.dataLayer.push({
-                event: dataEvent,
-                id: btn.textContent,
-            });
         }
         // Close popovers when clicked away
         if (event &&

package/assets/js/modules/dynamicEvents.js

@@ -1,4 +1,11 @@
 // Create the event listeners
+window.triggerDynamicEvent = (element, event = "change") => {
+    console.log('event');
+    if (element.hasAttribute('data-change-events') && event == "change")
+        splitEvents(element, element.getAttribute('data-change-events'));
+    if (element.hasAttribute('data-click-events') && event == "click")
+        splitEvents(element, element.getAttribute('data-click-events'));
+};
 const createDynamicEvents = () => {
     // Change event
     document.addEventListener('change', (event) => {

package/assets/js/modules/milestone-group.js

@@ -0,0 +1,30 @@
+export const showFuture = function (milestoneGroupElement) {
+    const futureToggle = milestoneGroupElement.dataset.showAllToggle;
+    if (!futureToggle) {
+        return;
+    }
+    const toggleBtn = document.createElement('button');
+    toggleBtn.innerHTML = 'Show next steps';
+    toggleBtn.classList.add('btn', 'btn-tertiary', 'show-all-toggle');
+    milestoneGroupElement.appendChild(toggleBtn);
+    toggleBtn.addEventListener('click', () => {
+        if (milestoneGroupElement.classList.contains('show-all')) {
+            toggleBtn.innerHTML = 'Show next steps';
+            milestoneGroupElement.classList.remove('show-all');
+            toggleInteractionEvent('hide-future-items', milestoneGroupElement);
+        }
+        else {
+            toggleBtn.innerHTML = 'Hide next steps';
+            milestoneGroupElement.classList.add('show-all');
+            toggleInteractionEvent('show-future-items', milestoneGroupElement);
+        }
+    });
+};
+const toggleInteractionEvent = function (eventName, element) {
+    const customEvent = new CustomEvent(eventName, {});
+    element.dispatchEvent(customEvent);
+};
+const milestoneGroup = function (milestoneGroupElement) {
+    showFuture(milestoneGroupElement);
+};
+export default milestoneGroup;

package/assets/js/modules/milestone.js

@@ -0,0 +1,89 @@
+export const setStatus = function (milestoneElement) {
+    const status = milestoneElement.dataset.status;
+    if (!status) {
+        return;
+    }
+    const milestoneWrap = milestoneElement.shadowRoot.querySelector('.milestone-wrap');
+    const statusTag = document.createElement('span');
+    statusTag.setAttribute('part', 'status');
+    statusTag.classList.add('milestone-status');
+    statusTag.innerHTML = `${status} Step`;
+    if (status === 'Current') {
+        milestoneElement.classList.add('current');
+    }
+    milestoneWrap.insertAdjacentElement('afterbegin', statusTag);
+};
+export const getMilestoneTasks = function (milestoneElement) {
+    const taskWrap = milestoneElement.shadowRoot.querySelector('.task-wrap');
+    const tasks = milestoneElement.dataset.items ? JSON.parse(milestoneElement.dataset.items) : [];
+    if (!tasks.length) {
+        return;
+    }
+    tasks.forEach(task => {
+        const taskItem = document.createElement('details');
+        const taskName = document.createElement('summary');
+        const detailsWrap = document.createElement('div');
+        const taskDescription = document.createElement('p');
+        detailsWrap.classList.add('task-details');
+        taskName.innerHTML = task.name;
+        if (task.date_completed) {
+            taskName.classList.add('complete');
+        }
+        taskItem.appendChild(taskName);
+        if (task.description) {
+            taskDescription.innerHTML = task.description;
+            detailsWrap.appendChild(taskDescription);
+        }
+        if (task.actions.length) {
+            detailsWrap.appendChild(getSubtasks(task.actions, taskName));
+        }
+        taskItem.appendChild(detailsWrap);
+        taskWrap.insertAdjacentElement('beforeend', taskItem);
+        // Fire tracking events
+        taskItem.addEventListener('click', () => {
+            if (taskItem === null || taskItem === void 0 ? void 0 : taskItem.hasAttribute('open')) {
+                itemInteractionEvent('milestone-item-closed', task.name, milestoneElement);
+            }
+            else {
+                itemInteractionEvent('milestone-item-opened', task.name, milestoneElement);
+            }
+        });
+    });
+    milestoneElement.appendChild(taskWrap);
+};
+const itemInteractionEvent = function (eventName, taskName, element) {
+    const customEvent = new CustomEvent(eventName, {
+        detail: {
+            title: taskName,
+        },
+    });
+    element.dispatchEvent(customEvent);
+};
+const getSubtasks = function (actions, taskName) {
+    const actionsWrap = document.createElement('ul');
+    const totalCount = actions.length;
+    const completed = actions.filter((action) => action.date_completed);
+    const completedCount = completed.length || 0;
+    if (totalCount < 1) {
+        return;
+    }
+    taskName.innerHTML += ` (${completedCount}/${totalCount})`;
+    actions.forEach(action => {
+        const actionItem = document.createElement('li');
+        const actionCompletedDate = document.createElement('span');
+        if (action.date_completed) {
+            actionItem.classList.add('complete');
+            actionCompletedDate.classList.add('action-date');
+            actionCompletedDate.innerHTML = action.date_completed;
+        }
+        actionItem.innerHTML = action.action;
+        actionItem.appendChild(actionCompletedDate);
+        actionsWrap.appendChild(actionItem);
+    });
+    return actionsWrap;
+};
+const milestone = function (milestoneElement) {
+    setStatus(milestoneElement);
+    getMilestoneTasks(milestoneElement);
+};
+export default milestone;

package/assets/js/modules/table.js

@@ -296,7 +296,17 @@ export const setupAdvancedTable = (component, table) => {
             : document.querySelector(`iam-actionbar[data-for='${component.getAttribute('id')}']`);
         addSelectboxes(component, table, actionbar);
     }
-    component.querySelectorAll('.dialog__wrapper .btn-compact').forEach((btn) => {
+    component.querySelectorAll('.dialog__wrapper .btn-compact').forEach((btn, index) => {
+        const wrapper = btn.closest('.dialog__wrapper');
+        const dialog = wrapper.querySelector('dialog');
+        // Transform dialog into a menu custom element
+        if (dialog) {
+            const id = `menu${uniqueID(index)}`;
+            dialog.setAttribute('id', id);
+            dialog.setAttribute('popover', 'auto');
+            btn.setAttribute('popovertarget', id);
+            dialog.outerHTML = dialog.outerHTML.replace(/<dialog/g, '<iam-menu').replace(/<\/dialog>/g, '</iam-menu>');
+        }
         btn.classList.add('btn-sm');
         btn.classList.add('m-0');
         const tr = btn.closest('tr');

package/assets/js/modules/videos.js

@@ -17,7 +17,7 @@ const videoSupport = (body) => __awaiter(void 0, void 0, void 0, function* () {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const loaded = yield loadYouTubeScripts();
         }
-    }), "2000");
+    }), '2000');
     body.addEventListener('click', (event) => __awaiter(void 0, void 0, void 0, function* () {
         let target = event.target.closest('.youtube-link[data-youtube]');
         if (!target) {