@ninebone/table 0.0.1

package/dist/css/nxTab.css

@@ -0,0 +1,193 @@
+:host {
+	position: relative;
+}
+:host(nx-tab.theme-1) {
+	.tabs {
+		--border-bottom: 1px solid #eee;
+		gap: 3px;
+	}
+	.tab-button {
+		color: #666;
+		font-weight: 500;
+		transform: translateY(1px);
+		z-index: 1;
+		--border-bottom: 1px solid #ccc;
+	}
+	.tab-button.active {
+		color: #666;
+		font-weight: 700;
+		border-bottom: 1px solid white;
+	}
+	.tab-pages {
+		border: 1px solid #ccc;
+	}
+}
+
+:host(.theme-2) {
+	.tabs {
+		border-bottom: 1px solid #eee;
+		gap: 40px;
+	}
+	.tab-button {
+		color: #666;
+		font-weight: 500;
+		border: none;
+	}
+	.tab-button.active {
+		color: green;
+		font-weight: 700;
+		border-bottom: 3px solid green;
+	}
+}
+
+:host(.theme-3) {
+	.tabs {
+		border-bottom: 1px solid #eee;
+		gap: 16px;
+		button {
+			display: block;
+		}
+	}
+	.tab-button {
+		color: #666;
+		font-weight: 500;
+		border: none;
+		padding: 4px;
+		font-size: 12px;
+	}
+	.tab-button.active {
+		color: green;
+		font-weight: 700;
+		border-bottom: 3px solid green;
+	}
+	.tab-pages {
+		border-bottom: 1px solid #f0f0f0;
+		height: 100%;
+	}
+	.tab-page {
+		padding: 4px 16px;
+		font-size: 12px;
+		display: flex;
+		justify-content: center;
+		align-items: stretch;
+		button.search {
+			margin-top: -4px;
+			margin-bottom: -4px;
+			margin-right: -16px;
+			cursor: pointer;
+		}
+	}
+}
+
+:host(.theme-4) {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+
+
+	.tabs {
+		border-bottom: 1px solid #eee;
+		gap: 16px;
+		button {
+			display: block;
+		}
+	}
+	.tab-button {
+		color: #666;
+		font-weight: 500;
+		border: none;
+		padding: 4px;
+		font-size: 12px;
+	}
+	.tab-button.active {
+		color: green;
+		font-weight: 700;
+		border-bottom: 3px solid green;
+	}
+	.tab-pages {
+		border-bottom: 1px solid #f0f0f0;
+		height: 100% !important;
+		div {
+			height: 100%;
+		}
+	}
+	.tab-page {
+		padding: 4px 0 0;
+		font-size: 12px;
+		display: flex;
+		justify-content: center;
+		align-items: stretch;
+		button.search {
+			margin-top: -4px;
+			margin-bottom: -4px;
+			margin-right: -16px;
+			cursor: pointer;
+		}
+	}
+}
+
+.tabs {
+	display: flex;
+	button {
+		display: none;
+		position: absolute;
+		--top: 2px;
+		right: 2px;
+		cursor: pointer;
+		width: 16px;
+		height: 16px;
+		border: none;
+		background-color: transparent;
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: auto;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
+		animation: rotate-out 0.3s ease-in-out forwards;
+	}
+}
+.tab-button {
+	padding: 8px;
+	border: 1px solid #ccc;
+	text-align: center;
+	outline: 0;
+	cursor: pointer;
+	transition: all 0.3s ease;
+}
+.tab-button:hover {
+	filter: brightness(80%);
+	--background-color: #777;            /* 진한 배경으로 강조 */
+	--box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 입체감 glow */
+	transform: scale(1.05);            /* 약간 확대 */
+}
+.tab-pages {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+	transition: height 0.5s ease-in-out;
+	transform: translateY(-1px);
+}
+.tab-page {
+	position: absolute;
+	width: 100%;
+	top: 0;
+	transition: left 0.5s ease-in-out;
+	padding: 16px;
+	box-sizing: border-box;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: left;
+}
+.tab-page.active {
+	left: 0;
+}
+.tab-page.exit-left {
+	left: -100%;
+}
+.tab-page.exit-right {
+	left: 100%;
+}
+
+
+

package/dist/css/nxTitle.css

@@ -0,0 +1,210 @@
+:host(nx-title) {
+
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	height: 0;
+
+	.wrapper {
+		display: flex;
+
+		.title-wrapper {
+			background: darkcyan;
+			--opacity: 0.3;
+			height: 24px;
+			display: flex;
+			align-items: center;
+			--font-weight: 700;
+			padding: 0 32px 4px;
+			--background-color: #666;
+			border-top: none;
+			border-bottom-right-radius: 8px;
+			border-bottom-left-radius: 8px;
+			--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+			--gap: 4px;
+			.title-icon {
+				display: none;
+				--width: 16px;
+				height: 16px;
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: auto;
+				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(200,200,200)" class="bi bi-grid" viewBox="0 0 16 16"><path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/></svg>');
+			}
+			span {
+				padding-left: 8px;
+				padding-right: 8px;
+				color: white;
+				font-weight: 700;
+				font-size: 14px;
+			}
+
+			.bar1, .bar8 {
+				display: none;
+				width: 4px;
+				height: 4px;
+				border-radius: 50%;
+				background: green;
+			}
+			.bar2, .bar7 {
+				display: none;
+				width: 32px;
+				height: 1px;
+				background: green;
+			}
+		}
+	}
+
+	/* Breadcrumb CSS */
+	.breadcrumb-container {
+		position: absolute;
+		right: 4px;
+		margin-top: 2px;
+		padding: 0px 4px;
+		font-size: 10px;
+		color: #777;
+		display: flex; /* 가로 정렬 */
+		align-items: center;
+		justify-content: flex-end; /* 오른쪽 정렬 */
+		--border-left: 2px solid #666;
+		border-right: 2px solid #666;
+	}
+	.breadcrumb-item {
+		white-space: nowrap; /* 줄바꿈 방지 */
+	}
+	.breadcrumb-separator {
+		margin: 0 5px;
+		color: #bbb;
+	}
+	.breadcrumb-current {
+		--font-weight: bold;
+		color: #333;
+	}
+
+	/* Title CSS (아이콘 및 텍스트 스타일) */
+	.title-wrapper {
+		display: flex;
+		align-items: center;
+		padding-bottom: 2px;
+		--border-bottom: 2px solid #eee;
+		--margin-bottom: 15px;
+	}
+	.title-icon {
+		margin-right: 10px;
+		font-size: 20px;
+		color: #333;
+		/* Font Awesome 등 외부 아이콘 라이브러리를 사용하는 경우 */
+		/* font-family: 'Font Awesome 5 Free'; */
+		/* font-weight: 900; */
+		/* content: '054'; */
+	}
+	.title-text {
+		font-size: 18px;
+		font-weight: bold;
+		color: #333;
+	}
+
+	a {
+		color: #007bff; /* 파란색 계열로 링크임을 강조 */
+		text-decoration: none; /* 기본 밑줄 제거 */
+		transition: color 0.3s, background-color 0.3s; /* 호버 효과를 부드럽게 */
+	}
+	/* 마우스 오버 시 */
+	a:hover {
+		color: #0056b3; /* 기본색보다 어둡게 변경 */
+		text-decoration: underline; /* 밑줄을 다시 추가하여 클릭 유도 */
+	}
+
+	/* 클릭 중일 때 */
+	a:active {
+		color: #004085; /* 더 어둡게 변경 */
+	}
+
+	/* 방문한 링크 */
+	a:visited {
+		color: #007bff; /* 방문한 링크는 다른 색으로 변경 */
+	}
+}
+
+
+:host(nx-title.sub) {
+
+	.wrapper {
+		display: flex; /* 아이콘과 텍스트를 한 줄에 정렬 */
+		justify-content: space-between;
+		align-items: flex-end;
+		--padding: 10px 15px; /* 내부 여백 */
+		border-bottom: 2px solid #eee; /* 아래쪽 구분선 */
+		margin-bottom: 15px; /* 아래쪽 여백 */
+	}
+
+
+	/* Breadcrumb CSS */
+	.breadcrumb-container {
+		padding: 0 4px 0 0;
+		--background-color: #f5f5f5;
+		--border-bottom: 1px solid #eee;
+		font-size: 10px;
+		color: #777;
+		display: flex; /* 가로 정렬 */
+		align-items: center;
+		justify-content: flex-end; /* 오른쪽 정렬 */
+		--margin-bottom: 15px; /* 제목과의 간격 */
+	}
+	.breadcrumb-item {
+		white-space: nowrap; /* 줄바꿈 방지 */
+	}
+	.breadcrumb-separator {
+		margin: 0 5px;
+		color: #bbb;
+	}
+	.breadcrumb-current {
+		--font-weight: bold;
+		color: #333;
+	}
+
+	/* Title CSS (아이콘 및 텍스트 스타일) */
+	.title-wrapper {
+		display: flex;
+		align-items: center;
+		padding-bottom: 2px;
+		--border-bottom: 2px solid #eee;
+		--margin-bottom: 15px;
+	}
+	.title-icon {
+		margin-right: 10px;
+		font-size: 20px;
+		color: #333;
+		/* Font Awesome 등 외부 아이콘 라이브러리를 사용하는 경우 */
+		/* font-family: 'Font Awesome 5 Free'; */
+		/* font-weight: 900; */
+		/* content: '054'; */
+	}
+	.title-text {
+		font-size: 18px;
+		font-weight: bold;
+		color: #333;
+	}
+
+	a {
+		color: #007bff; /* 파란색 계열로 링크임을 강조 */
+		text-decoration: none; /* 기본 밑줄 제거 */
+		transition: color 0.3s, background-color 0.3s; /* 호버 효과를 부드럽게 */
+	}
+	/* 마우스 오버 시 */
+	a:hover {
+		color: #0056b3; /* 기본색보다 어둡게 변경 */
+		text-decoration: underline; /* 밑줄을 다시 추가하여 클릭 유도 */
+	}
+
+	/* 클릭 중일 때 */
+	a:active {
+		color: #004085; /* 더 어둡게 변경 */
+	}
+
+	/* 방문한 링크 */
+	a:visited {
+		color: #007bff; /* 방문한 링크는 다른 색으로 변경 */
+	}
+}
+

package/dist/css/nxTitle2.css

@@ -0,0 +1,33 @@
+:host(nx-title2) {
+
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	border-bottom: 1px solid #ccc;
+
+	.left {
+		display: flex;
+		padding: 0 8px;
+		border-bottom: 2px solid green;
+		margin-bottom: -1px;
+		font-weight: bold;
+		color: green;
+		font-size: 16px;
+	}
+
+	nx-buttons {
+		padding-bottom: 2px;
+		padding-right: 4px;
+	}
+}
+
+:host(nx-title2.changed) .left span::after {
+	content: '*';
+	color: red;
+	font-size: 12px;
+	font-weight: normal;
+	margin-left: 4px;
+}
+
+
+

package/dist/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>태그 라이브러리 테스트</title>
+
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="../src/_back/etc/object-observe.js"></script>
+
+  <script type="module" src="../dist/bundle.cjs.js"></script>
+
+  <script>
+    //ninegrid.cssPath = "/src/css";
+    //console.log(ninegrid);
+  </script>
+</head>
+<body>
+  <nine-table display-row-count="3" row-resizable="true" col-movable="true" css-path="/src/css">
+ <table>
+  <colgroup>
+   <col width="40" fixed="left">
+   <col width="100" fixed="left">
+   <col width="100">
+   <col width="100">
+   <col width="200">
+   <col width="100">
+   <col width="100">
+   <col width="100">
+  </colgroup>
+  <thead>
+   <tr>
+    <th>No.</th>
+    <th><nx-i18n><datalist><option locale="ko" label="이름"></option><option locale="en" label="Name"></option></datalist></nx-i18n></th>
+    <th><nx-i18n><datalist><option locale="ko" label="성별"></option><option locale="en" label="Gender"></option></datalist></nx-i18n></th>
+    <th><nx-i18n><datalist><option locale="ko" label="나이"></option><option locale="en" label="Age"></option></datalist></nx-i18n></th>
+    <th><nx-i18n><datalist><option locale="ko" label="연락처"></option><option locale="en" label="Contact"></option></datalist></nx-i18n></th>
+    <th><nx-i18n><datalist><option locale="ko" label="국어"></option><option locale="en" label="Korean"></option></datalist></nx-i18n></th>
+    <th><nx-i18n><datalist><option locale="ko" label="수학"></option><option locale="en" label="Math"></option></datalist></nx-i18n></th>
+    <th><nx-i18n><datalist><option locale="ko" label="영어"></option><option locale="en" label="English"></option></datalist></nx-i18n></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th data-bind="rowState" data-expr="data.__ng._[ninegrid.ROW.ORDER]" text-align="center">
+     <ng-row-indicator has-icon-pin="true" has-icon-detail="true" class="ng-left"></ng-row-indicator>
+    </th>
+    <td data-bind="NAME"></td>
+    <td data-bind="SEX" text-align="center"></td>
+    <td data-bind="AGE" text-align="right"></td>
+    <td data-bind="TEL"></td>
+    <td data-bind="REC1" text-align="right"></td>
+    <td data-bind="REC2" text-align="right"></td>
+    <td data-bind="REC3" text-align="right"></td>
+   </tr>
+  </tbody>
+ </table>
+</nine-table>
+</body>
+</html>

package/dist/nine-table.js

@@ -0,0 +1,141 @@
+var N = Object.defineProperty;
+var H = (i) => {
+  throw TypeError(i);
+};
+var a = (i, e) => N(i, "name", { value: e, configurable: !0 });
+var y = (i, e, t) => e.has(i) || H("Cannot " + t);
+var o = (i, e, t) => (y(i, e, "read from private field"), t ? t.call(i) : e.get(i)), l = (i, e, t) => e.has(i) ? H("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), c = (i, e, t, r) => (y(i, e, "write to private field"), r ? r.call(i, t) : e.set(i, t), t), b = (i, e, t) => (y(i, e, "access private method"), t);
+import { trace as W } from "@ninebone/util";
+const S = class S extends W.constructor {
+  constructor() {
+    super(), this.init("nine-table", "green");
+  }
+};
+a(S, "Trace");
+let w = S;
+const p = new w();
+var x, d, s, h, R, $;
+const q = class q {
+  constructor(e, t) {
+    l(this, h);
+    l(this, x);
+    l(this, d);
+    l(this, s);
+    c(this, x, e), c(this, d, t), c(this, s, e.shadowRoot);
+  }
+  init() {
+    b(this, h, R).call(this), b(this, h, $).call(this), o(this, d).length > 0 && this.renderTable(0), p.log("TableView initialized with proper flex row layout for 3 columns.");
+  }
+  renderTable(e) {
+    o(this, d)[e] && (this.tabBar.innerHTML = "", o(this, d).forEach((t, r) => {
+      const n = document.createElement("div");
+      n.className = `grid-tab-item ${r === e ? "active" : ""}`, n.textContent = `Table ${r + 1}`, n.addEventListener("click", () => this.renderTable(r)), this.tabBar.appendChild(n);
+    }), this.tableContainer.innerHTML = "", this.tableContainer.appendChild(o(this, d)[e].cloneNode(!0)), p.log(`Rendered layout tab index: ${e}`));
+  }
+  destroy() {
+    o(this, s).innerHTML = "", p.log("TableView destroyed.");
+  }
+};
+x = new WeakMap(), d = new WeakMap(), s = new WeakMap(), h = new WeakSet(), R = /* @__PURE__ */ a(function() {
+  o(this, s).innerHTML = `
+            <style>
+                :host { display: block; position: relative; overflow: hidden; height: 100%; }
+                .grid-root { display: flex; flex-direction: column; height: 100%; position: relative; }
+                
+                /* 탭 바와 푸터 사이에 가로로 3개 영역을 나란히 묶어주는 래퍼 추가 */
+                .grid-main-layout { display: flex; flex: 1; overflow: hidden; position: relative; }
+
+                .grid-sidebar-left { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; }
+                .grid-viewport { flex: 1; overflow: auto; position: relative; background: #ffffff; display: flex; flex-direction: column; }
+                .grid-sidebar-right { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; }
+                
+                .grid-footer-bar { display: flex; height: 16px; flex-shrink: 0; }
+                
+                /* 탭 내비게이션 및 테이블 뷰포트 */
+                .grid-tab-bar { display: flex; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; height: 36px; align-items: center; padding: 0 8px; gap: 4px; flex-shrink: 0; }
+                .grid-tab-item { padding: 6px 14px; cursor: pointer; font-size: 13px; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }
+                .grid-tab-item.active { background: #ffffff; border-color: #e5e7eb; color: #111827; font-weight: 600; }
+
+                .grid-table-container { flex: 1; overflow: auto; }
+                table { border-collapse: collapse; width: 100%; table-layout: fixed; }
+                th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }
+            </style>
+            
+            <div class="grid-root">
+                <!-- 최상단 탭 바 -->
+                <div class="grid-tab-bar"></div>
+
+                <!-- 가로 배치를 위한 중간 메인 래퍼 -->
+                <div class="grid-main-layout">
+                    <!-- 1. 좌측 통계/사이드 영역 -->
+                    <div class="grid-sidebar-left"></div>
+                    
+                    <!-- 2. 중앙 테이블 뷰포트 -->
+                    <div class="grid-viewport">
+                        <div class="grid-table-container"></div>
+                    </div>
+                    
+                    <!-- 3. 우측 통계/사이드 영역 -->
+                    <div class="grid-sidebar-right"></div>
+                </div>
+
+                <!-- 최하단 푸터 바 -->
+                <div class="grid-footer-bar"></div>
+            </div>
+        `;
+}, "#renderShell"), $ = /* @__PURE__ */ a(function() {
+  this.sidebarLeft = o(this, s).querySelector(".grid-sidebar-left"), this.tableContainer = o(this, s).querySelector(".grid-table-container"), this.sidebarRight = o(this, s).querySelector(".grid-sidebar-right"), this.tabBar = o(this, s).querySelector(".grid-tab-bar");
+}, "#bindElements"), a(q, "TableView");
+let k = q;
+var m, f, A, B;
+const T = class T {
+  constructor(e) {
+    l(this, f);
+    l(this, m);
+    c(this, m, e);
+  }
+  // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)
+  initializeTable(e) {
+    return b(this, f, A).call(this, e), b(this, f, B).call(this, e), e.classList.add("nine-table-element"), e;
+  }
+};
+m = new WeakMap(), f = new WeakSet(), // [Private] colgroup 보정
+A = /* @__PURE__ */ a(function(e) {
+  var v;
+  if (e.querySelector("colgroup")) return;
+  const t = ((v = e.querySelector("tbody tr")) == null ? void 0 : v.querySelectorAll("th, td").length) || 1, r = document.createElement("colgroup"), n = Math.max(Math.floor((e.clientWidth || 600) / t), 100);
+  for (let M = 0; M < t; M++) {
+    const z = document.createElement("col");
+    z.setAttribute("width", n), r.appendChild(z);
+  }
+  e.prepend(r);
+}, "#ensureColgroup"), // [Private] thead 보정
+B = /* @__PURE__ */ a(function(e) {
+  if (e.querySelector("thead")) return;
+  const t = document.createElement("thead"), r = e.querySelector("colgroup");
+  r ? r.after(t) : e.prepend(t);
+}, "#ensureThead"), a(T, "TableInitializer");
+let E = T;
+var u, g;
+const L = class L extends HTMLElement {
+  constructor() {
+    super();
+    l(this, u, !1);
+    l(this, g, []);
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (o(this, u)) return;
+    this.querySelectorAll("table").forEach((r) => {
+      const v = new E(this).initializeTable(r);
+      o(this, g).push(v), r.style.display = "none";
+    }), this.view = new k(this, o(this, g)), this.view.init(), c(this, u, !0), p.log("NineTable connected and layout initialized."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));
+  }
+  disconnectedCallback() {
+    this.view && this.view.destroy(), p.log("NineTable disconnected.");
+  }
+};
+u = new WeakMap(), g = new WeakMap(), a(L, "NineTable");
+let C = L;
+customElements.get("nine-table") || customElements.define("nine-table", C);
+//# sourceMappingURL=nine-table.js.map

package/dist/nine-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nine-table.js","sources":["../src/external/NoPeer.js","../src/ui/TableView.js","../src/ui/TableInitializer.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n    constructor() {\n        super();\n        this.init(\"nine-table\", \"green\");\n    }\n}\n\nexport const trace = new Trace();","import {trace} from \"@nopeer\";\n\nexport class TableView {\n    #container;\n    #layouts;\n    #shadowRoot;\n\n    constructor(container, layouts) {\n        this.#container = container;\n        this.#layouts = layouts;\n        this.#shadowRoot = container.shadowRoot;\n    }\n\n    init() {\n        this.#renderShell();\n        this.#bindElements();\n\n        if (this.#layouts.length > 0) {\n            this.renderTable(0);\n        }\n        trace.log('TableView initialized with proper flex row layout for 3 columns.');\n    }\n\n    #renderShell() {\n        this.#shadowRoot.innerHTML = `\n            <style>\n                :host { display: block; position: relative; overflow: hidden; height: 100%; }\n                .grid-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n                \n                /* 탭 바와 푸터 사이에 가로로 3개 영역을 나란히 묶어주는 래퍼 추가 */\n                .grid-main-layout { display: flex; flex: 1; overflow: hidden; position: relative; }\n\n                .grid-sidebar-left { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; }\n                .grid-viewport { flex: 1; overflow: auto; position: relative; background: #ffffff; display: flex; flex-direction: column; }\n                .grid-sidebar-right { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; }\n                \n                .grid-footer-bar { display: flex; height: 16px; flex-shrink: 0; }\n                \n                /* 탭 내비게이션 및 테이블 뷰포트 */\n                .grid-tab-bar { display: flex; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; height: 36px; align-items: center; padding: 0 8px; gap: 4px; flex-shrink: 0; }\n                .grid-tab-item { padding: 6px 14px; cursor: pointer; font-size: 13px; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }\n                .grid-tab-item.active { background: #ffffff; border-color: #e5e7eb; color: #111827; font-weight: 600; }\n\n                .grid-table-container { flex: 1; overflow: auto; }\n                table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n                th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }\n            </style>\n            \n            <div class=\"grid-root\">\n                <!-- 최상단 탭 바 -->\n                <div class=\"grid-tab-bar\"></div>\n\n                <!-- 가로 배치를 위한 중간 메인 래퍼 -->\n                <div class=\"grid-main-layout\">\n                    <!-- 1. 좌측 통계/사이드 영역 -->\n                    <div class=\"grid-sidebar-left\"></div>\n                    \n                    <!-- 2. 중앙 테이블 뷰포트 -->\n                    <div class=\"grid-viewport\">\n                        <div class=\"grid-table-container\"></div>\n                    </div>\n                    \n                    <!-- 3. 우측 통계/사이드 영역 -->\n                    <div class=\"grid-sidebar-right\"></div>\n                </div>\n\n                <!-- 최하단 푸터 바 -->\n                <div class=\"grid-footer-bar\"></div>\n            </div>\n        `;\n    }\n\n    #bindElements() {\n        this.sidebarLeft = this.#shadowRoot.querySelector('.grid-sidebar-left');\n        this.tableContainer = this.#shadowRoot.querySelector('.grid-table-container');\n        this.sidebarRight = this.#shadowRoot.querySelector('.grid-sidebar-right');\n        this.tabBar = this.#shadowRoot.querySelector('.grid-tab-bar');\n    }\n\n    renderTable(index) {\n        if (!this.#layouts[index]) return;\n\n        this.tabBar.innerHTML = '';\n        this.#layouts.forEach((_, idx) => {\n            const tab = document.createElement('div');\n            tab.className = `grid-tab-item ${idx === index ? 'active' : ''}`;\n            tab.textContent = `Table ${idx + 1}`;\n            tab.addEventListener('click', () => this.renderTable(idx));\n            this.tabBar.appendChild(tab);\n        });\n\n        this.tableContainer.innerHTML = '';\n        this.tableContainer.appendChild(this.#layouts[index].cloneNode(true));\n\n        trace.log(`Rendered layout tab index: ${index}`);\n    }\n\n    destroy() {\n        this.#shadowRoot.innerHTML = '';\n        trace.log('TableView destroyed.');\n    }\n}","export class TableInitializer {\n    #container;\n\n    constructor(container) {\n        this.#container = container;\n    }\n\n    // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)\n    initializeTable(tbl) {\n        this.#ensureColgroup(tbl);\n        this.#ensureThead(tbl);\n\n        tbl.classList.add('nine-table-element');\n        return tbl;\n    }\n\n    // [Private] colgroup 보정\n    #ensureColgroup(tbl) {\n        if (tbl.querySelector('colgroup')) return;\n\n        const colCount = tbl.querySelector('tbody tr')?.querySelectorAll('th, td').length || 1;\n        const colgroup = document.createElement('colgroup');\n        const defaultWidth = Math.max(Math.floor((tbl.clientWidth || 600) / colCount), 100);\n\n        for (let i = 0; i < colCount; i++) {\n            const col = document.createElement('col');\n            col.setAttribute('width', defaultWidth);\n            colgroup.appendChild(col);\n        }\n        tbl.prepend(colgroup);\n    }\n\n    // [Private] thead 보정\n    #ensureThead(tbl) {\n        if (tbl.querySelector('thead')) return;\n\n        const thead = document.createElement('thead');\n        const colgroup = tbl.querySelector('colgroup');\n        if (colgroup) {\n            colgroup.after(thead);\n        } else {\n            tbl.prepend(thead);\n        }\n    }\n}","import {trace} from \"@nopeer\";\nimport { TableView } from '../ui/TableView.js';\nimport { TableInitializer } from '../ui/TableInitializer.js';\n\nexport default class NineTable extends HTMLElement {\n    #created = false;\n    #layouts = [];\n\n    constructor() {\n        super();\n        // 최외곽 컴포넌트에만 Shadow DOM 적용\n        this.attachShadow({ mode: 'open' });\n    }\n\n    connectedCallback() {\n        if (this.#created) return;\n\n        // 1. 컴포넌트 내부의 원본 table 태그들 수집\n        const tables = this.querySelectorAll('table');\n        tables.forEach(tbl => {\n            const initializer = new TableInitializer(this);\n            const processedTbl = initializer.initializeTable(tbl);\n            this.#layouts.push(processedTbl);\n            tbl.style.display = 'none'; // 원본 숨김\n        });\n\n        // 2. 뷰 초기화 (Shadow DOM 내부에 일반 DOM 엘리먼트들 생성)\n        this.view = new TableView(this, this.#layouts);\n        this.view.init();\n\n        this.#created = true;\n        trace.log('NineTable connected and layout initialized.');\n\n        this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n    }\n\n    disconnectedCallback() {\n        if (this.view) {\n            this.view.destroy();\n        }\n        trace.log('NineTable disconnected.');\n    }\n}\n\nif (!customElements.get('nine-table')) {\n    customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_TableView","container","layouts","__privateAdd","_TableView_instances","_container","_layouts","_shadowRoot","__privateSet","__privateMethod","renderShell_fn","bindElements_fn","__privateGet","index","_","idx","tab","TableView","_TableInitializer","_TableInitializer_instances","tbl","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTable","_created","processedTbl","NineTable"],"mappings":"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"}