ninegrid2 6.1176.0 → 6.1178.0

package/dist/bundle.cjs.js

@@ -121858,6 +121858,7 @@ class nxDiv extends HTMLElement
 			return;
 		}
 
+		let bChanged = false;
 		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
@@ -121867,17 +121868,37 @@ class nxDiv extends HTMLElement
 			// 폼 요소에만 데이터를 설정합니다.
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
+					if (el.checked !== (el.value === String(value))) bChanged = true;
 					el.checked = (el.value === String(value));
 				} else {
+					if (el.value !== value) bChanged = true;
 					el.value = value;
 				}
 			} else {
 				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
 				el.textContent = value;
 			}
 		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	initData = (jsonData) => {
+		this.setData(jsonData);
+
+		this.#changed(false);
 	};
 
+	#changed = (v) => {
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = v;
+		}
+	}
+
+
 	#init = () => {
 
 		/**
@@ -121892,11 +121913,18 @@ class nxDiv extends HTMLElement
 
 		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.originContents).forEach(el => {
+			el.name;
+			console.log(el);
+		});
 	};
 }
 
 class nxTitle2 extends nxDiv {
 
+	#changed = false;
+
 	constructor() {
 		super();
 	}
@@ -121905,9 +121933,18 @@ class nxTitle2 extends nxDiv {
 		if (super.connectedCallback()) this.#init();
 	};
 
+	get changed() {
+		return this.#changed;
+	};
+	set changed(v) {
+		this.#changed = v;
+		v ? this.classList.add("changed") : this.classList.remove("changed");
+	};
+
 	#init = () => {
 		const caption = this.getAttribute("caption") || "";
 		const htmlTmpl = document.createElement("template");
+
 		htmlTmpl.innerHTML = `
 			<style>
 				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";

package/dist/bundle.esm.js

@@ -121854,6 +121854,7 @@ class nxDiv extends HTMLElement
 			return;
 		}
 
+		let bChanged = false;
 		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
@@ -121863,17 +121864,37 @@ class nxDiv extends HTMLElement
 			// 폼 요소에만 데이터를 설정합니다.
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
+					if (el.checked !== (el.value === String(value))) bChanged = true;
 					el.checked = (el.value === String(value));
 				} else {
+					if (el.value !== value) bChanged = true;
 					el.value = value;
 				}
 			} else {
 				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
 				el.textContent = value;
 			}
 		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	initData = (jsonData) => {
+		this.setData(jsonData);
+
+		this.#changed(false);
 	};
 
+	#changed = (v) => {
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = v;
+		}
+	}
+
+
 	#init = () => {
 
 		/**
@@ -121888,11 +121909,18 @@ class nxDiv extends HTMLElement
 
 		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.originContents).forEach(el => {
+			el.name;
+			console.log(el);
+		});
 	};
 }
 
 class nxTitle2 extends nxDiv {
 
+	#changed = false;
+
 	constructor() {
 		super();
 	}
@@ -121901,9 +121929,18 @@ class nxTitle2 extends nxDiv {
 		if (super.connectedCallback()) this.#init();
 	};
 
+	get changed() {
+		return this.#changed;
+	};
+	set changed(v) {
+		this.#changed = v;
+		v ? this.classList.add("changed") : this.classList.remove("changed");
+	};
+
 	#init = () => {
 		const caption = this.getAttribute("caption") || "";
 		const htmlTmpl = document.createElement("template");
+
 		htmlTmpl.innerHTML = `
 			<style>
 				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";

package/dist/nx/_nxDiv.js

@@ -55,6 +55,7 @@ export class nxDiv extends HTMLElement
 			return;
 		}
 
+		let bChanged = false;
 		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
@@ -64,17 +65,37 @@ export class nxDiv extends HTMLElement
 			// 폼 요소에만 데이터를 설정합니다.
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
+					if (el.checked !== (el.value === String(value))) bChanged = true;
 					el.checked = (el.value === String(value));
 				} else {
+					if (el.value !== value) bChanged = true;
 					el.value = value;
 				}
 			} else {
 				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
 				el.textContent = value;
 			}
 		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	initData = (jsonData) => {
+		this.setData(jsonData);
+
+		this.#changed(false);
 	};
 
+	#changed = (v) => {
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = v;
+		}
+	}
+
+
 	#init = () => {
 
 		/**
@@ -89,5 +110,10 @@ export class nxDiv extends HTMLElement
 
 		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.originContents).forEach(el => {
+			const key = el.name;
+			console.log(el);
+		});
 	};
 }

package/dist/nx/nxTitle2.js

@@ -3,6 +3,8 @@ import {nxDiv} from "./_nxDiv.js";
 
 class nxTitle2 extends nxDiv {
 
+	#changed = false;
+
 	constructor() {
 		super();
 	}
@@ -11,9 +13,18 @@ class nxTitle2 extends nxDiv {
 		if (super.connectedCallback()) this.#init();
 	};
 
+	get changed() {
+		return this.#changed;
+	};
+	set changed(v) {
+		this.#changed = v;
+		v ? this.classList.add("changed") : this.classList.remove("changed");
+	};
+
 	#init = () => {
 		const caption = this.getAttribute("caption") || "";
 		const htmlTmpl = document.createElement("template");
+
 		htmlTmpl.innerHTML = `
 			<style>
 				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";

package/package.json

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

package/src/nx/_nxDiv.js

@@ -55,6 +55,7 @@ export class nxDiv extends HTMLElement
 			return;
 		}
 
+		let bChanged = false;
 		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.shadowRoot).forEach(el => {
 			const key = el.name;
 			if (!key || !jsonData.hasOwnProperty(key)) return;
@@ -64,17 +65,37 @@ export class nxDiv extends HTMLElement
 			// 폼 요소에만 데이터를 설정합니다.
 			if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT") {
 				if (el.type === "checkbox" || el.type === "radio") {
+					if (el.checked !== (el.value === String(value))) bChanged = true;
 					el.checked = (el.value === String(value));
 				} else {
+					if (el.value !== value) bChanged = true;
 					el.value = value;
 				}
 			} else {
 				// 폼 요소가 아닌 경우, textContent를 사용합니다.
+				if (el.textContent !== value) bChanged = true;
 				el.textContent = value;
 			}
 		});
+
+		if (bChanged) this.#changed(bChanged);
+	};
+
+	initData = (jsonData) => {
+		this.setData(jsonData);
+
+		this.#changed(false);
 	};
 
+	#changed = (v) => {
+		const parent = this.closest(".detail-wrapper");
+		if (parent) {
+			const el = parent.querySelector("nx-title2");
+			if (el) el.changed = v;
+		}
+	}
+
+
 	#init = () => {
 
 		/**
@@ -89,5 +110,10 @@ export class nxDiv extends HTMLElement
 
 		this.originContents = this.innerHTML.trim();
 		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		ninegrid.querySelectorAll("input[name], textarea[name], select[name]", this.originContents).forEach(el => {
+			const key = el.name;
+			console.log(el);
+		});
 	};
 }

package/src/nx/nxTitle2.js

@@ -3,6 +3,8 @@ import {nxDiv} from "./_nxDiv.js";
 
 class nxTitle2 extends nxDiv {
 
+	#changed = false;
+
 	constructor() {
 		super();
 	}
@@ -11,9 +13,18 @@ class nxTitle2 extends nxDiv {
 		if (super.connectedCallback()) this.#init();
 	};
 
+	get changed() {
+		return this.#changed;
+	};
+	set changed(v) {
+		this.#changed = v;
+		v ? this.classList.add("changed") : this.classList.remove("changed");
+	};
+
 	#init = () => {
 		const caption = this.getAttribute("caption") || "";
 		const htmlTmpl = document.createElement("template");
+
 		htmlTmpl.innerHTML = `
 			<style>
 				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxTitle2.css";