npm - @iamproperty/components - Versions diffs - 5.0.0 → 5.1.0-beta2 - Mend

@iamproperty/components 5.0.0 → 5.1.0-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (155) hide show

package/assets/js/components/fileupload/fileupload.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta2
   * Copyright 2022-2023 iamproperty
   */function h(c,o){const r=o.querySelector(".files"),l=o.querySelector(".drop-area"),t=c.querySelector("input"),u=c.hasAttribute("data-maxsize")?c.getAttribute("data-maxsize"):0,a=t.cloneNode();l.append(a),o.addEventListener("click",e=>{e&&e.target instanceof HTMLElement&&e.target.closest(".btn-primary")&&(e.target.closest(".btn-primary"),(t.hasAttribute("multiple")?a:t).click())}),o.addEventListener("click",e=>{if(e&&e.target instanceof HTMLElement&&e.target.closest(".files button")){const i=new DataTransfer,{files:d}=t,p=e.target.closest(".files button");for(let n=0;n<d.length;n++){const s=d[n];s.name!=p.getAttribute("data-file")&&i.items.add(s)}t.files=i.files;const m=new Event("change");t.dispatchEvent(m)}}),a.addEventListener("change",e=>{if(t.hasAttribute("multiple")){const d=[...t.files,...a.files];let p=[];const m=new DataTransfer;for(let n=0;n<d.length;n++){const s=d[n],f=s.size/1e3;!p.includes(s.name)&&(u==0||f<u)&&m.items.add(s),p.push(s.name)}t.files=m.files}else t.files=a.files;const i=new Event("change");t.dispatchEvent(i)}),a.addEventListener("dragenter",e=>{a.classList.add("focus")}),a.addEventListener("dragleave",e=>{a.classList.remove("focus")}),a.addEventListener("drop",e=>{a.classList.remove("focus")}),t.addEventListener("change",e=>{r.innerHTML="";for(const i of t.files)r.innerHTML+=`<span class="file">${i.name} <button data-file="${i.name}">Remove</button></span>`})}window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"fileupload"});class b extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,l=document.createElement("template");l.innerHTML=`
     <style>

package/assets/js/components/filterlist/filterlist.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta2
   * Copyright 2022-2023 iamproperty
   */function r(s,t){n(s,t)}function n(s,t){var e;t.addEventListener("keyup",a=>{clearTimeout(e),e=setTimeout(function(){o(s,t.value)},500)}),t.addEventListener("change",a=>{clearTimeout(e),o(s,t.value)})}const o=function(s,t){Array.from(s.querySelectorAll(":scope > li")).forEach((e,a)=>{let i=e.textContent.toLowerCase();e.classList.add("d-none"),i.includes(t.toLowerCase())&&e.classList.remove("d-none")}),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Filtered list",value:t})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"filterlist"});class l extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",e=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,a=document.createElement("template");a.innerHTML=`
     <style>

package/assets/js/components/header/header.component.min.js CHANGED Viewed

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta2
   * Copyright 2022-2023 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,o=document.createElement("template");o.innerHTML=`
     <style>
     @import "${r}";
-    .header-banner{background:linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);margin-bottom:2rem;position:relative;overflow:hidden;max-width:100% !important}@media screen and (min-width: 62em){.header-banner{min-height:29.375rem}}.header-banner>.container{padding-bottom:0;position:relative}.header-banner .breadcrumb{margin-top:1.5rem;margin-bottom:-0.5rem}@media screen and (min-width: 62em){.header-banner .breadcrumb{position:absolute;top:0;left:3.75rem}}.header-banner__inner{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light);color:var(--colour-body);background:#fff;padding:2rem;margin:1.875rem 0;position:relative;z-index:var(--index-above)}.header-banner__inner .text-primary{color:var(--colour-primary) !important}@media screen and (min-width: 62em){.header-banner__inner{max-width:37.5rem;margin:7rem 0 5rem 0;padding:3.5rem 4rem}}.header-banner__inner>*:last-child{padding-bottom:0;margin-bottom:0}.header-banner picture img{display:none}@media screen and (min-width: 62em){.header-banner picture img{display:block;position:absolute;top:-0.5%;left:40%;height:101%;object-fit:cover;width:60%;pointer-events:none}}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}::slotted(*:last-child){padding-bottom:0 !important;margin-bottom:0 !important}/*# sourceMappingURL=assets/css/components/header.css.map */
+    :host{padding-top:0 !important;margin-bottom:2rem}.header-banner{background:linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);position:relative;overflow:hidden;max-width:100% !important}@media screen and (min-width: 62em){.header-banner{min-height:29.375rem}}.header-banner>.container{padding-bottom:0;position:relative}.header-banner .breadcrumb{margin-top:1.5rem;margin-bottom:-0.5rem}@media screen and (min-width: 62em){.header-banner .breadcrumb{position:absolute;top:0;left:3.75rem}}.header-banner__inner{--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light);color:var(--colour-body);background:#fff;padding:2rem;margin:1.875rem 0;position:relative;z-index:var(--index-above)}.header-banner__inner .text-primary{color:var(--colour-primary) !important}@media screen and (min-width: 62em){.header-banner__inner{max-width:37.5rem;margin:7rem 0 5rem 0;padding:3.5rem 4rem}}.header-banner__inner>*:last-child{padding-bottom:0;margin-bottom:0}.header-banner picture img{display:none}@media screen and (min-width: 62em){.header-banner picture img{display:block;position:absolute;top:-0.5%;left:40%;height:101%;object-fit:cover;width:60%;pointer-events:none}}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}::slotted(*:last-child){padding-bottom:0 !important;margin-bottom:0 !important}/*# sourceMappingURL=assets/css/components/header.css.map */
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>

package/assets/js/components/nav/nav.component.js CHANGED Viewed

@@ -12,6 +12,7 @@ class iamNav extends HTMLElement {
         const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
         const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
         const loadCSS = `@import "${assetLocation}/css/components/nav.css";`;
+        const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
     <style class="styles">
@@ -46,6 +47,9 @@ class iamNav extends HTMLElement {
     <div class="backdrop" part="backdrop"></div>
     `;
         shadowRoot.appendChild(template.content.cloneNode(true));
+        // insert extra CSS
+        if (!document.getElementById('navGlobal'))
+            document.head.insertAdjacentHTML('beforeend', `<style id="navGlobal">${loadExtraCSS}</style>`);
     }
     connectedCallback() {
         // Load external CSS if needed

package/assets/js/components/nav/nav.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta2
   * Copyright 2022-2023 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"nav"});class p extends HTMLElement{constructor(){super();const d=this.attachShadow({mode:"open"}),n=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",r=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${n}/css/core.min.css`,i=document.createElement("template");i.innerHTML=`
     <style class="styles">
@@ -33,7 +33,8 @@
     </div>
     <div class="lists"></div>
     <div class="backdrop" part="backdrop"></div>
-    `,d.appendChild(i.content.cloneNode(!0))}connectedCallback(){this.hasAttribute("data-css")&&this.shadowRoot.querySelector(".styles").insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`);const d=this.shadowRoot.querySelector(".btn-menu"),n=this.shadowRoot.querySelector(".menu"),r=this,i=this.shadowRoot.querySelector(".backdrop"),h=this.shadowRoot.querySelector(".buttons-holder");if(this.querySelectorAll(":scope > *").forEach(function(o){switch(o.tagName){case"BUTTON":o.setAttribute("slot","actions"),n.classList.add("has-actions");break}if(o.classList.contains("nav--menu")&&o.hasAttribute("data-title")&&o.hasAttribute("data-icon")){const a=o.getAttribute("data-title"),l=o.getAttribute("data-icon"),e=document.createElement("button");e.setAttribute("slot",a),e.classList.add("btn-menu"),e.innerHTML=`<span class="btn btn-primary"><span>${a}</span><i class="${l}"></i><i class="fa-regular fa-xmark-large"></i></span>`,h.insertAdjacentElement("beforeend",e);const u=e.querySelector(".btn-primary");o.setAttribute("slot","menus"),o.classList.contains("open")?(e.setAttribute("aria-expanded",!0),u.classList.toggle("active"),r.classList.add("open"),i.classList.add("show")):o.classList.add("closed"),e.addEventListener("click",function(c){c.preventDefault(),e.toggleAttribute("aria-expanded"),o.classList.toggle("open"),u.classList.toggle("active");let s=r.querySelector(":scope > details[open]");s&&s.removeAttribute("open"),o.classList.contains("open")?(n.classList.remove("open"),d.removeAttribute("aria-expanded"),setTimeout(function(){n.classList.add("closed")},1e3),r.classList.add("open"),i.classList.add("show"),o.classList.remove("closed")):(r.classList.remove("open"),i.classList.remove("show"),setTimeout(function(){o.classList.add("closed")},1e3)),r.querySelectorAll(".nav--menu.open").forEach(function(m){m!=o&&m.classList.remove("open")}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(m){m!=e&&(m.removeAttribute("aria-expanded"),m.querySelector(".btn-primary").classList.remove("active"))})},!1)}}),this.querySelector('a[slot="secondary"]')&&n.classList.add("has-secondary"),document.documentElement.style.setProperty("--scrollbar-width",window.innerWidth-document.documentElement.offsetWidth+"px"),d.addEventListener("click",function(o){o.preventDefault(),d.toggleAttribute("aria-expanded"),n.classList.toggle("open"),r.querySelectorAll(".nav--menu.open").forEach(function(t){t.classList.remove("open"),setTimeout(function(){t.classList.add("closed")},1e3)}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(t){t.removeAttribute("aria-expanded"),t.querySelector(".btn-primary").classList.remove("active")}),n.classList.contains("open")?(r.classList.add("open"),n.classList.remove("closed")):(r.classList.remove("open"),setTimeout(function(){n.classList.add("closed")},1e3))},!1),this.addEventListener("request-close",o=>{d.removeAttribute("aria-expanded"),n.classList.remove("open"),r.classList.remove("open")}),i.addEventListener("click",o=>{let t=this.querySelector("details[open] summary");t&&t.click(),r.querySelectorAll(".nav--menu.open").forEach(function(a){a.classList.remove("open")}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(a){a.removeAttribute("aria-expanded"),a.querySelector(".btn-primary").classList.remove("active")}),i.classList.remove("show")}),this.addEventListener("click",o=>{if(o&&o.target instanceof HTMLElement&&o.target.closest("summary")&&window.innerWidth>992){let a=o.target.closest("summary").closest("details"),l=a.parentNode;a.hasAttribute("open")?a.removeAttribute("open"):a.setAttribute("open","true"),r.querySelectorAll(".nav--menu.open").forEach(function(e){e.classList.remove("open"),setTimeout(function(){n.classList.add("closed")},1e3)}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(e){e.removeAttribute("aria-expanded"),e.querySelector(".btn-primary").classList.remove("active")}),Array.from(l.querySelectorAll(":scope > details")).forEach((e,u)=>{e!=a&&e.removeAttribute("open")}),this.querySelectorAll(":scope > details[open]").length?(i.classList.add("show"),r.classList.add("open")):(i.classList.remove("show"),r.classList.remove("open")),o.preventDefault()}}),this.querySelectorAll("details").forEach(o=>{let t=o.querySelector("summary");o.querySelector(":Scope > div").setAttribute("data-title",t.textContent)}),this.hasAttribute("data-search")){n.classList.add("has-search");let o=this.shadowRoot.querySelector("#search-wrapper");o.classList.remove("d-none"),o.insertAdjacentHTML("afterbegin",`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
+    `,d.appendChild(i.content.cloneNode(!0)),document.getElementById("navGlobal")||document.head.insertAdjacentHTML("beforeend",`<style id="navGlobal">body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)){max-height:100vh;overflow:hidden}body{--nav-height: 6rem;--sticky-padding: 0px}body:has(iam-nav a[slot=secondary]){--nav-height: 8.5rem}body:has(iam-nav.nav--sticky){--sticky-padding: var(--nav-height)}nav:has(iam-nav){min-height:6rem;display:block}nav:has(iam-nav) iam-nav{position:absolute;top:0;left:0;width:100%;z-index:var(--index-menu)}@media screen and (min-width: 62em){nav:has(iam-nav a[slot=secondary]){min-height:8.5rem}}nav:has(iam-nav.nav--sticky) iam-nav{position:fixed}@media screen and (max-width: 36em){body:has(iam-nav.open:not(.nav--xs-sticky)){max-height:100vh;overflow:hidden}nav:has(iam-nav.nav--xs-sticky) iam-nav{position:fixed}}@media screen and (min-width: 36em){body:has(iam-nav.open:not(.nav--sticky)){max-height:100vh;overflow:hidden}}iam-nav:not(:defined)>*:not([slot=logo]){display:none}iam-nav:not(:defined):not(:target)>*:not(.brand){display:none}iam-nav{--nav-height: 6rem;overscroll-behavior:contain !important;background-color:var(--colour-canvas);display:block;margin-left:auto;margin-right:auto;padding:var(--container-padding);padding-top:1.5rem;padding-bottom:1.5rem;width:100%;max-width:80rem}iam-nav:has(a[slot=secondary]){--nav-height: 8.5rem}iam-nav .brand{font-size:3rem;height:3rem;padding:0;text-decoration:none;min-width:min(var(--svg-width),14rem)}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)){text-decoration:none}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)):where(:hover,:focus,.selected,[aria-current=page]){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)):active{text-decoration-color:#a2d393 !important}iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card)).selected,iam-nav a:not([slot=logo]):not(.btn):not(:has(iam-card))[aria-current=page]{text-decoration-color:var(--colour-info) !important}iam-nav details>summary{text-decoration:none}iam-nav details>summary:where(:hover,:focus,.selected){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav details>summary:active{text-decoration-color:#a2d393 !important}iam-nav details[open]>summary{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-info)}@media screen and (max-width: 62em){iam-nav details{background-color:var(--colour-canvas);margin-left:-1.5rem;margin-right:-1.5rem;padding-inline:1.5rem;width:auto;position:relative}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){iam-nav details{background-color:#eee}}@media screen and (max-width: 62em){iam-nav details summary{background-color:var(--colour-white);display:block;border:none;color:var(--colour-link);margin:0;margin-left:-1.5rem;margin-right:-1.5rem;padding:1.5rem 4rem 1.5rem 1.5rem;font-size:1rem;line-height:1.5rem;min-height:1.5rem;position:relative;font-weight:normal}}@media screen and (max-width: 62em)and (prefers-color-scheme: dark){iam-nav details summary{background-color:var(--colour-canvas-2)}}@media screen and (max-width: 62em){iam-nav details summary:after{content:"\uF055";display:block;font-size:1.5rem;font-weight:300;position:absolute;top:1.5rem;right:1.5rem;font-family:"Font Awesome 6 Pro";line-height:1em}iam-nav details[open]>summary:after{content:"\uF056";font-weight:bold}iam-nav details a{text-decoration:none;display:block;border:none;color:var(--colour-link);margin:0;margin-left:3rem;padding:1.5rem 0 1.5rem 0;font-size:1rem;line-height:1.5rem;min-height:1.5rem;position:relative;font-weight:normal}iam-nav details a:after{background:var(--colour-border) !important;top:calc(100% - 2px) !important;width:100% !important}iam-nav details a:has(iam-card){display:none !important}iam-nav details details a:last-child:after{display:none}iam-nav details:after{content:"";position:absolute;top:calc(100% - 2px);left:1.5rem;height:2px;width:calc(100% - 3rem);display:block;height:2px;background-color:var(--colour-border) !important}iam-nav details details:after{display:none}iam-nav details details summary{padding:0 1.5rem 1.5rem 3.5rem;position:relative}iam-nav details details summary:after{left:1.5rem;font-size:1rem;top:0.1875rem;transform:none;font-weight:400}iam-nav details details[open]+details:before{content:"";display:block;background:var(--colour-canvas-2);padding-top:1.5rem;margin-left:-1.5rem;margin-right:-1.5rem}}@media screen and (max-width: 62em)and (min-width: 36em){iam-nav details{padding-right:2.5rem;margin-right:-2.5rem}iam-nav details:after{width:calc(100% - 4rem)}iam-nav details summary{padding-right:5rem;margin-right:-2.5rem}iam-nav details summary:after{right:2.5rem}iam-nav details details[open]+details:before{padding-right:2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 62em){iam-nav details{width:auto}iam-nav details>summary{display:block;border:none;color:var(--colour-link);margin:0;font-size:1rem;line-height:6rem;min-height:6rem;margin-block:-1.5rem;position:relative;font-weight:normal;white-space:nowrap;padding-right:1.5rem}iam-nav details>summary:after{content:"\uF078";display:block;font-size:1rem;font-weight:300;position:absolute;top:50%;transform:translate(0, -50%);right:0;font-family:"Font Awesome 6 Pro";line-height:1em}iam-nav details:not(:first-child)>summary{margin-left:1.5rem}iam-nav details div{display:none}iam-nav details[open]>div{position:absolute;display:block;top:100%;left:0;width:100%;padding-inline:calc(50% - 34.75rem);box-shadow:0px 6px 12px rgba(0,0,0,.11)}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div{background:var(--colour-white);--colour-muted: #9d9d9d;--colour-body: #595959;--colour-border: #D8D8D8;--colour-link: var(--colour-primary-theme);--colour-brand: var(--colour-primary-theme);--colour-underline: var(--colour-secondary);--colour-heading: var(--colour-primary);--colour-focus: var(--colour-primary-theme);--colour-hover: var(--colour-primary-theme);--colour-active: var(--colour-primary-theme);--colour-selected: var(--colour-info);--colour-inverted: #FCFCFC;--colour-btn: var(--colour-primary-theme);--colour-btn-bg: var(--colour-warning);--colour-btn-border: var(--colour-warning);--colour-btn-bg-hover: transparent;--colour-btn-hover: var(--colour-primary-theme);--colour-btn-secondary: var(--colour-primary-theme);--colour-btn-secondary-border: var(--colour-primary-theme);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-primary-theme);--colour-btn-secondary-hover: var(--colour-inverted);--colour-canvas-2: white;--colour-btn-action-hover-bg: var(--colour-light)}iam-nav details[open]>div .text-primary{color:var(--colour-primary) !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){iam-nav details[open]>div{--colour-canvas: #262626;--colour-canvas-2: #313131;--colour-body: #BFBFBF;--colour-heading: var(--colour-white);--colour-link: var(--colour-white);--colour-hover: var(--colour-white);--colour-active: var(--colour-white);--colour-border: var(--colour-white);--colour-brand: var(--colour-white);--colour-btn: #00313c;--colour-btn-border: var(--colour-white);--colour-btn-bg: var(--colour-white);--colour-btn-hover: var(--colour-white);--colour-btn-secondary: var(--colour-white);--colour-btn-secondary-border: var(--colour-white);--colour-btn-secondary-bg: transparent;--colour-btn-secondary-bg-hover: var(--colour-white);--colour-btn-secondary-hover: var(--colour-primary-theme);--colour-btn-action-hover-bg: var(--colour-canvas-2)}}@media screen and (min-width: 62em){iam-nav details[open]>div:has(details){background:var(--colour-canvas-2)}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div:has(details){background:#eee}}@media screen and (min-width: 62em){iam-nav details[open]>div:has(details) a{display:inline-block;margin-right:2rem}iam-nav details[open]>div:has(details) a:first-child{margin-right:0}iam-nav details[open]>div:has(details) a:has(iam-card){display:none}iam-nav details[open]>div:has(details) details{display:inline-block}iam-nav details[open]>div:has(details) details summary{display:inline-block;margin-left:0 !important;margin-right:2rem}iam-nav details[open]>div:has(details) details:first-child summary{margin-left:0}iam-nav details[open]>div:not(:has(details)){background:var(--colour-canvas);padding-top:8rem;padding-bottom:4rem;columns:3;column-gap:6.875rem}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){iam-nav details[open]>div:not(:has(details)){background:var(--colour-white);--colour-canvas-2: white}}@media screen and (min-width: 62em){iam-nav details[open]>div:not(:has(details))>a{margin-right:0 !important;display:block;max-height:6rem}iam-nav details[open]>div:not(:has(details))>a.double-height{min-height:6rem}iam-nav details[open]>div:not(:has(details)) a:has(iam-card){display:inline-block}iam-nav details[open]>div:not(:has(details)):before{content:attr(data-title);display:block;position:absolute;top:0;left:0;width:100%;color:var(--colour-white);padding-inline:calc(50% - 34.75rem);font-size:2rem;font-weight:bold;line-height:5.5rem;--gradient-direction: 90deg;background-color:var(--colour-info-theme);background-image:linear-gradient(var(--gradient-direction), var(--colour-primary-theme) 0, transparent 100%) !important}iam-nav details[open]>div:not(:has(details)):has(iam-card){column-gap:1rem}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:not(:has(iam-card)){margin-right:5.875rem !important}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:has(iam-card):after{display:none}iam-nav details[open]>div:not(:has(details)):has(iam-card) a:not(:has(iam-card))+a:has(iam-card){break-before:column}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)){font-size:1rem;line-height:1.5rem;padding-block:1.5rem;position:relative;font-weight:normal;display:block;margin:0}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):where(:hover,:focus,.selected,[aria-current=page]){text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--colour-underline)}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):active{text-decoration-color:#a2d393 !important}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)).selected,iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card))[aria-current=page]{text-decoration-color:var(--colour-info)}iam-nav details a:not([slot=logo]):not(.btn):not(:has(iam-card)):after{content:"";display:block;height:2px;width:100% !important;top:calc(100% - 2px);background-color:var(--colour-border) !important}iam-nav details>details>summary{padding-right:0;background:rgba(0,0,0,0)}iam-nav details>details>summary:after{display:none}iam-nav details details:not(:first-child)>summary{margin-left:2rem}}@media screen and (min-width: 62em){iam-nav.search-open>*:not([slot=logo]):not([slot=secondary]){display:none !important}}@media screen and (min-width: 62em){iam-nav .brand:has(~[slot=dual]){margin-right:1.5rem}iam-nav *:not([slot=dual]):has(+[slot=dual]){margin-right:auto}}iam-nav .nav--menu{outline:none !important}iam-nav .nav--menu::-webkit-scrollbar{width:6px}iam-nav .nav--menu::-webkit-scrollbar-track{border:0 !important}iam-nav .nav--menu::-webkit-scrollbar-thumb{border:0 !important}iam-nav .nav--menu hr{width:100% !important;border-top:2px solid var(--colour-border) !important}iam-nav .nav--menu a{display:block !important;line-height:1.25rem !important;padding:1.5rem 0 !important;margin:0 0 2.25rem 0 !important;flex-shrink:0;font-size:1rem !important;font-weight:normal !important}iam-nav .nav--menu a:has(+a){margin-bottom:0 !important}iam-nav .nav--menu a:after{content:"";display:block;height:2px;width:100% !important;background-color:var(--colour-border) !important;top:calc(100% - 2px) !important}iam-nav .nav--menu>button{min-width:100%;text-align:center}iam-nav .nav--menu.closed *{display:none !important}/*# sourceMappingURL=assets/css/components/nav.global.css.map */
+</style>`)}connectedCallback(){this.hasAttribute("data-css")&&this.shadowRoot.querySelector(".styles").insertAdjacentHTML("beforeend",`@import "${this.getAttribute("data-css")}";`);const d=this.shadowRoot.querySelector(".btn-menu"),n=this.shadowRoot.querySelector(".menu"),r=this,i=this.shadowRoot.querySelector(".backdrop"),h=this.shadowRoot.querySelector(".buttons-holder");if(this.querySelectorAll(":scope > *").forEach(function(o){switch(o.tagName){case"BUTTON":o.setAttribute("slot","actions"),n.classList.add("has-actions");break}if(o.classList.contains("nav--menu")&&o.hasAttribute("data-title")&&o.hasAttribute("data-icon")){const t=o.getAttribute("data-title"),c=o.getAttribute("data-icon"),e=document.createElement("button");e.setAttribute("slot",t),e.classList.add("btn-menu"),e.innerHTML=`<span class="btn btn-primary"><span>${t}</span><i class="${c}"></i><i class="fa-regular fa-xmark-large"></i></span>`,h.insertAdjacentElement("beforeend",e);const m=e.querySelector(".btn-primary");o.setAttribute("slot","menus"),o.classList.contains("open")?(e.setAttribute("aria-expanded",!0),m.classList.toggle("active"),r.classList.add("open"),i.classList.add("show")):o.classList.add("closed"),e.addEventListener("click",function(l){l.preventDefault(),e.toggleAttribute("aria-expanded"),o.classList.toggle("open"),m.classList.toggle("active");let s=r.querySelector(":scope > details[open]");s&&s.removeAttribute("open"),o.classList.contains("open")?(n.classList.remove("open"),d.removeAttribute("aria-expanded"),setTimeout(function(){n.classList.add("closed")},1e3),r.classList.add("open"),i.classList.add("show"),o.classList.remove("closed")):(r.classList.remove("open"),i.classList.remove("show"),setTimeout(function(){o.classList.add("closed")},1e3)),r.querySelectorAll(".nav--menu.open").forEach(function(u){u!=o&&u.classList.remove("open")}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(u){u!=e&&(u.removeAttribute("aria-expanded"),u.querySelector(".btn-primary").classList.remove("active"))})},!1)}}),this.querySelector('a[slot="secondary"]')&&n.classList.add("has-secondary"),document.documentElement.style.setProperty("--scrollbar-width",window.innerWidth-document.documentElement.offsetWidth+"px"),d.addEventListener("click",function(o){o.preventDefault(),d.toggleAttribute("aria-expanded"),n.classList.toggle("open"),r.querySelectorAll(".nav--menu.open").forEach(function(a){a.classList.remove("open"),setTimeout(function(){a.classList.add("closed")},1e3)}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(a){a.removeAttribute("aria-expanded"),a.querySelector(".btn-primary").classList.remove("active")}),n.classList.contains("open")?(r.classList.add("open"),n.classList.remove("closed")):(r.classList.remove("open"),setTimeout(function(){n.classList.add("closed")},1e3))},!1),this.addEventListener("request-close",o=>{d.removeAttribute("aria-expanded"),n.classList.remove("open"),r.classList.remove("open")}),i.addEventListener("click",o=>{let a=this.querySelector("details[open] summary");a&&a.click(),r.querySelectorAll(".nav--menu.open").forEach(function(t){t.classList.remove("open")}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(t){t.removeAttribute("aria-expanded"),t.querySelector(".btn-primary").classList.remove("active")}),i.classList.remove("show")}),this.addEventListener("click",o=>{if(o&&o.target instanceof HTMLElement&&o.target.closest("summary")&&window.innerWidth>992){let t=o.target.closest("summary").closest("details"),c=t.parentNode;t.hasAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","true"),r.querySelectorAll(".nav--menu.open").forEach(function(e){e.classList.remove("open"),setTimeout(function(){n.classList.add("closed")},1e3)}),r.shadowRoot.querySelectorAll(".buttons-holder .btn-menu[aria-expanded]").forEach(function(e){e.removeAttribute("aria-expanded"),e.querySelector(".btn-primary").classList.remove("active")}),Array.from(c.querySelectorAll(":scope > details")).forEach((e,m)=>{e!=t&&e.removeAttribute("open")}),this.querySelectorAll(":scope > details[open]").length?(i.classList.add("show"),r.classList.add("open")):(i.classList.remove("show"),r.classList.remove("open")),o.preventDefault()}}),this.querySelectorAll("details").forEach(o=>{let a=o.querySelector("summary");o.querySelector(":Scope > div").setAttribute("data-title",a.textContent)}),this.hasAttribute("data-search")){n.classList.add("has-search");let o=this.shadowRoot.querySelector("#search-wrapper");o.classList.remove("d-none"),o.insertAdjacentHTML("afterbegin",`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
       <dialog id="search-dialog">
       <div class="container">
         <form action="${this.hasAttribute("data-search")?this.getAttribute("data-search"):""}" class="row" id="search-form">
@@ -47,5 +48,5 @@
           </div>
         </form>
       </div>
-      </dialog>`);let t=this.shadowRoot.querySelector("#search-button"),a=this.shadowRoot.querySelector("#search-close"),l=this.shadowRoot.querySelector("#search-dialog"),e=this.shadowRoot.querySelector("#search"),u=this.shadowRoot.querySelector("#search-form");this.hasAttribute("data-search-open")&&(l.setAttribute("open","open"),this.classList.add("search-open"),t.setAttribute("aria-expanded",!0)),t.addEventListener("click",c=>{l.setAttribute("open","open"),this.classList.add("search-open"),t.setAttribute("aria-expanded",!0)}),a.addEventListener("click",c=>{l.removeAttribute("open"),this.classList.remove("search-open"),t.removeAttribute("aria-expanded")}),e.addEventListener("keydown",c=>{const s=new CustomEvent("search-keydown",{detail:{search:e.value}});this.dispatchEvent(s)}),e.addEventListener("keyup",c=>{e.value.length>=3&&e.hasAttribute("data-list")?e.setAttribute("list",e.getAttribute("data-list")):e.removeAttribute("list");const s=new CustomEvent("search-keyup",{detail:{search:e.value}});this.dispatchEvent(s)}),e.addEventListener("change",c=>{const s=new CustomEvent("search-change",{detail:{search:e.value}});this.dispatchEvent(s)}),u.addEventListener("submit",c=>{this.hasAttribute("data-prevent-search")&&c.preventDefault();const s=new CustomEvent("search-submit",{detail:{search:e.value}});this.dispatchEvent(s)}),this.querySelectorAll("datalist").forEach(c=>{r.shadowRoot.querySelector(".lists").insertAdjacentElement("beforeend",c)})}}}export{p as default};
+      </dialog>`);let a=this.shadowRoot.querySelector("#search-button"),t=this.shadowRoot.querySelector("#search-close"),c=this.shadowRoot.querySelector("#search-dialog"),e=this.shadowRoot.querySelector("#search"),m=this.shadowRoot.querySelector("#search-form");this.hasAttribute("data-search-open")&&(c.setAttribute("open","open"),this.classList.add("search-open"),a.setAttribute("aria-expanded",!0)),a.addEventListener("click",l=>{c.setAttribute("open","open"),this.classList.add("search-open"),a.setAttribute("aria-expanded",!0)}),t.addEventListener("click",l=>{c.removeAttribute("open"),this.classList.remove("search-open"),a.removeAttribute("aria-expanded")}),e.addEventListener("keydown",l=>{const s=new CustomEvent("search-keydown",{detail:{search:e.value}});this.dispatchEvent(s)}),e.addEventListener("keyup",l=>{e.value.length>=3&&e.hasAttribute("data-list")?e.setAttribute("list",e.getAttribute("data-list")):e.removeAttribute("list");const s=new CustomEvent("search-keyup",{detail:{search:e.value}});this.dispatchEvent(s)}),e.addEventListener("change",l=>{const s=new CustomEvent("search-change",{detail:{search:e.value}});this.dispatchEvent(s)}),m.addEventListener("submit",l=>{this.hasAttribute("data-prevent-search")&&l.preventDefault();const s=new CustomEvent("search-submit",{detail:{search:e.value}});this.dispatchEvent(s)}),this.querySelectorAll("datalist").forEach(l=>{r.shadowRoot.querySelector(".lists").insertAdjacentElement("beforeend",l)})}}}export{p as default};
 //# sourceMappingURL=nav.component.min.js.map

package/assets/js/components/nav/nav.component.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nav.component.min.js","sources":["nav.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer \|\| [];\nwindow.dataLayer.push({\n \"event\": \"customElementRegistered\",\n \"element\": \"nav\"\n});\nclass iamNav extends HTMLElement {\n constructor() {\n super();\n const shadowRoot = this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/nav.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style class=\"styles\">\n @import \"${coreCSS}\";\n ${loadCSS}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"container\">\n <slot name=\"logo\"></slot>\n <div class=\"buttons-holder\"></div>\n <button class=\"btn-menu\">Menu<i class=\"fa-regular fa-bars\"></i><i class=\"fa-regular fa-xmark-large\"></i></button>\n\n <div class=\"menu__outer\">\n <div class=\"menu closed\">\n \n <div class=\"menu__primary\">\n <slot></slot>\n <slot name=\"dual\"></slot>\n </div>\n <div class=\"dialog__wrapper d-none\" id=\"search-wrapper\"></div>\n <slot name=\"actions\"></slot>\n <div class=\"menu__secondary\">\n <div class=\"container\">\n <slot name=\"secondary\"></slot>\n </div>\n </div>\n </div>\n <slot name=\"menus\"></slot>\n </div> \n </div>\n <div class=\"lists\"></div>\n <div class=\"backdrop\" part=\"backdrop\"></div>\n `;\n shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n // Load external CSS if needed\n if (this.hasAttribute('data-css'))\n this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n const menuButton = this.shadowRoot.querySelector('.btn-menu');\n const menu = this.shadowRoot.querySelector('.menu');\n const iamNav = this;\n const backdrop = this.shadowRoot.querySelector('.backdrop');\n const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');\n // Check the content \n this.querySelectorAll(':scope > *').forEach(function (element) {\n let tagname = element.tagName;\n switch (tagname) {\n case \"BUTTON\":\n element.setAttribute('slot', 'actions');\n menu.classList.add('has-actions');\n break;\n }\n // Create menu button\n if (element.classList.contains('nav--menu') && element.hasAttribute('data-title') && element.hasAttribute('data-icon')) {\n const title = element.getAttribute('data-title');\n const iconClass = element.getAttribute('data-icon');\n // Create the menu button that sits seperately to the menu\n const button = document.createElement('button');\n button.setAttribute('slot', title);\n button.classList.add('btn-menu');\n button.innerHTML = `<span class=\"btn btn-primary\"><span>${title}</span><i class=\"${iconClass}\"></i><i class=\"fa-regular fa-xmark-large\"></i></span>`;\n buttonsHolder.insertAdjacentElement('beforeend', button);\n const mdButton = button.querySelector('.btn-primary');\n // Make sure the menu is added to the right part of the component\n element.setAttribute('slot', 'menus');\n // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown\n if (element.classList.contains('open')) {\n button.setAttribute('aria-expanded', true);\n mdButton.classList.toggle('active');\n iamNav.classList.add('open');\n backdrop.classList.add('show');\n }\n else {\n element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues\n }\n // Click event\n button.addEventListener('click', function (e) {\n e.preventDefault();\n button.toggleAttribute('aria-expanded');\n element.classList.toggle('open');\n mdButton.classList.toggle('active');\n // Close desktop menus\n let openMenu = iamNav.querySelector(':scope > details[open]');\n if (openMenu)\n openMenu.removeAttribute('open');\n // Close the main menu and fix states on the button, iamNav component and backdrop\n if (element.classList.contains('open')) {\n menu.classList.remove('open');\n menuButton.removeAttribute('aria-expanded');\n setTimeout(function () { menu.classList.add('closed'); }, 1000); // Delay until its close so the animation is broken\n iamNav.classList.add('open');\n backdrop.classList.add('show');\n element.classList.remove('closed');\n }\n else {\n iamNav.classList.remove('open');\n backdrop.classList.remove('show');\n setTimeout(function () { element.classList.add('closed'); }, 1000);\n }\n // Close any open menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {\n if (openmenu != element) {\n openmenu.classList.remove('open');\n }\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (selectedButton) {\n if (selectedButton != button) {\n selectedButton.removeAttribute('aria-expanded');\n let innerBtn = selectedButton.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n }\n });\n }, false);\n }\n });\n // Has secondary link\n if (this.querySelector('a[slot=\"secondary\"]')) {\n menu.classList.add('has-secondary');\n }\n // Create a scroll width variable to help with the sizing of the menu with in the CSS\n document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.offsetWidth) + 'px');\n // Open and close the menu\n menuButton.addEventListener('click', function (e) {\n e.preventDefault();\n menuButton.toggleAttribute('aria-expanded');\n menu.classList.toggle('open');\n // Close any other menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n setTimeout(function () { element.classList.add('closed'); }, 1000);\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n let innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n if (menu.classList.contains('open')) {\n iamNav.classList.add('open');\n menu.classList.remove('closed');\n }\n else {\n iamNav.classList.remove('open');\n setTimeout(function () { menu.classList.add('closed'); }, 1000);\n }\n }, false);\n // Allow outside JS to close the menu\n this.addEventListener(\"request-close\", (event) => {\n menuButton.removeAttribute('aria-expanded');\n menu.classList.remove('open');\n iamNav.classList.remove('open');\n });\n // Close the menu on the click of the backdrop on desktop\n backdrop.addEventListener(\"click\", (event) => {\n let openMenu = this.querySelector('details[open] summary');\n if (openMenu)\n openMenu.click();\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n let innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n backdrop.classList.remove('show');\n });\n // On desktop close other menu's (details) when one is clicked\n this.addEventListener(\"click\", (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {\n if (window.innerWidth > 992) {\n let summary = event.target.closest('summary');\n let details = summary.closest('details');\n let wrapper = details.parentNode;\n if (details.hasAttribute('open'))\n details.removeAttribute('open');\n else\n details.setAttribute('open', 'true');\n // Close any bespoke menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n setTimeout(function () { menu.classList.add('closed'); }, 1000);\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n let innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n // Close any other dropdowns on the same level\n Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement, index) => {\n if (detailsArrayElement != details)\n detailsArrayElement.removeAttribute('open');\n });\n if (this.querySelectorAll(':scope > details[open]').length) {\n backdrop.classList.add('show');\n iamNav.classList.add('open');\n }\n else {\n backdrop.classList.remove('show');\n iamNav.classList.remove('open');\n }\n event.preventDefault();\n }\n }\n ;\n });\n // Mega menu title\n this.querySelectorAll('details').forEach((detailsElement) => {\n let summary = detailsElement.querySelector('summary');\n let containerDiv = detailsElement.querySelector(':Scope > div');\n containerDiv.setAttribute('data-title', summary.textContent);\n });\n // Search \n if (this.hasAttribute('data-search')) {\n menu.classList.add('has-search');\n let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');\n searchWrapper.classList.remove('d-none');\n searchWrapper.insertAdjacentHTML('afterbegin', `<button class=\"btn btn-secondary btn-compact fa-search me-0 mb-0\" id=\"search-button\" aria-controls=\"search-dialog\">Open Search field</button>\n <dialog id=\"search-dialog\">\n <div class=\"container\">\n <form action=\"${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}\" class=\"row\" id=\"search-form\">\n <div class=\"col mb-0 ms-auto col-md-7\">\n <label for=\"search\" class=\"visually-hidden\">Search</label>\n <button class=\"suffix me-0 mb-0\"><i class=\"fa-regular fa-search\"></i></button>\n <input type=\"search\" class=\"\" id=\"search\" name=\"search\" required=\"\" autocomplete=\"off\" data-list=\"${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}\" />\n </div>\n <div class=\"col d-none d-md-block mw-fit-content ms-3\">\n <button class=\"btn btn-compact btn-secondary fa-xmark-large m-0 mb-0\" type=\"button\" id=\"search-close\">Close search field</button>\n </div>\n </form>\n </div>\n </dialog>`);\n let searchButton = this.shadowRoot.querySelector('#search-button');\n let searchClose = this.shadowRoot.querySelector('#search-close');\n let searchDialog = this.shadowRoot.querySelector('#search-dialog');\n let searchInput = this.shadowRoot.querySelector('#search');\n let searchForm = this.shadowRoot.querySelector('#search-form');\n if (this.hasAttribute('data-search-open')) {\n searchDialog.setAttribute('open', 'open');\n this.classList.add('search-open');\n searchButton.setAttribute('aria-expanded', true);\n }\n searchButton.addEventListener(\"click\", (event) => {\n searchDialog.setAttribute('open', 'open');\n this.classList.add('search-open');\n searchButton.setAttribute('aria-expanded', true);\n });\n searchClose.addEventListener(\"click\", (event) => {\n searchDialog.removeAttribute('open');\n this.classList.remove('search-open');\n searchButton.removeAttribute('aria-expanded');\n });\n // Search events\n searchInput.addEventListener('keydown', (event) => {\n const keyupEvent = new CustomEvent(\"search-keydown\", { detail: { search: searchInput.value } });\n this.dispatchEvent(keyupEvent);\n });\n searchInput.addEventListener('keyup', (event) => {\n if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list'))\n searchInput.setAttribute(\"list\", searchInput.getAttribute('data-list'));\n else\n searchInput.removeAttribute(\"list\");\n const keyupEvent = new CustomEvent(\"search-keyup\", { detail: { search: searchInput.value } });\n this.dispatchEvent(keyupEvent);\n });\n searchInput.addEventListener('change', (event) => {\n const changeEvent = new CustomEvent(\"search-change\", { detail: { search: searchInput.value } });\n this.dispatchEvent(changeEvent);\n });\n searchForm.addEventListener('submit', (event) => {\n if (this.hasAttribute('data-prevent-search'))\n event.preventDefault();\n const submitEvent = new CustomEvent(\"search-submit\", { detail: { search: searchInput.value } });\n this.dispatchEvent(submitEvent);\n });\n // Make sure any child lists are available to the search input\n this.querySelectorAll('datalist').forEach((list) => {\n iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend', list);\n });\n }\n }\n}\nexport default iamNav;\n"],"names":["iamNav","shadowRoot","assetLocation","coreCSS","template","menuButton","menu","backdrop","buttonsHolder","element","title","iconClass","button","mdButton","e","openMenu","openmenu","selectedButton","event","details","wrapper","detailsArrayElement","index","detailsElement","summary","searchWrapper","searchButton","searchClose","searchDialog","searchInput","searchForm","keyupEvent","changeEvent","submitEvent","list"],"mappings":"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"}
1	+ {"version":3,"file":"nav.component.min.js","sources":["nav.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer \|\| [];\nwindow.dataLayer.push({\n \"event\": \"customElementRegistered\",\n \"element\": \"nav\"\n});\nclass iamNav extends HTMLElement {\n constructor() {\n super();\n const shadowRoot = this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';\n const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/nav.css\";`;\n const loadExtraCSS = `@import \"${assetLocation}/css/components/nav.global.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style class=\"styles\">\n @import \"${coreCSS}\";\n ${loadCSS}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"container\">\n <slot name=\"logo\"></slot>\n <div class=\"buttons-holder\"></div>\n <button class=\"btn-menu\">Menu<i class=\"fa-regular fa-bars\"></i><i class=\"fa-regular fa-xmark-large\"></i></button>\n\n <div class=\"menu__outer\">\n <div class=\"menu closed\">\n \n <div class=\"menu__primary\">\n <slot></slot>\n <slot name=\"dual\"></slot>\n </div>\n <div class=\"dialog__wrapper d-none\" id=\"search-wrapper\"></div>\n <slot name=\"actions\"></slot>\n <div class=\"menu__secondary\">\n <div class=\"container\">\n <slot name=\"secondary\"></slot>\n </div>\n </div>\n </div>\n <slot name=\"menus\"></slot>\n </div> \n </div>\n <div class=\"lists\"></div>\n <div class=\"backdrop\" part=\"backdrop\"></div>\n `;\n shadowRoot.appendChild(template.content.cloneNode(true));\n // insert extra CSS\n if (!document.getElementById('navGlobal'))\n document.head.insertAdjacentHTML('beforeend', `<style id=\"navGlobal\">${loadExtraCSS}</style>`);\n }\n connectedCallback() {\n // Load external CSS if needed\n if (this.hasAttribute('data-css'))\n this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n const menuButton = this.shadowRoot.querySelector('.btn-menu');\n const menu = this.shadowRoot.querySelector('.menu');\n const iamNav = this;\n const backdrop = this.shadowRoot.querySelector('.backdrop');\n const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');\n // Check the content \n this.querySelectorAll(':scope > *').forEach(function (element) {\n let tagname = element.tagName;\n switch (tagname) {\n case \"BUTTON\":\n element.setAttribute('slot', 'actions');\n menu.classList.add('has-actions');\n break;\n }\n // Create menu button\n if (element.classList.contains('nav--menu') && element.hasAttribute('data-title') && element.hasAttribute('data-icon')) {\n const title = element.getAttribute('data-title');\n const iconClass = element.getAttribute('data-icon');\n // Create the menu button that sits seperately to the menu\n const button = document.createElement('button');\n button.setAttribute('slot', title);\n button.classList.add('btn-menu');\n button.innerHTML = `<span class=\"btn btn-primary\"><span>${title}</span><i class=\"${iconClass}\"></i><i class=\"fa-regular fa-xmark-large\"></i></span>`;\n buttonsHolder.insertAdjacentElement('beforeend', button);\n const mdButton = button.querySelector('.btn-primary');\n // Make sure the menu is added to the right part of the component\n element.setAttribute('slot', 'menus');\n // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown\n if (element.classList.contains('open')) {\n button.setAttribute('aria-expanded', true);\n mdButton.classList.toggle('active');\n iamNav.classList.add('open');\n backdrop.classList.add('show');\n }\n else {\n element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues\n }\n // Click event\n button.addEventListener('click', function (e) {\n e.preventDefault();\n button.toggleAttribute('aria-expanded');\n element.classList.toggle('open');\n mdButton.classList.toggle('active');\n // Close desktop menus\n let openMenu = iamNav.querySelector(':scope > details[open]');\n if (openMenu)\n openMenu.removeAttribute('open');\n // Close the main menu and fix states on the button, iamNav component and backdrop\n if (element.classList.contains('open')) {\n menu.classList.remove('open');\n menuButton.removeAttribute('aria-expanded');\n setTimeout(function () { menu.classList.add('closed'); }, 1000); // Delay until its close so the animation is broken\n iamNav.classList.add('open');\n backdrop.classList.add('show');\n element.classList.remove('closed');\n }\n else {\n iamNav.classList.remove('open');\n backdrop.classList.remove('show');\n setTimeout(function () { element.classList.add('closed'); }, 1000);\n }\n // Close any open menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {\n if (openmenu != element) {\n openmenu.classList.remove('open');\n }\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (selectedButton) {\n if (selectedButton != button) {\n selectedButton.removeAttribute('aria-expanded');\n let innerBtn = selectedButton.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n }\n });\n }, false);\n }\n });\n // Has secondary link\n if (this.querySelector('a[slot=\"secondary\"]')) {\n menu.classList.add('has-secondary');\n }\n // Create a scroll width variable to help with the sizing of the menu with in the CSS\n document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.offsetWidth) + 'px');\n // Open and close the menu\n menuButton.addEventListener('click', function (e) {\n e.preventDefault();\n menuButton.toggleAttribute('aria-expanded');\n menu.classList.toggle('open');\n // Close any other menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n setTimeout(function () { element.classList.add('closed'); }, 1000);\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n let innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n if (menu.classList.contains('open')) {\n iamNav.classList.add('open');\n menu.classList.remove('closed');\n }\n else {\n iamNav.classList.remove('open');\n setTimeout(function () { menu.classList.add('closed'); }, 1000);\n }\n }, false);\n // Allow outside JS to close the menu\n this.addEventListener(\"request-close\", (event) => {\n menuButton.removeAttribute('aria-expanded');\n menu.classList.remove('open');\n iamNav.classList.remove('open');\n });\n // Close the menu on the click of the backdrop on desktop\n backdrop.addEventListener(\"click\", (event) => {\n let openMenu = this.querySelector('details[open] summary');\n if (openMenu)\n openMenu.click();\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n let innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n backdrop.classList.remove('show');\n });\n // On desktop close other menu's (details) when one is clicked\n this.addEventListener(\"click\", (event) => {\n if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {\n if (window.innerWidth > 992) {\n let summary = event.target.closest('summary');\n let details = summary.closest('details');\n let wrapper = details.parentNode;\n if (details.hasAttribute('open'))\n details.removeAttribute('open');\n else\n details.setAttribute('open', 'true');\n // Close any bespoke menus\n iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {\n element.classList.remove('open');\n setTimeout(function () { menu.classList.add('closed'); }, 1000);\n });\n iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {\n element.removeAttribute('aria-expanded');\n let innerBtn = element.querySelector('.btn-primary');\n innerBtn.classList.remove('active');\n });\n // Close any other dropdowns on the same level\n Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement, index) => {\n if (detailsArrayElement != details)\n detailsArrayElement.removeAttribute('open');\n });\n if (this.querySelectorAll(':scope > details[open]').length) {\n backdrop.classList.add('show');\n iamNav.classList.add('open');\n }\n else {\n backdrop.classList.remove('show');\n iamNav.classList.remove('open');\n }\n event.preventDefault();\n }\n }\n ;\n });\n // Mega menu title\n this.querySelectorAll('details').forEach((detailsElement) => {\n let summary = detailsElement.querySelector('summary');\n let containerDiv = detailsElement.querySelector(':Scope > div');\n containerDiv.setAttribute('data-title', summary.textContent);\n });\n // Search \n if (this.hasAttribute('data-search')) {\n menu.classList.add('has-search');\n let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');\n searchWrapper.classList.remove('d-none');\n searchWrapper.insertAdjacentHTML('afterbegin', `<button class=\"btn btn-secondary btn-compact fa-search me-0 mb-0\" id=\"search-button\" aria-controls=\"search-dialog\">Open Search field</button>\n <dialog id=\"search-dialog\">\n <div class=\"container\">\n <form action=\"${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}\" class=\"row\" id=\"search-form\">\n <div class=\"col mb-0 ms-auto col-md-7\">\n <label for=\"search\" class=\"visually-hidden\">Search</label>\n <button class=\"suffix me-0 mb-0\"><i class=\"fa-regular fa-search\"></i></button>\n <input type=\"search\" class=\"\" id=\"search\" name=\"search\" required=\"\" autocomplete=\"off\" data-list=\"${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}\" />\n </div>\n <div class=\"col d-none d-md-block mw-fit-content ms-3\">\n <button class=\"btn btn-compact btn-secondary fa-xmark-large m-0 mb-0\" type=\"button\" id=\"search-close\">Close search field</button>\n </div>\n </form>\n </div>\n </dialog>`);\n let searchButton = this.shadowRoot.querySelector('#search-button');\n let searchClose = this.shadowRoot.querySelector('#search-close');\n let searchDialog = this.shadowRoot.querySelector('#search-dialog');\n let searchInput = this.shadowRoot.querySelector('#search');\n let searchForm = this.shadowRoot.querySelector('#search-form');\n if (this.hasAttribute('data-search-open')) {\n searchDialog.setAttribute('open', 'open');\n this.classList.add('search-open');\n searchButton.setAttribute('aria-expanded', true);\n }\n searchButton.addEventListener(\"click\", (event) => {\n searchDialog.setAttribute('open', 'open');\n this.classList.add('search-open');\n searchButton.setAttribute('aria-expanded', true);\n });\n searchClose.addEventListener(\"click\", (event) => {\n searchDialog.removeAttribute('open');\n this.classList.remove('search-open');\n searchButton.removeAttribute('aria-expanded');\n });\n // Search events\n searchInput.addEventListener('keydown', (event) => {\n const keyupEvent = new CustomEvent(\"search-keydown\", { detail: { search: searchInput.value } });\n this.dispatchEvent(keyupEvent);\n });\n searchInput.addEventListener('keyup', (event) => {\n if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list'))\n searchInput.setAttribute(\"list\", searchInput.getAttribute('data-list'));\n else\n searchInput.removeAttribute(\"list\");\n const keyupEvent = new CustomEvent(\"search-keyup\", { detail: { search: searchInput.value } });\n this.dispatchEvent(keyupEvent);\n });\n searchInput.addEventListener('change', (event) => {\n const changeEvent = new CustomEvent(\"search-change\", { detail: { search: searchInput.value } });\n this.dispatchEvent(changeEvent);\n });\n searchForm.addEventListener('submit', (event) => {\n if (this.hasAttribute('data-prevent-search'))\n event.preventDefault();\n const submitEvent = new CustomEvent(\"search-submit\", { detail: { search: searchInput.value } });\n this.dispatchEvent(submitEvent);\n });\n // Make sure any child lists are available to the search input\n this.querySelectorAll('datalist').forEach((list) => {\n iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend', list);\n });\n }\n }\n}\nexport default iamNav;\n"],"names":["iamNav","shadowRoot","assetLocation","coreCSS","template","menuButton","menu","backdrop","buttonsHolder","element","title","iconClass","button","mdButton","e","openMenu","openmenu","selectedButton","event","details","wrapper","detailsArrayElement","index","detailsElement","summary","searchWrapper","searchButton","searchClose","searchDialog","searchInput","searchForm","keyupEvent","changeEvent","submitEvent","list"],"mappings":"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"}

package/assets/js/components/notification/notification.component.js CHANGED Viewed

@@ -13,6 +13,7 @@ class iamNotification extends HTMLElement {
         const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
         const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
         const loadCSS = `@import "${assetLocation}/css/components/notification.css";`;
+        const loadExtraCSS = `@import "${assetLocation}/css/components/notification.global.css";`;
         const buttons = this.querySelectorAll('a,button');
         Array.from(buttons).forEach((button, index) => {
             button.setAttribute('slot', 'btns');
@@ -35,6 +36,9 @@ class iamNotification extends HTMLElement {
     </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
+        // insert extra CSS
+        if (!document.getElementById('notificationHolder'))
+            document.head.insertAdjacentHTML('beforeend', `<style id="notificationHolder">${loadExtraCSS}</style>`);
     }
     connectedCallback() {
         const dismissBtn = this.shadowRoot.querySelector('[data-dismiss-button]');

package/assets/js/components/notification/notification.component.min.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta2
   * Copyright 2022-2023 iamproperty
-  */function r(i){if(i.hasAttribute("data-type")&&i.getAttribute("data-type")=="toast"){let t=document.querySelector(".notification__holder");t||(t=document.createElement("div"),t.classList.add("notification__holder"),t.classList.add("container"),document.querySelector("body").appendChild(t)),i.closest(".notification__holder")||t.appendChild(i)}if(i.setAttribute("role","alert"),i.addEventListener("click",function(t){event&&event.target instanceof HTMLElement&&event.target.closest("[data-dismiss-button]")&&(t.preventDefault(),n(i))},!1),i.hasAttribute("data-timeout")){let t=i.getAttribute("data-timeout");var e=new c(function(){n(i)},t);i.addEventListener("mouseenter",o=>{e.pause()}),i.addEventListener("mouseleave",o=>{e.resume()})}}function c(i,e){var t,o,a=e;this.pause=function(){window.clearTimeout(t),a-=new Date-o},this.resume=function(){o=new Date,window.clearTimeout(t),t=window.setTimeout(i,a)},this.resume()}const n=function(i){i.classList.add("d-none")};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Notification"});class d extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const e=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${e}/css/core.min.css`,o=this.querySelectorAll("a,button");Array.from(o).forEach((s,l)=>{s.setAttribute("slot","btns"),s.classList.add("link")}),(o.length||this.hasAttribute("data-dismiss"))&&this.classList.add("notification--dismissable");const a=document.createElement("template");a.innerHTML=`
+  */function r(i){if(i.hasAttribute("data-type")&&i.getAttribute("data-type")=="toast"){let t=document.querySelector(".notification__holder");t||(t=document.createElement("div"),t.classList.add("notification__holder"),t.classList.add("container"),document.querySelector("body").appendChild(t)),i.closest(".notification__holder")||t.appendChild(i)}if(i.setAttribute("role","alert"),i.addEventListener("click",function(t){event&&event.target instanceof HTMLElement&&event.target.closest("[data-dismiss-button]")&&(t.preventDefault(),a(i))},!1),i.hasAttribute("data-timeout")){let t=i.getAttribute("data-timeout");var n=new c(function(){a(i)},t);i.addEventListener("mouseenter",o=>{n.pause()}),i.addEventListener("mouseleave",o=>{n.resume()})}}function c(i,n){var t,o,e=n;this.pause=function(){window.clearTimeout(t),e-=new Date-o},this.resume=function(){o=new Date,window.clearTimeout(t),t=window.setTimeout(i,e)},this.resume()}const a=function(i){i.classList.add("d-none")};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Notification"});class d extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const n=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${n}/css/core.min.css`,o=this.querySelectorAll("a,button");Array.from(o).forEach((s,l)=>{s.setAttribute("slot","btns"),s.classList.add("link")}),(o.length||this.hasAttribute("data-dismiss"))&&this.classList.add("notification--dismissable");const e=document.createElement("template");e.innerHTML=`
     <style>
     @import "${t}";
     :host,.iam-notification{display:block;padding:1.375rem 1.5rem 1.375rem 1rem !important;border-radius:0.5rem;box-shadow:2px 6px 12px rgba(0,0,0,.2);margin-bottom:1rem;font-size:0.9375rem;border:0.125rem solid var(--colour, var(--colour-info));outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}@media screen and (prefers-color-scheme: light){:host,.iam-notification{background:#e9f9fd}}:host ::slotted(i),:host i,.iam-notification ::slotted(i),.iam-notification i{color:var(--colour, currentColor)}:host([data-type]),.iam-notification[data-type]{border:0.125rem solid rgba(0,0,0,0)}:host(.colour-warning),.iam-notification.colour-warning{background:#fff6e6}:host(.colour-danger),.iam-notification.colour-danger{background:#fcebec}:host(.colour-success),.iam-notification.colour-success{background:#f8fdf6}:host(.bg-white),.iam-notification.bg-white{border:none;border-left:0.5rem solid var(--colour-info)}:host(.bg-white) ::slotted(i),:host(.bg-white) i,.iam-notification.bg-white ::slotted(i),.iam-notification.bg-white i{color:var(--colour-info)}:host([data-type=alert]),.iam-notification[data-type=alert]{border-radius:0;position:fixed;top:var(--nav-height);left:0;right:0;z-index:calc(var(--index-menu) - 1);margin-bottom:0}:host([data-type=toast]),.iam-notification[data-type=toast]{margin:auto;display:block;width:100%;max-width:22.5rem}:host([data-type=toast].notification--dismissable){max-width:28.375rem}.notification{container-type:inline-size;max-width:69.5rem;margin-inline:auto;display:flex;flex-wrap:nowrap}@media screen and (prefers-color-scheme: light){.notification{color:var(--colour-heading)}}.notification .notification__icon{margin-inline-end:1rem;flex-grow:0}.notification .notification__icon ::slotted(i){font-size:1.125rem}.notification .notification__inner{display:flex;flex-wrap:wrap;flex-grow:1}@container (width > 23.4375em){.notification .notification__inner{flex-wrap:nowrap}}.notification .notification__text{flex-grow:1;flex-shrink:1;width:100%}.notification .notification__btns{flex-grow:0;flex-shrink:0;--colour-underline: currentColor}.notification .notification__btns ::slotted(a),.notification .notification__btns ::slotted(button),.notification .notification__btns>*{margin:1rem 1rem 0 0 !important}@container (width > 23.4375em){.notification .notification__btns{display:flex;align-items:center;border-left:1px solid currentColor;margin-left:2rem}.notification .notification__btns ::slotted(a),.notification .notification__btns ::slotted(button),.notification .notification__btns>*{margin:0 0 0 2rem !important}}.notification .notification__dismiss{flex-grow:0;padding-left:1rem}.notification .notification__dismiss button{text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0);display:inline-block;position:relative;color:inherit}.notification .notification__dismiss button:after{content:"";top:0;left:0;position:absolute;display:block;height:1.125rem;width:1.125rem;z-index:var(--index-focus);background:currentColor;mask-image:var(--icon-close);mask-size:100%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-close);-webkit-mask-size:100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%}@container (width > 23.4375em){.notification .notification__dismiss{padding-left:2rem;display:flex;align-items:center}}/*# sourceMappingURL=assets/css/components/notification.css.map */
@@ -14,5 +14,6 @@
       <div class="notification__inner"><div class="notification__text"><slot></slot></div>${o.length?'<div class="notification__btns"><slot name="btns"></slot></div>':""}</div>
       ${this.hasAttribute("data-dismiss")?'<div class="notification__dismiss"><button data-dismiss-button>Dismiss</button></div>':""}
     </div>
-    `,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){const e=this.shadowRoot.querySelector("[data-dismiss-button]"),t=this.hasAttribute("data-status")?this.getAttribute("data-status"):"white";this.hasAttribute("data-type")?this.classList.add(`bg-${t}`):this.classList.add(`colour-${t}`);const o=this;if(!this.querySelector("i"))switch(t){case"danger":this.innerHTML+='<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>';break;case"warning":this.innerHTML+='<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>';break;case"success":this.innerHTML+='<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>';break;default:this.innerHTML+='<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>'}r(o),e&&e.addEventListener("click",function(a){n(o)},!1)}}export{d as default};
+    `,this.shadowRoot.appendChild(e.content.cloneNode(!0)),document.getElementById("notificationHolder")||document.head.insertAdjacentHTML("beforeend",`<style id="notificationHolder">.container.notification__holder{position:fixed;top:var(--nav-height);left:50%;transform:translate(-50%, 0);bottom:0;z-index:999999;pointer-events:none;padding-top:1rem;padding-bottom:1rem;display:flex;margin:0;width:100%;flex-wrap:wrap;align-content:flex-start;flex-direction:column;align-content:flex-end;align-items:flex-end}.container.notification__holder :is(.iam-notification,iam-notification){pointer-events:all;margin:.5rem 0 .5rem 0}.container.notification__holder.bottom{flex-direction:column-reverse}.container.notification__holder.left{align-content:flex-start;align-items:flex-start}.container.notification__holder.middle{align-content:space-around;align-items:center}/*# sourceMappingURL=assets/css/components/notification.global.css.map */
+</style>`)}connectedCallback(){const n=this.shadowRoot.querySelector("[data-dismiss-button]"),t=this.hasAttribute("data-status")?this.getAttribute("data-status"):"white";this.hasAttribute("data-type")?this.classList.add(`bg-${t}`):this.classList.add(`colour-${t}`);const o=this;if(!this.querySelector("i"))switch(t){case"danger":this.innerHTML+='<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>';break;case"warning":this.innerHTML+='<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>';break;case"success":this.innerHTML+='<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>';break;default:this.innerHTML+='<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>'}r(o),n&&n.addEventListener("click",function(e){a(o)},!1)}}export{d as default};
 //# sourceMappingURL=notification.component.min.js.map

package/assets/js/components/notification/notification.component.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"notification.component.min.js","sources":["../../modules/notification.js","notification.component.js"],"sourcesContent":["// @ts-nocheck\nfunction setupNotification(element) {\n // Add toast to notification holder\n if (element.hasAttribute('data-type') && element.getAttribute('data-type') == \"toast\") {\n let holder = document.querySelector('.notification__holder');\n if (!holder) {\n holder = document.createElement('div');\n holder.classList.add('notification__holder');\n holder.classList.add('container');\n document.querySelector('body').appendChild(holder);\n }\n if (!element.closest('.notification__holder'))\n holder.appendChild(element);\n }\n element.setAttribute('role', 'alert');\n // Create a dissmissable button\n element.addEventListener('click', function (e) {\n if (event && event.target instanceof HTMLElement && event.target.closest('[data-dismiss-button]')) {\n e.preventDefault();\n closeNotification(element);\n }\n }, false);\n // Self disappearing alert\n if (element.hasAttribute('data-timeout')) {\n let timeOut = element.getAttribute('data-timeout');\n var timer = new Timer(function () {\n closeNotification(element);\n }, timeOut);\n element.addEventListener(\"mouseenter\", (event) => {\n timer.pause();\n });\n element.addEventListener(\"mouseleave\", (event) => {\n timer.resume();\n });\n }\n}\nfunction Timer(callback, delay) {\n var timerId, start, remaining = delay;\n this.pause = function () {\n window.clearTimeout(timerId);\n remaining -= new Date() - start;\n };\n this.resume = function () {\n start = new Date();\n window.clearTimeout(timerId);\n timerId = window.setTimeout(callback, remaining);\n };\n this.resume();\n}\nexport const closeNotification = function (element) {\n element.classList.add('d-none');\n};\nexport default setupNotification;\n","// @ts-nocheck\nimport setupNotification, { closeNotification } from \"../../modules/notification.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer \|\| [];\nwindow.dataLayer.push({\n \"event\": \"customElementRegistered\",\n \"element\": \"Notification\"\n});\nclass iamNotification 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 coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/notification.css\";`;\n const buttons = this.querySelectorAll('a,button');\n Array.from(buttons).forEach((button, index) => {\n button.setAttribute('slot', 'btns');\n button.classList.add('link');\n });\n if (buttons.length \|\| this.hasAttribute('data-dismiss'))\n this.classList.add('notification--dismissable');\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}\n </style>\n\n <div class=\"notification\">\n <div class=\"notification__icon\"><slot name=\"icon\"></slot></div>\n <div class=\"notification__inner\"><div class=\"notification__text\"><slot></slot></div>${buttons.length ? `<div class=\"notification__btns\"><slot name=\"btns\"></slot></div>` : ''}</div>\n ${this.hasAttribute('data-dismiss') ? `<div class=\"notification__dismiss\"><button data-dismiss-button>Dismiss</button></div>` : ''}\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n const dismissBtn = this.shadowRoot.querySelector('[data-dismiss-button]');\n const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : 'white';\n if (this.hasAttribute('data-type'))\n this.classList.add(`bg-${statusBG}`);\n else {\n this.classList.add(`colour-${statusBG}`);\n }\n const wrapper = this;\n if (!this.querySelector('i')) {\n switch (statusBG) {\n case 'danger':\n this.innerHTML += '<i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n case 'warning':\n this.innerHTML += '<i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n case 'success':\n this.innerHTML += '<i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n default:\n this.innerHTML += '<i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\" slot=\"icon\"></i>';\n }\n }\n setupNotification(wrapper);\n if (dismissBtn) {\n dismissBtn.addEventListener('click', function (e) {\n closeNotification(wrapper);\n }, false);\n }\n }\n}\nexport default iamNotification;\n"],"names":["setupNotification","element","holder","e","closeNotification","timeOut","timer","Timer","event","callback","delay","timerId","start","remaining","iamNotification","assetLocation","coreCSS","buttons","button","index","template","dismissBtn","statusBG","wrapper"],"mappings":";;;IACA,SAASA,EAAkBC,EAAS,CAEhC,GAAIA,EAAQ,aAAa,WAAW,GAAKA,EAAQ,aAAa,WAAW,GAAK,QAAS,CACnF,IAAIC,EAAS,SAAS,cAAc,uBAAuB,EACtDA,IACDA,EAAS,SAAS,cAAc,KAAK,EACrCA,EAAO,UAAU,IAAI,sBAAsB,EAC3CA,EAAO,UAAU,IAAI,WAAW,EAChC,SAAS,cAAc,MAAM,EAAE,YAAYA,CAAM,GAEhDD,EAAQ,QAAQ,uBAAuB,GACxCC,EAAO,YAAYD,CAAO,EAWlC,GATAA,EAAQ,aAAa,OAAQ,OAAO,EAEpCA,EAAQ,iBAAiB,QAAS,SAAUE,EAAG,CACvC,OAAS,MAAM,kBAAkB,aAAe,MAAM,OAAO,QAAQ,uBAAuB,IAC5FA,EAAE,eAAc,EAChBC,EAAkBH,CAAO,EAEhC,EAAE,EAAK,EAEJA,EAAQ,aAAa,cAAc,EAAG,CACtC,IAAII,EAAUJ,EAAQ,aAAa,cAAc,EACjD,IAAIK,EAAQ,IAAIC,EAAM,UAAY,CAC9BH,EAAkBH,CAAO,CAC5B,EAAEI,CAAO,EACVJ,EAAQ,iBAAiB,aAAeO,GAAU,CAC9CF,EAAM,MAAK,CACvB,CAAS,EACDL,EAAQ,iBAAiB,aAAeO,GAAU,CAC9CF,EAAM,OAAM,CACxB,CAAS,EAET,CACA,SAASC,EAAME,EAAUC,EAAO,CAC5B,IAAIC,EAASC,EAAOC,EAAYH,EAChC,KAAK,MAAQ,UAAY,CACrB,OAAO,aAAaC,CAAO,EAC3BE,GAAa,IAAI,KAASD,CAClC,EACI,KAAK,OAAS,UAAY,CACtBA,EAAQ,IAAI,KACZ,OAAO,aAAaD,CAAO,EAC3BA,EAAU,OAAO,WAAWF,EAAUI,CAAS,CACvD,EACI,KAAK,OAAM,CACf,CACO,MAAMT,EAAoB,SAAUH,EAAS,CAChDA,EAAQ,UAAU,IAAI,QAAQ,CAClC,EChDA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,cACf,CAAC,EACD,MAAMa,UAAwB,WAAY,CACtC,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EAAI,SAAS,KAAK,aAAa,sBAAsB,EAAI,UAC1HC,EAAU,SAAS,KAAK,aAAa,eAAe,EAAI,SAAS,KAAK,aAAa,eAAe,EAAI,GAAGD,~~qBAEzGE~~,EAAU,KAAK,iBAAiB,UAAU,EAChD,MAAM,KAAKA,CAAO,EAAE,QAAQ,CAACC,EAAQC,IAAU,CAC3CD,EAAO,aAAa,OAAQ,MAAM,EAClCA,EAAO,UAAU,IAAI,MAAM,CACvC,CAAS,GACGD,EAAQ,QAAU,KAAK,aAAa,cAAc,IAClD,KAAK,UAAU,IAAI,2BAA2B,EAClD,MAAMG,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdJ;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,UAAU,EAAI,GAAG,KAAK,aAAa,UAAU,IAAM;AAAA;AAAA;AAAA;AAAA;AAAA,4FAKiBC,EAAQ,OAAS,kEAAoE;AAAA,QACzK,KAAK,aAAa,cAAc,EAAI,wFAA0F;AAAA;AAAA,MAG9H,KAAK,WAAW,YAAYG,EAAS,QAAQ,UAAU,EAAI,CAAC,~~CAC/D~~,CACD,mBAAoB,CAChB,MAAMC,EAAa,KAAK,WAAW,cAAc,uBAAuB,EAClEC,EAAW,KAAK,aAAa,aAAa,EAAI,KAAK,aAAa,aAAa,EAAI,QACnF,KAAK,aAAa,WAAW,EAC7B,KAAK,UAAU,IAAI,MAAMA,GAAU,EAEnC,KAAK,UAAU,IAAI,UAAUA,GAAU,EAE3C,MAAMC,EAAU,KAChB,GAAI,CAAC,KAAK,cAAc,GAAG,EACvB,OAAQD,EAAQ,CACZ,IAAK,SACD,KAAK,WAAa,gFAClB,MACJ,IAAK,UACD,KAAK,WAAa,kFAClB,MACJ,IAAK,UACD,KAAK,WAAa,0EAClB,MACJ,QACI,KAAK,WAAa,wEACzB,CAELtB,EAAkBuB,CAAO,EACrBF,GACAA,EAAW,iBAAiB,QAAS,~~SAAUlB~~,EAAG,~~CAC9CC~~,EAAkBmB,CAAO,CAC5B,EAAE,EAAK,CAEf,CACL"}
1	+ {"version":3,"file":"notification.component.min.js","sources":["../../modules/notification.js","notification.component.js"],"sourcesContent":["// @ts-nocheck\nfunction setupNotification(element) {\n // Add toast to notification holder\n if (element.hasAttribute('data-type') && element.getAttribute('data-type') == \"toast\") {\n let holder = document.querySelector('.notification__holder');\n if (!holder) {\n holder = document.createElement('div');\n holder.classList.add('notification__holder');\n holder.classList.add('container');\n document.querySelector('body').appendChild(holder);\n }\n if (!element.closest('.notification__holder'))\n holder.appendChild(element);\n }\n element.setAttribute('role', 'alert');\n // Create a dissmissable button\n element.addEventListener('click', function (e) {\n if (event && event.target instanceof HTMLElement && event.target.closest('[data-dismiss-button]')) {\n e.preventDefault();\n closeNotification(element);\n }\n }, false);\n // Self disappearing alert\n if (element.hasAttribute('data-timeout')) {\n let timeOut = element.getAttribute('data-timeout');\n var timer = new Timer(function () {\n closeNotification(element);\n }, timeOut);\n element.addEventListener(\"mouseenter\", (event) => {\n timer.pause();\n });\n element.addEventListener(\"mouseleave\", (event) => {\n timer.resume();\n });\n }\n}\nfunction Timer(callback, delay) {\n var timerId, start, remaining = delay;\n this.pause = function () {\n window.clearTimeout(timerId);\n remaining -= new Date() - start;\n };\n this.resume = function () {\n start = new Date();\n window.clearTimeout(timerId);\n timerId = window.setTimeout(callback, remaining);\n };\n this.resume();\n}\nexport const closeNotification = function (element) {\n element.classList.add('d-none');\n};\nexport default setupNotification;\n","// @ts-nocheck\nimport setupNotification, { closeNotification } from \"../../modules/notification.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer \|\| [];\nwindow.dataLayer.push({\n \"event\": \"customElementRegistered\",\n \"element\": \"Notification\"\n});\nclass iamNotification 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 coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;\n const loadCSS = `@import \"${assetLocation}/css/components/notification.css\";`;\n const loadExtraCSS = `@import \"${assetLocation}/css/components/notification.global.css\";`;\n const buttons = this.querySelectorAll('a,button');\n Array.from(buttons).forEach((button, index) => {\n button.setAttribute('slot', 'btns');\n button.classList.add('link');\n });\n if (buttons.length \|\| this.hasAttribute('data-dismiss'))\n this.classList.add('notification--dismissable');\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}\n </style>\n\n <div class=\"notification\">\n <div class=\"notification__icon\"><slot name=\"icon\"></slot></div>\n <div class=\"notification__inner\"><div class=\"notification__text\"><slot></slot></div>${buttons.length ? `<div class=\"notification__btns\"><slot name=\"btns\"></slot></div>` : ''}</div>\n ${this.hasAttribute('data-dismiss') ? `<div class=\"notification__dismiss\"><button data-dismiss-button>Dismiss</button></div>` : ''}\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n // insert extra CSS\n if (!document.getElementById('notificationHolder'))\n document.head.insertAdjacentHTML('beforeend', `<style id=\"notificationHolder\">${loadExtraCSS}</style>`);\n }\n connectedCallback() {\n const dismissBtn = this.shadowRoot.querySelector('[data-dismiss-button]');\n const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : 'white';\n if (this.hasAttribute('data-type'))\n this.classList.add(`bg-${statusBG}`);\n else {\n this.classList.add(`colour-${statusBG}`);\n }\n const wrapper = this;\n if (!this.querySelector('i')) {\n switch (statusBG) {\n case 'danger':\n this.innerHTML += '<i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n case 'warning':\n this.innerHTML += '<i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n case 'success':\n this.innerHTML += '<i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\" slot=\"icon\"></i>';\n break;\n default:\n this.innerHTML += '<i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\" slot=\"icon\"></i>';\n }\n }\n setupNotification(wrapper);\n if (dismissBtn) {\n dismissBtn.addEventListener('click', function (e) {\n closeNotification(wrapper);\n }, false);\n }\n }\n}\nexport default iamNotification;\n"],"names":["setupNotification","element","holder","e","closeNotification","timeOut","timer","Timer","event","callback","delay","timerId","start","remaining","iamNotification","assetLocation","coreCSS","buttons","button","index","template","dismissBtn","statusBG","wrapper"],"mappings":"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"}

package/assets/js/components/pagination/pagination.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta2
   * Copyright 2022-2023 iamproperty
   */class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const i=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",t=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${i}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
     <style>

package/assets/js/components/slider/slider.component.js ADDED Viewed

@@ -0,0 +1,143 @@
+// @ts-nocheck
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    "event": "customElementRegistered",
+    "element": "Slider"
+});
+class iamSlider extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+        const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+        const loadCSS = `@import "${assetLocation}/css/components/slider.css";`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    </style>
+    <div class="row">
+      <div class="col min pe-2"></div>
+      <div class="col sliders">
+      </div>
+      <div class="col max ps-2"></div>
+    </div>
+    <div class="input__wrapper"><slot></slot><span>Minimum</span><span>Maximum</span></div>
+    `;
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+    connectedCallback() {
+        const slider = this;
+        const minElement = this.shadowRoot.querySelector('.min');
+        const maxElement = this.shadowRoot.querySelector('.max');
+        const slidersHolder = this.shadowRoot.querySelector('.sliders');
+        let inputs = this.querySelectorAll('input');
+        const inputWrapper = this.shadowRoot.querySelector('.input__wrapper');
+        const label = this.closest('label');
+        let stepperInterval, stepperEvent = "mouseup", stepperStart = "mousedown";
+        if ("ontouchstart" in document.documentElement) {
+            stepperEvent = "touchend";
+            stepperStart = "touchstart";
+        }
+        let stepperFunction = function (input, eventType) {
+            let value = input.value;
+            let min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');
+            let max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');
+            if (input.classList.contains('is-last') && !input.classList.contains('is-first')) {
+                let percent = ((value / (max - min)) * 100);
+                slider.style.setProperty('--percent', percent + "%");
+                if (parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)) {
+                    slider.shadowRoot.querySelector('.is-first').value = input.value;
+                    slider.querySelector('.is-first').value = input.value;
+                    slider.style.setProperty('--start-percent', percent + "%");
+                }
+            }
+            else if (input.classList.contains('is-first') && !input.classList.contains('is-last')) {
+                let percent = ((value / (max - min)) * 100);
+                slider.style.setProperty('--start-percent', percent + "%");
+                if (parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)) {
+                    slider.shadowRoot.querySelector('.is-last').value = input.value;
+                    slider.querySelector('.is-last').value = input.value;
+                    slider.style.setProperty('--percent', percent + "%");
+                }
+            }
+            else {
+                let percent = ((value / (max - min)) * 100).toFixed(2);
+                slider.style.setProperty('--percent', percent + "%");
+            }
+        };
+        // Create sliders
+        Array.from(inputs).forEach((input, index) => {
+            let rangeInput = input.cloneNode(true);
+            input.setAttribute('type', 'number');
+            rangeInput.setAttribute('type', 'range');
+            if (index == 0) {
+                input.classList.add('is-first');
+                rangeInput.classList.add('is-first');
+                minElement.innerHTML = input.getAttribute('min');
+                maxElement.innerHTML = input.getAttribute('max');
+                slidersHolder.appendChild(rangeInput);
+            }
+            if (index == inputs.length - 1) {
+                input.classList.add('is-last');
+                rangeInput.classList.add('is-last');
+                slidersHolder.appendChild(rangeInput);
+            }
+            if (index > 1) {
+                input.remove();
+            }
+        });
+        inputs = this.querySelectorAll('input');
+        inputWrapper.setAttribute('data-elements', inputs.length);
+        const sliders = this.shadowRoot.querySelectorAll('input');
+        Array.from(inputs).forEach((input, index) => {
+            input.addEventListener('keyup', function (event) {
+                sliders[index].value = input.value;
+                stepperFunction(sliders[index]);
+            });
+            input.addEventListener('keydown', function (event) {
+                sliders[index].value = input.value;
+                stepperFunction(sliders[index]);
+            });
+            input.addEventListener('change', function (event) {
+                sliders[index].value = input.value;
+                stepperFunction(sliders[index]);
+            });
+        });
+        Array.from(sliders).forEach((input, index) => {
+            stepperFunction(input, 'start');
+            input.addEventListener(stepperStart, function (event) {
+                clearInterval(stepperInterval);
+                stepperInterval = setInterval(function () {
+                    stepperFunction(input, 'drag');
+                    inputs[index].value = input.value;
+                }, 10);
+            });
+            input.addEventListener(stepperEvent, function (event) {
+                clearInterval(stepperInterval);
+            });
+            input.addEventListener('change', function (event) {
+                clearInterval(stepperInterval);
+                stepperFunction(input, 'click');
+                inputs[index].value = input.value;
+            });
+        });
+        // Move focus to slider when clicking on label
+        label.addEventListener('click', function (event) {
+            event.preventDefault();
+            if (this === event.target) {
+                /* click was on label */
+                slider.shadowRoot.querySelector('input').focus();
+            }
+            else {
+                /* click was on input */
+                event.stopPropagation();
+                return false;
+            }
+        });
+    } // Connected callback
+}
+export default iamSlider;

package/assets/js/components/table/table.component.js CHANGED Viewed

@@ -7,7 +7,7 @@ class iamTable extends HTMLElement {
         const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
         const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
         const loadCSS = `@import "${assetLocation}/css/components/table.css";`;
-        const loadExtraCSS = `@import "${assetLocation}/css/components/table.extras.css";`;
+        const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
     <style>