ninegrid2 6.807.0 → 6.809.0

package/dist/bundle.cjs.js

@@ -120968,25 +120968,33 @@ class nxCollapse extends HTMLElement {
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
+		/**
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
 			this.#target.classList.remove("nx-collapse");
 			this.classList.remove("nx-collapse");
 
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
-		});
+		}); */
 
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
 			// STEP 1: 복원 대상에 애니메이션 클래스 부여
 			this.#target.classList.remove("nx-collapse");
 			this.#target.classList.add("nx-expand"); // expandReveal 적용
 
-			// STEP 2: 실제 화면에 표시
-			this.#target.style.display = this.#targetPrevDisplay;
-			this.style.display = "none"; // 복원 버튼은 사라짐
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
+
 
-			// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
 			setTimeout(() => {
+				// STEP 2: 실제 화면에 표시
+				this.#target.style.display = this.#targetPrevDisplay;
+				this.style.display = "none"; // 복원 버튼은 사라짐
+
+				// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
 				this.#target.classList.remove("nx-expand");
 				//this.#target.style.pointerEvents = "auto";
 			}, 600); // 애니메이션과 동일한 시간

package/dist/bundle.esm.js

@@ -120964,25 +120964,33 @@ class nxCollapse extends HTMLElement {
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
+		/**
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
 			this.#target.classList.remove("nx-collapse");
 			this.classList.remove("nx-collapse");
 
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
-		});
+		}); */
 
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
 			// STEP 1: 복원 대상에 애니메이션 클래스 부여
 			this.#target.classList.remove("nx-collapse");
 			this.#target.classList.add("nx-expand"); // expandReveal 적용
 
-			// STEP 2: 실제 화면에 표시
-			this.#target.style.display = this.#targetPrevDisplay;
-			this.style.display = "none"; // 복원 버튼은 사라짐
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
+
 
-			// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
 			setTimeout(() => {
+				// STEP 2: 실제 화면에 표시
+				this.#target.style.display = this.#targetPrevDisplay;
+				this.style.display = "none"; // 복원 버튼은 사라짐
+
+				// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
 				this.#target.classList.remove("nx-expand");
 				//this.#target.style.pointerEvents = "auto";
 			}, 600); // 애니메이션과 동일한 시간

package/dist/nx/nxCollapse.js

@@ -123,25 +123,33 @@ class nxCollapse extends HTMLElement {
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
+		/**
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
 			this.#target.classList.remove("nx-collapse");
 			this.classList.remove("nx-collapse");
 
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
-		});
+		}); */
 
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
 			// STEP 1: 복원 대상에 애니메이션 클래스 부여
 			this.#target.classList.remove("nx-collapse");
 			this.#target.classList.add("nx-expand"); // expandReveal 적용
 
-			// STEP 2: 실제 화면에 표시
-			this.#target.style.display = this.#targetPrevDisplay;
-			this.style.display = "none"; // 복원 버튼은 사라짐
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
+
 
-			// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
 			setTimeout(() => {
+				// STEP 2: 실제 화면에 표시
+				this.#target.style.display = this.#targetPrevDisplay;
+				this.style.display = "none"; // 복원 버튼은 사라짐
+
+				// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
 				this.#target.classList.remove("nx-expand");
 				//this.#target.style.pointerEvents = "auto";
 			}, 600); // 애니메이션과 동일한 시간

package/package.json

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

package/src/nx/nxCollapse.js

@@ -123,25 +123,33 @@ class nxCollapse extends HTMLElement {
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
+		/**
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
 			this.#target.classList.remove("nx-collapse");
 			this.classList.remove("nx-collapse");
 
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
-		});
+		}); */
 
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
 			// STEP 1: 복원 대상에 애니메이션 클래스 부여
 			this.#target.classList.remove("nx-collapse");
 			this.#target.classList.add("nx-expand"); // expandReveal 적용
 
-			// STEP 2: 실제 화면에 표시
-			this.#target.style.display = this.#targetPrevDisplay;
-			this.style.display = "none"; // 복원 버튼은 사라짐
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
+
 
-			// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
 			setTimeout(() => {
+				// STEP 2: 실제 화면에 표시
+				this.#target.style.display = this.#targetPrevDisplay;
+				this.style.display = "none"; // 복원 버튼은 사라짐
+
+				// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
 				this.#target.classList.remove("nx-expand");
 				//this.#target.style.pointerEvents = "auto";
 			}, 600); // 애니메이션과 동일한 시간