ninegrid2 6.896.0 → 6.897.0

package/dist/bundle.cjs.js

@@ -119317,99 +119317,127 @@ class nxDialog extends HTMLElement
 {
 	//#owner;
 	#shift;
-	
+
 	constructor () {
 		super();
 	}
-	
+
 	connectedCallback() {
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
-		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		// customFile1과 customFile2 변수가 동일한 역할을 하는 것으로 보이며,
+		// ninegrid.getCustomPath에서 이미 "nxDialog.css"를 가져오는 로직이 있으므로
+		// 이 부분을 간소화할 수 있습니다.
+		// 여기서는 현재 코드를 최대한 유지하면서 fadeIn/fadeOut만 추가합니다.
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";` : "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
-		
-		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
-				${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
-				${customFile1 || ""}
-				${customFile2 || ""}
-			</style>
-		
-			<dialog>
-				<div class="head">
-					<div class="rect1"></div>
-					<div class="rect2"></div>
-					<div class="rect3"></div>
-					<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
-					<span class="title"></span>
-					<span class="sub-title"></span>
-					<buttons>
-						<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
-						<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
-						<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
-					</buttons>
-				</div>
-				<div class="contents">
-					<div class="left">
-						<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
-					</div>
-					<div class="body">
-						${v}
-					</div>
-					<div class="close2">
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
-						</svg>
-					</div>
-				</div>
-			</dialog>
-		`;
-		
-		//this.#owner = this.getRootNode().host.closest("nine-grid");
-		
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
+             ${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
+             ${customFile1 || ""}
+             ${customFile2 || ""}
+          </style>
+       
+          <dialog>
+             <div class="head">
+                <div class="rect1"></div>
+                <div class="rect2"></div>
+                <div class="rect3"></div>
+                <ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
+                <span class="title"></span>
+                <span class="sub-title"></span>
+                <buttons>
+                   <ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
+                   <ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
+                   <ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
+                </buttons>
+             </div>
+             <div class="contents">
+                <div class="left">
+                   <span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
+                </div>
+                <div class="body">
+                   ${v}
+                </div>
+                <div class="close2">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+                   </svg>
+                </div>
+             </div>
+          </dialog>
+        `;
+
 		$(".title", this).html("Details");
-		
 		this.#init();
 	};
-	
+
+	// showModal 메서드 수정
 	showModal = () => {
-		this.querySelector('dialog').showModal();
+		const dialogElement = this.querySelector('dialog');
+
+		// 다이얼로그가 열릴 때 ':host(.fade)' CSS 클래스를 추가합니다.
+		// ':host'는 커스텀 엘리먼트 자체(nx-dialog)를 의미합니다.
+		this.classList.add('fade');
+
+		// 애니메이션이 끝나고 나서 showModal을 호출하도록 setTimeout을 사용할 수도 있지만,
+		// CSS 애니메이션은 자동으로 시작되므로 이 방식이 더 간단합니다.
+		dialogElement.showModal();
 	};
-	
+
+	// close 메서드 수정
 	close = () => {
-		$(".head", this)	.off('mousedown',	this.#onMouseDown);
-		$(".head", this)	.off('touchstart',	this.#onTouchStart);
-		$(document)			.off('mouseup',		this.#onMouseUp);
-		$(document)			.off('touchend',	this.#onTouchEnd);
-		$(document)			.off('mousemove',	this.#onMouseMove);
-		$(document)			.off("touchmove",	this.#onTouchMove);
-		
-		this.querySelector('dialog').close();
+		const dialogElement = this.querySelector('dialog');
+
+		// 닫기 애니메이션을 위해 'out' 클래스를 추가합니다.
+		dialogElement.classList.add("out");
+
+		// CSS 애니메이션 지속 시간 (1000ms = 1초) 후에 dialog.close()를 호출하여 실제로 닫습니다.
+		// 이는 CSS의 fadeOut 애니메이션 지속 시간과 일치해야 합니다.
+		// nxDialog.css의 @keyframes fadeOut { ... } 에 명시된 animation-duration을 확인하세요.
+		// 현재 CSS에는 dialog.out에 대한 animation-duration이 없으므로, 명시적으로 1초를 가정합니다.
+		// 만약 다른 애니메이션 (.run, .moveUp 등)과 동시에 사용된다면 이 부분은 더 복잡해질 수 있습니다.
+		setTimeout(() => {
+			// 이벤트 리스너 제거는 dialog가 완전히 닫힌 후에 하는 것이 안전합니다.
+			// 그렇지 않으면 애니메이션 도중 클릭 등이 작동하지 않을 수 있습니다.
+			$(".head", this)   .off('mousedown',  this.#onMouseDown);
+			$(".head", this)   .off('touchstart', this.#onTouchStart);
+			$(document)          .off('mouseup',       this.#onMouseUp);
+			$(document)          .off('touchend',   this.#onTouchEnd);
+			$(document)          .off('mousemove',  this.#onMouseMove);
+			$(document)          .off("touchmove",  this.#onTouchMove);
+
+			dialogElement.close();
+			// 다이얼로그가 닫힌 후에는 애니메이션 클래스를 제거하여 다음 번에 열릴 때
+			// 다시 애니메이션이 적용될 수 있도록 합니다.
+			dialogElement.classList.remove("out");
+			this.classList.remove('fade'); // 호스트 요소에서도 'fade' 클래스 제거
+		}, 1000); // fadeOut 애니메이션 지속 시간에 맞춥니다 (현재 CSS에서 1초로 정의됨)
 	};
-	
+
 	#init = () => {
+		// 기존의 close 버튼 클릭 핸들러
 		$(".close,.close2", this).on("click", e => {
-			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
-			setTimeout(() => { this.close(); }, 300);
+			// 이전에 여기에 있던 'dialog.out' 클래스 추가 로직은 이제 close() 메서드 안으로 들어갑니다.
+			this.close();
 		});
-		
-		$(".head", this)	.on('mousedown',	this.#onMouseDown);
-		$(".head", this)	.on('touchstart',	this.#onTouchStart);
-		$(document)			.on('mouseup',		this.#onMouseUp);
-		$(document)			.on('touchend',		this.#onTouchEnd);
+
+		$(".head", this)   .on('mousedown',   this.#onMouseDown);
+		$(".head", this)   .on('touchstart',  this.#onTouchStart);
+		$(document)          .on('mouseup',    this.#onMouseUp);
+		$(document)          .on('touchend',       this.#onTouchEnd);
 	};
-	
+
 
 	#onMouseDown = e => {
 		if (e.target.closest("buttons")) return;
 		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
 
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.clientX - rect.x,
 			y : e.clientY - rect.y,
@@ -119417,33 +119445,33 @@ class nxDialog extends HTMLElement
 
 		$(document).on('mousemove', this.#onMouseMove);
 	};
-	
-	
+
+
 	#onMouseMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
 	};
-	
+
 	#onMouseUp = e => {
 		$(document).off('mousemove', this.#onMouseMove);
 	};
-	
+
 	#onTouchStart = e => {
 		if (e.target.closest("buttons")) return;
-		
+
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.changedTouches[0].pageX - rect.x,
 			y : e.changedTouches[0].pageY - rect.y,
 		};
-		
+
 		$(document).on("touchmove", this.#onTouchMove);
 	};
-	
+
 	#onTouchMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
 	};
-	
+
 	#onTouchEnd = e => {
 		$(document).off('touchmove', this.#onTouchMove);
 	};

package/dist/bundle.esm.js

@@ -119313,99 +119313,127 @@ class nxDialog extends HTMLElement
 {
 	//#owner;
 	#shift;
-	
+
 	constructor () {
 		super();
 	}
-	
+
 	connectedCallback() {
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
-		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		// customFile1과 customFile2 변수가 동일한 역할을 하는 것으로 보이며,
+		// ninegrid.getCustomPath에서 이미 "nxDialog.css"를 가져오는 로직이 있으므로
+		// 이 부분을 간소화할 수 있습니다.
+		// 여기서는 현재 코드를 최대한 유지하면서 fadeIn/fadeOut만 추가합니다.
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";` : "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
-		
-		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
-				${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
-				${customFile1 || ""}
-				${customFile2 || ""}
-			</style>
-		
-			<dialog>
-				<div class="head">
-					<div class="rect1"></div>
-					<div class="rect2"></div>
-					<div class="rect3"></div>
-					<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
-					<span class="title"></span>
-					<span class="sub-title"></span>
-					<buttons>
-						<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
-						<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
-						<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
-					</buttons>
-				</div>
-				<div class="contents">
-					<div class="left">
-						<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
-					</div>
-					<div class="body">
-						${v}
-					</div>
-					<div class="close2">
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
-						</svg>
-					</div>
-				</div>
-			</dialog>
-		`;
-		
-		//this.#owner = this.getRootNode().host.closest("nine-grid");
-		
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
+             ${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
+             ${customFile1 || ""}
+             ${customFile2 || ""}
+          </style>
+       
+          <dialog>
+             <div class="head">
+                <div class="rect1"></div>
+                <div class="rect2"></div>
+                <div class="rect3"></div>
+                <ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
+                <span class="title"></span>
+                <span class="sub-title"></span>
+                <buttons>
+                   <ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
+                   <ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
+                   <ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
+                </buttons>
+             </div>
+             <div class="contents">
+                <div class="left">
+                   <span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
+                </div>
+                <div class="body">
+                   ${v}
+                </div>
+                <div class="close2">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+                   </svg>
+                </div>
+             </div>
+          </dialog>
+        `;
+
 		$(".title", this).html("Details");
-		
 		this.#init();
 	};
-	
+
+	// showModal 메서드 수정
 	showModal = () => {
-		this.querySelector('dialog').showModal();
+		const dialogElement = this.querySelector('dialog');
+
+		// 다이얼로그가 열릴 때 ':host(.fade)' CSS 클래스를 추가합니다.
+		// ':host'는 커스텀 엘리먼트 자체(nx-dialog)를 의미합니다.
+		this.classList.add('fade');
+
+		// 애니메이션이 끝나고 나서 showModal을 호출하도록 setTimeout을 사용할 수도 있지만,
+		// CSS 애니메이션은 자동으로 시작되므로 이 방식이 더 간단합니다.
+		dialogElement.showModal();
 	};
-	
+
+	// close 메서드 수정
 	close = () => {
-		$(".head", this)	.off('mousedown',	this.#onMouseDown);
-		$(".head", this)	.off('touchstart',	this.#onTouchStart);
-		$(document)			.off('mouseup',		this.#onMouseUp);
-		$(document)			.off('touchend',	this.#onTouchEnd);
-		$(document)			.off('mousemove',	this.#onMouseMove);
-		$(document)			.off("touchmove",	this.#onTouchMove);
-		
-		this.querySelector('dialog').close();
+		const dialogElement = this.querySelector('dialog');
+
+		// 닫기 애니메이션을 위해 'out' 클래스를 추가합니다.
+		dialogElement.classList.add("out");
+
+		// CSS 애니메이션 지속 시간 (1000ms = 1초) 후에 dialog.close()를 호출하여 실제로 닫습니다.
+		// 이는 CSS의 fadeOut 애니메이션 지속 시간과 일치해야 합니다.
+		// nxDialog.css의 @keyframes fadeOut { ... } 에 명시된 animation-duration을 확인하세요.
+		// 현재 CSS에는 dialog.out에 대한 animation-duration이 없으므로, 명시적으로 1초를 가정합니다.
+		// 만약 다른 애니메이션 (.run, .moveUp 등)과 동시에 사용된다면 이 부분은 더 복잡해질 수 있습니다.
+		setTimeout(() => {
+			// 이벤트 리스너 제거는 dialog가 완전히 닫힌 후에 하는 것이 안전합니다.
+			// 그렇지 않으면 애니메이션 도중 클릭 등이 작동하지 않을 수 있습니다.
+			$(".head", this)   .off('mousedown',  this.#onMouseDown);
+			$(".head", this)   .off('touchstart', this.#onTouchStart);
+			$(document)          .off('mouseup',       this.#onMouseUp);
+			$(document)          .off('touchend',   this.#onTouchEnd);
+			$(document)          .off('mousemove',  this.#onMouseMove);
+			$(document)          .off("touchmove",  this.#onTouchMove);
+
+			dialogElement.close();
+			// 다이얼로그가 닫힌 후에는 애니메이션 클래스를 제거하여 다음 번에 열릴 때
+			// 다시 애니메이션이 적용될 수 있도록 합니다.
+			dialogElement.classList.remove("out");
+			this.classList.remove('fade'); // 호스트 요소에서도 'fade' 클래스 제거
+		}, 1000); // fadeOut 애니메이션 지속 시간에 맞춥니다 (현재 CSS에서 1초로 정의됨)
 	};
-	
+
 	#init = () => {
+		// 기존의 close 버튼 클릭 핸들러
 		$(".close,.close2", this).on("click", e => {
-			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
-			setTimeout(() => { this.close(); }, 300);
+			// 이전에 여기에 있던 'dialog.out' 클래스 추가 로직은 이제 close() 메서드 안으로 들어갑니다.
+			this.close();
 		});
-		
-		$(".head", this)	.on('mousedown',	this.#onMouseDown);
-		$(".head", this)	.on('touchstart',	this.#onTouchStart);
-		$(document)			.on('mouseup',		this.#onMouseUp);
-		$(document)			.on('touchend',		this.#onTouchEnd);
+
+		$(".head", this)   .on('mousedown',   this.#onMouseDown);
+		$(".head", this)   .on('touchstart',  this.#onTouchStart);
+		$(document)          .on('mouseup',    this.#onMouseUp);
+		$(document)          .on('touchend',       this.#onTouchEnd);
 	};
-	
+
 
 	#onMouseDown = e => {
 		if (e.target.closest("buttons")) return;
 		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
 
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.clientX - rect.x,
 			y : e.clientY - rect.y,
@@ -119413,33 +119441,33 @@ class nxDialog extends HTMLElement
 
 		$(document).on('mousemove', this.#onMouseMove);
 	};
-	
-	
+
+
 	#onMouseMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
 	};
-	
+
 	#onMouseUp = e => {
 		$(document).off('mousemove', this.#onMouseMove);
 	};
-	
+
 	#onTouchStart = e => {
 		if (e.target.closest("buttons")) return;
-		
+
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.changedTouches[0].pageX - rect.x,
 			y : e.changedTouches[0].pageY - rect.y,
 		};
-		
+
 		$(document).on("touchmove", this.#onTouchMove);
 	};
-	
+
 	#onTouchMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
 	};
-	
+
 	#onTouchEnd = e => {
 		$(document).off('touchmove', this.#onTouchMove);
 	};

package/dist/etc/nxDialog.js

@@ -4,99 +4,127 @@ class nxDialog extends HTMLElement
 {
 	//#owner;
 	#shift;
-	
+
 	constructor () {
 		super();
 	}
-	
+
 	connectedCallback() {
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
-		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		// customFile1과 customFile2 변수가 동일한 역할을 하는 것으로 보이며,
+		// ninegrid.getCustomPath에서 이미 "nxDialog.css"를 가져오는 로직이 있으므로
+		// 이 부분을 간소화할 수 있습니다.
+		// 여기서는 현재 코드를 최대한 유지하면서 fadeIn/fadeOut만 추가합니다.
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";` : "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
-		
-		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
-				${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
-				${customFile1 || ""}
-				${customFile2 || ""}
-			</style>
-		
-			<dialog>
-				<div class="head">
-					<div class="rect1"></div>
-					<div class="rect2"></div>
-					<div class="rect3"></div>
-					<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
-					<span class="title"></span>
-					<span class="sub-title"></span>
-					<buttons>
-						<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
-						<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
-						<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
-					</buttons>
-				</div>
-				<div class="contents">
-					<div class="left">
-						<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
-					</div>
-					<div class="body">
-						${v}
-					</div>
-					<div class="close2">
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
-						</svg>
-					</div>
-				</div>
-			</dialog>
-		`;
-		
-		//this.#owner = this.getRootNode().host.closest("nine-grid");
-		
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
+             ${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
+             ${customFile1 || ""}
+             ${customFile2 || ""}
+          </style>
+       
+          <dialog>
+             <div class="head">
+                <div class="rect1"></div>
+                <div class="rect2"></div>
+                <div class="rect3"></div>
+                <ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
+                <span class="title"></span>
+                <span class="sub-title"></span>
+                <buttons>
+                   <ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
+                   <ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
+                   <ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
+                </buttons>
+             </div>
+             <div class="contents">
+                <div class="left">
+                   <span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
+                </div>
+                <div class="body">
+                   ${v}
+                </div>
+                <div class="close2">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+                   </svg>
+                </div>
+             </div>
+          </dialog>
+        `;
+
 		$(".title", this).html("Details");
-		
 		this.#init();
 	};
-	
+
+	// showModal 메서드 수정
 	showModal = () => {
-		this.querySelector('dialog').showModal();
+		const dialogElement = this.querySelector('dialog');
+
+		// 다이얼로그가 열릴 때 ':host(.fade)' CSS 클래스를 추가합니다.
+		// ':host'는 커스텀 엘리먼트 자체(nx-dialog)를 의미합니다.
+		this.classList.add('fade');
+
+		// 애니메이션이 끝나고 나서 showModal을 호출하도록 setTimeout을 사용할 수도 있지만,
+		// CSS 애니메이션은 자동으로 시작되므로 이 방식이 더 간단합니다.
+		dialogElement.showModal();
 	};
-	
+
+	// close 메서드 수정
 	close = () => {
-		$(".head", this)	.off('mousedown',	this.#onMouseDown);
-		$(".head", this)	.off('touchstart',	this.#onTouchStart);
-		$(document)			.off('mouseup',		this.#onMouseUp);
-		$(document)			.off('touchend',	this.#onTouchEnd);
-		$(document)			.off('mousemove',	this.#onMouseMove);
-		$(document)			.off("touchmove",	this.#onTouchMove);
-		
-		this.querySelector('dialog').close();
+		const dialogElement = this.querySelector('dialog');
+
+		// 닫기 애니메이션을 위해 'out' 클래스를 추가합니다.
+		dialogElement.classList.add("out");
+
+		// CSS 애니메이션 지속 시간 (1000ms = 1초) 후에 dialog.close()를 호출하여 실제로 닫습니다.
+		// 이는 CSS의 fadeOut 애니메이션 지속 시간과 일치해야 합니다.
+		// nxDialog.css의 @keyframes fadeOut { ... } 에 명시된 animation-duration을 확인하세요.
+		// 현재 CSS에는 dialog.out에 대한 animation-duration이 없으므로, 명시적으로 1초를 가정합니다.
+		// 만약 다른 애니메이션 (.run, .moveUp 등)과 동시에 사용된다면 이 부분은 더 복잡해질 수 있습니다.
+		setTimeout(() => {
+			// 이벤트 리스너 제거는 dialog가 완전히 닫힌 후에 하는 것이 안전합니다.
+			// 그렇지 않으면 애니메이션 도중 클릭 등이 작동하지 않을 수 있습니다.
+			$(".head", this)   .off('mousedown',  this.#onMouseDown);
+			$(".head", this)   .off('touchstart', this.#onTouchStart);
+			$(document)          .off('mouseup',       this.#onMouseUp);
+			$(document)          .off('touchend',   this.#onTouchEnd);
+			$(document)          .off('mousemove',  this.#onMouseMove);
+			$(document)          .off("touchmove",  this.#onTouchMove);
+
+			dialogElement.close();
+			// 다이얼로그가 닫힌 후에는 애니메이션 클래스를 제거하여 다음 번에 열릴 때
+			// 다시 애니메이션이 적용될 수 있도록 합니다.
+			dialogElement.classList.remove("out");
+			this.classList.remove('fade'); // 호스트 요소에서도 'fade' 클래스 제거
+		}, 1000); // fadeOut 애니메이션 지속 시간에 맞춥니다 (현재 CSS에서 1초로 정의됨)
 	};
-	
+
 	#init = () => {
+		// 기존의 close 버튼 클릭 핸들러
 		$(".close,.close2", this).on("click", e => {
-			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
-			setTimeout(() => { this.close(); }, 300);
+			// 이전에 여기에 있던 'dialog.out' 클래스 추가 로직은 이제 close() 메서드 안으로 들어갑니다.
+			this.close();
 		});
-		
-		$(".head", this)	.on('mousedown',	this.#onMouseDown);
-		$(".head", this)	.on('touchstart',	this.#onTouchStart);
-		$(document)			.on('mouseup',		this.#onMouseUp);
-		$(document)			.on('touchend',		this.#onTouchEnd);
+
+		$(".head", this)   .on('mousedown',   this.#onMouseDown);
+		$(".head", this)   .on('touchstart',  this.#onTouchStart);
+		$(document)          .on('mouseup',    this.#onMouseUp);
+		$(document)          .on('touchend',       this.#onTouchEnd);
 	};
-	
+
 
 	#onMouseDown = e => {
 		if (e.target.closest("buttons")) return;
 		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
 
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.clientX - rect.x,
 			y : e.clientY - rect.y,
@@ -104,36 +132,36 @@ class nxDialog extends HTMLElement
 
 		$(document).on('mousemove', this.#onMouseMove);
 	};
-	
-	
+
+
 	#onMouseMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
 	};
-	
+
 	#onMouseUp = e => {
 		$(document).off('mousemove', this.#onMouseMove);
 	};
-	
+
 	#onTouchStart = e => {
 		if (e.target.closest("buttons")) return;
-		
+
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.changedTouches[0].pageX - rect.x,
 			y : e.changedTouches[0].pageY - rect.y,
 		}
-		
+
 		$(document).on("touchmove", this.#onTouchMove);
 	};
-	
+
 	#onTouchMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
 	};
-	
+
 	#onTouchEnd = e => {
 		$(document).off('touchmove', this.#onTouchMove);
 	};
 }
 
-customElements.define("nx-dialog", nxDialog);
+customElements.define("nx-dialog", nxDialog);

package/package.json

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

package/src/etc/nxDialog.js

@@ -4,99 +4,127 @@ class nxDialog extends HTMLElement
 {
 	//#owner;
 	#shift;
-	
+
 	constructor () {
 		super();
 	}
-	
+
 	connectedCallback() {
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
-		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		// customFile1과 customFile2 변수가 동일한 역할을 하는 것으로 보이며,
+		// ninegrid.getCustomPath에서 이미 "nxDialog.css"를 가져오는 로직이 있으므로
+		// 이 부분을 간소화할 수 있습니다.
+		// 여기서는 현재 코드를 최대한 유지하면서 fadeIn/fadeOut만 추가합니다.
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";` : "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
-		
-		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
-				${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
-				${customFile1 || ""}
-				${customFile2 || ""}
-			</style>
-		
-			<dialog>
-				<div class="head">
-					<div class="rect1"></div>
-					<div class="rect2"></div>
-					<div class="rect3"></div>
-					<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
-					<span class="title"></span>
-					<span class="sub-title"></span>
-					<buttons>
-						<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
-						<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
-						<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
-					</buttons>
-				</div>
-				<div class="contents">
-					<div class="left">
-						<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
-					</div>
-					<div class="body">
-						${v}
-					</div>
-					<div class="close2">
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-							<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
-						</svg>
-					</div>
-				</div>
-			</dialog>
-		`;
-		
-		//this.#owner = this.getRootNode().host.closest("nine-grid");
-		
+          <style>
+             @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
+             ${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
+             ${customFile1 || ""}
+             ${customFile2 || ""}
+          </style>
+       
+          <dialog>
+             <div class="head">
+                <div class="rect1"></div>
+                <div class="rect2"></div>
+                <div class="rect3"></div>
+                <ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
+                <span class="title"></span>
+                <span class="sub-title"></span>
+                <buttons>
+                   <ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
+                   <ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
+                   <ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
+                </buttons>
+             </div>
+             <div class="contents">
+                <div class="left">
+                   <span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
+                </div>
+                <div class="body">
+                   ${v}
+                </div>
+                <div class="close2">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+                   </svg>
+                </div>
+             </div>
+          </dialog>
+        `;
+
 		$(".title", this).html("Details");
-		
 		this.#init();
 	};
-	
+
+	// showModal 메서드 수정
 	showModal = () => {
-		this.querySelector('dialog').showModal();
+		const dialogElement = this.querySelector('dialog');
+
+		// 다이얼로그가 열릴 때 ':host(.fade)' CSS 클래스를 추가합니다.
+		// ':host'는 커스텀 엘리먼트 자체(nx-dialog)를 의미합니다.
+		this.classList.add('fade');
+
+		// 애니메이션이 끝나고 나서 showModal을 호출하도록 setTimeout을 사용할 수도 있지만,
+		// CSS 애니메이션은 자동으로 시작되므로 이 방식이 더 간단합니다.
+		dialogElement.showModal();
 	};
-	
+
+	// close 메서드 수정
 	close = () => {
-		$(".head", this)	.off('mousedown',	this.#onMouseDown);
-		$(".head", this)	.off('touchstart',	this.#onTouchStart);
-		$(document)			.off('mouseup',		this.#onMouseUp);
-		$(document)			.off('touchend',	this.#onTouchEnd);
-		$(document)			.off('mousemove',	this.#onMouseMove);
-		$(document)			.off("touchmove",	this.#onTouchMove);
-		
-		this.querySelector('dialog').close();
+		const dialogElement = this.querySelector('dialog');
+
+		// 닫기 애니메이션을 위해 'out' 클래스를 추가합니다.
+		dialogElement.classList.add("out");
+
+		// CSS 애니메이션 지속 시간 (1000ms = 1초) 후에 dialog.close()를 호출하여 실제로 닫습니다.
+		// 이는 CSS의 fadeOut 애니메이션 지속 시간과 일치해야 합니다.
+		// nxDialog.css의 @keyframes fadeOut { ... } 에 명시된 animation-duration을 확인하세요.
+		// 현재 CSS에는 dialog.out에 대한 animation-duration이 없으므로, 명시적으로 1초를 가정합니다.
+		// 만약 다른 애니메이션 (.run, .moveUp 등)과 동시에 사용된다면 이 부분은 더 복잡해질 수 있습니다.
+		setTimeout(() => {
+			// 이벤트 리스너 제거는 dialog가 완전히 닫힌 후에 하는 것이 안전합니다.
+			// 그렇지 않으면 애니메이션 도중 클릭 등이 작동하지 않을 수 있습니다.
+			$(".head", this)   .off('mousedown',  this.#onMouseDown);
+			$(".head", this)   .off('touchstart', this.#onTouchStart);
+			$(document)          .off('mouseup',       this.#onMouseUp);
+			$(document)          .off('touchend',   this.#onTouchEnd);
+			$(document)          .off('mousemove',  this.#onMouseMove);
+			$(document)          .off("touchmove",  this.#onTouchMove);
+
+			dialogElement.close();
+			// 다이얼로그가 닫힌 후에는 애니메이션 클래스를 제거하여 다음 번에 열릴 때
+			// 다시 애니메이션이 적용될 수 있도록 합니다.
+			dialogElement.classList.remove("out");
+			this.classList.remove('fade'); // 호스트 요소에서도 'fade' 클래스 제거
+		}, 1000); // fadeOut 애니메이션 지속 시간에 맞춥니다 (현재 CSS에서 1초로 정의됨)
 	};
-	
+
 	#init = () => {
+		// 기존의 close 버튼 클릭 핸들러
 		$(".close,.close2", this).on("click", e => {
-			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
-			setTimeout(() => { this.close(); }, 300);
+			// 이전에 여기에 있던 'dialog.out' 클래스 추가 로직은 이제 close() 메서드 안으로 들어갑니다.
+			this.close();
 		});
-		
-		$(".head", this)	.on('mousedown',	this.#onMouseDown);
-		$(".head", this)	.on('touchstart',	this.#onTouchStart);
-		$(document)			.on('mouseup',		this.#onMouseUp);
-		$(document)			.on('touchend',		this.#onTouchEnd);
+
+		$(".head", this)   .on('mousedown',   this.#onMouseDown);
+		$(".head", this)   .on('touchstart',  this.#onTouchStart);
+		$(document)          .on('mouseup',    this.#onMouseUp);
+		$(document)          .on('touchend',       this.#onTouchEnd);
 	};
-	
+
 
 	#onMouseDown = e => {
 		if (e.target.closest("buttons")) return;
 		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
 
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.clientX - rect.x,
 			y : e.clientY - rect.y,
@@ -104,36 +132,36 @@ class nxDialog extends HTMLElement
 
 		$(document).on('mousemove', this.#onMouseMove);
 	};
-	
-	
+
+
 	#onMouseMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
 	};
-	
+
 	#onMouseUp = e => {
 		$(document).off('mousemove', this.#onMouseMove);
 	};
-	
+
 	#onTouchStart = e => {
 		if (e.target.closest("buttons")) return;
-		
+
 		var rect = this.querySelector('dialog').getBoundingClientRect();
-		
+
 		this.#shift = {
 			x : e.changedTouches[0].pageX - rect.x,
 			y : e.changedTouches[0].pageY - rect.y,
 		}
-		
+
 		$(document).on("touchmove", this.#onTouchMove);
 	};
-	
+
 	#onTouchMove = e => {
 		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
 	};
-	
+
 	#onTouchEnd = e => {
 		$(document).off('touchmove', this.#onTouchMove);
 	};
 }
 
-customElements.define("nx-dialog", nxDialog);
+customElements.define("nx-dialog", nxDialog);