ninegrid2 6.1270.0 → 6.1272.0

package/dist/bundle.cjs.js

@@ -118765,8 +118765,8 @@ class NineGridContainer extends HTMLElement
 		
 
 		//this.querySelectorAll("buttons *").forEach(v => {v.grid = this;});
-		this.querySelectorAll("nx-buttons *").forEach(v => {v.grid = this;});
-		$(this.shadowRoot.querySelector("ng-head").shadowRoot.querySelector("ng-custom")).append(this.querySelectorAll("nx-buttons"));
+		this.querySelectorAll("buttons *").forEach(v => {v.grid = this;});
+		$(this.shadowRoot.querySelector("ng-head").shadowRoot.querySelector("ng-custom")).append(this.querySelectorAll("buttons"));
 
 		this.#prepare();
 
@@ -122260,12 +122260,49 @@ class nxButtons extends HTMLElement {
 	}
 
 	connectedCallback() {
-		if (super.connectedCallback()) this.#init();
+		//if (super.connectedCallback()) this.#init();
 	};
 
 	#init = () => {
 
-		return;
+		const target = this.shadowRoot || this;
+
+		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>
+            
+			${this.originContents}
+        `;
+
+		//console.log(htmlTmpl);
+
+		target.appendChild(htmlTmpl.content.cloneNode(true));
+
+		target.addEventListener('click', (e) => {
+
+			const btn = e.target.closest('button');
+			if (!btn) return;
+
+			//const actionName = btn.getAttribute('on-click') || btn.getAttribute('onClick') || btn.getAttribute('onclick');
+
+			const actionName = btn.getAttribute('on-click');
+
+			console.log(btn, actionName, this[actionName]);
+			console.log(typeof this[actionName]);
+			if (actionName) {
+				// 1. 먼저 엘리먼트 자체(this)에 해당 이름의 함수가 있는지 확인
+				if (typeof this[actionName] === 'function') {
+					this[actionName](e);
+				}
+				// 2. 없으면 전역 window에서 확인
+				else if (typeof window[actionName] === 'function') {
+					window[actionName](e);
+				}
+			}
+		});
 	}
 }
 

package/dist/bundle.esm.js

@@ -118761,8 +118761,8 @@ class NineGridContainer extends HTMLElement
 		
 
 		//this.querySelectorAll("buttons *").forEach(v => {v.grid = this;});
-		this.querySelectorAll("nx-buttons *").forEach(v => {v.grid = this;});
-		$(this.shadowRoot.querySelector("ng-head").shadowRoot.querySelector("ng-custom")).append(this.querySelectorAll("nx-buttons"));
+		this.querySelectorAll("buttons *").forEach(v => {v.grid = this;});
+		$(this.shadowRoot.querySelector("ng-head").shadowRoot.querySelector("ng-custom")).append(this.querySelectorAll("buttons"));
 
 		this.#prepare();
 
@@ -122256,12 +122256,49 @@ class nxButtons extends HTMLElement {
 	}
 
 	connectedCallback() {
-		if (super.connectedCallback()) this.#init();
+		//if (super.connectedCallback()) this.#init();
 	};
 
 	#init = () => {
 
-		return;
+		const target = this.shadowRoot || this;
+
+		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>
+            
+			${this.originContents}
+        `;
+
+		//console.log(htmlTmpl);
+
+		target.appendChild(htmlTmpl.content.cloneNode(true));
+
+		target.addEventListener('click', (e) => {
+
+			const btn = e.target.closest('button');
+			if (!btn) return;
+
+			//const actionName = btn.getAttribute('on-click') || btn.getAttribute('onClick') || btn.getAttribute('onclick');
+
+			const actionName = btn.getAttribute('on-click');
+
+			console.log(btn, actionName, this[actionName]);
+			console.log(typeof this[actionName]);
+			if (actionName) {
+				// 1. 먼저 엘리먼트 자체(this)에 해당 이름의 함수가 있는지 확인
+				if (typeof this[actionName] === 'function') {
+					this[actionName](e);
+				}
+				// 2. 없으면 전역 window에서 확인
+				else if (typeof window[actionName] === 'function') {
+					window[actionName](e);
+				}
+			}
+		});
 	}
 }
 

package/dist/etc/ninegridContainer.js

@@ -650,8 +650,8 @@ export class NineGridContainer extends HTMLElement
 		
 
 		//this.querySelectorAll("buttons *").forEach(v => {v.grid = this;});
-		this.querySelectorAll("nx-buttons *").forEach(v => {v.grid = this;});
-		$(this.shadowRoot.querySelector("ng-head").shadowRoot.querySelector("ng-custom")).append(this.querySelectorAll("nx-buttons"));
+		this.querySelectorAll("buttons *").forEach(v => {v.grid = this;});
+		$(this.shadowRoot.querySelector("ng-head").shadowRoot.querySelector("ng-custom")).append(this.querySelectorAll("buttons"));
 
 		this.#prepare();
 

package/dist/nx/nxButtons.js

@@ -8,13 +8,11 @@ class nxButtons extends HTMLElement {
 	}
 
 	connectedCallback() {
-		if (super.connectedCallback()) this.#init();
+		//if (super.connectedCallback()) this.#init();
 	};
 
 	#init = () => {
 
-		return;
-
 		const target = this.shadowRoot || this;
 
 		const htmlTmpl = document.createElement("template");

package/package.json

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

package/src/etc/ninegridContainer.js

@@ -650,8 +650,8 @@ export class NineGridContainer extends HTMLElement
 		
 
 		//this.querySelectorAll("buttons *").forEach(v => {v.grid = this;});
-		this.querySelectorAll("nx-buttons *").forEach(v => {v.grid = this;});
-		$(this.shadowRoot.querySelector("ng-head").shadowRoot.querySelector("ng-custom")).append(this.querySelectorAll("nx-buttons"));
+		this.querySelectorAll("buttons *").forEach(v => {v.grid = this;});
+		$(this.shadowRoot.querySelector("ng-head").shadowRoot.querySelector("ng-custom")).append(this.querySelectorAll("buttons"));
 
 		this.#prepare();
 

package/src/nx/nxButtons.js

@@ -8,13 +8,11 @@ class nxButtons extends HTMLElement {
 	}
 
 	connectedCallback() {
-		if (super.connectedCallback()) this.#init();
+		//if (super.connectedCallback()) this.#init();
 	};
 
 	#init = () => {
 
-		return;
-
 		const target = this.shadowRoot || this;
 
 		const htmlTmpl = document.createElement("template");