easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-notification.js

@@ -1,14 +1,14 @@
-var $ = Object.defineProperty;
+var k = Object.defineProperty;
 var I = (s) => {
   throw TypeError(s);
 };
-var A = (s, i, t) => i in s ? $(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
-var C = (s, i, t) => A(s, typeof i != "symbol" ? i + "" : i, t), R = (s, i, t) => i.has(s) || I("Cannot " + t);
-var e = (s, i, t) => (R(s, i, "read from private field"), t ? t.call(s) : i.get(s)), n = (s, i, t) => i.has(s) ? I("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), c = (s, i, t, o) => (R(s, i, "write to private field"), o ? o.call(s, t) : i.set(s, t), t);
-import { t as B } from "../utils/timeout.js";
+var $ = (s, i, e) => i in s ? k(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
+var C = (s, i, e) => $(s, typeof i != "symbol" ? i + "" : i, e), R = (s, i, e) => i.has(s) || I("Cannot " + e);
+var t = (s, i, e) => (R(s, i, "read from private field"), e ? e.call(s) : i.get(s)), n = (s, i, e) => i.has(s) ? I("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, o) => (R(s, i, "write to private field"), o ? o.call(s, e) : i.set(s, e), e);
+import { t as A } from "../utils/timeout.js";
 import { E as q } from "../utils/Utils.js";
-import { B as P } from "./Base.js";
-import { s as k } from "../css/ea-notification.style.js";
+import { B } from "./Base.js";
+import { s as P } from "../css/ea-notification.style.js";
 var v, E, _, L, S, x;
 class z {
   /**
@@ -27,7 +27,7 @@ class z {
       placement: "top-right",
       zIndex: 0,
       showClose: !0,
-      closeIcon: "icon-cancel",
+      closeIcon: "xmark",
       appendTo: "body"
     });
     /**
@@ -37,18 +37,18 @@ class z {
      * @returns
      */
     n(this, L, (i) => {
-      const t = document.createElement("ea-notification");
+      const e = document.createElement("ea-notification");
       for (const o in i) {
-        if (e(this, E).includes(o)) continue;
+        if (t(this, E).includes(o)) continue;
         const p = i[o];
-        if (e(this, v).includes(o))
-          t[o] = p;
+        if (t(this, v).includes(o))
+          e[o] = p;
         else {
           const w = q.String.toLowerCamelCase(o);
-          t.setAttribute(w, p);
+          e.setAttribute(w, p);
         }
       }
-      return t;
+      return e;
     });
     /**
      *
@@ -56,16 +56,16 @@ class z {
      * @param {HTMLElement | String} appendTo
      * @returns
      */
-    n(this, S, (i, t) => {
-      if (!t) return document.body.appendChild(i);
-      if (t instanceof HTMLElement)
-        t.appendChild(i);
-      else if (typeof t == "string") {
-        const o = document.querySelector(t);
+    n(this, S, (i, e) => {
+      if (!e) return document.body.appendChild(i);
+      if (e instanceof HTMLElement)
+        e.appendChild(i);
+      else if (typeof e == "string") {
+        const o = document.querySelector(e);
         o ? o.appendChild(i) : document.body.appendChild(i);
       } else
         console.warn(
-          `[EaNotification] TypeError: ${t} is not a valid element or selector.`
+          `[EaNotification] TypeError: ${e} is not a valid element or selector.`
         );
     });
     /**
@@ -74,17 +74,17 @@ class z {
      * @param {number} duration
      * @returns
      */
-    n(this, x, (i, t = 3e3) => {
-      i.visible = !0, i.addEventListener("hidden", () => i.remove()), t > 0 && B(() => {
+    n(this, x, (i, e = 3e3) => {
+      i.visible = !0, i.addEventListener("hidden", () => i.remove()), e > 0 && A(() => {
         i.visible = !1;
-      }, t);
+      }, e);
     });
     C(this, "close", () => {
       this.instance.close();
     });
-    i = Object.assign({}, e(this, _), i);
-    const t = e(this, L).call(this, i);
-    this.instance = t, e(this, S).call(this, t, i.appendTo), e(this, x).call(this, t, i.duration);
+    i = Object.assign({}, t(this, _), i);
+    const e = t(this, L).call(this, i);
+    this.instance = e, t(this, S).call(this, e, i.appendTo), t(this, x).call(this, e, i.duration);
   }
 }
 v = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), L = new WeakMap(), S = new WeakMap(), x = new WeakMap();
@@ -109,8 +109,8 @@ r.error = (s) => r({
   ...s,
   type: "error"
 });
-var a, M, y, g, d, m, l, b, f, h, N, T, H;
-class V extends P {
+var a, M, y, g, d, m, c, b, f, h, N, T, H;
+class V extends B {
   constructor() {
     super();
     /** @type {HTMLElement} */
@@ -126,7 +126,7 @@ class V extends P {
     /** @type {HTMLElement} */
     n(this, m);
     /** @type {AbortController} */
-    n(this, l);
+    n(this, c);
     /** @type {AbortController} */
     n(this, b);
     n(this, f, {
@@ -137,100 +137,100 @@ class V extends P {
       type: {
         type: ["primary", "success", "warning", "info", "error"],
         default: "info",
-        observer: (t) => {
+        observer: (e) => {
           const o = {
-            success: "icon-ok-circled",
-            error: "icon-cancel-circled",
-            warning: "icon-attention-alt",
-            info: "icon-info",
-            primary: "icon-info"
+            success: "circle-check",
+            error: "circle-xmark",
+            warning: "triangle-exclamation",
+            info: "circle-info",
+            primary: "circle-info"
           };
-          e(this, y).icon = o[t], e(this, a).className = this.updateContainerClasslist();
+          t(this, y).name = o[e], t(this, a).className = this.updateContainerClasslist();
         }
       },
       title: {
         type: String,
         default: "",
-        observer: (t) => {
-          e(this, g).textContent = t;
+        observer: (e) => {
+          t(this, g).textContent = e;
         }
       },
       visible: {
         type: Boolean,
         default: !1,
-        observer: async (t) => {
+        observer: async (e) => {
           var o;
-          (o = e(this, l)) == null || o.abort(), c(this, l, new AbortController()), t ? (e(this, N).call(this), e(this, a).className = this.updateContainerClasslist(), e(this, h).call(this, "show"), e(this, a).offsetWidth, e(this, a).classList.add("is-show"), e(this, a).addEventListener(
+          (o = t(this, c)) == null || o.abort(), l(this, c, new AbortController()), e ? (t(this, N).call(this), t(this, a).className = this.updateContainerClasslist(), t(this, h).call(this, "show"), t(this, a).offsetWidth, t(this, a).classList.add("is-show"), t(this, a).addEventListener(
             "transitionend",
             () => {
-              e(this, h).call(this, "shown");
+              t(this, h).call(this, "shown");
             },
-            { once: !0, signal: e(this, l).signal }
-          )) : (e(this, T).call(this), e(this, a).classList.add("is-before-hide"), e(this, h).call(this, "hide"), e(this, a).addEventListener(
+            { once: !0, signal: t(this, c).signal }
+          )) : (t(this, T).call(this), t(this, a).classList.add("is-before-hide"), t(this, h).call(this, "hide"), t(this, a).addEventListener(
             "transitionend",
             () => {
-              e(this, a).className = this.updateContainerClasslist(), e(this, h).call(this, "hidden");
+              t(this, a).className = this.updateContainerClasslist(), t(this, h).call(this, "hidden");
             },
-            { once: !0, signal: e(this, l).signal }
+            { once: !0, signal: t(this, c).signal }
           ));
         }
       },
       showClose: {
         type: Boolean,
         default: !1,
-        observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist(), e(this, d).icon = this["close-icon"];
+        observer: (e) => {
+          t(this, a).className = this.updateContainerClasslist(), t(this, d).name = this["close-icon"];
         }
       },
       closeIcon: {
         type: String,
-        default: "icon-cancel",
-        observer: (t) => {
-          this["show-close"] && (e(this, d).icon = t);
+        default: "xmark",
+        observer: (e) => {
+          this["show-close"] && (t(this, d).name = e);
         }
       },
       placement: {
         type: ["top-right", "top-left", "bottom-right", "bottom-left"],
         default: "top-right",
-        observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist();
+        observer: (e) => {
+          t(this, a).className = this.updateContainerClasslist();
         }
       },
       zIndex: {
         type: Number,
         default: 0,
-        observer: (t) => {
-          e(this, a).style.setProperty("--z-index", t);
+        observer: (e) => {
+          t(this, a).style.setProperty("--z-index", e);
         }
       }
     }));
-    n(this, h, (t, o) => {
-      this.emit(t, {
+    n(this, h, (e, o) => {
+      this.emit(e, {
         detail: o,
         bubbles: !0,
         composed: !0
       });
     });
     C(this, "close", () => {
-      this.visible = !1, e(this, h).call(this, "close");
+      this.visible = !1, t(this, h).call(this, "close");
     });
     n(this, N, () => {
-      const t = document.querySelectorAll(
+      const e = document.querySelectorAll(
         `ea-notification[placement="${this.placement}"]`
       );
-      if (t.length <= 1) return;
-      const o = t[t.length - 2], p = o.style.getPropertyValue("--ea-notification-y"), u = o.shadowRoot.querySelector(".ea-notification").getBoundingClientRect();
+      if (e.length <= 1) return;
+      const o = e[e.length - 2], p = o.style.getPropertyValue("--ea-notification-y"), u = o.shadowRoot.querySelector(".ea-notification").getBoundingClientRect();
       this.style.setProperty(
         "--ea-notification-y",
         `${Number(p.replace("px", "")) + u.height + 8}px`
       );
     });
     n(this, T, () => {
-      const t = [
+      const e = [
         ...document.querySelectorAll(
           `ea-notification[placement="${this.placement}"]`
         )
-      ], o = t.findIndex((u) => u === this), p = t.slice(o + 1), w = e(this, a).getBoundingClientRect().height;
+      ], o = e.findIndex((u) => u === this), p = e.slice(o + 1), w = t(this, a).getBoundingClientRect().height;
       p.forEach((u, O) => {
         const U = Number(
           u.style.getPropertyValue("--ea-notification-y").replace("px", "")
@@ -244,25 +244,25 @@ class V extends P {
     n(this, H, () => {
       this.visible = !1;
     });
-    this.stylesheet = k, this.$render();
+    this.stylesheet = P, this.$render();
   }
   // ------- dangerouslyUseHTMLString -------
   // #region
   get dangerouslyUseHTMLString() {
-    return e(this, f).dangerouslyUseHTMLString;
+    return t(this, f).dangerouslyUseHTMLString;
   }
-  set dangerouslyUseHTMLString(t) {
-    e(this, f).dangerouslyUseHTMLString = t;
+  set dangerouslyUseHTMLString(e) {
+    t(this, f).dangerouslyUseHTMLString = e;
   }
   // #endregion
   // ------- end -------
   // ------- message -------
   // #region
   get message() {
-    return e(this, f).message;
+    return t(this, f).message;
   }
-  set message(t) {
-    e(this, f).message = t, this.dangerouslyUseHTMLString ? e(this, m).innerHTML = t : e(this, m).innerText = t;
+  set message(e) {
+    t(this, f).message = e, this.dangerouslyUseHTMLString ? t(this, m).innerHTML = e : t(this, m).innerText = e;
   }
   // #endregion
   // ------- end -------
@@ -299,30 +299,30 @@ class V extends P {
         <div class="ea-notification__content">
           <header class="ea-notification__header" part='header'>
             <h2 class="ea-notification__title" part="title"> </h2>
-            <ea-icon class="ea-notification__close-icon" part='close-icon'></ea-icon>
+            <ea-icon class="ea-notification__close-icon" name="xmark" part='close-icon'></ea-icon>
           </header>
           <main class="ea-notification__main" part='main'> </main>
         </div>
       </div>
-        `, c(this, a, this.shadowRoot.querySelector(".ea-notification")), c(this, M, this.shadowRoot.querySelector(".ea-notification__header")), c(this, y, this.shadowRoot.querySelector(
+        `, l(this, a, this.shadowRoot.querySelector(".ea-notification")), l(this, M, this.shadowRoot.querySelector(".ea-notification__header")), l(this, y, this.shadowRoot.querySelector(
       ".ea-notification__icon"
-    )), c(this, g, this.shadowRoot.querySelector(".ea-notification__title")), c(this, d, this.shadowRoot.querySelector(
+    )), l(this, g, this.shadowRoot.querySelector(".ea-notification__title")), l(this, d, this.shadowRoot.querySelector(
       ".ea-notification__close-icon"
-    )), c(this, m, this.shadowRoot.querySelector(".ea-notification__main"));
+    )), l(this, m, this.shadowRoot.querySelector(".ea-notification__main"));
   }
   connectedCallback() {
     super.connectedCallback();
-    const t = new AbortController();
-    c(this, b, t), this["show-close"] && e(this, d).addEventListener("click", e(this, H), {
-      signal: t.signal
+    const e = new AbortController();
+    l(this, b, e), this["show-close"] && t(this, d).addEventListener("click", t(this, H), {
+      signal: e.signal
     });
   }
   $beforeUnmounted() {
-    var t, o;
-    (t = e(this, l)) == null || t.abort(), (o = e(this, b)) == null || o.abort();
+    var e, o;
+    (e = t(this, c)) == null || e.abort(), (o = t(this, b)) == null || o.abort();
   }
 }
-a = new WeakMap(), M = new WeakMap(), y = new WeakMap(), g = new WeakMap(), d = new WeakMap(), m = new WeakMap(), l = new WeakMap(), b = new WeakMap(), f = new WeakMap(), h = new WeakMap(), N = new WeakMap(), T = new WeakMap(), H = new WeakMap();
+a = new WeakMap(), M = new WeakMap(), y = new WeakMap(), g = new WeakMap(), d = new WeakMap(), m = new WeakMap(), c = new WeakMap(), b = new WeakMap(), f = new WeakMap(), h = new WeakMap(), N = new WeakMap(), T = new WeakMap(), H = new WeakMap();
 window.customElements.get("ea-notification") || window.customElements.define("ea-notification", V);
 window.$notify = r;
 export {

package/dist/components/ea-overlay.js

@@ -1,42 +1,42 @@
 var b = Object.defineProperty;
-var f = (e) => {
+var v = (e) => {
   throw TypeError(e);
 };
-var w = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var y = (e, s, t) => w(e, typeof s != "symbol" ? s + "" : s, t), p = (e, s, t) => s.has(e) || f("Cannot " + t);
-var o = (e, s, t) => (p(e, s, "read from private field"), t ? t.call(e) : s.get(e)), i = (e, s, t) => s.has(e) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, n) => (p(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t);
-import { B as C } from "./Base.js";
+var C = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var p = (e, s, t) => C(e, typeof s != "symbol" ? s + "" : s, t), y = (e, s, t) => s.has(e) || v("Cannot " + t);
+var o = (e, s, t) => (y(e, s, "read from private field"), t ? t.call(e) : s.get(e)), r = (e, s, t) => s.has(e) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, n) => (y(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t);
+import { B as w } from "./Base.js";
 import { s as k } from "../css/ea-overlay.style.js";
 import { t as g } from "../utils/timeout.js";
-var a, m, l, c, r, h, v;
-class E extends C {
+var a, u, c, i, l, m, f;
+class E extends w {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, a);
+    r(this, a);
     /** @type {HTMLElement} */
-    i(this, m);
+    r(this, u);
     /** @type {HTMLElement} */
-    i(this, l);
+    r(this, c);
     /** @type {AbortController} */
-    i(this, c);
-    y(this, "state", this.properties({
+    r(this, i);
+    p(this, "state", this.properties({
       status: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          t ? (o(this, a).className = this.updateContainerClasslist(), o(this, r).call(this, "open"), requestAnimationFrame(() => {
+          t ? (o(this, a).className = this.updateContainerClasslist(), o(this, l).call(this, "open"), requestAnimationFrame(() => {
             o(this, a).classList.add("ea-overlay--is-show"), o(this, a).addEventListener(
               "transitionend",
               () => {
-                o(this, r).call(this, "opened");
+                o(this, l).call(this, "opened");
               },
               { once: !0 }
             );
-          })) : (o(this, a).classList.add("ea-overlay--before-close"), o(this, r).call(this, "close"), o(this, a).addEventListener(
+          })) : (o(this, a).classList.add("ea-overlay--before-close"), o(this, l).call(this, "close"), o(this, a).addEventListener(
             "transitionend",
             () => {
-              o(this, a).className = this.updateContainerClasslist(), o(this, r).call(this, "closed");
+              o(this, a).className = this.updateContainerClasslist(), o(this, l).call(this, "closed");
             },
             { once: !0 }
           ));
@@ -75,25 +75,31 @@ class E extends C {
       ].reduce((t, n) => (t[n] = {
         type: String,
         default: "",
-        observer: (u) => {
-          this.style.setProperty(`--ea-overlay-${n}`, u);
+        observer: (h) => {
+          this.style.setProperty(`--ea-overlay-${n}`, h);
         }
       }, t), {})
     }));
-    i(this, r, (t, n) => {
+    p(this, "funcStates", this.properties({
+      beforeClose: {
+        rawFunction: !0,
+        props: !0,
+        type: Function,
+        default: null
+      }
+    }));
+    r(this, l, (t, n) => {
       this.emit(t, {
-        detail: n
-        // bubbles: true,
-        // composed: true,
+        detail: n,
+        bubbles: !0,
+        composed: !0
       });
     });
-    i(this, h, () => this.status = !1);
-    i(this, v, (t) => {
+    r(this, m, () => this.status = !1);
+    r(this, f, (t) => {
       [...this.children].find(
-        (u) => u === t.target || u.contains(t.target)
-      ) || o(this, l) === t.target || o(this, l).contains(t.target) || (this["before-close"] ? this.emit("before-close", {
-        detail: { done: () => o(this, h).call(this) }
-      }) : o(this, h).call(this));
+        (h) => h === t.target || h.contains(t.target)
+      ) || o(this, c) === t.target || o(this, c).contains(t.target) || (this.beforeClose ? this.beforeClose(() => this.status = !1) : o(this, m).call(this));
     });
     this.stylesheet = k, this.$render(), document.activeElement.blur(), g(() => {
       this.focus();
@@ -103,7 +109,7 @@ class E extends C {
     return [
       "status",
       "modal",
-      "before-close",
+      // "before-close",
       "close-on-click-modal",
       "z-index",
       "background-color",
@@ -141,20 +147,21 @@ class E extends C {
                     <slot></slot>
                 </div>
             </div>
-        `, d(this, a, this.shadowRoot.querySelector(".ea-overlay")), d(this, m, this.shadowRoot.querySelector(".ea-overlay__mask")), d(this, l, this.shadowRoot.querySelector(
+        `, d(this, a, this.shadowRoot.querySelector(".ea-overlay")), d(this, u, this.shadowRoot.querySelector(".ea-overlay__mask")), d(this, c, this.shadowRoot.querySelector(
       ".ea-overlay__content"
     ));
   }
   connectedCallback() {
-    super.connectedCallback(), d(this, c, new AbortController()), this["close-on-click-modal"] && this.shadowRoot.addEventListener("click", o(this, v), {
-      signal: o(this, c).signal
+    var t;
+    super.connectedCallback(), (t = o(this, i)) == null || t.abort(), d(this, i, new AbortController()), this["close-on-click-modal"] && this.shadowRoot.addEventListener("click", o(this, f), {
+      signal: o(this, i).signal
     });
   }
   $beforeUnmounted() {
-    o(this, c).abort();
+    o(this, i).abort();
   }
 }
-a = new WeakMap(), m = new WeakMap(), l = new WeakMap(), c = new WeakMap(), r = new WeakMap(), h = new WeakMap(), v = new WeakMap();
+a = new WeakMap(), u = new WeakMap(), c = new WeakMap(), i = new WeakMap(), l = new WeakMap(), m = new WeakMap(), f = new WeakMap();
 window.customElements.get("ea-overlay") || window.customElements.define("ea-overlay", E);
 export {
   E as EaOverlay

package/dist/components/ea-page-header.js

@@ -1,9 +1,9 @@
-var u = Object.defineProperty;
+var m = Object.defineProperty;
 var b = (t) => {
   throw TypeError(t);
 };
-var m = (t, a, e) => a in t ? u(t, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[a] = e;
-var g = (t, a, e) => m(t, typeof a != "symbol" ? a + "" : a, e), _ = (t, a, e) => a.has(t) || b("Cannot " + e);
+var u = (t, a, e) => a in t ? m(t, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[a] = e;
+var g = (t, a, e) => u(t, typeof a != "symbol" ? a + "" : a, e), _ = (t, a, e) => a.has(t) || b("Cannot " + e);
 var o = (t, a, e) => (_(t, a, "read from private field"), e ? e.call(t) : a.get(t)), s = (t, a, e) => a.has(t) ? b("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, e), n = (t, a, e, i) => (_(t, a, "write to private field"), i ? i.call(t, e) : a.set(t, e), e);
 import { B as v } from "./Base.js";
 import { s as w } from "../css/ea-page-header.style.js";
@@ -27,7 +27,7 @@ class k extends v {
         default: "",
         observer: (e) => {
           const i = o(this, l).querySelector("ea-icon");
-          i && i.setAttribute("icon", e);
+          i && i.setAttribute("name", e);
         }
       },
       title: {
@@ -66,7 +66,7 @@ class k extends v {
           <div class="ea-page-header__back" part="back">
             <span class="ea-page-header__icon" part="icon">
               <slot name="icon">
-                <ea-icon icon="icon-angle-left" part="back-icon"></ea-icon>
+                <ea-icon name="angle-left" part="back-icon"></ea-icon>
               </slot>
             </span>
             <span class="ea-page-header__title" part="title">

package/dist/components/ea-pagination.js

@@ -159,7 +159,7 @@ class W extends H {
         type: Boolean,
         default: !1,
         observer: () => {
-          this.updateContainerClasslist();
+          console.log(1, this), this.updateContainerClasslist();
         }
       },
       size: {
@@ -186,6 +186,7 @@ class W extends H {
     }));
     T(this, "propState", this.properties({
       pageSizes: {
+        props: !0,
         type: Array,
         default: [10, 20, 30, 40, 50, 100],
         /** @param {Array<number>} newVal */
@@ -441,9 +442,9 @@ class W extends H {
     const e = this.layout.filter(
       (s) => ["prev", "pager", "next", "jumper", "total", "sizes", "->"].includes(s)
     ), i = {
-      prev: `<ea-icon class="ea-pagination__icon prev-icon" icon='icon-angle-left' part='icon prev-icon' tabindex="0"></ea-icon>`,
+      prev: `<ea-icon class="ea-pagination__icon prev-icon" name='angle-left' part='icon prev-icon' tabindex="0"></ea-icon>`,
       pager: "<section class='ea-pagination__pager' part='pager'></section>",
-      next: `<ea-icon class="ea-pagination__icon next-icon" icon='icon-angle-right' part='icon next-icon' tabindex="0"></ea-icon>`,
+      next: `<ea-icon class="ea-pagination__icon next-icon" name='angle-right' part='icon next-icon' tabindex="0"></ea-icon>`,
       total: "<span class='ea-pagination__total' part='total'></span>",
       jumper: `<span class="ea-pagination__wrapper" part='jumper-wrap'>Go to <ea-input class='ea-pagination__jumper' part='jumper'></ea-input> </span>`,
       sizes: "<ea-select class='ea-pagination__sizes' part='sizes'></ea-select>",
@@ -457,10 +458,10 @@ class W extends H {
       ".ea-pagination__icon.prev-icon"
     )), u(this, m, this.shadowRoot.querySelector(
       ".ea-pagination__icon.next-icon"
-    )), u(this, p, this.shadowRoot.querySelector(".ea-pagination__jumper")), u(this, y, this.shadowRoot.querySelector(".ea-pagination__total")), u(this, d, this.shadowRoot.querySelector(".ea-pagination__sizes")), this.updateContainerClasslist();
+    )), u(this, p, this.shadowRoot.querySelector(".ea-pagination__jumper")), u(this, y, this.shadowRoot.querySelector(".ea-pagination__total")), u(this, d, this.shadowRoot.querySelector(".ea-pagination__sizes"));
   }
   async connectedCallback() {
-    super.connectedCallback(), await C(this, v, E).call(this), t(this, g).isFirstRender = !1;
+    super.connectedCallback(), await C(this, v, E).call(this), t(this, g).isFirstRender = !1, this.updateContainerClasslist();
   }
   $beforeUnmounted() {
     var e;