@iamproperty/components 7.2.0 → 7.2.1--beta2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/components/actionbar.component.css +1 -1
- package/assets/css/components/actionbar.component.css.map +1 -1
- package/assets/css/components/actionbar.global.css +1 -1
- package/assets/css/components/actionbar.global.css.map +1 -1
- package/assets/css/components/barchart.component.css +1 -1
- package/assets/css/components/barchart.component.css.map +1 -1
- package/assets/css/components/card.component.css +1 -1
- package/assets/css/components/card.component.css.map +1 -1
- package/assets/css/components/carousel.component.css +1 -1
- package/assets/css/components/carousel.component.css.map +1 -1
- package/assets/css/components/doughnutchart.component.css +1 -1
- package/assets/css/components/doughnutchart.component.css.map +1 -1
- package/assets/css/components/pagination.css +1 -1
- package/assets/css/components/pagination.css.map +1 -1
- package/assets/css/components/table-basic.component.css +1 -0
- package/assets/css/components/table-basic.component.css.map +1 -0
- package/assets/css/components/table-basic.global.css +1 -0
- package/assets/css/components/table-basic.global.css.map +1 -0
- package/assets/css/components/table.component.css +1 -1
- package/assets/css/components/table.component.css.map +1 -1
- package/assets/css/components/table.global.css +1 -1
- package/assets/css/components/table.global.css.map +1 -1
- package/assets/css/components/tabs.config.css +1 -0
- package/assets/css/components/tabs.config.css.map +1 -0
- package/assets/css/components/tabs.css +1 -1
- package/assets/css/components/tabs.css.map +1 -1
- package/assets/css/core.min.css +1 -1
- package/assets/css/core.min.css.map +1 -1
- package/assets/css/mobile-core.min.css +1 -1
- package/assets/css/mobile-core.min.css.map +1 -1
- package/assets/css/mobile.min.css +1 -1
- package/assets/css/mobile.min.css.map +1 -1
- package/assets/css/style.min.css +1 -1
- package/assets/css/style.min.css.map +1 -1
- package/assets/js/components/accordion/accordion.component.min.js +1 -1
- package/assets/js/components/actionbar/actionbar.component.min.js +4 -4
- package/assets/js/components/address-lookup/address-lookup.component.min.js +1 -1
- package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
- package/assets/js/components/barchart/barchart.component.min.js +2 -2
- package/assets/js/components/barchart/barchart.component.min.js.map +1 -1
- package/assets/js/components/bento-grid/bento-grid.component.min.js +1 -1
- package/assets/js/components/card/card.component.min.js +2 -2
- package/assets/js/components/carousel/carousel.component.min.js +2 -2
- package/assets/js/components/collapsible-side/collapsible-side.component.min.js +1 -1
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js +2 -2
- package/assets/js/components/doughnutchart/doughnutchart.component.min.js.map +1 -1
- package/assets/js/components/fileupload/fileupload.component.min.js +1 -1
- package/assets/js/components/filter-card/filter-card.component.min.js +1 -1
- package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
- package/assets/js/components/header/header.component.min.js +1 -1
- package/assets/js/components/inline-edit/inline-edit.component.min.js +1 -1
- package/assets/js/components/marketing/marketing.component.min.js +1 -1
- package/assets/js/components/menu/menu.component.min.js +1 -1
- package/assets/js/components/multi-step/multi-step.component.min.js +1 -1
- package/assets/js/components/multiselect/multiselect.component.min.js +1 -1
- package/assets/js/components/nav/nav.component.min.js +1 -1
- package/assets/js/components/notification/notification.component.min.js +1 -1
- package/assets/js/components/pagination/pagination.component.js +11 -4
- package/assets/js/components/pagination/pagination.component.min.js +5 -5
- package/assets/js/components/pagination/pagination.component.min.js.map +1 -1
- package/assets/js/components/record-card/record-card.component.min.js +1 -1
- package/assets/js/components/search/search.component.min.js +1 -1
- package/assets/js/components/search/search.component.min.js.map +1 -1
- package/assets/js/components/slider/slider.component.min.js +1 -1
- package/assets/js/components/table/table.component.js +36 -198
- package/assets/js/components/table/table.component.min.js +13 -23
- package/assets/js/components/table/table.component.min.js.map +1 -1
- package/assets/js/components/table-ajax/table-ajax.component.js +46 -0
- package/assets/js/components/table-ajax/table-ajax.component.min.js +22 -0
- package/assets/js/components/table-ajax/table-ajax.component.min.js.map +1 -0
- package/assets/js/components/table-basic/table-basic.component.js +46 -0
- package/assets/js/components/table-basic/table-basic.component.min.js +22 -0
- package/assets/js/components/table-basic/table-basic.component.min.js.map +1 -0
- package/assets/js/components/table-no-submit/table-no-submit.component.js +77 -0
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js +22 -0
- package/assets/js/components/table-no-submit/table-no-submit.component.min.js.map +1 -0
- package/assets/js/components/table-submit/table-submit.component.js +55 -0
- package/assets/js/components/table-submit/table-submit.component.min.js +22 -0
- package/assets/js/components/table-submit/table-submit.component.min.js.map +1 -0
- package/assets/js/components/tabs/tabs.component.js +2 -0
- package/assets/js/components/tabs/tabs.component.min.js +6 -4
- package/assets/js/components/tabs/tabs.component.min.js.map +1 -1
- package/assets/js/components/video-card/video-card.component.min.js +1 -1
- package/assets/js/modules/helpers.js +4 -0
- package/assets/js/modules/table.js +544 -294
- package/assets/js/modules/tabs.js +43 -13
- package/assets/js/scripts.bundle.js +3 -3
- package/assets/js/scripts.bundle.js.map +1 -1
- package/assets/js/scripts.bundle.min.js +2 -2
- package/assets/js/scripts.bundle.min.js.map +1 -1
- package/assets/js/scripts.js +31 -24
- package/assets/js/tests/table.spec.js +0 -31
- package/assets/sass/_components.scss +3 -0
- package/assets/sass/components/actionbar.component.scss +1 -0
- package/assets/sass/components/actionbar.global.scss +0 -70
- package/assets/sass/components/pagination.scss +2 -1
- package/assets/sass/components/table-basic.component.scss +132 -0
- package/assets/sass/components/table-basic.global.scss +365 -0
- package/assets/sass/components/table.component.scss +2 -133
- package/assets/sass/components/table.global.scss +175 -434
- package/assets/sass/components/tabs.config.scss +27 -0
- package/assets/sass/components/tabs.scss +33 -1
- package/assets/sass/elements/buttons--global.scss +2 -1
- package/assets/sass/elements/table.element.scss +9 -7
- package/assets/sass/foundations/root.scss +1 -1
- package/assets/ts/components/pagination/pagination.component.ts +17 -4
- package/assets/ts/components/table/table.component.ts +49 -243
- package/assets/ts/components/table-ajax/table-ajax.component.ts +64 -0
- package/assets/ts/components/table-basic/README.md +40 -0
- package/assets/ts/components/table-basic/table-basic.component.ts +56 -0
- package/assets/ts/components/table-no-submit/table-no-submit.component.ts +134 -0
- package/assets/ts/components/table-submit/table-submit.component.ts +64 -0
- package/assets/ts/components/tabs/tabs.component.ts +2 -0
- package/assets/ts/modules/helpers.ts +6 -0
- package/assets/ts/modules/table.ts +656 -328
- package/assets/ts/modules/tabs.ts +54 -12
- package/assets/ts/scripts.ts +5 -3
- package/assets/ts/tests/table.spec.ts +0 -38
- package/dist/components.es.js +138 -136
- package/dist/components.umd.js +108 -116
- package/package.json +1 -1
- package/src/components/Table/TableAjax.vue +34 -0
- package/src/components/Table/TableBasic.vue +34 -0
- package/src/components/Table/TableNoSubmit.vue +34 -0
- package/src/components/Table/TableSubmit.vue +34 -0
- package/src/components/Table/Table.spec.js +0 -47
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.2.
|
|
2
|
+
* iamKey v7.2.1--beta2
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
4
|
*/function f(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]")||event.target.matches("[data-dismiss-button]"))&&(t.preventDefault(),c(i))},!1),i.hasAttribute("data-timeout")){const t=i.getAttribute("data-timeout"),o=new m(function(){c(i)},t);i.addEventListener("mouseenter",()=>{o.pause()}),i.addEventListener("mouseleave",()=>{o.resume()})}}function m(i,t){let o,n,e=t;this.pause=function(){window.clearTimeout(o),e-=new Date-n},this.resume=function(){n=new Date,window.clearTimeout(o),o=window.setTimeout(i,e)},this.resume()}const c=function(i){i.classList.add("d-none")};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Notification"});class u extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.body.hasAttribute("data-assets-location")?document.body.getAttribute("data-assets-location"):"/assets",o=document.body.hasAttribute("data-core-css")?document.body.getAttribute("data-core-css"):`${t}/css/core.min.css`,n=document.createElement("template");n.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -87,8 +87,14 @@ class iamPagination extends HTMLElement {
|
|
|
87
87
|
perPage.addEventListener('change', (event) => {
|
|
88
88
|
this.setAttribute('data-increment', event.target.value);
|
|
89
89
|
});
|
|
90
|
+
// Load more button
|
|
91
|
+
const increment = parseInt(this.getAttribute('data-increment'));
|
|
92
|
+
const show = parseInt(this.getAttribute('data-show'));
|
|
93
|
+
if (show >= parseInt(this.getAttribute('data-total'))) {
|
|
94
|
+
loadMore.remove();
|
|
95
|
+
}
|
|
90
96
|
loadMore.addEventListener('click', () => {
|
|
91
|
-
const newValue =
|
|
97
|
+
const newValue = show + increment;
|
|
92
98
|
this.setAttribute('data-show', newValue);
|
|
93
99
|
if (newValue > parseInt(this.getAttribute('data-total'))) {
|
|
94
100
|
loadMore.remove();
|
|
@@ -149,14 +155,14 @@ class iamPagination extends HTMLElement {
|
|
|
149
155
|
switch (attrName) {
|
|
150
156
|
case 'data-total': {
|
|
151
157
|
if (oldVal != newVal) {
|
|
152
|
-
this.setAttribute('data-page', 1);
|
|
158
|
+
//this.setAttribute('data-page', 1);
|
|
153
159
|
this.setup();
|
|
154
160
|
}
|
|
155
161
|
break;
|
|
156
162
|
}
|
|
157
163
|
case 'data-show': {
|
|
158
164
|
if (oldVal != newVal) {
|
|
159
|
-
this.setAttribute('data-page', 1);
|
|
165
|
+
//this.setAttribute('data-page', 1);
|
|
160
166
|
this.setup();
|
|
161
167
|
this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
|
|
162
168
|
}
|
|
@@ -165,7 +171,7 @@ class iamPagination extends HTMLElement {
|
|
|
165
171
|
case 'data-increment': {
|
|
166
172
|
if (oldVal != newVal) {
|
|
167
173
|
this.setAttribute('data-show', newVal);
|
|
168
|
-
this.setAttribute('data-page', 1);
|
|
174
|
+
//this.setAttribute('data-page', 1);
|
|
169
175
|
this.setup();
|
|
170
176
|
this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
|
|
171
177
|
}
|
|
@@ -174,6 +180,7 @@ class iamPagination extends HTMLElement {
|
|
|
174
180
|
case 'data-page': {
|
|
175
181
|
if (oldVal && oldVal != newVal) {
|
|
176
182
|
this.setup();
|
|
183
|
+
console.log(newVal);
|
|
177
184
|
// Dispact the event for other components to use as triggers
|
|
178
185
|
this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));
|
|
179
186
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.2.
|
|
2
|
+
* iamKey v7.2.1--beta2
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
|
-
*/class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const
|
|
4
|
+
*/class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const o=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"):`${o}/css/core.min.css`,e=document.createElement("template");e.innerHTML=`
|
|
5
5
|
<style>
|
|
6
6
|
@import "${t}";
|
|
7
|
-
.m-0{margin:0 !important}.mx-0{margin-left:0 !important;margin-right:0 !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.mt-0{margin-top:0 !important}.me-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ms-0{margin-left:0 !important}.m-1{margin:0.5rem !important}.mx-1{margin-left:0.5rem !important;margin-right:0.5rem !important}.my-1{margin-top:0.5rem !important;margin-bottom:0.5rem !important}.mt-1{margin-top:0.5rem !important}.me-1{margin-right:0.5rem !important}.mb-1{margin-bottom:0.5rem !important}.ms-1{margin-left:0.5rem !important}.m-2{margin:1rem !important}.mx-2{margin-left:1rem !important;margin-right:1rem !important}.my-2{margin-top:1rem !important;margin-bottom:1rem !important}.mt-2{margin-top:1rem !important}.me-2{margin-right:1rem !important}.mb-2{margin-bottom:1rem !important}.ms-2{margin-left:1rem !important}.m-3{margin:1.5rem !important}.mx-3{margin-left:1.5rem !important;margin-right:1.5rem !important}.my-3{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.mt-3{margin-top:1.5rem !important}.me-3{margin-right:1.5rem !important}.mb-3{margin-bottom:1.5rem !important}.ms-3{margin-left:1.5rem !important}.m-4{margin:2rem !important}.mx-4{margin-left:2rem !important;margin-right:2rem !important}.my-4{margin-top:2rem !important;margin-bottom:2rem !important}.mt-4{margin-top:2rem !important}.me-4{margin-right:2rem !important}.mb-4{margin-bottom:2rem !important}.ms-4{margin-left:2rem !important}.m-5{margin:3rem !important}.mx-5{margin-left:3rem !important;margin-right:3rem !important}.my-5{margin-top:3rem !important;margin-bottom:3rem !important}.mt-5{margin-top:3rem !important}.me-5{margin-right:3rem !important}.mb-5{margin-bottom:3rem !important}.ms-5{margin-left:3rem !important}.m-auto{margin:auto !important}.mx-auto{margin-right:auto !important;margin-left:auto !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-auto{margin-top:auto !important}.me-auto{margin-right:auto !important}.mb-auto{margin-bottom:auto !important}.ms-auto{margin-left:auto !important}: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
|
|
7
|
+
.m-0{margin:0 !important}.mx-0{margin-left:0 !important;margin-right:0 !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.mt-0{margin-top:0 !important}.me-0{margin-right:0 !important}.mb-0{margin-bottom:0 !important}.ms-0{margin-left:0 !important}.m-1{margin:0.5rem !important}.mx-1{margin-left:0.5rem !important;margin-right:0.5rem !important}.my-1{margin-top:0.5rem !important;margin-bottom:0.5rem !important}.mt-1{margin-top:0.5rem !important}.me-1{margin-right:0.5rem !important}.mb-1{margin-bottom:0.5rem !important}.ms-1{margin-left:0.5rem !important}.m-2{margin:1rem !important}.mx-2{margin-left:1rem !important;margin-right:1rem !important}.my-2{margin-top:1rem !important;margin-bottom:1rem !important}.mt-2{margin-top:1rem !important}.me-2{margin-right:1rem !important}.mb-2{margin-bottom:1rem !important}.ms-2{margin-left:1rem !important}.m-3{margin:1.5rem !important}.mx-3{margin-left:1.5rem !important;margin-right:1.5rem !important}.my-3{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.mt-3{margin-top:1.5rem !important}.me-3{margin-right:1.5rem !important}.mb-3{margin-bottom:1.5rem !important}.ms-3{margin-left:1.5rem !important}.m-4{margin:2rem !important}.mx-4{margin-left:2rem !important;margin-right:2rem !important}.my-4{margin-top:2rem !important;margin-bottom:2rem !important}.mt-4{margin-top:2rem !important}.me-4{margin-right:2rem !important}.mb-4{margin-bottom:2rem !important}.ms-4{margin-left:2rem !important}.m-5{margin:3rem !important}.mx-5{margin-left:3rem !important;margin-right:3rem !important}.my-5{margin-top:3rem !important;margin-bottom:3rem !important}.mt-5{margin-top:3rem !important}.me-5{margin-right:3rem !important}.mb-5{margin-bottom:3rem !important}.ms-5{margin-left:3rem !important}.m-auto{margin:auto !important}.mx-auto{margin-right:auto !important;margin-left:auto !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-auto{margin-top:auto !important}.me-auto{margin-right:auto !important}.mb-auto{margin-bottom:auto !important}.ms-auto{margin-left:auto !important}: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:has(.prev:disabled):has(.next:disabled){display:none;padding:0}.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:calc(3.25rem - 1em);line-height:calc(3.25rem - 1em);margin-left:-1rem;font-weight:bold}.pagination div:is(.page-jump,.per-page) div:has(>select){margin-bottom:0}.pagination div:is(.page-jump,.per-page) div:has(>select):after{top:50%}.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;color:var(--colour-body)}@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(--pagination-link-color);color:var(--colour-hover)}*:where(.prev,.next):is(:active):not(:disabled){background-color:var(--pagination-link-color);color:var(--colour-active)}*: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 */
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
${this.hasAttribute("css")?`@import "${this.getAttribute("css")}";`:""}
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
<button class="load-more btn btn-primary m-auto">Load more</a>
|
|
40
40
|
</div>
|
|
41
41
|
</div>
|
|
42
|
-
`,this.shadowRoot.appendChild(e.content.cloneNode(!0))}connectedCallback(){const
|
|
42
|
+
`,this.shadowRoot.appendChild(e.content.cloneNode(!0))}connectedCallback(){const o=new URLSearchParams(window.location.search);this.hasAttribute("data-total")||this.setAttribute("data-total",15),this.hasAttribute("data-page")||this.setAttribute("data-page",o.has("page")?o.get("page"):1),this.hasAttribute("data-show")||this.setAttribute("data-show",o.has("show")?o.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"),s=this.shadowRoot.querySelector(".next"),l=this.shadowRoot.querySelector(".per-page select"),r=this.shadowRoot.querySelector(".load-more");this.setup(),t.addEventListener("change",i=>{this.setAttribute("data-show",this.getAttribute("data-increment")),this.setAttribute("data-page",i.target.value)}),s.addEventListener("click",()=>{t.value=parseInt(t.value)+1,t.dispatchEvent(new Event("change"))}),e.addEventListener("click",()=>{t.value=parseInt(t.value)-1,t.dispatchEvent(new Event("change"))}),l.addEventListener("change",i=>{this.setAttribute("data-increment",i.target.value)});const d=parseInt(this.getAttribute("data-increment")),n=parseInt(this.getAttribute("data-show"));n>=parseInt(this.getAttribute("data-total"))&&r.remove(),r.addEventListener("click",()=>{const i=n+d;this.setAttribute("data-show",i),i>parseInt(this.getAttribute("data-total"))&&r.remove()})}setup(){const o=this.shadowRoot.querySelector(".pagination"),t=this.shadowRoot.querySelector(".page-jump select"),e=this.shadowRoot.querySelector(".prev"),s=this.shadowRoot.querySelector(".next"),l=this.shadowRoot.querySelector(".item-count"),r=this.shadowRoot.querySelector(".per-page select"),d=this.shadowRoot.querySelector(".total-pages"),n=parseInt(this.getAttribute("data-page")),i=parseInt(this.getAttribute("data-total")),p=parseInt(this.getAttribute("data-show")),a=parseInt(this.getAttribute("data-increment")),c=Math.ceil(i/a);i>p&&o.classList.remove("d-none");let g="";for(let m=1;m<=c;m++)g+=`<option value="${m}" ${m==n?"selected":""}>${m}</option>`;t.innerHTML=g,d.innerHTML=`of ${c}`,n==c?s.setAttribute("disabled","disabled"):s.removeAttribute("disabled"),n==1?e.setAttribute("disabled","disabled"):e.removeAttribute("disabled");const u=n==1?1:(n-1)*p+1,h=n==1?p:n*p;l.innerHTML=`${u} - ${h>i?i:h} of ${i} items`;const b=[15,25,40,50];a&&r.value!=a&&!b.includes(a)&&(r.innerHTML=`<option value="${a}">${a}</option>
|
|
43
43
|
<option value="${a*2}">${a*2}</option>
|
|
44
44
|
<option value="${a*3}">${a*3}</option>
|
|
45
|
-
<option value="${a*4}">${a*4}</option>`),r.value=a}static get observedAttributes(){return["data-total","data-increment","data-page","data-show"]}attributeChangedCallback(
|
|
45
|
+
<option value="${a*4}">${a*4}</option>`),r.value=a}static get observedAttributes(){return["data-total","data-increment","data-page","data-show"]}attributeChangedCallback(o,t,e){switch(o){case"data-total":{t!=e&&this.setup();break}case"data-show":{t!=e&&(this.setup(),this.dispatchEvent(new CustomEvent("update-show",{detail:{show:e}})));break}case"data-increment":{t!=e&&(this.setAttribute("data-show",e),this.setup(),this.dispatchEvent(new CustomEvent("update-show",{detail:{show:e}})));break}case"data-page":{t&&t!=e&&(this.setup(),console.log(e),this.dispatchEvent(new CustomEvent("update-page",{detail:{page:e}})));break}}}}export{v as default};
|
|
46
46
|
//# sourceMappingURL=pagination.component.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.component.min.js","sources":["pagination.component.js"],"sourcesContent":["class iamPagination 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/pagination.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n \n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"pagination d-none\">\n \n <div class=\"minimal\" part=\"minimal\">\n <div class=\"page-jump\">\n <div><select class=\"select--minimal\"></select></div>\n <span class=\"total-pages\"></span>\n </div>\n \n <button class=\"prev\" disabled>Prev</button>\n <button class=\"next\" disabled>Next</button>\n </div>\n\n <div class=\"item-count\" part=\"item-count\"></div>\n <div class=\"per-page\" part=\"per-page\">\n <div>\n <select class=\"select--minimal\">\n <option value=\"15\">15</option>\n <option value=\"25\">25</option>\n <option value=\"40\">40</option>\n <option value=\"50\">50</option>\n </select>\n </div>\n <span> / page</span>\n </div>\n <div class=\"mobile-controls m-auto text-center\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <button class=\"load-more btn btn-primary m-auto\">Load more</a>\n </div>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n // Set default attributes\n const params = new URLSearchParams(window.location.search);\n if (!this.hasAttribute('data-total'))\n this.setAttribute('data-total', 15);\n if (!this.hasAttribute('data-page'))\n this.setAttribute('data-page', params.has('page') ? params.get('page') : 1);\n if (!this.hasAttribute('data-show'))\n this.setAttribute('data-show', params.has('show') ? params.get('show') : 15);\n if (!this.hasAttribute('data-increment'))\n this.setAttribute('data-increment', this.getAttribute('data-show'));\n // Elements\n const select = this.shadowRoot.querySelector('.page-jump select');\n const prev = this.shadowRoot.querySelector('.prev');\n const next = this.shadowRoot.querySelector('.next');\n const perPage = this.shadowRoot.querySelector('.per-page select');\n const loadMore = this.shadowRoot.querySelector('.load-more');\n // Add the select inputs, enable or disable buttons, update the helper text\n this.setup();\n // Select on change will update the data-page attr which will dispatch an event\n select.addEventListener('change', (event) => {\n this.setAttribute('data-show', this.getAttribute('data-increment'));\n this.setAttribute('data-page', event.target.value);\n });\n // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event\n next.addEventListener('click', () => {\n select.value = parseInt(select.value) + 1;\n select.dispatchEvent(new Event('change'));\n });\n prev.addEventListener('click', () => {\n select.value = parseInt(select.value) - 1;\n select.dispatchEvent(new Event('change'));\n });\n // Update how many is shown\n perPage.addEventListener('change', (event) => {\n this.setAttribute('data-increment', event.target.value);\n });\n loadMore.addEventListener('click', () => {\n const newValue = parseInt(this.getAttribute('data-show')) + parseInt(this.getAttribute('data-increment'));\n this.setAttribute('data-show', newValue);\n if (newValue > parseInt(this.getAttribute('data-total'))) {\n loadMore.remove();\n }\n });\n }\n setup() {\n // Elements\n const wrapper = this.shadowRoot.querySelector('.pagination');\n const select = this.shadowRoot.querySelector('.page-jump select');\n const prev = this.shadowRoot.querySelector('.prev');\n const next = this.shadowRoot.querySelector('.next');\n const itemCount = this.shadowRoot.querySelector('.item-count');\n const perPage = this.shadowRoot.querySelector('.per-page select');\n const totalPages = this.shadowRoot.querySelector('.total-pages');\n // Values\n const currentPage = parseInt(this.getAttribute('data-page'));\n const total = parseInt(this.getAttribute('data-total'));\n const show = parseInt(this.getAttribute('data-show'));\n const increment = parseInt(this.getAttribute('data-increment'));\n const numberPages = Math.ceil(total / increment);\n if (total > show)\n wrapper.classList.remove('d-none');\n // Populate the select input with the number of pages\n let strOptions = '';\n for (let i = 1; i <= numberPages; i++) {\n strOptions += `<option value=\"${i}\" ${i == currentPage ? 'selected' : ''}>${i}</option>`;\n }\n select.innerHTML = strOptions;\n totalPages.innerHTML = `of ${numberPages}`;\n // Next button\n if (currentPage == numberPages)\n next.setAttribute('disabled', 'disabled');\n else\n next.removeAttribute('disabled');\n if (currentPage == 1)\n prev.setAttribute('disabled', 'disabled');\n else\n prev.removeAttribute('disabled');\n // Update the item count text\n const startPoint = currentPage == 1 ? 1 : (currentPage - 1) * show + 1;\n const endPoint = currentPage == 1 ? show : currentPage * show;\n itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;\n const defaultValues = [15, 25, 40, 50];\n // Update the per page options if needed\n if (increment && perPage.value != increment && !defaultValues.includes(increment)) {\n perPage.innerHTML = `<option value=\"${increment}\">${increment}</option>\n <option value=\"${increment * 2}\">${increment * 2}</option>\n <option value=\"${increment * 3}\">${increment * 3}</option>\n <option value=\"${increment * 4}\">${increment * 4}</option>`;\n }\n perPage.value = increment;\n }\n static get observedAttributes() {\n return ['data-total', 'data-increment', 'data-page', 'data-show'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-total': {\n if (oldVal != newVal) {\n this.setAttribute('data-page', 1);\n this.setup();\n }\n break;\n }\n case 'data-show': {\n if (oldVal != newVal) {\n this.setAttribute('data-page', 1);\n this.setup();\n this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));\n }\n break;\n }\n case 'data-increment': {\n if (oldVal != newVal) {\n this.setAttribute('data-show', newVal);\n this.setAttribute('data-page', 1);\n this.setup();\n this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));\n }\n break;\n }\n case 'data-page': {\n if (oldVal && oldVal != newVal) {\n this.setup();\n // Dispact the event for other components to use as triggers\n this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));\n }\n break;\n }\n }\n }\n}\nexport default iamPagination;\n"],"names":["iamPagination","assetLocation","coreCSS","template","params","select","prev","next","perPage","loadMore","event","newValue","wrapper","itemCount","totalPages","currentPage","total","show","increment","numberPages","strOptions","i","startPoint","endPoint","defaultValues","attrName","oldVal","newVal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pagination.component.min.js","sources":["pagination.component.js"],"sourcesContent":["class iamPagination 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/pagination.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n ${loadCSS}\n \n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n <div class=\"pagination d-none\">\n \n <div class=\"minimal\" part=\"minimal\">\n <div class=\"page-jump\">\n <div><select class=\"select--minimal\"></select></div>\n <span class=\"total-pages\"></span>\n </div>\n \n <button class=\"prev\" disabled>Prev</button>\n <button class=\"next\" disabled>Next</button>\n </div>\n\n <div class=\"item-count\" part=\"item-count\"></div>\n <div class=\"per-page\" part=\"per-page\">\n <div>\n <select class=\"select--minimal\">\n <option value=\"15\">15</option>\n <option value=\"25\">25</option>\n <option value=\"40\">40</option>\n <option value=\"50\">50</option>\n </select>\n </div>\n <span> / page</span>\n </div>\n <div class=\"mobile-controls m-auto text-center\">\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n <button class=\"load-more btn btn-primary m-auto\">Load more</a>\n </div>\n </div>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n // Set default attributes\n const params = new URLSearchParams(window.location.search);\n if (!this.hasAttribute('data-total'))\n this.setAttribute('data-total', 15);\n if (!this.hasAttribute('data-page'))\n this.setAttribute('data-page', params.has('page') ? params.get('page') : 1);\n if (!this.hasAttribute('data-show'))\n this.setAttribute('data-show', params.has('show') ? params.get('show') : 15);\n if (!this.hasAttribute('data-increment'))\n this.setAttribute('data-increment', this.getAttribute('data-show'));\n // Elements\n const select = this.shadowRoot.querySelector('.page-jump select');\n const prev = this.shadowRoot.querySelector('.prev');\n const next = this.shadowRoot.querySelector('.next');\n const perPage = this.shadowRoot.querySelector('.per-page select');\n const loadMore = this.shadowRoot.querySelector('.load-more');\n // Add the select inputs, enable or disable buttons, update the helper text\n this.setup();\n // Select on change will update the data-page attr which will dispatch an event\n select.addEventListener('change', (event) => {\n this.setAttribute('data-show', this.getAttribute('data-increment'));\n this.setAttribute('data-page', event.target.value);\n });\n // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event\n next.addEventListener('click', () => {\n select.value = parseInt(select.value) + 1;\n select.dispatchEvent(new Event('change'));\n });\n prev.addEventListener('click', () => {\n select.value = parseInt(select.value) - 1;\n select.dispatchEvent(new Event('change'));\n });\n // Update how many is shown\n perPage.addEventListener('change', (event) => {\n this.setAttribute('data-increment', event.target.value);\n });\n // Load more button\n const increment = parseInt(this.getAttribute('data-increment'));\n const show = parseInt(this.getAttribute('data-show'));\n if (show >= parseInt(this.getAttribute('data-total'))) {\n loadMore.remove();\n }\n loadMore.addEventListener('click', () => {\n const newValue = show + increment;\n this.setAttribute('data-show', newValue);\n if (newValue > parseInt(this.getAttribute('data-total'))) {\n loadMore.remove();\n }\n });\n }\n setup() {\n // Elements\n const wrapper = this.shadowRoot.querySelector('.pagination');\n const select = this.shadowRoot.querySelector('.page-jump select');\n const prev = this.shadowRoot.querySelector('.prev');\n const next = this.shadowRoot.querySelector('.next');\n const itemCount = this.shadowRoot.querySelector('.item-count');\n const perPage = this.shadowRoot.querySelector('.per-page select');\n const totalPages = this.shadowRoot.querySelector('.total-pages');\n // Values\n const currentPage = parseInt(this.getAttribute('data-page'));\n const total = parseInt(this.getAttribute('data-total'));\n const show = parseInt(this.getAttribute('data-show'));\n const increment = parseInt(this.getAttribute('data-increment'));\n const numberPages = Math.ceil(total / increment);\n if (total > show)\n wrapper.classList.remove('d-none');\n // Populate the select input with the number of pages\n let strOptions = '';\n for (let i = 1; i <= numberPages; i++) {\n strOptions += `<option value=\"${i}\" ${i == currentPage ? 'selected' : ''}>${i}</option>`;\n }\n select.innerHTML = strOptions;\n totalPages.innerHTML = `of ${numberPages}`;\n // Next button\n if (currentPage == numberPages)\n next.setAttribute('disabled', 'disabled');\n else\n next.removeAttribute('disabled');\n if (currentPage == 1)\n prev.setAttribute('disabled', 'disabled');\n else\n prev.removeAttribute('disabled');\n // Update the item count text\n const startPoint = currentPage == 1 ? 1 : (currentPage - 1) * show + 1;\n const endPoint = currentPage == 1 ? show : currentPage * show;\n itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;\n const defaultValues = [15, 25, 40, 50];\n // Update the per page options if needed\n if (increment && perPage.value != increment && !defaultValues.includes(increment)) {\n perPage.innerHTML = `<option value=\"${increment}\">${increment}</option>\n <option value=\"${increment * 2}\">${increment * 2}</option>\n <option value=\"${increment * 3}\">${increment * 3}</option>\n <option value=\"${increment * 4}\">${increment * 4}</option>`;\n }\n perPage.value = increment;\n }\n static get observedAttributes() {\n return ['data-total', 'data-increment', 'data-page', 'data-show'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-total': {\n if (oldVal != newVal) {\n //this.setAttribute('data-page', 1);\n this.setup();\n }\n break;\n }\n case 'data-show': {\n if (oldVal != newVal) {\n //this.setAttribute('data-page', 1);\n this.setup();\n this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));\n }\n break;\n }\n case 'data-increment': {\n if (oldVal != newVal) {\n this.setAttribute('data-show', newVal);\n //this.setAttribute('data-page', 1);\n this.setup();\n this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));\n }\n break;\n }\n case 'data-page': {\n if (oldVal && oldVal != newVal) {\n this.setup();\n console.log(newVal);\n // Dispact the event for other components to use as triggers\n this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));\n }\n break;\n }\n }\n }\n}\nexport default iamPagination;\n"],"names":["iamPagination","assetLocation","coreCSS","template","params","select","prev","next","perPage","loadMore","event","increment","show","newValue","wrapper","itemCount","totalPages","currentPage","total","numberPages","strOptions","i","startPoint","endPoint","defaultValues","attrName","oldVal","newVal"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.2.
|
|
2
|
+
* iamKey v7.2.1--beta2
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
4
|
*/const h=t=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:t})},p=(t,a,o)=>(window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementAdded",element:a}),o.forEach(r=>{t.addEventListener(r,function(e){const d={event:r,element:a,target:e.target};Object.keys(e.detail).forEach(i=>{const c=e.detail[i];d[i]=c}),window.dataLayer.push(d)})}),!0),g=`<div class="card__head" part="head">
|
|
5
5
|
<slot name="head"></slot>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.2.
|
|
2
|
+
* iamKey v7.2.1--beta2
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
4
|
*/import $ from"js-cookie";const k=e=>e.replace(/ /g,"_"),j=function(e){return e=e.toLowerCase(),e=k(e),e=e.replace(/\W/g,""),e},b=(e,i,a)=>i.split(/[\.\[\]\'\"]/).filter(o=>o).reduce((o,d)=>o?o[d]:a,e),S=e=>Array.isArray(e)||e!==null&&["function","object"].includes(typeof e);var L=function(e,i,a,o){function d(r){return r instanceof a?r:new a(function(n){n(r)})}return new(a||(a=Promise))(function(r,n){function y(s){try{t(o.next(s))}catch(p){n(p)}}function l(s){try{t(o.throw(s))}catch(p){n(p)}}function t(s){s.done?r(s.value):d(s.value).then(y,l)}t((o=o.apply(e,i||[])).next())})};window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Search"});class q extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const i=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"):`${i}/css/core.min.css`,o=document.createElement("template");o.innerHTML=`
|
|
5
5
|
<style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.component.min.js","sources":["../../modules/helpers.js","search.component.js"],"sourcesContent":["/**\n * Global helper functions to help maintain and enhance framework elements.\n * @module Helpers\n */\n/**\n * Add global classes used by the CSS and later JavaScript.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addBodyClasses = (body) => {\n body.classList.add('js-enabled');\n if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {\n body.classList.add('ie');\n }\n};\n/**\n * Add global events.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addGlobalEvents = (body) => {\n const checkElements = function (hash) {\n const label = document.querySelector(`label[for=\"${hash.replace('#', '')}\"]`);\n const summary = document.querySelector(hash + ' summary');\n const dialog = document.querySelector(`dialog${hash}`);\n const detail = document.querySelector(`detail${hash}`);\n if (label instanceof HTMLElement)\n label.click();\n else if (summary instanceof HTMLElement)\n summary.click();\n else if (dialog instanceof HTMLElement)\n dialog.showModal();\n else if (detail instanceof HTMLElement)\n detail.addAttribute('open');\n };\n if (location.hash)\n checkElements(location.hash);\n window.addEventListener('hashchange', function () {\n checkElements(location.hash);\n }, false);\n addEventListener('popstate', (event) => {\n if (event && event.state && event.state.type && event.state.type == 'pagination') {\n const form = document.querySelector(`#${event.state.form}`);\n const pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);\n if (pageInput)\n pageInput.value = event.state.page;\n else\n form.innerHTML += `<input name=\"page\" type=\"hidden\" data-pagination=\"true\" value=\"${event.state.page}\" />`;\n form.dispatchEvent(new Event('submit'));\n }\n });\n document.addEventListener('submit', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.matches('form')) {\n const form = event.target;\n // Reset password types\n Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {\n input.setAttribute('type', 'password');\n });\n if (form.querySelector(':invalid') ||\n form.querySelector('.pwd-checker[data-strength=\"1\"]') ||\n form.querySelector('.pwd-checker[data-strength=\"2\"]')) {\n form.classList.add('was-validated');\n event.preventDefault();\n }\n if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {\n form.classList.add('was-validated');\n event.preventDefault();\n }\n }\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n if (document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')) {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n });\n Array.from(document.querySelectorAll('label progress')).forEach((progress) => {\n const label = progress.closest('label');\n label.setAttribute('data-percent', progress.getAttribute('value'));\n });\n};\nexport const isNumeric = function (str) {\n if (typeof str != 'string')\n return false; // we only process strings!\n return (!isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\n !isNaN(parseFloat(str))); // ...and ensure strings of whitespace fail\n};\nexport const zeroPad = (num, places) => String(num).padStart(places, '0');\nexport const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);\nexport const ucwords = (str) => str\n .split(' ')\n .map((s) => ucfirst(s))\n .join(' ');\nexport const unsnake = (str) => str.replace(/_/g, ' ');\nexport const snake = (str) => str.replace(/ /g, '_');\nexport const safeID = function (str) {\n str = str.toLowerCase();\n str = snake(str);\n str = str.replace(/\\W/g, '');\n return str;\n};\nexport const numberOfDays = function (startDateString, endDateString) {\n const convertStart = startDateString.split('/');\n const convertEnd = endDateString.split('/');\n const dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);\n const dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);\n if (dateStart == 'Invalid Date')\n throw 'Start date is not a valid date';\n if (dateEnd == 'Invalid Date')\n throw 'End date is not a valid date';\n // To calculate the time difference of two dates\n const diffTime = dateEnd.getTime() - dateStart.getTime();\n const numberOfDays = diffTime / (1000 * 3600 * 24) + 1;\n if (numberOfDays < 0)\n throw 'The start date should be before the end date';\n return numberOfDays;\n};\n// Used to get values from nested json objects\nexport const resolvePath = (object, path, defaultValue) => path\n // eslint-disable-next-line no-useless-escape\n .split(/[\\.\\[\\]\\'\\\"]/)\n .filter((p) => p)\n .reduce((o, p) => (o ? o[p] : defaultValue), object);\nexport const isTraversable = (o) => Array.isArray(o) || (o !== null && ['function', 'object'].includes(typeof o));\nexport const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY) => {\n const limit = Math.tan(((45 * 1.5) / 180) * Math.PI);\n const pageWidth = window.innerWidth || document.body.clientWidth;\n const treshold = Math.max(1, Math.floor(0.01 * pageWidth));\n const x = touchendX - touchstartX;\n const y = touchendY - touchstartY;\n const xy = Math.abs(x / y);\n const yx = Math.abs(y / x);\n if (Math.abs(x) > treshold || Math.abs(y) > treshold) {\n if (yx <= limit) {\n if (x < 0) {\n return 'left';\n }\n else {\n return 'right';\n }\n }\n if (xy <= limit) {\n if (y < 0) {\n return 'top';\n }\n else {\n return 'bottom';\n }\n }\n }\n else {\n return 'tap';\n }\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport Cookies from 'js-cookie';\nimport { safeID, resolvePath, isTraversable } from '../../modules/helpers.js';\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'Search',\n});\nclass iamSearch 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 template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n input {\n background: red;\n }\n input:not(.is-invalid):not(:invalid) {\n background: none!important;\n }\n .optional-text {\n display: none;\n } \n .js-hide {\n display: none !important;\n }\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n <slot></slot>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n return __awaiter(this, void 0, void 0, function* () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const searchWrapper = this;\n const inputField = this.querySelector('input');\n const valueSchema = this.hasAttribute('data-value-schema') ? this.getAttribute('data-value-schema') : 'value';\n const displaySchema = this.hasAttribute('data-display-schema') ? this.getAttribute('data-display-schema') : 'label';\n const loopSchema = this.hasAttribute('data-schema') ? this.getAttribute('data-schema') : '';\n let datalist = this.querySelector('datalist');\n const searched = [];\n let ajaxURL = this.getAttribute('data-url');\n // Clone original input field, re-name and use for display purposes\n const displayInputField = inputField.cloneNode();\n displayInputField.setAttribute('name', `${inputField.getAttribute('name')}Alt`);\n inputField.removeAttribute('data-change-events');\n displayInputField.removeAttribute('id');\n inputField.after(displayInputField);\n // Hide original input field\n inputField.setAttribute('type', 'hidden');\n // if data list does not exist then create one and append\n if (!datalist) {\n datalist = document.createElement('datalist');\n const listID = safeID('list');\n datalist.setAttribute('id', listID);\n searchWrapper.appendChild(datalist);\n displayInputField.setAttribute('list', listID);\n }\n // Search the endpoint when 3 characters has been added\n if (searchWrapper.hasAttribute('data-url')) {\n displayInputField.addEventListener('input', () => {\n if (displayInputField.value.length == 3 && !searched.includes(displayInputField.value)) {\n search(displayInputField.value);\n searched.push(displayInputField.value);\n }\n });\n }\n function checkMatch() {\n const match = datalist.querySelector(`option[value=\"${displayInputField.value}\"]`);\n const subMatch = datalist.querySelector(`option[value*=\"${displayInputField.value}\" i]`);\n if (match) {\n inputField.value = match.getAttribute('data-value');\n }\n else if (displayInputField.value.length > 0 && !subMatch) {\n displayInputField.classList.add('is-invalid');\n displayInputField.closest('label').setAttribute('data-error', 'No results returned');\n }\n else {\n displayInputField.classList.remove('is-invalid');\n displayInputField.closest('label').removeAttribute('data-error');\n }\n }\n // on change update oringinal field with the actual value and use displayed input for the nice display text\n displayInputField.addEventListener('input', () => {\n checkMatch();\n });\n const search = (searchterm) => __awaiter(this, void 0, void 0, function* () {\n ajaxURL += `${encodeURI(searchterm)}`;\n // Setup controller vars if not already set\n if (!window.controller)\n window.controller = [];\n // Abort if controller already present for this url\n if (window.controller[ajaxURL])\n window.controller[ajaxURL].abort();\n // Create a new controller so it can be aborted if new fetch made\n window.controller[ajaxURL] = new AbortController();\n const { signal } = controller[ajaxURL];\n try {\n yield fetch(ajaxURL, {\n signal: signal,\n method: 'get',\n credentials: 'same-origin',\n headers: new Headers({\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),\n }),\n })\n .then((response) => response.json())\n .then((response) => {\n // populate datalist\n let listString = '';\n const loopValues = resolvePath(response, loopSchema, '');\n if (isTraversable(loopValues) && typeof loopValues.forEach == 'function') {\n loopValues.forEach((item) => {\n const actualValue = resolvePath(item, valueSchema, '');\n const displayValue = resolvePath(item, displaySchema, '').replace('\\n', ', ');\n console.log(displayValue);\n if (!datalist.querySelector(`option[data-value=\"${actualValue}\"]`))\n listString += `<option value=\"${displayValue}\" data-value=\"${actualValue}\"></option>`;\n });\n }\n else if (typeof loopValues == 'object') {\n for (const [key, value] of Object.entries(loopValues)) {\n if (isTraversable(value) && typeof value.forEach == 'function') {\n value.forEach((item) => {\n const actualValue = resolvePath(item, valueSchema, '');\n const displayValue = resolvePath(item, displaySchema, '').replace('\\n', ', ');\n if (!datalist.querySelector(`option[data-value=\"${actualValue}\"]`))\n listString += `<option value=\"${key}: ${displayValue}\" data-value='${actualValue}'></option>`;\n });\n }\n }\n }\n datalist.innerHTML += listString;\n displayInputField.closest('form').classList.add('was-validated');\n checkMatch();\n return response;\n });\n }\n catch (error) {\n console.log(error);\n }\n });\n if (searchWrapper.hasAttribute('data-prevent-submit')) {\n const form = searchWrapper.closest('form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n });\n }\n });\n }\n}\nexport default iamSearch;\n"],"names":["snake","str","safeID","resolvePath","object","path","defaultValue","p","isTraversable","o","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamSearch","assetLocation","coreCSS","template","searchWrapper","inputField","valueSchema","displaySchema","loopSchema","datalist","searched","ajaxURL","displayInputField","listID","search","checkMatch","match","subMatch","searchterm","signal","Cookies","response","listString","loopValues","item","actualValue","displayValue","key","error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"search.component.min.js","sources":["../../modules/helpers.js","search.component.js"],"sourcesContent":["/**\n * Global helper functions to help maintain and enhance framework elements.\n * @module Helpers\n */\n/**\n * Add global classes used by the CSS and later JavaScript.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addBodyClasses = (body) => {\n body.classList.add('js-enabled');\n if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {\n body.classList.add('ie');\n }\n};\n/**\n * Add global events.\n * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.\n */\nexport const addGlobalEvents = (body) => {\n const checkElements = function (hash) {\n const label = document.querySelector(`label[for=\"${hash.replace('#', '')}\"]`);\n const summary = document.querySelector(hash + ' summary');\n const dialog = document.querySelector(`dialog${hash}`);\n const detail = document.querySelector(`detail${hash}`);\n if (label instanceof HTMLElement)\n label.click();\n else if (summary instanceof HTMLElement)\n summary.click();\n else if (dialog instanceof HTMLElement)\n dialog.showModal();\n else if (detail instanceof HTMLElement)\n detail.addAttribute('open');\n };\n if (location.hash)\n checkElements(location.hash);\n window.addEventListener('hashchange', function () {\n checkElements(location.hash);\n }, false);\n addEventListener('popstate', (event) => {\n if (event && event.state && event.state.type && event.state.type == 'pagination') {\n const form = document.querySelector(`#${event.state.form}`);\n const pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);\n if (pageInput)\n pageInput.value = event.state.page;\n else\n form.innerHTML += `<input name=\"page\" type=\"hidden\" data-pagination=\"true\" value=\"${event.state.page}\" />`;\n form.dispatchEvent(new Event('submit'));\n }\n });\n document.addEventListener('submit', (event) => {\n if (event && event.target instanceof HTMLElement && event.target.matches('form')) {\n const form = event.target;\n // Reset password types\n Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {\n input.setAttribute('type', 'password');\n });\n if (form.querySelector(':invalid') ||\n form.querySelector('.pwd-checker[data-strength=\"1\"]') ||\n form.querySelector('.pwd-checker[data-strength=\"2\"]')) {\n form.classList.add('was-validated');\n event.preventDefault();\n }\n if (form.querySelector('iam-multiselect[data-is-required][data-error]')) {\n form.classList.add('was-validated');\n event.preventDefault();\n }\n }\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n if (document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')) {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n });\n Array.from(document.querySelectorAll('label progress')).forEach((progress) => {\n const label = progress.closest('label');\n label.setAttribute('data-percent', progress.getAttribute('value'));\n });\n};\nexport const isNumeric = function (str) {\n if (typeof str != 'string')\n return false; // we only process strings!\n return (!isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...\n !isNaN(parseFloat(str))); // ...and ensure strings of whitespace fail\n};\nexport const zeroPad = (num, places) => String(num).padStart(places, '0');\nexport const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);\nexport const ucwords = (str) => str\n .split(' ')\n .map((s) => ucfirst(s))\n .join(' ');\nexport const unsnake = (str) => str.replace(/_/g, ' ');\nexport const snake = (str) => str.replace(/ /g, '_');\nexport const safeID = function (str) {\n str = str.toLowerCase();\n str = snake(str);\n str = str.replace(/\\W/g, '');\n return str;\n};\nexport const numberOfDays = function (startDateString, endDateString) {\n const convertStart = startDateString.split('/');\n const convertEnd = endDateString.split('/');\n const dateStart = new Date(convertStart[1] + '/' + convertStart[0] + '/' + convertStart[2]);\n const dateEnd = new Date(convertEnd[1] + '/' + convertEnd[0] + '/' + convertEnd[2]);\n if (dateStart == 'Invalid Date')\n throw 'Start date is not a valid date';\n if (dateEnd == 'Invalid Date')\n throw 'End date is not a valid date';\n // To calculate the time difference of two dates\n const diffTime = dateEnd.getTime() - dateStart.getTime();\n const numberOfDays = diffTime / (1000 * 3600 * 24) + 1;\n if (numberOfDays < 0)\n throw 'The start date should be before the end date';\n return numberOfDays;\n};\n// Used to get values from nested json objects\nexport const resolvePath = (object, path, defaultValue) => path\n // eslint-disable-next-line no-useless-escape\n .split(/[\\.\\[\\]\\'\\\"]/)\n .filter((p) => p)\n .reduce((o, p) => (o ? o[p] : defaultValue), object);\nexport const isTraversable = (o) => Array.isArray(o) || (o !== null && ['function', 'object'].includes(typeof o));\nexport const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY) => {\n const limit = Math.tan(((45 * 1.5) / 180) * Math.PI);\n const pageWidth = window.innerWidth || document.body.clientWidth;\n const treshold = Math.max(1, Math.floor(0.01 * pageWidth));\n const x = touchendX - touchstartX;\n const y = touchendY - touchstartY;\n const xy = Math.abs(x / y);\n const yx = Math.abs(y / x);\n if (Math.abs(x) > treshold || Math.abs(y) > treshold) {\n if (yx <= limit) {\n if (x < 0) {\n return 'left';\n }\n else {\n return 'right';\n }\n }\n if (xy <= limit) {\n if (y < 0) {\n return 'top';\n }\n else {\n return 'bottom';\n }\n }\n }\n else {\n return 'tap';\n }\n};\nexport const uniqueID = (index = 1) => {\n const ID = Math.floor(Math.random() * Date.now() * (index + 1));\n return ID;\n};\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport Cookies from 'js-cookie';\nimport { safeID, resolvePath, isTraversable } from '../../modules/helpers.js';\n// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n event: 'customElementRegistered',\n element: 'Search',\n});\nclass iamSearch 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 template = document.createElement('template');\n template.innerHTML = `\n <style>\n @import \"${coreCSS}\";\n input {\n background: red;\n }\n input:not(.is-invalid):not(:invalid) {\n background: none!important;\n }\n .optional-text {\n display: none;\n } \n .js-hide {\n display: none !important;\n }\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\" />\n <slot></slot>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n return __awaiter(this, void 0, void 0, function* () {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const searchWrapper = this;\n const inputField = this.querySelector('input');\n const valueSchema = this.hasAttribute('data-value-schema') ? this.getAttribute('data-value-schema') : 'value';\n const displaySchema = this.hasAttribute('data-display-schema') ? this.getAttribute('data-display-schema') : 'label';\n const loopSchema = this.hasAttribute('data-schema') ? this.getAttribute('data-schema') : '';\n let datalist = this.querySelector('datalist');\n const searched = [];\n let ajaxURL = this.getAttribute('data-url');\n // Clone original input field, re-name and use for display purposes\n const displayInputField = inputField.cloneNode();\n displayInputField.setAttribute('name', `${inputField.getAttribute('name')}Alt`);\n inputField.removeAttribute('data-change-events');\n displayInputField.removeAttribute('id');\n inputField.after(displayInputField);\n // Hide original input field\n inputField.setAttribute('type', 'hidden');\n // if data list does not exist then create one and append\n if (!datalist) {\n datalist = document.createElement('datalist');\n const listID = safeID('list');\n datalist.setAttribute('id', listID);\n searchWrapper.appendChild(datalist);\n displayInputField.setAttribute('list', listID);\n }\n // Search the endpoint when 3 characters has been added\n if (searchWrapper.hasAttribute('data-url')) {\n displayInputField.addEventListener('input', () => {\n if (displayInputField.value.length == 3 && !searched.includes(displayInputField.value)) {\n search(displayInputField.value);\n searched.push(displayInputField.value);\n }\n });\n }\n function checkMatch() {\n const match = datalist.querySelector(`option[value=\"${displayInputField.value}\"]`);\n const subMatch = datalist.querySelector(`option[value*=\"${displayInputField.value}\" i]`);\n if (match) {\n inputField.value = match.getAttribute('data-value');\n }\n else if (displayInputField.value.length > 0 && !subMatch) {\n displayInputField.classList.add('is-invalid');\n displayInputField.closest('label').setAttribute('data-error', 'No results returned');\n }\n else {\n displayInputField.classList.remove('is-invalid');\n displayInputField.closest('label').removeAttribute('data-error');\n }\n }\n // on change update oringinal field with the actual value and use displayed input for the nice display text\n displayInputField.addEventListener('input', () => {\n checkMatch();\n });\n const search = (searchterm) => __awaiter(this, void 0, void 0, function* () {\n ajaxURL += `${encodeURI(searchterm)}`;\n // Setup controller vars if not already set\n if (!window.controller)\n window.controller = [];\n // Abort if controller already present for this url\n if (window.controller[ajaxURL])\n window.controller[ajaxURL].abort();\n // Create a new controller so it can be aborted if new fetch made\n window.controller[ajaxURL] = new AbortController();\n const { signal } = controller[ajaxURL];\n try {\n yield fetch(ajaxURL, {\n signal: signal,\n method: 'get',\n credentials: 'same-origin',\n headers: new Headers({\n 'Content-Type': 'application/json',\n Accept: 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),\n }),\n })\n .then((response) => response.json())\n .then((response) => {\n // populate datalist\n let listString = '';\n const loopValues = resolvePath(response, loopSchema, '');\n if (isTraversable(loopValues) && typeof loopValues.forEach == 'function') {\n loopValues.forEach((item) => {\n const actualValue = resolvePath(item, valueSchema, '');\n const displayValue = resolvePath(item, displaySchema, '').replace('\\n', ', ');\n console.log(displayValue);\n if (!datalist.querySelector(`option[data-value=\"${actualValue}\"]`))\n listString += `<option value=\"${displayValue}\" data-value=\"${actualValue}\"></option>`;\n });\n }\n else if (typeof loopValues == 'object') {\n for (const [key, value] of Object.entries(loopValues)) {\n if (isTraversable(value) && typeof value.forEach == 'function') {\n value.forEach((item) => {\n const actualValue = resolvePath(item, valueSchema, '');\n const displayValue = resolvePath(item, displaySchema, '').replace('\\n', ', ');\n if (!datalist.querySelector(`option[data-value=\"${actualValue}\"]`))\n listString += `<option value=\"${key}: ${displayValue}\" data-value='${actualValue}'></option>`;\n });\n }\n }\n }\n datalist.innerHTML += listString;\n displayInputField.closest('form').classList.add('was-validated');\n checkMatch();\n return response;\n });\n }\n catch (error) {\n console.log(error);\n }\n });\n if (searchWrapper.hasAttribute('data-prevent-submit')) {\n const form = searchWrapper.closest('form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n });\n }\n });\n }\n}\nexport default iamSearch;\n"],"names":["snake","str","safeID","resolvePath","object","path","defaultValue","p","isTraversable","o","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","iamSearch","assetLocation","coreCSS","template","searchWrapper","inputField","valueSchema","displaySchema","loopSchema","datalist","searched","ajaxURL","displayInputField","listID","search","checkMatch","match","subMatch","searchterm","signal","Cookies","response","listString","loopValues","item","actualValue","displayValue","key","error"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* iamKey v7.2.
|
|
2
|
+
* iamKey v7.2.1--beta2
|
|
3
3
|
* Copyright 2022-2025 iamproperty
|
|
4
4
|
*/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=`
|
|
5
5
|
<style>
|
|
@@ -1,41 +1,29 @@
|
|
|
1
|
-
import
|
|
2
|
-
class
|
|
1
|
+
import { moveAttributesToComponents, findForm, setupBasicTable, setupAdvancedTable, paginateRows, setupNoSubmitTable, setupSubmitTable, setupAjaxTable, loadAjaxTable, paginateTable, } from '../../modules/table.js';
|
|
2
|
+
class iamTableBasic extends HTMLElement {
|
|
3
3
|
constructor() {
|
|
4
4
|
super();
|
|
5
5
|
this.attachShadow({ mode: 'open' });
|
|
6
6
|
const assetLocation = document.body.hasAttribute('data-assets-location')
|
|
7
7
|
? document.body.getAttribute('data-assets-location')
|
|
8
8
|
: '/assets';
|
|
9
|
-
const coreCSS = document.body.hasAttribute('data-core-css')
|
|
10
|
-
? document.body.getAttribute('data-core-css')
|
|
11
|
-
: `${assetLocation}/css/core.min.css`;
|
|
12
9
|
const loadCSS = `@import "${assetLocation}/css/components/table.component.css";`;
|
|
13
10
|
const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
|
|
14
11
|
const template = document.createElement('template');
|
|
15
12
|
template.innerHTML = `
|
|
16
13
|
<style>
|
|
17
|
-
@import "${coreCSS}";
|
|
18
14
|
${loadCSS}
|
|
19
15
|
|
|
20
|
-
:host(.mh-sm){
|
|
21
|
-
max-height: none!important;
|
|
22
|
-
}
|
|
23
|
-
:host(.mh-md){
|
|
24
|
-
max-height: none!important;
|
|
25
|
-
}
|
|
26
|
-
:host(.mh-lg){
|
|
27
|
-
max-height: none!important;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
16
|
${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
|
|
31
17
|
</style>
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
18
|
+
<div class="table__container">
|
|
19
|
+
<slot name="before"></slot>
|
|
20
|
+
<div class="table--cta">
|
|
21
|
+
<div class="table__wrapper">
|
|
22
|
+
<slot></slot>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<iam-pagination part="pagination" class="pagination--table" ></iam-pagination>
|
|
36
26
|
</div>
|
|
37
|
-
</div>
|
|
38
|
-
<iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page') ? `data-page="${this.getAttribute('data-page')}"` : ''} ></iam-pagination>
|
|
39
27
|
`;
|
|
40
28
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
41
29
|
// insert extra CSS
|
|
@@ -44,187 +32,37 @@ class iamTable extends HTMLElement {
|
|
|
44
32
|
}
|
|
45
33
|
}
|
|
46
34
|
connectedCallback() {
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
this
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
this.setAttribute('data-increment', this.getAttribute('data-show'));
|
|
60
|
-
}
|
|
61
|
-
// Update table__wrapper class
|
|
62
|
-
let classList = this.classList.toString();
|
|
63
|
-
classList = classList.replace('table--cta', '');
|
|
64
|
-
classList = classList.replace('table--loading', '');
|
|
65
|
-
//classList = classList.replace('mh-md','');
|
|
66
|
-
this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
|
|
67
|
-
// set actionbar class if needed
|
|
68
|
-
if (this.querySelector('.actionbar__sticky')) {
|
|
69
|
-
this.shadowRoot.querySelector('.table__wrapper').classList.add('has-actionbar');
|
|
70
|
-
}
|
|
71
|
-
this.table = this.querySelector('table');
|
|
72
|
-
this.savedTableBody = this.table.querySelector('tbody').cloneNode(true);
|
|
73
|
-
this.pagination = this.shadowRoot.querySelector('iam-pagination');
|
|
74
|
-
this.pagination.setAttribute('data-total', this.getAttribute('data-total'));
|
|
75
|
-
this.pagination.setAttribute('data-page', this.getAttribute('data-page'));
|
|
76
|
-
this.pagination.setAttribute('data-show', this.getAttribute('data-show'));
|
|
77
|
-
this.pagination.setAttribute('data-increment', this.getAttribute('data-show'));
|
|
78
|
-
if (this.hasAttribute('data-page-jump')) {
|
|
79
|
-
this.pagination.setAttribute('data-page-jump', 'true');
|
|
80
|
-
}
|
|
81
|
-
if (this.hasAttribute('data-per-page')) {
|
|
82
|
-
this.pagination.setAttribute('data-per-page', 'true');
|
|
83
|
-
}
|
|
84
|
-
if (this.hasAttribute('data-item-count')) {
|
|
85
|
-
this.pagination.setAttribute('data-item-count', 'true');
|
|
86
|
-
}
|
|
87
|
-
if (this.hasAttribute('data-loading')) {
|
|
88
|
-
this.pagination.setAttribute('data-loading', 'true');
|
|
89
|
-
}
|
|
90
|
-
if (this.classList.contains('table--fullwidth')) {
|
|
91
|
-
this.pagination.setAttribute('data-minimal', 'true');
|
|
92
|
-
}
|
|
93
|
-
// Remove table CTA
|
|
94
|
-
const isCTA = this.classList.contains('table--cta');
|
|
95
|
-
if (!isCTA)
|
|
96
|
-
this.shadowRoot.querySelector('.table--cta').classList.remove('table--cta');
|
|
97
|
-
// Set events on the filter table
|
|
98
|
-
this.form = document.createElement('form');
|
|
99
|
-
if (this.hasAttribute('data-filterby')) {
|
|
100
|
-
this.form = document.querySelector(`#${this.getAttribute('data-filterby')}`);
|
|
101
|
-
}
|
|
102
|
-
else {
|
|
103
|
-
this.table.parentNode.insertBefore(this.form, this.table.nextSibling);
|
|
104
|
-
}
|
|
105
|
-
// Set ajax class
|
|
106
|
-
if (this.form.hasAttribute('data-ajax')) {
|
|
107
|
-
this.table.classList.add('table--ajax');
|
|
108
|
-
}
|
|
109
|
-
// Create a data list if a search input is present
|
|
110
|
-
tableModule.createSearchDataList(this.table, this.form);
|
|
111
|
-
if (!this.form.querySelector('[data-pagination]')) {
|
|
112
|
-
this.form.insertAdjacentHTML('beforeend', `<input name="page" type="hidden" value="${this.getAttribute('data-page')}" data-pagination="true" />`);
|
|
35
|
+
const pagination = this.shadowRoot.querySelector('iam-pagination');
|
|
36
|
+
const table = this.querySelector('table');
|
|
37
|
+
const form = findForm(this, table);
|
|
38
|
+
const savedTableBody = table.querySelector('tbody').cloneNode(true);
|
|
39
|
+
moveAttributesToComponents(this);
|
|
40
|
+
setupBasicTable(this, table, form, pagination);
|
|
41
|
+
setupAdvancedTable(this, table, form, pagination);
|
|
42
|
+
if (this.hasAttribute('data-submit')) {
|
|
43
|
+
setupSubmitTable(this, table, form, pagination);
|
|
44
|
+
paginateTable(this, table, form, pagination, () => {
|
|
45
|
+
form.submit();
|
|
46
|
+
});
|
|
113
47
|
}
|
|
114
|
-
if (
|
|
115
|
-
this
|
|
48
|
+
else if (this.hasAttribute('data-no-submit') || this.hasAttribute('data-nosubmit')) {
|
|
49
|
+
setupNoSubmitTable(this, table, form, pagination, savedTableBody);
|
|
50
|
+
paginateTable(this, table, form, pagination, () => {
|
|
51
|
+
paginateRows(this);
|
|
52
|
+
});
|
|
116
53
|
}
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
if (this.form.getAttribute('data-ajax')) {
|
|
123
|
-
tableModule.loadAjaxTable(this.table, this.form, this.pagination, this);
|
|
54
|
+
else if (this.hasAttribute('data-ajax')) {
|
|
55
|
+
setupAjaxTable(this, table, form, pagination);
|
|
56
|
+
paginateTable(this, table, form, pagination, () => {
|
|
57
|
+
loadAjaxTable(this, table, form, pagination);
|
|
58
|
+
});
|
|
124
59
|
}
|
|
125
60
|
else {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}
|
|
130
|
-
// Add in the checkboxes
|
|
131
|
-
if (this.querySelector('iam-actionbar[data-selectall]') ||
|
|
132
|
-
document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`)) {
|
|
133
|
-
const actionbar = this.querySelector('iam-actionbar[data-selectall]')
|
|
134
|
-
? this.querySelector('iam-actionbar[data-selectall]')
|
|
135
|
-
: document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`);
|
|
136
|
-
Array.from(this.table.querySelectorAll('thead tr')).forEach((row) => {
|
|
137
|
-
row.insertAdjacentHTML('afterbegin', `<th class="th--fixed"></th>`);
|
|
138
|
-
});
|
|
139
|
-
Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
|
|
140
|
-
if (!row.querySelector('.selectrow')) {
|
|
141
|
-
const rowID = `row${uniqueID(index)}`;
|
|
142
|
-
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>`);
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
this.table.addEventListener('change', (event) => {
|
|
146
|
-
if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')) {
|
|
147
|
-
const count = this.table.querySelectorAll('.selectrow input[type="checkbox"]').length;
|
|
148
|
-
const countChecked = this.table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
|
|
149
|
-
actionbar.setAttribute('data-selected', count == countChecked ? 'all' : countChecked);
|
|
150
|
-
}
|
|
151
|
-
});
|
|
152
|
-
actionbar.addEventListener('selected', (event) => {
|
|
153
|
-
if (event.detail.selected == '0') {
|
|
154
|
-
Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input) => {
|
|
155
|
-
input.checked = false;
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
else if (event.detail.selected == 'all') {
|
|
159
|
-
Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input) => {
|
|
160
|
-
input.checked = true;
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
}
|
|
165
|
-
// Make the dialog menus columns fixed
|
|
166
|
-
let colIndex = -1;
|
|
167
|
-
Array.from(this.table.querySelectorAll('tbody tr')).forEach((row) => {
|
|
168
|
-
if (row.querySelector(':scope > td > .dialog__wrapper')) {
|
|
169
|
-
const columnn = row.querySelector(':scope > td > .dialog__wrapper').parentNode;
|
|
170
|
-
columnn.classList.add('td--fixed');
|
|
171
|
-
colIndex = Array.from(columnn.parentNode.children).indexOf(columnn);
|
|
172
|
-
}
|
|
61
|
+
paginateRows(this);
|
|
62
|
+
paginateTable(this, table, form, pagination, () => {
|
|
63
|
+
paginateRows(this);
|
|
173
64
|
});
|
|
174
|
-
if (colIndex != -1) {
|
|
175
|
-
this.table.querySelector(`thead tr th:nth-child(${colIndex + 1})`).classList.add('th--fixed');
|
|
176
|
-
Array.from(this.table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`)).forEach((col) => {
|
|
177
|
-
col.classList.add('td--fixed');
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
|
|
181
|
-
if (!this.hasAttribute('data-no-submit'))
|
|
182
|
-
tableModule.filterTable(this.table, this.form, this);
|
|
183
|
-
tableModule.populateDataQueries(this.table, this.form);
|
|
184
|
-
}
|
|
185
|
-
this.shadowRoot.querySelector('.table__wrapper').addEventListener('scroll', () => {
|
|
186
|
-
if (this.table.querySelector('dialog[open]')) {
|
|
187
|
-
this.table.querySelector('dialog[open]').close();
|
|
188
|
-
this.table.querySelector('.dialog__wrapper > button.active').classList.remove('active');
|
|
189
|
-
}
|
|
190
|
-
});
|
|
191
|
-
// Push up the pagination events
|
|
192
|
-
this.pagination.addEventListener('update-show', (event) => {
|
|
193
|
-
const show = event.detail.show;
|
|
194
|
-
const updateEvent = new CustomEvent('update-show', { detail: { show: show } });
|
|
195
|
-
this.dispatchEvent(updateEvent);
|
|
196
|
-
});
|
|
197
|
-
this.pagination.addEventListener('update-page', (event) => {
|
|
198
|
-
const page = event.detail.page;
|
|
199
|
-
const updateEvent = new CustomEvent('update-page', { detail: { page: page } });
|
|
200
|
-
this.dispatchEvent(updateEvent);
|
|
201
|
-
});
|
|
202
|
-
}
|
|
203
|
-
static get observedAttributes() {
|
|
204
|
-
return ['data-total', 'data-page', 'data-show'];
|
|
205
|
-
}
|
|
206
|
-
attributeChangedCallback(attrName, oldVal, newVal) {
|
|
207
|
-
this.pagination = this.shadowRoot.querySelector('iam-pagination');
|
|
208
|
-
switch (attrName) {
|
|
209
|
-
case 'data-total': {
|
|
210
|
-
if (oldVal != newVal) {
|
|
211
|
-
this.pagination.setAttribute('data-total', newVal);
|
|
212
|
-
}
|
|
213
|
-
break;
|
|
214
|
-
}
|
|
215
|
-
case 'data-show': {
|
|
216
|
-
if (oldVal != newVal) {
|
|
217
|
-
this.pagination.setAttribute('data-show', newVal);
|
|
218
|
-
}
|
|
219
|
-
break;
|
|
220
|
-
}
|
|
221
|
-
case 'data-page': {
|
|
222
|
-
if (oldVal != newVal) {
|
|
223
|
-
this.pagination.setAttribute('data-page', newVal);
|
|
224
|
-
}
|
|
225
|
-
break;
|
|
226
|
-
}
|
|
227
65
|
}
|
|
228
66
|
}
|
|
229
67
|
}
|
|
230
|
-
export default
|
|
68
|
+
export default iamTableBasic;
|