ninegrid2 6.771.0 → 6.773.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.
@@ -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,11 +120894,33 @@ 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
 
120902
+ const style = document.createElement("style");
120903
+ style.textContent = `
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
+ background-repeat: no-repeat;
120913
+ background-position: center;
120914
+ background-size: auto;
120915
+ 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>');
120916
+ }
120917
+
120918
+ span.collapse-toggle:hover {
120919
+ border: 1px solid red;
120920
+ }
120921
+ `;
120922
+ (shadowRoot || this.#target).appendChild(style);
120923
+
120901
120924
  // collapse 시 target 숨기고 복원 버튼 등장
120902
120925
  collapseBtn.addEventListener("click", () => {
120903
120926
  this.#targetPrevDisplay = this.#target.style.display;
@@ -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,11 +120890,33 @@ 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
 
120898
+ const style = document.createElement("style");
120899
+ style.textContent = `
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
+ background-repeat: no-repeat;
120909
+ background-position: center;
120910
+ background-size: auto;
120911
+ 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>');
120912
+ }
120913
+
120914
+ span.collapse-toggle:hover {
120915
+ border: 1px solid red;
120916
+ }
120917
+ `;
120918
+ (shadowRoot || this.#target).appendChild(style);
120919
+
120897
120920
  // collapse 시 target 숨기고 복원 버튼 등장
120898
120921
  collapseBtn.addEventListener("click", () => {
120899
120922
  this.#targetPrevDisplay = this.#target.style.display;
@@ -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,11 +49,33 @@ 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
 
57
+ const style = document.createElement("style");
58
+ style.textContent = `
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
+ background-repeat: no-repeat;
68
+ background-position: center;
69
+ background-size: auto;
70
+ 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>');
71
+ }
72
+
73
+ span.collapse-toggle:hover {
74
+ border: 1px solid red;
75
+ }
76
+ `;
77
+ (shadowRoot || this.#target).appendChild(style);
78
+
56
79
  // collapse 시 target 숨기고 복원 버튼 등장
57
80
  collapseBtn.addEventListener("click", () => {
58
81
  this.#targetPrevDisplay = this.#target.style.display;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.771.0",
4
+ "version": "6.773.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
@@ -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,11 +49,33 @@ 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
 
57
+ const style = document.createElement("style");
58
+ style.textContent = `
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
+ background-repeat: no-repeat;
68
+ background-position: center;
69
+ background-size: auto;
70
+ 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>');
71
+ }
72
+
73
+ span.collapse-toggle:hover {
74
+ border: 1px solid red;
75
+ }
76
+ `;
77
+ (shadowRoot || this.#target).appendChild(style);
78
+
56
79
  // collapse 시 target 숨기고 복원 버튼 등장
57
80
  collapseBtn.addEventListener("click", () => {
58
81
  this.#targetPrevDisplay = this.#target.style.display;