ninegrid2 6.1394.0 → 6.1396.0

package/dist/bundle.cjs.js

@@ -28437,6 +28437,7 @@ class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
 	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
+	#hasChanged = false; // 1. 내부 상태 관리를 위한 프라이빗 변수
 
 	constructor() {
 		super();
@@ -28463,6 +28464,24 @@ class nxDiv extends HTMLElement {
 		return false;
 	}
 
+	// 2. changed Getter: 현재 변경 상태를 반환
+	get changed() {
+		return this.#hasChanged;
+	}
+
+	// 3. changed Setter: 상태를 업데이트하고 UI(nx-title2)에 반영
+	set changed(v) {
+		const value = Boolean(v);
+		this.#hasChanged = value;
+
+		// 기존 #changed 로직을 setter 내부로 통합
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = value;
+		}
+	}
+
 	// 자식 클래스에서 접근 가능하도록 getter 제공
 	get root() {
 		return this.#root || this;
@@ -28566,19 +28585,13 @@ class nxDiv extends HTMLElement {
 
 	initData = (jsonData) => {
 		this.clearData(jsonData);
-		this.#changed(false);
+		//this.#changed(false);
+		this.changed = false; // 4. setter 호출
 	};
 
-	#changed = (v) => {
-		const parent = this.closest(".detail-wrapper");
-		if (parent) {
-			const el = parent.querySelector("nx-title2");
-			if (el) el.changed = v;
-		}
-	}
-
 	#changeHandler = (e) => {
-		this.#changed(true);
+		//this.#changed(true);
+		this.changed = true; // 4. setter 호출
 	}
 
 	#init = () => {
@@ -28593,14 +28606,12 @@ class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
 
-		/**
-		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
 			this.shadowRoot.innerHTML = this.originContents;
-		} */
+		}
 	};
 }
 
@@ -28638,10 +28649,10 @@ class nxTitle2 extends nxDiv {
             	<span>${caption}</span>
 			</div>
 			
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -28900,7 +28911,7 @@ class nxPanel extends nxDiv {
 			</div>
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -28918,8 +28929,6 @@ class nxButtons extends nxDiv {
 
 	#init = () => {
 
-		const target = this.shadowRoot || this;
-
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -28927,10 +28936,10 @@ class nxButtons extends nxDiv {
 				${ninegrid.getCustomPath(this,"nxButtons.css")}
 			</style>
             
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		target.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/dist/bundle.esm.js

@@ -28433,6 +28433,7 @@ class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
 	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
+	#hasChanged = false; // 1. 내부 상태 관리를 위한 프라이빗 변수
 
 	constructor() {
 		super();
@@ -28459,6 +28460,24 @@ class nxDiv extends HTMLElement {
 		return false;
 	}
 
+	// 2. changed Getter: 현재 변경 상태를 반환
+	get changed() {
+		return this.#hasChanged;
+	}
+
+	// 3. changed Setter: 상태를 업데이트하고 UI(nx-title2)에 반영
+	set changed(v) {
+		const value = Boolean(v);
+		this.#hasChanged = value;
+
+		// 기존 #changed 로직을 setter 내부로 통합
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = value;
+		}
+	}
+
 	// 자식 클래스에서 접근 가능하도록 getter 제공
 	get root() {
 		return this.#root || this;
@@ -28562,19 +28581,13 @@ class nxDiv extends HTMLElement {
 
 	initData = (jsonData) => {
 		this.clearData(jsonData);
-		this.#changed(false);
+		//this.#changed(false);
+		this.changed = false; // 4. setter 호출
 	};
 
-	#changed = (v) => {
-		const parent = this.closest(".detail-wrapper");
-		if (parent) {
-			const el = parent.querySelector("nx-title2");
-			if (el) el.changed = v;
-		}
-	}
-
 	#changeHandler = (e) => {
-		this.#changed(true);
+		//this.#changed(true);
+		this.changed = true; // 4. setter 호출
 	}
 
 	#init = () => {
@@ -28589,14 +28602,12 @@ class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
 
-		/**
-		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
 			this.shadowRoot.innerHTML = this.originContents;
-		} */
+		}
 	};
 }
 
@@ -28634,10 +28645,10 @@ class nxTitle2 extends nxDiv {
             	<span>${caption}</span>
 			</div>
 			
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -28896,7 +28907,7 @@ class nxPanel extends nxDiv {
 			</div>
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 
@@ -28914,8 +28925,6 @@ class nxButtons extends nxDiv {
 
 	#init = () => {
 
-		const target = this.shadowRoot || this;
-
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -28923,10 +28932,10 @@ class nxButtons extends nxDiv {
 				${ninegrid.getCustomPath(this,"nxButtons.css")}
 			</style>
             
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		target.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/dist/nx/_nxDiv.js

@@ -4,6 +4,7 @@ export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
 	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
+	#hasChanged = false; // 1. 내부 상태 관리를 위한 프라이빗 변수
 
 	constructor() {
 		super();
@@ -30,6 +31,24 @@ export class nxDiv extends HTMLElement {
 		return false;
 	}
 
+	// 2. changed Getter: 현재 변경 상태를 반환
+	get changed() {
+		return this.#hasChanged;
+	}
+
+	// 3. changed Setter: 상태를 업데이트하고 UI(nx-title2)에 반영
+	set changed(v) {
+		const value = Boolean(v);
+		this.#hasChanged = value;
+
+		// 기존 #changed 로직을 setter 내부로 통합
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = value;
+		}
+	}
+
 	// 자식 클래스에서 접근 가능하도록 getter 제공
 	get root() {
 		return this.#root || this;
@@ -133,19 +152,13 @@ export class nxDiv extends HTMLElement {
 
 	initData = (jsonData) => {
 		this.clearData(jsonData);
-		this.#changed(false);
+		//this.#changed(false);
+		this.changed = false; // 4. setter 호출
 	};
 
-	#changed = (v) => {
-		const parent = this.closest(".detail-wrapper");
-		if (parent) {
-			const el = parent.querySelector("nx-title2");
-			if (el) el.changed = v;
-		}
-	}
-
 	#changeHandler = (e) => {
-		this.#changed(true);
+		//this.#changed(true);
+		this.changed = true; // 4. setter 호출
 	}
 
 	#init = () => {
@@ -160,13 +173,11 @@ export class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
 
-		/**
-		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
 			this.shadowRoot.innerHTML = this.originContents;
-		} */
+		}
 	};
 }

package/dist/nx/nxButtons.js

@@ -13,8 +13,6 @@ class nxButtons extends nxDiv {
 
 	#init = () => {
 
-		const target = this.shadowRoot || this;
-
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -22,10 +20,10 @@ class nxButtons extends nxDiv {
 				${ninegrid.getCustomPath(this,"nxButtons.css")}
 			</style>
             
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		target.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/dist/nx/nxPanel.js

@@ -33,7 +33,7 @@ class nxPanel extends nxDiv {
 			</div>
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/dist/nx/nxTitle2.js

@@ -35,10 +35,10 @@ class nxTitle2 extends nxDiv {
             	<span>${caption}</span>
 			</div>
 			
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/package.json

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

package/src/nx/_nxDiv.js

@@ -4,6 +4,7 @@ export class nxDiv extends HTMLElement {
 	originContents;
 	#isInitialized = false;
 	#root; // Shadow DOM 사용 여부에 따라 shadowRoot 또는 this를 가리킴
+	#hasChanged = false; // 1. 내부 상태 관리를 위한 프라이빗 변수
 
 	constructor() {
 		super();
@@ -30,6 +31,24 @@ export class nxDiv extends HTMLElement {
 		return false;
 	}
 
+	// 2. changed Getter: 현재 변경 상태를 반환
+	get changed() {
+		return this.#hasChanged;
+	}
+
+	// 3. changed Setter: 상태를 업데이트하고 UI(nx-title2)에 반영
+	set changed(v) {
+		const value = Boolean(v);
+		this.#hasChanged = value;
+
+		// 기존 #changed 로직을 setter 내부로 통합
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = value;
+		}
+	}
+
 	// 자식 클래스에서 접근 가능하도록 getter 제공
 	get root() {
 		return this.#root || this;
@@ -133,19 +152,13 @@ export class nxDiv extends HTMLElement {
 
 	initData = (jsonData) => {
 		this.clearData(jsonData);
-		this.#changed(false);
+		//this.#changed(false);
+		this.changed = false; // 4. setter 호출
 	};
 
-	#changed = (v) => {
-		const parent = this.closest(".detail-wrapper");
-		if (parent) {
-			const el = parent.querySelector("nx-title2");
-			if (el) el.changed = v;
-		}
-	}
-
 	#changeHandler = (e) => {
-		this.#changed(true);
+		//this.#changed(true);
+		this.changed = true; // 4. setter 호출
 	}
 
 	#init = () => {
@@ -160,13 +173,11 @@ export class nxDiv extends HTMLElement {
 		//console.log(this.innerHTML.trim());
 		this.originContents = this.innerHTML.trim();
 
-		/**
-		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
 
 		// 만약 순수 nx-div로만 쓰일 경우(상속 x), 내용을 shadow에 채워줌
 		if (this.shadowRoot && this.tagName.toLowerCase() === 'nx-div') {
 			this.shadowRoot.innerHTML = this.originContents;
-		} */
+		}
 	};
 }

package/src/nx/nxButtons.js

@@ -13,8 +13,6 @@ class nxButtons extends nxDiv {
 
 	#init = () => {
 
-		const target = this.shadowRoot || this;
-
 		const htmlTmpl = document.createElement("template");
 		htmlTmpl.innerHTML = `
 			<style>
@@ -22,10 +20,10 @@ class nxButtons extends nxDiv {
 				${ninegrid.getCustomPath(this,"nxButtons.css")}
 			</style>
             
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		target.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/src/nx/nxPanel.js

@@ -33,7 +33,7 @@ class nxPanel extends nxDiv {
 			</div>
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }
 

package/src/nx/nxTitle2.js

@@ -35,10 +35,10 @@ class nxTitle2 extends nxDiv {
             	<span>${caption}</span>
 			</div>
 			
-            <slot></slot>
+            ${this.originContents}
         `;
 
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+		(this.shadowRoot || this).appendChild(htmlTmpl.content.cloneNode(true));
 	}
 }