ninegrid2 6.1119.0 → 6.1121.0

package/dist/bundle.cjs.js

@@ -122060,7 +122060,7 @@ class nxPanel extends HTMLElement {
 				${ninegrid.getCustomPath(this,"nxPanel.css")}
 			</style>
             
-			<div class="head">
+			<div class="head ${caption ? '' : 'hide'}">
 				<div class="caption"><span>${caption}</span></div>
 			</div>
 			<div class="body">

package/dist/bundle.esm.js

@@ -122056,7 +122056,7 @@ class nxPanel extends HTMLElement {
 				${ninegrid.getCustomPath(this,"nxPanel.css")}
 			</style>
             
-			<div class="head">
+			<div class="head ${caption ? '' : 'hide'}">
 				<div class="caption"><span>${caption}</span></div>
 			</div>
 			<div class="body">

package/dist/nx/nxButtons.js

@@ -0,0 +1,46 @@
+import ninegrid from "../index.js";
+
+class nxButtons extends HTMLElement {
+	// 1. 초기화 상태를 저장할 플래그를 추가합니다.
+	#isInitialized = false;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		// 2. 초기화되지 않았을 때만 #init 함수를 호출합니다.
+		if (!this.#isInitialized) {
+			this.#init();
+			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+		}
+	}
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+
+		for (const attr of this.attributes) {
+			if (attr.name.startsWith("css-")) {
+				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
+				this.style.setProperty(attr.name.substring(4), attr.value);
+			}
+		}
+
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${contents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-buttons", nxButtons);

package/dist/nx/nxPanel.js

@@ -30,7 +30,7 @@ class nxPanel extends HTMLElement {
 				${ninegrid.getCustomPath(this,"nxPanel.css")}
 			</style>
             
-			<div class="head">
+			<div class="head ${caption ? '' : 'hide'}">
 				<div class="caption"><span>${caption}</span></div>
 			</div>
 			<div class="body">

package/package.json

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

package/src/nx/nxButtons.js

@@ -0,0 +1,46 @@
+import ninegrid from "../index.js";
+
+class nxButtons extends HTMLElement {
+	// 1. 초기화 상태를 저장할 플래그를 추가합니다.
+	#isInitialized = false;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		// 2. 초기화되지 않았을 때만 #init 함수를 호출합니다.
+		if (!this.#isInitialized) {
+			this.#init();
+			this.#isInitialized = true; // 3. 초기화 후 플래그를 true로 변경합니다.
+		}
+	}
+
+	#init = () => {
+		const contents = this.innerHTML.trim();
+
+		for (const attr of this.attributes) {
+			if (attr.name.startsWith("css-")) {
+				// "css-" 접두사를 제거하고 CSS 속성명으로 변환
+				this.style.setProperty(attr.name.substring(4), attr.value);
+			}
+		}
+
+		this.innerHTML = ""; // 기존 내부 HTML 제거
+
+		const htmlTmpl = document.createElement("template");
+		htmlTmpl.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxButtons.css";
+				${ninegrid.getCustomPath(this,"nxButtons.css")}
+			</style>
+            
+			${contents}
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-buttons", nxButtons);

package/src/nx/nxPanel.js

@@ -30,7 +30,7 @@ class nxPanel extends HTMLElement {
 				${ninegrid.getCustomPath(this,"nxPanel.css")}
 			</style>
             
-			<div class="head">
+			<div class="head ${caption ? '' : 'hide'}">
 				<div class="caption"><span>${caption}</span></div>
 			</div>
 			<div class="body">