ninegrid2 6.784.0 → 6.786.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/bundle.cjs.js +21 -4
  2. package/dist/bundle.esm.js +21 -4
  3. package/dist/nx/nxCollapse.js +21 -4
  4. package/package.json +1 -1
  5. package/src/nx/nxCollapse.js +21 -4
package/dist/bundle.cjs.js CHANGED
@@ -120907,6 +120907,24 @@ class nxCollapse extends HTMLElement {
120907
120907
  box-shadow: 0 0 6px rgba(220, 20, 60, 0.4); /* 붉은빛 glow */
120908
120908
  transform: scale(1.2); /* 살짝 확대 */
120909
120909
  }
120910
+
120911
+ :host(.shrinking) {
120912
+ animation: collapseShrink 0.7s ease forwards;
120913
+ pointer-events: none; /* 클릭 방지 */
120914
+ }
120915
+
120916
+ @keyframes collapseShrink {
120917
+ 0% {
120918
+ opacity: 1;
120919
+ transform: scale(1);
120920
+ transform-origin: top right;
120921
+ }
120922
+ 100% {
120923
+ opacity: 0;
120924
+ transform: scale(0);
120925
+ transform-origin: top right;
120926
+ }
120927
+ }
120910
120928
  `;
120911
120929
 
120912
120930
  (shadowRoot || this.#target).appendChild(style);
@@ -120920,20 +120938,19 @@ class nxCollapse extends HTMLElement {
120920
120938
  */
120921
120939
 
120922
120940
  // fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
120923
- this.#target.classList.add("fade-out");
120941
+ this.#target.classList.add("shrinking");
120924
120942
 
120925
120943
  setTimeout(() => {
120926
120944
  this.#targetPrevDisplay = this.#target.style.display;
120927
120945
  this.#target.style.display = "none";
120928
120946
  this.style.display = "inline-block";
120929
- }, 300); // transition 시간과 맞춰서 300ms 딜레이
120930
-
120947
+ }, 700); // transition 시간과 맞춰서 300ms 딜레이
120931
120948
  });
120932
120949
  }
120933
120950
 
120934
120951
  // 복원 시 target 보이고 복원 버튼 사라짐
120935
120952
  this.shadowRoot.querySelector("button").addEventListener("click", () => {
120936
- this.#target.classList.remove("fade-out");
120953
+ this.#target.classList.remove("shrinking");
120937
120954
  this.#target.style.display = this.#targetPrevDisplay;
120938
120955
  this.style.display = "none";
120939
120956
  });
package/dist/bundle.esm.js CHANGED
@@ -120903,6 +120903,24 @@ class nxCollapse extends HTMLElement {
120903
120903
  box-shadow: 0 0 6px rgba(220, 20, 60, 0.4); /* 붉은빛 glow */
120904
120904
  transform: scale(1.2); /* 살짝 확대 */
120905
120905
  }
120906
+
120907
+ :host(.shrinking) {
120908
+ animation: collapseShrink 0.7s ease forwards;
120909
+ pointer-events: none; /* 클릭 방지 */
120910
+ }
120911
+
120912
+ @keyframes collapseShrink {
120913
+ 0% {
120914
+ opacity: 1;
120915
+ transform: scale(1);
120916
+ transform-origin: top right;
120917
+ }
120918
+ 100% {
120919
+ opacity: 0;
120920
+ transform: scale(0);
120921
+ transform-origin: top right;
120922
+ }
120923
+ }
120906
120924
  `;
120907
120925
 
120908
120926
  (shadowRoot || this.#target).appendChild(style);
@@ -120916,20 +120934,19 @@ class nxCollapse extends HTMLElement {
120916
120934
  */
120917
120935
 
120918
120936
  // fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
120919
- this.#target.classList.add("fade-out");
120937
+ this.#target.classList.add("shrinking");
120920
120938
 
120921
120939
  setTimeout(() => {
120922
120940
  this.#targetPrevDisplay = this.#target.style.display;
120923
120941
  this.#target.style.display = "none";
120924
120942
  this.style.display = "inline-block";
120925
- }, 300); // transition 시간과 맞춰서 300ms 딜레이
120926
-
120943
+ }, 700); // transition 시간과 맞춰서 300ms 딜레이
120927
120944
  });
120928
120945
  }
120929
120946
 
120930
120947
  // 복원 시 target 보이고 복원 버튼 사라짐
120931
120948
  this.shadowRoot.querySelector("button").addEventListener("click", () => {
120932
- this.#target.classList.remove("fade-out");
120949
+ this.#target.classList.remove("shrinking");
120933
120950
  this.#target.style.display = this.#targetPrevDisplay;
120934
120951
  this.style.display = "none";
120935
120952
  });
package/dist/nx/nxCollapse.js CHANGED
@@ -62,6 +62,24 @@ class nxCollapse extends HTMLElement {
62
62
  box-shadow: 0 0 6px rgba(220, 20, 60, 0.4); /* 붉은빛 glow */
63
63
  transform: scale(1.2); /* 살짝 확대 */
64
64
  }
65
+
66
+ :host(.shrinking) {
67
+ animation: collapseShrink 0.7s ease forwards;
68
+ pointer-events: none; /* 클릭 방지 */
69
+ }
70
+
71
+ @keyframes collapseShrink {
72
+ 0% {
73
+ opacity: 1;
74
+ transform: scale(1);
75
+ transform-origin: top right;
76
+ }
77
+ 100% {
78
+ opacity: 0;
79
+ transform: scale(0);
80
+ transform-origin: top right;
81
+ }
82
+ }
65
83
  `;
66
84
 
67
85
  (shadowRoot || this.#target).appendChild(style);
@@ -75,20 +93,19 @@ class nxCollapse extends HTMLElement {
75
93
  */
76
94
 
77
95
  // fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
78
- this.#target.classList.add("fade-out");
96
+ this.#target.classList.add("shrinking");
79
97
 
80
98
  setTimeout(() => {
81
99
  this.#targetPrevDisplay = this.#target.style.display;
82
100
  this.#target.style.display = "none";
83
101
  this.style.display = "inline-block";
84
- }, 300); // transition 시간과 맞춰서 300ms 딜레이
85
-
102
+ }, 700); // transition 시간과 맞춰서 300ms 딜레이
86
103
  });
87
104
  }
88
105
 
89
106
  // 복원 시 target 보이고 복원 버튼 사라짐
90
107
  this.shadowRoot.querySelector("button").addEventListener("click", () => {
91
- this.#target.classList.remove("fade-out");
108
+ this.#target.classList.remove("shrinking");
92
109
  this.#target.style.display = this.#targetPrevDisplay;
93
110
  this.style.display = "none";
94
111
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.784.0",
4
+ "version": "6.786.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxCollapse.js CHANGED
@@ -62,6 +62,24 @@ class nxCollapse extends HTMLElement {
62
62
  box-shadow: 0 0 6px rgba(220, 20, 60, 0.4); /* 붉은빛 glow */
63
63
  transform: scale(1.2); /* 살짝 확대 */
64
64
  }
65
+
66
+ :host(.shrinking) {
67
+ animation: collapseShrink 0.7s ease forwards;
68
+ pointer-events: none; /* 클릭 방지 */
69
+ }
70
+
71
+ @keyframes collapseShrink {
72
+ 0% {
73
+ opacity: 1;
74
+ transform: scale(1);
75
+ transform-origin: top right;
76
+ }
77
+ 100% {
78
+ opacity: 0;
79
+ transform: scale(0);
80
+ transform-origin: top right;
81
+ }
82
+ }
65
83
  `;
66
84
 
67
85
  (shadowRoot || this.#target).appendChild(style);
@@ -75,20 +93,19 @@ class nxCollapse extends HTMLElement {
75
93
  */
76
94
 
77
95
  // fade-out 클래스 먼저 넣고 → 일정 시간 후 display: none
78
- this.#target.classList.add("fade-out");
96
+ this.#target.classList.add("shrinking");
79
97
 
80
98
  setTimeout(() => {
81
99
  this.#targetPrevDisplay = this.#target.style.display;
82
100
  this.#target.style.display = "none";
83
101
  this.style.display = "inline-block";
84
- }, 300); // transition 시간과 맞춰서 300ms 딜레이
85
-
102
+ }, 700); // transition 시간과 맞춰서 300ms 딜레이
86
103
  });
87
104
  }
88
105
 
89
106
  // 복원 시 target 보이고 복원 버튼 사라짐
90
107
  this.shadowRoot.querySelector("button").addEventListener("click", () => {
91
- this.#target.classList.remove("fade-out");
108
+ this.#target.classList.remove("shrinking");
92
109
  this.#target.style.display = this.#targetPrevDisplay;
93
110
  this.style.display = "none";
94
111
  });