ninegrid2 6.772.0 → 6.774.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 +22 -4
  2. package/dist/bundle.esm.js +22 -4
  3. package/dist/nx/nxCollapse.js +22 -4
  4. package/package.json +1 -1
  5. package/src/nx/nxCollapse.js +22 -4
package/dist/bundle.cjs.js CHANGED
@@ -120881,6 +120881,7 @@ class nxCollapse extends HTMLElement {
120881
120881
  if (this.#target && this.#target) {
120882
120882
  const collapseBtn = document.createElement("span");
120883
120883
  collapseBtn.className = "collapse-toggle";
120884
+ /**
120884
120885
  Object.assign(collapseBtn.style, {
120885
120886
  position: "absolute",
120886
120887
  top: "0",
@@ -120893,18 +120894,35 @@ class nxCollapse extends HTMLElement {
120893
120894
  "background-position": "center",
120894
120895
  "background-size": "auto",
120895
120896
  "background-image": `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>')`
120896
- });
120897
+ }); */
120897
120898
 
120898
120899
  const shadowRoot = this.#target.shadowRoot;
120899
120900
  (shadowRoot || this.#target).appendChild(collapseBtn);
120900
120901
 
120901
120902
  const style = document.createElement("style");
120902
120903
  style.textContent = `
120903
- .collapse-toggle:hover {
120904
- border: 1px solid red;
120904
+ span.collapse-toggle {
120905
+ position: absolute;
120906
+ top: 0;
120907
+ right: 0;
120908
+ cursor: pointer;
120909
+ width: 16px;
120910
+ height: 16px;
120911
+ border: none;
120912
+ transition: all 0.3s ease;
120913
+ background-repeat: no-repeat;
120914
+ background-position: center;
120915
+ background-size: auto;
120916
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
120917
+ }
120918
+
120919
+ span.collapse-toggle:hover {
120920
+ background-color: rgba(220, 20, 60, 0.1); /* 연한 배경 강조 */
120921
+ box-shadow: 0 0 6px rgba(220, 20, 60, 0.4); /* 붉은빛 glow */
120922
+ transform: scale(1.2); /* 살짝 확대 */
120905
120923
  }
120906
120924
  `;
120907
- if (shadowRoot) shadowRoot.appendChild(style);
120925
+ (shadowRoot || this.#target).appendChild(style);
120908
120926
 
120909
120927
  // collapse 시 target 숨기고 복원 버튼 등장
120910
120928
  collapseBtn.addEventListener("click", () => {
package/dist/bundle.esm.js CHANGED
@@ -120877,6 +120877,7 @@ class nxCollapse extends HTMLElement {
120877
120877
  if (this.#target && this.#target) {
120878
120878
  const collapseBtn = document.createElement("span");
120879
120879
  collapseBtn.className = "collapse-toggle";
120880
+ /**
120880
120881
  Object.assign(collapseBtn.style, {
120881
120882
  position: "absolute",
120882
120883
  top: "0",
@@ -120889,18 +120890,35 @@ class nxCollapse extends HTMLElement {
120889
120890
  "background-position": "center",
120890
120891
  "background-size": "auto",
120891
120892
  "background-image": `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>')`
120892
- });
120893
+ }); */
120893
120894
 
120894
120895
  const shadowRoot = this.#target.shadowRoot;
120895
120896
  (shadowRoot || this.#target).appendChild(collapseBtn);
120896
120897
 
120897
120898
  const style = document.createElement("style");
120898
120899
  style.textContent = `
120899
- .collapse-toggle:hover {
120900
- border: 1px solid red;
120900
+ span.collapse-toggle {
120901
+ position: absolute;
120902
+ top: 0;
120903
+ right: 0;
120904
+ cursor: pointer;
120905
+ width: 16px;
120906
+ height: 16px;
120907
+ border: none;
120908
+ transition: all 0.3s ease;
120909
+ background-repeat: no-repeat;
120910
+ background-position: center;
120911
+ background-size: auto;
120912
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
120913
+ }
120914
+
120915
+ span.collapse-toggle:hover {
120916
+ background-color: rgba(220, 20, 60, 0.1); /* 연한 배경 강조 */
120917
+ box-shadow: 0 0 6px rgba(220, 20, 60, 0.4); /* 붉은빛 glow */
120918
+ transform: scale(1.2); /* 살짝 확대 */
120901
120919
  }
120902
120920
  `;
120903
- if (shadowRoot) shadowRoot.appendChild(style);
120921
+ (shadowRoot || this.#target).appendChild(style);
120904
120922
 
120905
120923
  // collapse 시 target 숨기고 복원 버튼 등장
120906
120924
  collapseBtn.addEventListener("click", () => {
package/dist/nx/nxCollapse.js CHANGED
@@ -36,6 +36,7 @@ class nxCollapse extends HTMLElement {
36
36
  if (this.#target && this.#target) {
37
37
  const collapseBtn = document.createElement("span");
38
38
  collapseBtn.className = "collapse-toggle";
39
+ /**
39
40
  Object.assign(collapseBtn.style, {
40
41
  position: "absolute",
41
42
  top: "0",
@@ -48,18 +49,35 @@ class nxCollapse extends HTMLElement {
48
49
  "background-position": "center",
49
50
  "background-size": "auto",
50
51
  "background-image": `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>')`
51
- });
52
+ }); */
52
53
 
53
54
  const shadowRoot = this.#target.shadowRoot;
54
55
  (shadowRoot || this.#target).appendChild(collapseBtn);
55
56
 
56
57
  const style = document.createElement("style");
57
58
  style.textContent = `
58
- .collapse-toggle:hover {
59
- border: 1px solid red;
59
+ span.collapse-toggle {
60
+ position: absolute;
61
+ top: 0;
62
+ right: 0;
63
+ cursor: pointer;
64
+ width: 16px;
65
+ height: 16px;
66
+ border: none;
67
+ transition: all 0.3s ease;
68
+ background-repeat: no-repeat;
69
+ background-position: center;
70
+ background-size: auto;
71
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
72
+ }
73
+
74
+ span.collapse-toggle:hover {
75
+ background-color: rgba(220, 20, 60, 0.1); /* 연한 배경 강조 */
76
+ box-shadow: 0 0 6px rgba(220, 20, 60, 0.4); /* 붉은빛 glow */
77
+ transform: scale(1.2); /* 살짝 확대 */
60
78
  }
61
79
  `;
62
- if (shadowRoot) shadowRoot.appendChild(style);
80
+ (shadowRoot || this.#target).appendChild(style);
63
81
 
64
82
  // collapse 시 target 숨기고 복원 버튼 등장
65
83
  collapseBtn.addEventListener("click", () => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.772.0",
4
+ "version": "6.774.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxCollapse.js CHANGED
@@ -36,6 +36,7 @@ class nxCollapse extends HTMLElement {
36
36
  if (this.#target && this.#target) {
37
37
  const collapseBtn = document.createElement("span");
38
38
  collapseBtn.className = "collapse-toggle";
39
+ /**
39
40
  Object.assign(collapseBtn.style, {
40
41
  position: "absolute",
41
42
  top: "0",
@@ -48,18 +49,35 @@ class nxCollapse extends HTMLElement {
48
49
  "background-position": "center",
49
50
  "background-size": "auto",
50
51
  "background-image": `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>')`
51
- });
52
+ }); */
52
53
 
53
54
  const shadowRoot = this.#target.shadowRoot;
54
55
  (shadowRoot || this.#target).appendChild(collapseBtn);
55
56
 
56
57
  const style = document.createElement("style");
57
58
  style.textContent = `
58
- .collapse-toggle:hover {
59
- border: 1px solid red;
59
+ span.collapse-toggle {
60
+ position: absolute;
61
+ top: 0;
62
+ right: 0;
63
+ cursor: pointer;
64
+ width: 16px;
65
+ height: 16px;
66
+ border: none;
67
+ transition: all 0.3s ease;
68
+ background-repeat: no-repeat;
69
+ background-position: center;
70
+ background-size: auto;
71
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
72
+ }
73
+
74
+ span.collapse-toggle:hover {
75
+ background-color: rgba(220, 20, 60, 0.1); /* 연한 배경 강조 */
76
+ box-shadow: 0 0 6px rgba(220, 20, 60, 0.4); /* 붉은빛 glow */
77
+ transform: scale(1.2); /* 살짝 확대 */
60
78
  }
61
79
  `;
62
- if (shadowRoot) shadowRoot.appendChild(style);
80
+ (shadowRoot || this.#target).appendChild(style);
63
81
 
64
82
  // collapse 시 target 숨기고 복원 버튼 등장
65
83
  collapseBtn.addEventListener("click", () => {