@iamproperty/components 6.1.0--beta → 6.1.0--beta3

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

@@ -1,7 +1,7 @@
 /*!
-  * iamKey v6.1.0--beta
-  * Copyright 2022-2024 iamproperty
-  */const u=d=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:d})},p=(d,t,e)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:t}),e.forEach(r=>{d.addEventListener(r,function(o){let a={event:r,element:t,target:o.target};Object.keys(o.detail).forEach(i=>{const n=o.detail[i];a[i]=n}),window.dataLayer.push(a)})}),!0),h=`<div class="card__head" part="head">
+  * iamKey v6.1.0--beta3
+  * Copyright 2022-2025 iamproperty
+  */const u=i=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:i})},p=(i,t,e)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:t}),e.forEach(r=>{i.addEventListener(r,function(o){let a={event:r,element:t,target:o.target};Object.keys(o.detail).forEach(d=>{const n=o.detail[d];a[d]=n}),window.dataLayer.push(a)})}),!0),h=`<div class="card__head" part="head">
   <slot name="head"></slot>
 </div>
 <div class="card__badges"><slot name="badges"></slot></div>
@@ -15,16 +15,16 @@
 </div>
 <div class="card__footer" part="footer">
   <slot name="footer"></slot>
-</div>`,b=d=>{d.classList.add("card");const t=d.shadowRoot.querySelector(".card__head"),e=d.shadowRoot.querySelector(".card__body");d.hasAttribute("data-image")&&(t.innerHTML+=`<img src="${d.getAttribute("data-image")}" alt="" loading="lazy" part="image" />`),d.hasAttribute("data-total")?e.insertAdjacentHTML("beforeend",`<div class="card__total">${d.getAttribute("data-total")}</div>`):d.querySelector('[slot="total-icon"]')&&e.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>'),d.querySelector('[slot="badges"]')||d.shadowRoot.querySelector(".card__badges").remove()};var g=function(d,t,e,r){function o(a){return a instanceof e?a:new e(function(i){i(a)})}return new(e||(e=Promise))(function(a,i){function n(c){try{l(r.next(c))}catch(m){i(m)}}function s(c){try{l(r.throw(c))}catch(m){i(m)}}function l(c){c.done?a(c.value):o(c.value).then(n,s)}l((r=r.apply(d,t||[])).next())})};u("iam-video-card");class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
+</div>`,b=i=>{i.classList.add("card");const t=i.shadowRoot.querySelector(".card__head"),e=i.shadowRoot.querySelector(".card__body");i.hasAttribute("data-image")&&(t.innerHTML+=`<img src="${i.getAttribute("data-image")}" alt="" loading="lazy" part="image" />`),i.hasAttribute("data-total")?e.insertAdjacentHTML("beforeend",`<div class="card__total">${i.getAttribute("data-total")}</div>`):i.querySelector('[slot="total-icon"]')&&e.insertAdjacentHTML("beforeend",'<div class="card__total"><slot name="total-icon"></slot></div>'),i.querySelector('[slot="badges"]')?i.shadowRoot.querySelector(".card__badges").classList.remove("empty"):i.shadowRoot.querySelector(".card__badges").classList.add("empty")};var g=function(i,t,e,r){function o(a){return a instanceof e?a:new e(function(d){d(a)})}return new(e||(e=Promise))(function(a,d){function n(c){try{l(r.next(c))}catch(m){d(m)}}function s(c){try{l(r.throw(c))}catch(m){d(m)}}function l(c){c.done?a(c.value):o(c.value).then(n,s)}l((r=r.apply(i,t||[])).next())})};u("iam-video-card");class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
     <style>
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     
-    :host{--card-icon-right: 1rem;--card-head-top-padding: 2rem;--card-head-bottom-padding: 2rem;--card-footer-bottom-padding: 1.5rem;--card-head-height: 6rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px;margin-bottom:2rem}:host>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__body{padding:var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:0;padding:0 var(--card-right-padding) 0 var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 6 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:left;left:0;z-index:9}.card__badges{padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);margin-bottom:-1.5rem}:host{--card-right-padding: 1rem;--card-head-height: 10rem;font-size:1.5rem;--line-height: 2rem}:host(:is([data-youtube],[data-vimeo]):not(.video-card--top)) .card__head{order:2}:host(:is([data-youtube],[data-vimeo])) .card__head{cursor:pointer;position:relative}:host(:is([data-youtube],[data-vimeo])) .card__head>*:not(img){z-index:-1}:host(:is([data-youtube],[data-vimeo])) .card__head:before{content:"";display:block;background-color:var(--video-btn-colour, var(--colour-success));height:5rem;width:5rem;position:absolute;top:calc(50% - 2.5rem);left:calc(50% - 2.5rem);z-index:2;border-radius:2.5rem}:host(:is([data-youtube],[data-vimeo])) .card__head:after{--icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");content:"";display:block;height:2rem;width:2rem;position:absolute;top:calc(50% - 1rem);left:calc(50% - .8rem);z-index:5;background:var(--colour-primary-theme);mask-image:var(--icon);mask-size:80%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon);-webkit-mask-size:80%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}:host(:is([data-youtube],[data-vimeo])) .card__head:is(:hover,:focus){--video-btn-colour: var(--colour-canvas)}:host(:is([data-youtube],[data-vimeo])) .card__head:is(:active){--video-btn-colour: color-mix(in oklab, var(--colour-success), #000000 20%) !important}.embed{aspect-ratio:1/1;display:block;width:10rem}/*# sourceMappingURL=assets/css/components/video-card.component.css.map */
+    :host{--card-icon-right: 1rem;--card-head-top-padding: 2rem;--card-head-bottom-padding: 2rem;--card-footer-bottom-padding: 1.5rem;--card-head-height: 6rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);width:100%;text-align:left;display:flex;flex-direction:column;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--outline-colour, --colour-canvas-2);outline-offset:-2px;margin-bottom:2rem}:host>*{width:100%;box-sizing:border-box}:host-context(:is(a,label,button)){margin-bottom:0 !important}:host(.border-0){box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__head:has(img){min-height:var(--card-head-height);position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card__head:has(img)>img{position:absolute;top:0;left:0;margin:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover}.card__body{padding:var(--card-head-top-padding) var(--card-right-padding) var(--card-head-bottom-padding) var(--card-left-padding)}.card__footer{margin-top:0;padding:0 var(--card-right-padding) 0 var(--card-left-padding)}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;vertical-align:middle !important}::slotted(i:not(.fa-light):not(.fa-bold)){font-weight:400 !important}::slotted(.badge){margin-bottom:.375rem !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;font-size:1rem !important}::slotted(small){padding-top:1rem !important;display:block !important;font-weight:normal !important;padding-bottom:0 !important;color:var(--colour-body)}::slotted(span:not(.badge):not([class*=pt-])){padding-top:1.5rem !important}::slotted(:is(a,button)[slot=footer]){margin-bottom:var(--card-footer-bottom-padding) !important}.card__body:has(.card__total){--card-head-top-padding: 1rem;--card-head-bottom-padding: 1.5rem}.card__total{font-size:3rem;line-height:3rem;padding-right:1rem;margin-top:.5rem}.card__total i{font-family:var(--fa-style-family, "Font Awesome 6 Pro");font-weight:var(--fa-style, 900);display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important}::slotted([slot=total-icon]){display:block !important;font-size:2.5rem !important;margin:.5rem 0 .5rem 0 !important;line-height:2.5rem}.card__head:has(img)~.card__badges{position:absolute;top:0;text-align:left;left:0;z-index:9}.card__badges:not(.empty){padding:var(--card-badges-top-padding, 1rem) var(--card-right-padding) 0 var(--card-left-padding);margin-bottom:-1.5rem}:host{--card-right-padding: 1rem;--card-head-height: 10rem;font-size:1.5rem;--line-height: 2rem}:host(:is([data-youtube],[data-vimeo]):not(.video-card--top)) .card__head{order:2}:host(:is([data-youtube],[data-vimeo])) .card__head{cursor:pointer;position:relative}:host(:is([data-youtube],[data-vimeo])) .card__head>*:not(img){z-index:-1}:host(:is([data-youtube],[data-vimeo])) .card__head:before{content:"";display:block;background-color:var(--video-btn-colour, var(--colour-success));height:5rem;width:5rem;position:absolute;top:calc(50% - 2.5rem);left:calc(50% - 2.5rem);z-index:2;border-radius:2.5rem}:host(:is([data-youtube],[data-vimeo])) .card__head:after{--icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");content:"";display:block;height:2rem;width:2rem;position:absolute;top:calc(50% - 1rem);left:calc(50% - .8rem);z-index:5;background:var(--colour-primary-theme);mask-image:var(--icon);mask-size:80%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon);-webkit-mask-size:80%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}:host(:is([data-youtube],[data-vimeo])) .card__head:is(:hover,:focus){--video-btn-colour: var(--colour-canvas)}:host(:is([data-youtube],[data-vimeo])) .card__head:is(:active){--video-btn-colour: color-mix(in oklab, var(--colour-success), #000000 20%) !important}.embed{aspect-ratio:1/1;display:block;width:10rem}/*# sourceMappingURL=assets/css/components/video-card.component.css.map */
 
     </style>
     ${h}
     <dialog>
       <div class="embed"></div>
     </dialog>
-    `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){return g(this,void 0,void 0,function*(){const t=this,e=t.shadowRoot.querySelector(".card__head"),o=String.fromCharCode(65+Math.floor(Math.random()*26))+Date.now();let a,i;b(t),t.querySelector("[data-youtube]")&&t.setAttribute("data-youtube",t.querySelector("[data-youtube]").getAttribute("data-youtube")),t.querySelector("[data-vimeo]")&&t.setAttribute("data-vimeo",t.querySelector("[data-vimeo]").getAttribute("data-vimeo")),(t.hasAttribute("data-youtube")||t.hasAttribute("data-vimeo"))&&(e.setAttribute("tabindex","0"),document.getElementById(`${o}-dialog`)||document.body.insertAdjacentHTML("beforeend",`<dialog id="${o}-dialog"><div class="embed" id="${o}"></div></dialog>`),a=document.getElementById(`${o}-dialog`),i=document.getElementById(o)),t.hasAttribute("data-youtube")?(document.body.classList.contains("youtubeLoaded")||(yield this.loadYouTubeScripts()),e.addEventListener("click",function(){const n=new CustomEvent("play-video",{detail:{"Video Type":"YoutTube",ID:t.getAttribute("data-youtube")}});t.dispatchEvent(n),t.createYoutTubeVideo(i),a.showModal()}),a.addEventListener("close",n=>{window.player[i.getAttribute("id")]&&typeof window.player[i.getAttribute("id")].pauseVideo=="function"&&window.player[i.getAttribute("id")].pauseVideo();const s=new CustomEvent("close-video",{detail:{"Video Type":"YoutTube",ID:t.getAttribute("data-youtube")}});t.dispatchEvent(s)})):t.hasAttribute("data-vimeo")&&(e.addEventListener("click",function(){const n=t.getAttribute("data-vimeo"),s=new CustomEvent("play-video",{detail:{"Video Type":"Vimeo",ID:n}});t.dispatchEvent(s),i.querySelector("iframe")||(i.innerHTML=`<iframe src="https://player.vimeo.com/video/${n}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`),a.showModal()}),a.addEventListener("close",n=>{i.innerHTML="";const s=new CustomEvent("close-video",{detail:{"Video Type":"Vimeo",ID:t.getAttribute("data-vimeo")}});t.dispatchEvent(s)})),p(t,"iam-video-card",["play-video","close-video"])})}loadYouTubeScripts(){return new Promise((t,e)=>{const r=new Image;r.onload=function(){var o=document.createElement("script");o.src="https://www.youtube.com/iframe_api";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a),document.body.classList.add("youtubeLoaded"),t(!0)},r.onerror=function(){e(!1)},r.src="https://youtube.com/favicon.ico"})}createYoutTubeVideo(t){typeof window.player>"u"&&(window.player=[]);var e=t.getAttribute("id"),r=this.getAttribute("data-youtube");if(console.log(window.player),typeof window.player[e]<"u"&&typeof window.player[e].pauseVideo=="function")return window.player[e].playVideo(),!1;window.player[e]=new YT.Player(e,{height:"100%",width:"100%",videoId:r,playerVars:{modestbranding:1,playsinline:1,rel:0,showinfo:0},events:{onReady:o,onStateChange:i}});function o(n){n.target.playVideo()}var a=!1;function i(n){if(n.data==YT.PlayerState.PLAYING&&!a){var s=document.getElementById(e);s.classList.add("player-ready"),a=!0}}}static get observedAttributes(){return["data-image"]}attributeChangedCallback(t,e,r){switch(t){case"data-image":{if(e!=r){const o=this.shadowRoot.querySelector(".card__head img");o&&o.setAttribute("src",r)}break}}}}export{v as default};
+    `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){return g(this,void 0,void 0,function*(){const t=this,e=t.shadowRoot.querySelector(".card__head"),o=String.fromCharCode(65+Math.floor(Math.random()*26))+Date.now();let a,d;b(t),t.querySelector("[data-youtube]")&&t.setAttribute("data-youtube",t.querySelector("[data-youtube]").getAttribute("data-youtube")),t.querySelector("[data-vimeo]")&&t.setAttribute("data-vimeo",t.querySelector("[data-vimeo]").getAttribute("data-vimeo")),(t.hasAttribute("data-youtube")||t.hasAttribute("data-vimeo"))&&(e.setAttribute("tabindex","0"),document.getElementById(`${o}-dialog`)||document.body.insertAdjacentHTML("beforeend",`<dialog id="${o}-dialog"><div class="embed" id="${o}"></div></dialog>`),a=document.getElementById(`${o}-dialog`),d=document.getElementById(o)),t.hasAttribute("data-youtube")?(document.body.classList.contains("youtubeLoaded")||(yield this.loadYouTubeScripts()),e.addEventListener("click",function(){const n=new CustomEvent("play-video",{detail:{"Video Type":"YoutTube",ID:t.getAttribute("data-youtube")}});t.dispatchEvent(n),t.createYoutTubeVideo(d),a.showModal()}),a.addEventListener("close",n=>{window.player[d.getAttribute("id")]&&typeof window.player[d.getAttribute("id")].pauseVideo=="function"&&window.player[d.getAttribute("id")].pauseVideo();const s=new CustomEvent("close-video",{detail:{"Video Type":"YoutTube",ID:t.getAttribute("data-youtube")}});t.dispatchEvent(s)})):t.hasAttribute("data-vimeo")&&(e.addEventListener("click",function(){const n=t.getAttribute("data-vimeo"),s=new CustomEvent("play-video",{detail:{"Video Type":"Vimeo",ID:n}});t.dispatchEvent(s),d.querySelector("iframe")||(d.innerHTML=`<iframe src="https://player.vimeo.com/video/${n}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`),a.showModal()}),a.addEventListener("close",n=>{d.innerHTML="";const s=new CustomEvent("close-video",{detail:{"Video Type":"Vimeo",ID:t.getAttribute("data-vimeo")}});t.dispatchEvent(s)})),p(t,"iam-video-card",["play-video","close-video"])})}loadYouTubeScripts(){return new Promise((t,e)=>{const r=new Image;r.onload=function(){var o=document.createElement("script");o.src="https://www.youtube.com/iframe_api";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a),document.body.classList.add("youtubeLoaded"),t(!0)},r.onerror=function(){e(!1)},r.src="https://youtube.com/favicon.ico"})}createYoutTubeVideo(t){typeof window.player>"u"&&(window.player=[]);var e=t.getAttribute("id"),r=this.getAttribute("data-youtube");if(console.log(window.player),typeof window.player[e]<"u"&&typeof window.player[e].pauseVideo=="function")return window.player[e].playVideo(),!1;window.player[e]=new YT.Player(e,{height:"100%",width:"100%",videoId:r,playerVars:{modestbranding:1,playsinline:1,rel:0,showinfo:0},events:{onReady:o,onStateChange:d}});function o(n){n.target.playVideo()}var a=!1;function d(n){if(n.data==YT.PlayerState.PLAYING&&!a){var s=document.getElementById(e);s.classList.add("player-ready"),a=!0}}}static get observedAttributes(){return["data-image"]}attributeChangedCallback(t,e,r){switch(t){case"data-image":{if(e!=r){const o=this.shadowRoot.querySelector(".card__head img");o&&o.setAttribute("src",r)}break}}}}export{v as default};
 //# sourceMappingURL=video-card.component.min.js.map

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","video-card.component.js"],"sourcesContent":["// @ts-nocheck\nexport 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            let 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').remove();\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};\n// @ts-nocheck\nimport { trackComponent, trackComponentRegistered } from \"../_global.js\";\nimport { cardHTML, setupCard } from \"../../modules/card.module.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') ? document.body.getAttribute('data-assets-location') : '/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            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                    let loaded = yield this.loadYouTubeScripts();\n                }\n                cardHead.addEventListener('click', function () {\n                    const customEvent = new CustomEvent(\"play-video\", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });\n                    cardComponent.dispatchEvent(customEvent);\n                    cardComponent.createYoutTubeVideo(embed);\n                    dialog.showModal();\n                });\n                dialog.addEventListener(\"close\", (event) => {\n                    if (window.player[embed.getAttribute('id')] && typeof window.player[embed.getAttribute('id')].pauseVideo == \"function\") {\n                        window.player[embed.getAttribute('id')].pauseVideo();\n                    }\n                    const customEvent = new CustomEvent(\"close-video\", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            else if (cardComponent.hasAttribute('data-vimeo')) { // Vimeo\n                cardHead.addEventListener('click', function () {\n                    const videoId = cardComponent.getAttribute('data-vimeo');\n                    const customEvent = new CustomEvent(\"play-video\", { detail: { 'Video Type': 'Vimeo', 'ID': videoId } });\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\", (event) => {\n                    embed.innerHTML = ``; // Remove the video since we cant pause it\n                    const customEvent = new CustomEvent(\"close-video\", { detail: { 'Video Type': 'Vimeo', 'ID': cardComponent.getAttribute('data-vimeo') } });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            trackComponent(cardComponent, \"iam-video-card\", ['play-video', 'close-video']);\n        });\n    }\n    loadYouTubeScripts() {\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                var tag = document.createElement('script');\n                tag.src = \"https://www.youtube.com/iframe_api\";\n                var 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    }\n    createYoutTubeVideo(target) {\n        if (typeof window.player == \"undefined\") {\n            window.player = [];\n        }\n        var link_id = target.getAttribute('id');\n        var video_id = this.getAttribute('data-youtube');\n        console.log(window.player);\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        var done = false;\n        function onPlayerStateChange(event) {\n            if (event.data == YT.PlayerState.PLAYING && !done) {\n                var link = document.getElementById(link_id);\n                link.classList.add('player-ready');\n                done = true;\n            }\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","iamVideoCard","template","link_id","dialog","embed","customEvent","videoId","image","tag","firstScriptTag","target","video_id","onPlayerReady","onPlayerStateChange","done","link","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
+{"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","video-card.component.js"],"sourcesContent":["// @ts-nocheck\nexport 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            let 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};\n// @ts-nocheck\nimport { trackComponent, trackComponentRegistered } from \"../_global.js\";\nimport { cardHTML, setupCard } from \"../../modules/card.module.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') ? document.body.getAttribute('data-assets-location') : '/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            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                    let loaded = yield this.loadYouTubeScripts();\n                }\n                cardHead.addEventListener('click', function () {\n                    const customEvent = new CustomEvent(\"play-video\", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });\n                    cardComponent.dispatchEvent(customEvent);\n                    cardComponent.createYoutTubeVideo(embed);\n                    dialog.showModal();\n                });\n                dialog.addEventListener(\"close\", (event) => {\n                    if (window.player[embed.getAttribute('id')] && typeof window.player[embed.getAttribute('id')].pauseVideo == \"function\") {\n                        window.player[embed.getAttribute('id')].pauseVideo();\n                    }\n                    const customEvent = new CustomEvent(\"close-video\", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            else if (cardComponent.hasAttribute('data-vimeo')) { // Vimeo\n                cardHead.addEventListener('click', function () {\n                    const videoId = cardComponent.getAttribute('data-vimeo');\n                    const customEvent = new CustomEvent(\"play-video\", { detail: { 'Video Type': 'Vimeo', 'ID': videoId } });\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\", (event) => {\n                    embed.innerHTML = ``; // Remove the video since we cant pause it\n                    const customEvent = new CustomEvent(\"close-video\", { detail: { 'Video Type': 'Vimeo', 'ID': cardComponent.getAttribute('data-vimeo') } });\n                    cardComponent.dispatchEvent(customEvent);\n                });\n            }\n            trackComponent(cardComponent, \"iam-video-card\", ['play-video', 'close-video']);\n        });\n    }\n    loadYouTubeScripts() {\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                var tag = document.createElement('script');\n                tag.src = \"https://www.youtube.com/iframe_api\";\n                var 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    }\n    createYoutTubeVideo(target) {\n        if (typeof window.player == \"undefined\") {\n            window.player = [];\n        }\n        var link_id = target.getAttribute('id');\n        var video_id = this.getAttribute('data-youtube');\n        console.log(window.player);\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        var done = false;\n        function onPlayerStateChange(event) {\n            if (event.data == YT.PlayerState.PLAYING && !done) {\n                var link = document.getElementById(link_id);\n                link.classList.add('player-ready');\n                done = true;\n            }\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","iamVideoCard","template","link_id","dialog","embed","customEvent","videoId","image","tag","firstScriptTag","target","video_id","onPlayerReady","onPlayerStateChange","done","link","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}

package/assets/js/components.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v6.1.0--beta
-  * Copyright 2022-2024 iamproperty
-  */(function(t){typeof define=="function"&&define.amd?define(t):t()})(function(){"use strict";var t=["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","slider","carousel","marketing","barchart"],a="iam",i={rootMargin:"50px",threshold:.1},r=".component.min.js";t.forEach(e=>{if(document.getElementsByTagName("".concat(a,"-").concat(e)).length!==0){var s=l=>{l.forEach(o=>{o.intersectionRatio>0&&(console.log(e),import("./components/".concat(e,"/").concat(e).concat(r)).then(c=>{window.customElements.get("".concat(a,"-").concat(e))||window.customElements.define("".concat(a,"-").concat(e),c.default)}).catch(c=>{console.log(c.message)}),n.unobserve(o.target))})},n=new IntersectionObserver(s,i);n.observe(document.getElementsByTagName("".concat(a,"-").concat(e))[0])}})});
+  * iamKey v6.1.0--beta3
+  * Copyright 2022-2025 iamproperty
+  */(function(t){typeof define=="function"&&define.amd?define(t):t()})(function(){"use strict";var t=["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"],a="iam",i={rootMargin:"50px",threshold:.1},r=".component.min.js";t.forEach(e=>{if(document.getElementsByTagName("".concat(a,"-").concat(e)).length!==0){var s=l=>{l.forEach(o=>{o.intersectionRatio>0&&(console.log(e),import("./components/".concat(e,"/").concat(e).concat(r)).then(c=>{window.customElements.get("".concat(a,"-").concat(e))||window.customElements.define("".concat(a,"-").concat(e),c.default)}).catch(c=>{console.log(c.message)}),n.unobserve(o.target))})},n=new IntersectionObserver(s,i);n.observe(document.getElementsByTagName("".concat(a,"-").concat(e))[0])}})});
 //# sourceMappingURL=components.bundle.js.map

package/assets/js/components.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.bundle.js","sources":["components.js"],"sourcesContent":["\"use strict\";\n// @ts-nocheck\nconst 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', 'slider', 'carousel', 'marketing', 'barchart'];\nconst prefix = \"iam\";\nconst options = {\n    rootMargin: '50px',\n    threshold: 0.1\n};\nconst componentExt = \".component.min.js\";\n// Load components - Each component will load once the first of its type has been loaded\ncomponents.forEach((component) => {\n    if (document.getElementsByTagName(`${prefix}-${component}`).length === 0)\n        return;\n    let callback = (entries) => {\n        entries.forEach((entry) => {\n            if (entry.intersectionRatio > 0) {\n                console.log(component);\n                import(`./components/${component}/${component}${componentExt}`).then(module => {\n                    if (!window.customElements.get(`${prefix}-${component}`))\n                        window.customElements.define(`${prefix}-${component}`, module.default);\n                }).catch((err) => {\n                    console.log(err.message);\n                });\n                intObserver.unobserve(entry.target);\n            }\n        });\n    };\n    const intObserver = new IntersectionObserver(callback, options);\n    intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);\n});\n"],"names":["components","prefix","options","rootMargin","threshold","componentExt","forEach","component","document","getElementsByTagName","concat","length","callback","entries","entry","intersectionRatio","console","log","then","module","window","customElements","get","define","default","catch","err","message","intObserver","unobserve","target","IntersectionObserver","observe"],"mappings":";;;+FAEA,IAAMA,EAAa,CAAC,YAAa,SAAU,QAAS,OAAQ,OAAQ,cAAe,aAAc,cAAe,aAAc,kBAAmB,aAAc,eAAgB,YAAa,MAAO,mBAAoB,iBAAkB,aAAc,SAAU,cAAe,cAAe,SAAU,WAAY,YAAa,UAAU,EACtUC,EAAS,MACTC,EAAU,CACZC,WAAY,OACZC,UAAW,EACf,EACMC,EAAe,oBAErBL,EAAWM,QAASC,GAAc,CAC9B,GAAIC,SAASC,qBAAoBC,GAAAA,OAAIT,EAAM,GAAA,EAAAS,OAAIH,CAAS,CAAE,EAAEI,SAAW,EAEvE,KAAIC,EAAYC,GAAY,CACxBA,EAAQP,QAASQ,GAAU,CACnBA,EAAMC,kBAAoB,IAC1BC,QAAQC,IAAIV,CAAS,EACrB,uBAAMG,OAAiBH,EAASG,GAAAA,EAAAA,OAAIH,CAAS,EAAAG,OAAGL,CAAY,GAAIa,KAAKC,GAAU,CACtEC,OAAOC,eAAeC,IAAG,GAAAZ,OAAIT,EAAMS,GAAAA,EAAAA,OAAIH,CAAS,CAAE,GACnDa,OAAOC,eAAeE,OAAM,GAAAb,OAAIT,EAAMS,GAAAA,EAAAA,OAAIH,CAAS,EAAIY,EAAOK,OAAO,CAC7E,CAAC,EAAEC,MAAOC,GAAQ,CACdV,QAAQC,IAAIS,EAAIC,OAAO,CAC3B,CAAC,EACDC,EAAYC,UAAUf,EAAMgB,MAAM,EAE1C,CAAC,GAECF,EAAc,IAAIG,qBAAqBnB,EAAUV,CAAO,EAC9D0B,EAAYI,QAAQxB,SAASC,wBAAoBC,OAAIT,EAAMS,GAAAA,EAAAA,OAAIH,CAAS,CAAE,EAAE,CAAC,CAAC,EAClF,CAAC"}
+{"version":3,"file":"components.bundle.js","sources":["components.js"],"sourcesContent":["\"use strict\";\n// @ts-nocheck\nconst 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'];\nconst prefix = \"iam\";\nconst options = {\n    rootMargin: '50px',\n    threshold: 0.1\n};\nconst componentExt = \".component.min.js\";\n// Load components - Each component will load once the first of its type has been loaded\ncomponents.forEach((component) => {\n    if (document.getElementsByTagName(`${prefix}-${component}`).length === 0)\n        return;\n    let callback = (entries) => {\n        entries.forEach((entry) => {\n            if (entry.intersectionRatio > 0) {\n                console.log(component);\n                import(`./components/${component}/${component}${componentExt}`).then(module => {\n                    if (!window.customElements.get(`${prefix}-${component}`))\n                        window.customElements.define(`${prefix}-${component}`, module.default);\n                }).catch((err) => {\n                    console.log(err.message);\n                });\n                intObserver.unobserve(entry.target);\n            }\n        });\n    };\n    const intObserver = new IntersectionObserver(callback, options);\n    intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);\n});\n"],"names":["components","prefix","options","rootMargin","threshold","componentExt","forEach","component","document","getElementsByTagName","concat","length","callback","entries","entry","intersectionRatio","console","log","then","module","window","customElements","get","define","default","catch","err","message","intObserver","unobserve","target","IntersectionObserver","observe"],"mappings":";;;+FAEA,IAAMA,EAAa,CAAC,YAAa,SAAU,QAAS,OAAQ,OAAQ,cAAe,aAAc,cAAe,aAAc,kBAAmB,aAAc,eAAgB,YAAa,MAAO,mBAAoB,iBAAkB,aAAc,SAAU,cAAe,cAAe,aAAc,SAAU,WAAY,YAAa,UAAU,EACpVC,EAAS,MACTC,EAAU,CACZC,WAAY,OACZC,UAAW,EACf,EACMC,EAAe,oBAErBL,EAAWM,QAASC,GAAc,CAC9B,GAAIC,SAASC,qBAAoBC,GAAAA,OAAIT,EAAM,GAAA,EAAAS,OAAIH,CAAS,CAAE,EAAEI,SAAW,EAEvE,KAAIC,EAAYC,GAAY,CACxBA,EAAQP,QAASQ,GAAU,CACnBA,EAAMC,kBAAoB,IAC1BC,QAAQC,IAAIV,CAAS,EACrB,uBAAMG,OAAiBH,EAASG,GAAAA,EAAAA,OAAIH,CAAS,EAAAG,OAAGL,CAAY,GAAIa,KAAKC,GAAU,CACtEC,OAAOC,eAAeC,IAAG,GAAAZ,OAAIT,EAAMS,GAAAA,EAAAA,OAAIH,CAAS,CAAE,GACnDa,OAAOC,eAAeE,OAAM,GAAAb,OAAIT,EAAMS,GAAAA,EAAAA,OAAIH,CAAS,EAAIY,EAAOK,OAAO,CAC7E,CAAC,EAAEC,MAAOC,GAAQ,CACdV,QAAQC,IAAIS,EAAIC,OAAO,CAC3B,CAAC,EACDC,EAAYC,UAAUf,EAAMgB,MAAM,EAE1C,CAAC,GAECF,EAAc,IAAIG,qBAAqBnB,EAAUV,CAAO,EAC9D0B,EAAYI,QAAQxB,SAASC,wBAAoBC,OAAIT,EAAMS,GAAAA,EAAAA,OAAIH,CAAS,CAAE,EAAE,CAAC,CAAC,EAClF,CAAC"}

package/assets/js/components.js

@@ -1,6 +1,6 @@
 "use strict";
 // @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', 'slider', 'carousel', 'marketing', 'barchart'];
+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'];
 const prefix = "iam";
 const options = {
     rootMargin: '50px',

package/assets/js/modules/card.module.js

@@ -28,6 +28,9 @@ export const setupCard = (cardComponent) => {
         cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
     }
     if (!cardComponent.querySelector('[slot="badges"]')) {
-        cardComponent.shadowRoot.querySelector('.card__badges').remove();
+        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');
+    }
+    else {
+        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');
     }
 };

package/assets/js/modules/carousel.js

@@ -1,9 +1,62 @@
 // @ts-nocheck
-function carousel(carouselElement, row) {
+export const generateThumbnailList = function (carouselComponent) {
+    let thumbnailImages = [];
+    Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {
+        if (slide.hasAttribute('data-thumbnail')) {
+            thumbnailImages[index] = slide.getAttribute('data-thumbnail');
+        }
+    });
+    return thumbnailImages;
+};
+export const generatePipsHTML = function (carouselComponent, thumbnailImages) {
+    let itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+    let pips = "";
+    for (let i = 1; i <= itemCount; i++) {
+        let pipContent = null;
+        let pipClass = '';
+        if (thumbnailImages.length && thumbnailImages[i - 1]) {
+            pipClass = 'has-thumbnail';
+            pipContent = `<img src="${thumbnailImages[i - 1]}" alt="Slide ${i}" height="148"/>`;
+        }
+        else {
+            pipContent = `Slide ${i}`;
+        }
+        pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current" : ""}>${pipContent}</button>`;
+    }
+    return pips;
+};
+const getProgressMax = function (itemCount, visibleItems) {
+    if (visibleItems == 1) {
+        return itemCount;
+    }
+    let max = (Math.ceil(itemCount / visibleItems) * visibleItems) - visibleItems;
+    return max + 1;
+};
+const getProgressPercent = function (value, max) {
+    return (((value - 1) / (max - 1)) * 100);
+};
+export const carousel = function (carouselComponent) {
     var scrollTimeout;
+    const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
     let carouselInner = carouselElement.querySelector('.carousel__inner');
     let carouselControls = carouselElement.querySelector('.carousel__controls');
-    let itemCount = row.querySelectorAll(':scope > .col').length;
+    let carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
+    let itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+    let scrollArea = carouselInner.clientWidth;
+    let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+    let visibleItems = Math.round(scrollArea / itemWidth);
+    carouselProgress.setAttribute('min', 1);
+    carouselProgress.setAttribute('step', visibleItems);
+    let progressMax = getProgressMax(itemCount, visibleItems);
+    carouselProgress.setAttribute('max', progressMax);
+    carouselProgress.value = 1;
+    let percent = getProgressPercent(1, progressMax);
+    carouselProgress.style.setProperty('--percent', percent + "%");
+    let stepperInterval, stepperEvent = "mouseup", stepperStart = "mousedown";
+    if ("ontouchstart" in document.documentElement) {
+        stepperEvent = "touchend";
+        stepperStart = "touchstart";
+    }
     // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
     carouselInner.addEventListener('scroll', function (e) {
         clearTimeout(scrollTimeout);
@@ -12,13 +65,14 @@ function carousel(carouselElement, row) {
             let scrollWidth = carouselInner.scrollWidth;
             let scrollLeft = carouselInner.scrollLeft;
             let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-            let itemWidth = row.querySelector(':scope > .col').scrollWidth;
-            let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+            let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+            let lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
             //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
             let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
             let visibleItems = Math.round(scrollArea / itemWidth);
             //Check if theres room for more slides than we have
             let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
+            carouselProgress.setAttribute('step', visibleItems);
             if (leftOverSpace > 0 && lastItemInView) {
                 targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;
             }
@@ -36,6 +90,12 @@ function carousel(carouselElement, row) {
                 carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');
             else
                 carouselElement.querySelector('.btn-next').removeAttribute('disabled');
+            carouselProgress.value = targetSlide;
+            progressMax = getProgressMax(itemCount, visibleItems);
+            carouselProgress.setAttribute('max', progressMax);
+            percent = (targetSlide / progressMax) * 100;
+            percent = getProgressPercent(targetSlide, progressMax);
+            carouselProgress.style.setProperty('--percent', percent + "%");
         }, 100);
     }, false);
     // when the buttons are used we need to make sure the carousel scrolls to the correct place
@@ -47,7 +107,12 @@ function carousel(carouselElement, row) {
                     button.removeAttribute('aria-current');
                 });
                 target.setAttribute('aria-current', true);
-                const el = row.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
+                const customEvent = new CustomEvent("pip-clicked", { detail: {
+                        'slide': target.getAttribute('data-slide')
+                    }
+                });
+                carouselComponent.dispatchEvent(customEvent);
+                const el = carouselComponent.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
                 carouselInner.scroll({
                     top: 0,
                     left: el.offsetLeft - carouselInner.getBoundingClientRect().left,
@@ -60,9 +125,9 @@ function carousel(carouselElement, row) {
     carouselElement.addEventListener('click', function (e) {
         let scrollArea = carouselInner.clientWidth;
         let scrollWidth = carouselInner.scrollWidth;
-        let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+        let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
         let visibleItems = Math.round(scrollArea / itemWidth);
-        let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+        let lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
         let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
         //Check if theres room for more slides than we have
         let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
@@ -75,6 +140,12 @@ function carousel(carouselElement, row) {
         let movement = lastItemInView && leftOverSpace > 0 ? spacesToMove * itemWidth : carouselInner.clientWidth;
         for (var target = e.target; target && target != this; target = target.parentNode) {
             if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {
+                let direction = target.matches('.btn-next') ? 'next' : 'prev';
+                const customEvent = new CustomEvent(`${direction}-clicked`, { detail: {
+                        'slide': target.getAttribute('data-go')
+                    }
+                });
+                carouselComponent.dispatchEvent(customEvent);
                 e.preventDefault();
                 let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - movement : carouselInner.scrollLeft + carouselInner.clientWidth;
                 carouselInner.scroll({
@@ -86,5 +157,36 @@ function carousel(carouselElement, row) {
             }
         }
     }, false);
-}
+    carouselProgress.addEventListener(stepperStart, function (event) {
+        clearInterval(stepperInterval);
+        stepperInterval = setInterval(function () {
+            scrollArea = carouselInner.clientWidth;
+            itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+            visibleItems = Math.round(scrollArea / itemWidth);
+            carouselProgress.setAttribute('step', visibleItems);
+            progressMax = getProgressMax(itemCount, visibleItems);
+            carouselProgress.setAttribute('max', progressMax);
+            percent = getProgressPercent(carouselProgress.value, progressMax);
+            carouselProgress.style.setProperty('--percent', percent + "%");
+        }, 10);
+    });
+    carouselProgress.addEventListener(stepperEvent, function (event) {
+        clearInterval(stepperInterval);
+    });
+    carouselProgress.addEventListener('change', function (e) {
+        clearInterval(stepperInterval);
+        let target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);
+        carouselInner.scroll({
+            top: 0,
+            left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0,
+            behavior: 'smooth'
+        });
+        let direction = target.matches('.btn-next') ? 'next' : 'prev';
+        const customEvent = new CustomEvent(`slider-changed`, { detail: {
+                'slide': carouselProgress.value
+            }
+        });
+        carouselComponent.dispatchEvent(customEvent);
+    }, false);
+};
 export default carousel;

package/assets/js/modules/dialogs.js

@@ -22,8 +22,10 @@ const extendDialogs = (body) => {
             // Open the modal!
             dialog.showModal();
             dialog.focus();
-            let firstWidth = dialog.offsetWidth;
-            dialog.setAttribute('style', `max-width: ${firstWidth}px;`);
+            if (!dialog.querySelector('iam-multi-step')) {
+                let firstWidth = dialog.offsetWidth;
+                dialog.setAttribute('style', `max-width: ${firstWidth}px;`);
+            }
             // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
             Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element, index) => {
                 const id = element.getAttribute('data-duplicate');
@@ -168,12 +170,8 @@ const extendDialogs = (body) => {
     return null;
 };
 export const createDialog = (dialog) => {
-    // Multi dialog
-    if (dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
-        createMultiFormDialog(dialog);
-    }
     // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
-    if (!dialog.querySelector(':scope .mh-lg') && !dialog.classList.contains('dialog--multi')) {
+    if (!dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')) {
         dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
         let dialogContent = dialog.querySelector('.mh-lg');
         let titleElement = dialog.querySelector('.mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)');
@@ -188,120 +186,4 @@ export const createDialog = (dialog) => {
     if (!dialog.querySelector(':scope > button:first-child'))
         dialog.insertAdjacentHTML('afterbegin', `<button class="dialog__close">Close</button>`);
 };
-export const createMultiFormDialog = (dialog) => {
-    let buttons = "";
-    let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
-    let form = dialog.querySelector('form');
-    fieldsets.forEach((fieldset, index) => {
-        buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active" : ""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`;
-        const btnWrapper = document.createElement("div");
-        btnWrapper.classList.add('btn--wrapper');
-        fieldset.appendChild(btnWrapper);
-        if (index != 0)
-            btnWrapper.innerHTML += `<button data-title="${fieldsets[index - 1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
-        if (index != fieldsets.length - 1)
-            btnWrapper.innerHTML += `<button data-title="${fieldsets[index + 1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
-        // Last fieldset
-        if (index == fieldsets.length - 1) {
-            if (form && form.querySelector(':scope > button[type="submit"]')) {
-                let existingButton = form.querySelector(':scope > button[type="submit"]');
-                existingButton.classList.add('mb-0');
-                btnWrapper.insertAdjacentElement('beforeend', existingButton);
-            }
-            else
-                btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
-        }
-    });
-    dialog.insertAdjacentHTML('afterbegin', `<div class="steps bg-primary">${buttons}</div>`);
-    // Open the fieldset with an error inside
-    let validatedFieldsets = Array.from(dialog.querySelectorAll('fieldset.was-validated'));
-    for (let i = 0; i < validatedFieldsets.length; i++) {
-        let fieldset = validatedFieldsets[i];
-        let fieldsetID = fieldset.getAttribute('data-title');
-        if (fieldset.querySelector('.is-invalid')) {
-            Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-                element.classList.add('active');
-            });
-            break;
-        }
-        else {
-            Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-                element.classList.add('valid');
-            });
-        }
-    }
-    // Prevent the bubble messages
-    dialog.addEventListener('invalid', (function () {
-        return function (e) {
-            e.preventDefault();
-        };
-    })(), true);
-    function validateFieldset(button) {
-        const currentFieldset = dialog.querySelector(`fieldset.active`) ? dialog.querySelector(`fieldset.active`) : dialog.querySelector(`fieldset[data-title]`);
-        const currentFieldsetID = currentFieldset.getAttribute('data-title');
-        let isFieldsetValid = true;
-        currentFieldset.classList.add('was-validated');
-        Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
-            if (!input.checkValidity())
-                isFieldsetValid = false;
-        });
-        // If valid mode to next field set
-        if (!isFieldsetValid) {
-            Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-                element.classList.remove('valid');
-            });
-        }
-        else {
-            Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-                element.classList.add('valid');
-            });
-        }
-        // Allow the previous button to navigate
-        if (isFieldsetValid || !button.hasAttribute('data-next')) {
-            const fieldset = dialog.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
-            const step = dialog.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
-            Array.from(dialog.querySelectorAll('button')).forEach((button, index) => {
-                button.classList.remove('active');
-            });
-            Array.from(dialog.querySelectorAll('fieldset')).forEach((button, index) => {
-                button.classList.remove('active');
-            });
-            step.classList.add('active');
-            fieldset.classList.add('active');
-        }
-        let fieldsetCount = Array.from(dialog.querySelectorAll(`fieldset`)).length;
-        let validFieldsetCount = Array.from(dialog.querySelectorAll(`fieldset.valid`)).length;
-        // update the progress bar
-        dialog.style.setProperty('--progress', `${(validFieldsetCount / (fieldsetCount - 1) * 100)}%`);
-    }
-    // remove error messages from server
-    dialog.addEventListener('keydown', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('button')) {
-            const button = event.target.closest('button');
-            if (event.keyCode == 13 && button.getAttribute('type') != "submit") {
-                event.preventDefault();
-                validateFieldset(button);
-            }
-        }
-        if (event && event.target instanceof HTMLElement && event.target.closest('input')) {
-            const input = event.target.closest('input');
-            input.classList.remove('is-invalid');
-            if (event.keyCode == 13) {
-                event.preventDefault();
-            }
-        }
-    });
-    dialog.addEventListener('click', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')) {
-            const form = event.target.closest('form');
-            form.classList.add('was-validated');
-        }
-        else if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')) {
-            const button = event.target.closest('button[data-title]');
-            validateFieldset(button);
-        }
-        ;
-        return null;
-    });
-};
 export default extendDialogs;