ninegrid2 6.804.0 → 6.807.0

package/dist/bundle.cjs.js

@@ -120908,11 +120908,16 @@ class nxCollapse extends HTMLElement {
 					transform: scale(1.2); /* 살짝 확대 */
 				}
 				
-				${shadowRoot ? ":host(.shrinking)" : ".shrinking"} {
+				${shadowRoot ? ":host(.nx-collapse)" : ".nx-collapse"} {
 					animation: collapseShrink 0.7s ease forwards;
 					pointer-events: none; /* 클릭 방지 */
 				}
-					
+				
+				${shadowRoot ? ":host(.nx-expand)" : ".nx-expand"} {
+					animation: expandShrink 0.6s ease forwards;
+					pointer-events: none; /* 클릭 방지 */
+				}
+				
 				@keyframes collapseShrink {
 					0% {
 						opacity: 1;
@@ -120925,52 +120930,68 @@ class nxCollapse extends HTMLElement {
 						transform-origin: top right;
 					}
 				}
+				
+				@keyframes expandShrink {
+					0% {
+						opacity: 0;
+						transform: scale(0.5);
+						transform-origin: top right;
+					}
+					100% {
+						opacity: 1;
+						transform: scale(1);
+						transform-origin: top right;
+					}
+				}
 			`;
 
-			console.log(style);
-
 			(shadowRoot || this.#target).appendChild(style);
 
 			// collapse 시 target 숨기고 복원 버튼 등장
 			collapseBtn.addEventListener("click", () => {
 				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
 				// STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
-				this.#target.classList.add("shrinking");
+				this.#target.classList.add("nx-collapse");
 
 				setTimeout(() => {
 					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
-
 					this.style.display = "inline-block";
-					this.classList.add("appearing");
+					this.classList.add("nx-collapse");
 				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
 
 				setTimeout(() => {
 					// STEP 3: 실제 target 숨기기
 					this.#targetPrevDisplay = this.#target.style.display;
 					this.#target.style.display = "none";
-				}, 800); // shrinking 애니메이션이 끝나고 실제 제거
+				}, 500); // shrinking 애니메이션이 끝나고 실제 제거
 			});
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
-			this.#target.classList.remove("shrinking");
-			this.classList.remove("appearing");
+			this.#target.classList.remove("nx-collapse");
+			this.classList.remove("nx-collapse");
 
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
 		});
-	}
 
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
+		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			// STEP 1: 복원 대상에 애니메이션 클래스 부여
+			this.#target.classList.remove("nx-collapse");
+			this.#target.classList.add("nx-expand"); // expandReveal 적용
 
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
+			// STEP 2: 실제 화면에 표시
+			this.#target.style.display = this.#targetPrevDisplay;
+			this.style.display = "none"; // 복원 버튼은 사라짐
+
+			// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
+			setTimeout(() => {
+				this.#target.classList.remove("nx-expand");
+				//this.#target.style.pointerEvents = "auto";
+			}, 600); // 애니메이션과 동일한 시간
 		});
+
 	}
 }
 

package/dist/bundle.esm.js

@@ -120904,11 +120904,16 @@ class nxCollapse extends HTMLElement {
 					transform: scale(1.2); /* 살짝 확대 */
 				}
 				
-				${shadowRoot ? ":host(.shrinking)" : ".shrinking"} {
+				${shadowRoot ? ":host(.nx-collapse)" : ".nx-collapse"} {
 					animation: collapseShrink 0.7s ease forwards;
 					pointer-events: none; /* 클릭 방지 */
 				}
-					
+				
+				${shadowRoot ? ":host(.nx-expand)" : ".nx-expand"} {
+					animation: expandShrink 0.6s ease forwards;
+					pointer-events: none; /* 클릭 방지 */
+				}
+				
 				@keyframes collapseShrink {
 					0% {
 						opacity: 1;
@@ -120921,52 +120926,68 @@ class nxCollapse extends HTMLElement {
 						transform-origin: top right;
 					}
 				}
+				
+				@keyframes expandShrink {
+					0% {
+						opacity: 0;
+						transform: scale(0.5);
+						transform-origin: top right;
+					}
+					100% {
+						opacity: 1;
+						transform: scale(1);
+						transform-origin: top right;
+					}
+				}
 			`;
 
-			console.log(style);
-
 			(shadowRoot || this.#target).appendChild(style);
 
 			// collapse 시 target 숨기고 복원 버튼 등장
 			collapseBtn.addEventListener("click", () => {
 				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
 				// STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
-				this.#target.classList.add("shrinking");
+				this.#target.classList.add("nx-collapse");
 
 				setTimeout(() => {
 					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
-
 					this.style.display = "inline-block";
-					this.classList.add("appearing");
+					this.classList.add("nx-collapse");
 				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
 
 				setTimeout(() => {
 					// STEP 3: 실제 target 숨기기
 					this.#targetPrevDisplay = this.#target.style.display;
 					this.#target.style.display = "none";
-				}, 800); // shrinking 애니메이션이 끝나고 실제 제거
+				}, 500); // shrinking 애니메이션이 끝나고 실제 제거
 			});
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
-			this.#target.classList.remove("shrinking");
-			this.classList.remove("appearing");
+			this.#target.classList.remove("nx-collapse");
+			this.classList.remove("nx-collapse");
 
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
 		});
-	}
 
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
+		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			// STEP 1: 복원 대상에 애니메이션 클래스 부여
+			this.#target.classList.remove("nx-collapse");
+			this.#target.classList.add("nx-expand"); // expandReveal 적용
 
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
+			// STEP 2: 실제 화면에 표시
+			this.#target.style.display = this.#targetPrevDisplay;
+			this.style.display = "none"; // 복원 버튼은 사라짐
+
+			// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
+			setTimeout(() => {
+				this.#target.classList.remove("nx-expand");
+				//this.#target.style.pointerEvents = "auto";
+			}, 600); // 애니메이션과 동일한 시간
 		});
+
 	}
 }
 

package/dist/nx/nxCollapse.js

@@ -63,11 +63,16 @@ class nxCollapse extends HTMLElement {
 					transform: scale(1.2); /* 살짝 확대 */
 				}
 				
-				${shadowRoot ? ":host(.shrinking)" : ".shrinking"} {
+				${shadowRoot ? ":host(.nx-collapse)" : ".nx-collapse"} {
 					animation: collapseShrink 0.7s ease forwards;
 					pointer-events: none; /* 클릭 방지 */
 				}
-					
+				
+				${shadowRoot ? ":host(.nx-expand)" : ".nx-expand"} {
+					animation: expandShrink 0.6s ease forwards;
+					pointer-events: none; /* 클릭 방지 */
+				}
+				
 				@keyframes collapseShrink {
 					0% {
 						opacity: 1;
@@ -80,52 +85,68 @@ class nxCollapse extends HTMLElement {
 						transform-origin: top right;
 					}
 				}
+				
+				@keyframes expandShrink {
+					0% {
+						opacity: 0;
+						transform: scale(0.5);
+						transform-origin: top right;
+					}
+					100% {
+						opacity: 1;
+						transform: scale(1);
+						transform-origin: top right;
+					}
+				}
 			`;
 
-			console.log(style);
-
 			(shadowRoot || this.#target).appendChild(style);
 
 			// collapse 시 target 숨기고 복원 버튼 등장
 			collapseBtn.addEventListener("click", () => {
 				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
 				// STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
-				this.#target.classList.add("shrinking");
+				this.#target.classList.add("nx-collapse");
 
 				setTimeout(() => {
 					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
-
 					this.style.display = "inline-block";
-					this.classList.add("appearing");
+					this.classList.add("nx-collapse");
 				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
 
 				setTimeout(() => {
 					// STEP 3: 실제 target 숨기기
 					this.#targetPrevDisplay = this.#target.style.display;
 					this.#target.style.display = "none";
-				}, 800); // shrinking 애니메이션이 끝나고 실제 제거
+				}, 500); // shrinking 애니메이션이 끝나고 실제 제거
 			});
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
-			this.#target.classList.remove("shrinking");
-			this.classList.remove("appearing");
+			this.#target.classList.remove("nx-collapse");
+			this.classList.remove("nx-collapse");
 
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
 		});
-	}
 
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
+		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			// STEP 1: 복원 대상에 애니메이션 클래스 부여
+			this.#target.classList.remove("nx-collapse");
+			this.#target.classList.add("nx-expand"); // expandReveal 적용
 
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
+			// STEP 2: 실제 화면에 표시
+			this.#target.style.display = this.#targetPrevDisplay;
+			this.style.display = "none"; // 복원 버튼은 사라짐
+
+			// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
+			setTimeout(() => {
+				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.804.0",
+  "version": "6.807.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxCollapse.js

@@ -63,11 +63,16 @@ class nxCollapse extends HTMLElement {
 					transform: scale(1.2); /* 살짝 확대 */
 				}
 				
-				${shadowRoot ? ":host(.shrinking)" : ".shrinking"} {
+				${shadowRoot ? ":host(.nx-collapse)" : ".nx-collapse"} {
 					animation: collapseShrink 0.7s ease forwards;
 					pointer-events: none; /* 클릭 방지 */
 				}
-					
+				
+				${shadowRoot ? ":host(.nx-expand)" : ".nx-expand"} {
+					animation: expandShrink 0.6s ease forwards;
+					pointer-events: none; /* 클릭 방지 */
+				}
+				
 				@keyframes collapseShrink {
 					0% {
 						opacity: 1;
@@ -80,52 +85,68 @@ class nxCollapse extends HTMLElement {
 						transform-origin: top right;
 					}
 				}
+				
+				@keyframes expandShrink {
+					0% {
+						opacity: 0;
+						transform: scale(0.5);
+						transform-origin: top right;
+					}
+					100% {
+						opacity: 1;
+						transform: scale(1);
+						transform-origin: top right;
+					}
+				}
 			`;
 
-			console.log(style);
-
 			(shadowRoot || this.#target).appendChild(style);
 
 			// collapse 시 target 숨기고 복원 버튼 등장
 			collapseBtn.addEventListener("click", () => {
 				// fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
 				// STEP 1: 복원 버튼 애니메이션 시작 (살짝 빠르게 먼저 등장)
-				this.#target.classList.add("shrinking");
+				this.#target.classList.add("nx-collapse");
 
 				setTimeout(() => {
 					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
-
 					this.style.display = "inline-block";
-					this.classList.add("appearing");
+					this.classList.add("nx-collapse");
 				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
 
 				setTimeout(() => {
 					// STEP 3: 실제 target 숨기기
 					this.#targetPrevDisplay = this.#target.style.display;
 					this.#target.style.display = "none";
-				}, 800); // shrinking 애니메이션이 끝나고 실제 제거
+				}, 500); // shrinking 애니메이션이 끝나고 실제 제거
 			});
 		}
 
 		// 복원 시 target 보이고 복원 버튼 사라짐
 		this.shadowRoot.querySelector("button").addEventListener("click", () => {
-			this.#target.classList.remove("shrinking");
-			this.classList.remove("appearing");
+			this.#target.classList.remove("nx-collapse");
+			this.classList.remove("nx-collapse");
 
 			this.#target.style.display = this.#targetPrevDisplay;
 			this.style.display = "none";
 		});
-	}
 
-	#setupToggle = () => {
-		const toggleIcon = this.shadowRoot.querySelector(".toggle-icon");
-		const searchContainer = this.shadowRoot.querySelector(".search-container");
+		this.shadowRoot.querySelector("button").addEventListener("click", () => {
+			// STEP 1: 복원 대상에 애니메이션 클래스 부여
+			this.#target.classList.remove("nx-collapse");
+			this.#target.classList.add("nx-expand"); // expandReveal 적용
 
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
+			// STEP 2: 실제 화면에 표시
+			this.#target.style.display = this.#targetPrevDisplay;
+			this.style.display = "none"; // 복원 버튼은 사라짐
+
+			// STEP 3: 애니메이션이 끝난 후 pointer-events 복구 (선택적)
+			setTimeout(() => {
+				this.#target.classList.remove("nx-expand");
+				//this.#target.style.pointerEvents = "auto";
+			}, 600); // 애니메이션과 동일한 시간
 		});
+
 	}
 }