@iamproperty/components 5.6.1-beta15 → 5.6.1-beta17

package/assets/sass/_components.scss

@@ -82,6 +82,10 @@ iam-table {
   }
 }
 
+iam-pagination {
+  --pagination-link-color: var(--colour-light);
+  --pagination-link-color-active: #E0E0E0;
+}
 
 iam-fileupload::part(file) {
   @include dark-mode() {

package/assets/sass/components/pagination.scss

@@ -35,15 +35,18 @@
   padding-inline: 1rem;
   
   .select--minimal {
-    --select-padding-left: rem(16);
-    height: rem(52);
-    line-height: rem(52);
+    height: calc(3.25rem - 1em);
+    line-height: calc(3.25rem - 1em);
     margin-left: rem(-16);
     font-weight: bold;
   }
 
   div:has(> select){
     margin-bottom: 0;
+    
+    &:after {
+      top: 50%;
+    }
   }
 }
 
@@ -118,7 +121,7 @@
   display: none;
   background: none;
   padding-inline: 1rem;
-
+  color: var(--colour-body);
   
   @include container-up(sm) {
 
@@ -134,21 +137,13 @@
   }
 
   &:is(:hover,:focus):not(:disabled){
-    background-color: var(--colour-light);
+    background-color: var(--pagination-link-color);
+    color: var(--colour-hover);
   }
 
   &:is(:active):not(:disabled){
-    background-color: #E0E0E0;
-  }
-
-  @include dark-mode(){
-    &:is(:hover,:focus):not(:disabled){
-      background-color: var(--colour-canvas);
-    }
-  
-    &:is(:active):not(:disabled){
-      background-color: var(--colour-canvas);
-    }
+    background-color: var(--pagination-link-color);
+    color: var(--colour-active);
   }
 
   &:disabled {

package/assets/sass/elements/forms.scss

@@ -83,7 +83,8 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 }
 
 textarea {
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
+  --textarea-height-scale: 3;
+  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px)!important;
 }
 // #endregion
 

package/assets/ts/components/table/table.component.ts

@@ -242,7 +242,10 @@ class iamTable extends HTMLElement {
 
 
       tableModule.makeTableFunctional(this.table, this.form, this.pagination, this);
-      tableModule.filterTable(this.table, this.form,this);
+      
+      if(!this.hasAttribute('data-no-submit'))
+        tableModule.filterTable(this.table, this.form,this);
+
       tableModule.populateDataQueries(this.table, this.form);
     }
 
@@ -256,6 +259,22 @@ class iamTable extends HTMLElement {
 
     });
 
+    // Push up the pagination events
+    this.pagination.addEventListener('update-show', (event) => {
+
+      let show = event.detail.show;
+
+      const updateEvent = new CustomEvent("update-show", { detail: { show: show } });
+      this.dispatchEvent(updateEvent);
+    });
+
+    this.pagination.addEventListener('update-page', (event) => {
+
+      let page = event.detail.page;
+
+      const updateEvent = new CustomEvent("update-page", { detail: { page: page } });
+      this.dispatchEvent(updateEvent);
+    });
   }
 
 
@@ -265,6 +284,10 @@ class iamTable extends HTMLElement {
   
   attributeChangedCallback(attrName, oldVal, newVal) {
     
+    if(this.hasAttribute('data-no-submit')){
+      return false;
+    }
+
     this.pagination = this.shadowRoot.querySelector('iam-pagination');
 
     switch (attrName) {

package/assets/ts/modules/table.ts

@@ -149,7 +149,9 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
   // Check what conditions are set on the table to see what the form actions are
   let formSubmit = function(event, paginate = false){
 
-    console.log('submit');
+    if(wrapper.hasAttribute('data-no-submit')){
+      return false;
+    }
 
     if(form.classList.contains('processing'))
       return false;
@@ -848,6 +850,10 @@ export const populateDataQueries = (table,form,wrapper) => {
 // Pagination
 export const addPaginationEventListeners = function(table, form, pagination, wrapper){
 
+  if(wrapper.hasAttribute('data-no-submit')){
+    return false;
+  }
+
   pagination.addEventListener('update-page', (event) => {
 
     let paginationInput = form.querySelector('[data-pagination]');
@@ -1007,7 +1013,7 @@ const filterFilters = function(form){
 }
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
-
+  
   let formData = new FormData(form);
   let queryString = new URLSearchParams(formData).toString();
   let columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');

package/dist/components.es.js

@@ -1,4 +1,4 @@
-import { openBlock as o, createElementBlock as l, normalizeClass as b, createElementVNode as d, toDisplayString as y, createCommentVNode as p, renderSlot as u, Fragment as $, renderList as k, withDirectives as x, mergeProps as w, vModelDynamic as S, vModelText as D, vModelSelect as V, ref as F, onMounted as z, createTextVNode as B, resolveComponent as q, createVNode as v, withModifiers as O } from "vue";
+import { openBlock as o, createElementBlock as l, normalizeClass as b, createElementVNode as d, toDisplayString as y, createCommentVNode as p, renderSlot as u, Fragment as $, renderList as k, withDirectives as L, mergeProps as w, vModelDynamic as x, vModelText as D, vModelSelect as V, ref as F, onMounted as z, createTextVNode as B, resolveComponent as q, createVNode as v, withModifiers as O } from "vue";
 const m = (t, a) => {
   const e = t.__vccOpts || t;
   for (const [i, r] of a)
@@ -67,11 +67,11 @@ const Pa = /* @__PURE__ */ m(U, [["render", G]]), Q = (t) => t.charAt(0).toUpper
   },
   created() {
     this.$nextTick(function() {
-      import("./table.component-d5af7c61.mjs").then((t) => {
+      import("./table.component-f20ca683.mjs").then((t) => {
         window.customElements.get("iam-table") || window.customElements.define("iam-table", t.default);
       }).catch((t) => {
         console.log(t.message);
-      }), Promise.resolve().then(() => La).then((t) => {
+      }), Promise.resolve().then(() => Sa).then((t) => {
         window.customElements.get("iam-pagination") || window.customElements.define("iam-pagination", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -300,8 +300,8 @@ const C = /* @__PURE__ */ m(Z, [["render", ie]]), ne = {
 }, me = ["type", "name", "id", "pattern", "list"], pe = { class: "input-group-text border-0 col-2 col-sm-1 px-0" }, he = {
   key: 6,
   class: "input-group"
-}, fe = ["type", "name", "id", "pattern", "list"], be = { class: "input-group-text flex-fill" }, ye = ["type", "name", "id", "pattern"], _e = ["value"], ge = ["type", "name", "id"], ve = ["for", "innerHTML"], we = ["type", "name", "id"], $e = ["for", "innerHTML"], ke = ["innerHTML"], Ae = ["id"], xe = ["value"];
-function Le(t, a, e, i, r, s) {
+}, fe = ["type", "name", "id", "pattern", "list"], be = { class: "input-group-text flex-fill" }, ye = ["type", "name", "id", "pattern"], _e = ["value"], ge = ["type", "name", "id"], ve = ["for", "innerHTML"], we = ["type", "name", "id"], $e = ["for", "innerHTML"], ke = ["innerHTML"], Ae = ["id"], Le = ["value"];
+function Se(t, a, e, i, r, s) {
   return o(), l("div", {
     class: b(s.wrapperClass()),
     ref: "wrapper"
@@ -325,7 +325,7 @@ function Le(t, a, e, i, r, s) {
       innerHTML: e.suffix,
       role: "presentation"
     }, null, 10, re)) : p("", !0),
-    s.isInput() ? x((o(), l("input", w({
+    s.isInput() ? L((o(), l("input", w({
       key: 3,
       "onUpdate:modelValue": a[0] || (a[0] = (n) => s.inputVal = n),
       class: `form-control${e.size ? ` form-control-${e.size}` : ""}${e.inputclass ? ` ${e.inputclass}` : ""}`,
@@ -337,9 +337,9 @@ function Le(t, a, e, i, r, s) {
     }, t.$attrs, {
       onKeyup: a[1] || (a[1] = (...n) => s.inputKeyup && s.inputKeyup(...n))
     }), null, 16, de)), [
-      [S, s.inputVal]
+      [x, s.inputVal]
     ]) : p("", !0),
-    e.type == "textarea" ? x((o(), l("textarea", w({
+    e.type == "textarea" ? L((o(), l("textarea", w({
       key: 4,
       "onUpdate:modelValue": a[2] || (a[2] = (n) => s.inputVal = n),
       class: `form-control${e.size ? ` form-control-${e.size}` : ""}${e.inputclass ? ` ${e.inputclass}` : ""}`,
@@ -351,7 +351,7 @@ function Le(t, a, e, i, r, s) {
       [D, s.inputVal]
     ]) : p("", !0),
     e.type == "range" ? (o(), l("div", ue, [
-      x(d("input", w({
+      L(d("input", w({
         "onUpdate:modelValue": a[3] || (a[3] = (n) => s.inputVal = n),
         class: `form-range${e.inputclass ? ` ${e.inputclass}` : ""}`,
         type: e.type,
@@ -360,12 +360,12 @@ function Le(t, a, e, i, r, s) {
         pattern: s.needPattern(),
         list: s.hasOptions()
       }, t.$attrs, { oninput: "this.nextElementSibling.value=this.value;" }), null, 16, me), [
-        [S, s.inputVal]
+        [x, s.inputVal]
       ]),
       d("output", pe, y(e.value), 1)
     ])) : p("", !0),
     e.type == "color" ? (o(), l("div", he, [
-      x(d("input", w({
+      L(d("input", w({
         "onUpdate:modelValue": a[4] || (a[4] = (n) => s.inputVal = n),
         class: `form-control form-control-color${e.inputclass ? ` ${e.inputclass}` : ""}`,
         type: e.type,
@@ -374,11 +374,11 @@ function Le(t, a, e, i, r, s) {
         pattern: s.needPattern(),
         list: s.hasOptions()
       }, t.$attrs, { oninput: "this.nextElementSibling.value=this.value;" }), null, 16, fe), [
-        [S, s.inputVal]
+        [x, s.inputVal]
       ]),
       d("output", be, y(e.value ? t.vale : "#000000"), 1)
     ])) : p("", !0),
-    e.type == "select" ? x((o(), l("select", w({
+    e.type == "select" ? L((o(), l("select", w({
       key: 7,
       "onUpdate:modelValue": a[5] || (a[5] = (n) => s.inputVal = n),
       class: `form-select${e.size ? ` form-select-${e.size}` : ""}${e.inputclass ? ` ${e.inputclass}` : ""}`,
@@ -435,11 +435,11 @@ function Le(t, a, e, i, r, s) {
       (o(!0), l($, null, k(e.options, (n, c) => (o(), l("option", {
         key: c,
         value: n.value
-      }, y(n.value), 9, xe))), 128))
+      }, y(n.value), 9, Le))), 128))
     ], 8, Ae)) : p("", !0)
   ], 2);
 }
-const N = /* @__PURE__ */ m(ne, [["render", Le]]), Se = {
+const N = /* @__PURE__ */ m(ne, [["render", Se]]), xe = {
   name: "FileUpload",
   props: {
     maxfilesize: {
@@ -453,14 +453,14 @@ const N = /* @__PURE__ */ m(ne, [["render", Le]]), Se = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-20a70260.mjs").then((t) => {
+      import("./fileupload.component.min-a2a3f28f.mjs").then((t) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", t.default);
       }).catch((t) => {
         console.log(t.message);
       });
     });
   }
-}, Ra = /* @__PURE__ */ Object.assign(Se, {
+}, Ra = /* @__PURE__ */ Object.assign(xe, {
   emits: ["elementChange", "empty"],
   setup(t, { emit: a }) {
     const e = F(null);
@@ -483,7 +483,7 @@ const qe = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-edee87ed.mjs").then((t) => {
+      import("./accordion.component.min-1aed45c0.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -619,7 +619,7 @@ const Va = /* @__PURE__ */ m(ze, [["render", Be]]), Oe = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-1224b507.mjs").then((t) => {
+      import("./carousel.component.min-7fad5c93.mjs").then((t) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -646,7 +646,7 @@ const Fa = /* @__PURE__ */ m(Oe, [["render", Ue]]), We = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-9f6cf931.mjs").then((t) => {
+      import("./header.component.min-d119b840.mjs").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -940,7 +940,7 @@ const yt = {
 }, gt = { class: "property-searchbar" }, vt = ["action", "method"], wt = { class: "col-12 col-md-3" }, $t = { class: "col-12 col-md" }, kt = /* @__PURE__ */ d("span", { class: "form-label d-none d-md-block" }, "Price range", -1), At = {
   class: "row",
   "data-input-range": ""
-}, xt = { class: "col-12 col-md" }, Lt = /* @__PURE__ */ d("span", { class: "form-label d-none d-md-block" }, "Number of beds", -1), St = {
+}, Lt = { class: "col-12 col-md" }, St = /* @__PURE__ */ d("span", { class: "form-label d-none d-md-block" }, "Number of beds", -1), xt = {
   class: "row",
   "data-input-range": ""
 }, qt = { class: "col-12 col-md-2" }, Tt = /* @__PURE__ */ d("div", { class: "col-12 col-md mw-md-fit-content d-flex property-searchbar__btn" }, [
@@ -1002,9 +1002,9 @@ function Et(t, a, e, i, r, s) {
             }, null, 8, ["options"])
           ])
         ]),
-        d("fieldset", xt, [
-          Lt,
-          d("div", St, [
+        d("fieldset", Lt, [
+          St,
+          d("div", xt, [
             v(n, {
               class: "col-6",
               label: "Minimum beds",
@@ -1042,7 +1042,7 @@ const Ua = /* @__PURE__ */ m(yt, [["render", Et]]), Ht = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-ea22e24e.mjs").then((t) => {
+      import("./nav.component.min-344b2012.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1162,7 +1162,7 @@ const Xt = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-c46eba4a.mjs").then((t) => {
+      import("./tabs.component.min-ad34f019.mjs").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1309,7 +1309,7 @@ function pa(t, a, e, i, r, s) {
 }
 const Za = /* @__PURE__ */ m(ma, [["render", pa]]);
 /*!
-  * iamKey v5.6.1-beta15
+  * iamKey v5.6.1-beta17
   * Copyright 2022-2024 iamproperty
   */
 function ha(t, a) {
@@ -1479,7 +1479,7 @@ const ts = /* @__PURE__ */ m($a, [["render", ka]]), Aa = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-b8009504.mjs").then((t) => {
+      import("./actionbar.component.min-b891e3a0.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1487,14 +1487,14 @@ const ts = /* @__PURE__ */ m($a, [["render", ka]]), Aa = {
     });
   }
 };
-function xa(t, a, e, i, r, s) {
+function La(t, a, e, i, r, s) {
   return o(), l("iam-actionbar", null, [
     u(t.$slots, "default")
   ]);
 }
-const as = /* @__PURE__ */ m(Aa, [["render", xa]]);
+const as = /* @__PURE__ */ m(Aa, [["render", La]]);
 /*!
-  * iamKey v5.6.1-beta15
+  * iamKey v5.6.1-beta17
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {
@@ -1504,7 +1504,7 @@ class R extends HTMLElement {
     i.innerHTML = `
     <style>
     @import "${e}";
-    :host{container-type:inline-size;display:block}.pagination{display:block}@container (width > 23.4375em){.pagination{display:flex;align-items:center;justify-content:space-between !important;padding-top:2rem}}.pagination>div{display:flex;align-items:center}.pagination div:is(.page-jump,.per-page){border:1px solid var(--colour-light);height:3.25rem;display:none;align-items:center;padding-inline:1rem}.pagination div:is(.page-jump,.per-page) .select--minimal{--select-padding-left: rem(16);height:3.25rem;line-height:3.25rem;margin-left:-1rem;font-weight:bold}.pagination div:is(.page-jump,.per-page) div:has(>select){margin-bottom:0}.page-jump{border-right:none !important}.total-pages{white-space:nowrap}:host([data-page-jump][data-minimal]) .page-jump{display:flex !important}@container (width > 23.4375em){:host([data-page-jump]) .page-jump{display:flex !important}}@container (width > 23.4375em){:host([data-per-page]:not([data-page-jump][data-item-count])) .per-page{display:flex !important}}@container (width > 48em){:host([data-per-page][data-page-jump][data-item-count]) .per-page{display:flex !important}}.pagination>.item-count{display:block;text-align:center;margin-bottom:1rem;margin-inline:auto}@container (width > 23.4375em){.pagination>.item-count{display:none}:host([data-item-count]) .pagination>.item-count{display:flex !important;margin:0}}*:where(.prev,.next){border:1px solid var(--colour-light);line-height:3.25rem;height:3.25rem;margin:0;display:none;background:none;padding-inline:1rem}@container (width > 23.4375em){*:where(.prev,.next){display:inline-block}}*:where(.prev,.next):after{margin-left:.5em;font-size:.8rem;content:"";font-family:"Font Awesome 6 Pro";color:var(--colour-info)}*:where(.prev,.next):is(:hover,:focus):not(:disabled){background-color:var(--colour-light)}*:where(.prev,.next):is(:active):not(:disabled){background-color:#e0e0e0}@media screen and (prefers-color-scheme: dark){*:where(.prev,.next):is(:hover,:focus):not(:disabled){background-color:var(--colour-canvas)}*:where(.prev,.next):is(:active):not(:disabled){background-color:var(--colour-canvas)}}*:where(.prev,.next):disabled:after,*:where(.prev,.next):disabled:before{color:inherit !important}:host([data-minimal]) .pagination{justify-content:flex-end}@container (width > 23.4375em){:host([data-minimal]) .pagination{justify-content:space-between}}:host([data-minimal]) *:where(.prev,.next){display:inline-block !important}.prev{border-right:none}.prev:after{display:none}.prev:before{margin-right:.5em;font-size:.8rem;content:"";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 */
+    :host{container-type:inline-size;display:block}.pagination{display:block}@container (width > 23.4375em){.pagination{display:flex;align-items:center;justify-content:space-between !important;padding-top:2rem}}.pagination>div{display:flex;align-items:center}.pagination div:is(.page-jump,.per-page){border:1px solid var(--colour-light);height:3.25rem;display:none;align-items:center;padding-inline:1rem}.pagination div:is(.page-jump,.per-page) .select--minimal{height: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:"";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:"";font-family:"Font Awesome 6 Pro";color:var(--colour-info)}.mobile-controls{display:block}:host([data-minimal]) .pagination{padding-top:1.5rem;display:flex;align-items:center;justify-content:flex-end}:host([data-minimal]) *:is(.mobile-controls,.item-count){display:none}@container (width > 23.4375em){.mobile-controls{display:none !important}:host([data-item-count]) .item-count{display:flex !important}}.fa-spin{display:none !important;font-size:3rem;color:var(--colour-info)}:host([data-loading]) .mobile-controls{padding-top:2rem}:host([data-loading]) .item-count,:host([data-loading]) .mobile-controls>*:not(.fa-spin){display:none !important}:host([data-loading]) .fa-spin{display:block !important;margin:auto}/*# sourceMappingURL=assets/css/components/pagination.css.map */
 
     
     ${this.hasAttribute("css") ? `@import "${this.getAttribute("css")}";` : ""}
@@ -1559,12 +1559,12 @@ class R extends HTMLElement {
     });
   }
   setup() {
-    const a = this.shadowRoot.querySelector(".pagination"), e = this.shadowRoot.querySelector(".page-jump select"), i = this.shadowRoot.querySelector(".prev"), r = this.shadowRoot.querySelector(".next"), s = this.shadowRoot.querySelector(".item-count"), n = this.shadowRoot.querySelector(".per-page select"), c = this.shadowRoot.querySelector(".total-pages"), h = parseInt(this.getAttribute("data-page")), _ = parseInt(this.getAttribute("data-total")), g = parseInt(this.getAttribute("data-show")), f = parseInt(this.getAttribute("data-increment")), L = Math.ceil(_ / f);
+    const a = this.shadowRoot.querySelector(".pagination"), e = this.shadowRoot.querySelector(".page-jump select"), i = this.shadowRoot.querySelector(".prev"), r = this.shadowRoot.querySelector(".next"), s = this.shadowRoot.querySelector(".item-count"), n = this.shadowRoot.querySelector(".per-page select"), c = this.shadowRoot.querySelector(".total-pages"), h = parseInt(this.getAttribute("data-page")), _ = parseInt(this.getAttribute("data-total")), g = parseInt(this.getAttribute("data-show")), f = parseInt(this.getAttribute("data-increment")), S = Math.ceil(_ / f);
     _ > g && a.classList.remove("d-none");
     let E = "";
-    for (let A = 1; A <= L; A++)
+    for (let A = 1; A <= S; A++)
       E += `<option value="${A}" ${A == h ? "selected" : ""}>${A}</option>`;
-    e.innerHTML = E, c.innerHTML = `of ${L}`, h == L ? r.setAttribute("disabled", "disabled") : r.removeAttribute("disabled"), h == 1 ? i.setAttribute("disabled", "disabled") : i.removeAttribute("disabled");
+    e.innerHTML = E, c.innerHTML = `of ${S}`, h == S ? r.setAttribute("disabled", "disabled") : r.removeAttribute("disabled"), h == 1 ? i.setAttribute("disabled", "disabled") : i.removeAttribute("disabled");
     let j = h == 1 ? 1 : (h - 1) * g + 1, H = h == 1 ? g : h * g;
     s.innerHTML = `${j} - ${H > _ ? _ : H} of ${_} items`;
     const I = [15, 25, 40, 50];
@@ -1597,10 +1597,10 @@ class R extends HTMLElement {
     }
   }
 }
-const La = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Sa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: R
-}, Symbol.toStringTag, { value: "Module" })), Sa = {
+}, Symbol.toStringTag, { value: "Module" })), xa = {
   name: "Pagination",
   props: {},
   computed: {},
@@ -1615,7 +1615,7 @@ const La = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 function qa(t, a, e, i, r, s) {
   return o(), l("iam-pagination");
 }
-const ss = /* @__PURE__ */ m(Sa, [["render", qa]]), Ta = {
+const ss = /* @__PURE__ */ m(xa, [["render", qa]]), Ta = {
   name: "Address Lookup",
   mounted() {
     this.$nextTick(function() {