@sellmate/design-system 0.0.55 → 0.0.56

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 (145) hide show
  1. package/dist/cjs/design-system.cjs.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/sd-button_24.cjs.entry.js +32 -32
  4. package/dist/cjs/sd-card.cjs.entry.js +3 -3
  5. package/dist/cjs/sd-date-picker.cjs.entry.js +1 -1
  6. package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
  7. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  8. package/dist/cjs/sd-progress.cjs.entry.js +2 -2
  9. package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
  10. package/dist/cjs/sd-tbody_3.cjs.entry.js +3 -3
  11. package/dist/cjs/sd-td.cjs.entry.js +2 -2
  12. package/dist/collection/components/sd-card/sd-card.css +1 -4
  13. package/dist/collection/components/sd-card/sd-card.js +6 -6
  14. package/dist/collection/components/sd-card/sd-card.js.map +1 -1
  15. package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
  16. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
  17. package/dist/collection/components/sd-file-picker/sd-file-picker.js +3 -3
  18. package/dist/collection/components/sd-guide/sd-guide.js +2 -2
  19. package/dist/collection/components/sd-icon/sd-icon.js +1 -1
  20. package/dist/collection/components/sd-input/sd-input.js +4 -4
  21. package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
  22. package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
  23. package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
  24. package/dist/collection/components/sd-popover/sd-popover.js +2 -2
  25. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  26. package/dist/collection/components/sd-progress/sd-progress.js +2 -2
  27. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
  28. package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +3 -3
  29. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
  30. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
  31. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
  32. package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
  33. package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
  34. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
  35. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  36. package/dist/collection/components/sd-toggle-button/sd-toggle-button.js +1 -1
  37. package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -4
  38. package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
  39. package/dist/components/{p-BLidMbc_.js → p-6qJVnQg4.js} +3 -3
  40. package/dist/components/{p-BLidMbc_.js.map → p-6qJVnQg4.js.map} +1 -1
  41. package/dist/components/{p-D5BkkT2U.js → p-B8yBkdjE.js} +3 -3
  42. package/dist/components/{p-D5BkkT2U.js.map → p-B8yBkdjE.js.map} +1 -1
  43. package/dist/components/{p-vhe6g4Qt.js → p-BHHbLFXg.js} +3 -3
  44. package/dist/components/{p-vhe6g4Qt.js.map → p-BHHbLFXg.js.map} +1 -1
  45. package/dist/components/{p-DRGcUx0C.js → p-BREduhZA.js} +5 -5
  46. package/dist/components/{p-DRGcUx0C.js.map → p-BREduhZA.js.map} +1 -1
  47. package/dist/components/{p-CKhzpdPk.js → p-Bj4u0G5b.js} +3 -3
  48. package/dist/components/{p-CKhzpdPk.js.map → p-Bj4u0G5b.js.map} +1 -1
  49. package/dist/components/{p-CfKJNKMH.js → p-C4kdHNdl.js} +7 -7
  50. package/dist/components/{p-CfKJNKMH.js.map → p-C4kdHNdl.js.map} +1 -1
  51. package/dist/components/{p-njRAT-yp.js → p-C5U6Otnl.js} +3 -3
  52. package/dist/components/{p-njRAT-yp.js.map → p-C5U6Otnl.js.map} +1 -1
  53. package/dist/components/{p-DD9g6GYA.js → p-CNrsaSqW.js} +3 -3
  54. package/dist/components/{p-DD9g6GYA.js.map → p-CNrsaSqW.js.map} +1 -1
  55. package/dist/components/{p-nqDJZ_gy.js → p-CfivfPAO.js} +3 -3
  56. package/dist/components/{p-nqDJZ_gy.js.map → p-CfivfPAO.js.map} +1 -1
  57. package/dist/components/{p-DMqinLuj.js → p-D8KGixEs.js} +8 -8
  58. package/dist/components/{p-DMqinLuj.js.map → p-D8KGixEs.js.map} +1 -1
  59. package/dist/components/{p-BESbtjDi.js → p-DLrb7Zq3.js} +3 -3
  60. package/dist/components/{p-BESbtjDi.js.map → p-DLrb7Zq3.js.map} +1 -1
  61. package/dist/components/{p-DroKiQ6J.js → p-K42WRBPA.js} +9 -9
  62. package/dist/components/{p-DroKiQ6J.js.map → p-K42WRBPA.js.map} +1 -1
  63. package/dist/components/{p-CWwMpVqI.js → p-O3tgQfvT.js} +5 -5
  64. package/dist/components/{p-CWwMpVqI.js.map → p-O3tgQfvT.js.map} +1 -1
  65. package/dist/components/{p-QNYqIsvU.js → p-QpwY2yqY.js} +7 -7
  66. package/dist/components/{p-QNYqIsvU.js.map → p-QpwY2yqY.js.map} +1 -1
  67. package/dist/components/{p-MRYVk6Qh.js → p-w5tohH2H.js} +7 -7
  68. package/dist/components/{p-MRYVk6Qh.js.map → p-w5tohH2H.js.map} +1 -1
  69. package/dist/components/{p-DKoWHxRI.js → p-xme-KFvK.js} +3 -3
  70. package/dist/components/{p-DKoWHxRI.js.map → p-xme-KFvK.js.map} +1 -1
  71. package/dist/components/sd-button.js +1 -1
  72. package/dist/components/sd-card.js +4 -4
  73. package/dist/components/sd-card.js.map +1 -1
  74. package/dist/components/sd-checkbox.js +1 -1
  75. package/dist/components/sd-date-picker.js +4 -4
  76. package/dist/components/sd-date-range-picker.js +5 -5
  77. package/dist/components/sd-file-picker.js +4 -4
  78. package/dist/components/sd-guide.js +5 -5
  79. package/dist/components/sd-icon.js +1 -1
  80. package/dist/components/sd-input.js +1 -1
  81. package/dist/components/sd-loading-spinner.js +1 -1
  82. package/dist/components/sd-modal-card.js +2 -2
  83. package/dist/components/sd-number-input.js +5 -5
  84. package/dist/components/sd-pagination.js +1 -1
  85. package/dist/components/sd-popover.js +5 -5
  86. package/dist/components/sd-portal.js +1 -1
  87. package/dist/components/sd-progress.js +2 -2
  88. package/dist/components/sd-select-multiple-group.js +6 -6
  89. package/dist/components/sd-select-multiple.js +7 -7
  90. package/dist/components/sd-select-option-group.js +1 -1
  91. package/dist/components/sd-select-option.js +1 -1
  92. package/dist/components/sd-select-search-input.js +1 -1
  93. package/dist/components/sd-select.js +1 -1
  94. package/dist/components/sd-table-backup.js +12 -12
  95. package/dist/components/sd-table.js +14 -14
  96. package/dist/components/sd-tbody.js +1 -1
  97. package/dist/components/sd-td.js +2 -2
  98. package/dist/components/sd-th.js +1 -1
  99. package/dist/components/sd-toast-message.js +2 -2
  100. package/dist/components/sd-toggle-button.js +1 -1
  101. package/dist/components/sd-toggle.js +1 -1
  102. package/dist/components/sd-tooltip-portal.js +1 -1
  103. package/dist/components/sd-tooltip.js +1 -1
  104. package/dist/components/sd-tr.js +1 -1
  105. package/dist/design-system/design-system.esm.js +1 -1
  106. package/dist/design-system/p-0893dbd0.entry.js +2 -0
  107. package/dist/design-system/{p-5acdd14a.entry.js → p-2633690f.entry.js} +2 -2
  108. package/dist/design-system/p-5576f0f0.entry.js +2 -0
  109. package/dist/design-system/{p-0d2814dc.entry.js → p-7ca988ab.entry.js} +2 -2
  110. package/dist/design-system/p-a7bdb6ba.entry.js +2 -0
  111. package/dist/design-system/{p-7b94b34e.entry.js → p-b5720c60.entry.js} +2 -2
  112. package/dist/design-system/{p-e5065700.entry.js → p-bdd9afaf.entry.js} +2 -2
  113. package/dist/design-system/p-ddfe63b8.entry.js +2 -0
  114. package/dist/design-system/p-ddfe63b8.entry.js.map +1 -0
  115. package/dist/design-system/{p-665c5c48.entry.js → p-e180c69c.entry.js} +2 -2
  116. package/dist/esm/design-system.js +1 -1
  117. package/dist/esm/loader.js +1 -1
  118. package/dist/esm/sd-button_24.entry.js +32 -32
  119. package/dist/esm/sd-card.entry.js +3 -3
  120. package/dist/esm/sd-card.entry.js.map +1 -1
  121. package/dist/esm/sd-date-picker.entry.js +1 -1
  122. package/dist/esm/sd-date-range-picker.entry.js +2 -2
  123. package/dist/esm/sd-popover.entry.js +2 -2
  124. package/dist/esm/sd-progress.entry.js +2 -2
  125. package/dist/esm/sd-select-multiple.entry.js +2 -2
  126. package/dist/esm/sd-tbody_3.entry.js +3 -3
  127. package/dist/esm/sd-td.entry.js +2 -2
  128. package/dist/types/components/sd-card/sd-card.d.ts +1 -1
  129. package/dist/types/components.d.ts +2 -2
  130. package/hydrate/index.js +50 -50
  131. package/hydrate/index.mjs +50 -50
  132. package/package.json +2 -2
  133. package/dist/design-system/p-2c57bdea.entry.js +0 -2
  134. package/dist/design-system/p-3bc4effa.entry.js +0 -2
  135. package/dist/design-system/p-3bc4effa.entry.js.map +0 -1
  136. package/dist/design-system/p-97b271a7.entry.js +0 -2
  137. package/dist/design-system/p-fc3580fd.entry.js +0 -2
  138. /package/dist/design-system/{p-fc3580fd.entry.js.map → p-0893dbd0.entry.js.map} +0 -0
  139. /package/dist/design-system/{p-5acdd14a.entry.js.map → p-2633690f.entry.js.map} +0 -0
  140. /package/dist/design-system/{p-2c57bdea.entry.js.map → p-5576f0f0.entry.js.map} +0 -0
  141. /package/dist/design-system/{p-0d2814dc.entry.js.map → p-7ca988ab.entry.js.map} +0 -0
  142. /package/dist/design-system/{p-97b271a7.entry.js.map → p-a7bdb6ba.entry.js.map} +0 -0
  143. /package/dist/design-system/{p-7b94b34e.entry.js.map → p-b5720c60.entry.js.map} +0 -0
  144. /package/dist/design-system/{p-e5065700.entry.js.map → p-bdd9afaf.entry.js.map} +0 -0
  145. /package/dist/design-system/{p-665c5c48.entry.js.map → p-e180c69c.entry.js.map} +0 -0
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-CQBrru3e.js';
2
- import { d as defineCustomElement$1 } from './p-vhe6g4Qt.js';
2
+ import { d as defineCustomElement$1 } from './p-BHHbLFXg.js';
3
3
 
4
4
  const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006ac1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006ac1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
5
5
 
@@ -78,12 +78,12 @@ const SdPagination = /*@__PURE__*/ proxyCustomElement(class SdPagination extends
78
78
  }
79
79
  }
80
80
  render() {
81
- return (h("div", { key: '2d6e0ff7f085eab4d36959d5d1509d02bec72602', class: this.paginationClasses }, h("div", { key: '0bfc53f19760181a89833732c217385db02addf5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
81
+ return (h("div", { key: '0a55eddc4c434d3a7dc6afaa2386e68a6767300e', class: this.paginationClasses }, h("div", { key: '8bb73906c74f1a8646286d0858ab6276531e4bd9', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
82
82
  'pagination-btn': true,
83
83
  'pagination-btn--selected': this.currentPage === n,
84
84
  }, disabled: this.currentPage === n, style: {
85
85
  '--pagination-btn-width': `${this.buttonWidth}px`,
86
- }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'd22835ee79615e3f0700d4820df93e5bf91f68ba', class: "append-btns" }, this.renderNextButtons())));
86
+ }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2f6945f41f351153a9c182262ecef8c96d0ec1eb', class: "append-btns" }, this.renderNextButtons())));
87
87
  }
88
88
  static get style() { return sdPaginationCss(); }
89
89
  }, [768, "sd-pagination", {
@@ -111,6 +111,6 @@ function defineCustomElement() {
111
111
  }
112
112
 
113
113
  export { SdPagination as S, defineCustomElement as d };
114
- //# sourceMappingURL=p-DRGcUx0C.js.map
114
+ //# sourceMappingURL=p-BREduhZA.js.map
115
115
 
116
- //# sourceMappingURL=p-DRGcUx0C.js.map
116
+ //# sourceMappingURL=p-BREduhZA.js.map
@@ -1 +1 @@
1
- {"file":"p-DRGcUx0C.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-pagination/sd-pagination.scss?tag=sd-pagination","src/components/sd-pagination/sd-pagination.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-pagination {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: $grey_80;\n width: 100%;\n font-size: 12px;\n\n .prepend-btns {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n width: 60px;\n\n button {\n width: 26px;\n height: 26px;\n border: 0;\n background: none;\n\n &:hover {\n border: 1px solid $oceanblue_70;\n border-radius: 14px;\n }\n }\n }\n\n .append-btns {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n width: 60px;\n\n button {\n width: 26px;\n height: 26px;\n border: 0;\n background: none;\n\n &:hover {\n border: 1px solid $oceanblue_70;\n border-radius: 14px;\n }\n }\n }\n\n .pagination-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n outline: none;\n border: none;\n cursor: pointer;\n height: 26px;\n color: $grey_80;\n width: var(--pagination-btn-width, 26px);\n\n &--selected {\n background-color: $oceanblue_70;\n color: white;\n }\n\n &:hover {\n border: 1px solid $oceanblue_70;\n }\n }\n\n &--simple {\n .pagination-info {\n line-height: 26px;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n .current-page,\n .last-page {\n padding: 0 2px;\n }\n }\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\n\nconst BUTTON_WIDTH: Record<number, number> = {\n 1: 26,\n 2: 36,\n 3: 42,\n 4: 50,\n 5: 58,\n};\n\nconst PER_PAGE = 10;\n\n@Component({\n tag: 'sd-pagination',\n styleUrl: 'sd-pagination.scss',\n})\nexport class SdPagination {\n @Prop() currentPage: number = 1;\n @Prop() lastPage: number = 1;\n @Prop() simple: boolean = false;\n\n @Event() pageChange!: EventEmitter<number>;\n\n private get paginationClasses() {\n const classes = ['sd-pagination'];\n\n if (this.simple) {\n classes.push('sd-pagination--simple');\n }\n return classes.join(' ');\n }\n\n private get pageNumbers() {\n const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n const end = Math.min(start + PER_PAGE - 1, this.lastPage);\n return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n }\n\n private get buttonWidth() {\n const lastPageNum = this.pageNumbers.at(-1) ?? 1;\n const maxPageLength: number = lastPageNum.toString().length;\n return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];\n }\n\n private handlePageChange(page: number) {\n if (page < 1 || page > this.lastPage) return;\n this.pageChange.emit(page);\n }\n\n private handleGroupChange(direction: 'forward' | 'backward') {\n const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\n const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\n this.handlePageChange(newPage);\n }\n\n private get isFirstGroup() {\n return this.currentPage <= PER_PAGE;\n }\n\n private get isLastGroup() {\n const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n return startPageGroup + PER_PAGE - 1 >= this.lastPage;\n }\n\n private renderPrevButtons() {\n if (this.simple) {\n if (this.currentPage <= 1) return null;\n\n return (\n <Fragment>\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n </button>\n <button\n aria-label=\"Go to previous page\"\n onClick={() => this.handlePageChange(this.currentPage - 1)}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n\n if (!this.isFirstGroup) {\n return (\n <Fragment>\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n </button>\n <button\n aria-label=\"Go to previous page group\"\n onClick={() => this.handleGroupChange('backward')}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n }\n\n private renderNextButtons() {\n if (this.simple) {\n if (this.currentPage >= this.lastPage) return null;\n\n return (\n <Fragment>\n <button\n aria-label=\"Go to next page\"\n onClick={() => this.handlePageChange(this.currentPage + 1)}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n </button>\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n\n if (!this.isLastGroup) {\n return (\n <Fragment>\n <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n </button>\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n }\n\n render() {\n return (\n <div class={this.paginationClasses}>\n <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\n\n {this.simple ? (\n <div class=\"pagination-info\">\n <span class=\"current-page\">{this.currentPage}</span>\n <span>/</span>\n <span class=\"last-page\">{this.lastPage}</span>\n </div>\n ) : (\n this.pageNumbers.map(n => (\n <button\n type=\"button\"\n aria-current={this.currentPage === n ? 'page' : undefined}\n class={{\n 'pagination-btn': true,\n 'pagination-btn--selected': this.currentPage === n,\n }}\n disabled={this.currentPage === n}\n style={{\n '--pagination-btn-width': `${this.buttonWidth}px`,\n }}\n onClick={() => this.handlePageChange(n)}\n >\n {n}\n </button>\n ))\n )}\n\n <div class=\"append-btns\">{this.renderNextButtons()}</div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-BREduhZA.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-pagination/sd-pagination.scss?tag=sd-pagination","src/components/sd-pagination/sd-pagination.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-pagination {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: $grey_80;\n width: 100%;\n font-size: 12px;\n\n .prepend-btns {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n width: 60px;\n\n button {\n width: 26px;\n height: 26px;\n border: 0;\n background: none;\n\n &:hover {\n border: 1px solid $oceanblue_70;\n border-radius: 14px;\n }\n }\n }\n\n .append-btns {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n width: 60px;\n\n button {\n width: 26px;\n height: 26px;\n border: 0;\n background: none;\n\n &:hover {\n border: 1px solid $oceanblue_70;\n border-radius: 14px;\n }\n }\n }\n\n .pagination-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n outline: none;\n border: none;\n cursor: pointer;\n height: 26px;\n color: $grey_80;\n width: var(--pagination-btn-width, 26px);\n\n &--selected {\n background-color: $oceanblue_70;\n color: white;\n }\n\n &:hover {\n border: 1px solid $oceanblue_70;\n }\n }\n\n &--simple {\n .pagination-info {\n line-height: 26px;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n gap: 8px;\n .current-page,\n .last-page {\n padding: 0 2px;\n }\n }\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\n\nconst BUTTON_WIDTH: Record<number, number> = {\n 1: 26,\n 2: 36,\n 3: 42,\n 4: 50,\n 5: 58,\n};\n\nconst PER_PAGE = 10;\n\n@Component({\n tag: 'sd-pagination',\n styleUrl: 'sd-pagination.scss',\n})\nexport class SdPagination {\n @Prop() currentPage: number = 1;\n @Prop() lastPage: number = 1;\n @Prop() simple: boolean = false;\n\n @Event() pageChange!: EventEmitter<number>;\n\n private get paginationClasses() {\n const classes = ['sd-pagination'];\n\n if (this.simple) {\n classes.push('sd-pagination--simple');\n }\n return classes.join(' ');\n }\n\n private get pageNumbers() {\n const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n const end = Math.min(start + PER_PAGE - 1, this.lastPage);\n return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n }\n\n private get buttonWidth() {\n const lastPageNum = this.pageNumbers.at(-1) ?? 1;\n const maxPageLength: number = lastPageNum.toString().length;\n return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];\n }\n\n private handlePageChange(page: number) {\n if (page < 1 || page > this.lastPage) return;\n this.pageChange.emit(page);\n }\n\n private handleGroupChange(direction: 'forward' | 'backward') {\n const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;\n const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);\n this.handlePageChange(newPage);\n }\n\n private get isFirstGroup() {\n return this.currentPage <= PER_PAGE;\n }\n\n private get isLastGroup() {\n const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;\n return startPageGroup + PER_PAGE - 1 >= this.lastPage;\n }\n\n private renderPrevButtons() {\n if (this.simple) {\n if (this.currentPage <= 1) return null;\n\n return (\n <Fragment>\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n </button>\n <button\n aria-label=\"Go to previous page\"\n onClick={() => this.handlePageChange(this.currentPage - 1)}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n\n if (!this.isFirstGroup) {\n return (\n <Fragment>\n <button aria-label=\"Go to first page\" onClick={() => this.handlePageChange(1)}>\n <sd-icon name=\"arrowLeftEnd\" size=\"12\" color=\"#222222\" />\n </button>\n <button\n aria-label=\"Go to previous page group\"\n onClick={() => this.handleGroupChange('backward')}\n >\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n }\n\n private renderNextButtons() {\n if (this.simple) {\n if (this.currentPage >= this.lastPage) return null;\n\n return (\n <Fragment>\n <button\n aria-label=\"Go to next page\"\n onClick={() => this.handlePageChange(this.currentPage + 1)}\n >\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n </button>\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n\n if (!this.isLastGroup) {\n return (\n <Fragment>\n <button aria-label=\"Go to next page group\" onClick={() => this.handleGroupChange('forward')}>\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#222222\" />\n </button>\n <button aria-label=\"Go to last page\" onClick={() => this.handlePageChange(this.lastPage)}>\n <sd-icon name=\"arrowRightEnd\" size=\"12\" color=\"#222222\" />\n </button>\n </Fragment>\n );\n }\n }\n\n render() {\n return (\n <div class={this.paginationClasses}>\n <div class=\"prepend-btns\">{this.renderPrevButtons()}</div>\n\n {this.simple ? (\n <div class=\"pagination-info\">\n <span class=\"current-page\">{this.currentPage}</span>\n <span>/</span>\n <span class=\"last-page\">{this.lastPage}</span>\n </div>\n ) : (\n this.pageNumbers.map(n => (\n <button\n type=\"button\"\n aria-current={this.currentPage === n ? 'page' : undefined}\n class={{\n 'pagination-btn': true,\n 'pagination-btn--selected': this.currentPage === n,\n }}\n disabled={this.currentPage === n}\n style={{\n '--pagination-btn-width': `${this.buttonWidth}px`,\n }}\n onClick={() => this.handlePageChange(n)}\n >\n {n}\n </button>\n ))\n )}\n\n <div class=\"append-btns\">{this.renderNextButtons()}</div>\n </div>\n );\n }\n}\n"],"version":3}
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
2
- import { d as defineCustomElement$1 } from './p-vhe6g4Qt.js';
2
+ import { d as defineCustomElement$1 } from './p-BHHbLFXg.js';
3
3
 
4
4
  const sdCheckboxCss = () => `sd-checkbox{display:block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005cc9;background:#005cc9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075ff;background:#d9eaff}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#eeeeee}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075ff;background:#0075ff}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#eeeeee;border:1px solid #cccccc !important}`;
5
5
 
@@ -114,6 +114,6 @@ function defineCustomElement() {
114
114
  }
115
115
 
116
116
  export { SdCheckbox as S, defineCustomElement as d };
117
- //# sourceMappingURL=p-CKhzpdPk.js.map
117
+ //# sourceMappingURL=p-Bj4u0G5b.js.map
118
118
 
119
- //# sourceMappingURL=p-CKhzpdPk.js.map
119
+ //# sourceMappingURL=p-Bj4u0G5b.js.map
@@ -1 +1 @@
1
- {"file":"p-CKhzpdPk.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\n\nsd-checkbox {\n display: block;\n height: 20px;\n line-height: 0;\n\n .sd-checkbox {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n height: 20px;\n max-height: 20px;\n\n > input {\n display: none;\n }\n\n &:hover {\n &.sd-checkbox--checked,\n &.sd-checkbox--indeterminate {\n .sd-checkbox__bg {\n border-color: $brilliantblue_80;\n background: $brilliantblue_80;\n }\n }\n\n &.sd-checkbox--unchecked {\n .sd-checkbox__bg {\n border: 1px solid $brilliantblue_75;\n background: $brilliantblue_25;\n }\n }\n\n &.sd-checkbox--disabled {\n .sd-checkbox__bg {\n border: 1px solid transparent;\n background: $grey_20;\n }\n }\n }\n\n &__bg {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n border: 1px solid $grey_65;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n line-height: 0;\n }\n\n &__label {\n font-size: 12px;\n color: $grey_90;\n line-height: 20px;\n }\n\n &--checked,\n &--indeterminate {\n &.sd-checkbox--disabled {\n .sd-checkbox__bg {\n background: $grey_20;\n border: 1px solid $grey_45 !important;\n }\n }\n\n .sd-checkbox__bg {\n border: 1px solid $brilliantblue_75;\n background: $brilliantblue_75;\n }\n }\n\n &--unchecked {\n .sd-checkbox__bg {\n background: white;\n }\n }\n\n &--disabled {\n cursor: not-allowed;\n .sd-checkbox__bg {\n background: $grey_20;\n border: 1px solid $grey_45 !important;\n }\n }\n }\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport type CheckedType = boolean | any[] | null;\n\n@Component({\n tag: 'sd-checkbox',\n styleUrl: 'sd-checkbox.scss',\n})\nexport class SdCheckbox {\n @Element() el!: HTMLElement;\n\n /** 현재 선택 상태 또는 배열 형태의 값 */\n @Prop({ mutable: true, }) checked!: CheckedType;\n\n /** 배열 모드에서의 개별 값 */\n @Prop() val?: any;\n\n /** 비활성화 여부 */\n @Prop() disabled: boolean = false;\n\n /** 표시할 라벨 텍스트 */\n @Prop() label: string = '';\n\n /** 내부 체크 상태 */\n @State() private isChecked: boolean | null = false;\n\n /** 값 변경 이벤트 */\n @Event() sdChange!: EventEmitter<CheckedType>;\n\n componentWillLoad() {\n this.updateCheckedState(this.checked);\n }\n\n componentWillRender() {\n this.updateCheckedState(this.checked);\n }\n\n @Watch('checked')\n watchValueHandler(newValue: CheckedType) {\n this.updateCheckedState(newValue);\n }\n\n private get checkboxClasses(): string {\n const classes = [\n 'sd-checkbox',\n `sd-checkbox--${\n this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'\n }`,\n ];\n\n if (this.disabled) {\n classes.push('sd-checkbox--disabled');\n }\n\n return classes.join(' ');\n }\n\n private updateCheckedState(value: CheckedType) {\n if (value === null) {\n this.isChecked = null;\n } else if (typeof value === 'boolean') {\n this.isChecked = value;\n } else if (Array.isArray(value)) {\n this.isChecked = this.val !== undefined && value.includes(this.val);\n } else {\n this.isChecked = false;\n }\n }\n\n private handleChange = () => {\n if (this.disabled) return;\n\n let newValue: CheckedType;\n\n if (typeof this.checked === 'boolean') {\n newValue = !this.checked;\n } else if (Array.isArray(this.checked)) {\n if (this.val === undefined) {\n console.warn('A \"val\" property is required when using an array for the \"value\" property.');\n }\n\n const valueSet = new Set(this.checked);\n valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\n newValue = Array.from(valueSet);\n } else {\n newValue = !this.isChecked;\n }\n\n this.checked = newValue;\n this.sdChange.emit(newValue);\n };\n\n render() {\n return (\n <label\n aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\n aria-disabled={this.disabled.toString()}\n role=\"checkbox\"\n aria-label={this.label || 'checkbox'}\n class={this.checkboxClasses}\n >\n <input\n type=\"checkbox\"\n value={this.val}\n checked={!!this.isChecked}\n disabled={this.disabled}\n onChange={this.handleChange}\n name={this.label || 'checkbox'}\n />\n <div class=\"sd-checkbox__bg\">\n {this.isChecked !== false ? (\n <sd-icon\n name={this.isChecked === true ? 'check' : 'minus'}\n size={12}\n color={this.disabled ? '#888888' : 'white'}\n />\n ) : null}\n </div>\n {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\n </label>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-Bj4u0G5b.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import 'variables';\n\nsd-checkbox {\n display: block;\n height: 20px;\n line-height: 0;\n\n .sd-checkbox {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n height: 20px;\n max-height: 20px;\n\n > input {\n display: none;\n }\n\n &:hover {\n &.sd-checkbox--checked,\n &.sd-checkbox--indeterminate {\n .sd-checkbox__bg {\n border-color: $brilliantblue_80;\n background: $brilliantblue_80;\n }\n }\n\n &.sd-checkbox--unchecked {\n .sd-checkbox__bg {\n border: 1px solid $brilliantblue_75;\n background: $brilliantblue_25;\n }\n }\n\n &.sd-checkbox--disabled {\n .sd-checkbox__bg {\n border: 1px solid transparent;\n background: $grey_20;\n }\n }\n }\n\n &__bg {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n border: 1px solid $grey_65;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n line-height: 0;\n }\n\n &__label {\n font-size: 12px;\n color: $grey_90;\n line-height: 20px;\n }\n\n &--checked,\n &--indeterminate {\n &.sd-checkbox--disabled {\n .sd-checkbox__bg {\n background: $grey_20;\n border: 1px solid $grey_45 !important;\n }\n }\n\n .sd-checkbox__bg {\n border: 1px solid $brilliantblue_75;\n background: $brilliantblue_75;\n }\n }\n\n &--unchecked {\n .sd-checkbox__bg {\n background: white;\n }\n }\n\n &--disabled {\n cursor: not-allowed;\n .sd-checkbox__bg {\n background: $grey_20;\n border: 1px solid $grey_45 !important;\n }\n }\n }\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport type CheckedType = boolean | any[] | null;\n\n@Component({\n tag: 'sd-checkbox',\n styleUrl: 'sd-checkbox.scss',\n})\nexport class SdCheckbox {\n @Element() el!: HTMLElement;\n\n /** 현재 선택 상태 또는 배열 형태의 값 */\n @Prop({ mutable: true, }) checked!: CheckedType;\n\n /** 배열 모드에서의 개별 값 */\n @Prop() val?: any;\n\n /** 비활성화 여부 */\n @Prop() disabled: boolean = false;\n\n /** 표시할 라벨 텍스트 */\n @Prop() label: string = '';\n\n /** 내부 체크 상태 */\n @State() private isChecked: boolean | null = false;\n\n /** 값 변경 이벤트 */\n @Event() sdChange!: EventEmitter<CheckedType>;\n\n componentWillLoad() {\n this.updateCheckedState(this.checked);\n }\n\n componentWillRender() {\n this.updateCheckedState(this.checked);\n }\n\n @Watch('checked')\n watchValueHandler(newValue: CheckedType) {\n this.updateCheckedState(newValue);\n }\n\n private get checkboxClasses(): string {\n const classes = [\n 'sd-checkbox',\n `sd-checkbox--${\n this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'\n }`,\n ];\n\n if (this.disabled) {\n classes.push('sd-checkbox--disabled');\n }\n\n return classes.join(' ');\n }\n\n private updateCheckedState(value: CheckedType) {\n if (value === null) {\n this.isChecked = null;\n } else if (typeof value === 'boolean') {\n this.isChecked = value;\n } else if (Array.isArray(value)) {\n this.isChecked = this.val !== undefined && value.includes(this.val);\n } else {\n this.isChecked = false;\n }\n }\n\n private handleChange = () => {\n if (this.disabled) return;\n\n let newValue: CheckedType;\n\n if (typeof this.checked === 'boolean') {\n newValue = !this.checked;\n } else if (Array.isArray(this.checked)) {\n if (this.val === undefined) {\n console.warn('A \"val\" property is required when using an array for the \"value\" property.');\n }\n\n const valueSet = new Set(this.checked);\n valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\n newValue = Array.from(valueSet);\n } else {\n newValue = !this.isChecked;\n }\n\n this.checked = newValue;\n this.sdChange.emit(newValue);\n };\n\n render() {\n return (\n <label\n aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\n aria-disabled={this.disabled.toString()}\n role=\"checkbox\"\n aria-label={this.label || 'checkbox'}\n class={this.checkboxClasses}\n >\n <input\n type=\"checkbox\"\n value={this.val}\n checked={!!this.isChecked}\n disabled={this.disabled}\n onChange={this.handleChange}\n name={this.label || 'checkbox'}\n />\n <div class=\"sd-checkbox__bg\">\n {this.isChecked !== false ? (\n <sd-icon\n name={this.isChecked === true ? 'check' : 'minus'}\n size={12}\n color={this.disabled ? '#888888' : 'white'}\n />\n ) : null}\n </div>\n {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\n </label>\n );\n }\n}\n"],"version":3}
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
2
- import { d as defineCustomElement$1 } from './p-vhe6g4Qt.js';
2
+ import { d as defineCustomElement$1 } from './p-BHHbLFXg.js';
3
3
 
4
4
  const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker{width:fit-content;display:inline-block}.sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-range-picker .sd-input .sd-input__container{width:210px}.sd-date-range-picker .sd-input .sd-date-range-picker__input{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}.sd-input{display:flex;flex-flow:row nowrap;align-items:center;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;width:var(--input-width, 100%);height:28px;background:white}.sd-input.sd-input--with-label:not(.sd-input--inside-label){border:none}.sd-input.sd-input--with-label:not(.sd-input--inside-label) .sd-input__label{margin-right:8px}.sd-input.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border:1px solid #aaaaaa;border-radius:4px;height:28px}.sd-input.sd-input--inside-label .sd-input__label{background:#f6f6f6;padding:0 12px;display:flex;align-items:center;justify-content:center;height:100%;border-radius:4px 0 0 4px}.sd-input.sd-input--disabled{cursor:not-allowed !important;box-shadow:none !important;border:1px solid #cccccc !important;background:#eeeeee !important;color:#888888 !important}.sd-input.sd-input--disabled.sd-input--with-label:not(.sd-input--inside-label){border:none !important;background:transparent !important}.sd-input.sd-input--disabled.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border:1px solid #cccccc !important;background:#eeeeee !important;color:#888888 !important}.sd-input.sd-input--disabled .sd-input__container{color:#737373 !important}.sd-input.sd-input--disabled .sd-input__container .sd-input__native_element{color:#888888 !important;cursor:not-allowed !important}.sd-input--hovered,.sd-input--focused{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input--hovered.sd-input--with-label:not(.sd-input--inside-label),.sd-input--focused.sd-input--with-label:not(.sd-input--inside-label){border-color:transparent;box-shadow:none}.sd-input--hovered.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container,.sd-input--focused.sd-input--with-label:not(.sd-input--inside-label) .sd-input__container{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input.sd-input--error{border-color:#fb4444}.sd-input.sd-input--pass{border-color:#2bce6c}.sd-input.sd-input--barcode:not(.sd-input--disabled){background-color:#fafaa1}.sd-input .sd-input__container{display:flex;align-items:center;padding:4px 8px;width:100%}.sd-input .sd-input__container .sd-input__native_element{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0}.sd-input .sd-input__container .sd-input__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__container .sd-input__clear-icon{cursor:pointer;margin-left:8px}`;
5
5
 
@@ -105,17 +105,17 @@ const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
105
105
  '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
106
106
  }
107
107
  : {};
108
- return (h(Host, { key: '3e95d5ff30f78cff43d6ed263acf6d782ee082d9', style: inputWidth }, h("div", { key: '6005f125ada3a94cf320d6390e8868c51b773b07', class: {
108
+ return (h(Host, { key: '3babaa8e892b3e5e484d1bdbc28b0d209945ad69', style: inputWidth }, h("div", { key: '31ea7cd711a33881144da3f0d4a6e98e6ec55244', class: {
109
109
  'sd-input': true,
110
110
  'sd-input--with-label': !!this.label,
111
111
  'sd-input--inside-label': !!this.label && this.insideLabel,
112
112
  'sd-input--barcode': !!this.barcode,
113
113
  [this.getInputStatus()]: true,
114
- } }, this.label && (h("div", { key: '89009bc9f0bf631a0274c5261cacdc915548c4ca', class: {
114
+ } }, this.label && (h("div", { key: '85596e41249b0f136c9c07bebe40e2bc2166ceba', class: {
115
115
  'sd-input__label': true,
116
- } }, this.label)), h("label", { key: '83f40c08eef0754904941fffd00bec035f654bbf', class: {
116
+ } }, this.label)), h("label", { key: 'd942a7cc950506a5cf2bcfd8984d3981af18cc7f', class: {
117
117
  'sd-input__container': true,
118
- }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '17d648f43076578e54f96c9e4fbd99553af45ef6', name: "prefix" }), h("input", { key: '03a7c6da51930e629e75b8a0af8c3e843169a6df', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '604948d6bc07fb3e97e644c5459862b1fd3e91f0', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '124d732eaa54a824dc82896d2bfc7520aa3dc2a2', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
118
+ }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '3add3a8c845be67ccd31ae98b30f5989d7e7dbf1', name: "prefix" }), h("input", { key: 'b7297ae85e0f07c8a5696cc7072833dc6ade82bc', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: 'c6ae6cb3f58da00c0ae80261e41841889347b73d', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '662f365d57707b631f7a58b18330666521846e84', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
119
119
  this.internalValue = '';
120
120
  this.sdChange?.emit(this.internalValue);
121
121
  this.sdInput?.emit(this.internalValue);
@@ -170,6 +170,6 @@ function defineCustomElement() {
170
170
  }
171
171
 
172
172
  export { SdInput as S, defineCustomElement as d };
173
- //# sourceMappingURL=p-CfKJNKMH.js.map
173
+ //# sourceMappingURL=p-C4kdHNdl.js.map
174
174
 
175
- //# sourceMappingURL=p-CfKJNKMH.js.map
175
+ //# sourceMappingURL=p-C4kdHNdl.js.map
@@ -1 +1 @@
1
- {"file":"p-CfKJNKMH.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n@import '../sd-date-picker/sd-date-picker.scss';\n@import '../sd-date-range-picker/sd-date-range-picker.scss';\n\n.sd-input {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n border: 1px solid $grey_55;\n border-radius: 4px;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n width: var(--input-width, 100%);\n height: 28px;\n background: white;\n\n &.sd-input--with-label:not(.sd-input--inside-label) {\n border: none;\n\n .sd-input__label {\n margin-right: 8px;\n }\n\n .sd-input__container {\n border: 1px solid $grey_55;\n border-radius: 4px;\n height: 28px;\n }\n }\n\n &.sd-input--inside-label {\n .sd-input__label {\n background: $grey_10;\n padding: 0 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n border-radius: 4px 0 0 4px;\n }\n }\n\n &.sd-input--disabled {\n cursor: not-allowed !important;\n box-shadow: none !important;\n\n border: 1px solid $grey_45 !important;\n background: $grey_20 !important;\n color: $grey_65 !important;\n\n &.sd-input--with-label:not(.sd-input--inside-label) {\n border: none !important;\n background: transparent !important;\n\n .sd-input__container {\n border: 1px solid $grey_45 !important;\n background: $grey_20 !important;\n color: $grey_65 !important;\n }\n }\n .sd-input__container {\n color: $grey_70 !important;\n .sd-input__native_element {\n color: $grey_65 !important;\n cursor: not-allowed !important;\n }\n }\n }\n\n &--hovered,\n &--focused {\n border-color: $brilliantblue_75;\n box-shadow: 0 0 4px 0 #0071ff66;\n\n &.sd-input--with-label:not(.sd-input--inside-label) {\n border-color: transparent;\n box-shadow: none;\n\n .sd-input__container {\n border-color: $brilliantblue_75;\n box-shadow: 0 0 4px 0 #0071ff66;\n }\n }\n }\n\n &.sd-input--error {\n border-color: $red_70;\n }\n\n &.sd-input--pass {\n border-color: $green_65;\n }\n\n &.sd-input--barcode:not(.sd-input--disabled) {\n background-color: $olive_15;\n }\n\n .sd-input__container {\n display: flex;\n align-items: center;\n padding: 4px 8px;\n width: 100%;\n\n // &.sd-input--disabled {\n // background-color: $grey_20 !important;\n // border-color: $grey_45 !important;\n // cursor: not-allowed !important;\n // box-shadow: none !important;\n // .sd-input__native_element {\n // color: $grey_65 !important;\n // cursor: not-allowed !important;\n // }\n // }\n\n .sd-input__native_element {\n display: block;\n width: 100%;\n height: 20px;\n line-height: 20px;\n border: none;\n outline: none;\n background: transparent;\n font-size: inherit;\n color: $grey_90;\n margin-left: 4px;\n margin-right: 4px;\n padding-block: 0;\n padding-inline: 0;\n\n &::placeholder {\n font-size: 12px;\n height: 20px;\n line-height: 20px;\n color: $grey_55;\n }\n }\n\n .sd-input__clear-icon {\n cursor: pointer;\n margin-left: 8px;\n }\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-input',\n styleUrl: 'sd-input.scss',\n})\nexport class SdInput {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() width?: number | string;\n @Prop() barcode?: boolean = false;\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n\n // props - custom styles\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: string | number | null = null;\n @State() private error: boolean = false;\n @State() private focused: boolean = false;\n @State() private hovered: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event() sdClick?: EventEmitter<string | number | null>;\n @Event() sdInput?: EventEmitter<string | number | null>;\n @Event() sdChange?: EventEmitter<string | number | null>;\n @Event() sdFocus?: EventEmitter<Event>;\n @Event() sdBlur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string | number | null) {\n if (newValue !== this.value) {\n this.value = newValue;\n this.sdInput?.emit(this.value);\n }\n\n if (!this.rules || this.rules.length === 0) return;\n this.error = false;\n for (const rule of this.rules) {\n const result = rule(newValue);\n if (result !== true) {\n this.error = true;\n break;\n }\n }\n }\n\n @Method()\n async getNativeElement(): Promise<HTMLInputElement | null> {\n return this.nativeEl || null;\n }\n\n componentWillLoad() {\n if (this.value) {\n this.internalValue = this.value;\n }\n }\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.internalValue = target.value;\n this.sdInput?.emit(this.internalValue);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.internalValue = target.value;\n this.sdChange?.emit(this.internalValue);\n };\n\n private handleFocus = (type: 'focus' | 'blur', event: Event) => {\n this.focused = type === 'focus';\n\n if (type === 'blur') this.sdBlur?.emit(event);\n else this.sdFocus?.emit(event);\n };\n\n getInputStatus() {\n // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)\n if (this.disabled) return 'sd-input--disabled';\n if (this.hovered) return 'sd-input--hovered';\n if (this.focused) return 'sd-input--focused';\n if (this.status) return `sd-input--${this.status}`;\n if (this.error) return 'sd-input--error';\n return '';\n }\n\n render() {\n const inputWidth = this.width\n ? {\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n }\n : {};\n\n return (\n <Host style={inputWidth}>\n <div\n class={{\n 'sd-input': true,\n 'sd-input--with-label': !!this.label,\n 'sd-input--inside-label': !!this.label && this.insideLabel,\n 'sd-input--barcode': !!this.barcode,\n\n [this.getInputStatus()]: true,\n }}\n >\n {this.label && (\n <div\n class={{\n 'sd-input__label': true,\n }}\n >\n {this.label}\n </div>\n )}\n <label\n class={{\n 'sd-input__container': true,\n }}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n style={this.inputStyle}\n >\n <slot name=\"prefix\"></slot>\n <input\n ref={el => (this.nativeEl = el)}\n class={`sd-input__native_element ${this.inputClass}`}\n type=\"text\"\n value={this.internalValue || ''}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n autofocus={this.autoFocus}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={event => this.handleFocus('focus', event)}\n onBlur={event => this.handleFocus('blur', event)}\n />\n <slot name=\"suffix\"></slot>\n {this.clearable && this.internalValue && (\n <sd-icon\n name=\"close\"\n color=\"#888\"\n class=\"sd-input__clear-icon\"\n onClick={() => {\n this.internalValue = '';\n this.sdChange?.emit(this.internalValue);\n this.sdInput?.emit(this.internalValue);\n }}\n />\n )}\n </label>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-C4kdHNdl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-input/sd-input.scss?tag=sd-input","src/components/sd-input/sd-input.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n@import '../sd-date-picker/sd-date-picker.scss';\n@import '../sd-date-range-picker/sd-date-range-picker.scss';\n\n.sd-input {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n border: 1px solid $grey_55;\n border-radius: 4px;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n width: var(--input-width, 100%);\n height: 28px;\n background: white;\n\n &.sd-input--with-label:not(.sd-input--inside-label) {\n border: none;\n\n .sd-input__label {\n margin-right: 8px;\n }\n\n .sd-input__container {\n border: 1px solid $grey_55;\n border-radius: 4px;\n height: 28px;\n }\n }\n\n &.sd-input--inside-label {\n .sd-input__label {\n background: $grey_10;\n padding: 0 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n border-radius: 4px 0 0 4px;\n }\n }\n\n &.sd-input--disabled {\n cursor: not-allowed !important;\n box-shadow: none !important;\n\n border: 1px solid $grey_45 !important;\n background: $grey_20 !important;\n color: $grey_65 !important;\n\n &.sd-input--with-label:not(.sd-input--inside-label) {\n border: none !important;\n background: transparent !important;\n\n .sd-input__container {\n border: 1px solid $grey_45 !important;\n background: $grey_20 !important;\n color: $grey_65 !important;\n }\n }\n .sd-input__container {\n color: $grey_70 !important;\n .sd-input__native_element {\n color: $grey_65 !important;\n cursor: not-allowed !important;\n }\n }\n }\n\n &--hovered,\n &--focused {\n border-color: $brilliantblue_75;\n box-shadow: 0 0 4px 0 #0071ff66;\n\n &.sd-input--with-label:not(.sd-input--inside-label) {\n border-color: transparent;\n box-shadow: none;\n\n .sd-input__container {\n border-color: $brilliantblue_75;\n box-shadow: 0 0 4px 0 #0071ff66;\n }\n }\n }\n\n &.sd-input--error {\n border-color: $red_70;\n }\n\n &.sd-input--pass {\n border-color: $green_65;\n }\n\n &.sd-input--barcode:not(.sd-input--disabled) {\n background-color: $olive_15;\n }\n\n .sd-input__container {\n display: flex;\n align-items: center;\n padding: 4px 8px;\n width: 100%;\n\n // &.sd-input--disabled {\n // background-color: $grey_20 !important;\n // border-color: $grey_45 !important;\n // cursor: not-allowed !important;\n // box-shadow: none !important;\n // .sd-input__native_element {\n // color: $grey_65 !important;\n // cursor: not-allowed !important;\n // }\n // }\n\n .sd-input__native_element {\n display: block;\n width: 100%;\n height: 20px;\n line-height: 20px;\n border: none;\n outline: none;\n background: transparent;\n font-size: inherit;\n color: $grey_90;\n margin-left: 4px;\n margin-right: 4px;\n padding-block: 0;\n padding-inline: 0;\n\n &::placeholder {\n font-size: 12px;\n height: 20px;\n line-height: 20px;\n color: $grey_55;\n }\n }\n\n .sd-input__clear-icon {\n cursor: pointer;\n margin-left: 8px;\n }\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-input',\n styleUrl: 'sd-input.scss',\n})\nexport class SdInput {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() insideLabel: boolean = false;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() width?: number | string;\n @Prop() barcode?: boolean = false;\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n\n // props - custom styles\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: string | number | null = null;\n @State() private error: boolean = false;\n @State() private focused: boolean = false;\n @State() private hovered: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event() sdClick?: EventEmitter<string | number | null>;\n @Event() sdInput?: EventEmitter<string | number | null>;\n @Event() sdChange?: EventEmitter<string | number | null>;\n @Event() sdFocus?: EventEmitter<Event>;\n @Event() sdBlur?: EventEmitter<Event>;\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n this.internalValue = newValue;\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: string | number | null) {\n if (newValue !== this.value) {\n this.value = newValue;\n this.sdInput?.emit(this.value);\n }\n\n if (!this.rules || this.rules.length === 0) return;\n this.error = false;\n for (const rule of this.rules) {\n const result = rule(newValue);\n if (result !== true) {\n this.error = true;\n break;\n }\n }\n }\n\n @Method()\n async getNativeElement(): Promise<HTMLInputElement | null> {\n return this.nativeEl || null;\n }\n\n componentWillLoad() {\n if (this.value) {\n this.internalValue = this.value;\n }\n }\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.internalValue = target.value;\n this.sdInput?.emit(this.internalValue);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.internalValue = target.value;\n this.sdChange?.emit(this.internalValue);\n };\n\n private handleFocus = (type: 'focus' | 'blur', event: Event) => {\n this.focused = type === 'focus';\n\n if (type === 'blur') this.sdBlur?.emit(event);\n else this.sdFocus?.emit(event);\n };\n\n getInputStatus() {\n // input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)\n if (this.disabled) return 'sd-input--disabled';\n if (this.hovered) return 'sd-input--hovered';\n if (this.focused) return 'sd-input--focused';\n if (this.status) return `sd-input--${this.status}`;\n if (this.error) return 'sd-input--error';\n return '';\n }\n\n render() {\n const inputWidth = this.width\n ? {\n '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n }\n : {};\n\n return (\n <Host style={inputWidth}>\n <div\n class={{\n 'sd-input': true,\n 'sd-input--with-label': !!this.label,\n 'sd-input--inside-label': !!this.label && this.insideLabel,\n 'sd-input--barcode': !!this.barcode,\n\n [this.getInputStatus()]: true,\n }}\n >\n {this.label && (\n <div\n class={{\n 'sd-input__label': true,\n }}\n >\n {this.label}\n </div>\n )}\n <label\n class={{\n 'sd-input__container': true,\n }}\n onMouseEnter={() => (this.hovered = true)}\n onMouseLeave={() => (this.hovered = false)}\n style={this.inputStyle}\n >\n <slot name=\"prefix\"></slot>\n <input\n ref={el => (this.nativeEl = el)}\n class={`sd-input__native_element ${this.inputClass}`}\n type=\"text\"\n value={this.internalValue || ''}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n autofocus={this.autoFocus}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={event => this.handleFocus('focus', event)}\n onBlur={event => this.handleFocus('blur', event)}\n />\n <slot name=\"suffix\"></slot>\n {this.clearable && this.internalValue && (\n <sd-icon\n name=\"close\"\n color=\"#888\"\n class=\"sd-input__clear-icon\"\n onClick={() => {\n this.internalValue = '';\n this.sdChange?.emit(this.internalValue);\n this.sdInput?.emit(this.internalValue);\n }}\n />\n )}\n </label>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -153,7 +153,7 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
153
153
  this.sdClose.emit();
154
154
  }
155
155
  render() {
156
- return h("slot", { key: 'aa077fc67880fd159b08f0333e000b4cc73df394' });
156
+ return h("slot", { key: 'f26d3228d5c0965c2303e599259a6e93307009dc' });
157
157
  }
158
158
  }, [769, "sd-tooltip-portal", {
159
159
  "to": [1],
@@ -178,6 +178,6 @@ function defineCustomElement() {
178
178
  }
179
179
 
180
180
  export { SdTooltipPortal as S, defineCustomElement as d };
181
- //# sourceMappingURL=p-njRAT-yp.js.map
181
+ //# sourceMappingURL=p-C5U6Otnl.js.map
182
182
 
183
- //# sourceMappingURL=p-njRAT-yp.js.map
183
+ //# sourceMappingURL=p-C5U6Otnl.js.map
@@ -1 +1 @@
1
- {"file":"p-njRAT-yp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-tooltip-portal',\n shadow: true,\n})\nexport class SdTooltipPortal {\n @Element() el!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 0];\n @Prop() zIndex: number = 9999;\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop() open: boolean = false;\n\n @Event() sdClose!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n private static readonly ARROW_SIZE = 11.2;\n\n componentDidLoad() {\n this.container = this.resolveContainer();\n this.createWrapper();\n this.moveSlotContent();\n\n // DOM이 완전히 렌더링된 후 위치 계산\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\n }\n });\n\n this.observeParent();\n }\n\n componentDidRender() {\n if (!this.wrapper) return;\n\n // this.wrapper.style.display = this.open ? 'block' : 'none';\n // if (this.open) this.updatePosition();\n\n if (this.open) {\n this.wrapper.style.display = 'block';\n // RAF를 사용해서 다음 프레임에 위치 업데이트\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible';\n }\n });\n } else {\n this.wrapper.style.display = 'none';\n this.wrapper.style.visibility = 'hidden';\n }\n }\n\n disconnectedCallback() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\n this.unobserveParent();\n this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n this.wrapper = document.createElement('div');\n Object.assign(this.wrapper.style, {\n position: 'absolute',\n zIndex: this.zIndex.toString(),\n transition: 'opacity 0.4s',\n top: '-9999px',\n left: '-9999px',\n });\n this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n if (!this.wrapper) return;\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\n\n this.rafId = requestAnimationFrame(() => {\n if (!this.parentRef || !this.wrapper) return;\n\n const rect = this.parentRef.getBoundingClientRect();\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\n\n const [offsetX, offsetY] = this.offset;\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\n\n let top = 0;\n let left = 0;\n\n switch (this.placement) {\n case 'top':\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'bottom':\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'left':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\n break;\n\n case 'right':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\n break;\n }\n\n Object.assign(this.wrapper!.style, {\n top: `${top}px`,\n left: `${left}px`,\n });\n });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n if (!this.parentRef) return;\n\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n this.resizeObserver.observe(this.parentRef);\n\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\n this.mutationObserver.observe(document.body, {\n childList: true,\n subtree: true,\n });\n }\n\n private unobserveParent() {\n this.resizeObserver?.disconnect();\n this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n this.isInsideClick = !!(\n (this.wrapper && this.wrapper.contains(e.target as Node)) ||\n (this.parentRef && this.parentRef.contains(e.target as Node))\n );\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n if (this.isInsideClick) {\n this.isInsideClick = false;\n return;\n }\n if (this.wrapper?.contains(e.target as Node)) return;\n this.sdClose.emit();\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"],"version":3}
1
+ {"file":"p-C5U6Otnl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-tooltip-portal',\n shadow: true,\n})\nexport class SdTooltipPortal {\n @Element() el!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 0];\n @Prop() zIndex: number = 9999;\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop() open: boolean = false;\n\n @Event() sdClose!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n private static readonly ARROW_SIZE = 11.2;\n\n componentDidLoad() {\n this.container = this.resolveContainer();\n this.createWrapper();\n this.moveSlotContent();\n\n // DOM이 완전히 렌더링된 후 위치 계산\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\n }\n });\n\n this.observeParent();\n }\n\n componentDidRender() {\n if (!this.wrapper) return;\n\n // this.wrapper.style.display = this.open ? 'block' : 'none';\n // if (this.open) this.updatePosition();\n\n if (this.open) {\n this.wrapper.style.display = 'block';\n // RAF를 사용해서 다음 프레임에 위치 업데이트\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible';\n }\n });\n } else {\n this.wrapper.style.display = 'none';\n this.wrapper.style.visibility = 'hidden';\n }\n }\n\n disconnectedCallback() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\n this.unobserveParent();\n this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n this.wrapper = document.createElement('div');\n Object.assign(this.wrapper.style, {\n position: 'absolute',\n zIndex: this.zIndex.toString(),\n transition: 'opacity 0.4s',\n top: '-9999px',\n left: '-9999px',\n });\n this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n if (!this.wrapper) return;\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\n\n this.rafId = requestAnimationFrame(() => {\n if (!this.parentRef || !this.wrapper) return;\n\n const rect = this.parentRef.getBoundingClientRect();\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\n\n const [offsetX, offsetY] = this.offset;\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\n\n let top = 0;\n let left = 0;\n\n switch (this.placement) {\n case 'top':\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'bottom':\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'left':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\n break;\n\n case 'right':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\n break;\n }\n\n Object.assign(this.wrapper!.style, {\n top: `${top}px`,\n left: `${left}px`,\n });\n });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n if (!this.parentRef) return;\n\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n this.resizeObserver.observe(this.parentRef);\n\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\n this.mutationObserver.observe(document.body, {\n childList: true,\n subtree: true,\n });\n }\n\n private unobserveParent() {\n this.resizeObserver?.disconnect();\n this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n this.isInsideClick = !!(\n (this.wrapper && this.wrapper.contains(e.target as Node)) ||\n (this.parentRef && this.parentRef.contains(e.target as Node))\n );\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n if (this.isInsideClick) {\n this.isInsideClick = false;\n return;\n }\n if (this.wrapper?.contains(e.target as Node)) return;\n this.sdClose.emit();\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"],"version":3}
@@ -10,7 +10,7 @@ const SdTr = /*@__PURE__*/ proxyCustomElement(class SdTr extends H {
10
10
  }
11
11
  }
12
12
  render() {
13
- return (h(Host, { key: '384b83fc792b3482a2f5e299c248ccfe52e23aab', role: "row" }, h("slot", { key: '49d0f2140923af7709222b596e6cdc511bbac0a3' })));
13
+ return (h(Host, { key: '87cb4c63e4368106176b194602195b5a1e48c706', role: "row" }, h("slot", { key: 'daeaecd458767c572d86cf05650230388f1a2cae' })));
14
14
  }
15
15
  static get style() { return sdTrCss(); }
16
16
  }, [260, "sd-tr"]);
@@ -29,6 +29,6 @@ function defineCustomElement() {
29
29
  }
30
30
 
31
31
  export { SdTr as S, defineCustomElement as d };
32
- //# sourceMappingURL=p-DD9g6GYA.js.map
32
+ //# sourceMappingURL=p-CNrsaSqW.js.map
33
33
 
34
- //# sourceMappingURL=p-DD9g6GYA.js.map
34
+ //# sourceMappingURL=p-CNrsaSqW.js.map
@@ -1 +1 @@
1
- {"file":"p-DD9g6GYA.js","mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,wBAAwB,CAAC;;MCMnC,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-tr/sd-tr.scss?tag=sd-tr","src/components/sd-table/sd-tr/sd-tr.tsx"],"sourcesContent":["sd-tr {\n display: table-row;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-tr',\n styleUrl: 'sd-tr.scss',\n})\nexport class SdTr {\n render() {\n return (\n <Host role=\"row\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-CNrsaSqW.js","mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,wBAAwB,CAAC;;MCMnC,IAAI,iBAAAA,kBAAA,CAAA,MAAA,IAAA,SAAAC,CAAA,CAAA;;;;;;;IAChB,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,EACf,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-tr/sd-tr.scss?tag=sd-tr","src/components/sd-table/sd-tr/sd-tr.tsx"],"sourcesContent":["sd-tr {\n display: table-row;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-tr',\n styleUrl: 'sd-tr.scss',\n})\nexport class SdTr {\n render() {\n return (\n <Host role=\"row\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -15,7 +15,7 @@ const SdLoadingSpinner = /*@__PURE__*/ proxyCustomElement(class SdLoadingSpinner
15
15
  return resolveColor(this.color);
16
16
  }
17
17
  render() {
18
- return (h(Host, { key: 'aa2f775cec2d077ec5c90f56dfe6fc7c07d66ed3' }, h("svg", { key: 'eb95e64d55a79a6937eec9b34cbe3ef538c773a5', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '3ce95d70dcdfe3a2ad83dc5fea1226e8e3948420', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
18
+ return (h(Host, { key: 'a04395d2aaacdb74c06aebff6674ba82cc089a88' }, h("svg", { key: 'e4a28205405702bb37b40aac4a73ae369605791d', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '31e0b13b0ab8dbf824fc6b40b020e7eb290f05f5', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
19
19
  }
20
20
  static get style() { return sdLoadingSpinnerCss(); }
21
21
  }, [768, "sd-loading-spinner", {
@@ -36,6 +36,6 @@ function defineCustomElement() {
36
36
  }
37
37
 
38
38
  export { SdLoadingSpinner as S, defineCustomElement as d };
39
- //# sourceMappingURL=p-nqDJZ_gy.js.map
39
+ //# sourceMappingURL=p-CfivfPAO.js.map
40
40
 
41
- //# sourceMappingURL=p-nqDJZ_gy.js.map
41
+ //# sourceMappingURL=p-CfivfPAO.js.map
@@ -1 +1 @@
1
- {"file":"p-nqDJZ_gy.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,upBAAupB,CAAC;;MCO9qB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;IACpB,KAAK,GAAY,SAAS;AAElC,IAAA,IAAY,aAAa,GAAA;AACxB,QAAA,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGhC,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAEpC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EAAA,mBAAA,EACE,IAAI,EAAA,CACb,CACL,CACA;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-loading-spinner/sd-loading-spinner.scss?tag=sd-loading-spinner","src/components/sd-loading-spinner/sd-loading-spinner.tsx"],"sourcesContent":["sd-loading-spinner {\n display: block;\n\n .sd-loading-spinner {\n animation: sd-loading-spin 2s linear infinite;\n transform-origin: center center;\n .path {\n animation: sd-loading-spin-path 1.5s ease-in-out infinite;\n }\n\n @keyframes sd-loading-spin {\n 0% {\n transform: rotate3d(0, 0, 1, 0deg);\n }\n 25% {\n transform: rotate3d(0, 0, 1, 90deg);\n }\n 50% {\n transform: rotate3d(0, 0, 1, 180deg);\n }\n 75% {\n transform: rotate3d(0, 0, 1, 270deg);\n }\n 100% {\n transform: rotate3d(0, 0, 1, 359deg);\n }\n }\n\n @keyframes sd-loading-spin-path {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n }\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\n@Component({\n tag: 'sd-loading-spinner',\n styleUrl: 'sd-loading-spinner.scss',\n})\nexport class SdLoadingSpinner {\n @Prop() color?: string = '#0075ff';\n\n private get resolvedColor(): string {\n return resolveColor(this.color);\n }\n\n render() {\n return (\n <Host>\n <svg\n class=\"sd-loading-spinner\"\n width=\"72px\"\n height=\"72px\"\n viewBox=\"25 25 50 50\"\n style={{ color: this.resolvedColor }}\n >\n <circle\n class=\"path\"\n cx=\"50\"\n cy=\"50\"\n r=\"20\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"5\"\n stroke-miterlimit=\"10\"\n ></circle>\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-CfivfPAO.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,upBAAupB,CAAC;;MCO9qB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;IACpB,KAAK,GAAY,SAAS;AAElC,IAAA,IAAY,aAAa,GAAA;AACxB,QAAA,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGhC,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAEpC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,MAAM,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EAAA,mBAAA,EACE,IAAI,EAAA,CACb,CACL,CACA;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-loading-spinner/sd-loading-spinner.scss?tag=sd-loading-spinner","src/components/sd-loading-spinner/sd-loading-spinner.tsx"],"sourcesContent":["sd-loading-spinner {\n display: block;\n\n .sd-loading-spinner {\n animation: sd-loading-spin 2s linear infinite;\n transform-origin: center center;\n .path {\n animation: sd-loading-spin-path 1.5s ease-in-out infinite;\n }\n\n @keyframes sd-loading-spin {\n 0% {\n transform: rotate3d(0, 0, 1, 0deg);\n }\n 25% {\n transform: rotate3d(0, 0, 1, 90deg);\n }\n 50% {\n transform: rotate3d(0, 0, 1, 180deg);\n }\n 75% {\n transform: rotate3d(0, 0, 1, 270deg);\n }\n 100% {\n transform: rotate3d(0, 0, 1, 359deg);\n }\n }\n\n @keyframes sd-loading-spin-path {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n }\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\n@Component({\n tag: 'sd-loading-spinner',\n styleUrl: 'sd-loading-spinner.scss',\n})\nexport class SdLoadingSpinner {\n @Prop() color?: string = '#0075ff';\n\n private get resolvedColor(): string {\n return resolveColor(this.color);\n }\n\n render() {\n return (\n <Host>\n <svg\n class=\"sd-loading-spinner\"\n width=\"72px\"\n height=\"72px\"\n viewBox=\"25 25 50 50\"\n style={{ color: this.resolvedColor }}\n >\n <circle\n class=\"path\"\n cx=\"50\"\n cy=\"50\"\n r=\"20\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"5\"\n stroke-miterlimit=\"10\"\n ></circle>\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
@@ -1,11 +1,11 @@
1
1
  import { p as proxyCustomElement, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
2
2
  import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-B3H_uLbl.js';
3
- import { d as defineCustomElement$6 } from './p-CKhzpdPk.js';
4
- import { d as defineCustomElement$5 } from './p-vhe6g4Qt.js';
5
- import { d as defineCustomElement$4 } from './p-CfKJNKMH.js';
6
- import { d as defineCustomElement$3 } from './p-D5BkkT2U.js';
7
- import { d as defineCustomElement$2 } from './p-CWwMpVqI.js';
8
- import { d as defineCustomElement$1 } from './p-QNYqIsvU.js';
3
+ import { d as defineCustomElement$6 } from './p-Bj4u0G5b.js';
4
+ import { d as defineCustomElement$5 } from './p-BHHbLFXg.js';
5
+ import { d as defineCustomElement$4 } from './p-C4kdHNdl.js';
6
+ import { d as defineCustomElement$3 } from './p-B8yBkdjE.js';
7
+ import { d as defineCustomElement$2 } from './p-O3tgQfvT.js';
8
+ import { d as defineCustomElement$1 } from './p-QpwY2yqY.js';
9
9
 
10
10
  const sdSelectCss = () => `.sd-select__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select__dropdown .sd-select__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select{display:inline-flex;width:fit-content;height:fit-content}sd-select *:focus,sd-select *:focus-visible,sd-select *:focus-within{outline:none !important}sd-select .sd-select{display:flex;width:var(--select-width, 200px);height:28px;position:relative;color:#333333;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}sd-select .sd-select:hover:not(.sd-select--disabled){background:#f6f6f6}sd-select .sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select .sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}sd-select .sd-select.sd-select--disabled .sd-select__trigger{color:#888888}sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus,sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus-visible,sd-select .sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}sd-select .sd-select__label{font-size:12px;line-height:20px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6;display:inline-block;white-space:nowrap}sd-select .sd-select__container{position:relative;width:100%;display:flex}sd-select .sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select .sd-select__container .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select .sd-select__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select .sd-select__container .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select .sd-select__container .sd-select__arrow--open{transform:rotate(180deg)}.sd-select__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column}`;
11
11
 
@@ -321,6 +321,6 @@ function defineCustomElement() {
321
321
  }
322
322
 
323
323
  export { SdSelect as S, defineCustomElement as d };
324
- //# sourceMappingURL=p-DMqinLuj.js.map
324
+ //# sourceMappingURL=p-D8KGixEs.js.map
325
325
 
326
- //# sourceMappingURL=p-DMqinLuj.js.map
326
+ //# sourceMappingURL=p-D8KGixEs.js.map
@@ -1 +1 @@
1
- {"file":"p-DMqinLuj.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n outline: none !important;\n }\n\n .sd-select {\n display: flex;\n width: var(--select-width, 200px);\n height: 28px;\n position: relative;\n color: $grey_90;\n cursor: pointer;\n user-select: none;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: white;\n\n &:hover:not(.sd-select--disabled) {\n background: $grey_10;\n }\n\n &.sd-select--disabled {\n cursor: not-allowed;\n background-color: $grey_20;\n border-color: $grey_45;\n\n .sd-select__label {\n border-right: 1px solid $grey_45;\n }\n\n .sd-select__trigger {\n color: $grey_65;\n &:focus,\n &:focus-visible,\n &:focus-within {\n outline: none !important;\n }\n }\n }\n\n &__label {\n font-size: 12px;\n line-height: 20px;\n font-weight: 500;\n color: $grey_90;\n padding: 4px 12px;\n border-right: 1px solid $grey_45;\n border-radius: 4px 0 0 4px;\n background-color: $grey_10;\n display: inline-block;\n white-space: nowrap;\n }\n\n &__container {\n position: relative;\n width: 100%;\n display: flex;\n\n .sd-select__trigger {\n padding: 4px 20px 4px 12px;\n display: flex;\n width: 100%;\n align-items: center;\n\n .sd-select__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n font-size: 12px;\n font-weight: 400;\n text-align: left;\n }\n\n .sd-select__clear {\n margin: 0 4px;\n width: 8px;\n height: 8px;\n background-color: transparent;\n outline: none;\n border: none;\n }\n }\n\n .sd-select__arrow {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n color: $grey_65;\n transition: transform 0.3s ease;\n\n &--open {\n transform: rotate(180deg);\n }\n }\n }\n }\n}\n\n.sd-select__dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n\n .sd-select__option-placeholder {\n @extend %selectOptionPlaceholder;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdChange: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdChange: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop() label: string = '';\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() filteredOptions = this.options;\n @State() isOpen: boolean = false;\n @State() searchText: string | null = null;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n private dropdownRef?: HTMLElement;\n\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n @Watch('value')\n valueChanged() {\n const selectedOption = this.getSelectedOption();\n this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('options')\n optionsChanged() {\n this.filteredOptions = this.options;\n this.filterOptions();\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus({ preventScroll: true });\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem || !this.isOpen) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.isDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\n this.filteredOptions = this.options;\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n\n const selectedOption = this.getSelectedOption();\n if (!selectedOption) {\n this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;\n } else {\n this.itemIndex = this.options.indexOf(selectedOption);\n }\n\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) return;\n\n await new Promise(resolve => setTimeout(resolve, 10));\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n\n const currentItem = optionElements?.[this.itemIndex];\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n searchInput?.focus({ preventScroll: true });\n }\n\n if (!currentItem) return;\n\n await new Promise(resolve => setTimeout(resolve, 10));\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.searchText = null;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\n closeDropdown() {\n this.isOpen = false;\n }\n\n // event handlers\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n }\n };\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.getNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement) {\n if (!this.dropdownRef || !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTop = optionTop - searchOffset;\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\n }\n }\n\n // render method\n render() {\n const style = {\n '--select-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n\n return (\n <Host style={style}>\n <div\n class={{\n 'sd-select': true,\n 'sd-select--open': this.isOpen,\n 'sd-select--disabled': this.disabled,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderLabel(this.label)}\n <div class=\"sd-select__container\">\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </div>\n </Host>\n );\n }\n\n private renderLabel(label?: string) {\n if (!label) return null;\n\n return <label class=\"sd-select__label\">{label}</label>;\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={event => {\n event.stopPropagation();\n this.value = null;\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n const style = {\n '--select-dropdown-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n if (this.isOpen === false) return null;\n\n return (\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\n <div\n class=\"sd-select__dropdown\"\n style={style}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <sd-select-search-input\n ref={el => (this.searchRef = el)}\n isScrolled={this.isScrolled}\n searchText={this.searchText}\n onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n onSdSearchFocus={() => (this.itemIndex = -1)}\n ></sd-select-search-input>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={option.value === this.value}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </sd-portal>\n );\n }\n}\n\n{\n /*\n <sd-select id=\"select-1\">\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\n </sd-select>\n <sd-select id=\"select-2\"> </sd-select>\n <sd-select id=\"select-3\" searchable clearable>\n <div slot=\"option-3\">test</div>\n </sd-select>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const select1 = document.getElementById('select-1');\n const select2 = document.getElementById('select-2');\n const select3 = document.getElementById('select-3');\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\n select1.optionPlaceholder = 'No options available';\n\n const options = [\n { label: 'Option 1', value: '1' },\n { label: 'Option 2', value: '2' },\n { label: 'Option 3', value: '3', disabled: true },\n { label: 'Option 4', value: '4' },\n { label: 'Option 5', value: '5' },\n { label: 'Option 6', value: '6' },\n { label: 'Option 7', value: '7', disabled: true },\n { label: 'Option 8', value: '8' },\n { label: 'Option 9', value: '9' },\n { label: 'Option 10', value: '10' },\n { label: 'Option 11', value: '11', disabled: true },\n { label: 'Option 12', value: '12' },\n { label: 'Option 13', value: '13' },\n { label: 'Option 14', value: '14' },\n { label: 'Option 15', value: '15', disabled: true },\n { label: 'Option 16', value: '16' },\n { label: 'Option 17', value: '17' },\n { label: 'Option 18', value: '18' },\n { label: 'Option 19', value: '19', disabled: true },\n { label: 'Option 20', value: '20' },\n { label: 'Option 21', value: '21' },\n { label: 'Option 22', value: '22' },\n { label: 'Option 23', value: '23', disabled: true },\n { label: 'Option 24', value: '24' },\n ];\n\n select2.options = options;\n select3.options = options;\n });\n </script>\n\n */\n}\n"],"version":3}
1
+ {"file":"p-D8KGixEs.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n\n *:focus,\n *:focus-visible,\n *:focus-within {\n outline: none !important;\n }\n\n .sd-select {\n display: flex;\n width: var(--select-width, 200px);\n height: 28px;\n position: relative;\n color: $grey_90;\n cursor: pointer;\n user-select: none;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: white;\n\n &:hover:not(.sd-select--disabled) {\n background: $grey_10;\n }\n\n &.sd-select--disabled {\n cursor: not-allowed;\n background-color: $grey_20;\n border-color: $grey_45;\n\n .sd-select__label {\n border-right: 1px solid $grey_45;\n }\n\n .sd-select__trigger {\n color: $grey_65;\n &:focus,\n &:focus-visible,\n &:focus-within {\n outline: none !important;\n }\n }\n }\n\n &__label {\n font-size: 12px;\n line-height: 20px;\n font-weight: 500;\n color: $grey_90;\n padding: 4px 12px;\n border-right: 1px solid $grey_45;\n border-radius: 4px 0 0 4px;\n background-color: $grey_10;\n display: inline-block;\n white-space: nowrap;\n }\n\n &__container {\n position: relative;\n width: 100%;\n display: flex;\n\n .sd-select__trigger {\n padding: 4px 20px 4px 12px;\n display: flex;\n width: 100%;\n align-items: center;\n\n .sd-select__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n font-size: 12px;\n font-weight: 400;\n text-align: left;\n }\n\n .sd-select__clear {\n margin: 0 4px;\n width: 8px;\n height: 8px;\n background-color: transparent;\n outline: none;\n border: none;\n }\n }\n\n .sd-select__arrow {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n color: $grey_65;\n transition: transform 0.3s ease;\n\n &--open {\n transform: rotate(180deg);\n }\n }\n }\n }\n}\n\n.sd-select__dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n\n .sd-select__option-placeholder {\n @extend %selectOptionPlaceholder;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\n Method,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdChange: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdChange: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop() label: string = '';\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() filteredOptions = this.options;\n @State() isOpen: boolean = false;\n @State() searchText: string | null = null;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n private dropdownRef?: HTMLElement;\n\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n @Watch('value')\n valueChanged() {\n const selectedOption = this.getSelectedOption();\n this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('options')\n optionsChanged() {\n this.filteredOptions = this.options;\n this.filterOptions();\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus({ preventScroll: true });\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem || !this.isOpen) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.isDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\n this.filteredOptions = this.options;\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n\n const selectedOption = this.getSelectedOption();\n if (!selectedOption) {\n this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;\n } else {\n this.itemIndex = this.options.indexOf(selectedOption);\n }\n\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) return;\n\n await new Promise(resolve => setTimeout(resolve, 10));\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n\n const currentItem = optionElements?.[this.itemIndex];\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n searchInput?.focus({ preventScroll: true });\n }\n\n if (!currentItem) return;\n\n await new Promise(resolve => setTimeout(resolve, 10));\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.searchText = null;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\n closeDropdown() {\n this.isOpen = false;\n }\n\n // event handlers\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n }\n };\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.getNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement) {\n if (!this.dropdownRef || !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTop = optionTop - searchOffset;\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\n }\n }\n\n // render method\n render() {\n const style = {\n '--select-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n\n return (\n <Host style={style}>\n <div\n class={{\n 'sd-select': true,\n 'sd-select--open': this.isOpen,\n 'sd-select--disabled': this.disabled,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderLabel(this.label)}\n <div class=\"sd-select__container\">\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </div>\n </Host>\n );\n }\n\n private renderLabel(label?: string) {\n if (!label) return null;\n\n return <label class=\"sd-select__label\">{label}</label>;\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={event => {\n event.stopPropagation();\n this.value = null;\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n const style = {\n '--select-dropdown-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n if (this.isOpen === false) return null;\n\n return (\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\n <div\n class=\"sd-select__dropdown\"\n style={style}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <sd-select-search-input\n ref={el => (this.searchRef = el)}\n isScrolled={this.isScrolled}\n searchText={this.searchText}\n onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n onSdSearchFocus={() => (this.itemIndex = -1)}\n ></sd-select-search-input>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={option.value === this.value}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </sd-portal>\n );\n }\n}\n\n{\n /*\n <sd-select id=\"select-1\">\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\n </sd-select>\n <sd-select id=\"select-2\"> </sd-select>\n <sd-select id=\"select-3\" searchable clearable>\n <div slot=\"option-3\">test</div>\n </sd-select>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const select1 = document.getElementById('select-1');\n const select2 = document.getElementById('select-2');\n const select3 = document.getElementById('select-3');\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\n select1.optionPlaceholder = 'No options available';\n\n const options = [\n { label: 'Option 1', value: '1' },\n { label: 'Option 2', value: '2' },\n { label: 'Option 3', value: '3', disabled: true },\n { label: 'Option 4', value: '4' },\n { label: 'Option 5', value: '5' },\n { label: 'Option 6', value: '6' },\n { label: 'Option 7', value: '7', disabled: true },\n { label: 'Option 8', value: '8' },\n { label: 'Option 9', value: '9' },\n { label: 'Option 10', value: '10' },\n { label: 'Option 11', value: '11', disabled: true },\n { label: 'Option 12', value: '12' },\n { label: 'Option 13', value: '13' },\n { label: 'Option 14', value: '14' },\n { label: 'Option 15', value: '15', disabled: true },\n { label: 'Option 16', value: '16' },\n { label: 'Option 17', value: '17' },\n { label: 'Option 18', value: '18' },\n { label: 'Option 19', value: '19', disabled: true },\n { label: 'Option 20', value: '20' },\n { label: 'Option 21', value: '21' },\n { label: 'Option 22', value: '22' },\n { label: 'Option 23', value: '23', disabled: true },\n { label: 'Option 24', value: '24' },\n ];\n\n select2.options = options;\n select3.options = options;\n });\n </script>\n\n */\n}\n"],"version":3}