ninegrid2 6.496.0 → 6.499.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/ai/aiContainer.js +20 -6
  2. package/dist/bundle.cjs.js +20 -6
  3. package/dist/bundle.esm.js +20 -6
  4. package/package.json +1 -1
  5. package/src/ai/aiContainer.js +20 -6
package/dist/ai/aiContainer.js CHANGED
@@ -48,14 +48,28 @@ class aiContainer extends HTMLElement
48
48
  };
49
49
 
50
50
  #init = (info) => {
51
+ this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
52
+ this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
51
53
 
52
- const toggleCollapseHandler = () => {
53
- this.classList.toggle("collapse");
54
- };
55
-
56
- this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleCollapseHandler);
57
- this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleCollapseHandler);
54
+ this.shadowRoot.querySelector(".menu-icon").addEventListener("click", this.#menuClickHandler);
58
55
  };
56
+
57
+ #toggleCollapseHandler = () => {
58
+ this.classList.toggle("collapse");
59
+ };
60
+
61
+ #menuClickHandler = (e) => {
62
+
63
+ // 모든 `.menu-icon`에서 `active` 클래스 제거
64
+ this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
65
+
66
+ // 클릭한 `.menu-icon`에 `active` 클래스 추가
67
+ const clickedIcon = e.target.closest(".menu-icon");
68
+ if (clickedIcon) clickedIcon.classList.add("active");
69
+
70
+ // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
71
+ this.shadowRoot.querySelector("nx-ai-settings").classList.toggle("expand", !!e.target.closest(".menu-setting"));
72
+ };
59
73
  }
60
74
 
61
75
  customElements.define("nx-ai-container", aiContainer);
package/dist/bundle.cjs.js CHANGED
@@ -27902,14 +27902,28 @@ class aiContainer extends HTMLElement
27902
27902
  };
27903
27903
 
27904
27904
  #init = (info) => {
27905
+ this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
27906
+ this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
27905
27907
 
27906
- const toggleCollapseHandler = () => {
27907
- this.classList.toggle("collapse");
27908
- };
27909
-
27910
- this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleCollapseHandler);
27911
- this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleCollapseHandler);
27908
+ this.shadowRoot.querySelector(".menu-icon").addEventListener("click", this.#menuClickHandler);
27912
27909
  };
27910
+
27911
+ #toggleCollapseHandler = () => {
27912
+ this.classList.toggle("collapse");
27913
+ };
27914
+
27915
+ #menuClickHandler = (e) => {
27916
+
27917
+ // 모든 `.menu-icon`에서 `active` 클래스 제거
27918
+ this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
27919
+
27920
+ // 클릭한 `.menu-icon`에 `active` 클래스 추가
27921
+ const clickedIcon = e.target.closest(".menu-icon");
27922
+ if (clickedIcon) clickedIcon.classList.add("active");
27923
+
27924
+ // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
27925
+ this.shadowRoot.querySelector("nx-ai-settings").classList.toggle("expand", !!e.target.closest(".menu-setting"));
27926
+ };
27913
27927
  }
27914
27928
 
27915
27929
  customElements.define("nx-ai-container", aiContainer);
package/dist/bundle.esm.js CHANGED
@@ -27900,14 +27900,28 @@ class aiContainer extends HTMLElement
27900
27900
  };
27901
27901
 
27902
27902
  #init = (info) => {
27903
+ this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
27904
+ this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
27903
27905
 
27904
- const toggleCollapseHandler = () => {
27905
- this.classList.toggle("collapse");
27906
- };
27907
-
27908
- this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleCollapseHandler);
27909
- this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleCollapseHandler);
27906
+ this.shadowRoot.querySelector(".menu-icon").addEventListener("click", this.#menuClickHandler);
27910
27907
  };
27908
+
27909
+ #toggleCollapseHandler = () => {
27910
+ this.classList.toggle("collapse");
27911
+ };
27912
+
27913
+ #menuClickHandler = (e) => {
27914
+
27915
+ // 모든 `.menu-icon`에서 `active` 클래스 제거
27916
+ this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
27917
+
27918
+ // 클릭한 `.menu-icon`에 `active` 클래스 추가
27919
+ const clickedIcon = e.target.closest(".menu-icon");
27920
+ if (clickedIcon) clickedIcon.classList.add("active");
27921
+
27922
+ // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
27923
+ this.shadowRoot.querySelector("nx-ai-settings").classList.toggle("expand", !!e.target.closest(".menu-setting"));
27924
+ };
27911
27925
  }
27912
27926
 
27913
27927
  customElements.define("nx-ai-container", aiContainer);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.496.0",
4
+ "version": "6.499.0",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
7
7
  "import": "./dist/index.js",
package/src/ai/aiContainer.js CHANGED
@@ -48,14 +48,28 @@ class aiContainer extends HTMLElement
48
48
  };
49
49
 
50
50
  #init = (info) => {
51
+ this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
52
+ this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
51
53
 
52
- const toggleCollapseHandler = () => {
53
- this.classList.toggle("collapse");
54
- };
55
-
56
- this.shadowRoot.querySelector(".expand-icon").addEventListener("click", toggleCollapseHandler);
57
- this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", toggleCollapseHandler);
54
+ this.shadowRoot.querySelector(".menu-icon").addEventListener("click", this.#menuClickHandler);
58
55
  };
56
+
57
+ #toggleCollapseHandler = () => {
58
+ this.classList.toggle("collapse");
59
+ };
60
+
61
+ #menuClickHandler = (e) => {
62
+
63
+ // 모든 `.menu-icon`에서 `active` 클래스 제거
64
+ this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
65
+
66
+ // 클릭한 `.menu-icon`에 `active` 클래스 추가
67
+ const clickedIcon = e.target.closest(".menu-icon");
68
+ if (clickedIcon) clickedIcon.classList.add("active");
69
+
70
+ // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
71
+ this.shadowRoot.querySelector("nx-ai-settings").classList.toggle("expand", !!e.target.closest(".menu-setting"));
72
+ };
59
73
  }
60
74
 
61
75
  customElements.define("nx-ai-container", aiContainer);