@ninebone/datagrid 0.0.0-stage → 0.0.3

package/dist/nine-table.js

@@ -0,0 +1,4234 @@
+import { trace as e } from "@ninebone/util";
+// src/core/protype.js
+Array.prototype.nineBinarySearch = function(e) {
+	let t = 0, n = this.length - 1, r;
+	for (; t <= n;) {
+		if (r = parseInt((t + n) / 2), e === this[r]) return r;
+		e < this[r] ? n = r - 1 : t = r + 1;
+	}
+	return -1;
+};
+var t = /* @__PURE__ */ new WeakMap();
+HTMLElement.prototype.addDebounseEventListener = function(e, n, r, i, a = 500) {
+	let o = this;
+	t.has(o) || t.set(o, {
+		timer: null,
+		cancelFn: null
+	});
+	let s = t.get(o);
+	o.addEventListener(r, (e) => {
+		e.actualTarget = e.target, s.timer &&= (clearTimeout(s.timer), null), s.timer = setTimeout(() => {
+			s.timer = null, s.cancelFn = i.call(o, e);
+		}, a);
+	}), o.addEventListener(e, (e) => {
+		s.timer &&= (clearTimeout(s.timer), null), s.cancelFn &&= (s.cancelFn(), null), n.call(o, e);
+	});
+}, nine.measureTextSize = (e, t = "12px sans-serif") => {
+	if (typeof e == "number" && (e += ""), !e) return {
+		width: null,
+		height: null
+	};
+	let n = (e) => {
+		let t = document.createElement("DIV");
+		return t.innerHTML = e, t.textContent || t.innerText || "";
+	};
+	e = e.replaceAll("\n", "<br>");
+	let r = document.body.querySelector("canvas#_nine_measure_canvas_");
+	r || (r = document.createElement("canvas"), r.id = "_nine_measure_canvas_", r.style.cssText = "position: absolute; visibility: hidden; pointer-events: none; left: -9999px;", document.body.appendChild(r));
+	let i = r.getContext("2d");
+	i.font = t;
+	let a = 0, o = 0;
+	for (let t of e.split("<br>")) {
+		let e = n(t), r = i.measureText(e);
+		a = Math.max(a, r.width);
+		let s = r.fontBoundingBoxAscent || 10, c = r.fontBoundingBoxDescent || 3;
+		o += s + c;
+	}
+	return {
+		width: a,
+		height: o
+	};
+};
+var n = new class extends e.constructor {
+	constructor() {
+		super(), this.init("nine-table", "green");
+	}
+}(), r = {
+	META: { INDEX: {
+		ROWID: 0,
+		FILTER: 1,
+		GROUP: 2
+	} },
+	ROW_STATE: {
+		EMPTY: "EMPTY",
+		NORMAL: "NORMAL",
+		INSERT: "INSERT",
+		UPDATE: "UPDATE",
+		DELETE: "DELETE"
+	},
+	EVENT: {
+		LOAD: "load",
+		CELL_BUTTON_CLICK: "cell-button-click"
+	}
+}, i = class {
+	#e;
+	#t = -1;
+	constructor(e) {
+		this.#e = e;
+	}
+	get at() {
+		return this.#t;
+	}
+	set at(e) {
+		this.#t = parseInt(e, 10);
+	}
+	count = () => this.#e.rawRecords.length;
+}, a = class e {
+	#e;
+	#t;
+	#n = 0;
+	#r = [];
+	static META_INDEX = { FILTER: 0 };
+	static ROW_STATE = {
+		EMPTY: "EMPTY",
+		NORMAL: "NORMAL",
+		INSERT: "INSERT",
+		UPDATE: "UPDATE",
+		DELETE: "DELETE"
+	};
+	constructor(e, t) {
+		this.#e = e, this.#t = t, this.#a();
+	}
+	#i = () => (this.#t.rawRecords || []).filter((e) => !e.__ng?.deleted);
+	get count() {
+		return this.length;
+	}
+	count = () => this.length;
+	getArray = (e, t) => {
+		let n = this.#i();
+		if (e == null) return n;
+		if (e < 0 || e >= n.length) return null;
+		let r = n[e];
+		if (t != null) {
+			let e = this.getHostFields().indexOf(t);
+			return e >= 0 ? r.v[e] : null;
+		}
+		return r;
+	};
+	setArray = (t, n, r) => {
+		let i = this.#i()[t];
+		i.v[n] !== r && i.__ng.rowState !== e.ROW_STATE.INSERT && (i.__ng.rowState = e.ROW_STATE.UPDATE), i.v[n] = r;
+	};
+	get = (e, t) => {
+		let n = this.#i();
+		if (e == null) return this.#u(n);
+		if (e < 0 || e >= n.length) return null;
+		let r = n[e], i = this.getHostFields();
+		if (t != null) {
+			let e = i.indexOf(t);
+			return e >= 0 ? r.v[e] : null;
+		}
+		return this.#u(r);
+	};
+	getAll = () => this.#t.rawRecords || [];
+	getHostFields = () => typeof this.#e.fields?.get == "function" ? this.#e.fields.get() : [];
+	#a = () => {
+		this.#r = [];
+		let e = this.#e.template || [];
+		Array.from(e).forEach((e) => {
+			this.#r.push(e.getBoundingClientRect?.().height || 24);
+		}), (this.#t.rawRecords || []).forEach((e) => {
+			e.__ng ||= this.#s(), e.__ng.height = this.#r.slice();
+		});
+	};
+	get source() {
+		return this.#u(this.#t.rawRecords);
+	}
+	set source(e) {
+		this.set(e);
+	}
+	#o = () => {
+		this.#e.shadowRoot.querySelectorAll("nine-table-sheet").forEach((e) => {
+			e.invalidate();
+		}), this.#e.shadowRoot.querySelector("nine-table-sheets-footer")?.refresh();
+	};
+	set = (e) => {
+		let t = () => {
+			this.#e.loading = !0, setTimeout(() => {
+				try {
+					this.clear(), this.add(e, !1), this.#o();
+				} finally {
+					this.#e.loading = !1;
+				}
+			});
+		};
+		this.#e.loaded ? t() : this.#e.addEventListener(r.EVENT.LOAD, (e) => {
+			t();
+		}, { once: !0 });
+	};
+	get nextId() {
+		return this.#n++;
+	}
+	get length() {
+		return this.#i().length;
+	}
+	get count() {
+		return this.length;
+	}
+	getRowCount() {
+		return this.length;
+	}
+	#s = (t = 0) => ({
+		rowState: e.ROW_STATE.EMPTY,
+		deleted: !1,
+		filtered: !1,
+		height: this.#r.slice(),
+		o: {},
+		c: {},
+		__: [
+			0,
+			0,
+			0,
+			0,
+			e.ROW_STATE.EMPTY,
+			!1,
+			!1,
+			!0,
+			!1,
+			!0,
+			!0,
+			!1,
+			this.#r.slice(),
+			-1,
+			{},
+			{}
+		],
+		_: [t, []]
+	});
+	reset = () => {
+		this.#t.rawRecords = [], this.#o();
+	};
+	clear = () => {
+		this.#t.rawRecords = [], this.#t.viewRecords?.reset && this.#t.viewRecords.reset(), this.#n = 0, this.#o();
+	};
+	#c = (e) => {
+		Array.isArray(e) || (e = [e]);
+		let t = this.getHostFields().length > 0 ? this.getHostFields() : Object.keys(e[0] || {}), n = [];
+		return e.forEach((e) => {
+			let r = { v: [] };
+			t.forEach((t) => {
+				r.v.push(e[t] !== void 0 && e[t] !== null ? e[t] : "");
+			}), n.push(r);
+		}), n;
+	};
+	#l = (t) => (Array.isArray(t) || (t = [t]), t.forEach((t) => {
+		let n = this.nextId;
+		t.m = this.#s(n), t.__ng = t.m, t.__ng.rowid = n, t.__ng.rowState = e.ROW_STATE.INSERT, t.__ng._[0] = n;
+	}), t);
+	add = (t, n = !0) => {
+		t === void 0 && (t = {});
+		let r = this.#c(t);
+		this.#t.rawRecords = this.#t.rawRecords.concat(this.#l(r));
+		let i = this.count() - 1;
+		return n || r.forEach((t, n) => {
+			let r = this.#t.rawRecords[this.#t.rawRecords.length - 1 - n];
+			r && (r.__ng.rowState = e.ROW_STATE.EMPTY);
+		}), this.#o(), i;
+	};
+	delete = (t) => {
+		let n = [];
+		n = Array.isArray(t) ? t : t === void 0 ? [this.#t.host.row.at] : [parseInt(t, 10)];
+		let r = this.#i();
+		n.sort((e, t) => t - e).forEach((t) => {
+			if (r[t]) {
+				let n = r[t].__ng.rowid;
+				r[t].__ng.rowState === e.ROW_STATE.INSERT ? this.#t.rawRecords = this.#t.rawRecords.filter((e) => e.__ng.rowid !== n) : this.#t.rawRecords.forEach((t) => {
+					t.__ng.rowid === n && (t.__ng.deleted = !0, t.__ng.rowState = e.ROW_STATE.DELETE);
+				});
+			}
+		}), this.#o();
+	};
+	setValue = (t, n, r) => {
+		t = parseInt(t, 10);
+		let i = this.getHostFields().indexOf(n);
+		if (i < 0) return;
+		let a = this.#i()[t];
+		if (!a) return;
+		let o = a.v[i];
+		o !== r && a.__ng.rowState !== e.ROW_STATE.INSERT && (a.__ng.o.hasOwnProperty(n) || (a.__ng.o[n] = o), a.__ng.rowState = e.ROW_STATE.UPDATE), a.v[i] = r;
+	};
+	#u = (e) => {
+		if (!e) return e;
+		let t = !Array.isArray(e), n = t ? [e] : e, r = this.getHostFields(), i = n.filter((e) => !e.__ng?.deleted).map((e) => {
+			let t = {};
+			return r.forEach((n, r) => {
+				t[n] = e.v ? e.v[r] : e[n];
+			}), t.__ng = e.__ng, t;
+		});
+		return t ? i[0] : i;
+	};
+}, o = class {
+	#e;
+	constructor(e) {
+		this.#e = e, this.row = new i(this), this.data = new a(this.#e, this), this.rawRecords = [], this.viewRecords = [], this.delRecords = [], this.pageCnt = 25, this.viewRecords.reset = () => {
+			this.#e.view?.redraw && this.#e.view.redraw();
+		}, this.setDataSource = (e) => {
+			this.data && this.data.reset(), this.rawRecords = [], this.viewRecords = [], this.delRecords = [], this.data.set(e || []);
+		}, this.getRowState = (e) => {
+			let t = parseInt(e, 10);
+			if (!(t >= this.data.count())) return this.data.getValidData()[t]?.__ng?.rowState;
+		}, this.getRowPosition = () => this.row.at, this.setRowPosition = (e) => {
+			this.row.at = e;
+		}, this.scrollTo_V1 = (e) => (e < 0 && (e = 0), e >= this.rawRecords.length && (e = this.rawRecords.length - 1), this.viewRecords.rawIndex = e, this.viewRecords.reset && this.viewRecords.reset(), !(e <= 0 || e >= this.rawRecords.length - 1)), this.getColumn = (e, t) => this.data.get(e, t), this.setColumn = (e, t, n) => {
+			e = parseInt(e, 10), this.data.setValue(e, t, n);
+		}, this.setDataSource([]);
+	}
+}, s = class {
+	#e;
+	#t = [];
+	constructor(e) {
+		this.#e = e, this.#r();
+	}
+	get() {
+		return this.#t.map((e) => e.name);
+	}
+	getFields() {
+		return this.#t;
+	}
+	getType(e) {
+		let t = this.#t.find((t) => t.name === e);
+		return t ? t.type : "string";
+	}
+	add = (e, t = "string") => {
+		e.forEach((e) => {
+			this.#t.some((t) => t.name === e) || this.#t.push({
+				name: e,
+				type: t
+			});
+		}), this.#n();
+	};
+	indexOf(e) {
+		return this.#t.findIndex((t) => t.name === e);
+	}
+	includes(e) {
+		return this.#t.some((t) => t.name === e);
+	}
+	#n = () => {
+		let e = /* @__PURE__ */ new Map();
+		this.#t.forEach((t) => {
+			e.set(t.name, t.type);
+		}), this.#t = Array.from(e, ([e, t]) => ({
+			name: e,
+			type: t
+		})), this.#t = this.#t.filter((e) => e.name !== "" && e.name !== "__ng"), this.#t.sort((e, t) => e.name.length < t.name.length ? 1 : -1);
+	};
+	#r = () => {
+		this.#t = [], n.log(this.#e.querySelectorAll("table"));
+		let e = Array.from(this.#e.querySelectorAll("table"));
+		if (e && e.length !== 0) {
+			for (let t of e) n.log(t), t.querySelectorAll("[data-bind]").forEach((e) => {
+				let t = e.dataset.bind, n = e.getAttribute("data-type") || "string";
+				t && this.#t.push({
+					name: t,
+					type: n
+				});
+			}), [
+				"data-expr",
+				"background-color",
+				"color",
+				"tooltip",
+				"visible",
+				"readonly",
+				"enable-button",
+				"enable-check",
+				"class-expr",
+				"icon-color",
+				"icon-src"
+			].forEach((e) => {
+				t.querySelectorAll(`[${e}]`).forEach((t) => {
+					let n = t.getAttribute(e);
+					if (n) {
+						if (n.indexOf("data.") < 0) {
+							let e = n.search(/[(]/g);
+							if (e > 0) try {
+								n = String(window[n.substring(0, e).trim()]);
+							} catch {
+								n = "";
+							}
+						}
+						n.split("data.").forEach((e) => {
+							if (e.trim() != "") {
+								let t = e.search(/[^_A-Za-z0-9]/g), r = "";
+								t >= 0 ? r = e.substring(0, t) : n.startsWith("data.") && (r = e.replace("data.", "")), r && this.#t.push({
+									name: r,
+									type: "string"
+								});
+							}
+						});
+					}
+				});
+			});
+			this.#n();
+		}
+	};
+}, c = class extends HTMLElement {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.#e();
+	}
+	#e = () => {};
+};
+customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", c);
+// src/layout/nine-table-sheets-footer.js
+var l = class extends HTMLElement {
+	#e;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.#t();
+	}
+	refresh = () => {
+		this.querySelector("#row-count").innerHTML = this.#e.data.count().toLocaleString();
+	};
+	#t = () => {
+		this.#e = this.getRootNode().host, this.#r(), this.querySelector(".nine-tab-bar")?.addEventListener("click", (e) => {
+			let t = e.ctrlKey || e.metaKey || e.shiftKey, n = e.target.closest("nt-sheets-tab-item");
+			if (!n) return;
+			let r = parseInt(n.dataset.index, 10);
+			this.#n(r, t);
+		}), setTimeout(() => {
+			this.#n(0, !1);
+		});
+	};
+	#n = (e, t = !1) => {
+		let n = () => {
+			let e = Array.from(this.#e.shadowRoot.querySelectorAll("nine-table-sheet"));
+			Array.from(this.#e.shadowRoot.querySelectorAll("nine-splitter")).forEach((e) => e.style.setProperty("display", "none"));
+			let t = e.map((e, t) => ({
+				sheet: e,
+				idx: t
+			})).filter(({ sheet: e }) => e.classList.contains("active"));
+			if (!(t.length < 2)) for (let e = 0; e < t.length - 1; e++) {
+				let n = t[e].idx, r = this.#e.shadowRoot.querySelector(`nine-splitter[data-split-index="${n}"]`);
+				r && r.style.setProperty("display", "");
+			}
+		}, r = this.querySelector(".nine-tab-bar"), i = this.#e.shadowRoot.querySelector("nine-table-sheets-body"), a = r.querySelectorAll("nt-sheets-tab-item"), o = i.querySelectorAll("nine-table-sheet");
+		if (!a[e]) return;
+		if (!t) a.forEach((t, n) => {
+			t.setActive(n === e);
+		}), o.forEach((t, n) => {
+			let r = n === e;
+			t.classList.toggle("active", r), t.style.flex = r ? "1 1 100%" : "";
+		});
+		else {
+			let t = a[e], n = r.querySelectorAll("nt-sheets-tab-item.active");
+			if (t.classList.contains("active") && n.length <= 1) return;
+			t.classList.toggle("active");
+			let o = i.querySelector(`nine-table-sheet[data-index="${e}"]`);
+			o && (o.classList.toggle("active"), o.classList.contains("active") || (o.style.flex = ""));
+		}
+		let s = i.querySelectorAll("nine-table-sheet.active");
+		s?.forEach((e) => {
+			e.style.flex = s.length > 1 ? "1 1 0%" : "1 1 100%", typeof e.refreshLayout == "function" ? e.refreshLayout() : e.invalidate?.();
+		}), n();
+	};
+	#r() {
+		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE").map((e, t) => `<nt-sheets-tab-item class="${t === 0 ? "active" : ""}" data-index="${t}">${e.getAttribute("caption") || `Sheet ${t + 1}`}</nt-sheets-tab-item>`).join("");
+		this.innerHTML = `
+            <div class="nine-tab-bar">${e}</div>
+            <div class="sheets-counter">Total : <span id="row-count">0</span></div>
+        `;
+	}
+}, u = class extends HTMLElement {
+	constructor() {
+		super();
+	}
+	connectedCallback() {}
+	setActive(e) {
+		this.classList.toggle("active", e);
+	}
+};
+customElements.get("nt-sheets-tab-item") || customElements.define("nt-sheets-tab-item", u), customElements.get("nine-table-sheets-footer") || customElements.define("nine-table-sheets-footer", l);
+// src/layout/nine-table-toolbar.js
+var d = class extends HTMLElement {
+	#e;
+	#t;
+	connectedCallback() {
+		this.#e = this.getRootNode().host, this.#n(), this.#i();
+	}
+	#n() {
+		this.innerHTML = "\n            <div class=\"ng-toolbar-left\">\n                <button type=\"button\" class=\"ng-toolbar-menu-btn\" title=\"Menu\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#374151\" stroke-width=\"2\">\n                        <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n                        <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n                        <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n                    </svg>\n                </button>\n                <span class=\"ng-toolbar-title\"></span>\n            </div>\n\n            <div class=\"ng-toolbar-custom\" id=\"custom-container\"></div>\n        ", this.#t = this.querySelector("#custom-container"), this.#r();
+	}
+	#r() {
+		let e = this.#e.getAttribute("theme") === "simple" || this.#e.classList.contains("simple"), t = this.#e.getAttribute("show-toolbar") !== "false", n = this.#e.getAttribute("show-menu") !== "false", r = this.#e.getAttribute("caption") || "";
+		e || !t ? this.setAttribute("hidden", "") : this.removeAttribute("hidden"), this.setAttribute("show-menu", n ? "true" : "false"), this.updateCaption(r);
+	}
+	#i() {
+		let e = this.querySelector(".ng-toolbar-title");
+		e && e.addEventListener("dblclick", () => {
+			let t = "<font color=\"green\">https://www.ninegrid.net</font>", n = this.#e.getAttribute("caption") || "";
+			e.innerHTML = e.innerHTML === t ? n : t;
+		});
+		let t = this.querySelector(".ng-toolbar-menu-btn");
+		t && t.addEventListener("click", () => {
+			this.#e.dispatchEvent(new CustomEvent("toolbar-menu-click", {
+				bubbles: !0,
+				composed: !0,
+				detail: { targetTable: this.#e }
+			}));
+		});
+	}
+	addCustomElement(e) {
+		this.#t && this.#t.append(e);
+	}
+	updateCaption(e) {
+		let t = this.querySelector(".ng-toolbar-title");
+		t && (t.textContent = e);
+	}
+};
+customElements.get("nine-table-toolbar") || customElements.define("nine-table-toolbar", d);
+// src/layout/nine-table-hscrollbar.js
+var f = class extends HTMLElement {
+	#e;
+	#t = !1;
+	#n;
+	#r;
+	#i;
+	#a;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		if (this.#e = this.closest("nine-table-sheet") || this.getRootNode().host, !this.#e) return;
+		this.innerHTML = "\n            <button class='scroll-left' disabled><div class='scroll-icon'></div></button>\n            <div class='scroll-track'><div class='scroll-thumb'></div></div>\n            <button class='scroll-right' disabled><div class='scroll-icon'></div></button>\n        ";
+		let e = () => {
+			let t = this.#e.querySelector(".ng-sheet-body .ng-container-body");
+			t ? (this.#n = {
+				container: t,
+				track: this.querySelector(".scroll-track"),
+				thumb: this.querySelector(".scroll-thumb"),
+				left: this.querySelector(".scroll-left"),
+				right: this.querySelector(".scroll-right")
+			}, this.#c(), this.#o(), this.refresh()) : setTimeout(e, 10);
+		};
+		e();
+	}
+	disconnectedCallback() {
+		this.#a && this.#a.disconnect();
+	}
+	#o = () => {
+		if (!this.#e) return;
+		let e = this.#e.querySelector(".ng-sheet-body .ng-container-body");
+		e && (this.#a = new ResizeObserver(() => {
+			this.refresh();
+		}), this.#a.observe(e));
+	};
+	refresh = () => {
+		if (!this.#e || !this.#n || this.#t) return;
+		let e = this.#n.container, t = e.querySelector("table");
+		if (!t) return;
+		let n = this.#n.track, r = this.#n.thumb, i = e.clientWidth, a = t.scrollWidth, o = i !== 0 && a > i;
+		if (this.#e.classList.toggle("hscroll-visible", o), !o) return;
+		let s = n.clientWidth;
+		if (s <= 0) return;
+		let c = Math.max(Math.min(i / a * s, s), 20);
+		r.style.width = `${c}px`;
+		let l = e.scrollLeft, u = a - i, d = 0;
+		u > 0 && (d = parseInt(l / u * (s - c), 10)), d < 0 && (d = 0);
+		let f = s - c;
+		d > f && (d = f), r.style.left = `${d}px`, this.#n.left.disabled = d === 0, this.#n.right.disabled = d >= f - 1;
+	};
+	#s = (e) => {
+		if (!this.#n) return !1;
+		let t = this.#n.container, n = t.querySelector("table");
+		if (!n) return !1;
+		let r = this.#n.track.getBoundingClientRect(), i = this.#n.thumb.clientWidth, a = e;
+		a < 0 && (a = 0);
+		let o = r.width - i;
+		a > o && (a = o), a = parseInt(a, 10), this.#n.thumb.style.left = `${a}px`, this.#n.left.disabled = a === 0, this.#n.right.disabled = a >= o - 1;
+		let s = t.clientWidth, c = n.scrollWidth - s;
+		return o > 0 && c > 0 && (t.scrollLeft = a / o * c), a > 0 && a < o - 1;
+	};
+	#c = () => {
+		let e = (e) => {
+			clearInterval(this.#r), clearInterval(this.#i);
+			let t = parseInt(this.#n.thumb.style.left || 0, 10);
+			this.#s(t + e), this.#r = setInterval(() => {
+				clearInterval(this.#r), this.#i = setInterval(() => {
+					let t = parseInt(this.#n.thumb.style.left || 0, 10);
+					this.#s(t + e) || clearInterval(this.#i);
+				}, 50);
+			}, 500);
+		}, t = () => {
+			clearInterval(this.#r), clearInterval(this.#i);
+		};
+		[
+			"mouseup",
+			"mouseleave",
+			"touchend"
+		].forEach((e) => {
+			this.#n.left.addEventListener(e, t), this.#n.right.addEventListener(e, t), this.#n.track.addEventListener(e, t);
+		}), this.#n.left.addEventListener("mousedown", (t) => {
+			t.button === 0 && e(-20);
+		}), this.#n.right.addEventListener("mousedown", (t) => {
+			t.button === 0 && e(20);
+		}), this.#n.left.addEventListener("touchstart", () => e(-20)), this.#n.right.addEventListener("touchstart", () => e(20)), this.#n.track.addEventListener("mousedown", (e) => {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			let t = this.#n.track.getBoundingClientRect(), n = this.#n.thumb.clientWidth;
+			this.#s(e.clientX - t.left - n / 2);
+		}), this.#n.thumb.addEventListener("mousedown", (e) => {
+			if (e.button !== 0) return;
+			e.stopPropagation(), e.preventDefault(), this.#t = !0, this.shiftX = e.clientX - this.#n.thumb.getBoundingClientRect().left;
+			let n = (e) => {
+				if (!this.#t) return;
+				let t = this.#n.track.getBoundingClientRect();
+				this.#s(e.clientX - t.left - this.shiftX);
+			}, r = () => {
+				this.#t = !1, t(), document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", r), this.refresh();
+			};
+			document.addEventListener("mousemove", n), document.addEventListener("mouseup", r);
+		});
+	};
+};
+customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", f);
+// src/layout/nine-table-vscrollbar.js
+var p = class extends HTMLElement {
+	#e;
+	#t;
+	#n = !1;
+	#r;
+	#i = 0;
+	#a = 0;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.#e = this.getRootNode().host, this.#t = this.closest("nine-table-sheet"), this.innerHTML = "\n            <button class='scroll-top' disabled><div class='scroll-icon'></div></button>\n            <div class='scroll-track'><div class='scroll-thumb'></div></div>\n            <button class='scroll-bottom' disabled><div class='scroll-icon'></div></button>\n        ";
+		let e = () => {
+			let t = this.#t.querySelector(".ng-sheet-body");
+			t ? (this.#r = {
+				container: t,
+				track: this.querySelector(".scroll-track"),
+				thumb: this.querySelector(".scroll-thumb"),
+				top: this.querySelector(".scroll-top"),
+				bottom: this.querySelector(".scroll-bottom")
+			}, this.#s(), this.refresh()) : setTimeout(e, 10);
+		};
+		e();
+	}
+	#o = () => {
+		let e = this.#t.view.getArray(), t = e ? e.length : 0, n = this.#t.elements?.scrollHolder, r = n && parseFloat(n.style.height) || 0;
+		(!r || r <= 0) && (r = this.#t.sourceTable?.querySelector("tbody tr[grouping='true']") && this.#t.rowManager ? body.scrollHeight > body.clientHeight ? body.scrollHeight : t * 30 : t * (this.#t.getRowHeight() || 1));
+		let i = 15e6, a = r > i, o = 1, s = r;
+		return a && (o = i / r, s = i), {
+			rawContentHeight: r,
+			contentHeight: s,
+			scaleFactor: o,
+			useScaling: a,
+			totalCount: t
+		};
+	};
+	refresh = () => {
+		if (this.#n || !this.#t || !this.#t.elements || !this.#r) return;
+		let e = this.#r.container, t = this.#r.track, n = this.#r.thumb, { contentHeight: r } = this.#o(), i = (this.#t.querySelector("thead")?.offsetHeight || 0) + (this.#t.querySelector("tfoot")?.offsetHeight || 0) + (this.#t.querySelector("tbody.head")?.offsetHeight || 0), a = this.#t.querySelector(".ng-sheet-body").offsetHeight || 0, o = a - i, s = this.#t.view.getArray().length, c = this.#t.getRowHeight() * s, l = c > o;
+		if (this.#t.classList.toggle("vscroll-visible", l), !l) return;
+		let u = t.clientHeight;
+		if (u <= 0) return;
+		let d = Math.max(Math.min(a / c * u, u), 20);
+		n.style.height = `${d}px`;
+		let f = e.scrollTop, p = Math.max(r - this.#t.rowManager.getRowHeight(), 1), m = 0;
+		p > 0 && (m = f / p * (u - d));
+		let h = u - d;
+		m < 0 && (m = 0), m > h && (m = h), n.style.top = `${m}px`, this.#r.top.disabled = f <= 0, this.#r.bottom.disabled = f >= p - 1;
+	};
+	#s = () => {
+		n.log("nine-table-vscrollbar.#init"), this.#r.container, this.#r.thumb.addEventListener("mousedown", (e) => {
+			if (e.button !== 0) return;
+			e.stopPropagation(), e.preventDefault(), this.#n = !0, this.#i = e.clientY, this.#a = parseFloat(this.#r.thumb.style.top) || 0;
+			let t = this.#r.track.getBoundingClientRect().height - this.#r.thumb.clientHeight, n = (e) => {
+				if (!this.#n || t <= 0) return;
+				let n = e.clientY - this.#i, r = this.#a + n;
+				r < 0 && (r = 0), r > t && (r = t), this.#r.thumb.style.top = `${r}px`;
+				let i = r / t, a = this.#t.getRowHeight(), o = (this.#t.querySelector(".ng-sheet-body").offsetHeight || 0) - (this.#t.elements.body.thead?.offsetHeight || 0) - (this.#t.elements.body.tfoot?.offsetHeight || 0) - (this.#t.elements.body.tbody.head.offsetHeight || 0), s = Math.floor(o / a), { totalCount: c } = this.#o(), l = Math.floor(i * (c - s + 1));
+				this.#t.rowManager.scrollToDataRow(l);
+				let { rawContentHeight: u, contentHeight: d } = this.#o(), f = this.#r.container.scrollTop, p = Math.max(d - this.#t.rowManager.getRowHeight(), 0);
+				this.#r.top.disabled = f <= 0, this.#r.bottom.disabled = f >= p - 1;
+			}, r = () => {
+				this.#n = !1, document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", r);
+			};
+			document.addEventListener("mousemove", n), document.addEventListener("mouseup", r);
+		}), this.#r.track.addEventListener("mousedown", (e) => {
+			if (e.button !== 0 || e.target === this.#r.thumb) return;
+			let t = this.#r.track.getBoundingClientRect(), r = this.#r.thumb.clientHeight, i = this.#r.track.clientHeight - r;
+			if (i > 0) {
+				let a = e.clientY - t.top - r / 2, o = Math.max(0, Math.min(1, a / i)), { totalCount: s } = this.#o(), c = Math.max(0, Math.min(Math.floor(o * (s - 1)), s - 1));
+				n.log("🎯 [VScroll Track Click]", {
+					ratio: o,
+					clickY: a,
+					totalCount: s,
+					targetRow: c
+				}), c >= 0 && this.#t.rowManager && typeof this.#t.rowManager.scrollToDataRow == "function" && this.#t.rowManager.scrollToDataRow(c, "top");
+			}
+			this.refresh();
+		});
+		let e = null, t = (t) => {
+			if (e) return;
+			let r = () => {
+				let e = this.#t.querySelector("tbody.body tr");
+				if (!e || e.dataset.row === void 0 || (n.log(this.#t.isLastRow()), t === "down" && this.#t.isLastRow())) return;
+				let r = parseInt(e.dataset.row, 10), i = t === "down" ? r + 1 : Math.max(0, r - 1);
+				this.#t.rowManager.scrollToDataRow(i, null, () => {
+					this.refresh();
+				});
+			};
+			r(), e = setInterval(r, 200);
+		}, r = () => {
+			e &&= (clearInterval(e), null);
+		};
+		this.#r.top.addEventListener("mousedown", (e) => {
+			e.button === 0 && t("up");
+		}), this.#r.bottom.addEventListener("mousedown", (e) => {
+			e.button === 0 && t("down");
+		}), document.addEventListener("mouseup", r), this.#r.top.addEventListener("mouseleave", r), this.#r.bottom.addEventListener("mouseleave", r);
+	};
+};
+customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", p);
+// src/data/Grouping.js
+var m = {
+	ID: 0,
+	DEPTH: 1,
+	NAME: 2,
+	CHILDREN: 3
+}, h = class {
+	#e;
+	#t;
+	#n = [];
+	#r = /* @__PURE__ */ new Map();
+	#i = !1;
+	constructor(e) {
+		this.#e = e, this.#t = this.#e.getRootNode().host;
+	}
+	get columns() {
+		return this.#n;
+	}
+	get groupMap() {
+		return this.#r;
+	}
+	initialize = () => {
+		let e = [], t = this.#e.sourceTable;
+		t && t.querySelectorAll("tbody tr[grouping=\"true\"]").forEach((t) => {
+			let n = t.querySelector("[cell-type=\"tree\"]");
+			n && n.dataset.bind && e.push(n.dataset.bind);
+		}), this.#n = e;
+	};
+	apply() {
+		if (n.log("==================", "Grouping.Apply"), this.#i) return;
+		this.#i = !0;
+		let e = [], t = this.#e.sourceTable;
+		t && t.querySelectorAll("tbody tr[grouping=\"true\"]").forEach((t) => {
+			let n = t.querySelector("[cell-type=\"tree\"]");
+			n && n.dataset.bind && e.push(n.dataset.bind);
+		}), this.#n = e, this.#i = !1, this.#e.scrollToY(0), this.#e.view.refresh();
+	}
+	clear() {
+		this.#n = [], this.#r.clear(), this.#i = !1, this.#e.scrollToY(0), this.#e.view.refresh();
+	}
+	setGroupMap(e) {
+		this.#r = e;
+	}
+	getChildrenRowIds(e) {
+		return this.#r.get(e) || [];
+	}
+	getChildrenRecords(e) {
+		let t = this.getChildrenRowIds(e), n = this.#t.data;
+		return t.map((e) => n.getArray(e)).filter(Boolean);
+	}
+}, g = class e {
+	static apply(t, n = [], r = []) {
+		if (!n || n.length === 0) return {
+			headers: [],
+			renderItems: [],
+			groupMap: /* @__PURE__ */ new Map()
+		};
+		let i = t.filter((e) => !e.__ng?.deleted), a = /* @__PURE__ */ new Map(), o = e.#t(i, n, r), s = [], c = [];
+		return e.#e(o, 0, n, s, c, a, ""), {
+			headers: s,
+			renderItems: c,
+			groupMap: a
+		};
+	}
+	static #e(t, n, r, i, a, o, s) {
+		let c = 0, l = n === r.length - 1;
+		for (let [u, d] of t.entries()) {
+			let t = s ? `${s}_${c++}` : `g_${c++}`, f = e.#n(d);
+			o.set(t, f);
+			let p = [];
+			p[m.ID] = t, p[m.DEPTH] = n, p[m.NAME] = u, p[m.CHILDREN] = f, p.__isGroupHeader = !0, p.__groupId = t, i.push(p), a.push({
+				type: "group",
+				record: p,
+				groupId: t
+			}), !l && d instanceof Map ? e.#e(d, n + 1, r, i, a, o, t) : e.#r(d).forEach((e) => {
+				e.__isGroupHeader = !1, e.__groupId = t, i.push(e), a.push({
+					type: "data",
+					record: e,
+					groupId: t
+				});
+			});
+		}
+	}
+	static #t(t, n, r) {
+		let i = r.indexOf(n[0]), a = n.slice(1), o = /* @__PURE__ */ new Map();
+		if (t.forEach((e) => {
+			let t = i >= 0 ? e.v[i] : "(Unknown)";
+			o.has(t) || o.set(t, []), o.get(t).push(e);
+		}), a.length > 0) {
+			let t = /* @__PURE__ */ new Map();
+			for (let [n, i] of o.entries()) t.set(n, e.#t(i, a, r));
+			return t;
+		}
+		return o;
+	}
+	static #n(t) {
+		let n = [];
+		if (t instanceof Map) for (let r of t.values()) n = n.concat(e.#n(r));
+		else Array.isArray(t) && (n = n.concat(t.map((e) => e.__ng?.rowid ?? e.m?._?.[0])));
+		return n;
+	}
+	static #r(t) {
+		let n = [];
+		if (t instanceof Map) for (let r of t.values()) n = n.concat(e.#r(r));
+		else Array.isArray(t) && (n = n.concat(t));
+		return n;
+	}
+}, _ = class {
+	#e = 3;
+	#t;
+	#n;
+	#r;
+	#i = /* @__PURE__ */ new Map();
+	#a = [];
+	#o = null;
+	#s = null;
+	#c = 0;
+	#l;
+	#u = !1;
+	#d = !1;
+	constructor(e) {
+		this.#t = e.getRootNode().host, this.#n = e, this.#x();
+	}
+	getRowHeight() {
+		return this.#a.reduce((e, t) => e + t, 0);
+	}
+	refresh = (e = !1) => {
+		if (!this.#n.classList.contains("active")) return;
+		let t = this.#n.querySelector(".ng-sheet-body");
+		t && ((!this.#o || this.#o <= 0) && (this.#g(), this.#o && this.#o > 0 && this.#v()), this.#f(t.scrollTop, e), this.#n.querySelector("nine-table-vscrollbar")?.refresh());
+	};
+	#f = (e, t = !1) => {
+		if (this.#d) {
+			this.#p(e, t);
+			return;
+		}
+		let n = this.#o;
+		if (!n || n <= 0) return;
+		let i = this.#n.view.getArray(), a = i.length;
+		if (a === 0) {
+			this.#n.elements.scrollHolder.style.height = "0px";
+			return;
+		}
+		let o = this.#n.templateLength, s = (this.#n.elements.body.thead?.offsetHeight || 0) + (this.#n.elements.body.tfoot?.offsetHeight || 0) + this.#n.elements.body.tbody.head.offsetHeight, c = this.#n.querySelector(".ng-sheet-body").offsetHeight || 0, l = Math.max(a * n - (c - s - n), 0), u = 15e6, d = l > u, f = 1, p = l;
+		d && (f = u / l, p = u), this.#n.elements.scrollHolder.style.height = `${p}px`;
+		let m = d ? e / f : e, h = Math.max(0, a - 1), g = Math.min(m, l), _ = Math.max(0, Math.min(Math.floor(g / n), h)), v = g % n;
+		this.#n.elements.left.tbody.body.style.top = this.#n.elements.body.tbody.body.style.top = this.#n.elements.right.tbody.body.style.top = `-${v}px`;
+		let y = this.#r.firstTr, b = y && y.dataset.row !== void 0 ? parseInt(y.dataset.row, 10) : -1;
+		(t || b !== _) && ([
+			this.#n.elements.left.tbody.body,
+			this.#n.elements.body.tbody.body,
+			this.#n.elements.right.tbody.body
+		].forEach((e, t) => {
+			e && e.querySelectorAll("tbody.body tr").forEach((e, t) => {
+				let n = _ + Math.floor(t / o);
+				if (n >= a) {
+					e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null;
+					return;
+				}
+				let s = i[n];
+				if (!s) {
+					e.style.display = "none";
+					return;
+				}
+				let c = s.m._[r.META.INDEX.ROWID];
+				e.style.display = "", this.#h(e, s, c, n);
+			});
+		}), this.#n.selection.refresh());
+	};
+	#p = (e, t = !1) => {
+		n.log("handleGroupdScroll() start");
+		let r = this.#n.view.getArray() || [], i = r.length;
+		if (i === 0) {
+			this.#n.elements.scrollHolder.style.height = "0px";
+			return;
+		}
+		let a = this.#n.querySelector(".ng-sheet-body .ng-sheet-body-content"), o = this.#n.templateLength || 1, s = (e) => {
+			if (e.type === "group") {
+				let t = e.record[m.DEPTH] || 0;
+				return this.#a[t] || this.#o / o;
+			}
+			{
+				let e = 0, t = this.#n.templateLength || 1, n = 0;
+				for (let e = 0; e < t - 1; e++) n += this.#a[e] || 0;
+				return e = this.#o - n, e > 0 ? e : this.#o;
+			}
+		}, c = 0, l = Array(i);
+		for (let e = 0; e < i; e++) {
+			let t = s(r[e]);
+			l[e] = t, c += t;
+		}
+		this.#n.elements.scrollHolder.style.height = `${c}px`, n.log("*************", c);
+		let u = this.#n.clientHeight, d = 0, f = 0;
+		for (let t = 0; t < i; t++) {
+			let n = l[t];
+			if (d + n > e) {
+				f = t;
+				break;
+			}
+			d += n, f = t;
+		}
+		let p = e - d;
+		a && a.querySelectorAll("tbody").forEach((e) => {
+			e.style.top = `-${Math.max(0, p)}px`;
+		});
+		let h = this.#r.firstTr, g = h && h.dataset.virtualIndex !== void 0 ? parseInt(h.dataset.virtualIndex, 10) : -1;
+		if (!t && g === f) return;
+		let _ = Math.ceil(u / (this.#o / o)), v = (this.#n.grouping.columns?.length || 1) * 15, y = f, b = Math.min(i, f + _ + v), x = r.slice(y, b);
+		[
+			".ng-container-body",
+			".ng-container-left",
+			".ng-container-right"
+		].forEach((e) => {
+			let t = this.#n.querySelector(`.ng-sheet-body ${e}`);
+			if (!t) return;
+			let n = Array.from(t.querySelectorAll("tbody.body tr"));
+			for (let e = 0; e < n.length; e += o) {
+				let t = Math.floor(e / o), i = x[t], a = n.slice(e, e + o);
+				if (!i || t >= x.length) {
+					a.forEach((e) => {
+						e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null;
+					});
+					continue;
+				}
+				let s = f + t;
+				a.forEach((e, n) => {
+					let a = f + t;
+					e.dataset.virtualIndex = a, e.dataset.row = i.type === "data" ? s : "";
+					let o = e.getAttribute("grouping") === "true";
+					if (i.type === "group") o && n === i.record[m.DEPTH] ? (e.style.display = "", this.#m(e, r, i.record, a)) : (e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null);
+					else if (o) e.style.display = "none", e.dataset.matrixRow = null, e.dataset.row = null, e.dataset.index = null;
+					else {
+						e.style.display = "";
+						let t = i.record.m?.rowid ?? 0;
+						this.#h(e, i.record, t, a);
+					}
+				});
+			}
+		}), this.#n.selection.refresh(), n.log("handleGroupdScroll() end");
+	};
+	#m = (e, t, n, r) => {
+		let i = this.#n.templateLength || 1, a = parseInt(e.dataset.subrow, 10) || 0, o = r * i + a, s = n[m.CHILDREN], c = this.#t.data.getArray(), l = s ? s.map((e) => c[e]).filter(Boolean) : [];
+		e.dataset.virtualIndex = r, e.dataset.row = "", e.dataset.matrixRow = o, e.data = l, e.dataset.groupId = n[m.ID], Array.from(e.cells).forEach((e) => {
+			e.dataset.row = r;
+			let t = Array.from(e.children).find((e) => e.tagName.toLowerCase().startsWith("cell-") || typeof e.refresh == "function");
+			t !== void 0 && typeof t.refresh == "function" && t?.refresh();
+		});
+	};
+	#h = (e, t, n, r) => {
+		let i = this.#n.templateLength || 1, a = parseInt(e.dataset.subrow, 10) || 0, o = r * i + a;
+		e.dataset.index = r, e.dataset.row = n, e.dataset.matrixRow = o, e.data = t, Array.from(e.cells).forEach((e) => {
+			e.dataset.index = r, e.dataset.row = n, Array.from(e.children).find((e) => e.tagName.toLowerCase().startsWith("cell-") && typeof e.refresh == "function")?.refresh();
+		});
+	};
+	initialize = () => {
+		this.#d = !!this.#n.sourceTable.querySelector("tbody tr[grouping='true']"), this.#o = null, this.#i.clear(), this.#r = {
+			scrollTables: this.#n.querySelectorAll(".ng-sheet-body table"),
+			firstTr: this.#n.querySelector(".ng-sheet-body .ng-container-body tbody.body tr")
+		}, [
+			".ng-container-body",
+			".ng-container-left",
+			".ng-container-right"
+		].forEach((e) => {
+			let t = this.#n.querySelector(`.ng-sheet-body ${e}`);
+			if (!t) return;
+			let n = t.querySelector("table");
+			if (!n) return;
+			let r = n.querySelector("tbody.body");
+			if (!r) return;
+			let i = Array.from(r.querySelectorAll("tr")).map((e) => e.cloneNode(!0));
+			this.#i.set(e, i);
+		});
+		let e = this.#n.querySelector(".ng-sheet-body");
+		e && (this.#c = e.clientHeight, this.#g(), this.#v(), this.#f(e.scrollTop, !0), e.addEventListener("scroll", (t) => {
+			if (this.#u) return;
+			let r = this.#o || 0, i = (this.#n.view.getArray()?.length || 0) * r;
+			i <= e.clientHeight ? n.log(i, e.clientHeight) : (this.#f(e.scrollTop), this.#n.querySelector("nine-table-vscrollbar").refresh());
+		}, { passive: !0 }));
+	};
+	scrollToDataRow(e, t = "top", r) {
+		let i = this.#n.querySelector(".ng-sheet-body"), a = this.#n.view.getArray()?.length || 0, o = Math.max(0, Math.min(e, a - 1)), s = 0;
+		if (this.#d) {
+			let e = Math.max(i.scrollHeight - i.clientHeight, 1);
+			s = o / Math.max(a - 1, 1) * e;
+		} else {
+			let e = this.#o, t = o * e, n = (this.#n.elements.body.thead?.offsetHeight || 0) + (this.#n.elements.body.tfoot?.offsetHeight || 0) + this.#n.elements.body.tbody.head.offsetHeight, r = i.offsetHeight || 0, c = Math.max(a * e + n - r, 0), l = 15e6, u = c > l, d = 1;
+			u && (d = l / c), s = t * d;
+		}
+		n.log(s), this.#u = !0, i.scrollTop = s, this.#f(s), requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				this.#u = !1, typeof r == "function" && r();
+			});
+		});
+	}
+	destroy = () => {
+		this.#s &&= (this.#s.disconnect(), null);
+	};
+	#g = () => {
+		if (!this.#n.classList.contains("active") || !this.#n.sourceTable) return;
+		let e = this.#n.sourceTable?.querySelectorAll("tbody.body tr"), t = this.#n.querySelector(".ng-sheet-body .ng-container-body tbody.body");
+		t.querySelectorAll("tr").forEach((e) => e.remove());
+		let r = document.createDocumentFragment();
+		e.forEach((e) => r.appendChild(e.cloneNode(!0))), t.appendChild(r);
+		let i = t.querySelectorAll("tr");
+		this.#a = [], i.forEach((e) => {
+			if (e?.offsetHeight === 2) {
+				n.log("================================"), n.log(this.#n), n.log(e), n.log(e.cloneNode(!0));
+				let t = window.getComputedStyle(e);
+				n.log("================================", t, t.height, t.minHeight);
+			}
+			this.#a.push(Math.max(e.offsetHeight, 24));
+		}), i.forEach((e) => e.remove()), this.#o = this.#a.reduce((e, t) => e + t, 0), this.#_();
+	};
+	#_ = () => {
+		if (n.log("[DEBUG #updateRowCount] sheetHeight:", this.#c, "cachedTemplateHeight:", this.#o), this.#c > 0 && this.#o > 0) {
+			let e = Math.ceil(this.#c / this.#o), t = this.#e;
+			if (this.#d && this.#n.grouping) {
+				let e = this.#n.grouping.columns?.length || 1;
+				t += e * 15;
+			}
+			this.#l = e + t, n.log("[DEBUG #updateRowCount] calculated cachedRowCount:", this.#t, this.#l);
+		}
+	};
+	#v = () => {
+		n.log("rowManager.#renderAllContainers"), [
+			".ng-container-body",
+			".ng-container-left",
+			".ng-container-right"
+		].forEach((e) => {
+			let t = this.#n.querySelector(`.ng-sheet-body ${e}`);
+			t && t.querySelector("tbody") && this.#y(t);
+		}), this.#b();
+	};
+	#y = (e) => {
+		let t = null;
+		e.classList.contains("ng-container-left") ? t = "left" : e.classList.contains("ng-container-right") && (t = "right");
+		let n = Array.from(this.#n.sourceTable.querySelectorAll("tbody.body tr")).map((e) => {
+			let n = e.cloneNode(!0);
+			return t === "left" ? n.querySelectorAll("th,td").forEach((e) => {
+				e.getAttribute("fixed") !== "left" && e.remove();
+			}) : t === "right" ? n.querySelectorAll("th,td").forEach((e) => {
+				e.getAttribute("fixed") !== "right" && e.remove();
+			}) : n.querySelectorAll("[fixed=left], [fixed=right]").forEach((e) => {
+				e.remove();
+			}), n;
+		});
+		if (n.length === 0) return;
+		let r = e.querySelector("tbody.body");
+		if (!r) return;
+		r.querySelectorAll("tr").forEach((e) => e.remove());
+		let i = document.createDocumentFragment();
+		for (let e = 0; e < this.#l; e++) n.forEach((e) => i.appendChild(e.cloneNode(!0)));
+		r.appendChild(i), e.classList.contains("ng-container-body") && (this.#r.firstTr = r.querySelector("tr"));
+	};
+	#b = () => {
+		let e = this.#n.querySelector(".ng-sheet-body .ng-container-left table"), t = this.#n.querySelector(".ng-sheet-body .ng-container-body table"), n = this.#n.querySelector(".ng-sheet-body .ng-container-right table");
+		if (t) {
+			let r = e ? Array.from(e.querySelectorAll("tbody tr")) : [], i = Array.from(t.querySelectorAll("tbody tr")), a = n ? Array.from(n.querySelectorAll("tbody tr")) : [], o = Math.max(r.length, i.length, a.length);
+			for (let e = 0; e < o; e++) {
+				let t = [
+					r[e]?.getBoundingClientRect().height || 0,
+					i[e]?.getBoundingClientRect().height || 0,
+					a[e]?.getBoundingClientRect().height || 0
+				], n = Math.max(...t);
+				n > 0 && (r[e] && (r[e].style.height = `${n}px`), i[e] && (i[e].style.height = `${n}px`), a[e] && (a[e].style.height = `${n}px`));
+			}
+		}
+	};
+	#x = () => {
+		this.#n && this.#n instanceof HTMLElement && (this.#s = new ResizeObserver((e) => {
+			for (let t of e) {
+				if (!t.target.classList.contains("active")) continue;
+				let e = t.contentRect.height;
+				t.contentRect.width > 0 && this.#n.isAutoFitCol && this.#n.autoFit(!0), e > 0 && this.#c !== e && (this.#c = e, this.#_(), this.#o !== null && (this.#v(), this.refresh()));
+			}
+		}), this.#s.observe(this.#n));
+	};
+}, v = class e {
+	static compile(t) {
+		let n = t.cloneNode(!0);
+		return e.resetColIndex(n, n.querySelectorAll("thead tr")), e.resetColIndex(n, n.querySelectorAll("tbody.body tr[grouping=\"true\"]")), e.resetColIndex(n, n.querySelectorAll("tbody.body tr:not([grouping=\"true\"])")), e.resetColIndex(n, n.querySelectorAll("tfoot tr")), e.#e(n), n;
+	}
+	static recompile(t) {
+		return e.resetColIndex(t, t.querySelectorAll("thead tr")), e.resetColIndex(t, t.querySelectorAll("tbody.body tr[grouping=\"true\"]")), e.resetColIndex(t, t.querySelectorAll("tbody.body tr:not([grouping=\"true\"])")), e.resetColIndex(t, t.querySelectorAll("tfoot tr")), e.#e(t), t;
+	}
+	static #e(e) {
+		e.querySelectorAll("colgroup col").forEach((t, n) => {
+			t.setAttribute("data-col", n);
+			let r = t.getAttribute("fixed");
+			e.querySelectorAll(`[data-col="${n}"]`).forEach((e) => {
+				r ? e.setAttribute("fixed", r) : e.removeAttribute("fixed");
+			});
+		});
+	}
+	static resetColIndex(e, t) {
+		let n = e.querySelectorAll("colgroup col"), r = Array.from({ length: t.length }, () => Array(n.length).fill(null));
+		t.forEach((e, i) => {
+			e.dataset.subrow = i;
+			let a = 0;
+			e.querySelectorAll("th, td").forEach((e) => {
+				for (; a < n.length && r[i][a] !== null;) a++;
+				e.dataset.col = a;
+				let o = e.rowSpan || 1, s = e.colSpan || 1;
+				for (let c = 0; c < o; c++) for (let o = 0; o < s; o++) i + c < t.length && a + o < n.length && (r[i + c][a + o] = e);
+				a += s;
+			});
+		});
+	}
+}, y = class {
+	#e;
+	#t = {
+		startRow: -1,
+		startCol: -1,
+		endRow: -1,
+		endCol: -1
+	};
+	constructor(e) {
+		this.#e = e, this.#r(), n.log("🎯 [CellSelection] Initialized (New Structure Compatible)");
+	}
+	#n(e) {
+		if (!e) return {
+			dataRow: -1,
+			subRowIndex: -1,
+			matrixRow: -1
+		};
+		let t = parseInt(e.dataset.index, 10);
+		if (isNaN(t)) return {
+			dataRow: -1,
+			subRowIndex: -1,
+			matrixRow: -1
+		};
+		let n = e.closest("tbody"), r = Array.from(n.querySelectorAll("tr")).filter((e) => parseInt(e.dataset.index, 10) === t), i = r.indexOf(e), a = r.length > 0 ? r.length : 1;
+		return {
+			dataRow: t,
+			subRowIndex: i,
+			matrixRow: t * a + (i >= 0 ? i : e.sectionRowIndex % a)
+		};
+	}
+	setFocus(e, t) {
+		this.#e.querySelectorAll("tr.selected-start").forEach((e) => {
+			e.classList.remove("selected-start"), e.querySelectorAll("td.selected-start").forEach((e) => {
+				e.classList.remove("selected-start");
+			});
+		});
+		let n = this.#e.querySelector(`.ng-sheet-body-content tr[data-matrix-row="${e}"] td[data-col="${t}"]`);
+		n && (n.classList.add("selected-start"), n.closest("tr")?.classList.add("selected-start"));
+	}
+	setRange(e, t, n, r) {
+		let i = Math.min(e, n), a = Math.max(e, n), o = Math.min(t, r), s = Math.max(t, r), c = this.#e.querySelectorAll(".ng-container-left, .ng-container-body, .ng-container-right"), l = !0, u = 0;
+		for (; l && u < 5;) l = !1, u++, c.forEach((e) => {
+			Array.from(e.querySelectorAll("tbody tr")).filter((e) => e.style.display !== "none").forEach((e) => {
+				let { matrixRow: t } = this.#n(e);
+				t < 0 || e.querySelectorAll("td, th").forEach((e) => {
+					let n = parseInt(e.dataset.col, 10);
+					if (isNaN(n)) return;
+					let r = parseInt(e.rowSpan || 1, 10), c = parseInt(e.colSpan || 1, 10), u = t + r - 1, d = n + c - 1;
+					if (u >= i && t <= a && d >= o && n <= s) {
+						let e = Math.min(i, t), r = Math.max(a, u), c = Math.min(o, n), f = Math.max(s, d);
+						(e !== i || r !== a || c !== o || f !== s) && (i = e, a = r, o = c, s = f, l = !0);
+					}
+				});
+			});
+		});
+		this.#t = {
+			startRow: i,
+			startCol: o,
+			endRow: a,
+			endCol: s
+		}, this.render();
+	}
+	refresh = () => {
+		this.render();
+	};
+	render = () => {
+		let { startRow: e, startCol: t, endRow: n, endCol: r } = this.#t, i = this.#e.querySelectorAll(".ng-container-left, .ng-container-body, .ng-container-right");
+		i.forEach((e) => {
+			e.querySelectorAll(".selected, .selected-top, .selected-bottom, .selected-left, .selected-right, .selected-start").forEach((e) => {
+				e.classList.remove("selected", "selected-top", "selected-bottom", "selected-left", "selected-right", "selected-start");
+			}), e.querySelectorAll("tr.selected-start").forEach((e) => {
+				e.classList.remove("selected-start");
+			});
+		}), e < 0 || t < 0 || i.forEach((i) => {
+			Array.from(i.querySelectorAll("tbody tr")).filter((e) => e.style.display !== "none").forEach((i) => {
+				let { matrixRow: a } = this.#n(i);
+				a < 0 || i.querySelectorAll("td, th").forEach((i) => {
+					let o = parseInt(i.dataset.col, 10);
+					if (isNaN(o)) return;
+					let s = parseInt(i.rowSpan || 1, 10), c = parseInt(i.colSpan || 1, 10), l = a + s - 1, u = o + c - 1;
+					l >= e && a <= n && u >= t && o <= r && (i.classList.add("selected"), a <= e && i.classList.add("selected-top"), l >= n && i.classList.add("selected-bottom"), o <= t && i.classList.add("selected-left"), u >= r && i.classList.add("selected-right"));
+				});
+			});
+		});
+	};
+	#r() {
+		let e = this.#e.querySelector(".ng-sheet-body");
+		e ? e.addEventListener("mousedown", (e) => {
+			if (e.button !== 0) return;
+			let t = e.target.closest("td, th");
+			if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
+			this.#e.style.userSelect = "none", this.#e.style.webkitUserSelect = "none";
+			let n = t.closest("tr"), { matrixRow: r } = this.#n(n), i = parseInt(t.dataset.col, 10);
+			if (r < 0) {
+				this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "";
+				return;
+			}
+			this.setFocus(r, i), this.setRange(r, i, r, i);
+			let a = r, o = i, s = (e) => {
+				let t = document.elementFromPoint(e.clientX, e.clientY)?.closest("td, th");
+				if (!t || !this.#e.contains(t)) {
+					let n = this.#e.querySelectorAll(".ng-sheet-body-content tbody tr td, .ng-sheet-body-content tbody tr:not(.nodata) th");
+					for (let r of n) {
+						let n = r.getBoundingClientRect();
+						if (e.clientX >= n.left && e.clientX <= n.right && e.clientY >= n.top && e.clientY <= n.bottom) {
+							t = r;
+							break;
+						}
+					}
+				}
+				if (!t || t.dataset.row === void 0 || t.dataset.col === void 0) return;
+				let n = t.closest("tr"), { matrixRow: s } = this.#n(n), c = parseInt(t.dataset.col, 10);
+				s < 0 || (a !== s || o !== c) && (a = s, o = c, this.setRange(r, i, s, c));
+			}, c = () => {
+				this.#e.style.userSelect = "", this.#e.style.webkitUserSelect = "", document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", c);
+			};
+			document.addEventListener("mousemove", s), document.addEventListener("mouseup", c);
+		}) : n.log("❌ [CellSelection] .ng-sheet-body not found!");
+	}
+}, b = class {
+	#e;
+	#t;
+	#n = null;
+	#r = null;
+	constructor(e) {
+		this.#e = e, this.#t = e.getRootNode().host, this.#g(), n.log("🎯 [CellNavigation] Initialized (Diagnostic Logging Restored)");
+	}
+	get currentCell() {
+		return this.#n;
+	}
+	set currentCell(e) {
+		if (!e) return;
+		this.#n = e, e.focus({ preventScroll: !0 }), this.#r = e.closest("tr");
+		let t = parseInt(this.#r.dataset.matrixRow, 10);
+		this.#e.selection.setFocus(t, this.#n.dataset.col);
+	}
+	#i = (e, t) => {
+		if (t) {
+			switch (e.code) {
+				case "Tab":
+					e.shiftKey ? this.#p(t) || t.scrollIntoView({
+						inline: "nearest",
+						block: "nearest"
+					}) : this.#m(t) || t.scrollIntoView({
+						inline: "nearest",
+						block: "nearest"
+					});
+					break;
+				case "ArrowRight":
+					this.#m(t) || t.scrollIntoView({
+						inline: "nearest",
+						block: "nearest"
+					});
+					break;
+				case "ArrowLeft": this.#p(t) || t.scrollIntoView({
+					inline: "nearest",
+					block: "nearest"
+				});
+			}
+			this.currentCell = t, this.#e.selection.setRange(this.#r.dataset.matrixRow, t.dataset.col, this.#r.dataset.matrixRow, t.dataset.col);
+		}
+	};
+	#a = (e, t) => {
+		if (t) {
+			let n = !1;
+			switch (e.code) {
+				case "Enter":
+					e.shiftKey, this.#f(t) && (n = !0);
+					break;
+				case "ArrowDown":
+					this.#f(t) && (n = !0);
+					break;
+				case "ArrowUp": this.#d(t) && (n = !0);
+			}
+			if (n) {
+				this.currentCell = t, this.#e.selection.setRange(this.#r.dataset.matrixRow, t.dataset.col, this.#r.dataset.matrixRow, t.dataset.col);
+				return;
+			}
+		}
+		let n = parseInt(this.#r.dataset.index, 10), r = -1;
+		switch (e.code) {
+			case "Enter":
+				if (e.shiftKey) {
+					let e = this.#h();
+					r = Math.max(n - e + 0, 0);
+				} else r = Math.min(n, this.#e.view.count());
+				break;
+			case "ArrowDown":
+				r = Math.min(n, this.#e.view.count());
+				break;
+			case "ArrowUp":
+				let t = this.#h();
+				r = Math.max(n - t + 0, 0);
+		}
+		if (r < 0) return;
+		let i = parseInt(this.#r.dataset.matrixRow, 10), a = parseInt(this.#n.dataset.col, 10), o = parseInt(this.#n.rowSpan, 10) || 1;
+		switch (e.code) {
+			case "ArrowDown":
+				i += o;
+				break;
+			case "ArrowUp": i--;
+		}
+		this.#e.rowManager.scrollToDataRow(r, null, () => {
+			let e = this.#c(i, a);
+			e && (this.currentCell = e, this.#e.selection.setRange(this.#r.dataset.matrixRow, e.dataset.col, this.#r.dataset.matrixRow, e.dataset.col));
+		});
+	};
+	moveCell = (e) => {
+		if (e.target.tagName === "INPUT" && (["text"].includes(e.target.type) && [
+			"ArrowLeft",
+			"ArrowRight",
+			"Home",
+			"End"
+		].includes(e.code) || [
+			"date",
+			"datetime-local",
+			"time",
+			"week",
+			"month"
+		].includes(e.target.type))) return;
+		if (!this.#n || !this.#r) {
+			n.log("⚠️ [moveCell] currentCell or currentTr is missing!");
+			return;
+		}
+		let t;
+		switch (e.code) {
+			case "Tab":
+				t = e.shiftKey ? this.#s() : this.#o();
+				break;
+			case "ArrowRight":
+				t = this.#o();
+				break;
+			case "ArrowLeft":
+				t = this.#s();
+				break;
+			case "Enter":
+				t = e.shiftKey ? this.#l() : this.#u();
+				break;
+			case "ArrowDown":
+				t = this.#u();
+				break;
+			case "ArrowUp": t = this.#l();
+		}
+		e.preventDefault(), [
+			"ArrowLeft",
+			"ArrowRight",
+			"Tab"
+		].includes(e.code) ? this.#i(e, t) : [
+			"Enter",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.code) && this.#a(e, t);
+	};
+	#o = () => {
+		let e = parseInt(this.#n.dataset.col, 10), t = parseInt(this.#n.colSpan, 10) || 1, n = parseInt(this.#r.dataset.index, 10), r = parseInt(this.#r.dataset.matrixRow, 10), i = e + t, a = this.#e.querySelector(`tbody tr[data-matrix-row="${r}"] td[data-col="${i}"]`);
+		return a ||= this.#e.querySelector(`tbody tr[data-index="${n}"] td[data-col="${i}"]`), a;
+	};
+	#s = () => {
+		let e = parseInt(this.#n.dataset.col, 10), t = parseInt(this.#r.dataset.index, 10), n = parseInt(this.#r.dataset.matrixRow, 10), r;
+		for (let i = e - 1; i >= 0 && (r = this.#e.querySelector(`tbody tr[data-matrix-row="${n}"] td[data-col="${i}"]`), r ||= this.#e.querySelector(`tbody tr[data-index="${t}"] td[data-col="${i}"]`), !r); i--);
+		return r;
+	};
+	#c = (e, t) => {
+		let n = this.#e.querySelector(`tbody tr[data-matrix-row="${e}"]`);
+		if (!n) return;
+		let r = parseInt(n.dataset.index, 10), i = this.#e.querySelector(`tbody tr[data-matrix-row="${e}"] td[data-col="${t}"]`);
+		return i || (this.#e.querySelectorAll(`tbody tr[data-matrix-row="${e}"] td`).forEach((e) => {
+			let n = parseInt(e.dataset.col, 10), r = parseInt(e.colSpan, 10) || 1;
+			t >= n && t < n + r && (i = e);
+		}), i || (i = this.#e.querySelector(`tbody tr[data-index="${r}"] td[data-col="${t}"]`), i || this.#e.querySelectorAll(`tbody tr[data-index="${r}"] td`).forEach((e) => {
+			let n = parseInt(e.dataset.col, 10), r = parseInt(e.colSpan, 10) || 1;
+			t >= n && t < n + r && (i = e);
+		}))), i;
+	};
+	#l = () => {
+		let e = parseInt(this.#n.dataset.col, 10), t = parseInt(this.#r.dataset.matrixRow, 10);
+		return this.#c(t - 1, e);
+	};
+	#u = () => {
+		let e = parseInt(this.#n.dataset.col, 10), t = parseInt(this.#r.dataset.matrixRow, 10), n = parseInt(this.#n.rowSpan, 10) || 1;
+		return this.#c(t + n, e);
+	};
+	#d = (e) => {
+		let t = this.#e.querySelector(".ng-sheet-body");
+		if (!t || !e) return !0;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = t.querySelector("thead")?.offsetHeight || 0;
+		return n.top >= r.top + i;
+	};
+	#f = (e) => {
+		let t = this.#e.querySelector(".ng-sheet-body");
+		if (!t || !e) return !0;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+		return n.bottom <= r.bottom;
+	};
+	#p = (e) => {
+		let t = this.#e.querySelector(".ng-container-body");
+		if (!t || !e) return !0;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+		return n.left >= r.left;
+	};
+	#m = (e) => {
+		let t = this.#e.querySelector(".ng-container-body");
+		if (!t || !e) return !0;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+		return n.right <= r.right;
+	};
+	#h = () => {
+		let e = this.#e.querySelector(".ng-sheet-body"), t = e.clientHeight - (e.querySelector("thead")?.offsetHeight || 0), n = this.#e.rowManager.getRowHeight();
+		return Math.max(1, Math.floor(t / n));
+	};
+	#g() {
+		this.#e.addEventListener("mousedown", (e) => {
+			if (e.button !== 0) return;
+			let t = e.target.closest("td, th");
+			t && t.dataset.index !== void 0 && t.dataset.col !== void 0 && (this.currentCell = t);
+		}), this.#e.addEventListener("keydown", (e) => {
+			[
+				"Enter",
+				"Tab",
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight"
+			].includes(e.code) && this.moveCell(e);
+		});
+	}
+}, x = 2, S = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i = null;
+	#a = null;
+	#o = null;
+	#s = null;
+	#c = 0;
+	#l = 0;
+	#u = 0;
+	#d = 0;
+	#f = 0;
+	constructor(e) {
+		this.#e = e, this.#t = e.getRootNode().host, this.#n = this.#e.querySelector("nine-table-col-resizer-panel"), this.#r = this.#n.querySelector(".resizer-overlay"), this.bindEvents();
+	}
+	destroy() {
+		this.#e.removeEventListener("pointermove", this.#h), this.#e.removeEventListener("pointerdown", this.#g), this.#e.removeEventListener("dblclick", this.#b);
+	}
+	refreshLayout(e = "body") {
+		let t = Array.from(this.#e.querySelectorAll(`.ng-container-${e}`));
+		if (t.length !== 0) {
+			if (e === "left" || e === "right" || !this.#e.isAutoFitCol && t[0].querySelector("table")?.getAttribute("auto-fit-col") !== "true") {
+				let r = t[0].querySelector("table colgroup");
+				if (!r) return;
+				let i = 0, a = {};
+				Array.from(r.querySelectorAll("col")).forEach((e) => {
+					let t = e.getAttribute("data-col"), n = parseInt(e.getAttribute("width"), 10);
+					isNaN(n) || (a[t] = n, i += n);
+				}), t.forEach((r) => {
+					let o = r.querySelectorAll("table");
+					n.log("====================", t, e), e === "body" ? o.forEach((e) => {
+						e.style.width = `${i}px`;
+					}) : (r.style.flex = `0 0 ${i}px`, r.style.width = `${i}px`, r.style.minWidth = `${i}px`, r.style.maxWidth = `${i}px`, o.forEach((e) => {
+						e.style.width = `${i}px`, e.style.minWidth = `${i}px`, e.style.maxWidth = `${i}px`, Object.entries(a).forEach(([t, n]) => {
+							e.querySelectorAll(`th[data-col="${t}"], td[data-col="${t}"]`).forEach((e) => {
+								e.style.width = `${n}px`, e.style.minWidth = `${n}px`, e.style.maxWidth = `${n}px`;
+							});
+						});
+					}));
+				});
+			} else t.forEach((e) => {
+				e.querySelectorAll("table").forEach((e) => {});
+			});
+			this.#e.querySelector("nine-table-hscrollbar")?.refresh();
+		}
+	}
+	setColumnWidth(e, t, r = null) {
+		n.log("setColumnWidth");
+		let i = [];
+		if (i = Array.from(this.#e.querySelectorAll(`table colgroup col[data-col="${e}"]`)), i.length === 0) return;
+		let a = i[0].closest(".ng-container-left, .ng-container-body, .ng-container-right"), o = r || (a?.classList.contains("ng-container-left") ? "left" : a?.classList.contains("ng-container-right") ? "right" : "body");
+		i.forEach((e) => {
+			e.setAttribute("width", t), e.style.width = `${t}px`, n.log(e, t);
+		});
+		let s = this.#e.sourceTable?.querySelector(`colgroup col[data-col="${e}"]`);
+		s && (s.setAttribute("width", t), s.style.width = `${t}px`), this.refreshLayout(o), (o === "left" || o === "right") && this.refreshLayout("body"), this.#e.rowManager?.refresh();
+	}
+	#p(e) {
+		if (this.#e.isAutoFitCol) return !0;
+		let t = e?.closest("table");
+		return !!(t && t.getAttribute("auto-fit-col") === "true");
+	}
+	bindEvents() {
+		this.#e.addEventListener("pointermove", this.#h), this.#e.addDebounseEventListener("dblclick", this.#b, "pointerdown", this.#g);
+	}
+	#m(e) {
+		let t = e.closest(".ng-container-left, .ng-container-body, .ng-container-right");
+		return t ? t.classList.contains("ng-container-left") ? "left" : t.classList.contains("ng-container-right") ? "right" : "body" : null;
+	}
+	#h = (e) => {
+		let t = e.target.closest("thead");
+		if (!t) return;
+		let n = e.target.closest("th, td");
+		if (t.querySelectorAll(".resizable-edge").forEach((e) => {
+			e !== n && e.classList.remove("resizable-edge");
+		}), !n || n.dataset.col === void 0 || n.getAttribute("collapsed") === "true") return;
+		let r = n.getBoundingClientRect(), i = e.clientX - r.left, a = i <= x, o = r.width - i <= x;
+		if (a) {
+			let e = n.previousElementSibling;
+			if (!e || e.getAttribute("collapsed") === "true") {
+				n.classList.remove("resizable-edge");
+				return;
+			}
+		}
+		a || o ? n.classList.add("resizable-edge") : n.classList.remove("resizable-edge");
+	};
+	#g = (e) => {
+		if (n.log("onPointerDown"), !e.actualTarget.closest("thead")) return;
+		let t = e.actualTarget.closest("th, td");
+		if (n.log(t, e.actualTarget), !t || !t.classList.contains("resizable-edge")) return;
+		e.preventDefault();
+		let r = t.getBoundingClientRect(), i = e.clientX - r.left, a = t;
+		if (i <= x) {
+			let e = t.previousElementSibling;
+			if (e && e.dataset.col !== void 0 && e.getAttribute("collapsed") !== "true") a = e;
+			else if (!t.previousElementSibling) return;
+		}
+		this.#s = a, this.#o = this.#m(a);
+		let o = this.#e.querySelector(`.ng-container-${this.#o}`);
+		if (!o) return;
+		let s = parseInt(a.dataset.col, 10), c = a.colSpan || 1;
+		if (this.#i = s + c - 1, this.#p(a)) {
+			this.#a = this.#i + 1;
+			let e = o.querySelector(`col[data-col="${this.#a}"]`);
+			e ? this.#u = parseInt(e.getAttribute("width"), 10) || 100 : this.#a = null;
+		} else this.#a = null;
+		let l = a.getBoundingClientRect(), u = this.#e.getBoundingClientRect();
+		this.#d = l.width, this.#f = l.left - u.left;
+		let d = o.querySelector(`col[data-col="${this.#i}"]`)?.getAttribute("width");
+		this.#l = d && !isNaN(parseInt(d, 10)) ? parseInt(d, 10) : l.width / c, this.#c = e.clientX, this.#n && (this.#n.classList.add("active"), this.#_(e.clientX)), window.addEventListener("pointermove", this.#v), window.addEventListener("pointerup", this.#y, { once: !0 });
+	};
+	#_(e) {
+		let t = e - this.#c, n = this.#p(this.#s);
+		if (n && this.#a !== null) {
+			let e = this.#u - 16, n = -(this.#l - 16);
+			t = Math.max(n, Math.min(t, e));
+		}
+		let r = Math.max(16, this.#l + t), i = e - this.#s.getBoundingClientRect().left;
+		if (n && this.#a !== null) {
+			let e = this.#d + (this.#u - 16);
+			i = Math.min(i, e);
+		}
+		let a = Math.max(16, i);
+		this.#n && (this.#n.style.setProperty("--col-resizer-tooltip-left", `${this.#f}px`), this.#n.style.setProperty("--col-resizer-tooltip-width", `${a}px`));
+		let o = this.#r?.querySelector(".size-badge");
+		o && (o.textContent = `${Math.round(r)}px`);
+	}
+	#v = (e) => {
+		n.log(e), this.#_(e.clientX);
+	};
+	#y = (e) => {
+		window.removeEventListener("pointermove", this.#v);
+		let t = e.clientX - this.#c, n = this.#p(this.#s), r = 0;
+		if (n && this.#a !== null) {
+			let e = Math.max(16, this.#l + t), n = this.#l + this.#u - e;
+			n < 16 && (n = 16, e = this.#l + this.#u - 16), this.setColumnWidth(this.#i, e, this.#o), this.setColumnWidth(this.#a, n, this.#o), r = e;
+		} else {
+			let e = Math.max(16, this.#l + t);
+			this.#i !== null && this.#o && (this.setColumnWidth(this.#i, e, this.#o), r = e);
+		}
+		if (this.#s) {
+			let e = this.#s;
+			e.getAttribute("collapsed") !== "true" && r > 20 && (e.dataset.expandWidth = String(r));
+		}
+		this.#n && (this.#r?.classList.add("fade-out"), setTimeout(() => {
+			this.#n.classList.remove("active"), this.#r?.classList.remove("fade-out");
+		}, 150)), this.#i = null, this.#a = null, this.#o = null, this.#s = null;
+	};
+	#b = (e) => {
+		let t = e.target.closest("th, td");
+		if (!t || !t.classList.contains("resizable-edge")) return;
+		let r = t.getBoundingClientRect();
+		e.clientX - r.left <= x && (t = t.previousElementSibling);
+		let i = parseInt(t.dataset.col, 10), a = this.#e.querySelector(`tbody.body [data-col="${i}"]`);
+		if (!a || !a.dataset.bind || a.classList.contains("CELL-RADIO")) return;
+		let o = 0;
+		Array.from(a.firstElementChild.children).forEach((e) => {
+			switch (e.tagName) {
+				case "SPAN":
+					o += 8;
+					break;
+				case "DIV":
+					o += 8;
+					break;
+				case "BUTTON":
+					o += 32;
+					break;
+				case "SELECT":
+					o += 32;
+					break;
+				case "INPUT": switch ((e.type || "text").toLowerCase()) {
+					case "checkbox":
+					case "radio":
+						o += 12;
+						break;
+					case "button":
+					case "submit":
+					case "reset":
+					case "image":
+						o += 16;
+						break;
+					case "color":
+					case "file":
+					case "range":
+						o += 24;
+						break;
+					case "hidden":
+						o += 0;
+						break;
+					default: o += 16;
+				}
+			}
+		}), n.log(o);
+		let s = this.#t.fields.get().indexOf(a.dataset.bind), c = window.getComputedStyle(a).font || "12px sans-serif", l = t.innerText || "", u = (nine.measureTextSize(l, c).width || 0) + 16;
+		this.#t.execute(() => {
+			this.#e.view.getArray().forEach((e, t) => {
+				let n = String(a.dataset.expr ? this.#t.exprEngine.evaluate(a.dataset.expr, e, t) : e.v[s] ?? "").trim(), r = nine.measureTextSize(n, c);
+				r.width && r.width > u && (u = r.width);
+			});
+			let e = Math.max(32, Math.min(400, Math.ceil(u) + o));
+			this.setColumnWidth(a.dataset.col, e, this.#m(t));
+		});
+	};
+}, C = class extends HTMLElement {
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.#e();
+	}
+	#e = () => {
+		this.innerHTML = "\n            <div class=\"resizer-overlay\">\n                <span class=\"size-badge\">0px</span>\n            </div>\n        ";
+	};
+};
+customElements.get("nine-table-col-resizer-panel") || customElements.define("nine-table-col-resizer-panel", C);
+// src/col/ColMover.js
+var w = class {
+	#e;
+	#t;
+	#n;
+	#r = !1;
+	#i = null;
+	#a = null;
+	#o = null;
+	#s = 0;
+	#c = null;
+	constructor(e) {
+		this.#e = e, this.#t = this.#e.querySelector(".ng-col-mover-grip"), this.#n = this.#e.querySelector(".ng-col-mover-indi"), this.bindEvents();
+	}
+	bindEvents() {
+		this.#e.addEventListener("pointerdown", this.#p);
+	}
+	#l() {
+		let e = this.#e.getRootNode()?.host;
+		return this.#e.getAttribute("col-movable") === "true" || e?.getAttribute("col-movable") === "true";
+	}
+	#u(e, t) {
+		let n = this.#e.getRootNode(), r = n.elementFromPoint ? n.elementFromPoint(e, t) : document.elementFromPoint(e, t);
+		for (; r && r.shadowRoot && r.shadowRoot.elementFromPoint;) {
+			let n = r.shadowRoot.elementFromPoint(e, t);
+			if (!n || n === r) break;
+			r = n;
+		}
+		return r;
+	}
+	#d(e) {
+		if (!e || e.dataset.col === void 0) return null;
+		let t = parseInt(e.dataset.col, 10), n = e.colSpan || 1, r = t + n - 1, i = e.closest("tr")?.sectionRowIndex ?? 0, a = e.closest("table");
+		if (!a) return {
+			startCol: t,
+			colSpan: n,
+			endCol: r,
+			rowIndex: i,
+			isGroup: !1,
+			parentGroupRange: null,
+			isValidGroup: !0
+		};
+		let o = a.querySelectorAll("thead th, thead td"), s = !1, c = !0, l = null;
+		for (let a of o) {
+			if (a === e || a.dataset.col === void 0) continue;
+			let o = parseInt(a.dataset.col, 10), u = a.colSpan || 1, d = o + u - 1;
+			(a.closest("tr")?.sectionRowIndex ?? 0) < i && o <= t && d >= r && u > n && (l ? (l.startCol = Math.max(l.startCol, o), l.endCol = Math.min(l.endCol, d)) : l = {
+				startCol: o,
+				endCol: d
+			}), d < t || o > r || (o >= t && d <= r ? u < n && (s = !0) : (o < t || d > r) && (o <= t && d >= r || (c = !1)));
+		}
+		let u = s && c;
+		return {
+			startCol: t,
+			colSpan: u ? n : 1,
+			endCol: u ? r : t,
+			rowIndex: i,
+			isGroup: u,
+			parentGroupRange: l,
+			isValidGroup: c
+		};
+	}
+	#f(e) {
+		let t = this.#d(e);
+		if (!t) return null;
+		let { startCol: n, endCol: r, isGroup: i } = t, a = e.closest("table");
+		if (!a) return null;
+		let o = Infinity, s = -Infinity, c = Infinity, l = -Infinity, u = [];
+		if (a.querySelectorAll("thead th, thead td").forEach((t) => {
+			if (t.dataset.col === void 0) return;
+			let a = parseInt(t.dataset.col, 10), d = a + (t.colSpan || 1) - 1;
+			if (i ? a >= n && d <= r : t === e) {
+				let e = t.getBoundingClientRect();
+				o = Math.min(o, e.left), s = Math.max(s, e.right), c = Math.min(c, e.top), l = Math.max(l, e.bottom);
+				let n = window.getComputedStyle(t);
+				u.push({
+					el: t,
+					rect: e,
+					style: n
+				});
+			}
+		}), u.length === 0) return null;
+		let d = s - o, f = l - c, p = document.createElement("div");
+		return p.className = "grip-header-content", p.style.position = "relative", p.style.width = `${d}px`, p.style.height = `${f}px`, u.forEach(({ el: e, rect: t, style: n }) => {
+			let r = e.cloneNode(!0);
+			r.style.position = "absolute", r.style.left = `${t.left - o}px`, r.style.top = `${t.top - c}px`, r.style.width = `${t.width}px`, r.style.minWidth = `${t.width}px`, r.style.maxWidth = "none", r.style.height = `${t.height}px`, r.style.boxSizing = "border-box", r.style.margin = "0", r.style.backgroundColor = n.backgroundColor !== "transparent" && n.backgroundColor !== "rgba(0, 0, 0, 0)" ? n.backgroundColor : "#f9fafb", r.style.color = n.color, r.style.font = n.font, r.style.fontWeight = n.fontWeight, r.style.fontSize = n.fontSize, r.style.textAlign = n.textAlign, r.style.padding = n.padding, r.style.border = n.border, r.style.borderRight = n.borderRight, r.style.borderBottom = n.borderBottom, r.style.display = "flex", r.style.alignItems = "center", r.style.justifyContent = n.textAlign === "center" ? "center" : n.textAlign === "right" ? "flex-end" : "flex-start", p.appendChild(r);
+		}), {
+			element: p,
+			bounds: {
+				left: o,
+				right: s,
+				top: c,
+				bottom: l,
+				width: d,
+				height: f
+			}
+		};
+	}
+	#p = (e) => {
+		if (!this.#l() || !e.target.closest(".ng-sheet-header")) return;
+		let t = e.target.closest("th, td");
+		if (!t || t.classList.contains("resizable-edge") || ["INPUT", "BUTTON"].includes(e.target.tagName) || t.dataset.col === void 0) return;
+		e.preventDefault();
+		let n = e.clientX, r = e.clientY, i = () => {
+			this.#c &&= (clearTimeout(this.#c), null), window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", i), window.removeEventListener("pointercancel", i);
+		}, a = (e) => {
+			Math.hypot(e.clientX - n, e.clientY - r) > 5 && i();
+		};
+		this.#c = setTimeout(() => {
+			i(), this.#m(e, t);
+		}, 500), window.addEventListener("pointermove", a), window.addEventListener("pointerup", i, { once: !0 }), window.addEventListener("pointercancel", i, { once: !0 });
+	};
+	#m(e, t) {
+		if (this.#r) return;
+		let n = this.#f(t);
+		if (!n) return;
+		this.#r = !0, this.#i = t, this.#a = parseInt(t.dataset.col, 10);
+		let r = this.#e.getBoundingClientRect(), { bounds: i, element: a } = n;
+		if (this.#s = e.clientX - i.left, this.#t) {
+			this.#t.replaceChildren(a);
+			let t = i.top - r.top, n = r.height - t;
+			this.#t.style.width = `${i.width}px`, this.#t.style.height = `${n}px`, this.#t.style.top = `${t}px`, this.#t.style.display = "block", this.#g(e.clientX);
+		}
+		document.body.style.cursor = "move", window.addEventListener("pointermove", this.#h), window.addEventListener("pointerup", this.#_, { once: !0 });
+	}
+	#h = (e) => {
+		if (!this.#r) return;
+		this.#g(e.clientX), this.#t && (this.#t.style.pointerEvents = "none"), this.#n && (this.#n.style.pointerEvents = "none");
+		let t = this.#u(e.clientX, e.clientY)?.closest(".ng-sheet-header th, .ng-sheet-header td");
+		if (t && t.dataset.col !== void 0) {
+			let n = parseInt(t.dataset.col, 10), r = this.#e.getBoundingClientRect(), i = t.closest("table"), a = Infinity, o = -Infinity;
+			if (i && i.querySelectorAll("thead th, thead td").forEach((e) => {
+				if (e.dataset.col === void 0) return;
+				let t = parseInt(e.dataset.col, 10), r = t + (e.colSpan || 1) - 1;
+				if (t <= n && r >= n) {
+					let t = e.getBoundingClientRect();
+					a = Math.min(a, t.left), o = Math.max(o, t.right);
+				}
+			}), a === Infinity) {
+				let e = t.getBoundingClientRect();
+				a = e.left, o = e.right;
+			}
+			let s = a + (o - a) / 2, c = 0, l = 0;
+			e.clientX < s ? (c = n, l = a - r.left) : (c = n + (t.colSpan || 1), l = o - r.left);
+			let u = this.#d(this.#i), d = u.colSpan, f = u.rowIndex, p = f + (this.#i.rowSpan || 1) - 1, m = t.closest("tr")?.sectionRowIndex ?? 0, h = m + (t.rowSpan || 1) - 1, g = !(p < m || f > h), _ = !1;
+			if (u.parentGroupRange) {
+				let { startCol: e, endCol: t } = u.parentGroupRange;
+				(c < e || c + d - 1 > t) && (_ = !0);
+			}
+			let v = !1;
+			if (i) {
+				let e = i.querySelectorAll("thead th[colspan], thead td[colspan]");
+				for (let t of e) {
+					if (t === this.#i) continue;
+					let e = t.closest("tr")?.sectionRowIndex ?? 0, n = e + (t.rowSpan || 1) - 1;
+					if (p < e || f > n) continue;
+					let r = parseInt(t.dataset.col, 10), i = r + (t.colSpan || 1) - 1;
+					if (c > r && c < i + 1) {
+						v = !0;
+						break;
+					}
+					let a = c + d - 1;
+					if (c > r && c <= i && a > i || c < r && a >= r && a < i) {
+						v = !0;
+						break;
+					}
+				}
+			}
+			let y = c >= u.startCol && c <= u.endCol + 1;
+			if (!g || y || _ || v || !u.isValidGroup) this.#o = null, this.#n && (this.#n.style.display = "none"), this.#t && this.#t.classList.add("invalid");
+			else if (this.#o = c, this.#t && this.#t.classList.remove("invalid"), this.#n) {
+				let e = t.closest(".ng-sheet-header").getBoundingClientRect().top - r.top, n = r.height - e;
+				this.#n.style.top = `${e}px`, this.#n.style.height = `${n}px`, this.#n.style.left = `${l - 1}px`, this.#n.style.display = "block";
+			}
+		} else this.#n && (this.#n.style.display = "none"), this.#t && this.#t.classList.add("invalid"), this.#o = null;
+	};
+	#g(e) {
+		if (!this.#t) return;
+		let t = e - this.#e.getBoundingClientRect().left - this.#s;
+		this.#t.style.left = `${t}px`;
+	}
+	#_ = (e) => {
+		this.#r && (window.removeEventListener("pointermove", this.#h), document.body.style.cursor = "", this.#t && (this.#t.style.display = "none", this.#t.replaceChildren()), this.#n && (this.#n.style.display = "none"), this.#o !== null && this.#a !== null && this.#o !== this.#a && this.#o !== this.#a + 1 && this.moveColumn(this.#a, this.#o), this.#r = !1, this.#i = null, this.#a = null, this.#o = null);
+	};
+	moveColumn(e, t) {
+		n.log(this.#e.sourceTable.cloneNode(!0));
+		let r = this.#e.sourceTable.querySelector("colgroup"), i = r.querySelector(`col[data-col="${t}"]`), a = this.#d(this.#i);
+		if (!a || !a.isValidGroup) return;
+		let o = a.colSpan, s = (t) => t >= e && t < e + o, c = this.#e.querySelector(`.ng-sheet-body-content col[data-col="${t}"]`), l = c?.closest(".ng-container-left") ? "left" : c?.closest(".ng-container-right") ? "right" : null;
+		r.querySelectorAll("col").forEach((e) => {
+			s(parseInt(e.getAttribute("data-col"), 10)) && (l ? e.setAttribute("fixed", l) : e.removeAttribute("fixed"), r.insertBefore(e, i));
+		}), [
+			"thead",
+			"tbody",
+			"tfoot"
+		].forEach((e) => {
+			this.#e.sourceTable.querySelectorAll(`${e} tr`).forEach((e) => {
+				let n = Array.from(e.children), r = n.find((e) => parseInt(e.dataset.col, 10) >= t);
+				n.forEach((t) => {
+					s(parseInt(t.dataset.col, 10)) && e.insertBefore(t, r || null);
+				});
+			});
+		}), this.#e.recompileAndRefresh();
+	}
+	destroy() {
+		this.#e.removeEventListener("pointerdown", this.#p);
+	}
+}, T = class {
+	#e;
+	constructor(e) {
+		this.#e = e;
+	}
+	getFixState(e, t) {
+		if (!e || !t) return "none";
+		let n = e.closest(".ng-container-left, .ng-container-right, .ng-container-body");
+		if (n?.classList.contains("ng-container-left")) return "left";
+		if (n?.classList.contains("ng-container-right")) return "right";
+		let r = parseInt(e.dataset.col, 10);
+		if (!isNaN(r)) {
+			let e = t.querySelector(`colgroup col[data-col="${r}"]`)?.getAttribute("fixed");
+			if (e) return e;
+		}
+		return "none";
+	}
+	canFixColumn(e, t) {
+		if (!e || e.tagName !== "TH" || !t) return !1;
+		let n = parseInt(e.dataset.col, 10), r = e.colSpan || 1;
+		if (isNaN(n)) return !1;
+		let i = n + r - 1, a = Array.from(t.querySelectorAll("thead tr"));
+		if (a.length <= 1) return !0;
+		for (let e of a) {
+			let t = Array.from(e.querySelectorAll("th, td")), n = !1;
+			for (let e of t) {
+				let t = parseInt(e.dataset.col, 10), r = t + (e.colSpan || 1) - 1;
+				if (t <= i && i < r) return !1;
+				if (r === i) {
+					n = !0;
+					break;
+				}
+			}
+			if (!n) return !1;
+		}
+		return !0;
+	}
+	executeFixToggle(e, t, r = "left") {
+		if (!this.#e || !t) return;
+		let i = this.#e.sourceTable;
+		if (!i) return;
+		let a = parseInt(t.dataset.col, 10), o = t.colSpan || 1, s = a + o - 1;
+		if (isNaN(s)) return;
+		let c = i.querySelector("colgroup");
+		if (!c) return;
+		let l = Array.from(c.querySelectorAll("col"));
+		if (e === "fix-column") l.forEach((e) => {
+			parseInt(e.getAttribute("data-col"), 10) <= s && e.setAttribute("fixed", r);
+		}), [
+			"thead",
+			"tbody",
+			"tfoot"
+		].forEach((e) => {
+			i.querySelectorAll(`${e} tr`).forEach((e) => {
+				Array.from(e.children).forEach((e) => {
+					let t = parseInt(e.dataset.col, 10);
+					!isNaN(t) && t <= s && e.setAttribute("fixed", r);
+				});
+			});
+		});
+		else if (e === "unfix-column") {
+			let e = a, t = a + o - 1;
+			[
+				"thead",
+				"tbody",
+				"tfoot"
+			].forEach((n) => {
+				i.querySelectorAll(`${n} tr`).forEach((n, r) => {
+					Array.from(n.children).forEach((i) => {
+						let o = parseInt(i.dataset.col, 10), c = o + (i.colSpan || 1) - 1, l = i.rowSpan || 1;
+						(n.sectionRowIndex ?? r) + l - 1 < i.closest("tr").sectionRowIndex || i.closest("tr").sectionRowIndex + l - 1, c < a || o > s || (e = Math.min(e, o), t = Math.max(t, c));
+					});
+				});
+			}), l.forEach((t) => {
+				parseInt(t.getAttribute("data-col"), 10) >= e && t.removeAttribute("fixed");
+			});
+			let n = !1;
+			l.forEach((e) => {
+				n ? e.removeAttribute("fixed") : e.getAttribute("fixed") || (n = !0);
+			}), [
+				"thead",
+				"tbody",
+				"tfoot"
+			].forEach((e) => {
+				i.querySelectorAll(`${e} tr`).forEach((e) => {
+					Array.from(e.children).forEach((e) => {
+						let t = parseInt(e.dataset.col, 10);
+						if (isNaN(t)) return;
+						let n = l.find((e) => parseInt(e.getAttribute("data-col"), 10) === t)?.getAttribute("fixed");
+						n ? e.setAttribute("fixed", n) : e.removeAttribute("fixed");
+					});
+				});
+			});
+		}
+		n.log(this.#e.sourceTable), this.#e.recompileAndRefresh?.();
+	}
+}, E = class extends HTMLElement {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	currentCol = null;
+	connectedCallback() {
+		this.#a(), document.addEventListener("mousedown", this.#s);
+	}
+	#a = () => {
+		this.#o(), this.#e = this.closest("nine-table-sheet"), this.#t = this.getRootNode().host, this.#n = this.querySelector("nine-table-simple"), setTimeout(() => {
+			this.#r = this.#n.shadowRoot.querySelector("nine-table-sheet");
+		}), this.querySelector(".search-box").addEventListener("focusin", (e) => {
+			e.stopPropagation();
+		}), this.querySelector(".search-box").addEventListener("input", this.#u), this.querySelector("#chkSelectAll").addEventListener("change", this.#d), this.querySelector("#btnOk").addEventListener("click", this.#l);
+	};
+	#o = () => {
+		this.innerHTML = "\n            <input type=\"text\" class=\"search-box\" placeholder=\"Search...\">\n            \n            <nine-table-simple class=\"filter-list\" theme=\"simple\">\n                <table auto-fit-col=\"true\">\n                    <colgroup>\n                        <col width=\"32\" fixed=\"left\" />\n                        <col width=\"180\" />\n                        <col width=\"0\" fixed=\"right\"/>\n                    </colgroup>\n                    <tbody>\n                        <tr>\n                            <td cell-type=\"checkbox\" data-bind=\"CHK\"></td>\n                            <td data-bind=\"DATA2\" html=\"true\"></td>\n                            <td data-bind=\"DATA\"></td>\n                        </tr>\n                    </tbody>\n                </table>\n            </nine-table-simple>\n\n            <div class=\"footer-section\">\n                <div class=\"footer-btns\">\n                    <label><input type=\"checkbox\" id=\"chkSelectAll\" checked> Select All</label>\n                    <div class=\"btn-group\">\n                        <button id=\"btnOk\">Apply</button>\n                    </div>\n                </div>\n            </div>\n        ";
+	};
+	open(e) {
+		this.#i = e;
+		let t = e.closest("th, td");
+		this.currentCol = t?.dataset.col;
+		let n = t.getBoundingClientRect(), r = this.#e.getBoundingClientRect(), i = this.offsetWidth || 240, a = n.right - r.left - i, o = n.bottom - r.top;
+		a < 0 && (a = Math.max(0, n.left - r.left)), this.style.left = `${a}px`, this.style.top = `${o}px`;
+		let s = this.querySelector(".search-box");
+		s.value = "", this.classList.add("active"), this.classList.add("loading"), setTimeout(() => {
+			try {
+				this.#c(), this.#r.rowManager.scrollToDataRow(0), s.focus();
+			} finally {
+				this.classList.remove("loading");
+			}
+		});
+	}
+	#s = (e) => {
+		let t = e.composedPath ? e.composedPath() : [];
+		t.includes(this) || this.#i && t.includes(this.#i) || this.close();
+	};
+	close() {
+		this.currentCol = null, this.classList.remove("active"), this.#i = null;
+	}
+	#c() {
+		let e = this.#t.data.getArray(), t = this.#i?.columns || [], n = this.#t.fields.get() || [], r = this.#e.filtering?.filters || {}, i = this.#t.exprEngine, a = t.flatMap((t) => {
+			let a = t.bind, o = t.expr, s = a || o, c = a ? n.indexOf(a) : -1, l = r[s] || [], u = /* @__PURE__ */ new Map();
+			for (let t = 0; t < e.length; t++) {
+				let n = e[t];
+				if (!n) continue;
+				let r;
+				c >= 0 && n.v ? r = n.v[c] : a && a.includes("data.") ? r = i ? i.evaluate(a, n, t) : void 0 : o && i && (r = i.evaluate(o, n, t));
+				let s = r;
+				o && i && (s = i.evaluate(o, n, t)), s != null && !u.has(s) && u.set(s, {
+					v: r,
+					v2: s
+				});
+			}
+			let d = [...u.values()];
+			return d.sort((e, t) => {
+				let n = e.v2, r = t.v2;
+				if (n === r) return 0;
+				if (n == null || n === "") return 1;
+				if (r == null || r === "") return -1;
+				let i = Number(n), a = Number(r);
+				return !isNaN(i) && !isNaN(a) ? i - a : String(n).localeCompare(String(r));
+			}), l.sort((e, t) => e > t ? 1 : -1), d.map((e) => ({
+				LVL: 2,
+				DATA: e.v,
+				DATA2: e.v2 === "" || e.v2 === null || e.v2 === void 0 ? "<span class=\"empty-value\">(empty)</span>" : e.v2,
+				COLNM: s,
+				CHK: l.length === 0 || l.nineBinarySearch(e.v) >= 0 ? "Y" : "N"
+			}));
+		});
+		this.#n.data.set(a);
+		let o = this.querySelector("#chkSelectAll");
+		o && (o.checked = a.length > 0 && a.every((e) => e.CHK === "Y"));
+	}
+	#l = () => {
+		this.#t.loading = !0;
+		let e = this.#r.view.getArray(), t = this.#n.data.getHostFields(), n = e.filter((e) => {
+			let n = e.v[t.indexOf("CHK")];
+			return n === "Y" || n === !0;
+		}), r = { ...this.#e.filtering?.filters || {} };
+		this.#i.columns.forEach((e) => {
+			let i = e.expr || e.bind, a = e.expr ? t.indexOf("DATA2") : t.indexOf("DATA"), o = n.map((e) => e.v[a]);
+			o.length > 0 ? r[i] = o : delete r[i];
+		});
+		let i = this.#n.data.count();
+		setTimeout(() => {
+			try {
+				i === n.length ? this.#i.columns.forEach((e) => {
+					let t = e.expr || e.bind;
+					t && this.#e.filtering.clear(t);
+				}) : this.#e.filtering.set(r), this.#e.querySelectorAll("nine-table-filter-button").forEach((e) => {
+					e.updateFilteredState();
+				}), this.#e.invalidate(), this.close();
+			} finally {
+				this.#t.loading = !1;
+			}
+		});
+	};
+	#u = (e) => {
+		let t = e.target.value.toLowerCase().trim();
+		if (!t) this.#r.filtering.clear();
+		else {
+			let e = this.#n.data.getArray(), r = this.#n.data.getHostFields().indexOf("DATA2"), i = [];
+			e.forEach((e) => {
+				let n = r >= 0 && e.v ? e.v[r] : "";
+				String(n).replace(/<[^>]*>?/gm, "").toLowerCase().includes(t) && i.push(n);
+			}), n.log(i), this.#r.filtering.set({ DATA2: [...new Set(i)] });
+		}
+	};
+	#d = (e) => {
+		let t = e.target.checked, n = this.#n?.data?.getArray() || [], r = this.#n.data.getHostFields().indexOf("CHK");
+		r >= 0 && n.forEach((e) => {
+			e.v[r] = t ? "Y" : "N";
+		}), this.#n.refresh();
+	};
+}, D = class extends HTMLElement {
+	#e;
+	#t = null;
+	connectedCallback() {
+		this.#e = this.closest("nine-table-sheet") || this.getRootNode().host, this.removeEventListener("click", this.#n), this.addEventListener("click", this.#n);
+	}
+	get columns() {
+		if (this.#t) return this.#t;
+		let e = this.closest("th, td")?.dataset.col, t = this.#e.sourceTable, n = [], r = /* @__PURE__ */ new Set();
+		return t && e !== void 0 && t.querySelectorAll(`tbody [data-col="${e}"]`).forEach((e) => {
+			let t = e.dataset.bind, i = e.dataset.expr;
+			if (t || i) {
+				let e = `${t || ""}_${i || ""}`;
+				r.has(e) || (r.add(e), n.push({
+					bind: t,
+					expr: i
+				}));
+			}
+		}), this.#t = n, this.#t;
+	}
+	updateFilteredState = () => {
+		let e = this.#e.filtering?.filters || {}, t = this.columns.some((t) => {
+			let n = t.expr || t.bind;
+			return n && e[n] && e[n].length > 0;
+		});
+		this.classList.toggle("filtered", t);
+	};
+	#n = (e) => {
+		n.log(e), e.preventDefault(), e.stopPropagation();
+		let t = this.#e.querySelector("nine-table-filter-panel"), r = this.closest("th, td").dataset.col;
+		t && t.currentCol === r && t.classList.contains("active") ? t.close() : t && t.open(this);
+	};
+}, O = class {
+	#e;
+	#t;
+	#n = !1;
+	#r = null;
+	#i = {};
+	constructor(e) {
+		this.#e = e, this.#t = this.#e.getRootNode().host, this.#a();
+	}
+	get filters() {
+		return this.#i;
+	}
+	#a = () => {
+		this.#o();
+	};
+	#o = () => {
+		if (this.#t.tagName.toLowerCase() === "nine-table-simple") return;
+		let e = this.#e.querySelector("nine-table-filter-panel");
+		e || (e = document.createElement("nine-table-filter-panel"), this.#e.appendChild(e)), this.#r = e;
+	};
+	isFiltering() {
+		return this.#n;
+	}
+	clear = (e) => {
+		e ? delete this.#i[e] : this.#i = {}, this.#n = Object.keys(this.#i).length > 0, this.#s(), this.#e.querySelectorAll("nine-table-filter-button").forEach((e) => {
+			e.updateFilteredState();
+		}), n.log(`🔄 [NineTableFiltering] Filter cleared for ${e || "all"}`);
+	};
+	set = (e) => {
+		n.log(e);
+		let t = Array.isArray(e) ? Object.fromEntries(Object.keys(e[0]).map((t) => [t, [...new Set(e.map((e) => e[t]))]])) : e;
+		this.#i = t, this.#n = Object.keys(t).length > 0, this.#e.toggleAttribute("filtering", this.#n), this.#s();
+	};
+	#s() {
+		let e = this.#t.data.getArray(), t = this.#t.data.getHostFields(), n = this.#e.index, i = this.#t.exprEngine;
+		if (!(Object.keys(this.#i).length > 0)) {
+			e.forEach((e) => {
+				e?.m?._?.[r.META.INDEX.FILTER] && (e.m._[r.META.INDEX.FILTER][n] = !0);
+			}), this.#e.invalidate();
+			return;
+		}
+		let a = Object.entries(this.#i).map(([e, n]) => {
+			let r = e.includes("data.") || e.includes("host.") || e.includes("rowItem.v");
+			return {
+				targetKey: e,
+				isExpr: r,
+				fieldIdx: r ? -1 : t.indexOf(e),
+				allowedSet: new Set(n)
+			};
+		});
+		e.forEach((e, t) => {
+			if (!e) return;
+			e.m._[r.META.INDEX.FILTER] || (e.m._[r.META.INDEX.FILTER] = []);
+			let o = !0;
+			for (let n = 0; n < a.length; n++) {
+				let { targetKey: r, isExpr: s, fieldIdx: c, allowedSet: l } = a[n], u;
+				if (s && i ? u = i.evaluate(r, e, t) : c >= 0 && e.v && (u = e.v[c]), !l.has(u)) {
+					o = !1;
+					break;
+				}
+			}
+			e.m._[r.META.INDEX.FILTER][n] = o;
+		}), this.#e.invalidate();
+	}
+};
+customElements.get("nine-table-filter-panel") || customElements.define("nine-table-filter-panel", E), customElements.get("nine-table-filter-button") || customElements.define("nine-table-filter-button", D);
+// src/data/Sorting.js
+var k = class {
+	#e;
+	#t;
+	#n = [];
+	constructor(e) {
+		this.#e = e, this.#t = e.getRootNode().host, setTimeout(() => {
+			this.#r();
+		}, 300);
+	}
+	#r() {
+		this.#e.querySelectorAll("thead").forEach((e) => {
+			e.addEventListener("dblclick", (e) => {
+				let t = e.target.closest("th, td");
+				if (!t || t.classList.contains("resizable-edge") || ["INPUT", "CELL-CHECKBOX"].includes(e.target.tagName) || e.offsetX <= 2 || e.offsetX >= t.offsetWidth - 2) return;
+				let n = this.#e.getRootNode().host;
+				n.loading = !0, setTimeout(() => {
+					try {
+						this.#i(e, t);
+					} finally {
+						n.loading = !1;
+					}
+				});
+			});
+		}), n.log("🎯 [NineTableSorting] Initialized");
+	}
+	#i(e, t) {
+		let n = t.dataset.col, r = t.closest("tr"), i = r ? r.dataset.subrow || String(r.sectionRowIndex) : "0";
+		if (n === void 0) return;
+		let a = this.#e.sourceTable;
+		if (!a) return;
+		let o = null, s = null;
+		if (a.querySelectorAll(`tbody [data-col="${n}"]`).forEach((e) => {
+			e.dataset.bind && (o = e.dataset.bind), e.dataset.expr && (s = e.dataset.expr);
+		}), !o && !s) return;
+		let c = t.classList.contains("asc"), l = t.classList.contains("desc");
+		!e.ctrlKey && !e.shiftKey && (this.#n = []);
+		let u = this.#n.findIndex((e) => e.colIndex === n && e.subRowIndex === i || e.colName === o), d = {
+			colIndex: n,
+			subRowIndex: i,
+			colname: o || s,
+			colName: o || s,
+			expr: s,
+			asc: !0,
+			"expr-func": s ? (e, t) => this.#t.exprEngine(s, e, t) : null
+		};
+		!c && !l ? u >= 0 ? this.#n[u].asc = !0 : this.#n.push({
+			...d,
+			asc: !0
+		}) : c ? u >= 0 ? this.#n[u].asc = !1 : this.#n.push({
+			...d,
+			asc: !1
+		}) : this.#n = this.#n.filter((e) => !(e.colIndex === n && e.subRowIndex === i || e.colName === o)), this.#a();
+	}
+	#a() {
+		this.#e.view ? (this.#e.view.setSorting(this.#n), this.#o(), this.#e.invalidate(), n.log("🔄 [NineTableSorting] Sorting applied via RowManager.refresh(true)")) : console.warn("⚠️ [NineTableSorting] Sheet view (SheetView) is not initialized.");
+	}
+	#o() {
+		this.#e.querySelectorAll("thead th, thead td").forEach((e) => {
+			e.classList.remove("asc", "desc");
+		}), this.#n.length !== 0 && this.#n.forEach((e) => {
+			let { colIndex: t, subRowIndex: n, asc: r } = e;
+			if (t !== void 0) {
+				let e = `thead [data-col="${t}"]`;
+				n !== void 0 && (e = `thead tr[data-subrow="${n}"] [data-col="${t}"]`), this.#e.querySelectorAll(e).forEach((e) => {
+					e.classList.add(r ? "asc" : "desc");
+				});
+			}
+		});
+	}
+	restore() {
+		this.#n = [], this.#e.view && this.#e.view.resetSorting(), this.#o(), this.#e.rowManager?.refresh(!0);
+	}
+}, A = class {
+	#e;
+	#t;
+	#n = [];
+	#r = [];
+	#i = null;
+	constructor(e) {
+		this.#e = e, this.#t = e.getRootNode().host, this.refresh();
+	}
+	getArray = (e, t) => {
+		if (!this.#i) {
+			let e = this.#t.data.getArray();
+			this.#i = this.#r.map((t) => e[t]);
+		}
+		let n = this.#i;
+		if (e == null) return n;
+		if (e < 0 || e >= n.length) return null;
+		let r = n[e];
+		if (t != null) {
+			let e = this.#t.data.getHostFields().indexOf(t);
+			return e >= 0 && r.v ? r.v[e] : null;
+		}
+		return r;
+	};
+	count = () => {
+		if (!this.#i) {
+			let e = this.#t.data.getArray();
+			this.#i = this.#r.map((t) => e[t]);
+		}
+		return this.#i.length;
+	};
+	get = (e, t) => {
+		let n = this.getArray(), r = this.#t.data.getHostFields?.() || [];
+		if (e == null) return n.map((e) => this.#a(e, r));
+		if (e < 0 || e >= n.length) return null;
+		let i = n[e];
+		if (!i) return null;
+		if (t != null) {
+			let e = r.indexOf(t);
+			return e >= 0 && i.v ? i.v[e] : null;
+		}
+		return this.#a(i, r);
+	};
+	#a = (e, t) => {
+		if (!e) return null;
+		let n = {};
+		return t.forEach((t, r) => {
+			n[t] = e.v ? e.v[r] : e[t];
+		}), e.m && (n.m = e.m), e._ && (n._ = e._), n;
+	};
+	refresh = () => {
+		this.#i = null;
+		let e = this.#t.data.getArray(), t = [];
+		e.forEach((e, n) => {
+			if (!e) return;
+			let i = e.m?._?.[r.META.INDEX.FILTER];
+			i && i[this.#e.index] === !1 || t.push(n);
+		}), this.#n.length > 0 && (t = this.#o(t, e)), this.#r = t;
+		let n = t.map((t) => e[t]), i = this.#e.grouping?.columns || [];
+		if (i.length > 0) {
+			let e = g.apply(n, i, this.#t.data.getHostFields());
+			this.#i = e.renderItems, this.#e.grouping.setGroupMap(e.groupMap);
+		} else this.#i = n;
+	};
+	setSorting = (e) => {
+		this.#n = e || [], this.refresh();
+	};
+	getSorting = () => this.#n;
+	resetSorting = () => {
+		this.#n = [], this.refresh();
+	};
+	#o = (e, t) => {
+		n.log(/* @__PURE__ */ new Date());
+		let r = typeof this.#t.data.getHostFields == "function" ? this.#t.data.getHostFields() : [], i = this.#n.map((e) => ({
+			...e,
+			colIndex: r.indexOf(e.colname || e.colName)
+		}));
+		return e.sort((e, n) => {
+			let r = t[e], a = t[n];
+			for (let t of i) {
+				let i = t.asc, o = t.expr, s, c;
+				o ? (s = this.#t.exprEngine.evaluate(o, r, e), c = this.#t.exprEngine.evaluate(o, a, n)) : t.colIndex >= 0 && r.v && a.v && (s = r.v[t.colIndex], c = a.v[t.colIndex]);
+				let l = s == null || s === "", u = c == null || c === "";
+				if (!(l && u)) {
+					if (l) return 1;
+					if (u) return -1;
+					if (s !== c) {
+						let e = 0;
+						if (typeof s == "number" && typeof c == "number") e = s - c;
+						else {
+							let t = String(s), n = String(c);
+							e = t > n ? 1 : t < n ? -1 : 0;
+						}
+						if (e !== 0) return i ? e : -e;
+					}
+				}
+			}
+			return e - n;
+		});
+	};
+}, j = class e {
+	static initializeTable(t, n) {
+		return e.#r(n), e.#a(n), e.#n(n), e.#u(n), e.#i(n), v.resetColIndex(n, n.querySelectorAll("thead tr")), v.resetColIndex(n, n.querySelectorAll("tbody.body tr[grouping=\"true\"]")), v.resetColIndex(n, n.querySelectorAll("tbody.body tr:not([grouping=\"true\"])")), v.resetColIndex(n, n.querySelectorAll("tfoot tr")), e.#e(n), e.#o(n), e.#s(t, n), e.#l(n), e.#c(t, n), e.#d(n), n;
+	}
+	static #e(t) {
+		let n = t.querySelector("thead");
+		if (!n || n.querySelector(".col-indicator-rowgroup")) return;
+		let r = n.insertRow(0);
+		r.setAttribute("role", "row"), r.classList.add("col-indicator-rowgroup"), r.classList.add("collapse");
+		let i = t.querySelector("tbody tr");
+		if (!i) return;
+		let a = 0;
+		i.querySelectorAll("th, td").forEach((t) => {
+			if (!t.classList.contains("dummy")) {
+				let n = t.colSpan || 1;
+				for (let t = 0; t < n; t++) {
+					let t = "<th data-col=\"@col\" class=\"col-indicator\" scope=\"col\"></th>".replace("@col", a).replace("@text", e.#t(a++));
+					r.insertAdjacentHTML("beforeend", t);
+				}
+			}
+		});
+		let o = Array.from(t.querySelectorAll("colgroup col"));
+		r.querySelectorAll(".col-indicator").forEach((e, t) => {
+			let n = o[t].getAttribute("background");
+			n && (e.style.background = n);
+		});
+	}
+	static #t(e) {
+		let t = "";
+		for (let n = e; n >= 0; n = Math.floor(n / 26) - 1) t = String.fromCharCode(65 + n % 26) + t;
+		return t;
+	}
+	static #n(e) {
+		let t = e.querySelector("tbody:not(.head):not(.foot)");
+		if (t) {
+			if (t.classList.add("body"), !e.querySelector("tbody.head")) {
+				let e = document.createElement("tbody");
+				e.classList.add("head"), t.before(e);
+			}
+			if (!e.querySelector("tbody.foot")) {
+				let e = document.createElement("tbody");
+				e.classList.add("foot"), t.after(e);
+			}
+		}
+	}
+	static #r(e) {
+		let t = e.querySelector("colgroup");
+		if (t || (t = document.createElement("colgroup"), e.prepend(t)), t.querySelectorAll("col").length === 0) {
+			let n = e.querySelector("tbody tr"), r = 1;
+			n && (r = Array.from(n.querySelectorAll("th, td")).reduce((e, t) => e + (parseInt(t.getAttribute("colspan") || t.colSpan, 10) || 1), 0)), r = Math.max(r, 1);
+			for (let e = 0; e < r; e++) {
+				let e = document.createElement("col");
+				t.appendChild(e);
+			}
+		}
+	}
+	static #i(e) {
+		let t = Array.from(e.querySelectorAll("colgroup col"));
+		if (t.length === 0) return;
+		let n = e.clientWidth || 0, r = Math.max(Math.floor(n / t.length), 100);
+		t.forEach((e, t) => {
+			e.hasAttribute("data-col") || e.setAttribute("data-col", t);
+			let n = e.getAttribute("width") || parseInt(e.style.width, 10) || r;
+			e.setAttribute("width", n);
+			let i = String(n).includes("px") ? n : `${n}px`;
+			e.style.width = i;
+		});
+	}
+	static #a(e) {
+		if (e.querySelector("thead")) return;
+		let t = document.createElement("thead"), n = e.querySelector("colgroup");
+		n ? n.after(t) : e.prepend(t);
+	}
+	static #o(e) {
+		e.querySelectorAll("thead th, thead td").forEach((e) => {
+			e.getAttribute("collapsed") === "true" && e.getAttribute("collapsible") !== "true" && e.setAttribute("collapsible", "true");
+		});
+	}
+	static #s(e, t) {
+		let n = [
+			"data-bind",
+			"data-expr",
+			"type"
+		], r = 0;
+		t.querySelectorAll("tbody th, tbody td").forEach((t) => {
+			let i = `cell-${t.getAttribute("cell-type") || "renderer"}`, a = t.querySelector("datalist");
+			if (a) {
+				let n = [];
+				a.querySelectorAll("option").forEach((e) => {
+					n.push({
+						k: e.getAttribute("k"),
+						v: e.getAttribute("v"),
+						value: e.getAttribute("value")
+					});
+				});
+				let i = `__ds_${Date.now()}_${++r}`;
+				e && (e[i] = () => n), t.setAttribute("data-source", `host.${i}()`), a.remove();
+			}
+			let o = t.dataset.expr;
+			o && t.setAttribute("data-expr", e.exprEngine.precompile(o)), Array.from(t.attributes).forEach((n) => {
+				[
+					"data-bind",
+					"data-expr",
+					"cell-type",
+					"validator"
+				].includes(n.name) || (n.value.includes("data.") || n.value.includes("host.")) && t.setAttribute(n.name, e.exprEngine.precompile(n.value));
+			}), t.innerHTML = `<${i} ${n.filter((e) => t.hasAttribute(e)).map((e) => `${e}="${t.getAttribute(e)}"`).join(" ")}></${i}>`, t.setAttribute("tabindex", "0");
+		}), t.querySelectorAll("thead th, thead td, tfoot th, tfoot td").forEach((e) => {
+			let t = e.getAttribute("cell-type");
+			if (t) {
+				let r = e.innerHTML, i = `cell-${t}`;
+				e.innerHTML = `<${i} ${n.filter((t) => e.hasAttribute(t)).map((t) => `${t}="${e.getAttribute(t)}"`).join(" ")} content="${r}"></${i}>`;
+			}
+		});
+	}
+	static #c(e, t) {
+		let n = e.getAttribute("filtering") === "true", r = t.getAttribute("filtering") === "true";
+		t.querySelectorAll("thead tr:not(.col-indicator-rowgroup) th, thead tr:not(.col-indicator-rowgroup) td").forEach((e) => {
+			let t = e.getAttribute("filtering") === "true" || r || n;
+			e.setAttribute("filtering", t ? "true" : "false"), t && e.appendChild(document.createElement("nine-table-filter-button"));
+		});
+	}
+	static #l(e) {
+		e.querySelectorAll("thead th, thead td").forEach((t) => {
+			if (t.getAttribute("collapsible") !== "true" && t.getAttribute("expandable") !== "true") return;
+			let n = parseInt(t.dataset.col, 10), r = t.colSpan || 1, i = e.querySelector(`colgroup col[data-col="${n}"]`), a = i && parseInt(i.getAttribute("width"), 10) || 100;
+			(!t.dataset.expandWidth || parseInt(t.dataset.expandWidth, 10) <= 16) && (t.dataset.expandWidth = String(a > 16 ? a : 100));
+			let o = t.querySelector("nine-table-col-expand");
+			if (o || (o = document.createElement("nine-table-col-expand"), t.insertBefore(o, t.firstChild)), t.getAttribute("collapsed") === "true") {
+				o.classList.add("collapsed"), o.classList.remove("expand"), o.setAttribute("collapsed", "true"), t.style.color = "transparent";
+				let i = Math.max(10, Math.floor(16 / r));
+				if (!isNaN(n)) for (let t = 0; t < r; t++) {
+					let r = e.querySelector(`colgroup col[data-col="${n + t}"]`);
+					r && (r.setAttribute("width", i), r.style.width = `${i}px`);
+				}
+			} else o.classList.remove("collapsed"), o.classList.add("expand"), o.setAttribute("collapsed", "false"), t.style.color = "";
+		});
+	}
+	static #u(e, t) {
+		let n = e.getAttribute("row-indicator") === "true" ? 48 : 0, r = e.querySelector("colgroup"), i = document.createElement("col");
+		i.setAttribute("fixed", "left"), i.setAttribute("width", n), i.style.width = `${n}px`, r.prepend(i), e.querySelectorAll("thead, tbody, tfoot").forEach((e) => {
+			let t = Array.from(e.querySelectorAll("tr"));
+			if (t.length === 0) return;
+			let n = t[0], r = document.createElement("th");
+			r.className = "row-indicator", r.setAttribute("cell-type", "row-indicator"), t.length > 1 && (r.rowSpan = t.length), n.insertBefore(r, n.firstElementChild);
+		});
+	}
+	static #d(e) {
+		e.querySelectorAll("th[data-col], td[data-col]").forEach((t) => {
+			let n = parseInt(t.getAttribute("data-col"), 10);
+			if (isNaN(n)) return;
+			let r = parseInt(t.getAttribute("colspan") || t.colSpan, 10) || 1, i = 0;
+			for (let t = 0; t < r; t++) {
+				let r = n + t, a = e.querySelector(`colgroup col[data-col="${r}"]`);
+				a && (i += parseInt(a.getAttribute("width"), 10) || 100);
+			}
+			if (i > 0) {
+				let e = `${i}px`;
+				t.style.width = e, t.style.minWidth = e, t.style.maxWidth = e;
+			}
+		});
+	}
+}, M = class extends HTMLElement {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f = { table: null };
+	#p;
+	static SCROLLBAR_SIZE = 16;
+	constructor() {
+		super(), this.#t = this.getRootNode().host, this.#n = new _(this);
+	}
+	connectedCallback() {
+		this.#b();
+	}
+	get index() {
+		return this.#e;
+	}
+	get colResizer() {
+		return this.#a;
+	}
+	get filtering() {
+		return this.#l;
+	}
+	get grouping() {
+		return this.#u;
+	}
+	get colMover() {
+		return this.#o;
+	}
+	get colFix() {
+		return this.#s;
+	}
+	get rowManager() {
+		return this.#n;
+	}
+	get selection() {
+		return this.#r;
+	}
+	get navigation() {
+		return this.#i;
+	}
+	get templateLength() {
+		return this.#f.tbody.tr.length || 0;
+	}
+	get elements() {
+		return this.#p;
+	}
+	get isAutoFitCol() {
+		let e = this.getAttribute("auto-fit-col") === "true" || this.#t?.getAttribute("auto-fit-col") === "true", t = this.#f.table?.getAttribute("auto-fit-col") === "true";
+		return e || t;
+	}
+	get sourceTable() {
+		return this.#f.table;
+	}
+	get source() {
+		return this.#f;
+	}
+	get #m() {
+		return this.#t.hasAttribute("simple") || this.#t.getAttribute("theme") === "simple";
+	}
+	recompileAndRefresh() {
+		this.#f.table && (v.recompile(this.#f.table), [
+			"left",
+			"right",
+			"body"
+		].forEach((e) => {
+			[
+				"header",
+				"body",
+				"footer"
+			].forEach((t) => {
+				let n = this.querySelector(`.ng-sheet-${t} .ng-container-${e}`);
+				n && n.querySelectorAll("table").forEach((e) => e.remove());
+			});
+		}), this.#v(), this.#_(), this.#n.initialize(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar")?.refresh(), requestAnimationFrame(() => {
+			this.#_(), this.#n?.refresh();
+		}));
+	}
+	refreshLayout() {
+		requestAnimationFrame(() => {
+			n.log("*************************", this.classList, this.#f.table), this.classList.contains("active") && this.#f.table && (this.#_(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar")?.refresh(), this.#h(), this.#a?.refreshLayout(), this.#n?.refresh());
+		});
+	}
+	#h = () => {
+		let e = this.querySelector(".ng-container-body thead"), t = this.querySelector(".nodata-overlay");
+		t.style.top = `${e.offsetHeight}px`, n.log("***************************************", e), n.log(e.offsetHeight);
+	};
+	get view() {
+		return !this.#d && this.#t?.data && (this.#d = new A(this)), this.#d;
+	}
+	invalidate = () => {
+		this.view.refresh(), this.#n.refresh(!0), this.isAutoFitCol && this.autoFit(!0);
+	};
+	autoFit = (e = !0) => {
+		requestAnimationFrame(() => {
+			this.#g?.(e);
+		});
+	};
+	#g = (e = !0) => {
+		n.log("***************** autoFit", this);
+		let t = this.querySelector(".ng-sheet-body .ng-container-body");
+		if (!t) return;
+		let r = this.querySelector(".ng-container-body table colgroup");
+		if (r) {
+			if (e) {
+				this.setAttribute("auto-fit-col", "true");
+				let e = t.clientWidth;
+				if (e <= 0) return;
+				let i = 0, a = [];
+				r.querySelectorAll("col").forEach((e) => {
+					let t = e.getAttribute("data-col");
+					if (this.querySelector(`thead th[data-col="${t}"]`)?.getAttribute("collapsed") === "true") a.unshift({
+						globalColIndex: t,
+						width: 16,
+						isCollapsed: !0
+					}), n.log(`[AutoFit Col] Index ${t}: COLLAPSED (forced 16px)`);
+					else {
+						let r = parseInt(e.getAttribute("width"), 10) || 100;
+						a.push({
+							globalColIndex: t,
+							width: r,
+							isCollapsed: !1
+						}), i += r, n.log(`[AutoFit Col] Index ${t}: NORMAL (original width: ${r}px)`);
+					}
+				}), n.log(`[AutoFit] Total Original Width of Normal Cols: ${i}px`);
+				let o = a.filter((e) => e.isCollapsed).reduce((e, t) => e + t.width, 0), s = Math.max(0, e - o);
+				if (n.log(`[AutoFit] Collapsed Total Width: ${o}px | Available Width for Normal Cols: ${s}px`), i > 0 && a.length > 0) {
+					let t = 0, r = a.map((e) => {
+						if (e.isCollapsed) return {
+							globalColIndex: e.globalColIndex,
+							remainder: 0,
+							width: 16
+						};
+						let n = e.width * s / i, r = Math.max(30, Math.floor(n));
+						return t += r, {
+							globalColIndex: e.globalColIndex,
+							remainder: n - Math.floor(n),
+							width: r
+						};
+					}), o = s - t;
+					n.log(`[AutoFit] Initial Allocated Total: ${t}px | Remainder Pixels to distribute: ${o}`);
+					let c = r.filter((e) => !a.find((t) => t.globalColIndex === e.globalColIndex)?.isCollapsed);
+					if (o > 0 && c.length > 0) {
+						c.sort((e, t) => t.remainder - e.remainder);
+						for (let e = 0; e < o; e++) c[e % c.length].width += 1;
+					} else if (o < 0 && c.length > 0) {
+						c.sort((e, t) => e.remainder - t.remainder);
+						for (let e = 0; e < Math.abs(o); e++) {
+							let t = c[e % c.length];
+							t.width > 30 && --t.width;
+						}
+					}
+					let l = r.reduce((e, t) => e + t.width, 0);
+					n.log(`[AutoFit Verification] Target Container Width: ${e}px | Sum of All Calculated Cols: ${l}px`), e === l ? n.log("✅ [AutoFit Success] 완벽하게 일치합니다!") : n.log(`⚠️ [AutoFit Mismatch Warning!] 오차 발생: ${e - l}px 차이가 납니다.`), r.forEach(({ globalColIndex: e, width: t }) => {
+						n.log(`[AutoFit Apply] Col Index ${e} -> ${t}px`), this.#a?.setColumnWidth(e, t, "body");
+					});
+				}
+			} else this.removeAttribute("auto-fit-col");
+			this.querySelector("nine-table-hscrollbar")?.refresh();
+		}
+	};
+	generate = (e, t) => {
+		e.style.display = "none", this.#e = t, j.initializeTable(this.#t, e), e.style.display = "", this.#f = {
+			table: v.compile(e),
+			tbody: { tr: e.querySelectorAll("tbody tr") }
+		}, this.#v(), this.#_(), this.#S(), this.#w(), [
+			"left",
+			"body",
+			"right"
+		].forEach((e) => {
+			let t = `.ng-container-${e}`;
+			this.#p[e] = {
+				thead: this.querySelector(`${t} thead`),
+				tbody: {
+					head: this.querySelector(`${t} tbody.head`),
+					body: this.querySelector(`${t} tbody.body`),
+					foot: this.querySelector(`${t} tbody.foot`)
+				},
+				tfoot: this.querySelector(`${t} tfoot`)
+			};
+		}), this.#n.initialize(), this.isAutoFitCol ? this.autoFit(!0) : this.querySelector("nine-table-hscrollbar").refresh(), this.#u.initialize(), this.loaded = !0;
+	};
+	#_ = () => {
+		this.isAutoFitCol, [
+			"left",
+			"right",
+			"body"
+		].forEach((e) => {
+			let t = this.querySelectorAll(`.ng-container-${e}`);
+			if (t.length === 0) return;
+			let n = t[0].querySelector("table");
+			if (!n) return;
+			let r = 0;
+			n.querySelectorAll("col").forEach((e) => {
+				let t = parseInt(e.getAttribute("width"), 10);
+				isNaN(t) || (r += t);
+			}), t.forEach((t) => {
+				let n = t.querySelectorAll("table");
+				e === "body" ? (t.style.flex = "1", n.forEach((e) => {})) : (t.style.flex = `0 0 ${r}px`, t.style.width = `${r}px`, t.style.minWidth = `${r}px`, t.style.maxWidth = `${r}px`, n.forEach((e) => {}));
+			});
+		});
+	};
+	#v = () => {
+		[
+			{
+				selector: ".ng-container-left",
+				type: "left"
+			},
+			{
+				selector: ".ng-container-body",
+				type: null
+			},
+			{
+				selector: ".ng-container-right",
+				type: "right"
+			}
+		].forEach(({ selector: e, type: t }) => {
+			this.querySelector(`.ng-sheet-body ${e}`).appendChild(this.#y(t));
+		});
+	};
+	#y = (e) => {
+		let t = this.#f.table.cloneNode(!0);
+		return e === "left" ? t.querySelectorAll("col, th, td").forEach((e) => {
+			e.getAttribute("fixed") !== "left" && e.remove();
+		}) : e === "right" ? t.querySelectorAll("col, th, td").forEach((e) => {
+			e.getAttribute("fixed") !== "right" && e.remove();
+		}) : t.querySelectorAll("[fixed=left], [fixed=right]").forEach((e) => {
+			e.remove();
+		}), t;
+	};
+	getRowHeight = () => this.#n.getRowHeight();
+	getViewHeight = () => (this.#p.content.offsetHeight || 0) - ((this.#p.body.thead?.offsetHeight || 0) + (this.#p.body.tfoot?.offsetHeight || 0) + (this.#p.body.tbody.head.offsetHeight || 0));
+	isLastRow = () => {
+		let e = this.querySelector(".ng-sheet-body"), t = this.querySelector(".ng-container-body tbody.body"), r = this.#p.body.tfoot?.offsetHeight || 0, i = e.getBoundingClientRect().bottom, a = t.getBoundingClientRect().bottom;
+		return n.log(i, a, r), i - r >= a;
+	};
+	scrollToX = (e) => {
+		let t = this.querySelector(".ng-sheet-body .ng-container-body");
+		t && (t.scrollLeft = e);
+	};
+	scrollToY = (e) => {
+		let t = this.querySelector(".ng-sheet-body");
+		t && (t.scrollTop = e);
+	};
+	#b = () => {
+		this.#x(), this.#r = new y(this), this.#i = new b(this), this.#a = new S(this), this.#o = new w(this), this.#s = new T(this), this.#d = new A(this), this.#l = new O(this), this.#u = new h(this), this.#m || (this.#c = new k(this)), this.#p.mainBody.addEventListener("scroll", () => {
+			this.querySelector("nine-table-hscrollbar").refresh();
+		});
+	};
+	#x = () => {
+		this.innerHTML = "\n            <div class=\"ng-sheet-body\">\n                <div class=\"ng-sheet-body-content\">\n                    <div class=\"ng-container-left\"></div>\n                    <div class=\"ng-container-body\"></div>\n                    <div class=\"ng-container-right\"></div>\n                </div>\n                <div class=\"ng-virtual-height-holder\"></div>\n            </div>\n\n            <div class=\"nodata-overlay\">Data Not Found</div>\n\n            <!-- [Grid Row 1, Col 2] 세로 스크롤바 -->\n            <nine-table-vscrollbar></nine-table-vscrollbar>\n\n            <!-- [Grid Row 2, Col 1] 가로 스크롤바 -->\n            <nine-table-hscrollbar></nine-table-hscrollbar>\n\n            <!-- [Grid Row 2, Col 2] 우하단 엣지 -->\n            <div class=\"scroll-edge\"></div>\n            \n            <!-- 리사이저 및 드래그 패널들 -->\n            <nine-table-col-resizer-panel></nine-table-col-resizer-panel>\n            <!--\n            <div class=\"ng-col-resizer-panel\">\n                <div class=\"resizer-overlay\">\n                    <span class=\"size-badge\">0px</span>\n                </div>\n            </div> ->\n            \n            <div class=\"ng-col-mover-grip\"></div>\n            <div class=\"ng-col-mover-indi\"></div>\n        ", this.#p = {
+			mainBody: this.querySelector(".ng-sheet-body .ng-container-body"),
+			hscrollbar: this.querySelector("nine-table-hscrollbar"),
+			vscrollbar: this.querySelector("nine-table-vscrollbar"),
+			content: this.querySelector(".ng-sheet-body .ng-sheet-body-content"),
+			scrollHolder: this.querySelector(".ng-sheet-body .ng-virtual-height-holder")
+		}, n.log("444*****************");
+	};
+	#S = () => {
+		n.log("**********************", "#syncHeaderAndFooterHeights");
+		let e = this.querySelector(".ng-container-left table"), t = this.querySelector(".ng-container-body table"), r = this.querySelector(".ng-container-right table"), i = Array.from(e.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")), a = Array.from(t.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")), o = Array.from(r.querySelectorAll("thead tr:not(.col-indicator-rowgroup)"));
+		this.#C(i, a, o);
+		let s = Array.from(e.querySelectorAll("tfoot tr")), c = Array.from(t.querySelectorAll("tfoot tr")), l = Array.from(r.querySelectorAll("tfoot tr"));
+		this.#C(s, c, l);
+	};
+	#C = (e, t, r) => {
+		setTimeout(() => {
+			let i = Math.max(e.length, t.length, r.length);
+			n.log(this.#t);
+			for (let a = 0; a < i; a++) {
+				n.log(i);
+				let o = [
+					e[a]?.getBoundingClientRect().height || 0,
+					t[a]?.getBoundingClientRect().height || 0,
+					r[a]?.getBoundingClientRect().height || 0
+				], s = Math.max(...o);
+				n.log(o, s), s > 0 && (e[a] && (e[a].style.height = `${s}px`), t[a] && (t[a].style.height = `${s}px`), r[a] && (r[a].style.height = `${s}px`));
+			}
+		});
+	};
+	#w = () => {
+		let e = this.querySelector(".ng-sheet-body");
+		if (!e) return;
+		let t = null;
+		e.addEventListener("mouseover", (n) => {
+			let r = n.target.closest("tr");
+			if (!r || !r.dataset.row && r.dataset.row !== "0") return;
+			let i = r.dataset.row;
+			t !== i && (t = i, e.querySelectorAll(`tr[data-row="${i}"]`).forEach((e) => {
+				e.classList.add("hover");
+			}));
+		}), e.addEventListener("mouseout", (n) => {
+			let r = n.target.closest("tr");
+			if (!r) return;
+			let i = n.relatedTarget;
+			r.contains(i) || (e.querySelectorAll("tr.hover").forEach((e) => {
+				e.classList.remove("hover");
+			}), t = null);
+		});
+	};
+	disconnectedCallback() {
+		this.#a?.destroy(), this.#o?.destroy(), this.innerHTML = "";
+	}
+};
+customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", M);
+// src/layout/core/LayoutManager.js
+var N = class {
+	#e;
+	constructor(e) {
+		this.#e = e, this.#t();
+	}
+	#t = () => {
+		this.#r(), new ResizeObserver((e) => {
+			for (let t of e) this.#e.getAttribute("auto-height") === "true" && this.#n();
+		}).observe(this.#e);
+	};
+	set loading(e) {
+		e ? this.#e.classList.add("loading") : this.#e.classList.remove("loading");
+	}
+	#n = () => {
+		let e = Array.from(this.#e.shadowRoot.querySelectorAll("nine-table-sheet.active"));
+		if (e.length === 0) return;
+		let t = parseInt(this.#e.getAttribute("max-display-row"), 10) || 10, n = Math.max(...e.map((e) => e.getRowHeight())), r = this.#e.shadowRoot.querySelector("nine-table-toolbar"), i = this.#e.shadowRoot.querySelector("nine-table-sheets-footer"), a = r ? r.getBoundingClientRect().height : 0, o = i ? i.getBoundingClientRect().height : 0, s = M.SCROLLBAR_SIZE, c = t * n + a + o + s;
+		this.#e.style.height = `${c}px`;
+	};
+	#r = () => {
+		let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = this.#e.getAttribute("auto-height") === "true", r = e.length, i = e.map((e, t) => {
+			let n = t === 0 ? "active" : "", i = e.id || `sheet${t + 1}`;
+			return `<nine-table-sheet class="${n}" data-index="${t}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (t < r - 1 ? `<nine-splitter class="h" data-split-index="${t}"></nine-splitter>` : "");
+		}).join("");
+		n.log("Welcome nine-table", "0.2.2");
+		let a = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/table@0.2.2/dist/css/nine-table.css\";"];
+		nine["nine-table"] && nine["nine-table"].cssFile && a.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
+            <style>
+                ${a.join("\n")}
+            </style>
+            
+            <nine-table-toolbar></nine-table-toolbar>
+
+            <nine-table-body>
+                <nine-table-summary></nine-table-summary>
+                <div class="ng-loading-bar"></div>
+                <nine-table-sheets>
+                    <nine-table-sheets-body>
+                        ${i}
+                    </nine-table-sheets-body>
+                    <nine-table-sheets-footer></nine-table-sheets-footer>
+                </nine-table-sheets>
+                <nine-table-analysis></nine-table-analysis>
+            </nine-table-body>
+            <nine-table-footer></nine-table-footer>
+        `, this.#e.shadowRoot.querySelectorAll("nine-table-sheet").forEach((n, r) => {
+			e[r] && setTimeout(() => {
+				n.generate(e[r], r), t && this.#n();
+			});
+		});
+	};
+}, P = class {
+	#e;
+	#t;
+	#n = /* @__PURE__ */ new Map();
+	constructor(e) {
+		this.#e = e, this.#t = e.fields.get();
+	}
+	rewriteExpr(e) {
+		return !e || !this.#t.length ? e : e.replace(/data\.([a-zA-Z_$][\w$]*)/g, (e, t) => {
+			let n = this.#t.indexOf(t);
+			return n >= 0 ? `rowItem.v[${n}]` : e;
+		});
+	}
+	precompile(e) {
+		return e && this.rewriteExpr(e);
+	}
+	evaluate(e, t, n = 0) {
+		if (e == null) return "";
+		try {
+			let r = String(e).trim(), i = this.rewriteExpr(r);
+			if (i.includes("data.") || i.includes("rowItem.v") || i.includes("host.") || i.includes("(")) {
+				let e = this.#n.get(i);
+				return e || (e = Function("rowItem", "row", "host", `
+                        const data = rowItem;
+
+                        if (!data && !host) return "";
+                        return ${i};
+                    `), this.#n.set(i, e)), e(t, n, this.#e);
+			}
+			return i;
+		} catch {
+			return e;
+		}
+	}
+}, F = class extends HTMLElement {
+	#e;
+	#t;
+	#n;
+	#r = 0;
+	constructor() {
+		super(), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this);
+	}
+	connectedCallback() {
+		setTimeout(() => {
+			this.#r = this.querySelectorAll("table")?.length, this.fields = new s(this), this.exprEngine = new P(this), this.#a(), this.#n = new N(this), this.#i();
+		});
+	}
+	disconnectedCallback() {
+		n.log("NineTable disconnected.");
+	}
+	#i = () => {
+		let e = 0, t = setInterval(() => {
+			e++;
+			let n = this.shadow.querySelectorAll("nine-table-sheet");
+			if (e >= 50 && clearInterval(t), n.length >= this.#r) {
+				let e = 0;
+				n.forEach((t) => {
+					t.loaded && e++;
+				}), e >= this.#r && (clearInterval(t), this.loaded = !0, this.dispatchEvent(new CustomEvent(r.EVENT.LOAD, {
+					bubbles: !0,
+					detail: { target: this }
+				})));
+			}
+		}, 100);
+	};
+	get shadow() {
+		return this.#e;
+	}
+	get dataManager() {
+		return this.#t;
+	}
+	get data() {
+		return this.#t.data;
+	}
+	get row() {
+		return this.#t.row;
+	}
+	setData(e) {
+		this.#t.data.set(e), this.refresh();
+	}
+	refresh() {
+		this.activeSheet?.invalidate();
+	}
+	set loading(e) {
+		this.#n && (this.#n.loading = e);
+	}
+	rerenderer() {
+		this.activeSheet?.querySelectorAll("tbody.body th,tbody.body td").forEach((e) => {
+			Array.from(e.children).find((e) => e.tagName.toLowerCase().startsWith("cell-") && typeof e.rerenderer == "function")?.rerenderer();
+		});
+	}
+	sheet = (e) => {
+		if (e === null || e < 0) return this.activeSheet;
+		let t = Array.from(this.shadow.querySelectorAll("nine-table-sheet"));
+		return typeof e == "number" ? t[e] || null : typeof e == "string" ? this.shadow.querySelector(`nine-table-sheet#${e}, nine-table-sheet[data-sheet-id="${e}"]`) || null : t[0] || null;
+	};
+	get sheets() {
+		return Array.from(this.shadow.querySelectorAll("nine-table-sheet"));
+	}
+	get activeSheet() {
+		return this.shadow.querySelector("nine-table-sheet.active") || null;
+	}
+	#a() {
+		let e = /* @__PURE__ */ new Set();
+		this.querySelectorAll("[data-source]").forEach((t) => {
+			let n = t.getAttribute("data-source");
+			if (!n) return;
+			let r = n.matchAll(/(?:host\.)?([a-zA-Z0-9_$]+)\s*\(/g);
+			for (let t of r) {
+				let n = t[1];
+				n && n !== "host" && e.add(n);
+			}
+		}), e.forEach((e) => {
+			let t = null;
+			Object.defineProperty(this, e, {
+				set: (e) => {
+					t = e, this.rerenderer();
+				},
+				get: () => t,
+				configurable: !0,
+				enumerable: !0
+			});
+		});
+	}
+	execute = (e) => {
+		setTimeout(() => {
+			this.loading = !0, setTimeout(() => {
+				try {
+					e.call(this);
+				} finally {
+					this.loading = !1;
+				}
+			});
+		});
+	};
+};
+customElements.get("nine-table") || customElements.define("nine-table", F), customElements.get("nine-table-simple") || customElements.define("nine-table-simple", class extends F {
+	connectedCallback() {
+		this.setAttribute("theme", "simple"), super.connectedCallback();
+	}
+});
+// src/cell/core/BasicCellElement.js
+var I = class extends HTMLElement {
+	static _styleCache = /* @__PURE__ */ new Map();
+	static _customStyleCache = /* @__PURE__ */ new Map();
+	constructor() {
+		super();
+	}
+	applyBaseStyle() {
+		this.constructor.name;
+	}
+	connectedCallback() {}
+}, L = /* @__PURE__ */ new Map(), R = class extends I {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	constructor() {
+		super();
+	}
+	get host() {
+		return this.#e;
+	}
+	get sheet() {
+		return this.#t;
+	}
+	get cell() {
+		return this.#r;
+	}
+	get tr() {
+		return this.#n;
+	}
+	get attr() {
+		return this.#i;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#e = this.getRootNode().host, this.#r = this.closest("th,td"), this.#n = this.#r.closest("tr"), this.#t = this.#n.closest("nine-table-sheet"), this.#r.classList.add(this.tagName), this.#i = {};
+		for (let e = 0; e < this.#r.attributes.length; e++) {
+			let t = this.#r.attributes[e].name;
+			[
+				"text-align",
+				"class",
+				"cell-type",
+				"data-bind",
+				"data-expr",
+				"data-col",
+				"tabindex"
+			].includes(t) || (this.#i[t] = this.#r.attributes[e].value);
+		}
+		if (!this.#r) return;
+		let e = this.shadowRoot || this;
+		e.querySelectorAll("button, ng-expand-button").forEach((e) => {
+			e.addEventListener("click", () => {
+				let e = this.getAttribute("onbuttonclick") || this.getAttribute("onButtonClick") || this.#r?.getAttribute("onbuttonclick") || this.#r?.getAttribute("onButtonClick"), t = this.data, n = parseInt(this.#r.dataset.row, 10);
+				if (e && this.#e) {
+					e = e.replace("()", "");
+					let r = e.match(/^(\w+)\s*\(/)?.[1] || e;
+					typeof this.#e[r] == "function" ? this.#e[r].call(this.#e, t, n, this.#r) : typeof this.#e.exprFunction == "function" && this.#e.exprFunction(e).call(this, t, n);
+				}
+			});
+		});
+		let t = e.querySelector(".renderer");
+		t && this.getAttribute("link") === "true" && (t.classList.add("link"), t.addEventListener("click", () => {
+			let e = this.getAttribute("onlinkclick") || this.getAttribute("onLinkClick"), t = this.data, n = parseInt(this.#r.dataset.row, 10);
+			if (e && this.#e) {
+				e = e.replace("()", "");
+				let r = e.match(/^(\w+)\s*\(/)?.[1] || e;
+				typeof this.#e[r] == "function" ? this.#e[r].call(this.#e, t, n, this.#r) : typeof this.#e.exprFunction == "function" && this.#e.exprFunction(e).call(this, t, n);
+			}
+			this.#e?.dispatchEvent(new CustomEvent(ninegrid.EVENT.LINK_CLICK, {
+				detail: {
+					target: this.#r,
+					data: t,
+					currow: n
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}));
+	}
+	get data() {
+		let e = this.#n?.data;
+		if (!e) return null;
+		if (!e.v) return e;
+		let t = this.#e;
+		return new Proxy(e, { get(e, n) {
+			if (n === "__ng") return e.__ng;
+			if (n === "v") return e.v;
+			let r = t?.fields?.indexOf?.(n) ?? -1;
+			return r >= 0 ? e.v[r] : e[n];
+		} });
+	}
+	get value() {
+		if (!this.#r || !this.#n?.data) return "";
+		let e = this.#r.dataset?.bind;
+		if (!e) return "";
+		let t = this.#n.data;
+		if (t.v && Array.isArray(t.v)) {
+			let n = this.#e.fields.get().indexOf(e) ?? -1;
+			return n >= 0 ? t.v[n] ?? "" : "";
+		}
+		return t[e] ?? "";
+	}
+	set value(e) {
+		if (!this.#r || !this.#e?.data) return;
+		let t = parseInt(this.#r.dataset.row, 10), n = this.#r.dataset.bind;
+		if (isNaN(t) || !n) return;
+		let r = this.getAttribute("update-row-state") !== "false";
+		this.#e.data.setValue(t, n, e, r);
+	}
+	get row() {
+		return parseInt(this.#r?.dataset?.row, 10);
+	}
+	get index() {
+		return parseInt(this.#r?.dataset?.index, 10);
+	}
+	isValid() {
+		return !this.#r.classList.contains("invalid");
+	}
+	isInvalid() {
+		return !this.isValid();
+	}
+	getDisplayText = (e = "") => {
+		if (!this.#r || !this.#r.closest("tbody") || !this.#n.data) return e;
+		let t = this.#r.dataset.expr, n = this.#r.dataset.bind, r = parseInt(this.#r.dataset.row, 10);
+		if (t) try {
+			return this.#n.getAttribute("grouping") === "true" ? this.getGroupExprValue(t, this.#n.data, r, this.#r) : this.#e.exprEngine.evaluate(t, this.#n.data, r);
+		} catch (t) {
+			return console.trace(t), e;
+		}
+		return n ? this.value ?? e : e;
+	};
+	refresh() {
+		if (!this.#r || !this.#n) return;
+		let e = this.value;
+		return this.#r.classList.remove("invalid"), [
+			"color",
+			"background",
+			"background-color",
+			"visible",
+			"enable",
+			"validator"
+		].forEach((e) => {
+			let t = this.#i[e];
+			if (t) {
+				let n = this.#e.exprEngine.evaluate(t, this.#n.data, parseInt(this.#r.dataset.row, 10));
+				e === "validator" ? n || this.#r.classList.add("invalid") : e === "visible" ? this.style.display = n ? "" : "none" : e === "enable" ? (this.querySelectorAll("input, button, textarea, select").forEach((e) => {
+					e.disabled = !n;
+				}), n ? this.#r.removeAttribute("disabled") : this.#r.setAttribute("disabled", "true")) : this.#r.style[e] = n;
+			}
+		}), e;
+	}
+	getExprValue(e, t, n) {
+		return !this.#e || !this.#e.exprEngine || e == null || e === "" ? e : this.#e.exprEngine.evaluate(e, t, n);
+	}
+	getGroupExprValue = (e, t, n, r) => {
+		if (!e) return "";
+		try {
+			n = parseInt(n, 10);
+			let i = e.replace("()", "").trim();
+			if (this.#e && typeof this.#e[i] == "function") return this.#e[i].call(this, t, n, r);
+			let a = i.match(/^(\w+)\s*\(\s*([\w\-]*)\s*\)/);
+			if (a) {
+				let e = t[GROUP_IDX.CHILDREN], n = this.#e?.data?.getArray ? this.#e.data.getArray() : [], r = e ? e.map((e) => n[e]).filter(Boolean) : [], [, i, o] = a, s = this.#e;
+				switch (i.toLowerCase()) {
+					case "count": return r.length;
+					case "sum": {
+						let e = s?.fields?.indexOf?.(o) ?? -1;
+						return r.reduce((t, n) => {
+							let r = e >= 0 ? n.v?.[e] : n[o];
+							return t + (Number(r) || 0);
+						}, 0);
+					}
+					case "avg": {
+						if (r.length === 0) return 0;
+						let e = s?.fields?.indexOf?.(o) ?? -1;
+						return r.reduce((t, n) => {
+							let r = e >= 0 ? n.v?.[e] : n[o];
+							return t + (Number(r) || 0);
+						}, 0) / r.length;
+					}
+				}
+			}
+			if (this.#e && typeof this.#e.exprFunction == "function") return this.#e.exprFunction(e).call(this, t, n, this.#e.data);
+			if (e.includes("data.") || e.includes("childRecords") || e.includes("groupRecord")) {
+				let i = L.get("grp_" + e);
+				return i || (i = Function("groupRecord", "row", "cell", "host", `
+                   const indices = groupRecord[3]; // GROUP_IDX.CHILDREN = 3
+                   const allRecords = host?.data?.getArray ? host.data.getArray() : [];
+                   
+                   let childRecords = [];
+                   if (Array.isArray(indices)) {
+                      // indices가 숫자 인덱스 배열인지, rowid 문자열 배열인지 판별하여 안전하게 추출
+                      childRecords = indices.map(idx => {
+                         if (typeof idx === 'number') {
+                            return allRecords[idx];
+                         } else {
+                            // rowid 등 문자열 식별자인 경우 전체 배열에서 찾거나 dataManager 활용
+                            return allRecords.find(r => r?.__ng?.rowid === idx || r?.m?._?.[0] === idx);
+                         }
+                      }).filter(Boolean);
+                   }
+                   
+                   // 만약 위에서 못 찾았는데 host.grouping을 쓸 수 있다면 매니저 위임 시도
+                   if (childRecords.length === 0 && host?.grouping?.getChildrenRecords && groupRecord[0]) {
+                      childRecords = host.grouping.getChildrenRecords(groupRecord[0]);
+                   }
+
+                   const data = childRecords; // data.length 등을 쓸 수 있도록 호환
+                   return ${e};
+                `), L.set("grp_" + e, i)), i(t, n, r, this.#e);
+			}
+			return e;
+		} catch (t) {
+			return console.error("Group expr evaluation error:", e, t), e;
+		}
+	};
+}, z = class extends R {
+	get host() {
+		return super.host;
+	}
+	get sheet() {
+		return super.sheet;
+	}
+	get cell() {
+		return super.cell;
+	}
+	get tr() {
+		return super.tr;
+	}
+	get attr() {
+		return super.attr;
+	}
+	getExprValue(e, t, n, r) {
+		return super.getExprValue(e, t, n, r);
+	}
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	refresh() {
+		return super.refresh();
+	}
+	getExprValue = (e, t, n, r) => super.getExprValue(e, t, n, r);
+	isValid = () => super.isValid();
+	isInvalid = () => super.isInvalid();
+}, B = class extends z {
+	#e;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#n(), this.#e = this.querySelector("input"), this.#t();
+	}
+	refresh = () => {
+		let e = super.refresh();
+		this.#e.value = e;
+	};
+	#t = () => {
+		this.#e.addEventListener("input", (e) => {
+			if (this.#r) {
+				let t = Number(this.#r);
+				nine.getByteLength(e.target.value) > t && (e.target.value = nine.cut(e.target.value, t), this.value = e.target.value);
+			}
+		}), this.#e.addEventListener("change", (e) => {
+			this.value = e.target.value, this.sheet.rowManager.refresh(!0);
+		});
+	};
+	#n = () => {
+		this.innerHTML = "\n			<input type=\"text\" ondragstart=\"return false;\">\n		";
+	};
+	get #r() {
+		return this.cell.getAttribute("maxbyte") || this.cell.getAttribute("max-byte");
+	}
+};
+customElements.get("cell-input") || customElements.define("cell-input", B);
+// src/cell/cell-input-number.js
+var V = class extends z {
+	#e;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#t(), this.#e = this.querySelector("input"), this.#n();
+	}
+	#t = () => {
+		this.innerHTML = "\n          <input type=\"text\" ondragstart=\"return false;\">\n       ";
+	};
+	#n = () => {
+		this.#e.addEventListener("keydown", this.#i), this.#e.addEventListener("input", (e) => {
+			this.value = e.target.value, this.sheet.rowManager.refresh(!0);
+		}), this.#e.addEventListener("change", (e) => {
+			this.value = e.target.value, this.sheet.rowManager.refresh(!0);
+		});
+	};
+	refresh = () => {
+		let e = super.refresh();
+		this.#e.value = e, this.isValid() && this.#r();
+	};
+	#r = () => {
+		let e = this.#e.value;
+		if (e !== "" && e != null) {
+			let t = Number(e);
+			if (isNaN(t) || this.#o && t > Number(this.#o) || this.#a && t < Number(this.#a)) this.cell.classList.add("invalid");
+			else if (this.#s) {
+				let t = String(e), n = t.indexOf(".");
+				n >= 0 && t.substring(n + 1).length > Number(this.#s) && this.cell.classList.add("invalid");
+			}
+		}
+	};
+	#i = (e) => {
+		if ([
+			"Escape",
+			"Enter",
+			"Tab",
+			"Home",
+			"End",
+			"ArrowLeft",
+			"ArrowRight",
+			"PageUp",
+			"PageDown",
+			"Backspace",
+			"Delete"
+		].includes(e.code)) return;
+		let t = e.target, n = t.value, r = t.selectionStart, i = e.key;
+		if (i === "-" && (n.includes("-") || r !== 0)) {
+			e.preventDefault();
+			return;
+		}
+		if (i === ".") {
+			let t = Number(this.#s);
+			if (isNaN(t) || t <= 0 || n.includes(".")) {
+				e.preventDefault();
+				return;
+			}
+		}
+		let a = [];
+		this.#s && Number(this.#s) > 0 && a.push("."), (this.#a || Number(this.#a) > 0) && a.push("-");
+		let o = e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode >= 96 && e.keyCode <= 105;
+		if (!o && !a.includes(e.key)) e.preventDefault();
+		else {
+			if (this.#s && o && e.target.selectionStart == e.target.selectionEnd) {
+				let t = e.target.value, n = t.indexOf(".");
+				n >= 0 && e.target.selectionStart > n && t.substr(n + 1).length >= Number(this.#s) && e.preventDefault();
+			}
+			this.#c && nine.getByteLength(e.target.value) >= Number(this.#c) && e.target.selectionStart == e.target.selectionEnd && e.preventDefault();
+		}
+	};
+	get #a() {
+		return this.cell.getAttribute("min") || "";
+	}
+	get #o() {
+		return this.cell.getAttribute("max") || "";
+	}
+	get #s() {
+		return this.cell.getAttribute("scale") || "";
+	}
+	get #c() {
+		return this.cell.getAttribute("maxbyte") || this.cell.getAttribute("max-byte");
+	}
+};
+customElements.get("cell-input-number") || customElements.define("cell-input-number", V);
+// src/cell/cell-input-color.js
+var H = class extends z {
+	#e;
+	#t;
+	#n;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#i(), this.#e = this.querySelector("input[type=color]"), this.#t = this.querySelector("button"), this.#r();
+	}
+	#r = () => {
+		this.#t.addEventListener("click", () => {
+			this.#e.click();
+		}), this.#e.addEventListener("input", (e) => {
+			let t = e.target.value;
+			this.value = t, this.#o(t), this.sheet.rowManager.refresh(!0);
+		}), this.#e.addEventListener("change", (e) => {
+			let t = e.target.value;
+			this.value = t, this.#o(t), this.sheet.rowManager.refresh(!0);
+		});
+	};
+	#i = () => {
+		this.innerHTML = "\n          <input type=\"color\" ondragstart=\"return false;\">\n          <button tabindex=\"-1\" type=\"button\"></button>\n       ";
+	};
+	rerenderer = () => {
+		this.refresh();
+	};
+	#a = () => {
+		this.tr.data;
+		let e = this.cell.getAttribute("data-source");
+		if (e && (this.#n = super.getExprValue(e, this.tr.data, this.tr.dataset.row), this.querySelector("datalist")?.remove(), this.#n && Array.isArray(this.#n))) {
+			let e = `color-list-${Math.random().toString(36).substr(2, 9)}`, t = document.createElement("datalist");
+			t.id = e;
+			let n = document.createDocumentFragment();
+			this.#n.forEach((e) => {
+				if (e.value) {
+					let t = document.createElement("option");
+					t.value = e.value, n.appendChild(t);
+				}
+			}), t.appendChild(n), this.appendChild(t), this.#e.setAttribute("list", e);
+		}
+	};
+	refresh = () => {
+		if (!this.tr.data) return;
+		let e = super.refresh();
+		this.#a(), this.#e.value = e != null && e !== "" ? e : "#ffffff", this.isValid() && this.#o();
+	};
+	#o = () => {
+		let e = this.#e.value;
+		e !== "" && e != null && (this.#s(e) ? this.#n && Array.isArray(this.#n) && this.#n.length > 0 && (this.#n.some((t) => (t.value === void 0 ? t.code === void 0 ? "" : t.code : t.value).toLowerCase() === e.toLowerCase()) || this.cell.classList.add("invalid")) : this.cell.classList.add("invalid"));
+	};
+	#s = (e) => {
+		if (typeof e != "string" || e.length != 7 || !e.startsWith("#")) return !1;
+		var t = parseInt(e.substr(1, 2), 16), n = parseInt(e.substr(3, 2), 16), r = parseInt(e.substr(5, 2), 16);
+		return !(isNaN(t) || isNaN(n) || isNaN(r) || t < 0 || t > 255 || n < 0 || n > 255 || r < 0 || r > 255);
+	};
+};
+customElements.get("cell-input-color") || customElements.define("cell-input-color", H);
+// src/cell/cell-input-date.js
+var U = class extends z {
+	#e;
+	#t;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#n(), this.#e = this.querySelector("input"), this.#e.addEventListener("input", (e) => {
+			let t = e.target.value;
+			this.value = t, this.#e.classList.toggle("has-value", !!t), this.#r(t), super.sheet.rowManager.refresh(!0);
+		}), this.#e.addEventListener("change", (e) => {
+			let t = e.target.value;
+			this.value = t, this.#r(t), super.sheet.rowManager.refresh(!0);
+		});
+	}
+	#n = () => {
+		if (this.#t = this.cell.getAttribute("date-type") || "date", ![
+			"date",
+			"datetime-local",
+			"time",
+			"week",
+			"month"
+		].includes(this.#t)) throw `invalid type : ${this.#t}`;
+		let e = [];
+		for (let t = 0; t < this.cell.attributes.length; t++) [
+			"value",
+			"max",
+			"min",
+			"step"
+		].includes(this.cell.attributes[t].name) && e.push(`${this.cell.attributes[t].name}="${this.cell.attributes[t].value}"`);
+		this.innerHTML = `
+          <input
+             type="${this.#t}"
+             data-placeholder="${this.cell.getAttribute("placeholder") || "Select"}"
+             ${e.join(" ")}
+             required
+          />
+       `;
+	};
+	refresh = () => {
+		let e = super.refresh(), t = e;
+		if (t) switch (this.#t) {
+			case "date":
+				t = t.substr(0, 10);
+				break;
+			case "datetime-local":
+				t = t.substr(0, 16);
+				break;
+			case "time":
+				var n = new Date(e);
+				n != "Invalid Date" && !isNaN(n) && (t = ("00" + n.getHours()).slice(-2) + ":" + ("00" + n.getMinutes()).slice(-2));
+				break;
+			case "month":
+				var n = new Date(e);
+				n != "Invalid Date" && !isNaN(n) && (t = ("0000" + n.getFullYear()).slice(-4) + "-" + ("00" + (n.getMonth() + 1)).slice(-2));
+		}
+		this.#e.value = t || "", this.#e.classList.toggle("has-value", !!t), this.isValid() && this.#r(t);
+	};
+	#r = (e) => {
+		if (e !== "" && e != null) {
+			let t = this.#i(e);
+			t && (this.#a && e < this.#a && (t = !1), this.#o && e > this.#o && (t = !1)), t || super.cell.classList.add("invalid");
+		}
+	};
+	#i = (e) => {
+		if (typeof e != "string") return !1;
+		let t = !0;
+		switch (this.#t) {
+			case "date":
+			case "datetime-local":
+				let n = Number(e.substr(0, 4)), r = Number(e.substr(5, 2)), i = Number(e.substr(8, 2));
+				if (isNaN(n) || isNaN(r) || isNaN(i)) t = !1;
+				else if (r < 1 || r > 12 || i < 1 || i > 31) t = !1;
+				else if ([
+					4,
+					6,
+					9,
+					11
+				].includes(r) && i == 31) t = !1;
+				else if (r == 2) {
+					let e = n % 4 == 0 && (n % 100 != 0 || n % 400 == 0);
+					(i > 29 || i == 29 && !e) && (t = !1);
+				}
+		}
+		if (t) switch (this.#t) {
+			case "datetime-local":
+				var n = e.substr(10, 1), r = Number(e.substr(11, 2)), i = Number(e.substr(14, 2));
+				n == "T" ? (isNaN(r) || isNaN(i) || r < 0 || r > 23 || i < 0 || i > 59) && (t = !1) : t = !1;
+				break;
+			case "month":
+				var a = Number(e.substr(0, 4)), o = Number(e.substr(5, 2));
+				(isNaN(a) || isNaN(o) || o < 1 || o > 12) && (t = !1);
+				break;
+			case "week":
+				var a = Number(e.substr(0, 4)), s = e.substr(5, 1), c = Number(e.substr(6, 2));
+				s == "W" ? (isNaN(a) || isNaN(c) || c <= 0 || c > 53) && (t = !1) : t = !1;
+		}
+		return t;
+	};
+	get #a() {
+		return this.cell.getAttribute("min");
+	}
+	get #o() {
+		return this.cell.getAttribute("max");
+	}
+};
+customElements.get("cell-input-date") || customElements.define("cell-input-date", U);
+// src/cell/cell-checkbox.js
+var W = class extends z {
+	#e;
+	#t;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#r(), this.#e = this.querySelector("input"), this.#t = this.querySelector("span"), this.#n();
+	}
+	get dataSource() {
+		return [{
+			value: this.trueValue,
+			text: this.#a
+		}, {
+			value: this.falseValue,
+			text: this.#o
+		}];
+	}
+	#n = () => {
+		this.closest("thead") && this.#e.addEventListener("change", (e) => {
+			super.sheet.querySelector(`tbody.body [data-col="${super.cell.dataset.col}"] cell-checkbox`)?.selectAll(e.target.checked);
+		}), this.#e.addEventListener("change", (e) => {
+			this.closest("tbody") && (this.#s ? (this.selectAll(!1), this.value = this.trueValue) : this.value = e.target.checked ? this.trueValue : this.falseValue, this.sheet.rowManager.refresh(!0));
+		});
+	};
+	#r = () => {
+		let e = this.trueValue, t = this.cell.getAttribute("content") || "", n = this.#s ? `<input type="radio" value="${e}" />` : `<label><input type="checkbox" /><span>${t}</span></label>`;
+		this.innerHTML = `
+            ${n}
+        `;
+	};
+	refresh = () => {
+		let e = super.refresh();
+		this.#e.checked = e === this.trueValue, this.isValid() && this.#i(e);
+		let t = e === this.trueValue ? this.#a : e === this.falseValue ? this.#o : e;
+		this.#t && (this.#t.textContent = t);
+	};
+	#i = (e) => {
+		this.cell.classList.remove("invalid"), e !== "" && e != null && e !== this.trueValue && e !== this.falseValue && this.cell.classList.add("invalid");
+	};
+	selectAll = (e) => {
+		if (this.closest("thead")) return;
+		let t = this.host.data.getArray(), n = this.host.fields.indexOf(this.cell.dataset.bind);
+		if (!(n < 0)) {
+			for (let r = 0; r < t.length; r++) this.#c && super.getExprValue(this.#c, t[r], r, this.cell) === !1 || this.#l && super.getExprValue(this.#l, t[r], r, this.cell) === !0 || this.#u && super.getExprValue(this.#u, t[r], r, this.cell) === !1 || (t[r].v[n] = e ? this.trueValue : this.falseValue);
+			super.sheet.invalidate();
+		}
+	};
+	get trueValue() {
+		return this.cell.getAttribute("true-value") || "Y";
+	}
+	get falseValue() {
+		return this.cell.getAttribute("false-value") || "N";
+	}
+	get #a() {
+		return this.cell.getAttribute("true-text") || "";
+	}
+	get #o() {
+		return this.cell.getAttribute("false-text") || "";
+	}
+	get #s() {
+		return this.cell.getAttribute("is-radio") || !1;
+	}
+	get #c() {
+		return this.cell.getAttribute("enable") || !1;
+	}
+	get #l() {
+		return this.cell.getAttribute("readonly") || !1;
+	}
+	get #u() {
+		return this.cell.getAttribute("visible") || !1;
+	}
+};
+customElements.get("cell-checkbox") || customElements.define("cell-checkbox", W);
+// src/cell/cell-radio.js
+var G = class extends z {
+	#e;
+	#t;
+	#n = [];
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#a(), this.#i(), this.#r();
+	}
+	#r = () => {
+		this.cell.addEventListener("keydown", (e) => {
+			if (!(this.cell.hasAttribute("readonly") || this.cell.classList.contains("readonly")) && this.cell.getAttribute("disabled") !== "true" && e.code === "Space") {
+				e.preventDefault();
+				let t = -1;
+				this.#t.forEach((e, n) => {
+					if (this.value === e.getAttribute("value")) return t = n, !1;
+				}), t = t === this.#t.length - 1 ? 0 : t >= 0 ? t + 1 : 0, this.value = this.#t[t].getAttribute("value"), this.sheet.rowManager.refresh(!0);
+			}
+		});
+	};
+	#i = () => {
+		n.log("rendererRadio");
+		let e = this.cell.getAttribute("data-source");
+		if (e && (this.#n = super.getExprValue(e, this.tr.data, this.tr.dataset.row), this.#e.replaceChildren(), this.#n && Array.isArray(this.#n))) {
+			let e = document.createDocumentFragment();
+			this.#n.forEach((t) => {
+				let n = t[this.#s] === void 0 ? "" : t[this.#s], r = t[this.#c] === void 0 ? "" : t[this.#c], i = document.createElement("label"), a = document.createElement("input");
+				a.type = "radio", a.value = n;
+				let o = document.createElement("span");
+				o.textContent = r, i.appendChild(a), i.appendChild(o), e.appendChild(i);
+			}), this.#e.appendChild(e), this.#t = Array.from(this.querySelectorAll("input")), this.#t.forEach((e) => {
+				e.addEventListener("change", (e) => {
+					this.value = e.target.value, this.sheet.rowManager.refresh(!0);
+				});
+			});
+		}
+	};
+	#a = () => {
+		this.innerHTML = "\n			<div></div>\n        ", this.#e = this.querySelector("div");
+	};
+	rerenderer = () => {
+		this.#i(), this.refresh();
+	};
+	refresh = () => {
+		let e = super.refresh();
+		this.#t.forEach((t) => {
+			t.checked = e === t.value;
+		}), this.isValid() && this.#o();
+	};
+	#o = () => {
+		this.value !== null && this.value !== void 0 && this.value !== "" && Array.isArray(this.#n) && this.#n.findIndex((e) => this.value === e[this.#s]) < 0 && this.cell.classList.add("invalid");
+	};
+	get dataSource() {
+		return this.#n;
+	}
+	get #s() {
+		return this.cell.getAttribute("key-name") || "k";
+	}
+	get #c() {
+		return this.cell.getAttribute("value-name") || "v";
+	}
+};
+customElements.get("cell-radio") || customElements.define("cell-radio", G);
+// src/cell/cell-combo-panel.js
+var K = class extends HTMLElement {
+	#e;
+	#t;
+	#n;
+	#r = !1;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.#u(), this.#l();
+	}
+	#i = (e, t, r, i, a) => {
+		let o = this.querySelector("nine-table-simple");
+		if (!o || !e || e.length === 0) return;
+		let s = this.#e.getAttribute("items"), c = [];
+		c = s ? s.split(",").map((e) => e.trim()) : [r].filter(Boolean);
+		let l = c.length;
+		o.shadowRoot.querySelector(".ng-container-left").style.display = i ? "" : "none", o.shadowRoot.querySelectorAll("table colgroup col, tbody td").forEach((e, t) => {
+			n.log(e);
+			let r = parseInt(e.dataset.col, 10);
+			r >= 2 && (e.style.display = r - 2 >= l ? "none" : "");
+		});
+		let u = e.map((e) => {
+			let n = {
+				CHK: "N",
+				k: t && e[t] !== void 0 ? e[t] : e[0] === void 0 ? "" : e[0]
+			};
+			return c.forEach((t, r) => {
+				n[`tmp${r + 1}`] = e[t] === void 0 ? e[r] === void 0 ? "" : e[r] : e[t];
+			}), n;
+		});
+		if (o.data.set(u), i && this.#e.value) {
+			let e = String(this.#e.value).split(a || ",");
+			o.data.getValidData().forEach((t) => {
+				e.includes(String(t.v[1])) && (t.v[0] = "Y");
+			}), o.refreshData();
+		}
+	};
+	open = (e, t, r, i, a, o) => {
+		this.#e = e, this.#t = r, this.#n = i, this.#r = !0, n.log(/* @__PURE__ */ new Date()), this.classList.add("active");
+		let s = this.querySelector("nine-table-simple");
+		if (!s || !t) return;
+		this.querySelector(".search-input").value = "", this.querySelector("#chkAll").checked = !0, t.length > 10 ? this.classList.add("expand") : this.classList.remove("expand"), a ? this.classList.add("multi") : this.classList.remove("multi");
+		let c = e.closest("nine-table-sheet"), l = e.querySelector(".btn1");
+		if (!l || !c) return;
+		let u = l.getBoundingClientRect(), d = c.getBoundingClientRect(), f = u.left - d.left, p = u.bottom - d.top + 2, m = this.offsetWidth || 250, h = this.offsetHeight || 250;
+		if (f + m > d.width && (f = Math.max(0, d.width - m - 5)), f < 0 && (f = 5), p + h > d.height) {
+			let e = u.top - d.top - h - 2;
+			p = e >= 0 ? e : Math.max(0, d.height - h - 5);
+		}
+		this.style.left = `${f}px`, this.style.top = `${p}px`, n.log(/* @__PURE__ */ new Date()), setTimeout(() => {
+			n.log(/* @__PURE__ */ new Date()), this.#i(t, r, i, a, o), n.log(/* @__PURE__ */ new Date());
+			let e = s.shadowRoot.querySelector(".ng-container-body table tbody.body");
+			e.__hasClickEvent ||= (e.addEventListener("mousedown", (e) => {
+				n.log("==========================================", e.target), e.target.closest("tr") && (n.log("==========================================", a), a || this.#a(e));
+			}), !0), n.log(/* @__PURE__ */ new Date());
+		}, 100);
+	};
+	close = () => {
+		this.classList.remove("active"), this.#r = !1, this.#e && this.#e.cell && this.#e.cell.focus();
+	};
+	#a = (e) => {
+		let t = e.target.closest("nine-table-sheet"), n = e.target.closest("tr"), r = parseInt(n.dataset.row, 10), i = t.view.get(r);
+		this.#e.value = i.k, this.#e.sheet.rowManager.refresh(!0), this.close();
+	};
+	#o = () => {
+		let e = this.querySelector("nine-table-simple").data.getValidData(), t = [];
+		e.forEach((e) => {
+			e.v[0] === "Y" && t.push(e.v[1]);
+		}), this.#e.value = t.join(this.#e.getAttribute("multi-separator") || ","), this.#e.sheet.rowManager.refresh(!0), this.close();
+	};
+	#s = (e) => {
+		let t = this.querySelector("nine-table-simple"), n = e.target.checked ? "Y" : "N";
+		t.data.getValidData().forEach((e) => {
+			e.v[0] = n;
+		}), t.refreshData();
+	};
+	#c = (e) => {
+		let t = e.target.value.toLowerCase(), n = this.querySelector("nine-table-simple");
+		n.data.getValidDataNF().forEach((e) => {
+			let n = Object.values(e.v).some((e) => e != null && String(e).toLowerCase().includes(t));
+			e.__ng.filtered = !n;
+		}), n.data.resetRecords(), n.dataManager.viewRecords.reset();
+	};
+	get isOpen() {
+		return this.#r;
+	}
+	get targetCell() {
+		return this.#e;
+	}
+	#l = () => {
+		this.querySelector(".search-input").addEventListener("input", this.#c), this.querySelector("#btnOk").addEventListener("click", this.#o), this.querySelector("#chkAll").addEventListener("change", this.#s), document.addEventListener("mousedown", (e) => {
+			(e.composedPath ? e.composedPath() : []).includes(this) || this.close();
+		});
+	};
+	#u = () => {
+		this.innerHTML = "\n            <div class=\"head\">\n                <input type=\"text\" class=\"search-input\" placeholder=\"Search...\" />\n            </div>\n            \n            <nine-table-simple class=\"combo-list\" theme=\"simple\">\n                <table auto-fit-col=\"true\">\n                    <colgroup>\n                        <col width=\"30\" fixed=\"left\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"100\" />\n                        <col width=\"0\" />\n                    </colgroup>\n                    <tbody>\n                        <tr>\n                            <td cell-type=\"checkbox\" data-bind=\"CHK\"></td>\n                            <td data-bind=\"tmp1\" />\n                            <td data-bind=\"tmp2\" />\n                            <td data-bind=\"tmp3\" />\n                            <td data-bind=\"tmp4\" />\n                            <td data-bind=\"tmp5\" />\n                            <td data-bind=\"tmp6\" />\n                            <td data-bind=\"tmp7\" />\n                            <td data-bind=\"tmp8\" />\n                            <td data-bind=\"tmp9\" />\n                            <td data-bind=\"tmp10\" />\n                            <td data-bind=\"k\" />\n                        </tr>\n                    </tbody>\n                </table>\n            </nine-table-simple>\n            \n            <div class=\"footer\">\n                <div>\n                    <input id=\"chkAll\" type=\"checkbox\" checked>\n                    <label for=\"chkAll\">Select All</label>\n                </div>\n                <button id=\"btnOk\">OK</button>\n            </div>\n        ";
+	};
+};
+customElements.get("cell-combo-panel") || customElements.define("cell-combo-panel", K);
+// src/cell/cell-combo.js
+var q = class extends z {
+	#e;
+	#t = [];
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	constructor() {
+		super(), this.applyBaseStyle();
+	}
+	connectedCallback() {
+		this.#u(), super.connectedCallback(), this.#n = super.cell.getAttribute("key-name") || "k", this.#r = super.cell.getAttribute("value-name") || "v", this.#i = super.cell.getAttribute("multi") === "true", this.#a = super.cell.getAttribute("multi-separator") || ",", this.#s(), this.#c();
+	}
+	rerenderer = () => {
+		n.log("rerenderer"), this.#s(), this.refresh();
+	};
+	#s = () => {
+		if (!super.sheet || !super.cell) return;
+		let e = super.cell?.getAttribute("data-source");
+		e && (this.#t = super.getExprValue(e, super.tr.data, super.tr.dataset.row));
+	};
+	#c = () => {
+		this.querySelectorAll("button").forEach((e) => {
+			e.addEventListener("click", (e) => {
+				e.stopPropagation(), this.#l();
+			});
+		});
+	};
+	#l = () => {
+		n.log(/* @__PURE__ */ new Date()), this.#o || (this.#o = super.sheet.querySelector("cell-combo-panel"), this.#o || (this.#o = document.createElement("cell-combo-panel"), super.sheet.appendChild(this.#o))), n.log(/* @__PURE__ */ new Date()), this.#o.isOpen && this.#o.targetCell === this ? this.#o.close() : this.#o.open(this, this.#t, this.#n, this.#r, this.#i, this.#a), n.log(/* @__PURE__ */ new Date());
+	};
+	#u = () => {
+		this.innerHTML = "\n            <button class=\"btn1\" type=\"button\" tabindex=\"-1\">Select</button>\n            <button class=\"btn2\" type=\"button\" tabindex=\"-1\"></button>\n        ", this.#e = this.querySelector(".btn1");
+	};
+	refresh = () => {
+		let e = super.refresh();
+		return this.#e && (this.#e.textContent = this.#d() || "Select", this.#f()), e;
+	};
+	#d = () => {
+		if (!this.value || !Array.isArray(this.#t)) return "";
+		if (this.#i) {
+			let e = String(this.value).split(this.#a);
+			return this.#t.filter((t) => e.includes(String(t[this.#n]))).map((e) => e[this.#r]).join(this.#a);
+		}
+		{
+			let e = this.#t.find((e) => String(e[this.#n]) === String(this.value));
+			return e ? e[this.#r] : this.value;
+		}
+	};
+	#f = () => {
+		if (!super.cell || (super.cell.classList.remove("invalid"), this.value === null || this.value === void 0 || this.value === "" || !Array.isArray(this.#t))) return;
+		let e = this.#i ? String(this.value).split(this.#a) : [this.value];
+		for (let t of e) if (this.#t.findIndex((e) => String(t) === String(e[this.#n])) < 0) {
+			super.cell.classList.add("invalid");
+			break;
+		}
+	};
+	get dataSource() {
+		return this.#t;
+	}
+};
+customElements.get("cell-combo") || customElements.define("cell-combo", q);
+// src/cell/cell-renderer.js
+var J = class extends R {
+	#e;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#t(), this.#e = this.querySelector("span");
+	}
+	refresh = () => {
+		super.refresh(), this.cell.getAttribute("html") === "true" ? this.#e.innerHTML = this.getDisplayText() : this.#e.textContent = this.getDisplayText();
+	};
+	#t = () => {
+		this.innerHTML = "\n            <span class=\"wrapper\"></span>\n       ";
+	};
+};
+customElements.get("cell-renderer") || customElements.define("cell-renderer", J);
+// src/cell/cell-button.js
+var Y = class extends R {
+	#e;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.#n(), super.connectedCallback(), this.#e = this.querySelector("button"), this.#e.removeEventListener("click", this.#t), this.#e.addEventListener("click", this.#t);
+	}
+	#t = (e) => {
+		e.stopPropagation();
+		let t = parseInt(this.cell.dataset.row, 10), n = new CustomEvent(r.EVENT.CELL_BUTTON_CLICK, {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				originalEvent: e,
+				cell: this.cell,
+				row: t,
+				col: parseInt(this.cell.dataset.col, 10),
+				bind: this.dataset.bind,
+				data: this.host.data.get(t),
+				value: this.value
+			}
+		});
+		this.dispatchEvent(n);
+	};
+	refresh = () => {
+		let e = super.refresh ? super.refresh() : this.value;
+		this.#e.innerHTML = this.getDisplayText(e);
+	};
+	#n = () => {
+		let e = this.closest("th,td");
+		(parseInt(e.offsetHeight, 10) || 32) - 8, this.innerHTML = "\n            <button class=\"button\">...</button>\n        ";
+	};
+};
+customElements.get("cell-button") || customElements.define("cell-button", Y);
+// src/cell/cell-row-indicator.js
+var X = class extends R {
+	#e;
+	#t;
+	#n;
+	constructor() {
+		super(), this.applyBaseStyle();
+	}
+	connectedCallback() {
+		this.#r(), super.connectedCallback?.(), this.cell && (this.cell.removeAttribute("tabindex"), this.cell.dataset.bind = "rowState", this.cell.dataset.expr || (this.cell.dataset.expr = "data.__ng._[ninegrid.ROW.ORDER]"), this.cell.setAttribute("text-align", "center")), this.#e = this.querySelector(".ng-row-main"), this.#t = this.querySelector(".ng-row-sub"), this.#n = this.querySelector(".ng-row-status");
+	}
+	#r = () => {
+		this.innerHTML = "\n			<span class=\"ng-row-main\"></span>\n            <span class=\"ng-row-sub\"></span>\n            <span class=\"ng-row-status\"></span>\n        ";
+	};
+	refresh = () => {
+		if (!this.cell || !this.tr) return;
+		let e = this.row;
+		if (isNaN(e)) return;
+		let t = this.tr.data;
+		t && t.__ng && t.__ng.rowState;
+		let n = this.index + 1, r = n.toLocaleString();
+		if (n >= 1e4) {
+			let e = r.length - 4, t = r.substring(0, e + 1), n = r.substring(e + 1);
+			this.#e.innerHTML = `
+             <span class="ng-row-prefix">${t}</span>
+             <span class="ng-row-suffix">${n}</span>
+          `;
+		} else this.#e.innerHTML = `${r}`;
+		let i = !!this.sheet.querySelector("thead .asc,thead .desc"), a = !!this.sheet.querySelector("thead nine-table-filter-button.filtered");
+		this.#t.innerHTML = e, this.#t.style.display = i || a ? "" : "none";
+	};
+};
+customElements.get("cell-row-indicator") || customElements.define("cell-row-indicator", X);
+// src/col/col-expand.js
+var Z = class extends HTMLElement {
+	#e;
+	#t;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.#t = this.closest("th, td"), this.#e = this.closest("nine-table-sheet"), this.#t && (this.#t.style.position = "relative"), this.getAttribute("collapsed") === "true" || this.#t?.getAttribute("collapsed") === "true" ? requestAnimationFrame(() => {
+			this.collapse(!0);
+		}) : (this.classList.remove("collapsed"), this.classList.add("expand")), this.removeEventListener("click", this.#n), this.addEventListener("click", this.#n);
+	}
+	#n = (e) => {
+		e.preventDefault(), e.stopPropagation(), this.classList.contains("expand") ? this.collapse() : this.expand();
+	};
+	expand = () => {
+		if (!this.#e?.colResizer || !this.#t) return;
+		let e = parseInt(this.#t.dataset.col, 10), t = this.#t.colSpan || 1;
+		this.classList.remove("collapsed"), this.classList.add("expand"), this.#t.setAttribute("collapsed", "false"), this.#t.style.color = "";
+		let n = parseInt(this.#t.dataset.expandWidth, 10) || 100;
+		if (t === 1) this.#e.colResizer.setColumnWidth(e, n);
+		else {
+			let r = Math.max(30, Math.floor(n / t));
+			for (let n = 0; n < t; n++) this.#e.colResizer.setColumnWidth(e + n, r);
+		}
+		requestAnimationFrame(() => {
+			typeof this.#e.refreshLayout == "function" && this.#e.refreshLayout();
+		});
+	};
+	collapse = (e = !1) => {
+		if (!this.#e?.colResizer || !this.#t) return;
+		let t = parseInt(this.#t.dataset.col, 10), n = this.#t.colSpan || 1;
+		if (this.classList.contains("expand")) {
+			let e = this.#e.querySelector(`colgroup col[data-col="${t}"]`), r = e ? parseInt(e.getAttribute("width"), 10) : 0;
+			r > 16 && (this.#t.dataset.expandWidth = String(r * n));
+		}
+		if (this.classList.remove("expand"), this.classList.add("collapsed"), this.#t.setAttribute("collapsed", "true"), this.#t.style.color = "transparent", n === 1) this.#e.colResizer.setColumnWidth(t, 16);
+		else {
+			let e = Math.max(10, Math.floor(16 / n));
+			for (let r = 0; r < n; r++) this.#e.colResizer.setColumnWidth(t + r, e);
+		}
+		requestAnimationFrame(() => {
+			typeof this.#e.refreshLayout == "function" && this.#e.refreshLayout();
+		});
+	};
+	disconnectedCallback() {
+		this.removeEventListener("click", this.#n);
+	}
+};
+customElements.get("nine-table-col-expand") || customElements.define("nine-table-col-expand", Z);
+// src/menu/nine-table-menu.js
+var Q = class extends HTMLElement {
+	#e;
+	#t;
+	connectedCallback() {
+		let e = this.getRootNode();
+		this.#e = e instanceof ShadowRoot ? e.host : this.closest("nine-table") || e.host, this.#e ||= this.parentElement?.closest("nine-table") || this.assignedSlot?.closest("nine-table"), this.#e;
+	}
+	#n = (e) => {
+		let t = e.composedPath ? e.composedPath() : [], n = t.find((e) => e.tagName === "TH" || e.tagName === "TD");
+		if (!n) return;
+		let r = t.find((e) => e.tagName === "TABLE") || n.closest("table");
+		e.preventDefault(), e.stopPropagation(), this.openMenu(e.clientX, e.clientY, n, r);
+	};
+	#r(e) {
+		return e?.closest("nine-table-sheet") || this.#e.activeSheet || this.#e;
+	}
+	#i(e) {
+		let t = this.#r(e);
+		return t ? (t.colFix ||= new T(t), t.colFix) : null;
+	}
+	#a(e, t) {
+		let n = [], r = t?.id;
+		return Array.from(e.querySelectorAll(":scope > ul")).forEach((e) => {
+			let t = e.getAttribute("target-table");
+			if (!t || r && t === r) {
+				let t = this.#o(e);
+				n.push(...t);
+			}
+		}), n;
+	}
+	#o(e) {
+		let t = [];
+		return Array.from(e.children).forEach((e) => {
+			let n = e.tagName.toLowerCase();
+			if (n === "hr" || e.classList.contains("separator")) t.push({ type: "separator" });
+			else if (n === "li") {
+				let n = "", r = e.querySelector(":scope > span");
+				n = r ? r.textContent.trim() : Array.from(e.childNodes).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent.trim()).join("");
+				let i = e.querySelector(":scope > ul"), a = {
+					menuId: e.id || n,
+					name: n,
+					className: e.className || "",
+					disabled: e.hasAttribute("disabled") || e.getAttribute("disabled") === "true",
+					isCustom: !0
+				};
+				i && (a.items = this.#o(i)), t.push(a);
+			}
+		}), t;
+	}
+	#s(e, t, n) {
+		let r = this.getAttribute("use-default-menu") !== "false", i = [], a = this.#a(this, e);
+		a.length > 0 && i.push(...a);
+		let o = this.#i(n), s = o?.getFixState(n, e) ?? "none", c = t && (o?.canFixColumn(n, e) ?? !1), l = null;
+		l = s === "left" || s === "right" ? {
+			menuId: "unfix-column",
+			name: "Unfix Column",
+			className: "ng-menu-unfix-col",
+			disabled: !t
+		} : {
+			menuId: "fix-column",
+			name: "Fix Column",
+			className: "ng-menu-fix-col",
+			disabled: !c
+		}, r && i.push({ type: "separator" }, {
+			menuId: "sort",
+			name: "Sort",
+			className: "ng-menu-sort",
+			disabled: !t
+		}, l, { type: "separator" }, {
+			menuId: "filtering",
+			name: "Filtering",
+			className: "ng-menu-filtering"
+		}, {
+			menuId: "maximize",
+			name: "Maximize",
+			className: "maximize"
+		}, {
+			menuId: "export",
+			name: "Export",
+			className: "export",
+			items: [{
+				menuId: "export-excel",
+				name: "Excel",
+				className: "export-excel"
+			}, {
+				menuId: "export-pdf",
+				name: "PDF",
+				className: "export-pdf",
+				disabled: !0
+			}]
+		}, {
+			menuId: "properties",
+			name: "Options",
+			className: "options",
+			items: [
+				{
+					menuId: "show-title-bar",
+					name: "Title Bar Show/Hide",
+					className: "show-title-bar"
+				},
+				{
+					menuId: "show-status-bar",
+					name: "Status Bar Show/Hide",
+					className: "show-status-bar"
+				},
+				{
+					menuId: "auto-fit-col",
+					name: "Auto Fit Columns",
+					className: "auto-fit-col"
+				}
+			]
+		});
+		let u = [];
+		return i.forEach((e) => {
+			(e.type !== "separator" || u.length !== 0 && u[u.length - 1].type !== "separator") && u.push(e);
+		}), u.length > 0 && u[u.length - 1].type === "separator" && u.pop(), u;
+	}
+	openMenu(e, t, n, r) {
+		let i = this.#e.shadowRoot || this.#e;
+		this.#t || (this.#t = document.createElement("nine-table-menu-panel"), i.appendChild(this.#t));
+		let a = !!n.closest("thead"), o = this.#s(r, a, n);
+		this.#t.render(o, (e) => this.#l(e, n, r));
+		let s = this.#r(n);
+		this.#c(s), this.#t.openAt(e, t);
+	}
+	#c(e) {
+		if (!this.#t || !e) return;
+		let t = e.filtering?.isFiltering?.() || !1;
+		this.#t.toggleItemState("filtering", "on", t);
+		let n = this.#e.getAttribute("auto-fit-col") === "true";
+		this.#t.toggleItemState("auto-fit-col", "on", n);
+		let r = this.#e.getAttribute("show-title-bar") === "true";
+		this.#t.toggleItemState("show-title-bar", "on", r);
+	}
+	#l(e, t, n) {
+		let r = e.menuId, i = new CustomEvent("menu-click", {
+			detail: {
+				menuId: r,
+				targetCell: t,
+				targetTable: n,
+				originalEvent: e
+			},
+			bubbles: !0,
+			composed: !0
+		});
+		this.dispatchEvent(i);
+		let a = parseInt(t.dataset.col, 10), o = this.#r(t);
+		switch (r) {
+			case "fix-column":
+			case "unfix-column":
+				this.#i(t)?.executeFixToggle(r, t);
+				break;
+			case "sort":
+				isNaN(a) || o.sorting?.handleSortFromMenu?.(a, t);
+				break;
+			case "filtering":
+				o?.filtering?.toggle();
+				break;
+			case "auto-fit-col":
+				this.#e.setAttribute("auto-fit-col", this.#e.getAttribute("auto-fit-col") === "true" ? "false" : "true");
+				break;
+			case "show-title-bar": this.#e.setAttribute("show-title-bar", this.#e.getAttribute("show-title-bar") === "true" ? "false" : "true");
+		}
+		this.#t.close();
+	}
+	disconnectedCallback() {
+		this.#e?.removeEventListener("contextmenu", this.#n);
+	}
+};
+customElements.get("nine-table-menu") || customElements.define("nine-table-menu", Q);
+// src/menu/nine-table-menu-panel.js
+var $ = class extends HTMLElement {
+	#e;
+	#t = null;
+	constructor() {
+		super();
+	}
+	connectedCallback() {
+		this.style.position = "fixed", this.style.display = "none", this.style.zIndex = "99999", this.innerHTML = "\n            <div class=\"menu-wrapper\">\n                <ul class=\"menu-container\"></ul>\n            </div>\n        ";
+	}
+	render(e, t) {
+		this.#e = t;
+		let n = this.querySelector(".menu-container");
+		n && (n.innerHTML = "", this.#n(n, e), this.#r());
+	}
+	openAt(e, t, n = null) {
+		if (this.style.display = "block", n) {
+			let e = n.getBoundingClientRect(), r = e.right;
+			requestAnimationFrame(() => {
+				let n = this.querySelector(".menu-wrapper");
+				if (!n) return;
+				let i = n.getBoundingClientRect().width, a = r - i;
+				a < 0 && (a = e.left);
+				let o = n.getBoundingClientRect().height, s = t;
+				t + o > window.innerHeight && (s = t - o), this.style.left = `${a}px`, this.style.top = `${s}px`;
+			});
+		} else this.style.left = `${e}px`, this.style.top = `${t}px`, requestAnimationFrame(() => {
+			let n = this.querySelector(".menu-wrapper");
+			if (!n) return;
+			let r = n.getBoundingClientRect();
+			e + r.width > window.innerWidth && (this.style.left = `${e - r.width}px`), t + r.height > window.innerHeight && (this.style.top = `${t - r.height}px`);
+		});
+		this.#t && window.removeEventListener("pointerdown", this.#t), this.#t = (e) => {
+			!(e.composedPath ? e.composedPath() : []).includes(this) && !this.contains(e.target) && this.close();
+		}, setTimeout(() => {
+			window.addEventListener("pointerdown", this.#t);
+		}, 0);
+	}
+	close() {
+		this.style.display = "none", this.#t &&= (window.removeEventListener("pointerdown", this.#t), null);
+	}
+	toggleItemState(e, t, n) {
+		let r = this.querySelector(`li[menu-id="${e}"]`);
+		r && (n ? r.classList.add(t) : r.classList.remove(t));
+	}
+	#n(e, t) {
+		t.forEach((t) => {
+			if (t.type === "separator") {
+				let t = document.createElement("li");
+				t.className = "ng-menu-separator", e.appendChild(t);
+				return;
+			}
+			let n = document.createElement("li");
+			n.setAttribute("menu-id", t.menuId), n.className = `${t.className || ""} ${t.items ? "submenu" : ""} ${t.disabled ? "disabled" : ""}`.trim();
+			let r = document.createElement("span");
+			if (r.textContent = t.name, n.appendChild(r), t.items && t.items.length > 0) {
+				let e = document.createElement("ul");
+				e.className = "ng-menu-sublist", this.#n(e, t.items), n.appendChild(e);
+			}
+			e.appendChild(n);
+		});
+	}
+	#r() {
+		this.querySelectorAll("li[menu-id]").forEach((e) => {
+			e.addEventListener("click", (t) => {
+				if (t.stopPropagation(), e.classList.contains("disabled")) return;
+				let n = e.getAttribute("menu-id");
+				this.#e?.({
+					menuId: n,
+					target: e
+				}), this.close();
+			});
+		});
+	}
+	disconnectedCallback() {
+		this.close();
+	}
+};
+customElements.get("nine-table-menu-panel") || customElements.define("nine-table-menu-panel", $);
+export { r as NINE_TABLE };
+
+//# sourceMappingURL=nine-table.js.map