ninegrid2 6.1122.0 → 6.1124.0

package/dist/bundle.cjs.js

@@ -120936,73 +120936,6 @@ Array.prototype.nineBinarySearch = function(target)
 	return -1;
 };
 
-class nxDiv extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
-	}
-
-	connectedCallback() {
-		this.#init();
-	}
-
-	getJsonData = () => {
-		const parent = this.shadowRoot.querySelector(".search-content");
-		const elements = parent.querySelectorAll("[id]");
-		const jsonData = {};
-
-		elements.forEach(element => {
-			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
-				jsonData[element.id] = element.value;
-			} else {
-				jsonData[element.id] = element.textContent.trim();
-			}
-		});
-
-		return jsonData;
-	};
-
-	getSearchOptions = () => {
-
-	};
-
-	#init = () => {
-		const contents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
-
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
-				${ninegrid.getCustomPath(this,"nxDiv.css")}
-			</style>
-            
-            <div class="search-container">
-                <span class="toggle-icon"></span>
-                <div class="search-content">${contents}</div>
-            </div>
-        `;
-
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
-
-		this.#setupToggle();
-	}
-
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
-
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
-		});
-	}
-}
-
-customElements.define("nx-div", nxDiv);
-
 class nxCollapse extends HTMLElement {
 	#target;
 	#targetPrevDisplay;
@@ -122076,21 +122009,44 @@ class nxPanel extends HTMLElement {
 
 customElements.define("nx-panel", nxPanel);
 
-class nxButtons extends HTMLElement {
+class nxDiv extends HTMLElement
+{
+	isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.isInitialized) {
+			this.#init();
+			this.isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+		}
+	}
+
+	#init = () => {
+		console.log("super.connectedCallback");
+	};
+}
+
+class nxButtons extends nxDiv {
 	// 1. 초기화 상태를 저장할 플래그를 추가합니다.
-	#isInitialized = false;
+	//#isInitialized = false;
 
 	constructor() {
 		super();
-		this.attachShadow({ mode: "open" });
 	}
 
 	connectedCallback() {
+		console.log("==========", super.isInitialized);
 		// 2. 초기화되지 않았을 때만 #init 함수를 호출합니다.
-		if (!this.#isInitialized) {
-			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
-		}
+		//if (!this.#isInitialized) {
+			//this.#init();
+			//this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+
+			super.connectedCallback();
+		//}
 	}
 
 	#init = () => {

package/dist/bundle.esm.js

@@ -120932,73 +120932,6 @@ Array.prototype.nineBinarySearch = function(target)
 	return -1;
 };
 
-class nxDiv extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
-	}
-
-	connectedCallback() {
-		this.#init();
-	}
-
-	getJsonData = () => {
-		const parent = this.shadowRoot.querySelector(".search-content");
-		const elements = parent.querySelectorAll("[id]");
-		const jsonData = {};
-
-		elements.forEach(element => {
-			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
-				jsonData[element.id] = element.value;
-			} else {
-				jsonData[element.id] = element.textContent.trim();
-			}
-		});
-
-		return jsonData;
-	};
-
-	getSearchOptions = () => {
-
-	};
-
-	#init = () => {
-		const contents = this.innerHTML.trim();
-		this.innerHTML = ""; // 기존 내부 HTML 제거
-
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
-				${ninegrid.getCustomPath(this,"nxDiv.css")}
-			</style>
-            
-            <div class="search-container">
-                <span class="toggle-icon"></span>
-                <div class="search-content">${contents}</div>
-            </div>
-        `;
-
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
-
-		this.#setupToggle();
-	}
-
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
-
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
-		});
-	}
-}
-
-customElements.define("nx-div", nxDiv);
-
 class nxCollapse extends HTMLElement {
 	#target;
 	#targetPrevDisplay;
@@ -122072,21 +122005,44 @@ class nxPanel extends HTMLElement {
 
 customElements.define("nx-panel", nxPanel);
 
-class nxButtons extends HTMLElement {
+class nxDiv extends HTMLElement
+{
+	isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.isInitialized) {
+			this.#init();
+			this.isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+		}
+	}
+
+	#init = () => {
+		console.log("super.connectedCallback");
+	};
+}
+
+class nxButtons extends nxDiv {
 	// 1. 초기화 상태를 저장할 플래그를 추가합니다.
-	#isInitialized = false;
+	//#isInitialized = false;
 
 	constructor() {
 		super();
-		this.attachShadow({ mode: "open" });
 	}
 
 	connectedCallback() {
+		console.log("==========", super.isInitialized);
 		// 2. 초기화되지 않았을 때만 #init 함수를 호출합니다.
-		if (!this.#isInitialized) {
-			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
-		}
+		//if (!this.#isInitialized) {
+			//this.#init();
+			//this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+
+			super.connectedCallback();
+		//}
 	}
 
 	#init = () => {

package/dist/index.js

@@ -99,7 +99,7 @@ import "./etc/nxTopMenu.js";
 import "./utils/ngFiltering.js";
 import "./utils/ngPrototype.js";
 
-import "./nx/nxDiv.js";
+//import "./nx/nxDiv.js";
 import "./nx/nxCollapse.js";
 import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";

package/dist/nx/_nxDiv.js

@@ -0,0 +1,22 @@
+import ninegrid from "../index.js";
+
+export class nxDiv extends HTMLElement
+{
+	isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.isInitialized) {
+			this.#init();
+			this.isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+		}
+	}
+
+	#init = () => {
+		console.log("super.connectedCallback");
+	};
+}

package/dist/nx/nxButtons.js

@@ -1,20 +1,23 @@
 import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv.js";
 
-class nxButtons extends HTMLElement {
+class nxButtons extends nxDiv {
 	// 1. 초기화 상태를 저장할 플래그를 추가합니다.
-	#isInitialized = false;
+	//#isInitialized = false;
 
 	constructor() {
 		super();
-		this.attachShadow({ mode: "open" });
 	}
 
 	connectedCallback() {
+		console.log("==========", super.isInitialized);
 		// 2. 초기화되지 않았을 때만 #init 함수를 호출합니다.
-		if (!this.#isInitialized) {
-			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
-		}
+		//if (!this.#isInitialized) {
+			//this.#init();
+			//this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+
+			super.connectedCallback();
+		//}
 	}
 
 	#init = () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.1122.0",
+  "version": "6.1124.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/index.js

@@ -99,7 +99,7 @@ import "./etc/nxTopMenu.js";
 import "./utils/ngFiltering.js";
 import "./utils/ngPrototype.js";
 
-import "./nx/nxDiv.js";
+//import "./nx/nxDiv.js";
 import "./nx/nxCollapse.js";
 import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";

package/src/nx/_nxDiv.js

@@ -0,0 +1,22 @@
+import ninegrid from "../index.js";
+
+export class nxDiv extends HTMLElement
+{
+	isInitialized = false;
+
+	constructor () {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+		if (!this.isInitialized) {
+			this.#init();
+			this.isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+		}
+	}
+
+	#init = () => {
+		console.log("super.connectedCallback");
+	};
+}

package/src/nx/nxButtons.js

@@ -1,20 +1,23 @@
 import ninegrid from "../index.js";
+import {nxDiv} from "./_nxDiv.js";
 
-class nxButtons extends HTMLElement {
+class nxButtons extends nxDiv {
 	// 1. 초기화 상태를 저장할 플래그를 추가합니다.
-	#isInitialized = false;
+	//#isInitialized = false;
 
 	constructor() {
 		super();
-		this.attachShadow({ mode: "open" });
 	}
 
 	connectedCallback() {
+		console.log("==========", super.isInitialized);
 		// 2. 초기화되지 않았을 때만 #init 함수를 호출합니다.
-		if (!this.#isInitialized) {
-			this.#init();
-			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
-		}
+		//if (!this.#isInitialized) {
+			//this.#init();
+			//this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+
+			super.connectedCallback();
+		//}
 	}
 
 	#init = () => {

package/src/nx/nxDiv.js.bak

@@ -0,0 +1,68 @@
+import ninegrid from "../index.js";
+
+class nxDiv extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.isCollapsed = false; // 검색 박스 상태 (true: 축소됨, false: 확장됨)
+	}
+
+	connectedCallback() {
+		this.#init();
+	}
+
+	getJsonData = () => {
+		const parent = this.shadowRoot.querySelector(".search-content");
+		const elements = parent.querySelectorAll("[id]");
+		const jsonData = {};
+
+		elements.forEach(element => {
+			if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") {
+				jsonData[element.id] = element.value;
+			} else {
+				jsonData[element.id] = element.textContent.trim();
+			}
+		});
+
+		return jsonData;
+	};
+
+	getSearchOptions = () => {
+
+	};
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDiv.css";
+				${ninegrid.getCustomPath(this,"nxDiv.css")}
+			</style>
+            
+            <div class="search-container">
+                <span class="toggle-icon"></span>
+                <div class="search-content">${contents}</div>
+            </div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+
+		this.#setupToggle();
+	}
+
+	#setupToggle = () => {
+		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
+		const searchContainer = this.shadowRoot.querySelector(".search-container");
+
+		toggleIcon.addEventListener("click", () => {
+			this.isCollapsed = !this.isCollapsed;
+			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
+			searchContainer.classList.toggle("collapse", this.isCollapsed);
+		});
+	}
+}
+
+customElements.define("nx-div", nxDiv);