ninegrid2 6.910.0 → 6.912.0

package/dist/bundle.cjs.js

@@ -120479,6 +120479,7 @@ class nxSideMenuBody extends HTMLElement
 
 class nxSideMenuItem extends HTMLElement
 {
+	#caption;
 	#owner;
 	#type;
 	
@@ -120490,10 +120491,16 @@ class nxSideMenuItem extends HTMLElement
 	}
 
 	connectedCallback() {
+		this.#caption = this.innerText.trim();
+
 		ninegrid.waitForInnerHTML(this)
 			.then(() => this.#init())
 			.catch(error => console.error(error));
 	}
+
+	get caption() {
+		return this.#caption;
+	}
 	
 	#init = () => {
 
@@ -120580,6 +120587,8 @@ class nxSideMenuItem extends HTMLElement
 		
 		const iconClass = this.getAttribute('icon-class');
 		const contents	= this.innerHTML.trim();
+
+
 		
 		this.innerHTML = "";
 		
@@ -121636,6 +121645,40 @@ class nxForm extends HTMLElement {
 
 customElements.define("nx-form", nxForm);
 
+class nxTitle extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#randerer();
+	}
+
+	#randerer = () => {
+		const caption = this.getAttribute("caption") || "No Caption";
+
+		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/nxTitle.css";
+				${ninegrid.getCustomPath(this,"nxTitle.css")}
+			</style>
+            
+            <div class="wrapper">
+				<i class="title-icon"></i> <span class="title-text">${caption}</span>
+			</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title", nxTitle);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {

package/dist/bundle.esm.js

@@ -120475,6 +120475,7 @@ class nxSideMenuBody extends HTMLElement
 
 class nxSideMenuItem extends HTMLElement
 {
+	#caption;
 	#owner;
 	#type;
 	
@@ -120486,10 +120487,16 @@ class nxSideMenuItem extends HTMLElement
 	}
 
 	connectedCallback() {
+		this.#caption = this.innerText.trim();
+
 		ninegrid.waitForInnerHTML(this)
 			.then(() => this.#init())
 			.catch(error => console.error(error));
 	}
+
+	get caption() {
+		return this.#caption;
+	}
 	
 	#init = () => {
 
@@ -120576,6 +120583,8 @@ class nxSideMenuItem extends HTMLElement
 		
 		const iconClass = this.getAttribute('icon-class');
 		const contents	= this.innerHTML.trim();
+
+
 		
 		this.innerHTML = "";
 		
@@ -121632,6 +121641,40 @@ class nxForm extends HTMLElement {
 
 customElements.define("nx-form", nxForm);
 
+class nxTitle extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#randerer();
+	}
+
+	#randerer = () => {
+		const caption = this.getAttribute("caption") || "No Caption";
+
+		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/nxTitle.css";
+				${ninegrid.getCustomPath(this,"nxTitle.css")}
+			</style>
+            
+            <div class="wrapper">
+				<i class="title-icon"></i> <span class="title-text">${caption}</span>
+			</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title", nxTitle);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {

package/dist/etc/nxSideMenu.js

@@ -350,6 +350,7 @@ class nxSideMenuBody extends HTMLElement
 
 class nxSideMenuItem extends HTMLElement
 {
+	#caption;
 	#owner;
 	#type;
 	
@@ -361,10 +362,16 @@ class nxSideMenuItem extends HTMLElement
 	}
 
 	connectedCallback() {
+		this.#caption = this.innerText.trim();
+
 		ninegrid.waitForInnerHTML(this)
 			.then(() => this.#init())
 			.catch(error => console.error(error));
 	}
+
+	get caption() {
+		return this.#caption;
+	}
 	
 	#init = () => {
 
@@ -451,6 +458,8 @@ class nxSideMenuItem extends HTMLElement
 		
 		const iconClass = this.getAttribute('icon-class');
 		const contents	= this.innerHTML.trim();
+
+
 		
 		this.innerHTML = "";
 		

package/dist/index.js

@@ -104,6 +104,7 @@ import "./nx/nxCollapse.js";
 import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";
 import "./nx/nxForm.js";
+import "./nx/nxTitle.js";
 
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";

package/dist/nx/nxTitle.js

@@ -0,0 +1,35 @@
+import ninegrid from "../index.js";
+
+class nxTitle extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#randerer();
+	}
+
+	#randerer = () => {
+		const caption = this.getAttribute("caption") || "No Caption";
+
+		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/nxTitle.css";
+				${ninegrid.getCustomPath(this,"nxTitle.css")}
+			</style>
+            
+            <div class="wrapper">
+				<i class="title-icon"></i> <span class="title-text">${caption}</span>
+			</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title", nxTitle);

package/package.json

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

package/src/etc/nxSideMenu.js

@@ -350,6 +350,7 @@ class nxSideMenuBody extends HTMLElement
 
 class nxSideMenuItem extends HTMLElement
 {
+	#caption;
 	#owner;
 	#type;
 	
@@ -361,10 +362,16 @@ class nxSideMenuItem extends HTMLElement
 	}
 
 	connectedCallback() {
+		this.#caption = this.innerText.trim();
+
 		ninegrid.waitForInnerHTML(this)
 			.then(() => this.#init())
 			.catch(error => console.error(error));
 	}
+
+	get caption() {
+		return this.#caption;
+	}
 	
 	#init = () => {
 
@@ -451,6 +458,8 @@ class nxSideMenuItem extends HTMLElement
 		
 		const iconClass = this.getAttribute('icon-class');
 		const contents	= this.innerHTML.trim();
+
+
 		
 		this.innerHTML = "";
 		

package/src/index.js

@@ -104,6 +104,7 @@ import "./nx/nxCollapse.js";
 import "./nx/nxTab.js";
 import "./nx/nxSplitter.js";
 import "./nx/nxForm.js";
+import "./nx/nxTitle.js";
 
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";

package/src/nx/nxTitle.js

@@ -0,0 +1,35 @@
+import ninegrid from "../index.js";
+
+class nxTitle extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+
+	connectedCallback() {
+		this.#randerer();
+	}
+
+	#randerer = () => {
+		const caption = this.getAttribute("caption") || "No Caption";
+
+		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/nxTitle.css";
+				${ninegrid.getCustomPath(this,"nxTitle.css")}
+			</style>
+            
+            <div class="wrapper">
+				<i class="title-icon"></i> <span class="title-text">${caption}</span>
+			</div>
+        `;
+
+		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
+	}
+}
+
+customElements.define("nx-title", nxTitle);