ninegrid2 6.805.0 → 6.809.0

package/dist/bundle.cjs.js

@@ -120912,7 +120912,12 @@ class nxCollapse extends HTMLElement {
 					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,10 +120930,21 @@ 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 숨기고 복원 버튼 등장
@@ -120939,7 +120955,6 @@ class nxCollapse extends HTMLElement {
 
 				setTimeout(() => {
 					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
-
 					this.style.display = "inline-block";
 					this.classList.add("nx-collapse");
 				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
@@ -120948,29 +120963,43 @@ class nxCollapse extends HTMLElement {
 					// 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("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);
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
+
+
+			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

@@ -120908,7 +120908,12 @@ class nxCollapse extends HTMLElement {
 					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,10 +120926,21 @@ 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 숨기고 복원 버튼 등장
@@ -120935,7 +120951,6 @@ class nxCollapse extends HTMLElement {
 
 				setTimeout(() => {
 					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
-
 					this.style.display = "inline-block";
 					this.classList.add("nx-collapse");
 				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
@@ -120944,29 +120959,43 @@ class nxCollapse extends HTMLElement {
 					// 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("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);
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
+
+
+			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

@@ -67,7 +67,12 @@ class nxCollapse extends HTMLElement {
 					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,10 +85,21 @@ 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 숨기고 복원 버튼 등장
@@ -94,7 +110,6 @@ class nxCollapse extends HTMLElement {
 
 				setTimeout(() => {
 					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
-
 					this.style.display = "inline-block";
 					this.classList.add("nx-collapse");
 				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
@@ -103,29 +118,43 @@ class nxCollapse extends HTMLElement {
 					// 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("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 적용
+
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
 
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
+
+			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.805.0",
+  "version": "6.809.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxCollapse.js

@@ -67,7 +67,12 @@ class nxCollapse extends HTMLElement {
 					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,10 +85,21 @@ 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 숨기고 복원 버튼 등장
@@ -94,7 +110,6 @@ class nxCollapse extends HTMLElement {
 
 				setTimeout(() => {
 					// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
-
 					this.style.display = "inline-block";
 					this.classList.add("nx-collapse");
 				}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
@@ -103,29 +118,43 @@ class nxCollapse extends HTMLElement {
 					// 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("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 적용
+
+			setTimeout(() => {
+				// STEP 2: target이 줄어드는 shrinking 애니메이션 시작
+				this.classList.remove("nx-collapse");
+				this.classList.add("nx-expand");
+			}, 100); // appearing 시작 후 100ms 딜레이로 target 축소 시작
 
-		toggleIcon.addEventListener("click", () => {
-			this.isCollapsed = !this.isCollapsed;
-			//toggleIcon.innerHTML = this.isCollapsed ? "" : "X";
-			searchContainer.classList.toggle("collapse", this.isCollapsed);
+
+			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); // 애니메이션과 동일한 시간
 		});
+
 	}
 }