@ninebone/table 0.0.67 → 0.0.70

package/dist/nine-table.js

@@ -1,98 +1,101 @@
-var P = Object.defineProperty;
-var Z = (r) => {
-  throw TypeError(r);
+var qt = Object.defineProperty;
+var It = (v) => {
+  throw TypeError(v);
 };
-var D = (r, t, e) => t in r ? P(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var c = (r, t) => P(r, "name", { value: t, configurable: !0 });
-var q = (r, t, e) => D(r, typeof t != "symbol" ? t + "" : t, e), X = (r, t, e) => t.has(r) || Z("Cannot " + e);
-var a = (r, t, e) => (X(r, t, "read from private field"), e ? e.call(r) : t.get(r)), w = (r, t, e) => t.has(r) ? Z("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), k = (r, t, e, l) => (X(r, t, "write to private field"), l ? l.call(r, e) : t.set(r, e), e);
-import { trace as G } from "@ninebone/util";
-const j = class j extends G.constructor {
+var Ht = (v, c, e) => c in v ? qt(v, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : v[c] = e;
+var l = (v, c) => qt(v, "name", { value: c, configurable: !0 });
+var I = (v, c, e) => Ht(v, typeof c != "symbol" ? c + "" : c, e), $t = (v, c, e) => c.has(v) || It("Cannot " + e);
+var t = (v, c, e) => ($t(v, c, "read from private field"), e ? e.call(v) : c.get(v)), h = (v, c, e) => c.has(v) ? It("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(v) : c.set(v, e), g = (v, c, e, s) => ($t(v, c, "write to private field"), s ? s.call(v, e) : c.set(v, e), e);
+import { trace as Rt } from "@ninebone/util";
+const vt = class vt extends Rt.constructor {
   constructor() {
     super(), this.init("nine-table", "green");
   }
 };
-c(j, "Trace");
-let I = j;
-const $ = new I();
-var S, R;
-const E = class E extends HTMLElement {
+l(vt, "Trace");
+let dt = vt;
+const J = new dt();
+var Y, Q;
+const X = class X extends HTMLElement {
   constructor() {
     super();
-    w(this, S, null);
-    q(this, "init", /* @__PURE__ */ c((e) => {
+    h(this, Y, null);
+    I(this, "init", /* @__PURE__ */ l((e) => {
       if (!e) return;
-      const l = /* @__PURE__ */ c((n) => {
-        const d = /* @__PURE__ */ c((o) => {
-          if (o.querySelector("colgroup")) return;
-          const s = o.querySelector("tbody tr") || o.querySelector("tr"), y = s ? s.querySelectorAll("th, td").length : 1, b = document.createElement("colgroup"), m = Math.max(Math.floor((o.clientWidth || 600) / y), 100);
-          for (let x = 0; x < y; x++) {
-            const z = document.createElement("col");
-            z.setAttribute("width", m), b.appendChild(z);
+      const s = /* @__PURE__ */ l((a) => {
+        const p = /* @__PURE__ */ l((d) => {
+          if (d.querySelector("colgroup")) return;
+          const m = d.querySelector("tbody tr") || d.querySelector("tr"), q = m ? m.querySelectorAll("th, td").length : 1, x = document.createElement("colgroup"), E = Math.max(Math.floor((d.clientWidth || 600) / q), 100);
+          for (let H = 0; H < q; H++) {
+            const ut = document.createElement("col");
+            ut.setAttribute("width", E), x.appendChild(ut);
           }
-          o.prepend(b);
-        }, "ensureColgroup"), i = /* @__PURE__ */ c((o) => {
-          if (o.querySelector("thead")) return;
-          const s = document.createElement("thead"), y = o.querySelector("colgroup");
-          y ? y.after(s) : o.prepend(s);
+          d.prepend(x);
+        }, "ensureColgroup"), r = /* @__PURE__ */ l((d) => {
+          if (d.querySelector("thead")) return;
+          const m = document.createElement("thead"), q = d.querySelector("colgroup");
+          q ? q.after(m) : d.prepend(m);
         }, "ensureThead");
-        return d(n), i(n), n.classList.add("nine-table-element"), n;
-      }, "initializeTable"), u = e.cloneNode(!0);
-      k(this, S, l(u)), a(this, S).style.display = "table";
-      const g = this.querySelector(".ng-container-left"), h = this.querySelector(".ng-container-body"), f = this.querySelector(".ng-container-right"), p = /* @__PURE__ */ c((n, d, i = !1) => {
-        const o = n.cloneNode(!0), s = Array.from(o.querySelectorAll("colgroup col")), y = [];
-        return s.forEach((b, m) => {
-          const x = b.getAttribute("fixed");
-          (i ? !x || x === "" : x === d) || y.push(m);
-        }), y.reverse().forEach((b) => {
-          s[b] && s[b].remove(), o.querySelectorAll("tr").forEach((m) => {
-            const x = m.querySelectorAll("th, td");
-            x[b] && x[b].remove();
+        return p(a), r(a), a.classList.add("nine-table-element"), a;
+      }, "initializeTable"), o = e.cloneNode(!0);
+      g(this, Y, s(o)), t(this, Y).style.display = "table";
+      const n = this.querySelector(".ng-container-left"), i = this.querySelector(".ng-container-body"), u = this.querySelector(".ng-container-right"), y = /* @__PURE__ */ l((a, p, r = !1) => {
+        const d = a.cloneNode(!0), m = Array.from(d.querySelectorAll("colgroup col")), q = [];
+        return m.forEach((x, E) => {
+          const H = x.getAttribute("fixed");
+          (r ? !H || H === "" : H === p) || q.push(E);
+        }), q.reverse().forEach((x) => {
+          m[x] && m[x].remove(), d.querySelectorAll("tr").forEach((E) => {
+            const H = E.querySelectorAll("th, td");
+            H[x] && H[x].remove();
           });
-        }), o;
+        }), d;
       }, "filterTableByFixed");
-      if (h) {
-        const n = p(a(this, S), null, !0);
-        h.innerHTML = "", h.appendChild(n);
+      if (i) {
+        const a = y(t(this, Y), null, !0);
+        i.innerHTML = "", i.appendChild(a);
       }
-      if (g) {
-        const n = p(a(this, S), "left", !1);
-        let d = 0;
-        n.querySelectorAll("col").forEach((o) => {
-          const s = parseInt(o.getAttribute("width"), 10);
-          isNaN(s) || (d += s);
-        }), g.innerHTML = "", g.appendChild(n);
-        const i = d > 0 ? d : 0;
-        g.style.flex = `0 0 ${i}px`, g.style.width = `${i}px`;
+      if (n) {
+        const a = y(t(this, Y), "left", !1);
+        let p = 0;
+        a.querySelectorAll("col").forEach((d) => {
+          const m = parseInt(d.getAttribute("width"), 10);
+          isNaN(m) || (p += m);
+        }), n.innerHTML = "", n.appendChild(a);
+        const r = p > 0 ? p : 0;
+        n.style.flex = `0 0 ${r}px`, n.style.width = `${r}px`;
       }
-      if (f) {
-        const n = p(a(this, S), "right", !1);
-        let d = 0;
-        n.querySelectorAll("col").forEach((o) => {
-          const s = parseInt(o.getAttribute("width"), 10);
-          isNaN(s) || (d += s);
-        }), f.innerHTML = "", f.appendChild(n);
-        const i = d > 0 ? d : 0;
-        f.style.flex = `0 0 ${i}px`, f.style.width = `${i}px`;
+      if (u) {
+        const a = y(t(this, Y), "right", !1);
+        let p = 0;
+        a.querySelectorAll("col").forEach((d) => {
+          const m = parseInt(d.getAttribute("width"), 10);
+          isNaN(m) || (p += m);
+        }), u.innerHTML = "", u.appendChild(a);
+        const r = p > 0 ? p : 0;
+        u.style.flex = `0 0 ${r}px`, u.style.width = `${r}px`;
       }
-      if (h) {
-        const n = this.getRowCount();
-        h.style.overflowY = n > 10 ? "auto" : "hidden";
+      if (i) {
+        const a = this.getRowCount();
+        i.style.overflowY = a > 10 ? "auto" : "hidden", i.addEventListener("scroll", () => {
+          const p = i.scrollLeft, r = this.querySelector("nine-table-hscrollbar");
+          r && typeof r.syncThumb == "function" && r.syncThumb(p);
+        });
       }
-      $.log(`NineTableSheet 3-split initialized with rows: ${this.getRowCount()}`);
+      J.log(`NineTableSheet 3-split initialized with rows: ${this.getRowCount()}`);
     }, "init"));
-    q(this, "getRowCount", /* @__PURE__ */ c(() => a(this, S) ? a(this, S).querySelectorAll("tbody tr").length : 0, "getRowCount"));
+    I(this, "getRowCount", /* @__PURE__ */ l(() => t(this, Y) ? t(this, Y).querySelectorAll("tbody tr").length : 0, "getRowCount"));
     // 🎯 외부 스크롤바 및 컨트롤러 연동용 메서드
-    q(this, "scrollToX", /* @__PURE__ */ c((e) => {
-      const l = this.querySelector(".ng-container-body");
-      l && (l.scrollLeft = e);
+    I(this, "scrollToX", /* @__PURE__ */ l((e) => {
+      const s = this.querySelector(".ng-container-body");
+      s && (s.scrollLeft = e);
     }, "scrollToX"));
-    q(this, "scrollToY", /* @__PURE__ */ c((e) => {
-      const l = this.querySelector(".ng-container-body");
-      l && (l.scrollTop = e);
+    I(this, "scrollToY", /* @__PURE__ */ l((e) => {
+      const s = this.querySelector(".ng-container-body");
+      s && (s.scrollTop = e);
     }, "scrollToY"));
-    w(this, R, /* @__PURE__ */ c(() => {
-      const e = E.SCROLLBAR_SIZE;
+    h(this, Q, /* @__PURE__ */ l(() => {
+      const e = X.SCROLLBAR_SIZE;
       this.innerHTML = `
             <style>
                 nine-table-sheet {
@@ -207,109 +210,363 @@ const E = class E extends HTMLElement {
     }, "#render"));
   }
   connectedCallback() {
-    a(this, R).call(this);
+    t(this, Q).call(this);
   }
   disconnectedCallback() {
-    this.innerHTML = "", $.log("NineTableSheet destroyed.");
+    this.innerHTML = "", J.log("NineTableSheet destroyed.");
+  }
+};
+Y = new WeakMap(), Q = new WeakMap(), l(X, "NineTableSheet"), I(X, "SCROLLBAR_SIZE", 16);
+let bt = X;
+customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", bt);
+var w, M, b, S, R, U, V, tt, et, z, ot, D, _, B, N;
+const xt = class xt extends HTMLElement {
+  constructor() {
+    super();
+    h(this, w);
+    h(this, M);
+    h(this, b);
+    h(this, S);
+    h(this, R);
+    h(this, U);
+    h(this, V, 0);
+    I(this, "refresh", /* @__PURE__ */ l(() => {
+      if (!t(this, w)) return;
+      const e = t(this, w).querySelector(".ng-container-body");
+      if (!e) return;
+      const s = $(t(this, b).thumb, this.shadowRoot), o = e.querySelector("table > thead");
+      t(this, w).getRowCount;
+      const n = $(t(this, b).track).height(), i = $(t(this, b).thumb).height(), u = t(this, w).getRowCount ? t(this, w).getRowCount() : 0;
+      if (u <= 10) {
+        $(this).hide();
+        return;
+      } else
+        $(this).show();
+      const y = o ? o.getBoundingClientRect().height : 0, a = Math.max(Math.min(n * (e.clientHeight - y) / (32 * u), n), 16);
+      s[0].dataset.height = a, s.css({ height: a });
+      const p = n - t(this, N).call(this);
+      if (p <= 0) return;
+      let r = 0;
+      const d = e.scrollHeight - e.clientHeight;
+      d > 0 && (r = parseInt(e.scrollTop / d * p, 10), r > n - i && (r = n - i), r < 0 && (r = 0)), t(this, b).thumb.style.top = r + "px", t(this, b).top.disabled = e.scrollTop <= 0, t(this, b).bottom.disabled = e.scrollTop >= d;
+    }, "refresh"));
+    I(this, "delayScroll", /* @__PURE__ */ l((e, s, o, n) => {
+      clearInterval(t(this, S)), clearInterval(t(this, R));
+      const i = t(this, w).querySelector(".ng-container-body");
+      i && (i.scrollTop += e * 32), g(this, S, setInterval(() => {
+        clearInterval(t(this, S)), g(this, R, setInterval(() => {
+          i && (i.scrollTop += e * 32, n && n.call());
+        }, o));
+      }, s));
+    }, "delayScroll"));
+    I(this, "stopScroll", /* @__PURE__ */ l(() => {
+      clearInterval(t(this, S)), clearInterval(t(this, R));
+    }, "stopScroll"));
+    h(this, tt, /* @__PURE__ */ l(() => {
+      const e = /* @__PURE__ */ l((o) => {
+        clearInterval(t(this, S)), clearInterval(t(this, R));
+        const n = t(this, w).querySelector(".ng-container-body");
+        n && (n.scrollTop += o * 32), g(this, S, setInterval(() => {
+          clearInterval(t(this, S)), g(this, R, setInterval(() => {
+            n && (n.scrollTop += o * 32);
+          }, 10));
+        }, 500));
+      }, "delayScrollAction");
+      $(t(this, b).top).on("mousedown", (o) => {
+        o.buttons != 1 || o.altKey || o.ctrlKey || o.shiftKey || e(-1);
+      }), $(t(this, b).bottom).on("mousedown", (o) => {
+        o.buttons != 1 || o.altKey || o.ctrlKey || o.shiftKey || e(1);
+      }), $(t(this, b).top).on("touchstart", (o) => {
+        e(-1);
+      }), $(t(this, b).bottom).on("touchstart", (o) => {
+        e(1);
+      });
+      const s = /* @__PURE__ */ l(() => {
+        clearInterval(t(this, S)), clearInterval(t(this, R));
+      }, "clearTimer");
+      t(this, b).top.ontouchend = t(this, b).bottom.ontouchend = t(this, b).track.ontouchend = t(this, b).top.onmouseup = t(this, b).top.onmouseleave = t(this, b).bottom.onmouseup = t(this, b).bottom.onmouseleave = t(this, b).track.onmouseup = t(this, b).track.onmouseleave = s, $(t(this, b).track).on("mousedown", t(this, z)), $(t(this, b).track).on("touchstart", t(this, et)), $(t(this, b).thumb).on("mousedown", t(this, _)), $(t(this, b).thumb).on("touchstart", t(this, ot)), document.addEventListener("mouseup", (o) => {
+        t(this, M) && g(this, M, !1), document.removeEventListener("mousemove", t(this, B));
+      }), document.addEventListener("touchend", (o) => {
+        g(this, M, !1), document.removeEventListener("touchmove", t(this, D));
+      });
+    }, "#init"));
+    h(this, et, /* @__PURE__ */ l((e) => {
+      e.target.getBoundingClientRect(), e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, z).call(this, e);
+    }, "#track_onTouchStart"));
+    h(this, z, /* @__PURE__ */ l((e) => {
+      if (t(this, M) || e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftKey) return;
+      e.preventDefault();
+      var s = t(this, b).thumb.getBoundingClientRect();
+      const o = t(this, w).querySelector(".ng-container-body");
+      if (!o) return;
+      const n = o.clientHeight, i = e.clientY > s.y ? n : -n;
+      o.scrollTop += i, clearInterval(t(this, S)), clearInterval(t(this, R)), g(this, S, setInterval(() => {
+        clearInterval(t(this, S)), g(this, R, setInterval(() => {
+          var u = t(this, b).thumb.getBoundingClientRect();
+          e.clientY > u.y && e.clientY < u.y + u.height ? clearInterval(t(this, R)) : o.scrollTop += e.clientY > u.y ? n : -n;
+        }, 10));
+      }, 500));
+    }, "#track_onMouseDown"));
+    h(this, ot, /* @__PURE__ */ l((e) => {
+      e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, _).call(this, e), document.addEventListener("touchmove", t(this, D));
+    }, "#thumb_onTouchStart"));
+    h(this, D, /* @__PURE__ */ l((e) => {
+      e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, B).call(this, e);
+    }, "#thumb_onTouchMove"));
+    h(this, _, /* @__PURE__ */ l((e) => {
+      g(this, V, e.clientY), g(this, M, !0), this.shiftY = e.offsetY + t(this, b).track.getBoundingClientRect().y, this.trackHeight = $(t(this, b).track).height(), this.thumbHeight = $(t(this, b).thumb).height(), g(this, U, !0), document.addEventListener("mousemove", t(this, B));
+    }, "#thumb_onMouseDown"));
+    h(this, B, /* @__PURE__ */ l((e) => {
+      if (!t(this, M)) return;
+      e.preventDefault();
+      const s = this.trackHeight, o = t(this, N).call(this);
+      var n = e.clientY - this.shiftY;
+      n < 0 && (n = 0), n + o > s && (n = parseInt(s - o)), t(this, b).thumb.style.top = n + "px";
+      const i = t(this, w).querySelector(".ng-container-body");
+      if (!i) return;
+      const u = i.scrollHeight - i.clientHeight, y = s - o;
+      y > 0 && u > 0 && (i.scrollTop = n / y * u);
+    }, "#thumb_onMouseMove"));
+    h(this, N, /* @__PURE__ */ l(() => parseInt(t(this, b).thumb.dataset.height || 30, 10), "#getThumbHeight"));
+    this.applyBaseStyle();
+  }
+  connectedCallback() {
+    g(this, w, this.getRootNode().host), t(this, w) && (this.shadowRoot.innerHTML = `
+            <button class='ng-scroll-top' disabled><div class='ng-scroll-icon'></div></button>
+            <div class='ng-scroll-track'> <div class='ng-scroll-thumb'></div> </div>
+            <button class='ng-scroll-bottom'><div class='ng-scroll-icon'></div></button>
+        `, super.connectedCallback(), g(this, b, {
+      track: this.shadowRoot.querySelector(".ng-scroll-track"),
+      thumb: this.shadowRoot.querySelector(".ng-scroll-thumb"),
+      top: this.shadowRoot.querySelector(".ng-scroll-top"),
+      bottom: this.shadowRoot.querySelector(".ng-scroll-bottom")
+    }), t(this, tt).call(this));
+  }
+};
+w = new WeakMap(), M = new WeakMap(), b = new WeakMap(), S = new WeakMap(), R = new WeakMap(), U = new WeakMap(), V = new WeakMap(), tt = new WeakMap(), et = new WeakMap(), z = new WeakMap(), ot = new WeakMap(), D = new WeakMap(), _ = new WeakMap(), B = new WeakMap(), N = new WeakMap(), l(xt, "NineTableVScrollBar");
+let ft = xt;
+customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", ft);
+var T, A, f, k, C, nt, st, it, lt, W, rt, O, j, K, F;
+const wt = class wt extends HTMLElement {
+  constructor() {
+    super();
+    h(this, T);
+    h(this, A);
+    h(this, f);
+    h(this, k);
+    h(this, C);
+    h(this, nt);
+    h(this, st, 0);
+    I(this, "refresh", /* @__PURE__ */ l(() => {
+      if (!t(this, T)) return;
+      const e = t(this, T).querySelector(".ng-container-body");
+      if (!e) return;
+      const s = $(t(this, f).thumb, this.shadowRoot), o = e.querySelector("table > thead");
+      t(this, T).getRowCount;
+      const n = $(t(this, f).track).height(), i = $(t(this, f).thumb).height(), u = t(this, T).getRowCount ? t(this, T).getRowCount() : 0;
+      if (u <= 10) {
+        $(this).hide();
+        return;
+      } else
+        $(this).show();
+      const y = o ? o.getBoundingClientRect().height : 0, a = Math.max(Math.min(n * (e.clientHeight - y) / (32 * u), n), 16);
+      s[0].dataset.height = a, s.css({ height: a });
+      const p = n - t(this, F).call(this);
+      if (p <= 0) return;
+      let r = 0;
+      const d = e.scrollHeight - e.clientHeight;
+      d > 0 && (r = parseInt(e.scrollTop / d * p, 10), r > n - i && (r = n - i), r < 0 && (r = 0)), t(this, f).thumb.style.top = r + "px", t(this, f).top.disabled = e.scrollTop <= 0, t(this, f).bottom.disabled = e.scrollTop >= d;
+    }, "refresh"));
+    I(this, "delayScroll", /* @__PURE__ */ l((e, s, o, n) => {
+      clearInterval(t(this, k)), clearInterval(t(this, C));
+      const i = t(this, T).querySelector(".ng-container-body");
+      i && (i.scrollTop += e * 32), g(this, k, setInterval(() => {
+        clearInterval(t(this, k)), g(this, C, setInterval(() => {
+          i && (i.scrollTop += e * 32, n && n.call());
+        }, o));
+      }, s));
+    }, "delayScroll"));
+    I(this, "stopScroll", /* @__PURE__ */ l(() => {
+      clearInterval(t(this, k)), clearInterval(t(this, C));
+    }, "stopScroll"));
+    h(this, it, /* @__PURE__ */ l(() => {
+      const e = /* @__PURE__ */ l((o) => {
+        clearInterval(t(this, k)), clearInterval(t(this, C));
+        const n = t(this, T).querySelector(".ng-container-body");
+        n && (n.scrollTop += o * 32), g(this, k, setInterval(() => {
+          clearInterval(t(this, k)), g(this, C, setInterval(() => {
+            n && (n.scrollTop += o * 32);
+          }, 10));
+        }, 500));
+      }, "delayScrollAction");
+      $(t(this, f).top).on("mousedown", (o) => {
+        o.buttons != 1 || o.altKey || o.ctrlKey || o.shiftKey || e(-1);
+      }), $(t(this, f).bottom).on("mousedown", (o) => {
+        o.buttons != 1 || o.altKey || o.ctrlKey || o.shiftKey || e(1);
+      }), $(t(this, f).top).on("touchstart", (o) => {
+        e(-1);
+      }), $(t(this, f).bottom).on("touchstart", (o) => {
+        e(1);
+      });
+      const s = /* @__PURE__ */ l(() => {
+        clearInterval(t(this, k)), clearInterval(t(this, C));
+      }, "clearTimer");
+      t(this, f).top.ontouchend = t(this, f).bottom.ontouchend = t(this, f).track.ontouchend = t(this, f).top.onmouseup = t(this, f).top.onmouseleave = t(this, f).bottom.onmouseup = t(this, f).bottom.onmouseleave = t(this, f).track.onmouseup = t(this, f).track.onmouseleave = s, $(t(this, f).track).on("mousedown", t(this, W)), $(t(this, f).track).on("touchstart", t(this, lt)), $(t(this, f).thumb).on("mousedown", t(this, j)), $(t(this, f).thumb).on("touchstart", t(this, rt)), document.addEventListener("mouseup", (o) => {
+        t(this, A) && g(this, A, !1), document.removeEventListener("mousemove", t(this, K));
+      }), document.addEventListener("touchend", (o) => {
+        g(this, A, !1), document.removeEventListener("touchmove", t(this, O));
+      });
+    }, "#init"));
+    h(this, lt, /* @__PURE__ */ l((e) => {
+      e.target.getBoundingClientRect(), e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, W).call(this, e);
+    }, "#track_onTouchStart"));
+    h(this, W, /* @__PURE__ */ l((e) => {
+      if (t(this, A) || e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftKey) return;
+      e.preventDefault();
+      var s = t(this, f).thumb.getBoundingClientRect();
+      const o = t(this, T).querySelector(".ng-container-body");
+      if (!o) return;
+      const n = o.clientHeight, i = e.clientY > s.y ? n : -n;
+      o.scrollTop += i, clearInterval(t(this, k)), clearInterval(t(this, C)), g(this, k, setInterval(() => {
+        clearInterval(t(this, k)), g(this, C, setInterval(() => {
+          var u = t(this, f).thumb.getBoundingClientRect();
+          e.clientY > u.y && e.clientY < u.y + u.height ? clearInterval(t(this, C)) : o.scrollTop += e.clientY > u.y ? n : -n;
+        }, 10));
+      }, 500));
+    }, "#track_onMouseDown"));
+    h(this, rt, /* @__PURE__ */ l((e) => {
+      e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, j).call(this, e), document.addEventListener("touchmove", t(this, O));
+    }, "#thumb_onTouchStart"));
+    h(this, O, /* @__PURE__ */ l((e) => {
+      e.clientX = e.targetTouches[0].clientX, e.clientY = e.targetTouches[0].clientY, e.buttons = 1, t(this, K).call(this, e);
+    }, "#thumb_onTouchMove"));
+    h(this, j, /* @__PURE__ */ l((e) => {
+      g(this, st, e.clientY), g(this, A, !0), this.shiftY = e.offsetY + t(this, f).track.getBoundingClientRect().y, this.trackHeight = $(t(this, f).track).height(), this.thumbHeight = $(t(this, f).thumb).height(), g(this, nt, !0), document.addEventListener("mousemove", t(this, K));
+    }, "#thumb_onMouseDown"));
+    h(this, K, /* @__PURE__ */ l((e) => {
+      if (!t(this, A)) return;
+      e.preventDefault();
+      const s = this.trackHeight, o = t(this, F).call(this);
+      var n = e.clientY - this.shiftY;
+      n < 0 && (n = 0), n + o > s && (n = parseInt(s - o)), t(this, f).thumb.style.top = n + "px";
+      const i = t(this, T).querySelector(".ng-container-body");
+      if (!i) return;
+      const u = i.scrollHeight - i.clientHeight, y = s - o;
+      y > 0 && u > 0 && (i.scrollTop = n / y * u);
+    }, "#thumb_onMouseMove"));
+    h(this, F, /* @__PURE__ */ l(() => parseInt(t(this, f).thumb.dataset.height || 30, 10), "#getThumbHeight"));
+    this.applyBaseStyle();
+  }
+  connectedCallback() {
+    g(this, T, this.getRootNode().host), t(this, T) && (this.shadowRoot.innerHTML = `
+            <button class='ng-scroll-top' disabled><div class='ng-scroll-icon'></div></button>
+            <div class='ng-scroll-track'> <div class='ng-scroll-thumb'></div> </div>
+            <button class='ng-scroll-bottom'><div class='ng-scroll-icon'></div></button>
+        `, super.connectedCallback(), g(this, f, {
+      track: this.shadowRoot.querySelector(".ng-scroll-track"),
+      thumb: this.shadowRoot.querySelector(".ng-scroll-thumb"),
+      top: this.shadowRoot.querySelector(".ng-scroll-top"),
+      bottom: this.shadowRoot.querySelector(".ng-scroll-bottom")
+    }), t(this, it).call(this));
   }
 };
-S = new WeakMap(), R = new WeakMap(), c(E, "NineTableSheet"), q(E, "SCROLLBAR_SIZE", 16);
-let B = E;
-customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", B);
-var H;
-const K = class K extends HTMLElement {
+T = new WeakMap(), A = new WeakMap(), f = new WeakMap(), k = new WeakMap(), C = new WeakMap(), nt = new WeakMap(), st = new WeakMap(), it = new WeakMap(), lt = new WeakMap(), W = new WeakMap(), rt = new WeakMap(), O = new WeakMap(), j = new WeakMap(), K = new WeakMap(), F = new WeakMap(), l(wt, "NineTableHScrollBar");
+let gt = wt;
+customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", gt);
+var ct;
+const St = class St extends HTMLElement {
   constructor() {
     super();
-    w(this, H, /* @__PURE__ */ c(() => {
+    h(this, ct, /* @__PURE__ */ l(() => {
       const e = this.querySelector(".nine-tab-bar");
-      e && (e.addEventListener("click", (l) => {
-        const u = l.target.closest(".nine-tab-item");
-        if (!u) return;
-        const g = l.ctrlKey || l.metaKey || l.shiftKey, h = parseInt(u.dataset.index, 10);
-        this.switchSheet(h, g);
+      e && (e.addEventListener("click", (s) => {
+        const o = s.target.closest(".nine-tab-item");
+        if (!o) return;
+        const n = s.ctrlKey || s.metaKey || s.shiftKey, i = parseInt(o.dataset.index, 10);
+        this.switchSheet(i, n);
       }), this.switchSheet(0, !1));
     }, "#init"));
-    q(this, "switchSheet", /* @__PURE__ */ c((e, l = !1) => {
-      const u = /* @__PURE__ */ c(() => {
-        const i = this.querySelector("nine-table-sheets-body");
-        i.querySelectorAll("nine-splitter").forEach((s) => {
-          const y = parseInt(s.dataset.splitIndex, 10), b = i.querySelector(`nine-table-sheet[data-index="${y - 1}"]`), m = i.querySelector(`nine-table-sheet[data-index="${y}"]`);
-          b && m && b.classList.contains("active") && m.classList.contains("active") ? s.classList.add("active") : s.classList.remove("active");
+    I(this, "switchSheet", /* @__PURE__ */ l((e, s = !1) => {
+      const o = /* @__PURE__ */ l(() => {
+        const r = this.querySelector("nine-table-sheets-body");
+        r.querySelectorAll("nine-splitter").forEach((m) => {
+          const q = parseInt(m.dataset.splitIndex, 10), x = r.querySelector(`nine-table-sheet[data-index="${q - 1}"]`), E = r.querySelector(`nine-table-sheet[data-index="${q}"]`);
+          x && E && x.classList.contains("active") && E.classList.contains("active") ? m.classList.add("active") : m.classList.remove("active");
         });
-      }, "updateSplitters"), g = this.querySelector(".nine-tab-bar"), h = this.querySelector("nine-table-sheets-body"), f = g.querySelectorAll(".nine-tab-item"), p = h.querySelectorAll("nine-table-sheet");
-      if (!f[e]) return;
-      if (!l)
-        f.forEach((i, o) => {
-          i.classList.toggle("active", o === e);
-          const s = h.querySelector(`nine-table-sheet[data-index="${o}"]`);
-          s && (s.style.flex = "");
-        }), p.forEach((i, o) => {
-          i.classList.toggle("active", o === e);
+      }, "updateSplitters"), n = this.querySelector(".nine-tab-bar"), i = this.querySelector("nine-table-sheets-body"), u = n.querySelectorAll(".nine-tab-item"), y = i.querySelectorAll("nine-table-sheet");
+      if (!u[e]) return;
+      if (!s)
+        u.forEach((r, d) => {
+          r.classList.toggle("active", d === e);
+          const m = i.querySelector(`nine-table-sheet[data-index="${d}"]`);
+          m && (m.style.flex = "");
+        }), y.forEach((r, d) => {
+          r.classList.toggle("active", d === e);
         });
       else {
-        const i = f[e], o = g.querySelectorAll(".nine-tab-item.active");
-        if (i.classList.contains("active") && o.length <= 1)
+        const r = u[e], d = n.querySelectorAll(".nine-tab-item.active");
+        if (r.classList.contains("active") && d.length <= 1)
           return;
-        i.classList.toggle("active");
-        const s = h.querySelector(`nine-table-sheet[data-index="${e}"]`);
-        s && (s.classList.toggle("active"), s.classList.contains("active") || (s.style.flex = ""));
+        r.classList.toggle("active");
+        const m = i.querySelector(`nine-table-sheet[data-index="${e}"]`);
+        m && (m.classList.toggle("active"), m.classList.contains("active") || (m.style.flex = ""));
       }
-      const n = Array.from(h.querySelectorAll("nine-table-sheet.active"));
-      if (n.length > 1) {
-        const i = 1 / n.length;
-        n.forEach((o) => {
-          (!o.style.flex || o.style.flex === "1 1 100%") && (o.style.flex = `${i} ${i} 0px`);
+      const a = Array.from(i.querySelectorAll("nine-table-sheet.active"));
+      if (a.length > 1) {
+        const r = 1 / a.length;
+        a.forEach((d) => {
+          (!d.style.flex || d.style.flex === "1 1 100%") && (d.style.flex = `${r} ${r} 0px`);
         });
       } else
-        n.forEach((i) => {
-          i.style.flex = "1 1 100%";
+        a.forEach((r) => {
+          r.style.flex = "1 1 100%";
         });
-      u();
-      const d = h.querySelector("nine-table-sheet.active");
-      if (d && typeof d.getRowCount == "function") {
-        const i = this.querySelector("#row-count");
-        i && (i.textContent = d.getRowCount().toLocaleString());
+      o();
+      const p = i.querySelector("nine-table-sheet.active");
+      if (p && typeof p.getRowCount == "function") {
+        const r = this.querySelector("#row-count");
+        r && (r.textContent = p.getRowCount().toLocaleString());
       }
     }, "switchSheet"));
   }
   connectedCallback() {
-    a(this, H).call(this);
+    t(this, ct).call(this);
   }
 };
-H = new WeakMap(), c(K, "NineTableSheets");
-let N = K;
-customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", N);
-var v, C, T, A, M;
-const Y = class Y {
-  constructor(t) {
-    w(this, v);
-    w(this, C, null);
-    w(this, T, /* @__PURE__ */ c(() => {
-      const t = a(this, v).host;
-      t && (k(this, C, new ResizeObserver((e) => {
-        for (let l of e)
-          t.getAttribute("auto-height") === "true" && a(this, A).call(this, t);
-      })), a(this, C).observe(t));
+ct = new WeakMap(), l(St, "NineTableSheets");
+let mt = St;
+customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", mt);
+var L, P, at, Z, ht;
+const Tt = class Tt {
+  constructor(c) {
+    h(this, L);
+    h(this, P, null);
+    h(this, at, /* @__PURE__ */ l(() => {
+      const c = t(this, L).host;
+      c && (g(this, P, new ResizeObserver((e) => {
+        for (let s of e)
+          c.getAttribute("auto-height") === "true" && t(this, Z).call(this, c);
+      })), t(this, P).observe(c));
     }, "#observeResize"));
-    w(this, A, /* @__PURE__ */ c((t) => {
-      var m, x;
-      const e = (m = t.shadowRoot) == null ? void 0 : m.querySelector("nine-table-sheet.active");
+    h(this, Z, /* @__PURE__ */ l((c) => {
+      var E, H;
+      const e = (E = c.shadowRoot) == null ? void 0 : E.querySelector("nine-table-sheet.active");
       if (!e) return;
-      const l = ((x = e.getRowCount) == null ? void 0 : x.call(e)) || 0, u = parseInt(t.getAttribute("max-display-row"), 10) || 10, g = Math.min(l, u), h = e.querySelector("tbody tr") || e.querySelector("tr"), f = h ? h.getBoundingClientRect().height : 32, p = a(this, v).querySelector("nine-table-header"), n = a(this, v).querySelector("nine-table-sheets-footer"), d = p ? p.getBoundingClientRect().height : 40, i = n ? n.getBoundingClientRect().height : 32, s = d + i + 16, y = g * f + s;
-      t.style.height = `${y}px`, t.style.maxHeight = `${u * f + s}px`;
-      const b = a(this, v).querySelector("nine-table-sheets-body");
-      b && (b.style.overflowY = l > u ? "auto" : "hidden");
+      const s = ((H = e.getRowCount) == null ? void 0 : H.call(e)) || 0, o = parseInt(c.getAttribute("max-display-row"), 10) || 10, n = Math.min(s, o), i = e.querySelector("tbody tr") || e.querySelector("tr"), u = i ? i.getBoundingClientRect().height : 32, y = t(this, L).querySelector("nine-table-header"), a = t(this, L).querySelector("nine-table-sheets-footer"), p = y ? y.getBoundingClientRect().height : 40, r = a ? a.getBoundingClientRect().height : 32, m = p + r + 16, q = n * u + m;
+      c.style.height = `${q}px`, c.style.maxHeight = `${o * u + m}px`;
+      const x = t(this, L).querySelector("nine-table-sheets-body");
+      x && (x.style.overflowY = s > o ? "auto" : "hidden");
     }, "#applyAutoHeight"));
-    w(this, M, /* @__PURE__ */ c(() => {
-      const t = a(this, v).host, l = Array.from(t.children).filter((p) => p.tagName === "TABLE"), u = t.getAttribute("auto-height") === "true", g = l.map((p, n) => `<nine-table-sheet class="${n === 0 ? "active" : ""}" data-index="${n}"></nine-table-sheet>`).join(""), h = l.map((p, n) => `<div class="nine-tab-item ${n === 0 ? "active" : ""}" data-index="${n}">Sheet ${n + 1}</div>`).join("");
-      a(this, v).innerHTML = `
+    h(this, ht, /* @__PURE__ */ l(() => {
+      const c = t(this, L).host, s = Array.from(c.children).filter((y) => y.tagName === "TABLE"), o = c.getAttribute("auto-height") === "true", n = s.map((y, a) => `<nine-table-sheet class="${a === 0 ? "active" : ""}" data-index="${a}"></nine-table-sheet>`).join(""), i = s.map((y, a) => `<div class="nine-tab-item ${a === 0 ? "active" : ""}" data-index="${a}">Sheet ${a + 1}</div>`).join("");
+      t(this, L).innerHTML = `
             <style>
                 :host { 
                     display: flex; 
                     flex-direction: column; 
                     position: relative; 
                     overflow: hidden; 
-                    height: ${u ? "auto" : "100%"}; 
+                    height: ${o ? "auto" : "100%"}; 
                     background: #fff; 
                 }
                 nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
@@ -390,9 +647,9 @@ const Y = class Y {
             <nine-table-body>
                 <nine-table-summary></nine-table-summary>
                 <nine-table-sheets>
-                    <nine-table-sheets-body>${g}</nine-table-sheets-body>
+                    <nine-table-sheets-body>${n}</nine-table-sheets-body>
                     <nine-table-sheets-footer>
-                        <div class="nine-tab-bar">${h}</div>
+                        <div class="nine-tab-bar">${i}</div>
                         <div class="sheets-counter">Total : <span id="row-count">0</span></div>
                     </nine-table-sheets-footer>
                 </nine-table-sheets>
@@ -400,33 +657,33 @@ const Y = class Y {
             </nine-table-body>
             <nine-table-footer></nine-table-footer>
         `;
-      const f = a(this, v).querySelectorAll("nine-table-sheet");
-      f == null || f.forEach((p, n) => {
-        l[n] && setTimeout(() => {
-          p.init(l[n]), u && a(this, A).call(this, t);
+      const u = t(this, L).querySelectorAll("nine-table-sheet");
+      u == null || u.forEach((y, a) => {
+        s[a] && setTimeout(() => {
+          y.init(s[a]), o && t(this, Z).call(this, c);
         });
       });
     }, "#render"));
-    k(this, v, t), a(this, M).call(this), a(this, T).call(this);
+    g(this, L, c), t(this, ht).call(this), t(this, at).call(this);
   }
 };
-v = new WeakMap(), C = new WeakMap(), T = new WeakMap(), A = new WeakMap(), M = new WeakMap(), c(Y, "LayoutManager");
-let W = Y;
-var L;
-const F = class F extends HTMLElement {
+L = new WeakMap(), P = new WeakMap(), at = new WeakMap(), Z = new WeakMap(), ht = new WeakMap(), l(Tt, "LayoutManager");
+let pt = Tt;
+var G;
+const kt = class kt extends HTMLElement {
   constructor() {
     super();
-    w(this, L, !1);
+    h(this, G, !1);
     this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    a(this, L) || (this.layoutManager = new W(this.shadowRoot), k(this, L, !0), $.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } })));
+    t(this, G) || (this.layoutManager = new pt(this.shadowRoot), g(this, G, !0), J.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } })));
   }
   disconnectedCallback() {
-    $.log("NineTable disconnected.");
+    J.log("NineTable disconnected.");
   }
 };
-L = new WeakMap(), c(F, "NineTable");
-let O = F;
-customElements.get("nine-table") || customElements.define("nine-table", O);
+G = new WeakMap(), l(kt, "NineTable");
+let yt = kt;
+customElements.get("nine-table") || customElements.define("nine-table", yt);
 //# sourceMappingURL=nine-table.js.map