ninegrid2 6.769.0 → 6.771.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 +17 -4
  2. package/dist/bundle.esm.js +17 -4
  3. package/dist/nx/nxCollapse.js +17 -4
  4. package/package.json +1 -1
  5. package/src/nx/nxCollapse.js +17 -4
package/dist/bundle.cjs.js CHANGED
@@ -120847,6 +120847,7 @@ customElements.define("nx-div", nxDiv);
120847
120847
 
120848
120848
  class nxCollapse extends HTMLElement {
120849
120849
  #target;
120850
+ #targetPrevDisplay;
120850
120851
 
120851
120852
  constructor() {
120852
120853
  super();
@@ -120878,16 +120879,28 @@ class nxCollapse extends HTMLElement {
120878
120879
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
120879
120880
 
120880
120881
  if (this.#target && this.#target) {
120881
- const collapseBtn = document.createElement("button");
120882
- collapseBtn.textContent = "📥 접기";
120882
+ const collapseBtn = document.createElement("span");
120883
120883
  collapseBtn.className = "collapse-toggle";
120884
- collapseBtn.style.marginBottom = "8px";
120884
+ Object.assign(collapseBtn.style, {
120885
+ position: "absolute",
120886
+ top: "0",
120887
+ right: "0",
120888
+ cursor: "pointer",
120889
+ width: "16px",
120890
+ height: "16px",
120891
+ border: "none",
120892
+ "background-repeat": "no-repeat",
120893
+ "background-position": "center",
120894
+ "background-size": "auto",
120895
+ "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
+ });
120885
120897
 
120886
120898
  const shadowRoot = this.#target.shadowRoot;
120887
120899
  (shadowRoot || this.#target).appendChild(collapseBtn);
120888
120900
 
120889
120901
  // collapse 시 target 숨기고 복원 버튼 등장
120890
120902
  collapseBtn.addEventListener("click", () => {
120903
+ this.#targetPrevDisplay = this.#target.style.display;
120891
120904
  this.#target.style.display = "none";
120892
120905
  this.style.display = "inline-block";
120893
120906
  });
@@ -120895,7 +120908,7 @@ class nxCollapse extends HTMLElement {
120895
120908
 
120896
120909
  // 복원 시 target 보이고 복원 버튼 사라짐
120897
120910
  this.addEventListener("click", () => {
120898
- this.#target.style.display = "";
120911
+ this.#target.style.display = this.#targetPrevDisplay;
120899
120912
  this.style.display = "none";
120900
120913
  });
120901
120914
  }
package/dist/bundle.esm.js CHANGED
@@ -120843,6 +120843,7 @@ customElements.define("nx-div", nxDiv);
120843
120843
 
120844
120844
  class nxCollapse extends HTMLElement {
120845
120845
  #target;
120846
+ #targetPrevDisplay;
120846
120847
 
120847
120848
  constructor() {
120848
120849
  super();
@@ -120874,16 +120875,28 @@ class nxCollapse extends HTMLElement {
120874
120875
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
120875
120876
 
120876
120877
  if (this.#target && this.#target) {
120877
- const collapseBtn = document.createElement("button");
120878
- collapseBtn.textContent = "📥 접기";
120878
+ const collapseBtn = document.createElement("span");
120879
120879
  collapseBtn.className = "collapse-toggle";
120880
- collapseBtn.style.marginBottom = "8px";
120880
+ Object.assign(collapseBtn.style, {
120881
+ position: "absolute",
120882
+ top: "0",
120883
+ right: "0",
120884
+ cursor: "pointer",
120885
+ width: "16px",
120886
+ height: "16px",
120887
+ border: "none",
120888
+ "background-repeat": "no-repeat",
120889
+ "background-position": "center",
120890
+ "background-size": "auto",
120891
+ "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
+ });
120881
120893
 
120882
120894
  const shadowRoot = this.#target.shadowRoot;
120883
120895
  (shadowRoot || this.#target).appendChild(collapseBtn);
120884
120896
 
120885
120897
  // collapse 시 target 숨기고 복원 버튼 등장
120886
120898
  collapseBtn.addEventListener("click", () => {
120899
+ this.#targetPrevDisplay = this.#target.style.display;
120887
120900
  this.#target.style.display = "none";
120888
120901
  this.style.display = "inline-block";
120889
120902
  });
@@ -120891,7 +120904,7 @@ class nxCollapse extends HTMLElement {
120891
120904
 
120892
120905
  // 복원 시 target 보이고 복원 버튼 사라짐
120893
120906
  this.addEventListener("click", () => {
120894
- this.#target.style.display = "";
120907
+ this.#target.style.display = this.#targetPrevDisplay;
120895
120908
  this.style.display = "none";
120896
120909
  });
120897
120910
  }
package/dist/nx/nxCollapse.js CHANGED
@@ -2,6 +2,7 @@ import ninegrid from "../index.js";
2
2
 
3
3
  class nxCollapse extends HTMLElement {
4
4
  #target;
5
+ #targetPrevDisplay;
5
6
 
6
7
  constructor() {
7
8
  super();
@@ -33,16 +34,28 @@ class nxCollapse extends HTMLElement {
33
34
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
34
35
 
35
36
  if (this.#target && this.#target) {
36
- const collapseBtn = document.createElement("button");
37
- collapseBtn.textContent = "📥 접기";
37
+ const collapseBtn = document.createElement("span");
38
38
  collapseBtn.className = "collapse-toggle";
39
- collapseBtn.style.marginBottom = "8px";
39
+ Object.assign(collapseBtn.style, {
40
+ position: "absolute",
41
+ top: "0",
42
+ right: "0",
43
+ cursor: "pointer",
44
+ width: "16px",
45
+ height: "16px",
46
+ border: "none",
47
+ "background-repeat": "no-repeat",
48
+ "background-position": "center",
49
+ "background-size": "auto",
50
+ "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
+ });
40
52
 
41
53
  const shadowRoot = this.#target.shadowRoot;
42
54
  (shadowRoot || this.#target).appendChild(collapseBtn);
43
55
 
44
56
  // collapse 시 target 숨기고 복원 버튼 등장
45
57
  collapseBtn.addEventListener("click", () => {
58
+ this.#targetPrevDisplay = this.#target.style.display;
46
59
  this.#target.style.display = "none";
47
60
  this.style.display = "inline-block";
48
61
  });
@@ -50,7 +63,7 @@ class nxCollapse extends HTMLElement {
50
63
 
51
64
  // 복원 시 target 보이고 복원 버튼 사라짐
52
65
  this.addEventListener("click", () => {
53
- this.#target.style.display = "";
66
+ this.#target.style.display = this.#targetPrevDisplay;
54
67
  this.style.display = "none";
55
68
  });
56
69
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.769.0",
4
+ "version": "6.771.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxCollapse.js CHANGED
@@ -2,6 +2,7 @@ import ninegrid from "../index.js";
2
2
 
3
3
  class nxCollapse extends HTMLElement {
4
4
  #target;
5
+ #targetPrevDisplay;
5
6
 
6
7
  constructor() {
7
8
  super();
@@ -33,16 +34,28 @@ class nxCollapse extends HTMLElement {
33
34
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
34
35
 
35
36
  if (this.#target && this.#target) {
36
- const collapseBtn = document.createElement("button");
37
- collapseBtn.textContent = "📥 접기";
37
+ const collapseBtn = document.createElement("span");
38
38
  collapseBtn.className = "collapse-toggle";
39
- collapseBtn.style.marginBottom = "8px";
39
+ Object.assign(collapseBtn.style, {
40
+ position: "absolute",
41
+ top: "0",
42
+ right: "0",
43
+ cursor: "pointer",
44
+ width: "16px",
45
+ height: "16px",
46
+ border: "none",
47
+ "background-repeat": "no-repeat",
48
+ "background-position": "center",
49
+ "background-size": "auto",
50
+ "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
+ });
40
52
 
41
53
  const shadowRoot = this.#target.shadowRoot;
42
54
  (shadowRoot || this.#target).appendChild(collapseBtn);
43
55
 
44
56
  // collapse 시 target 숨기고 복원 버튼 등장
45
57
  collapseBtn.addEventListener("click", () => {
58
+ this.#targetPrevDisplay = this.#target.style.display;
46
59
  this.#target.style.display = "none";
47
60
  this.style.display = "inline-block";
48
61
  });
@@ -50,7 +63,7 @@ class nxCollapse extends HTMLElement {
50
63
 
51
64
  // 복원 시 target 보이고 복원 버튼 사라짐
52
65
  this.addEventListener("click", () => {
53
- this.#target.style.display = "";
66
+ this.#target.style.display = this.#targetPrevDisplay;
54
67
  this.style.display = "none";
55
68
  });
56
69
  }