@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

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

@@ -1,10 +1,10 @@
 /*!
-  * iamKey v7.1.0--beta7
+  * iamKey v7.2.1--beta1
   * Copyright 2022-2025 iamproperty
-  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Slider"});class f extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",p=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,l=document.createElement("template");l.innerHTML=`
+  */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Slider"});class w extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",d=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${o}/css/core.min.css`,n=document.createElement("template");n.innerHTML=`
     <style>
-    @import "${p}";
-    .row{align-items:center}:is(.min,.max){max-width:fit-content;line-height:2rem}.sliders{position:relative;padding:0}:host{max-width:var(--input-max-width, 50rem);display:block}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) var(--percent, 0%), var(--track-colour) var(--percent, 0%))}input[type=range]::-moz-range-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) var(--percent, 0%), var(--track-colour) var(--percent, 0%))}input[type=range]+input[type=range]{position:absolute;top:0;left:50%;width:50%}input[type=range]+input[type=range]::-webkit-slider-runnable-track{background:rgba(0,0,0,0);pointer-events:none;width:200%;margin-left:-100%}@supports(-moz-appearance: none){input[type=range]+input[type=range]{left:0;width:100%;pointer-events:none}}input[type=range]+input[type=range]::-moz-range-track{background:rgba(0,0,0,0);pointer-events:none}.input__wrapper{display:flex;justify-content:flex-end;--max-width: 6.25rem;--padding-top: 0.75rem}.input__wrapper>span{display:none}.input__wrapper[data-elements="2"]{justify-content:space-between;--max-width: calc(50% - 3rem);--padding-top: 2rem;position:relative}.input__wrapper[data-elements="2"]:before{content:"";position:absolute;width:4rem;height:2px;top:calc(50% - 1px);left:calc(50% - 2rem);background-color:var(--colour-border)}.input__wrapper[data-elements="2"] span{display:block;position:absolute;top:.5rem;left:1rem;color:#9d9d9d;font-size:1rem}.input__wrapper[data-elements="2"] span+span{left:calc(50% + 4rem)}::slotted(input){margin-top:0 !important;padding-top:var(--padding-top) !important;max-width:var(--max-width) !important;-webkit-appearance:none !important;appearance:none !important;min-height:auto !important;max-height:none !important}/*# sourceMappingURL=assets/css/components/slider.css.map */
+    @import "${d}";
+    @layer reset{.row{--gutter-x: 1rem;--gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(-1*var(--gutter-y));margin-right:calc(-0.5*var(--gutter-x));margin-left:calc(-0.5*var(--gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--gutter-x)*.5);padding-left:calc(var(--gutter-x)*.5);margin-top:var(--gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333333%}.col-2{flex:0 0 auto;width:16.6666666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333333%}.col-5{flex:0 0 auto;width:41.6666666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333333%}.col-8{flex:0 0 auto;width:66.6666666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333333%}.col-11{flex:0 0 auto;width:91.6666666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.3333333333%}.offset-2{margin-left:16.6666666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333333333%}.offset-5{margin-left:41.6666666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333333333%}.offset-8{margin-left:66.6666666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333333333%}.offset-11{margin-left:91.6666666667%}.g-0,.gx-0{--gutter-x: 0}.g-0,.gy-0{--gutter-y: 0}.g-1,.gx-1{--gutter-x: 0.5rem}.g-1,.gy-1{--gutter-y: 0.5rem}.g-2,.gx-2{--gutter-x: 1rem}.g-2,.gy-2{--gutter-y: 1rem}.g-3,.gx-3{--gutter-x: 1.5rem}.g-3,.gy-3{--gutter-y: 1.5rem}.g-4,.gx-4{--gutter-x: 2rem}.g-4,.gy-4{--gutter-y: 2rem}.g-5,.gx-5{--gutter-x: 3rem}.g-5,.gy-5{--gutter-y: 3rem}@media screen and (min-width: 36em){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333333%}.col-sm-2{flex:0 0 auto;width:16.6666666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333333%}.col-sm-5{flex:0 0 auto;width:41.6666666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333333%}.col-sm-8{flex:0 0 auto;width:66.6666666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333333%}.col-sm-11{flex:0 0 auto;width:91.6666666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333333333%}.offset-sm-2{margin-left:16.6666666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333333333%}.offset-sm-5{margin-left:41.6666666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333333333%}.offset-sm-8{margin-left:66.6666666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333333333%}.offset-sm-11{margin-left:91.6666666667%}.g-sm-0,.gx-sm-0{--gutter-x: 0}.g-sm-0,.gy-sm-0{--gutter-y: 0}.g-sm-1,.gx-sm-1{--gutter-x: 0.5rem}.g-sm-1,.gy-sm-1{--gutter-y: 0.5rem}.g-sm-2,.gx-sm-2{--gutter-x: 1rem}.g-sm-2,.gy-sm-2{--gutter-y: 1rem}.g-sm-3,.gx-sm-3{--gutter-x: 1.5rem}.g-sm-3,.gy-sm-3{--gutter-y: 1.5rem}.g-sm-4,.gx-sm-4{--gutter-x: 2rem}.g-sm-4,.gy-sm-4{--gutter-y: 2rem}.g-sm-5,.gx-sm-5{--gutter-x: 3rem}.g-sm-5,.gy-sm-5{--gutter-y: 3rem}}@media screen and (min-width: 62em){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333333%}.col-md-2{flex:0 0 auto;width:16.6666666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333333%}.col-md-5{flex:0 0 auto;width:41.6666666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333333%}.col-md-8{flex:0 0 auto;width:66.6666666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333333%}.col-md-11{flex:0 0 auto;width:91.6666666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333333333%}.offset-md-2{margin-left:16.6666666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333333333%}.offset-md-5{margin-left:41.6666666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333333333%}.offset-md-8{margin-left:66.6666666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333333333%}.offset-md-11{margin-left:91.6666666667%}.g-md-0,.gx-md-0{--gutter-x: 0}.g-md-0,.gy-md-0{--gutter-y: 0}.g-md-1,.gx-md-1{--gutter-x: 0.5rem}.g-md-1,.gy-md-1{--gutter-y: 0.5rem}.g-md-2,.gx-md-2{--gutter-x: 1rem}.g-md-2,.gy-md-2{--gutter-y: 1rem}.g-md-3,.gx-md-3{--gutter-x: 1.5rem}.g-md-3,.gy-md-3{--gutter-y: 1.5rem}.g-md-4,.gx-md-4{--gutter-x: 2rem}.g-md-4,.gy-md-4{--gutter-y: 2rem}.g-md-5,.gx-md-5{--gutter-x: 3rem}.g-md-5,.gy-md-5{--gutter-y: 3rem}}}.row{align-items:center}:is(.min,.max){max-width:fit-content;line-height:2rem}.sliders{position:relative;padding:0}:host{max-width:var(--input-max-width, 50rem);display:block}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) var(--percent, 0%), var(--track-colour) var(--percent, 0%))}input[type=range]::-moz-range-track{background:linear-gradient(to right, var(--track-colour), var(--track-colour) var(--start-percent, 0%), var(--thumb-colour) var(--start-percent, 0%), var(--thumb-colour) var(--percent, 0%), var(--track-colour) var(--percent, 0%))}input[type=range]+input[type=range]{position:absolute;top:0;left:50%;width:50%}input[type=range]+input[type=range]::-webkit-slider-runnable-track{background:rgba(0,0,0,0);pointer-events:none;width:200%;margin-left:-100%}@supports(-moz-appearance: none){input[type=range]+input[type=range]{left:0;width:100%;pointer-events:none}}input[type=range]+input[type=range]::-moz-range-track{background:rgba(0,0,0,0);pointer-events:none}.input__wrapper{display:flex;justify-content:flex-end;--max-width: 6.25rem;--padding-top: 0.75rem}.input__wrapper>span{display:none}.input__wrapper[data-elements="2"]{justify-content:space-between;--max-width: calc(50% - 3rem);--padding-top: 2rem;position:relative}.input__wrapper[data-elements="2"]:before{content:"";position:absolute;width:4rem;height:2px;top:calc(50% - 1px);left:calc(50% - 2rem);background-color:var(--colour-border)}.input__wrapper[data-elements="2"] span{display:block;position:absolute;top:.5rem;left:1rem;color:#9d9d9d;font-size:1rem}.input__wrapper[data-elements="2"] span+span{left:calc(50% + 4rem)}::slotted(input){margin-top:0 !important;padding-top:var(--padding-top) !important;max-width:var(--max-width) !important;-webkit-appearance:none !important;appearance:none !important;min-height:auto !important;max-height:none !important}/*# sourceMappingURL=assets/css/components/slider.css.map */
 
     </style>
     <div class="row">
@@ -15,5 +15,5 @@
       <div class="col max ps-2"></div>
     </div>
     <div class="input__wrapper"><slot></slot><span>Minimum</span><span>Maximum</span></div>
-    `,this.shadowRoot.appendChild(l.content.cloneNode(!0))}connectedCallback(){const t=this,p=this.shadowRoot.querySelector(".min"),l=this.shadowRoot.querySelector(".max"),m=this.shadowRoot.querySelector(".sliders");let s=this.querySelectorAll("input");const y=this.shadowRoot.querySelector(".input__wrapper"),g=this.closest("label");let c,v="mouseup",h="mousedown";"ontouchstart"in document.documentElement&&(v="touchend",h="touchstart");const i=function(e,r){const a=e.value,d=t.shadowRoot.querySelector(".is-first").getAttribute("min"),u=t.shadowRoot.querySelector(".is-last").getAttribute("max");if(e.classList.contains("is-last")&&!e.classList.contains("is-first")){const n=a/(u-d)*100;t.style.setProperty("--percent",n+"%"),parseFloat(e.value)<=parseFloat(t.shadowRoot.querySelector(".is-first").value)&&(t.shadowRoot.querySelector(".is-first").value=e.value,t.querySelector(".is-first").value=e.value,t.style.setProperty("--start-percent",n+"%"))}else if(e.classList.contains("is-first")&&!e.classList.contains("is-last")){const n=a/(u-d)*100;t.style.setProperty("--start-percent",n+"%"),parseFloat(e.value)>=parseFloat(t.shadowRoot.querySelector(".is-last").value)&&(t.shadowRoot.querySelector(".is-last").value=e.value,t.querySelector(".is-last").value=e.value,t.style.setProperty("--percent",n+"%"))}else{const n=(a/(u-d)*100).toFixed(2);t.style.setProperty("--percent",n+"%")}};Array.from(s).forEach((e,r)=>{const a=e.cloneNode(!0);e.setAttribute("type","number"),a.setAttribute("type","range"),r==0&&(e.classList.add("is-first"),a.classList.add("is-first"),p.innerHTML=e.getAttribute("min"),l.innerHTML=e.getAttribute("max"),m.appendChild(a)),r==s.length-1&&(e.classList.add("is-last"),a.classList.add("is-last"),m.appendChild(a)),r>1&&e.remove()}),s=this.querySelectorAll("input"),y.setAttribute("data-elements",s.length);const o=this.shadowRoot.querySelectorAll("input");Array.from(s).forEach((e,r)=>{e.addEventListener("keyup",function(a){o[r].value=e.value,i(o[r])}),e.addEventListener("keydown",function(a){o[r].value=e.value,i(o[r])}),e.addEventListener("change",function(a){o[r].value=e.value,i(o[r])})}),Array.from(o).forEach((e,r)=>{i(e),e.addEventListener(h,function(a){clearInterval(c),c=setInterval(function(){i(e),s[r].value=e.value},10)}),e.addEventListener(v,function(a){clearInterval(c)}),e.addEventListener("change",function(a){clearInterval(c),i(e),s[r].value=e.value})}),g.addEventListener("click",function(e){if(e.preventDefault(),this===e.target)t.shadowRoot.querySelector("input").focus();else return e.stopPropagation(),!1})}}export{f as default};
+    `,this.shadowRoot.appendChild(n.content.cloneNode(!0))}connectedCallback(){const o=this,d=this.shadowRoot.querySelector(".min"),n=this.shadowRoot.querySelector(".max"),u=this.shadowRoot.querySelector(".sliders");let a=this.querySelectorAll("input");const p=this.shadowRoot.querySelector(".input__wrapper"),h=this.closest("label");let m,f="mouseup",g="mousedown";"ontouchstart"in document.documentElement&&(f="touchend",g="touchstart");const i=function(t){const e=t.value,r=o.shadowRoot.querySelector(".is-first").getAttribute("min"),c=o.shadowRoot.querySelector(".is-last").getAttribute("max");if(t.classList.contains("is-last")&&!t.classList.contains("is-first")){const l=e/(c-r)*100;o.style.setProperty("--percent",l+"%"),parseFloat(t.value)<=parseFloat(o.shadowRoot.querySelector(".is-first").value)&&(o.shadowRoot.querySelector(".is-first").value=t.value,o.querySelector(".is-first").value=t.value,o.style.setProperty("--start-percent",l+"%"))}else if(t.classList.contains("is-first")&&!t.classList.contains("is-last")){const l=e/(c-r)*100;o.style.setProperty("--start-percent",l+"%"),parseFloat(t.value)>=parseFloat(o.shadowRoot.querySelector(".is-last").value)&&(o.shadowRoot.querySelector(".is-last").value=t.value,o.querySelector(".is-last").value=t.value,o.style.setProperty("--percent",l+"%"))}else{const l=(e/(c-r)*100).toFixed(2);o.style.setProperty("--percent",l+"%")}};Array.from(a).forEach((t,e)=>{const r=t.cloneNode(!0);t.setAttribute("type","number"),r.setAttribute("type","range"),e==0&&(t.classList.add("is-first"),r.classList.add("is-first"),d.innerHTML=t.getAttribute("min"),n.innerHTML=t.getAttribute("max"),u.appendChild(r)),e==a.length-1&&(t.classList.add("is-last"),r.classList.add("is-last"),u.appendChild(r)),e>1&&t.remove()}),a=this.querySelectorAll("input"),p.setAttribute("data-elements",a.length);const s=this.shadowRoot.querySelectorAll("input");Array.from(a).forEach((t,e)=>{t.addEventListener("keyup",function(){s[e].value=t.value,i(s[e])}),t.addEventListener("keydown",function(){s[e].value=t.value,i(s[e])}),t.addEventListener("change",function(){s[e].value=t.value,i(s[e])})}),Array.from(s).forEach((t,e)=>{i(t),t.addEventListener(g,function(){clearInterval(m),m=setInterval(function(){i(t),a[e].value=t.value},10)}),t.addEventListener(f,function(){clearInterval(m)}),t.addEventListener("change",function(){clearInterval(m),i(t),a[e].value=t.value})}),h.addEventListener("click",function(t){if(t.preventDefault(),this===t.target)o.shadowRoot.querySelector("input").focus();else return t.stopPropagation(),!1})}}export{w as default};
 //# sourceMappingURL=slider.component.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.component.min.js","sources":["slider.component.js"],"sourcesContent":["// @ts-nocheck\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'Slider',\n});\nclass iamSlider extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css')\n            ? document.body.getAttribute('data-core-css')\n            : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/slider.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    </style>\n    <div class=\"row\">\n      <div class=\"col min pe-2\"></div>\n      <div class=\"col sliders\">\n        \n      </div>\n      <div class=\"col max ps-2\"></div>\n    </div>\n    <div class=\"input__wrapper\"><slot></slot><span>Minimum</span><span>Maximum</span></div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const slider = this;\n        const minElement = this.shadowRoot.querySelector('.min');\n        const maxElement = this.shadowRoot.querySelector('.max');\n        const slidersHolder = this.shadowRoot.querySelector('.sliders');\n        let inputs = this.querySelectorAll('input');\n        const inputWrapper = this.shadowRoot.querySelector('.input__wrapper');\n        const label = this.closest('label');\n        let stepperInterval, stepperEvent = 'mouseup', stepperStart = 'mousedown';\n        if ('ontouchstart' in document.documentElement) {\n            stepperEvent = 'touchend';\n            stepperStart = 'touchstart';\n        }\n        const stepperFunction = function (input, eventType) {\n            const value = input.value;\n            const min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');\n            const max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');\n            if (input.classList.contains('is-last') && !input.classList.contains('is-first')) {\n                const percent = (value / (max - min)) * 100;\n                slider.style.setProperty('--percent', percent + '%');\n                if (parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)) {\n                    slider.shadowRoot.querySelector('.is-first').value = input.value;\n                    slider.querySelector('.is-first').value = input.value;\n                    slider.style.setProperty('--start-percent', percent + '%');\n                }\n            }\n            else if (input.classList.contains('is-first') && !input.classList.contains('is-last')) {\n                const percent = (value / (max - min)) * 100;\n                slider.style.setProperty('--start-percent', percent + '%');\n                if (parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)) {\n                    slider.shadowRoot.querySelector('.is-last').value = input.value;\n                    slider.querySelector('.is-last').value = input.value;\n                    slider.style.setProperty('--percent', percent + '%');\n                }\n            }\n            else {\n                const percent = ((value / (max - min)) * 100).toFixed(2);\n                slider.style.setProperty('--percent', percent + '%');\n            }\n        };\n        // Create sliders\n        Array.from(inputs).forEach((input, index) => {\n            const rangeInput = input.cloneNode(true);\n            input.setAttribute('type', 'number');\n            rangeInput.setAttribute('type', 'range');\n            if (index == 0) {\n                input.classList.add('is-first');\n                rangeInput.classList.add('is-first');\n                minElement.innerHTML = input.getAttribute('min');\n                maxElement.innerHTML = input.getAttribute('max');\n                slidersHolder.appendChild(rangeInput);\n            }\n            if (index == inputs.length - 1) {\n                input.classList.add('is-last');\n                rangeInput.classList.add('is-last');\n                slidersHolder.appendChild(rangeInput);\n            }\n            if (index > 1) {\n                input.remove();\n            }\n        });\n        inputs = this.querySelectorAll('input');\n        inputWrapper.setAttribute('data-elements', inputs.length);\n        const sliders = this.shadowRoot.querySelectorAll('input');\n        Array.from(inputs).forEach((input, index) => {\n            input.addEventListener('keyup', function (event) {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n            input.addEventListener('keydown', function (event) {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n            input.addEventListener('change', function (event) {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n        });\n        Array.from(sliders).forEach((input, index) => {\n            stepperFunction(input, 'start');\n            input.addEventListener(stepperStart, function (event) {\n                clearInterval(stepperInterval);\n                stepperInterval = setInterval(function () {\n                    stepperFunction(input, 'drag');\n                    inputs[index].value = input.value;\n                }, 10);\n            });\n            input.addEventListener(stepperEvent, function (event) {\n                clearInterval(stepperInterval);\n            });\n            input.addEventListener('change', function (event) {\n                clearInterval(stepperInterval);\n                stepperFunction(input, 'click');\n                inputs[index].value = input.value;\n            });\n        });\n        // Move focus to slider when clicking on label\n        label.addEventListener('click', function (event) {\n            event.preventDefault();\n            if (this === event.target) {\n                /* click was on label */\n                slider.shadowRoot.querySelector('input').focus();\n            }\n            else {\n                /* click was on input */\n                event.stopPropagation();\n                return false;\n            }\n        });\n    } // Connected callback\n}\nexport default iamSlider;\n"],"names":["iamSlider","assetLocation","coreCSS","template","slider","minElement","maxElement","slidersHolder","inputs","inputWrapper","label","stepperInterval","stepperEvent","stepperStart","stepperFunction","input","eventType","value","min","max","percent","index","rangeInput","sliders","event"],"mappings":";;;IAEA,OAAO,UAAY,OAAO,WAAa,GACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,QACb,CAAC,EACD,MAAMA,UAAkB,WAAY,CAChC,aAAc,CACV,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,EAClC,MAAMC,EAAgB,SAAS,KAAK,aAAa,sBAAsB,EACjE,SAAS,KAAK,aAAa,sBAAsB,EACjD,UACAC,EAAU,SAAS,KAAK,aAAa,eAAe,EACpD,SAAS,KAAK,aAAa,eAAe,EAC1C,GAAGD,qBAEHE,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA,eAEdD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYP,KAAK,WAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,MAAMC,EAAS,KACTC,EAAa,KAAK,WAAW,cAAc,MAAM,EACjDC,EAAa,KAAK,WAAW,cAAc,MAAM,EACjDC,EAAgB,KAAK,WAAW,cAAc,UAAU,EAC9D,IAAIC,EAAS,KAAK,iBAAiB,OAAO,EAC1C,MAAMC,EAAe,KAAK,WAAW,cAAc,iBAAiB,EAC9DC,EAAQ,KAAK,QAAQ,OAAO,EAClC,IAAIC,EAAiBC,EAAe,UAAWC,EAAe,YAC1D,iBAAkB,SAAS,kBAC3BD,EAAe,WACfC,EAAe,cAEnB,MAAMC,EAAkB,SAAUC,EAAOC,EAAW,CAChD,MAAMC,EAAQF,EAAM,MACdG,EAAMd,EAAO,WAAW,cAAc,WAAW,EAAE,aAAa,KAAK,EACrEe,EAAMf,EAAO,WAAW,cAAc,UAAU,EAAE,aAAa,KAAK,EAC1E,GAAIW,EAAM,UAAU,SAAS,SAAS,GAAK,CAACA,EAAM,UAAU,SAAS,UAAU,EAAG,CAC9E,MAAMK,EAAWH,GAASE,EAAMD,GAAQ,IACxCd,EAAO,MAAM,YAAY,YAAagB,EAAU,GAAG,EAC/C,WAAWL,EAAM,KAAK,GAAK,WAAWX,EAAO,WAAW,cAAc,WAAW,EAAE,KAAK,IACxFA,EAAO,WAAW,cAAc,WAAW,EAAE,MAAQW,EAAM,MAC3DX,EAAO,cAAc,WAAW,EAAE,MAAQW,EAAM,MAChDX,EAAO,MAAM,YAAY,kBAAmBgB,EAAU,GAAG,WAGxDL,EAAM,UAAU,SAAS,UAAU,GAAK,CAACA,EAAM,UAAU,SAAS,SAAS,EAAG,CACnF,MAAMK,EAAWH,GAASE,EAAMD,GAAQ,IACxCd,EAAO,MAAM,YAAY,kBAAmBgB,EAAU,GAAG,EACrD,WAAWL,EAAM,KAAK,GAAK,WAAWX,EAAO,WAAW,cAAc,UAAU,EAAE,KAAK,IACvFA,EAAO,WAAW,cAAc,UAAU,EAAE,MAAQW,EAAM,MAC1DX,EAAO,cAAc,UAAU,EAAE,MAAQW,EAAM,MAC/CX,EAAO,MAAM,YAAY,YAAagB,EAAU,GAAG,OAGtD,CACD,MAAMA,GAAYH,GAASE,EAAMD,GAAQ,KAAK,QAAQ,CAAC,EACvDd,EAAO,MAAM,YAAY,YAAagB,EAAU,GAAG,EAEnE,EAEQ,MAAM,KAAKZ,CAAM,EAAE,QAAQ,CAACO,EAAOM,IAAU,CACzC,MAAMC,EAAaP,EAAM,UAAU,EAAI,EACvCA,EAAM,aAAa,OAAQ,QAAQ,EACnCO,EAAW,aAAa,OAAQ,OAAO,EACnCD,GAAS,IACTN,EAAM,UAAU,IAAI,UAAU,EAC9BO,EAAW,UAAU,IAAI,UAAU,EACnCjB,EAAW,UAAYU,EAAM,aAAa,KAAK,EAC/CT,EAAW,UAAYS,EAAM,aAAa,KAAK,EAC/CR,EAAc,YAAYe,CAAU,GAEpCD,GAASb,EAAO,OAAS,IACzBO,EAAM,UAAU,IAAI,SAAS,EAC7BO,EAAW,UAAU,IAAI,SAAS,EAClCf,EAAc,YAAYe,CAAU,GAEpCD,EAAQ,GACRN,EAAM,OAAM,CAE5B,CAAS,EACDP,EAAS,KAAK,iBAAiB,OAAO,EACtCC,EAAa,aAAa,gBAAiBD,EAAO,MAAM,EACxD,MAAMe,EAAU,KAAK,WAAW,iBAAiB,OAAO,EACxD,MAAM,KAAKf,CAAM,EAAE,QAAQ,CAACO,EAAOM,IAAU,CACzCN,EAAM,iBAAiB,QAAS,SAAUS,EAAO,CAC7CD,EAAQF,CAAK,EAAE,MAAQN,EAAM,MAC7BD,EAAgBS,EAAQF,CAAK,CAAC,CAC9C,CAAa,EACDN,EAAM,iBAAiB,UAAW,SAAUS,EAAO,CAC/CD,EAAQF,CAAK,EAAE,MAAQN,EAAM,MAC7BD,EAAgBS,EAAQF,CAAK,CAAC,CAC9C,CAAa,EACDN,EAAM,iBAAiB,SAAU,SAAUS,EAAO,CAC9CD,EAAQF,CAAK,EAAE,MAAQN,EAAM,MAC7BD,EAAgBS,EAAQF,CAAK,CAAC,CAC9C,CAAa,CACb,CAAS,EACD,MAAM,KAAKE,CAAO,EAAE,QAAQ,CAACR,EAAOM,IAAU,CAC1CP,EAAgBC,CAAc,EAC9BA,EAAM,iBAAiBF,EAAc,SAAUW,EAAO,CAClD,cAAcb,CAAe,EAC7BA,EAAkB,YAAY,UAAY,CACtCG,EAAgBC,CAAa,EAC7BP,EAAOa,CAAK,EAAE,MAAQN,EAAM,KAC/B,EAAE,EAAE,CACrB,CAAa,EACDA,EAAM,iBAAiBH,EAAc,SAAUY,EAAO,CAClD,cAAcb,CAAe,CAC7C,CAAa,EACDI,EAAM,iBAAiB,SAAU,SAAUS,EAAO,CAC9C,cAAcb,CAAe,EAC7BG,EAAgBC,CAAc,EAC9BP,EAAOa,CAAK,EAAE,MAAQN,EAAM,KAC5C,CAAa,CACb,CAAS,EAEDL,EAAM,iBAAiB,QAAS,SAAUc,EAAO,CAE7C,GADAA,EAAM,eAAc,EAChB,OAASA,EAAM,OAEfpB,EAAO,WAAW,cAAc,OAAO,EAAE,MAAK,MAI9C,QAAAoB,EAAM,gBAAe,EACd,EAEvB,CAAS,CACJ,CACL"}
+{"version":3,"file":"slider.component.min.js","sources":["slider.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'Slider',\n});\nclass iamSlider extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const coreCSS = document.body.hasAttribute('data-core-css')\n            ? document.body.getAttribute('data-core-css')\n            : `${assetLocation}/css/core.min.css`;\n        const loadCSS = `@import \"${assetLocation}/css/components/slider.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    @import \"${coreCSS}\";\n    ${loadCSS}\n    </style>\n    <div class=\"row\">\n      <div class=\"col min pe-2\"></div>\n      <div class=\"col sliders\">\n        \n      </div>\n      <div class=\"col max ps-2\"></div>\n    </div>\n    <div class=\"input__wrapper\"><slot></slot><span>Minimum</span><span>Maximum</span></div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const slider = this;\n        const minElement = this.shadowRoot.querySelector('.min');\n        const maxElement = this.shadowRoot.querySelector('.max');\n        const slidersHolder = this.shadowRoot.querySelector('.sliders');\n        let inputs = this.querySelectorAll('input');\n        const inputWrapper = this.shadowRoot.querySelector('.input__wrapper');\n        const label = this.closest('label');\n        let stepperInterval, stepperEvent = 'mouseup', stepperStart = 'mousedown';\n        if ('ontouchstart' in document.documentElement) {\n            stepperEvent = 'touchend';\n            stepperStart = 'touchstart';\n        }\n        const stepperFunction = function (input) {\n            const value = input.value;\n            const min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');\n            const max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');\n            if (input.classList.contains('is-last') && !input.classList.contains('is-first')) {\n                const percent = (value / (max - min)) * 100;\n                slider.style.setProperty('--percent', percent + '%');\n                if (parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)) {\n                    slider.shadowRoot.querySelector('.is-first').value = input.value;\n                    slider.querySelector('.is-first').value = input.value;\n                    slider.style.setProperty('--start-percent', percent + '%');\n                }\n            }\n            else if (input.classList.contains('is-first') && !input.classList.contains('is-last')) {\n                const percent = (value / (max - min)) * 100;\n                slider.style.setProperty('--start-percent', percent + '%');\n                if (parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)) {\n                    slider.shadowRoot.querySelector('.is-last').value = input.value;\n                    slider.querySelector('.is-last').value = input.value;\n                    slider.style.setProperty('--percent', percent + '%');\n                }\n            }\n            else {\n                const percent = ((value / (max - min)) * 100).toFixed(2);\n                slider.style.setProperty('--percent', percent + '%');\n            }\n        };\n        // Create sliders\n        Array.from(inputs).forEach((input, index) => {\n            const rangeInput = input.cloneNode(true);\n            input.setAttribute('type', 'number');\n            rangeInput.setAttribute('type', 'range');\n            if (index == 0) {\n                input.classList.add('is-first');\n                rangeInput.classList.add('is-first');\n                minElement.innerHTML = input.getAttribute('min');\n                maxElement.innerHTML = input.getAttribute('max');\n                slidersHolder.appendChild(rangeInput);\n            }\n            if (index == inputs.length - 1) {\n                input.classList.add('is-last');\n                rangeInput.classList.add('is-last');\n                slidersHolder.appendChild(rangeInput);\n            }\n            if (index > 1) {\n                input.remove();\n            }\n        });\n        inputs = this.querySelectorAll('input');\n        inputWrapper.setAttribute('data-elements', inputs.length);\n        const sliders = this.shadowRoot.querySelectorAll('input');\n        Array.from(inputs).forEach((input, index) => {\n            input.addEventListener('keyup', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n            input.addEventListener('keydown', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n            input.addEventListener('change', function () {\n                sliders[index].value = input.value;\n                stepperFunction(sliders[index]);\n            });\n        });\n        Array.from(sliders).forEach((input, index) => {\n            stepperFunction(input, 'start');\n            input.addEventListener(stepperStart, function () {\n                clearInterval(stepperInterval);\n                stepperInterval = setInterval(function () {\n                    stepperFunction(input, 'drag');\n                    inputs[index].value = input.value;\n                }, 10);\n            });\n            input.addEventListener(stepperEvent, function () {\n                clearInterval(stepperInterval);\n            });\n            input.addEventListener('change', function () {\n                clearInterval(stepperInterval);\n                stepperFunction(input, 'click');\n                inputs[index].value = input.value;\n            });\n        });\n        // Move focus to slider when clicking on label\n        label.addEventListener('click', function (event) {\n            event.preventDefault();\n            if (this === event.target) {\n                /* click was on label */\n                slider.shadowRoot.querySelector('input').focus();\n            }\n            else {\n                /* click was on input */\n                event.stopPropagation();\n                return false;\n            }\n        });\n    } // Connected callback\n}\nexport default iamSlider;\n"],"names":["iamSlider","assetLocation","coreCSS","template","slider","minElement","maxElement","slidersHolder","inputs","inputWrapper","label","stepperInterval","stepperEvent","stepperStart","stepperFunction","input","value","min","max","percent","index","rangeInput","sliders","event"],"mappings":"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"}

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

@@ -1,42 +1,29 @@
-// @ts-nocheck
-import * as tableModule from '../../modules/table.js';
-class iamTable extends HTMLElement {
+import { moveAttributesToComponents, findForm, setupBasicTable, setupAdvancedTable, paginateRows, setupNoSubmitTable, setupSubmitTable, setupAjaxTable, loadAjaxTable, paginateTable, } from '../../modules/table.js';
+class iamTableBasic 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/table.css";`;
+        const loadCSS = `@import "${assetLocation}/css/components/table.component.css";`;
         const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
         const template = document.createElement('template');
         template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
 
-    :host(.mh-sm){
-      max-height: none!important;
-    }
-    :host(.mh-md){
-      max-height: none!important;
-    }
-    :host(.mh-lg){
-      max-height: none!important;
-    }
-    
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <slot name="before"></slot>
-    <div class="table--cta">
-    <div class="table__wrapper">
-      <slot></slot>
+    <div class="table__container">
+      <slot name="before"></slot>
+      <div class="table--cta">
+        <div class="table__wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      <iam-pagination part="pagination" class="pagination--table" ></iam-pagination>
     </div>
-    </div>
-    <iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page') ? `data-page="${this.getAttribute('data-page')}"` : ''} ></iam-pagination>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
         // insert extra CSS
@@ -45,187 +32,36 @@ class iamTable extends HTMLElement {
         }
     }
     connectedCallback() {
-        const params = new URLSearchParams(window.location.search);
-        // Set default attributes
-        if (!this.hasAttribute('data-total')) {
-            this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
-        }
-        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', this.getAttribute('data-show'));
-        }
-        // Update table__wrapper class
-        let classList = this.classList.toString();
-        classList = classList.replace('table--cta', '');
-        classList = classList.replace('table--loading', '');
-        //classList = classList.replace('mh-md','');
-        this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
-        // set actionbar class if needed
-        if (this.querySelector('.actionbar__sticky')) {
-            this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
-        }
-        this.table = this.querySelector('table');
-        this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
-        this.pagination = this.shadowRoot.querySelector('iam-pagination');
-        this.pagination.setAttribute('data-total', this.getAttribute('data-total'));
-        this.pagination.setAttribute('data-page', this.getAttribute('data-page'));
-        this.pagination.setAttribute('data-show', this.getAttribute('data-show'));
-        this.pagination.setAttribute('data-increment', this.getAttribute('data-show'));
-        if (this.hasAttribute('data-page-jump')) {
-            this.pagination.setAttribute('data-page-jump', 'true');
-        }
-        if (this.hasAttribute('data-per-page')) {
-            this.pagination.setAttribute('data-per-page', 'true');
-        }
-        if (this.hasAttribute('data-item-count')) {
-            this.pagination.setAttribute('data-item-count', 'true');
-        }
-        if (this.hasAttribute('data-loading')) {
-            this.pagination.setAttribute('data-loading', 'true');
-        }
-        if (this.classList.contains('table--fullwidth')) {
-            this.pagination.setAttribute('data-minimal', 'true');
-        }
-        // Remove table CTA
-        const isCTA = this.classList.contains('table--cta');
-        if (!isCTA)
-            this.shadowRoot.querySelector('.table--cta').classList.remove('table--cta');
-        // Set events on the filter table
-        this.form = document.createElement('form');
-        if (this.hasAttribute('data-filterby')) {
-            this.form = document.querySelector(`#${this.getAttribute('data-filterby')}`);
-        }
-        else {
-            this.table.parentNode.insertBefore(this.form, this.table.nextSibling);
-        }
-        // Set ajax class
-        if (this.form.hasAttribute('data-ajax')) {
-            this.table.classList.add('table--ajax');
-        }
-        // Create a data list if a search input is present
-        tableModule.createSearchDataList(this.table, this.form);
-        if (!this.form.querySelector('[data-pagination]')) {
-            this.form.insertAdjacentHTML('beforeend', `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`);
+        const pagination = this.shadowRoot.querySelector('iam-pagination');
+        const table = this.querySelector('table');
+        const form = findForm(this, table);
+        const savedTableBody = table.querySelector('tbody').cloneNode(true);
+        moveAttributesToComponents(this);
+        setupBasicTable(this, table, form, pagination);
+        setupAdvancedTable(this, table, form, pagination);
+        if (this.hasAttribute('data-submit')) {
+            setupSubmitTable(this, table, form, pagination);
+            paginateTable(this, table, form, pagination, () => {
+                form.submit();
+            });
         }
-        if (!this.form.querySelector('[data-show]')) {
-            this.form.insertAdjacentHTML('beforeend', `<input name="show" type="hidden" value="${this.getAttribute('data-show')}" data-show="true" />`);
+        else if (this.hasAttribute('data-no-submit')) {
+            setupNoSubmitTable(this, table, form, pagination, savedTableBody);
+            paginateTable(this, table, form, pagination, () => {
+                paginateRows(this);
+            });
         }
-        // Event listeners
-        tableModule.addTableEventListeners(this.table);
-        tableModule.addFilterEventListeners(this.table, this.form, this.pagination, this, this.savedTableBody);
-        tableModule.addPaginationEventListeners(this.table, this.form, this.pagination, this);
-        tableModule.addExportEventListeners(this.shadowRoot.querySelector('[data-export]'), this.table);
-        if (this.form.getAttribute('data-ajax')) {
-            tableModule.loadAjaxTable(this.table, this.form, this.pagination, this);
+        else if (this.hasAttribute('data-ajax')) {
+            setupAjaxTable(this, table, form, pagination);
+            paginateTable(this, table, form, pagination, () => {
+                loadAjaxTable(this, table, form, pagination);
+            });
         }
         else {
-            function uniqueID(index = 1) {
-                const ID = Math.floor(Math.random() * Date.now() * (index + 1));
-                return ID;
-            }
-            // Add in the checkboxes
-            if (this.querySelector('iam-actionbar[data-selectall]') ||
-                document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`)) {
-                const actionbar = this.querySelector('iam-actionbar[data-selectall]')
-                    ? this.querySelector('iam-actionbar[data-selectall]')
-                    : document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`);
-                Array.from(this.table.querySelectorAll('thead tr')).forEach((row, index) => {
-                    row.insertAdjacentHTML('afterbegin', `<th class="th--fixed"></th>`);
-                });
-                Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
-                    if (!row.querySelector('.selectrow')) {
-                        const rowID = `row${uniqueID(index)}`;
-                        row.insertAdjacentHTML('afterbegin', `<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${rowID}" ${row.hasAttribute('data-selected') ? `checked="true"` : ''}/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`);
-                    }
-                });
-                this.table.addEventListener('change', (event) => {
-                    if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')) {
-                        const count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
-                        const countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
-                        actionbar.setAttribute('data-selected', count == countChecked ? 'all' : countChecked);
-                    }
-                });
-                actionbar.addEventListener('selected', (event) => {
-                    if (event.detail.selected == '0') {
-                        Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input, index) => {
-                            input.checked = false;
-                        });
-                    }
-                    else if (event.detail.selected == 'all') {
-                        Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input, index) => {
-                            input.checked = true;
-                        });
-                    }
-                });
-            }
-            // Make the dialog menus columns fixed
-            let colIndex = -1;
-            Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
-                if (row.querySelector(':scope > td > .dialog__wrapper')) {
-                    const columnn = row.querySelector(':scope > td > .dialog__wrapper').parentNode;
-                    columnn.classList.add('td--fixed');
-                    colIndex = Array.from(columnn.parentNode.children).indexOf(columnn);
-                }
+            paginateTable(this, table, form, pagination, () => {
+                paginateRows(this);
             });
-            if (colIndex != -1) {
-                this.table.querySelector(`thead tr th:nth-child(${colIndex + 1})`).classList.add('th--fixed');
-                Array.from(this.table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`)).forEach((col, index) => {
-                    col.classList.add('td--fixed');
-                });
-            }
-            tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
-            if (!this.hasAttribute('data-no-submit'))
-                tableModule.filterTable(this.table, this.form, this);
-            tableModule.populateDataQueries(this.table, this.form);
-        }
-        this.shadowRoot.querySelector('.table__wrapper').addEventListener('scroll', (event) => {
-            if (this.table.querySelector('dialog[open]')) {
-                this.table.querySelector('dialog[open]').close();
-                this.table.querySelector('.dialog__wrapper > button.active').classList.remove('active');
-            }
-        });
-        // Push up the pagination events
-        this.pagination.addEventListener('update-show', (event) => {
-            const show = event.detail.show;
-            const updateEvent = new CustomEvent('update-show', { detail: { show: show } });
-            this.dispatchEvent(updateEvent);
-        });
-        this.pagination.addEventListener('update-page', (event) => {
-            const page = event.detail.page;
-            const updateEvent = new CustomEvent('update-page', { detail: { page: page } });
-            this.dispatchEvent(updateEvent);
-        });
-    }
-    static get observedAttributes() {
-        return ['data-total', 'data-page', 'data-show'];
-    }
-    attributeChangedCallback(attrName, oldVal, newVal) {
-        this.pagination = this.shadowRoot.querySelector('iam-pagination');
-        switch (attrName) {
-            case 'data-total': {
-                if (oldVal != newVal) {
-                    this.pagination.setAttribute('data-total', newVal);
-                }
-                break;
-            }
-            case 'data-show': {
-                if (oldVal != newVal) {
-                    this.pagination.setAttribute('data-show', newVal);
-                }
-                break;
-            }
-            case 'data-page': {
-                if (oldVal != newVal) {
-                    this.pagination.setAttribute('data-page', newVal);
-                }
-                break;
-            }
         }
     }
 }
-export default iamTable;
+export default iamTableBasic;