@iamproperty/components 5.0.0 → 5.1.0-beta10

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

@@ -1,16 +1,17 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta10
   * Copyright 2022-2023 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Card"});class h extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.querySelector('[class*="fa-"]')&&this.classList.add("card--has-icon");let e=this.classList.toString();const a=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"):`${a}/css/core.min.css`,t=document.createElement("template");t.innerHTML=`
     <style>
     @import "${r}";
-    .card{--card-icon-right: 1rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);min-height:100%;width:100%;text-align:left;display:block;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:var(--contrast-outline-width, 0px) solid var(--colour-primary);outline-offset:-1px}.card.border-0{box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__body{position:relative;padding:var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);z-index:-1}.card:before,.card:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}.card:after{background:var(--colour-primary-theme);mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}.card:is(:hover,:focus,.hover){--card-icon-right: 0.5rem;outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card:not([class*=colour-]):is(:hover,:focus,.hover):before{background:var(--colour-primary-theme)}.card:not([class*=colour-]):is(:hover,:focus,.hover):after{background:#fff}.card:is(:active,.active){--card-icon-right: 0.5rem;outline:none}.card:is(:active,.active):before{background:var(--colour-warning)}.card:is(:active,.active):after{background:var(--colour-primary)}.card:is(:active){background:#fcfcfc}.card span{display:block;font-weight:bold;padding-top:1.5rem;font-size:1rem}.card:has(.card__illustration) .card__body{align-items:center;display:flex}.card:has(.card__illustration) .card__body .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card:has(.card__illustration) .card__body .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;font-weight:400 !important;vertical-align:middle !important}::slotted(span){display:block !important;font-weight:normal !important;padding-top:1.5rem !important;font-size:1rem !important}.card[class*=colour-],.card--filter{border-left:0.75rem solid var(--colour, var(--colour-primary))}.card--filter{--top-padding: 1.5rem;--right-padding: 1rem;--bottom-padding: 1.5rem;--left-padding: 1rem}.card--filter:has(.card__total) .card__body{align-items:center;display:flex}.card--filter:before,.card--filter:after{display:none}.card--filter:is(:hover,:focus,.hover){outline:none}.card--filter:is(:hover,:focus,.hover) .card__body{background:#eee}.card--filter:is(:checked,.checked,:active,.active){outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--filter:is(:checked,.checked,:active,.active) .card__body{background:none}.card--filter.card--has-icon{--bottom-padding: 1rem;border:none}.card--filter .icon{font-size:1.125rem !important;height:1.125rem !important;margin:0 0 .5rem 0 !important;font-weight:400 !important;display:block !important}.card--filter .card__total{font-size:3rem;line-height:3rem;padding-right:1rem}@media screen and (prefers-color-scheme: dark){.card--filter .card__body{background:none !important}.card--filter:is(:hover,:focus,.hover,:active,.active):not(:checked,.checked){outline:2px solid var(--colour, var(--colour-primary)) !important;outline-offset:-2px}}.card--filter ::slotted(i){display:block !important;font-size:1.125rem !important;margin:0 0 .5rem 0 !important}.card:has(.card__head) .card__head{padding-bottom:0;padding-top:27%;position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card:has(.card__head) .card__head>img{position:absolute;top:0;left:0;width:102%;height:102%;object-fit:cover}.card.card--lg-image:has(.card__head) .card__head{padding-top:55%}.card:has(.card__footer):after{display:none}.card:has(.card__footer) .card__footer{position:relative;background:#fff;padding:var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);z-index:-1;display:block}:host([data-selected]) .card:before,:host([data-selected]) .card:after{display:none !important}/*# sourceMappingURL=assets/css/components/card.css.map */
+    .card{--card-icon-right: 1rem;box-shadow:var(--card-box-shadow);border-radius:var(--card-border-radius);position:relative;font-weight:bold;font-size:1.125rem;line-height:1.5rem;color:var(--colour-primary);min-height:100%;width:100%;text-align:left;display:block;overflow:hidden;z-index:0;background:var(--colour-canvas-2);outline:2px solid var(--colour-canvas-2);outline-offset:-2px}.card.border-0{box-shadow:none;--card-left-padding: 0rem;outline-offset:1px !important}.card__body{position:relative;padding:var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);z-index:-1}.card:before,.card:after{content:"";position:absolute;right:var(--card-icon-right);bottom:var(--card-bottom-padding);height:1.5rem;width:1.5rem;background:var(--colour-warning);border-radius:50%}.card:after{background:var(--colour-primary-theme);mask-image:var(--icon-arrow);mask-size:50%;mask-repeat:no-repeat;mask-position:50% 50%;-webkit-mask-image:var(--icon-arrow);-webkit-mask-size:50%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;z-index:2}.card:is(:hover,:focus,.hover){--card-icon-right: 0.5rem;outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card:not([class*=colour-]):is(:hover,:focus,.hover):before{background:var(--colour-primary-theme)}.card:not([class*=colour-]):is(:hover,:focus,.hover):after{background:#fff}.card:is(:active,.active){--card-icon-right: 0.5rem;outline:none}.card:is(:active,.active):before{background:var(--colour-warning)}.card:is(:active,.active):after{background:var(--colour-primary)}.card:is(:active){background:#fcfcfc}.card span{display:block;font-weight:bold;padding-top:1.5rem;font-size:1rem}.card:has(.card__illustration) .card__body{align-items:center;display:flex}.card:has(.card__illustration) .card__body .card__illustration{height:4rem;width:4rem;margin-right:1.5rem;margin-top:-1.25rem;margin-bottom:-1.25rem;position:relative}.card:has(.card__illustration) .card__body .card__illustration img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}::slotted(i){font-size:1.5rem !important;margin:-3px var(--card-icon-right) 0 0 !important;font-weight:400 !important;vertical-align:middle !important}::slotted(span:not(.badge)){display:block !important;font-weight:normal !important;padding-top:1.5rem !important;font-size:1rem !important}.card__badges{position:absolute;top:0;right:.25rem;padding:.25rem;z-index:9;text-align:right;width:1}.card__head .card__badges{top:auto;bottom:0;text-align:left;left:.25rem;right:auto}.card[class*=colour-],.card--filter{border-left:0.75rem solid var(--colour, var(--colour-primary))}.card--filter{--top-padding: 1.5rem;--right-padding: 1rem;--bottom-padding: 1.5rem;--left-padding: 1rem}.card--filter:has(.card__total) .card__body{align-items:center;display:flex}.card--filter:before,.card--filter:after{display:none}.card--filter:is(:hover,:focus,.hover){outline:none}.card--filter:is(:hover,:focus,.hover) .card__body{background:#eee}.card--filter:is(:checked,.checked,:active,.active){outline:2px solid var(--colour, var(--colour-primary));outline-offset:-2px}.card--filter:is(:checked,.checked,:active,.active) .card__body{background:none}.card--filter.card--has-icon{--bottom-padding: 1rem;border:none}.card--filter .icon{font-size:1.125rem !important;height:1.125rem !important;margin:0 0 .5rem 0 !important;font-weight:400 !important;display:block !important}.card--filter .card__total{font-size:3rem;line-height:3rem;padding-right:1rem}@media screen and (prefers-color-scheme: dark){.card--filter .card__body{background:none !important}.card--filter:is(:hover,:focus,.hover,:active,.active):not(:checked,.checked){outline:2px solid var(--colour, var(--colour-primary)) !important;outline-offset:-2px}}.card--filter ::slotted(i){display:block !important;font-size:1.125rem !important;margin:0 0 .5rem 0 !important}.card:has(.card__head) .card__head{padding-bottom:0;padding-top:27%;position:relative;overflow:hidden;background:rgba(0,0,0,.1);z-index:-1}.card:has(.card__head) .card__head>img{position:absolute;top:0;left:0;width:102%;height:102%;object-fit:cover}.card.card--lg-image:has(.card__head) .card__head{padding-top:55%}.card:has(.card__footer):after{display:none}.card:has(.card__footer) .card__footer{position:relative;background:#fff;padding:var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);z-index:-1;display:block}:host([data-selected]) .card:before,:host([data-selected]) .card:after{display:none !important}:host(.card--flag){position:relative}:host(.card--flag):after{content:"\uF024";font-family:"Font Awesome 6 Pro";position:absolute;top:1rem;right:1rem;font-size:1rem;line-height:1;height:1rem;width:1rem;display:inline-block;font-weight:normal;color:var(--colour, var(--colour-primary))}/*# sourceMappingURL=assets/css/components/card.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
     <div class="card ${e}" tabindex="0" role="button">
-      ${this.hasAttribute("data-image")?`<div class="card__head"><img src="${this.getAttribute("data-image")}" alt="" loading="lazy" /></div>`:""}
+      ${this.hasAttribute("data-image")?`<div class="card__head"><img src="${this.getAttribute("data-image")}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>`:""}
       <div class="card__body">
+      ${this.hasAttribute("data-image")?"":'<div class="card__badges"><slot name="badges"></slot></div>'}
       ${this.classList.contains("card--filter")&&this.hasAttribute("data-total")?`<div class="card__total">${this.getAttribute("data-total")}</div>`:""}
       ${this.hasAttribute("data-illustration")?`<div class="card__illustration"><img src="${this.getAttribute("data-illustration")}" alt="" loading="lazy" /></div>`:""}
         <slot></slot>
@@ -19,5 +20,6 @@
       <slot name="checkbox"></slot>
       ${this.hasAttribute("data-cta")?`<div class="card__footer"><span class="link">${this.getAttribute("data-cta")}</span></div>`:""}
     </div>
-    `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}connectedCallback(){this.classList.add("loaded");const e=this.parentNode.closest("a, button, label"),a=this.shadowRoot.querySelector(".card");e.setAttribute("tabindex","-1"),e.matches("label[for]")&&(document.getElementById(e.getAttribute("for")).checked?a.classList.add("checked"):a.classList.remove("checked")),this.addEventListener("click",r=>{let t=new Event("click");a.dispatchEvent(t)}),a.addEventListener("click",r=>{if(e.matches("label[for]")){r.stopPropagation(),r.preventDefault();const t=document.getElementById(e.getAttribute("for")),i=t.getAttribute("name"),o=t.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"][type="radio"]:not([id="${o}"])`)).forEach((d,n)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),t.checked?a.classList.add("checked"):a.classList.remove("checked")}}),this.addEventListener("inactive",r=>{a.classList.remove("checked")}),a.addEventListener("keydown",r=>{switch(r.keyCode){case 32:case 13:if(e.matches("label[for]")){r.stopPropagation(),r.preventDefault();const t=document.getElementById(e.getAttribute("for")),i=t.getAttribute("name"),o=t.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"]:not([id="${o}"])`)).forEach((d,n)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),t.checked?a.classList.add("checked"):a.classList.remove("checked")}else e.click();break}})}static get observedAttributes(){return["data-total","class"]}attributeChangedCallback(e,a,r){switch(e){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=r);break}case"class":{let t=this.classList.toString();this.querySelector('[class*="fa-"]')&&(t+=" card--has-icon"),this.shadowRoot.querySelector(".card").setAttribute("class",`card ${t}`);break}}}}export{h as default};
+    `,this.shadowRoot.appendChild(t.content.cloneNode(!0)),document.getElementById("cardGlobal")||document.head.insertAdjacentHTML("beforeend",`<style id="cardGlobal">@supports not selector(:has(*)){iam-card{margin-bottom:2rem;display:block}}iam-card>div:has([type=checkbox]){display:contents}iam-card>div:has([type=checkbox])>input:is([type=radio],[type=checkbox])+label{position:absolute !important;top:.5rem;right:.5rem;width:2rem;padding-left:2rem;margin:0.25rem 0.5rem !important;height:2.5rem;overflow:hidden}[data-select-container]:has([type=checkbox]:checked) iam-card>div:has([type=checkbox])>input:is([type=radio],[type=checkbox]){width:100%;height:100%;max-height:100%;max-width:100%;cursor:pointer;pointer-events:all;inset:0;border-radius:0;z-index:10}/*# sourceMappingURL=assets/css/components/card.global.css.map */
+</style>`)}connectedCallback(){this.classList.add("loaded");const e=this.parentNode.closest("a, button, label"),a=this.shadowRoot.querySelector(".card");e.setAttribute("tabindex","-1"),e.matches("label[for]")&&(document.getElementById(e.getAttribute("for")).checked?a.classList.add("checked"):a.classList.remove("checked")),this.addEventListener("click",r=>{let t=new Event("click");a.dispatchEvent(t)}),a.addEventListener("click",r=>{if(e.matches("label[for]")){r.stopPropagation(),r.preventDefault();const t=document.getElementById(e.getAttribute("for")),i=t.getAttribute("name"),o=t.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"][type="radio"]:not([id="${o}"])`)).forEach((d,n)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),t.checked?a.classList.add("checked"):a.classList.remove("checked")}}),this.addEventListener("inactive",r=>{a.classList.remove("checked")}),a.addEventListener("keydown",r=>{switch(r.keyCode){case 32:case 13:if(e.matches("label[for]")){r.stopPropagation(),r.preventDefault();const t=document.getElementById(e.getAttribute("for")),i=t.getAttribute("name"),o=t.getAttribute("id");Array.from(document.querySelectorAll(`[name="${i}"]:not([id="${o}"])`)).forEach((d,n)=>{document.querySelector(`[for="${d.getAttribute("id")}"] iam-card`).dispatchEvent(new Event("inactive"))}),e.click(),t.checked?a.classList.add("checked"):a.classList.remove("checked")}else e.click();break}})}static get observedAttributes(){return["data-total","class"]}attributeChangedCallback(e,a,r){switch(e){case"data-total":{this.shadowRoot.querySelector(".card__total")&&(this.shadowRoot.querySelector(".card__total").innerHTML=r);break}case"class":{let t=this.classList.toString();this.querySelector('[class*="fa-"]')&&(t+=" card--has-icon"),this.shadowRoot.querySelector(".card").setAttribute("class",`card ${t}`);break}}}}export{h as default};
 //# sourceMappingURL=card.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.component.min.js","sources":["card.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"Card\"\n});\nclass iamCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        if (this.querySelector('[class*=\"fa-\"]'))\n            this.classList.add('card--has-icon');\n        let classList = this.classList.toString();\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/card.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"card ${classList}\" tabindex=\"0\" role=\"button\">\n      ${this.hasAttribute('data-image') ? `<div class=\"card__head\"><img src=\"${this.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" /></div>` : ''}\n      <div class=\"card__body\">\n      ${this.classList.contains('card--filter') && this.hasAttribute('data-total') ? `<div class=\"card__total\">${this.getAttribute('data-total')}</div>` : ''}\n      ${this.hasAttribute('data-illustration') ? `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>` : ''}\n        <slot></slot>\n      </div>\n        \n      <slot name=\"checkbox\"></slot>\n      ${this.hasAttribute('data-cta') ? `<div class=\"card__footer\"><span class=\"link\">${this.getAttribute('data-cta')}</span></div>` : ''}\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('loaded');\n        // Mimic clicking the parent node so the focus and target events can be on the card\n        const parentNode = this.parentNode.closest('a, button, label');\n        const card = this.shadowRoot.querySelector('.card');\n        parentNode.setAttribute('tabindex', '-1');\n        if (parentNode.matches('label[for]')) {\n            let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;\n            if (isChecked)\n                card.classList.add('checked');\n            else\n                card.classList.remove('checked');\n        }\n        // Click event down\n        this.addEventListener('click', (event) => {\n            let clickEvent = new Event('click');\n            card.dispatchEvent(clickEvent);\n        });\n        card.addEventListener('click', (event) => {\n            if (parentNode.matches('label[for]')) {\n                event.stopPropagation();\n                event.preventDefault();\n                const input = document.getElementById(parentNode.getAttribute('for'));\n                const inputName = input.getAttribute('name');\n                const inputID = input.getAttribute('id');\n                // Mimic radio button functionality\n                const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"][type=\"radio\"]:not([id=\"${inputID}\"])`));\n                inputs.forEach((input, index) => {\n                    const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n                    otherCard.dispatchEvent(new Event('inactive'));\n                });\n                parentNode.click();\n                let isChecked = input.checked;\n                if (isChecked)\n                    card.classList.add('checked');\n                else\n                    card.classList.remove('checked');\n            }\n        });\n        this.addEventListener('inactive', (event) => {\n            card.classList.remove('checked');\n        });\n        card.addEventListener('keydown', (event) => {\n            switch (event.keyCode) {\n                case 32:\n                case 13:\n                    if (parentNode.matches('label[for]')) {\n                        event.stopPropagation();\n                        event.preventDefault();\n                        const input = document.getElementById(parentNode.getAttribute('for'));\n                        const inputName = input.getAttribute('name');\n                        const inputID = input.getAttribute('id');\n                        const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"]:not([id=\"${inputID}\"])`));\n                        inputs.forEach((input, index) => {\n                            const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n                            otherCard.dispatchEvent(new Event('inactive'));\n                        });\n                        parentNode.click();\n                        let isChecked = input.checked;\n                        if (isChecked)\n                            card.classList.add('checked');\n                        else\n                            card.classList.remove('checked');\n                    }\n                    else {\n                        parentNode.click();\n                    }\n                    break;\n                default:\n                    break;\n            }\n        });\n    }\n    static get observedAttributes() {\n        return [\"data-total\", \"class\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-total\": {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n            case \"class\": {\n                let classList = this.classList.toString();\n                if (this.querySelector('[class*=\"fa-\"]'))\n                    classList += ' card--has-icon';\n                this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);\n                break;\n            }\n        }\n    }\n}\nexport default iamCard;\n"],"names":["iamCard","classList","assetLocation","coreCSS","template","parentNode","card","event","clickEvent","input","inputName","inputID","index","attrName","oldVal","newVal"],"mappings":"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"}
+{"version":3,"file":"card.component.min.js","sources":["card.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"Card\"\n});\nclass iamCard extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        if (this.querySelector('[class*=\"fa-\"]'))\n            this.classList.add('card--has-icon');\n        let classList = this.classList.toString();\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/card.css\";`;\n        const loadExtraCSS = `@import \"${assetLocation}/css/components/card.global.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"card ${classList}\" tabindex=\"0\" role=\"button\">\n      ${this.hasAttribute('data-image') ? `<div class=\"card__head\"><img src=\"${this.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" /><div class=\"card__badges\"><slot name=\"badges\"></slot></div></div>` : ''}\n      <div class=\"card__body\">\n      ${!this.hasAttribute('data-image') ? `<div class=\"card__badges\"><slot name=\"badges\"></slot></div>` : ''}\n      ${this.classList.contains('card--filter') && this.hasAttribute('data-total') ? `<div class=\"card__total\">${this.getAttribute('data-total')}</div>` : ''}\n      ${this.hasAttribute('data-illustration') ? `<div class=\"card__illustration\"><img src=\"${this.getAttribute('data-illustration')}\" alt=\"\" loading=\"lazy\" /></div>` : ''}\n        <slot></slot>\n      </div>\n        \n      <slot name=\"checkbox\"></slot>\n      ${this.hasAttribute('data-cta') ? `<div class=\"card__footer\"><span class=\"link\">${this.getAttribute('data-cta')}</span></div>` : ''}\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n        // insert extra CSS\n        if (!document.getElementById('cardGlobal'))\n            document.head.insertAdjacentHTML('beforeend', `<style id=\"cardGlobal\">${loadExtraCSS}</style>`);\n    }\n    connectedCallback() {\n        this.classList.add('loaded');\n        // Mimic clicking the parent node so the focus and target events can be on the card\n        const parentNode = this.parentNode.closest('a, button, label');\n        const card = this.shadowRoot.querySelector('.card');\n        parentNode.setAttribute('tabindex', '-1');\n        if (parentNode.matches('label[for]')) {\n            let isChecked = document.getElementById(parentNode.getAttribute('for')).checked;\n            if (isChecked)\n                card.classList.add('checked');\n            else\n                card.classList.remove('checked');\n        }\n        // Click event down\n        this.addEventListener('click', (event) => {\n            let clickEvent = new Event('click');\n            card.dispatchEvent(clickEvent);\n        });\n        card.addEventListener('click', (event) => {\n            if (parentNode.matches('label[for]')) {\n                event.stopPropagation();\n                event.preventDefault();\n                const input = document.getElementById(parentNode.getAttribute('for'));\n                const inputName = input.getAttribute('name');\n                const inputID = input.getAttribute('id');\n                // Mimic radio button functionality\n                const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"][type=\"radio\"]:not([id=\"${inputID}\"])`));\n                inputs.forEach((input, index) => {\n                    const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n                    otherCard.dispatchEvent(new Event('inactive'));\n                });\n                parentNode.click();\n                let isChecked = input.checked;\n                if (isChecked)\n                    card.classList.add('checked');\n                else\n                    card.classList.remove('checked');\n            }\n        });\n        this.addEventListener('inactive', (event) => {\n            card.classList.remove('checked');\n        });\n        card.addEventListener('keydown', (event) => {\n            switch (event.keyCode) {\n                case 32:\n                case 13:\n                    if (parentNode.matches('label[for]')) {\n                        event.stopPropagation();\n                        event.preventDefault();\n                        const input = document.getElementById(parentNode.getAttribute('for'));\n                        const inputName = input.getAttribute('name');\n                        const inputID = input.getAttribute('id');\n                        const inputs = Array.from(document.querySelectorAll(`[name=\"${inputName}\"]:not([id=\"${inputID}\"])`));\n                        inputs.forEach((input, index) => {\n                            const otherCard = document.querySelector(`[for=\"${input.getAttribute('id')}\"] iam-card`);\n                            otherCard.dispatchEvent(new Event('inactive'));\n                        });\n                        parentNode.click();\n                        let isChecked = input.checked;\n                        if (isChecked)\n                            card.classList.add('checked');\n                        else\n                            card.classList.remove('checked');\n                    }\n                    else {\n                        parentNode.click();\n                    }\n                    break;\n                default:\n                    break;\n            }\n        });\n    }\n    static get observedAttributes() {\n        return [\"data-total\", \"class\"];\n    }\n    attributeChangedCallback(attrName, oldVal, newVal) {\n        switch (attrName) {\n            case \"data-total\": {\n                if (this.shadowRoot.querySelector('.card__total'))\n                    this.shadowRoot.querySelector('.card__total').innerHTML = newVal;\n                break;\n            }\n            case \"class\": {\n                let classList = this.classList.toString();\n                if (this.querySelector('[class*=\"fa-\"]'))\n                    classList += ' card--has-icon';\n                this.shadowRoot.querySelector('.card').setAttribute('class', `card ${classList}`);\n                break;\n            }\n        }\n    }\n}\nexport default iamCard;\n"],"names":["iamCard","classList","assetLocation","coreCSS","template","parentNode","card","event","clickEvent","input","inputName","inputID","index","attrName","oldVal","newVal"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,MACf,CAAC,EACD,MAAMA,UAAgB,WAAY,CAC9B,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAC9B,KAAK,cAAc,gBAAgB,GACnC,KAAK,UAAU,IAAI,gBAAgB,EACvC,IAAIC,EAAY,KAAK,UAAU,SAAQ,EACvC,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,qBAGzGE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA,uBAErDF;AAAA,QACf,KAAK,aAAa,YAAY,EAAI,qCAAqC,KAAK,aAAa,YAAY,+FAAiG;AAAA;AAAA,QAErM,KAAK,aAAa,YAAY,EAAoE,GAAhE;AAAA,QACnC,KAAK,UAAU,SAAS,cAAc,GAAK,KAAK,aAAa,YAAY,EAAI,4BAA4B,KAAK,aAAa,YAAY,UAAY;AAAA,QACnJ,KAAK,aAAa,mBAAmB,EAAI,6CAA6C,KAAK,aAAa,mBAAmB,oCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,QAKjK,KAAK,aAAa,UAAU,EAAI,gDAAgD,KAAK,aAAa,UAAU,iBAAmB;AAAA;AAAA,MAG/H,KAAK,WAAW,YAAYG,EAAS,QAAQ,UAAU,EAAI,CAAC,EAEvD,SAAS,eAAe,YAAY,GACrC,SAAS,KAAK,mBAAmB,YAAa;AAAA,SAAgD,CACrG,CACD,mBAAoB,CAChB,KAAK,UAAU,IAAI,QAAQ,EAE3B,MAAMC,EAAa,KAAK,WAAW,QAAQ,kBAAkB,EACvDC,EAAO,KAAK,WAAW,cAAc,OAAO,EAClDD,EAAW,aAAa,WAAY,IAAI,EACpCA,EAAW,QAAQ,YAAY,IACf,SAAS,eAAeA,EAAW,aAAa,KAAK,CAAC,EAAE,QAEpEC,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,GAGvC,KAAK,iBAAiB,QAAUC,GAAU,CACtC,IAAIC,EAAa,IAAI,MAAM,OAAO,EAClCF,EAAK,cAAcE,CAAU,CACzC,CAAS,EACDF,EAAK,iBAAiB,QAAUC,GAAU,CACtC,GAAIF,EAAW,QAAQ,YAAY,EAAG,CAClCE,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,MAAME,EAAQ,SAAS,eAAeJ,EAAW,aAAa,KAAK,CAAC,EAC9DK,EAAYD,EAAM,aAAa,MAAM,EACrCE,EAAUF,EAAM,aAAa,IAAI,EAExB,MAAM,KAAK,SAAS,iBAAiB,UAAUC,8BAAsCC,MAAY,CAAC,EAC1G,QAAQ,CAACF,EAAOG,IAAU,CACX,SAAS,cAAc,SAASH,EAAM,aAAa,IAAI,cAAc,EAC7E,cAAc,IAAI,MAAM,UAAU,CAAC,CACjE,CAAiB,EACDJ,EAAW,MAAK,EACAI,EAAM,QAElBH,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,EAEnD,CAAS,EACD,KAAK,iBAAiB,WAAaC,GAAU,CACzCD,EAAK,UAAU,OAAO,SAAS,CAC3C,CAAS,EACDA,EAAK,iBAAiB,UAAYC,GAAU,CACxC,OAAQA,EAAM,QAAO,CACjB,IAAK,IACL,IAAK,IACD,GAAIF,EAAW,QAAQ,YAAY,EAAG,CAClCE,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpB,MAAME,EAAQ,SAAS,eAAeJ,EAAW,aAAa,KAAK,CAAC,EAC9DK,EAAYD,EAAM,aAAa,MAAM,EACrCE,EAAUF,EAAM,aAAa,IAAI,EACxB,MAAM,KAAK,SAAS,iBAAiB,UAAUC,gBAAwBC,MAAY,CAAC,EAC5F,QAAQ,CAACF,EAAOG,IAAU,CACX,SAAS,cAAc,SAASH,EAAM,aAAa,IAAI,cAAc,EAC7E,cAAc,IAAI,MAAM,UAAU,CAAC,CACzE,CAAyB,EACDJ,EAAW,MAAK,EACAI,EAAM,QAElBH,EAAK,UAAU,IAAI,SAAS,EAE5BA,EAAK,UAAU,OAAO,SAAS,OAGnCD,EAAW,MAAK,EAEpB,KAGP,CACb,CAAS,CACJ,CACD,WAAW,oBAAqB,CAC5B,MAAO,CAAC,aAAc,OAAO,CAChC,CACD,yBAAyBQ,EAAUC,EAAQC,EAAQ,CAC/C,OAAQF,EAAQ,CACZ,IAAK,aAAc,CACX,KAAK,WAAW,cAAc,cAAc,IAC5C,KAAK,WAAW,cAAc,cAAc,EAAE,UAAYE,GAC9D,KACH,CACD,IAAK,QAAS,CACV,IAAId,EAAY,KAAK,UAAU,SAAQ,EACnC,KAAK,cAAc,gBAAgB,IACnCA,GAAa,mBACjB,KAAK,WAAW,cAAc,OAAO,EAAE,aAAa,QAAS,QAAQA,GAAW,EAChF,KACH,CACJ,CACJ,CACL"}

package/assets/js/components/carousel/carousel.component.js

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import carousel from "../../modules/carousel.js";
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    "event": "customElementRegistered",
+    "element": "carousel"
+});
+class iamCarousel 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/carousel.css";`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="carousel" :id="'carousel'+id">
+      <div class="carousel__wrapper">
+        <div class="carousel__inner">
+          
+          <slot></slot>
+        </div>
+ 
+        <div class="carousel__controls">
+          
+        </div>
+
+        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
+        <button class="btn btn-next" data-go="2">Next</button>
+
+      </div>
+    </div>
+    `;
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+    connectedCallback() {
+        const carouselElement = this.shadowRoot.querySelector('.carousel');
+        const row = this.querySelector('.row');
+        const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+        let itemCount = this.querySelectorAll(':scope > .row > .col').length;
+        carouselElement.setAttribute('data-row-class', row.className);
+        if (this.classList.contains('hide-btns'))
+            carouselElement.classList.add('hide-btns');
+        if (this.classList.contains('hide-controls'))
+            carouselElement.classList.add('hide-controls');
+        // populate the pips
+        let pips = "";
+        for (let i = 1; i <= itemCount; i++) {
+            pips += `<button class="control-${i}" data-slide="${i}" ${i == 1 ? "aria-current" : ""}>Slide ${i}</button>`;
+        }
+        carouselControls.innerHTML = pips;
+        carousel(carouselElement, row);
+    }
+}
+export default iamCarousel;

package/assets/js/components/collapsible-side/collapsible-side.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta10
   * Copyright 2022-2023 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"collapsible side menu"});class s 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`,n=document.createElement("template");n.innerHTML=`
     <style class="styles">

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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta10
   * 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>
     @import "${r}";
-    .file-upload{max-width:25rem !important;padding-bottom:1rem}.file-upload .drop-area>input{display:none}.file-upload .file-upload__title{margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);line-height:2rem;color:var(--colour-heading);clear:both;display:block;padding-bottom:2rem;font-size:1.5rem;line-height:2rem;padding-bottom:2rem;max-width:var(--content-max-width)}.file-upload .helper-text{max-width:16.875rem}.files span{display:block;width:100%;padding:var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);border:2px solid var(--colour-primary-theme);appearance:none;border-radius:0.5rem;margin-bottom:1rem;color:var(--colour-primary);border-color:#d8d8d8;background:#d8d8d8;max-width:25rem !important;position:relative}@media screen and (prefers-color-scheme: dark){.files span{background:var(--colour-canvas-2);border-color:var(--colour-canvas-2);color:var(--colour-white)}}@media(forced-colors: active){.files span{padding-right:5rem}.files span button{padding:0;width:3.7rem !important;text-indent:0% !important}.files span button:after{display:none !important}}.files span button{position:absolute;top:calc(50% - 0.5625rem);right:0.875rem;z-index:var(--index-floating);text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0)}.files span 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%}:host(.fileupload--drag-drop) .file-upload{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .helper-text{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .drop-area>input{display:block;min-height:12.5rem;border:2px dashed var(--colour-primary-theme);color:rgba(0,0,0,0);position:relative;padding:1.5rem 2rem 1.5rem 2rem;user-select:none;max-width:100%;min-width:100%}:host(.fileupload--drag-drop) .file-upload .drop-area>input.focus{border:2px solid var(--colour-info)}:host(.fileupload--drag-drop) .file-upload .drop-area{position:relative}:host(.fileupload--drag-drop) .file-upload .drop-area::before{content:"Drag and drop files here or click to upload";position:absolute;inset:1.5rem 2rem 1.5rem 2rem;z-index:1;pointer-events:none}:host(.fileupload--drag-drop) .file-upload ::file-selector-button{position:absolute;inset:0;opacity:0}/*# sourceMappingURL=assets/css/components/fileupload.css.map */
+    .file-upload{max-width:25rem !important;padding-bottom:1rem}.file-upload .drop-area>input{display:none}.file-upload .file-upload__title{margin-top:0;margin-bottom:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);line-height:2rem;color:var(--colour-heading);clear:both;display:block;padding-bottom:2rem;font-size:1.5rem;line-height:2rem;padding-bottom:2rem;max-width:var(--content-max-width)}.file-upload .helper-text{max-width:16.875rem}.files span{display:block;width:100%;padding:var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);font-size:var(--input-fs, 1rem);line-height:var(--input-lh, 1.25rem);border:2px solid var(--colour-primary-theme);appearance:none;border-radius:0.5rem;margin-bottom:1rem;color:var(--colour-primary);border-color:#d8d8d8;background:#d8d8d8;max-width:25rem !important;position:relative}@media screen and (prefers-color-scheme: dark){.files span{background:var(--colour-canvas-2);border-color:var(--colour-canvas-2);color:var(--colour-body)}}@media(forced-colors: active){.files span{padding-right:5rem}.files span button{padding:0;width:3.7rem !important;text-indent:0% !important}.files span button:after{display:none !important}}.files span button{position:absolute;top:calc(50% - 0.5625rem);right:0.875rem;z-index:var(--index-floating);text-indent:300%;overflow:hidden;border:none;height:1.125rem;width:1.125rem;background:rgba(0,0,0,0)}.files span 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%}:host(.fileupload--drag-drop) .file-upload{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .helper-text{max-width:50rem !important}:host(.fileupload--drag-drop) .file-upload .drop-area>input{display:block;min-height:12.5rem;border:2px dashed var(--colour-primary-theme);color:rgba(0,0,0,0);position:relative;padding:1.5rem 2rem 1.5rem 2rem;user-select:none;max-width:100%;min-width:100%}:host(.fileupload--drag-drop) .file-upload .drop-area>input.focus{border:2px solid var(--colour-info)}:host(.fileupload--drag-drop) .file-upload .drop-area{position:relative}:host(.fileupload--drag-drop) .file-upload .drop-area::before{content:"Drag and drop files here or click to upload";position:absolute;inset:1.5rem 2rem 1.5rem 2rem;z-index:1;pointer-events:none}:host(.fileupload--drag-drop) .file-upload ::file-selector-button{position:absolute;inset:0;opacity:0}/*# sourceMappingURL=assets/css/components/fileupload.css.map */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta10
   * 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.js

@@ -20,28 +20,22 @@ class iamHeader extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="header-banner">
-      <div class="container" part="container">
-        <slot name="breadcrumb"></slot>
-        <div class="header-banner__inner">
-        <slot></slot>
-        </div>
-      </div>
       <picture>
-        <!-- Actual image only loaded on desktops -->
-        <source srcset="" media="(min-width: 62em)">
-        <!-- Placeholder image -->
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
       </picture>
+      <div class="container">
+        <slot></slot>
+      </div>
     </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }
     connectedCallback() {
-        this.classList.add('loaded');
+        this.classList.add('bg-primary');
         const picture = this.shadowRoot.querySelector('picture');
-        const source = this.shadowRoot.querySelector('picture source');
+        const source = this.shadowRoot.querySelector('picture img');
         if (this.hasAttribute('image'))
-            source.setAttribute('srcset', this.getAttribute('image'));
+            source.setAttribute('src', this.getAttribute('image'));
         else
             picture.remove();
     }

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

@@ -1,26 +1,20 @@
 /*!
-  * iamKey v5.0.0
+  * iamKey v5.1.0-beta10
   * 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=`
+  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class o 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>
-    @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 */
+    @import "${e}";
+    :host{padding-top:0 !important;margin-bottom:2rem;background-color:rgba(0,0,0,0) !important}.header-banner{padding-top:2.75rem;max-width:120rem;min-height:25rem;margin-inline:auto;display:block;position:relative;height:auto}@media screen and (min-width: 62em){.header-banner{padding-top:5.25rem}}.header-banner>picture{display:block;position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;overflow:hidden;min-height:25rem;max-height:25rem}.header-banner>picture:after{content:"";display:block;position:absolute;z-index:-1;inset:0;background:linear-gradient(300deg, rgb(30, 190, 230) 0%, rgb(0, 49, 60) 100%);opacity:.85}.header-banner>picture img{display:block;position:absolute;z-index:-2;inset:0;object-fit:cover;object-position:50% 50%;width:100%;height:100%}::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>
     <div class="header-banner">
-      <div class="container" part="container">
-        <slot name="breadcrumb"></slot>
-        <div class="header-banner__inner">
-        <slot></slot>
-        </div>
-      </div>
       <picture>
-        <!-- Actual image only loaded on desktops -->
-        <source srcset="" media="(min-width: 62em)">
-        <!-- Placeholder image -->
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
       </picture>
+      <div class="container">
+        <slot></slot>
+      </div>
     </div>
-    `,this.shadowRoot.appendChild(o.content.cloneNode(!0))}connectedCallback(){this.classList.add("loaded");const e=this.shadowRoot.querySelector("picture"),r=this.shadowRoot.querySelector("picture source");this.hasAttribute("image")?r.setAttribute("srcset",this.getAttribute("image")):e.remove()}}export{t as default};
+    `,this.shadowRoot.appendChild(a.content.cloneNode(!0))}connectedCallback(){this.classList.add("bg-primary");const t=this.shadowRoot.querySelector("picture"),e=this.shadowRoot.querySelector("picture img");this.hasAttribute("image")?e.setAttribute("src",this.getAttribute("image")):t.remove()}}export{o as default};
 //# sourceMappingURL=header.component.min.js.map

package/assets/js/components/header/header.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.component.min.js","sources":["header.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"header\"\n});\nclass iamHeader 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/header.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"header-banner\">\n      <div class=\"container\" part=\"container\">\n        <slot name=\"breadcrumb\"></slot>\n        <div class=\"header-banner__inner\">\n        <slot></slot>\n        </div>\n      </div>\n      <picture>\n        <!-- Actual image only loaded on desktops -->\n        <source srcset=\"\" media=\"(min-width: 62em)\">\n        <!-- Placeholder image -->\n        <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\" />\n      </picture>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('loaded');\n        const picture = this.shadowRoot.querySelector('picture');\n        const source = this.shadowRoot.querySelector('picture source');\n        if (this.hasAttribute('image'))\n            source.setAttribute('srcset', this.getAttribute('image'));\n        else\n            picture.remove();\n    }\n}\nexport default iamHeader;\n"],"names":["iamHeader","assetLocation","coreCSS","template","picture","source"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,QACf,CAAC,EACD,MAAMA,UAAkB,WAAY,CAChC,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,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAiBpE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,KAAK,UAAU,IAAI,QAAQ,EAC3B,MAAMC,EAAU,KAAK,WAAW,cAAc,SAAS,EACjDC,EAAS,KAAK,WAAW,cAAc,gBAAgB,EACzD,KAAK,aAAa,OAAO,EACzBA,EAAO,aAAa,SAAU,KAAK,aAAa,OAAO,CAAC,EAExDD,EAAQ,OAAM,CACrB,CACL"}
+{"version":3,"file":"header.component.min.js","sources":["header.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"header\"\n});\nclass iamHeader 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/header.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n    </style>\n    <div class=\"header-banner\">\n      <picture>\n        <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\" />\n      </picture>\n      <div class=\"container\">\n        <slot></slot>\n      </div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('bg-primary');\n        const picture = this.shadowRoot.querySelector('picture');\n        const source = this.shadowRoot.querySelector('picture img');\n        if (this.hasAttribute('image'))\n            source.setAttribute('src', this.getAttribute('image'));\n        else\n            picture.remove();\n    }\n}\nexport default iamHeader;\n"],"names":["iamHeader","assetLocation","coreCSS","template","picture","source"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,QACf,CAAC,EACD,MAAMA,UAAkB,WAAY,CAChC,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,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWpE,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB,KAAK,UAAU,IAAI,YAAY,EAC/B,MAAMC,EAAU,KAAK,WAAW,cAAc,SAAS,EACjDC,EAAS,KAAK,WAAW,cAAc,aAAa,EACtD,KAAK,aAAa,OAAO,EACzBA,EAAO,aAAa,MAAO,KAAK,aAAa,OAAO,CAAC,EAErDD,EAAQ,OAAM,CACrB,CACL"}

package/assets/js/components/marketing/marketing.component.js

@@ -0,0 +1,37 @@
+// @ts-nocheck
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+    "event": "customElementRegistered",
+    "element": "Marketing"
+});
+class iamMarketing 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/marketing.css";`;
+        const template = document.createElement('template');
+        template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <div class="marketing">
+      
+      <slot></slot>
+    </div>
+    `;
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+    connectedCallback() {
+        this.classList.add('invert-colours');
+        if (this.hasAttribute('data-img')) {
+            this.shadowRoot.querySelector('.marketing').insertAdjacentHTML('afterbegin', `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`);
+        }
+    }
+}
+export default iamMarketing;

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

@@ -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">
@@ -42,10 +43,12 @@ class iamNav extends HTMLElement {
         <slot name="menus"></slot>
       </div>      
     </div>
-    <div class="lists"></div>
     <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
@@ -225,30 +228,26 @@ class iamNav extends HTMLElement {
             containerDiv.setAttribute('data-title', summary.textContent);
         });
         // Search 
-        if (this.hasAttribute('data-search')) {
+        if (this.querySelector('[slot="search"]')) {
             menu.classList.add('has-search');
             let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
             searchWrapper.classList.remove('d-none');
             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>
       <dialog id="search-dialog">
       <div class="container">
-        <form action="${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}" class="row" id="search-form">
+        <div class="row">
           <div class="col mb-0 ms-auto col-md-7">
-            <label for="search" class="visually-hidden">Search</label>
-            <button class="suffix me-0 mb-0"><i class="fa-regular fa-search"></i></button>
-            <input type="search" class="" id="search" name="search" required="" autocomplete="off" data-list="${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}" />
+            <slot name="search"></slot>
           </div>
           <div class="col d-none d-md-block mw-fit-content ms-3">
             <button class="btn btn-compact btn-secondary fa-xmark-large m-0 mb-0" type="button" id="search-close">Close search field</button>
           </div>
-        </form>
+        </div>
       </div>
       </dialog>`);
             let searchButton = this.shadowRoot.querySelector('#search-button');
             let searchClose = this.shadowRoot.querySelector('#search-close');
             let searchDialog = this.shadowRoot.querySelector('#search-dialog');
-            let searchInput = this.shadowRoot.querySelector('#search');
-            let searchForm = this.shadowRoot.querySelector('#search-form');
             if (this.hasAttribute('data-search-open')) {
                 searchDialog.setAttribute('open', 'open');
                 this.classList.add('search-open');
@@ -264,33 +263,6 @@ class iamNav extends HTMLElement {
                 this.classList.remove('search-open');
                 searchButton.removeAttribute('aria-expanded');
             });
-            // Search events
-            searchInput.addEventListener('keydown', (event) => {
-                const keyupEvent = new CustomEvent("search-keydown", { detail: { search: searchInput.value } });
-                this.dispatchEvent(keyupEvent);
-            });
-            searchInput.addEventListener('keyup', (event) => {
-                if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list'))
-                    searchInput.setAttribute("list", searchInput.getAttribute('data-list'));
-                else
-                    searchInput.removeAttribute("list");
-                const keyupEvent = new CustomEvent("search-keyup", { detail: { search: searchInput.value } });
-                this.dispatchEvent(keyupEvent);
-            });
-            searchInput.addEventListener('change', (event) => {
-                const changeEvent = new CustomEvent("search-change", { detail: { search: searchInput.value } });
-                this.dispatchEvent(changeEvent);
-            });
-            searchForm.addEventListener('submit', (event) => {
-                if (this.hasAttribute('data-prevent-search'))
-                    event.preventDefault();
-                const submitEvent = new CustomEvent("search-submit", { detail: { search: searchInput.value } });
-                this.dispatchEvent(submitEvent);
-            });
-            // Make sure any child lists are available to the search input
-            this.querySelectorAll('datalist').forEach((list) => {
-                iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend', list);
-            });
         }
     }
 }