@iamproperty/components 4.1.0-beta-2 → 4.1.0

package/assets/js/components/applied-filters/applied-filters.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"applied-filters.component.min.js","sources":["../../modules/applied-filters.js","applied-filters.component.js"],"sourcesContent":["// @ts-nocheck\nfunction createAppliedFilters(container, filters) {\n    function addFilterButton(filters, input) {\n        let shouldRemoveFilter = false;\n        let inputName = input.getAttribute('name');\n        if (inputName.includes('[]'))\n            inputName = inputName.replace('[]', `[${input.value}]`);\n        let filter = filters.querySelector(`[data-name=\"${inputName}\"]`);\n        if (filter && input.getAttribute('type') == 'checkbox')\n            shouldRemoveFilter = true;\n        let filterText = input.getAttribute('data-filter-text');\n        if (!filter) {\n            filter = document.createElement('button');\n            filters.appendChild(filter);\n        }\n        filter.setAttribute('type', 'button');\n        filter.classList.add('filter');\n        filter.setAttribute('data-name', inputName);\n        filter.innerHTML = filterText.replace('$value', input.value);\n        // If the value\n        if (!input.value || shouldRemoveFilter)\n            filter.remove();\n        // If input has an ancestor with data-filter and all of inputs in that parent have been filled in then we need to transform the filter\n        if (input.parentNode.closest('[data-filter-text]')) {\n            let parent = input.parentNode.closest('[data-filter-text]');\n            let allValuesSet = true;\n            inputName = \"\";\n            parent.querySelectorAll('input').forEach((element, index) => {\n                let name = element.getAttribute('name');\n                // create a joined inputname for the parent filter\n                inputName += `${index != 0 ? ',' : ''}${name}`;\n                if (filters.querySelector(`[data-name=\"${name}\"]`))\n                    filters.querySelector(`[data-name=\"${name}\"]`).remove();\n                if (element.value) {\n                    let childFilter = document.createElement('button');\n                    childFilter.setAttribute('type', 'button');\n                    childFilter.classList.add('filter');\n                    childFilter.setAttribute('data-name', name);\n                    childFilter.innerHTML = filterText.replace('$value', element.value);\n                    filters.appendChild(childFilter);\n                }\n                else\n                    allValuesSet = false;\n            });\n            if (filters.querySelector(`[data-name=\"${inputName}\"]`))\n                filters.querySelector(`[data-name=\"${inputName}\"]`).remove();\n            if (allValuesSet) {\n                let newFilterText = parent.getAttribute('data-filter-text');\n                parent.querySelectorAll('input').forEach((element, index) => {\n                    let name = element.getAttribute('name');\n                    // Remove all the child filter tags\n                    if (filters.querySelector(`[data-name=\"${name}\"]`))\n                        filters.querySelector(`[data-name=\"${name}\"]`).remove();\n                    newFilterText = newFilterText.replace(`$${index + 1}`, element.value);\n                });\n                let parentFilter = document.createElement('button');\n                parentFilter.setAttribute('type', 'button');\n                parentFilter.classList.add('filter');\n                parentFilter.setAttribute('data-name', inputName);\n                parentFilter.innerHTML = newFilterText;\n                filters.appendChild(parentFilter);\n            }\n        }\n    }\n    // check for inputs on load\n    Array.from(container.querySelectorAll('input[type=\"checkbox\"]:checked')).forEach((input, index) => {\n        addFilterButton(filters, input);\n    });\n    container.addEventListener('change', function (event) {\n        if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')) {\n            let input = event.target.closest('input[data-filter-text]');\n            addFilterButton(filters, input);\n        }\n    });\n    filters.addEventListener('click', function (event) {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.filter')) {\n            let filter = event.target.closest('.filter');\n            let names = filter.getAttribute('data-name').split(',');\n            for (var t = 0; t < names.length; t++) {\n                let name = names[t];\n                let selector = `[name=\"${name}\"]`;\n                if (name.match(/\\[(.*)\\]/)) {\n                    let newName = name.replace(/\\[(.*)\\]/, `[]`);\n                    let value = name.replace(/.*\\[(.*)\\]/, `$1`);\n                    selector = `[value=\"${value}\"]`;\n                }\n                let inputs = container.querySelectorAll(selector);\n                for (var i = 0; i < inputs.length; i++) {\n                    let input = inputs[i];\n                    if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox')\n                        input.value = \"\";\n                    else {\n                        input.checked = false;\n                        var event = new Event('force');\n                        if (!container.hasAttribute('data-nosubmit'))\n                            input.closest('form').dispatchEvent(event);\n                    }\n                }\n            }\n            filter.remove();\n        }\n    }, false);\n}\nexport default createAppliedFilters;\n","// @ts-nocheck\nimport createAppliedFilters from \"../../modules/applied-filters.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"Applied Filters\"\n});\nclass iamAppliedFilters 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/applied-filters.css\";`;\n        let classList = this.classList.toString();\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=\"applied-filters ${classList}\"></div>\n    <slot></slot>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        createAppliedFilters(this, this.shadowRoot.querySelector('.applied-filters'));\n    }\n}\nexport default iamAppliedFilters;\n"],"names":["createAppliedFilters","container","filters","addFilterButton","input","shouldRemoveFilter","inputName","filter","filterText","parent","allValuesSet","element","index","name","childFilter","newFilterText","parentFilter","event","names","selector","inputs","i","iamAppliedFilters","assetLocation","coreCSS","classList","template"],"mappings":";;;IACA,SAASA,EAAqBC,EAAWC,EAAS,CAC9C,SAASC,EAAgBD,EAASE,EAAO,CACrC,IAAIC,EAAqB,GACrBC,EAAYF,EAAM,aAAa,MAAM,EACrCE,EAAU,SAAS,IAAI,IACvBA,EAAYA,EAAU,QAAQ,KAAM,IAAIF,EAAM,QAAQ,GAC1D,IAAIG,EAASL,EAAQ,cAAc,eAAeI,KAAa,EAC3DC,GAAUH,EAAM,aAAa,MAAM,GAAK,aACxCC,EAAqB,IACzB,IAAIG,EAAaJ,EAAM,aAAa,kBAAkB,EAatD,GAZKG,IACDA,EAAS,SAAS,cAAc,QAAQ,EACxCL,EAAQ,YAAYK,CAAM,GAE9BA,EAAO,aAAa,OAAQ,QAAQ,EACpCA,EAAO,UAAU,IAAI,QAAQ,EAC7BA,EAAO,aAAa,YAAaD,CAAS,EAC1CC,EAAO,UAAYC,EAAW,QAAQ,SAAUJ,EAAM,KAAK,GAEvD,CAACA,EAAM,OAASC,IAChBE,EAAO,OAAM,EAEbH,EAAM,WAAW,QAAQ,oBAAoB,EAAG,CAChD,IAAIK,EAASL,EAAM,WAAW,QAAQ,oBAAoB,EACtDM,EAAe,GAqBnB,GApBAJ,EAAY,GACZG,EAAO,iBAAiB,OAAO,EAAE,QAAQ,CAACE,EAASC,IAAU,CACzD,IAAIC,EAAOF,EAAQ,aAAa,MAAM,EAKtC,GAHAL,GAAa,GAAGM,GAAS,EAAI,IAAM,KAAKC,IACpCX,EAAQ,cAAc,eAAeW,KAAQ,GAC7CX,EAAQ,cAAc,eAAeW,KAAQ,EAAE,SAC/CF,EAAQ,MAAO,CACf,IAAIG,EAAc,SAAS,cAAc,QAAQ,EACjDA,EAAY,aAAa,OAAQ,QAAQ,EACzCA,EAAY,UAAU,IAAI,QAAQ,EAClCA,EAAY,aAAa,YAAaD,CAAI,EAC1CC,EAAY,UAAYN,EAAW,QAAQ,SAAUG,EAAQ,KAAK,EAClET,EAAQ,YAAYY,CAAW,OAG/BJ,EAAe,EACnC,CAAa,EACGR,EAAQ,cAAc,eAAeI,KAAa,GAClDJ,EAAQ,cAAc,eAAeI,KAAa,EAAE,SACpDI,EAAc,CACd,IAAIK,EAAgBN,EAAO,aAAa,kBAAkB,EAC1DA,EAAO,iBAAiB,OAAO,EAAE,QAAQ,CAACE,EAASC,IAAU,CACzD,IAAIC,EAAOF,EAAQ,aAAa,MAAM,EAElCT,EAAQ,cAAc,eAAeW,KAAQ,GAC7CX,EAAQ,cAAc,eAAeW,KAAQ,EAAE,SACnDE,EAAgBA,EAAc,QAAQ,IAAIH,EAAQ,IAAKD,EAAQ,KAAK,CACxF,CAAiB,EACD,IAAIK,EAAe,SAAS,cAAc,QAAQ,EAClDA,EAAa,aAAa,OAAQ,QAAQ,EAC1CA,EAAa,UAAU,IAAI,QAAQ,EACnCA,EAAa,aAAa,YAAaV,CAAS,EAChDU,EAAa,UAAYD,EACzBb,EAAQ,YAAYc,CAAY,GAG3C,CAED,MAAM,KAAKf,EAAU,iBAAiB,gCAAgC,CAAC,EAAE,QAAQ,CAACG,EAAOQ,IAAU,CAC/FT,EAAgBD,EAASE,CAAK,CACtC,CAAK,EACDH,EAAU,iBAAiB,SAAU,SAAUgB,EAAO,CAClD,GAAIA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,yBAAyB,EAAG,CACjG,IAAIb,EAAQa,EAAM,OAAO,QAAQ,yBAAyB,EAC1Dd,EAAgBD,EAASE,CAAK,EAE1C,CAAK,EACDF,EAAQ,iBAAiB,QAAS,SAAUe,EAAO,CAC/C,GAAIA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,SAAS,EAAG,CACjF,IAAIV,EAASU,EAAM,OAAO,QAAQ,SAAS,EACvCC,EAAQX,EAAO,aAAa,WAAW,EAAE,MAAM,GAAG,EACtD,QAAS,EAAI,EAAG,EAAIW,EAAM,OAAQ,IAAK,CACnC,IAAIL,EAAOK,EAAM,CAAC,EACdC,EAAW,UAAUN,MACrBA,EAAK,MAAM,UAAU,IACPA,EAAK,QAAQ,WAAY,IAAI,EAE3CM,EAAW,WADCN,EAAK,QAAQ,aAAc,IAAI,OAG/C,IAAIO,EAASnB,EAAU,iBAAiBkB,CAAQ,EAChD,QAASE,EAAI,EAAGA,EAAID,EAAO,OAAQC,IAAK,CACpC,IAAIjB,EAAQgB,EAAOC,CAAC,EACpB,GAAIjB,EAAM,aAAa,MAAM,GAAK,SAAWA,EAAM,aAAa,MAAM,GAAK,WACvEA,EAAM,MAAQ,OACb,CACDA,EAAM,QAAU,GAChB,IAAIa,EAAQ,IAAI,MAAM,OAAO,EACxBhB,EAAU,aAAa,eAAe,GACvCG,EAAM,QAAQ,MAAM,EAAE,cAAca,CAAK,IAIzDV,EAAO,OAAM,EAEpB,EAAE,EAAK,CACZ,CCnGA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAS,0BACT,QAAW,iBACf,CAAC,EACD,MAAMe,UAA0B,WAAY,CACxC,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,qBAE/G,IAAIE,EAAY,KAAK,UAAU,SAAQ,EACvC,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdF;AAAA;AAAA;AAAA,MAET,KAAK,aAAa,KAAK,EAAI,YAAY,KAAK,aAAa,KAAK,MAAQ;AAAA;AAAA,kCAE1CC;AAAA;AAAA,MAG1B,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC/D,CACD,mBAAoB,CAChB1B,EAAqB,KAAM,KAAK,WAAW,cAAc,kBAAkB,CAAC,CAC/E,CACL"}
+{"version":3,"file":"applied-filters.component.min.js","sources":["../../modules/applied-filters.js","applied-filters.component.js"],"sourcesContent":["// @ts-nocheck\nfunction createAppliedFilters(container, filters) {\n    function addFilterButton(filters, input) {\n        let shouldRemoveFilter = false;\n        let inputName = input.getAttribute('name');\n        if (inputName.includes('[]'))\n            inputName = inputName.replace('[]', `[${input.value}]`);\n        let filter = filters.querySelector(`[data-name=\"${inputName}\"]`);\n        if (filter && input.getAttribute('type') == 'checkbox')\n            shouldRemoveFilter = true;\n        let filterText = input.getAttribute('data-filter-text');\n        if (!filter) {\n            filter = document.createElement('button');\n            filters.appendChild(filter);\n        }\n        filter.setAttribute('type', 'button');\n        filter.classList.add('filter');\n        filter.setAttribute('data-name', inputName);\n        filter.innerHTML = filterText.replace('$value', input.value);\n        // If the value\n        if (!input.value || shouldRemoveFilter)\n            filter.remove();\n        // If input has an ancestor with data-filter and all of inputs in that parent have been filled in then we need to transform the filter\n        if (input.parentNode.closest('[data-filter-text]')) {\n            let parent = input.parentNode.closest('[data-filter-text]');\n            let allValuesSet = true;\n            inputName = \"\";\n            parent.querySelectorAll('input').forEach((element, index) => {\n                let name = element.getAttribute('name');\n                // create a joined inputname for the parent filter\n                inputName += `${index != 0 ? ',' : ''}${name}`;\n                if (filters.querySelector(`[data-name=\"${name}\"]`))\n                    filters.querySelector(`[data-name=\"${name}\"]`).remove();\n                if (element.value) {\n                    let childFilter = document.createElement('button');\n                    childFilter.setAttribute('type', 'button');\n                    childFilter.classList.add('filter');\n                    childFilter.setAttribute('data-name', name);\n                    childFilter.innerHTML = filterText.replace('$value', element.value);\n                    filters.appendChild(childFilter);\n                }\n                else\n                    allValuesSet = false;\n            });\n            if (filters.querySelector(`[data-name=\"${inputName}\"]`))\n                filters.querySelector(`[data-name=\"${inputName}\"]`).remove();\n            if (allValuesSet) {\n                let newFilterText = parent.getAttribute('data-filter-text');\n                parent.querySelectorAll('input').forEach((element, index) => {\n                    let name = element.getAttribute('name');\n                    // Remove all the child filter tags\n                    if (filters.querySelector(`[data-name=\"${name}\"]`))\n                        filters.querySelector(`[data-name=\"${name}\"]`).remove();\n                    newFilterText = newFilterText.replace(`$${index + 1}`, element.value);\n                });\n                let parentFilter = document.createElement('button');\n                parentFilter.setAttribute('type', 'button');\n                parentFilter.classList.add('filter');\n                parentFilter.setAttribute('data-name', inputName);\n                parentFilter.innerHTML = newFilterText;\n                filters.appendChild(parentFilter);\n            }\n        }\n    }\n    // check for inputs on load\n    Array.from(container.querySelectorAll('input[type=\"checkbox\"]:checked')).forEach((input, index) => {\n        addFilterButton(filters, input);\n    });\n    Array.from(container.querySelectorAll('input[data-filter-text]')).forEach((input, index) => {\n        input.addEventListener('change', function (event) {\n            addFilterButton(filters, input);\n        });\n    });\n    filters.addEventListener('click', function (event) {\n        if (event && event.target instanceof HTMLElement && event.target.closest('.filter')) {\n            let filter = event.target.closest('.filter');\n            let names = filter.getAttribute('data-name').split(',');\n            for (var t = 0; t < names.length; t++) {\n                let name = names[t];\n                let selector = `[name=\"${name}\"]`;\n                if (name.match(/\\[(.*)\\]/)) {\n                    let newName = name.replace(/\\[(.*)\\]/, `[]`);\n                    let value = name.replace(/.*\\[(.*)\\]/, `$1`);\n                    selector = `[value=\"${value}\"]`;\n                }\n                let inputs = container.querySelectorAll(selector);\n                for (var i = 0; i < inputs.length; i++) {\n                    let input = inputs[i];\n                    if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox')\n                        input.value = \"\";\n                    else {\n                        input.checked = false;\n                        var event = new Event('force');\n                        if (!container.hasAttribute('data-nosubmit'))\n                            input.closest('form').dispatchEvent(event);\n                    }\n                }\n            }\n            filter.remove();\n        }\n    }, false);\n}\nexport default createAppliedFilters;\n","// @ts-nocheck\nimport createAppliedFilters from \"../../modules/applied-filters.js\";\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    \"event\": \"customElementRegistered\",\n    \"element\": \"Applied Filters\"\n});\nclass iamAppliedFilters 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/applied-filters.css\";`;\n        let classList = this.classList.toString();\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=\"applied-filters ${classList}\"></div>\n    <slot></slot>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        createAppliedFilters(this, this.shadowRoot.querySelector('.applied-filters'));\n    }\n}\nexport default iamAppliedFilters;\n"],"names":["createAppliedFilters","container","filters","addFilterButton","input","shouldRemoveFilter","inputName","filter","filterText","parent","allValuesSet","element","index","name","childFilter","newFilterText","parentFilter","event","names","selector","inputs","iamAppliedFilters","assetLocation","coreCSS","classList","template"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v4.1.0-beta-2
+  * iamKey v4.1.0
   * 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>

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v4.1.0-beta-2
+  * iamKey v4.1.0
   * 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`,o=document.createElement("template");o.innerHTML=`
     <style class="styles">

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v4.1.0-beta-2
+  * iamKey v4.1.0
   * 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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v4.1.0-beta-2
+  * iamKey v4.1.0
   * 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: var(--colour-canvas);--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 */
+    .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 */
 
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>

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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v4.1.0-beta-2
+  * iamKey v4.1.0
   * 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">
     @import "${r}";
-    :host{display:flex !important;flex-direction:row;flex-wrap:wrap;align-items:center}::slotted(.brand){margin-right:auto}.btn-menu{padding:0;margin:0 0 0 2rem;text-align:center;height:3rem;padding-block:0.75rem;line-height:1.5rem;overflow:hidden;position:relative;background:none;border:none;width:1.5rem;text-indent:-1000%;color:var(--colour-brand)}.btn-menu i{font-size:1.5rem;line-height:1.5rem;position:absolute;text-indent:0px;width:1.5rem;text-align:center;top:0.75rem;right:0;margin:0 !important;transition:none !important}.btn-menu i+i{display:none}.btn-menu.selected i{display:none}.btn-menu.selected i+i{display:inline}@media screen and (max-width: 62em){.btn-menu>.btn{display:contents;display:contents;color:inherit !important;padding:0 !important;margin:0;font-weight:normal !important;line-height:inherit;font-size:inherit;transition:none !important}}@media screen and (min-width: 36em){.btn-menu{margin:0 0 0 3rem;width:auto;padding-right:1.875rem;text-indent:0}.btn-menu.selected{text-indent:-1000%}}@media screen and (min-width: 62em){.btn-menu{width:fit-content;height:auto;margin:0 0 0 3rem !important;padding:0 !important;text-indent:0;padding-right:0 !important}.btn-menu.selected{text-indent:0}.btn-menu .btn{margin:0 !important;display:flex}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){.btn-menu .btn{--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: var(--colour-canvas);--colour-btn-action-hover-bg: var(--colour-light)}.btn-menu .btn .text-primary{color:var(--colour-primary) !important}.btn-menu .btn:is(:hover,:focus){color:var(--colour-inverted)}}@media screen and (min-width: 62em){.btn-menu .btn span{order:2}.btn-menu .btn i[class*=fa-]{position:relative;position:static;vertical-align:bottom;display:inline-block;font-size:1.2rem;margin-right:1rem !important;line-height:1em}.btn-menu .btn i[class*=fa-]+i[class*=fa-]{display:none}}@media screen and (max-width: 62em){:host>.container{display:contents}.menu__outer{position:absolute;top:6rem;left:0;width:100%;height:calc(100vh - 6rem);overflow:hidden;pointer-events:none;transition:background .5s}.menu__outer:has(.menu.open){background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}.menu::-webkit-scrollbar{width:6px}.menu::-webkit-scrollbar-track{border:0 !important}.menu::-webkit-scrollbar-thumb{border:0 !important}.menu{overscroll-behavior:contain;width:calc(23.4375rem - var(--scrollbar-width));background-color:var(--colour-canvas-2);position:absolute;height:calc(100vh - 6rem);left:100%;top:0;padding:0 1.5rem 0 1.5rem;z-index:var(--index-menu);overflow:auto;transition:all 1s ease-out;display:flex;flex-direction:column;flex-wrap:nowrap}.menu>*{flex-shrink:0}}@media screen and (max-width: 62em)and (prefers-color-scheme: dark){.menu{--colour-link: var(--colour-white);--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 (max-width: 62em)and (prefers-color-scheme: light){.menu{background-color: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: var(--colour-canvas);--colour-btn-action-hover-bg: var(--colour-light)}.menu .text-primary{color:var(--colour-primary) !important}}@media screen and (max-width: 62em)and (forced-colors: active){.menu{outline:1px solid #fff}}@media screen and (max-width: 62em){.menu:before{content:"";position:absolute;display:block;top:0;left:0;width:100%;border-top:2px solid var(--colour-border);z-index:1}.menu.open{left:calc(100% - (23.4375rem - var(--scrollbar-width)));-webkit-box-shadow:0 6px 12px 0px rgba(0,0,0,.2);box-shadow:0 6px 12px 0px rgba(0,0,0,.2);pointer-events:all}.menu.closed *{display:none !important}.menu__secondary{display:none}.has-secondary .menu__secondary{display:block;margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:3rem !important;flex-grow:1;position:relative}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){.has-secondary .menu__secondary{background-color:#eee}}@media screen and (max-width: 62em){.has-secondary .menu__secondary .container{display:contents}::slotted(a:not([slot=logo])){display:block !important;line-height:1.25rem !important;padding:1.5rem 0 !important;margin:0 !important;flex-shrink:0;font-size:1rem !important;font-weight:normal !important}::slotted(a:not([slot=logo])):after{content:"";display:block;height:2px;width:100% !important;background-color:var(--colour-border) !important;top:calc(100% - 2px) !important}*:is(.has-search,.has-actions) .menu__primary{display:block;padding-bottom:3rem}.menu:not(.has-secondary) .menu__primary{display:block;padding-bottom:3rem}::slotted(button){display:block !important;margin:0 0 1.5rem 0 !important;width:100% !important;max-width:100% !important;text-align:center !important;flex-shrink:0}.has-actions slot[name=actions]{display:block;padding-bottom:1.5rem}slot[name=actions]::slotted(button){margin-top:0 !important}.dialog__wrapper{width:100%;margin:0 0 3rem 0 !important;flex-shrink:0}.dialog__wrapper>.btn{display:none}.dialog__wrapper dialog{display:contents}}@media screen and (max-width: 62em)and (min-width: 36em){.menu{padding-right:2.5rem !important}.has-secondary .menu__secondary{margin-right:-2.5rem !important;padding-right:2.5rem !important}.has-secondary .menu__secondary:before{width:calc(100% - 4rem) !important}::slotted(button){width:auto !important}}@media screen and (min-width: 62em){:host{max-width:100% !important;padding:0 !important}:host>.container{padding-block:1.5rem !important;display:flex;flex-wrap:nowrap;align-items:center}:host>.container:has(.has-secondary){padding-top:4rem !important}:host>.container>*{margin-bottom:0 !important}.btn-menu{display:none}.buttons-holder{display:contents}.buttons-holder .btn-menu{display:inline-block;order:2}.menu,.menu__outer,.menu__primary{display:contents}.menu__secondary{display:none}.has-secondary .menu__secondary{background-color:var(--colour-canvas-2);display:block;position:absolute;top:0;left:0;width:100%}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){.has-secondary .menu__secondary{background-color:#eee;--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: var(--colour-canvas);--colour-btn-action-hover-bg: var(--colour-light)}.has-secondary .menu__secondary .text-primary{color:var(--colour-primary) !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){.has-secondary .menu__secondary{--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){.has-secondary .menu__secondary .container{margin-left:auto;margin-right:auto;padding:var(--container-padding) !important;padding-top:0.5rem !important;padding-bottom:0.5rem !important;text-align:right}::slotted(a[slot=secondary]){font-size:0.875rem !important}::slotted(a[slot=secondary]):after{top:calc(100% - .25em) !important}::slotted(a:not([slot=logo])),::slotted(button){margin-bottom:0 !important;margin-right:0 !important}::slotted(a:not([slot=logo])){margin-left:2rem !important;font-size:1rem !important;font-weight:normal !important}::slotted(a:not([slot=logo])):after{display:none}::slotted(button){margin-left:3rem !important}.has-actions slot[name=actions]{display:block;padding-left:3rem}slot[name=actions]::slotted(button){margin-left:0.75rem !important}:host([data-search]) slot[name=actions]{padding-left:0 !important}#search-wrapper{margin-left:1.5rem !important;position:static}#search-dialog[open]{position:absolute;top:auto;bottom:0;left:0;width:100%;padding-block:1.5rem;padding-inline:0;background-color:rgba(0,0,0,0);text-align:right;border-radius:0;box-shadow:none}#search-dialog[open] .container{padding:var(--container-padding);padding-bottom:0}:host(.search-open){background:#e6eaec !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){:host(.search-open){background:var(--colour-canvas-2) !important}}@media screen and (min-width: 62em){:host(.search-open) .buttons-holder,:host(.search-open) #search-button{display:none}:host(.search-open.bg-primary){background:var(--colour-primary) !important}:host(.search-open.bg-primary) .suffix,:host(.search-open.bg-primary) #search{border:2px solid #b3c1c5;color:#fff}:host(.search-open.bg-primary) #search{border-right:0}.backdrop{content:"";display:block;position:absolute;top:100%;left:0;height:calc(100vh - var(--nav-height));width:100%;z-index:-1;pointer-events:none;transition:background .5s}.backdrop.show{pointer-events:all;background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}}::slotted(.nav--menu){overscroll-behavior:contain;width:calc(23.4375rem - var(--scrollbar-width));background-color:var(--colour-canvas-2);position:absolute;height:calc(100vh - 6rem);left:100%;top:0;padding:0 1.5rem 0 1.5rem;z-index:var(--index-menu);overflow:auto;transition:all 1s ease-out;display:flex;flex-direction:column;flex-wrap:nowrap}::slotted(.nav--menu)>*{flex-shrink:0}@media screen and (prefers-color-scheme: dark){::slotted(.nav--menu){--colour-link: var(--colour-white);--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 (prefers-color-scheme: light){::slotted(.nav--menu){background-color: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: var(--colour-canvas);--colour-btn-action-hover-bg: var(--colour-light)}::slotted(.nav--menu) .text-primary{color:var(--colour-primary) !important}}@media(forced-colors: active){::slotted(.nav--menu){outline:1px solid #fff}}::slotted(.nav--menu):before{display:block;width:100%;border-top:2px solid var(--colour-border);z-index:1;padding-block:1.5rem;margin:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);color:var(--colour-heading);clear:both;font-size:1.75rem;line-height:2.25rem;max-width:var(--content-max-width)}@media screen and (min-width: 36em){::slotted(.nav--menu):before{font-size:2rem;line-height:2.5rem}}::slotted(.nav--menu):before{content:attr(data-title)}@media screen and (min-width: 62em){::slotted(.nav--menu){height:calc(100vh - var(--nav-height));top:100%}}::slotted(.nav--menu.open){left:calc(100% - (23.4375rem - var(--scrollbar-width)));-webkit-box-shadow:0 6px 12px 0px rgba(0,0,0,.2);box-shadow:0 6px 12px 0px rgba(0,0,0,.2);pointer-events:all}@media screen and (max-width: 62em){:host(.open) .menu__outer{background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}}/*# sourceMappingURL=assets/css/components/nav.css.map */
+    :host{display:flex !important;flex-direction:row;flex-wrap:wrap;align-items:center}::slotted(.brand){margin-right:auto}.btn-menu{padding:0;margin:0 0 0 2rem;text-align:center;height:3rem;padding-block:0.75rem;line-height:1.5rem;overflow:hidden;position:relative;background:none;border:none;width:1.5rem;text-indent:-1000%;color:var(--colour-brand)}.btn-menu i{font-size:1.5rem;line-height:1.5rem;position:absolute;text-indent:0px;width:1.5rem;text-align:center;top:0.75rem;right:0;margin:0 !important;transition:none !important}.btn-menu i+i{display:none}.btn-menu.selected i{display:none}.btn-menu.selected i+i{display:inline}@media screen and (max-width: 62em){.btn-menu>.btn{display:contents;display:contents;color:inherit !important;padding:0 !important;margin:0;font-weight:normal !important;line-height:inherit;font-size:inherit;transition:none !important}}@media screen and (min-width: 36em){.btn-menu{margin:0 0 0 3rem;width:auto;padding-right:1.875rem;text-indent:0}.btn-menu.selected{text-indent:-1000%}}@media screen and (min-width: 62em){.btn-menu{width:fit-content;height:auto;margin:0 0 0 3rem !important;padding:0 !important;text-indent:0;padding-right:0 !important}.btn-menu.selected{text-indent:0}.btn-menu .btn{margin:0 !important;display:flex}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){.btn-menu .btn{--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)}.btn-menu .btn .text-primary{color:var(--colour-primary) !important}.btn-menu .btn:is(:hover,:focus){color:var(--colour-inverted)}}@media screen and (min-width: 62em){.btn-menu .btn span{order:2}.btn-menu .btn i[class*=fa-]{position:relative;position:static;vertical-align:bottom;display:inline-block;font-size:1.2rem;margin-right:1rem !important;line-height:1em}.btn-menu .btn i[class*=fa-]+i[class*=fa-]{display:none}}@media screen and (max-width: 62em){:host>.container{display:contents}.menu__outer{position:absolute;top:6rem;left:0;width:100%;height:calc(100vh - 6rem);overflow:hidden;pointer-events:none;transition:background .5s}.menu__outer:has(.menu.open){background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}.menu::-webkit-scrollbar{width:6px}.menu::-webkit-scrollbar-track{border:0 !important}.menu::-webkit-scrollbar-thumb{border:0 !important}.menu{overscroll-behavior:contain;width:calc(23.4375rem - var(--scrollbar-width));background-color:var(--colour-canvas-2);position:absolute;height:calc(100vh - 6rem);left:100%;top:0;padding:0 1.5rem 0 1.5rem;z-index:var(--index-menu);overflow:auto;transition:all 1s ease-out;display:flex;flex-direction:column;flex-wrap:nowrap}.menu>*{flex-shrink:0}}@media screen and (max-width: 62em)and (prefers-color-scheme: dark){.menu{--colour-link: var(--colour-white);--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 (max-width: 62em)and (prefers-color-scheme: light){.menu{background-color: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)}.menu .text-primary{color:var(--colour-primary) !important}}@media screen and (max-width: 62em)and (forced-colors: active){.menu{outline:1px solid #fff}}@media screen and (max-width: 62em){.menu:before{content:"";position:absolute;display:block;top:0;left:0;width:100%;border-top:2px solid var(--colour-border);z-index:1}.menu.open{left:calc(100% - (23.4375rem - var(--scrollbar-width)));-webkit-box-shadow:0 6px 12px 0px rgba(0,0,0,.2);box-shadow:0 6px 12px 0px rgba(0,0,0,.2);pointer-events:all}.menu.closed *{display:none !important}.menu__secondary{display:none}.has-secondary .menu__secondary{display:block;margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:3rem !important;flex-grow:1;position:relative}}@media screen and (max-width: 62em)and (prefers-color-scheme: light){.has-secondary .menu__secondary{background-color:#eee}}@media screen and (max-width: 62em){.has-secondary .menu__secondary .container{display:contents}::slotted(a:not([slot=logo])){display:block !important;line-height:1.25rem !important;padding:1.5rem 0 !important;margin:0 !important;flex-shrink:0;font-size:1rem !important;font-weight:normal !important}::slotted(a:not([slot=logo])):after{content:"";display:block;height:2px;width:100% !important;background-color:var(--colour-border) !important;top:calc(100% - 2px) !important}*:is(.has-search,.has-actions) .menu__primary{display:block;padding-bottom:3rem}.menu:not(.has-secondary) .menu__primary{display:block;padding-bottom:3rem}::slotted(button){display:block !important;margin:0 0 1.5rem 0 !important;width:100% !important;max-width:100% !important;text-align:center !important;flex-shrink:0}.has-actions slot[name=actions]{display:block;padding-bottom:1.5rem}slot[name=actions]::slotted(button){margin-top:0 !important}.dialog__wrapper{width:100%;margin:0 0 3rem 0 !important;flex-shrink:0}.dialog__wrapper>.btn{display:none}.dialog__wrapper dialog{display:contents}}@media screen and (max-width: 62em)and (min-width: 36em){.menu{padding-right:2.5rem !important}.has-secondary .menu__secondary{margin-right:-2.5rem !important;padding-right:2.5rem !important}.has-secondary .menu__secondary:before{width:calc(100% - 4rem) !important}::slotted(button){width:auto !important}}@media screen and (min-width: 62em){:host{max-width:100% !important;padding:0 !important}:host>.container{padding-block:1.5rem !important;display:flex;flex-wrap:nowrap;align-items:center}:host>.container:has(.has-secondary){padding-top:4rem !important}:host>.container>*{margin-bottom:0 !important}.btn-menu{display:none}.buttons-holder{display:contents}.buttons-holder .btn-menu{display:inline-block;order:2}.menu,.menu__outer,.menu__primary{display:contents}.menu__secondary{display:none}.has-secondary .menu__secondary{background-color:var(--colour-canvas-2);display:block;position:absolute;top:0;left:0;width:100%}}@media screen and (min-width: 62em)and (prefers-color-scheme: light){.has-secondary .menu__secondary{background-color:#eee;--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)}.has-secondary .menu__secondary .text-primary{color:var(--colour-primary) !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){.has-secondary .menu__secondary{--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){.has-secondary .menu__secondary .container{margin-left:auto;margin-right:auto;padding:var(--container-padding) !important;padding-top:0.5rem !important;padding-bottom:0.5rem !important;text-align:right}::slotted(a[slot=secondary]){font-size:0.875rem !important}::slotted(a[slot=secondary]):after{top:calc(100% - .25em) !important}::slotted(a:not([slot=logo])),::slotted(button){margin-bottom:0 !important;margin-right:0 !important}::slotted(a:not([slot=logo])){margin-left:2rem !important;font-size:1rem !important;font-weight:normal !important}::slotted(a:not([slot=logo])):after{display:none}::slotted(button){margin-left:3rem !important}.has-actions slot[name=actions]{display:block;padding-left:3rem}slot[name=actions]::slotted(button){margin-left:0.75rem !important}:host([data-search]) slot[name=actions]{padding-left:0 !important}#search-wrapper{margin-left:1.5rem !important;position:static}#search-dialog[open]{position:absolute;top:auto;bottom:0;left:0;width:100%;padding-block:1.5rem;padding-inline:0;background-color:rgba(0,0,0,0);text-align:right;border-radius:0;box-shadow:none}#search-dialog[open] .container{padding:var(--container-padding);padding-bottom:0}:host(.search-open){background:#e6eaec !important}}@media screen and (min-width: 62em)and (prefers-color-scheme: dark){:host(.search-open){background:var(--colour-canvas-2) !important}}@media screen and (min-width: 62em){:host(.search-open) .buttons-holder,:host(.search-open) #search-button{display:none}:host(.search-open.bg-primary){background:var(--colour-primary) !important}:host(.search-open.bg-primary) .suffix,:host(.search-open.bg-primary) #search{border:2px solid #b3c1c5;color:#fff}:host(.search-open.bg-primary) #search{border-right:0}.backdrop{content:"";display:block;position:absolute;top:100%;left:0;height:calc(100vh - var(--nav-height));width:100%;z-index:-1;pointer-events:none;transition:background .5s}.backdrop.show{pointer-events:all;background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}}::slotted(.nav--menu){overscroll-behavior:contain;width:calc(23.4375rem - var(--scrollbar-width));background-color:var(--colour-canvas-2);position:absolute;height:calc(100vh - 6rem);left:100%;top:0;padding:0 1.5rem 0 1.5rem;z-index:var(--index-menu);overflow:auto;transition:all 1s ease-out;display:flex;flex-direction:column;flex-wrap:nowrap}::slotted(.nav--menu)>*{flex-shrink:0}@media screen and (prefers-color-scheme: dark){::slotted(.nav--menu){--colour-link: var(--colour-white);--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 (prefers-color-scheme: light){::slotted(.nav--menu){background-color: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)}::slotted(.nav--menu) .text-primary{color:var(--colour-primary) !important}}@media(forced-colors: active){::slotted(.nav--menu){outline:1px solid #fff}}::slotted(.nav--menu):before{display:block;width:100%;border-top:2px solid var(--colour-border);z-index:1;padding-block:1.5rem;margin:0;font-family:var(--font-heading);font-style:normal;font-weight:var(--heading-weight);color:var(--colour-heading);clear:both;font-size:1.75rem;line-height:2.25rem;max-width:var(--content-max-width)}@media screen and (min-width: 36em){::slotted(.nav--menu):before{font-size:2rem;line-height:2.5rem}}::slotted(.nav--menu):before{content:attr(data-title)}@media screen and (min-width: 62em){::slotted(.nav--menu){height:calc(100vh - var(--nav-height));top:100%}}::slotted(.nav--menu.open){left:calc(100% - (23.4375rem - var(--scrollbar-width)));-webkit-box-shadow:0 6px 12px 0px rgba(0,0,0,.2);box-shadow:0 6px 12px 0px rgba(0,0,0,.2);pointer-events:all}@media screen and (max-width: 62em){:host(.open) .menu__outer{background:rgba(0,0,0,.2);backdrop-filter:blur(2px)}}/*# sourceMappingURL=assets/css/components/nav.css.map */
 
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">

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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v4.1.0-beta-2
+  * iamKey v4.1.0
   * 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 a=new c(function(){n(i)},t);i.addEventListener("mouseenter",o=>{a.pause()}),i.addEventListener("mouseleave",o=>{a.resume()})}}function c(i,a){var t,o,e=a;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 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 a=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"):`${a}/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=`
+  */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=`
     <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));background:#e9f9fd;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}: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 */
+    :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 */
 
     ${this.hasAttribute("data-css")?`${this.getAttribute("data-css")}`:""}
     </style>
@@ -14,5 +14,5 @@
       <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(e.content.cloneNode(!0))}connectedCallback(){const a=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),a&&a.addEventListener("click",function(e){n(o)},!1)}}export{d as default};
+    `,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};
 //# sourceMappingURL=notification.component.min.js.map

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

@@ -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,SAAU,EAAG,CAC9CjB,EAAkBmB,CAAO,CAC5B,EAAE,EAAK,CAEf,CACL"}
+{"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":"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"}

package/assets/js/components/pagination/pagination.component.js

@@ -1,19 +1,48 @@
 // @ts-nocheck
-import createPaginationButttons from "../../modules/pagination.js";
 class iamPagination 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/pagination.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
     <style>
     @import "${coreCSS}";
+    ${loadCSS}
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <div class="pagination__wrapper d-none">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="pagination d-none">
+  
+      <div class="minimal" part="minimal">
+        <div class="page-jump">
+          <div><select class="select--minimal"></select></div>
+          <span class="total-pages"></span>
+        </div>
+        
+        <button class="prev" disabled>Prev</button>
+        <button class="next" disabled>Next</button>
+      </div>
+
+      <div class="item-count" part="item-count"></div>
+      <div class="per-page" part="per-page">
+        <div>
+          <select class="select--minimal">
+            <option value="15">15</option>
+            <option value="25">25</option>
+            <option value="40">40</option>
+            <option value="50">50</option>
+          </select>
+        </div>
+        <span> / page</span>
+      </div>
+      <div class="mobile-controls m-auto text-center">
+        <i class="fa-solid fa-spinner fa-spin"></i>
+        <button class="load-more btn btn-primary m-auto">Load more</a>
+      </div>
     </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -22,16 +51,132 @@ class iamPagination extends HTMLElement {
         // Set default attributes
         const params = new URLSearchParams(window.location.search);
         if (!this.hasAttribute('data-total'))
-            this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
+            this.setAttribute('data-total', 15);
         if (!this.hasAttribute('data-page'))
             this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
         if (!this.hasAttribute('data-show'))
             this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
         if (!this.hasAttribute('data-increment'))
-            this.setAttribute('data-increment', 15);
-        this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
-        createPaginationButttons(this, this.shadowRoot.querySelector('.pagination__wrapper'));
-        this.shadowRoot.querySelector('.pagination__wrapper').classList.remove('d-none');
+            this.setAttribute('data-increment', this.getAttribute('data-show'));
+        // Elements
+        const select = this.shadowRoot.querySelector('.page-jump select');
+        const prev = this.shadowRoot.querySelector('.prev');
+        const next = this.shadowRoot.querySelector('.next');
+        const perPage = this.shadowRoot.querySelector('.per-page select');
+        const loadMore = this.shadowRoot.querySelector('.load-more');
+        // Add the select inputs, enable or disable buttons, update the helper text
+        this.setup();
+        // Select on change will update the data-page attr which will dispatch an event
+        select.addEventListener('change', (event) => {
+            this.setAttribute('data-show', this.getAttribute('data-increment'));
+            this.setAttribute('data-page', event.target.value);
+        });
+        // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event
+        next.addEventListener('click', (event) => {
+            select.value = parseInt(select.value) + 1;
+            select.dispatchEvent(new Event('change'));
+        });
+        prev.addEventListener('click', (event) => {
+            select.value = parseInt(select.value) - 1;
+            select.dispatchEvent(new Event('change'));
+        });
+        // Update how many is shown 
+        perPage.addEventListener('change', (event) => {
+            this.setAttribute('data-increment', event.target.value);
+        });
+        loadMore.addEventListener('click', (event) => {
+            let newValue = parseInt(this.getAttribute('data-show')) + parseInt(this.getAttribute('data-increment'));
+            this.setAttribute('data-show', newValue);
+            if (newValue > parseInt(this.getAttribute('data-total'))) {
+                loadMore.remove();
+            }
+        });
+    }
+    setup() {
+        // Elements
+        const wrapper = this.shadowRoot.querySelector('.pagination');
+        const select = this.shadowRoot.querySelector('.page-jump select');
+        const prev = this.shadowRoot.querySelector('.prev');
+        const next = this.shadowRoot.querySelector('.next');
+        const itemCount = this.shadowRoot.querySelector('.item-count');
+        const perPage = this.shadowRoot.querySelector('.per-page select');
+        const totalPages = this.shadowRoot.querySelector('.total-pages');
+        // Values
+        const currentPage = parseInt(this.getAttribute('data-page'));
+        const total = parseInt(this.getAttribute('data-total'));
+        const show = parseInt(this.getAttribute('data-show'));
+        const increment = parseInt(this.getAttribute('data-increment'));
+        const numberPages = Math.ceil(total / increment);
+        if (total > show)
+            wrapper.classList.remove('d-none');
+        // Populate the select input with the number of pages
+        let strOptions = '';
+        for (let i = 1; i <= numberPages; i++) {
+            strOptions += `<option value="${i}" ${i == currentPage ? 'selected' : ''}>${i}</option>`;
+        }
+        select.innerHTML = strOptions;
+        totalPages.innerHTML = `of ${numberPages}`;
+        // Next button
+        if (currentPage == numberPages)
+            next.setAttribute('disabled', 'disabled');
+        else
+            next.removeAttribute('disabled');
+        if (currentPage == 1)
+            prev.setAttribute('disabled', 'disabled');
+        else
+            prev.removeAttribute('disabled');
+        // Update the item count text
+        let startPoint = currentPage == 1 ? 1 : ((currentPage - 1) * show) + 1;
+        let endPoint = currentPage == 1 ? show : ((currentPage) * show);
+        itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;
+        const defaultValues = [15, 25, 40, 50];
+        // Update the per page options if needed
+        if (increment && perPage.value != increment && !defaultValues.includes(increment)) {
+            perPage.innerHTML = `<option value="${increment}">${increment}</option>
+      <option value="${increment * 2}">${increment * 2}</option>
+      <option value="${increment * 3}">${increment * 3}</option>
+      <option value="${increment * 4}">${increment * 4}</option>`;
+        }
+        perPage.value = increment;
+    }
+    static get observedAttributes() {
+        return ["data-total", "data-increment", "data-page", "data-show"];
+    }
+    attributeChangedCallback(attrName, oldVal, newVal) {
+        switch (attrName) {
+            case "data-total": {
+                if (oldVal != newVal) {
+                    this.setAttribute('data-page', 1);
+                    this.setup();
+                }
+                break;
+            }
+            case "data-show": {
+                if (oldVal != newVal) {
+                    this.setAttribute('data-page', 1);
+                    this.setup();
+                    this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
+                }
+                break;
+            }
+            case "data-increment": {
+                if (oldVal != newVal) {
+                    this.setAttribute('data-show', newVal);
+                    this.setAttribute('data-page', 1);
+                    this.setup();
+                    this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
+                }
+                break;
+            }
+            case "data-page": {
+                if (oldVal != newVal) {
+                    this.setup();
+                    // Dispact the event for other components to use as triggers 
+                    this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));
+                }
+                break;
+            }
+        }
     }
 }
 export default iamPagination;

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

@@ -1,20 +1,46 @@
 /*!
-  * iamKey v4.1.0-beta-2
+  * iamKey v4.1.0
   * Copyright 2022-2023 iamproperty
-  */const l=function(e,t){if(!e.getAttribute("data-pages"))return!1;e.getAttribute("data-page")||e.setAttribute("data-page",1);let a=e.getAttribute("data-page"),i=e.getAttribute("data-pages"),d=e.getAttribute("data-total"),n=e.getAttribute("data-show"),o=e.getAttribute("data-increment");if(i<=1)return t.innerHTML="",!1;let r="";for(let s=1;s<=i;s++)s==a?r+=`<li class="page-item active" aria-current="page"><span class="page-link">${s}</span></li>`:r+=`<li class="page-item"><a href="?page=${s}" class="page-link" data-page="${s}">${s}</a></li>`;return t.innerHTML=`<ul class="pagination mb-0 d-none d-sm-flex">
-    ${a==1?'<li class="page-item disabled"><span class="page-link">Previous</span></li>':`<li class="page-item"><a href="?page=${parseInt(a)-1}" class="page-link" data-page="${parseInt(a)-1}">Previous</a></li>`}
-    ${r}
-    ${a==i?'<li class="page-item disabled"><span class="page-link">Next</span></li>':`<li class="page-item"><a href="?page=${parseInt(a)+1}" class="page-link" data-page="${parseInt(a)+1}">Next</a></li>`}
-  </ul>`,t.innerHTML+=`<div class="d-sm-none text-center">
-  <span class="d-block pb-2">You've viewed ${n} of ${d} results</span>
-  <a href="?show=${parseInt(n)+parseInt(o)}" class="btn btn-primary w-100 m-0" data-show="${parseInt(n)+parseInt(o)}">Load more results</a>
-  </div>`,!0};class p extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",a=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,i=document.createElement("template");i.innerHTML=`
+  */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>
-    @import "${a}";
+    @import "${t}";
+    :host{container-type:inline-size;display:block}.pagination{display:block}@container (width > 23.4375em){.pagination{display:flex;align-items:center;justify-content:space-between !important;padding-top:2rem}}.pagination>div{display:flex;align-items:center}.pagination div:is(.page-jump,.per-page){border:1px solid var(--colour-light);height:3.25rem;display:none;align-items:center;padding-inline:1rem}.pagination div:is(.page-jump,.per-page) .select--minimal{height:3.25rem;line-height:3.25rem;margin-left:-1rem;padding-left:1rem;font-weight:bold}.page-jump{border-right:none !important}.total-pages{white-space:nowrap}:host([data-page-jump][data-minimal]) .page-jump{display:flex !important}@container (width > 23.4375em){:host([data-page-jump]) .page-jump{display:flex !important}}@container (width > 23.4375em){:host([data-per-page]:not([data-page-jump][data-item-count])) .per-page{display:flex !important}}@container (width > 48em){:host([data-per-page][data-page-jump][data-item-count]) .per-page{display:flex !important}}.pagination>.item-count{display:block;text-align:center;margin-bottom:1rem;margin-inline:auto}@container (width > 23.4375em){.pagination>.item-count{display:none}:host([data-item-count]) .pagination>.item-count{display:flex !important;margin:0}}*:where(.prev,.next){border:1px solid var(--colour-light);line-height:3.25rem;height:3.25rem;margin:0;display:none;background:none;padding-inline:1rem}@container (width > 23.4375em){*:where(.prev,.next){display:inline-block}}*:where(.prev,.next):after{margin-left:.5em;font-size:.8rem;content:"\uF054";font-family:"Font Awesome 6 Pro";color:var(--colour-info)}*:where(.prev,.next):is(:hover,:focus):not(:disabled){background-color:var(--colour-light)}*:where(.prev,.next):is(:active):not(:disabled){background-color:#e0e0e0}@media screen and (prefers-color-scheme: dark){*:where(.prev,.next):is(:hover,:focus):not(:disabled){background-color:var(--colour-canvas)}*:where(.prev,.next):is(:active):not(:disabled){background-color:var(--colour-canvas)}}*:where(.prev,.next):disabled:after,*:where(.prev,.next):disabled:before{color:inherit !important}:host([data-minimal]) .pagination{justify-content:flex-end}@container (width > 23.4375em){:host([data-minimal]) .pagination{justify-content:space-between}}:host([data-minimal]) *:where(.prev,.next){display:inline-block !important}.prev{border-right:none}.prev:after{display:none}.prev:before{margin-right:.5em;font-size:.8rem;content:"\uF053";font-family:"Font Awesome 6 Pro";color:var(--colour-info)}.mobile-controls{display:block}:host([data-minimal]) .pagination{padding-top:1.5rem;display:flex;align-items:center;justify-content:flex-end}:host([data-minimal]) *:is(.mobile-controls,.item-count){display:none}@container (width > 23.4375em){.mobile-controls{display:none !important}:host([data-item-count]) .item-count{display:flex !important}}.fa-spin{display:none !important;font-size:3rem;color:var(--colour-info)}:host([data-loading]) .mobile-controls{padding-top:2rem}:host([data-loading]) .item-count,:host([data-loading]) .mobile-controls>*:not(.fa-spin){display:none !important}:host([data-loading]) .fa-spin{display:block !important;margin:auto}/*# sourceMappingURL=assets/css/components/pagination.css.map */
+
     
     ${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
     </style>
-    <div class="pagination__wrapper d-none">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="pagination d-none">
+  
+      <div class="minimal" part="minimal">
+        <div class="page-jump">
+          <div><select class="select--minimal"></select></div>
+          <span class="total-pages"></span>
+        </div>
+        
+        <button class="prev" disabled>Prev</button>
+        <button class="next" disabled>Next</button>
+      </div>
+
+      <div class="item-count" part="item-count"></div>
+      <div class="per-page" part="per-page">
+        <div>
+          <select class="select--minimal">
+            <option value="15">15</option>
+            <option value="25">25</option>
+            <option value="40">40</option>
+            <option value="50">50</option>
+          </select>
+        </div>
+        <span> / page</span>
+      </div>
+      <div class="mobile-controls m-auto text-center">
+        <i class="fa-solid fa-spinner fa-spin"></i>
+        <button class="load-more btn btn-primary m-auto">Load more</a>
+      </div>
     </div>
-    `,this.shadowRoot.appendChild(i.content.cloneNode(!0))}connectedCallback(){const t=new URLSearchParams(window.location.search);this.hasAttribute("data-total")||this.setAttribute("data-total",this.querySelectorAll("table tbody tr").length),this.hasAttribute("data-page")||this.setAttribute("data-page",t.has("page")?t.get("page"):1),this.hasAttribute("data-show")||this.setAttribute("data-show",t.has("show")?t.get("show"):15),this.hasAttribute("data-increment")||this.setAttribute("data-increment",15),this.setAttribute("data-pages",Math.ceil(this.getAttribute("data-total")/this.getAttribute("data-show"))),l(this,this.shadowRoot.querySelector(".pagination__wrapper")),this.shadowRoot.querySelector(".pagination__wrapper").classList.remove("d-none")}}export{p as default};
+    `,this.shadowRoot.appendChild(e.content.cloneNode(!0))}connectedCallback(){const i=new URLSearchParams(window.location.search);this.hasAttribute("data-total")||this.setAttribute("data-total",15),this.hasAttribute("data-page")||this.setAttribute("data-page",i.has("page")?i.get("page"):1),this.hasAttribute("data-show")||this.setAttribute("data-show",i.has("show")?i.get("show"):15),this.hasAttribute("data-increment")||this.setAttribute("data-increment",this.getAttribute("data-show"));const t=this.shadowRoot.querySelector(".page-jump select"),e=this.shadowRoot.querySelector(".prev"),p=this.shadowRoot.querySelector(".next"),c=this.shadowRoot.querySelector(".per-page select"),s=this.shadowRoot.querySelector(".load-more");this.setup(),t.addEventListener("change",n=>{this.setAttribute("data-show",this.getAttribute("data-increment")),this.setAttribute("data-page",n.target.value)}),p.addEventListener("click",n=>{t.value=parseInt(t.value)+1,t.dispatchEvent(new Event("change"))}),e.addEventListener("click",n=>{t.value=parseInt(t.value)-1,t.dispatchEvent(new Event("change"))}),c.addEventListener("change",n=>{this.setAttribute("data-increment",n.target.value)}),s.addEventListener("click",n=>{let o=parseInt(this.getAttribute("data-show"))+parseInt(this.getAttribute("data-increment"));this.setAttribute("data-show",o),o>parseInt(this.getAttribute("data-total"))&&s.remove()})}setup(){const i=this.shadowRoot.querySelector(".pagination"),t=this.shadowRoot.querySelector(".page-jump select"),e=this.shadowRoot.querySelector(".prev"),p=this.shadowRoot.querySelector(".next"),c=this.shadowRoot.querySelector(".item-count"),s=this.shadowRoot.querySelector(".per-page select"),n=this.shadowRoot.querySelector(".total-pages"),o=parseInt(this.getAttribute("data-page")),r=parseInt(this.getAttribute("data-total")),l=parseInt(this.getAttribute("data-show")),a=parseInt(this.getAttribute("data-increment")),h=Math.ceil(r/a);r>l&&i.classList.remove("d-none");let m="";for(let d=1;d<=h;d++)m+=`<option value="${d}" ${d==o?"selected":""}>${d}</option>`;t.innerHTML=m,n.innerHTML=`of ${h}`,o==h?p.setAttribute("disabled","disabled"):p.removeAttribute("disabled"),o==1?e.setAttribute("disabled","disabled"):e.removeAttribute("disabled");let g=o==1?1:(o-1)*l+1,u=o==1?l:o*l;c.innerHTML=`${g} - ${u>r?r:u} of ${r} items`;const b=[15,25,40,50];a&&s.value!=a&&!b.includes(a)&&(s.innerHTML=`<option value="${a}">${a}</option>
+      <option value="${a*2}">${a*2}</option>
+      <option value="${a*3}">${a*3}</option>
+      <option value="${a*4}">${a*4}</option>`),s.value=a}static get observedAttributes(){return["data-total","data-increment","data-page","data-show"]}attributeChangedCallback(i,t,e){switch(i){case"data-total":{t!=e&&(this.setAttribute("data-page",1),this.setup());break}case"data-show":{t!=e&&(this.setAttribute("data-page",1),this.setup(),this.dispatchEvent(new CustomEvent("update-show",{detail:{show:e}})));break}case"data-increment":{t!=e&&(this.setAttribute("data-show",e),this.setAttribute("data-page",1),this.setup(),this.dispatchEvent(new CustomEvent("update-show",{detail:{show:e}})));break}case"data-page":{t!=e&&(this.setup(),this.dispatchEvent(new CustomEvent("update-page",{detail:{page:e}})));break}}}}export{v as default};
 //# sourceMappingURL=pagination.component.min.js.map