@sellmate/design-system 0.0.34 → 0.0.35

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 (193) 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-badge.cjs.entry.js +1 -1
  4. package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.cjs.js.map +1 -0
  5. package/dist/cjs/{sd-button_13.cjs.entry.js → sd-button_15.cjs.entry.js} +81 -78
  6. package/dist/cjs/sd-card.cjs.entry.js +1 -1
  7. package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
  8. package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
  9. package/dist/cjs/sd-loading-spinner.cjs.entry.js +18 -0
  10. package/dist/cjs/sd-loading-spinner.entry.cjs.js.map +1 -0
  11. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  12. package/dist/cjs/sd-progress.cjs.entry.js +2 -2
  13. package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
  14. package/dist/cjs/sd-select-option-group.cjs.entry.js +3 -3
  15. package/dist/cjs/sd-table-backup.cjs.entry.js +265 -0
  16. package/dist/cjs/sd-table-backup.entry.cjs.js.map +1 -0
  17. package/dist/cjs/sd-tag.cjs.entry.js +1 -1
  18. package/dist/cjs/sd-td.cjs.entry.js +26 -0
  19. package/dist/cjs/sd-td.entry.cjs.js.map +1 -0
  20. package/dist/collection/collection-manifest.json +5 -0
  21. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  22. package/dist/collection/components/sd-card/sd-card.js +1 -1
  23. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  24. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
  25. package/dist/collection/components/sd-guide/sd-guide.js +3 -3
  26. package/dist/collection/components/sd-icon/sd-icon.js +1 -1
  27. package/dist/collection/components/sd-input/sd-input.js +2 -2
  28. package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
  29. package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
  30. package/dist/collection/components/sd-popover/sd-popover.js +2 -2
  31. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  32. package/dist/collection/components/sd-progress/sd-progress.js +2 -2
  33. package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
  34. package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
  35. package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
  36. package/dist/collection/components/sd-table/sd-table-backup.js +2743 -0
  37. package/dist/collection/components/sd-table/sd-table-backup.js.map +1 -0
  38. package/dist/collection/components/sd-table/sd-table.css +17 -15
  39. package/dist/collection/components/sd-table/sd-table.js +24 -2087
  40. package/dist/collection/components/sd-table/sd-table.js.map +1 -1
  41. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.css +3 -0
  42. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +18 -0
  43. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js.map +1 -0
  44. package/dist/collection/components/sd-table/sd-td/sd-td.css +9 -0
  45. package/dist/collection/components/sd-table/sd-td/sd-td.js +111 -0
  46. package/dist/collection/components/sd-table/sd-td/sd-td.js.map +1 -0
  47. package/dist/collection/components/sd-table/sd-th/sd-th.css +8 -0
  48. package/dist/collection/components/sd-table/sd-th/sd-th.js +18 -0
  49. package/dist/collection/components/sd-table/sd-th/sd-th.js.map +1 -0
  50. package/dist/collection/components/sd-table/sd-tr/sd-tr.css +3 -0
  51. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +18 -0
  52. package/dist/collection/components/sd-table/sd-tr/sd-tr.js.map +1 -0
  53. package/dist/collection/components/sd-tag/sd-tag.js +1 -1
  54. package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -5
  55. package/dist/collection/components/sd-tooltip/sd-tooltip.js.map +1 -1
  56. package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
  57. package/dist/components/{p-Bry2vtXF.js → p-5yzkkdZ2.js} +3 -3
  58. package/dist/components/{p-Bry2vtXF.js.map → p-5yzkkdZ2.js.map} +1 -1
  59. package/dist/components/{p-B5jkeFCb.js → p-B8lMIjWB.js} +7 -7
  60. package/dist/components/{p-B5jkeFCb.js.map → p-B8lMIjWB.js.map} +1 -1
  61. package/dist/components/{p-BoIp700J.js → p-BEDQ2CIp.js} +5 -5
  62. package/dist/components/{p-BoIp700J.js.map → p-BEDQ2CIp.js.map} +1 -1
  63. package/dist/components/{p-DXyjyA0e.js → p-BEq3cGoC.js} +3 -3
  64. package/dist/components/{p-DXyjyA0e.js.map → p-BEq3cGoC.js.map} +1 -1
  65. package/dist/components/{p-BLVHOrsi.js → p-BG0UE2wL.js} +3 -3
  66. package/dist/components/{p-BLVHOrsi.js.map → p-BG0UE2wL.js.map} +1 -1
  67. package/dist/components/p-BeBw4eSm.js +34 -0
  68. package/dist/components/p-BeBw4eSm.js.map +1 -0
  69. package/dist/components/{p-DKW5kNQD.js → p-BzdIpn5T.js} +11 -11
  70. package/dist/components/p-BzdIpn5T.js.map +1 -0
  71. package/dist/components/{p-cZZiWgpx.js → p-CSnKPDQz.js} +5 -5
  72. package/dist/components/{p-cZZiWgpx.js.map → p-CSnKPDQz.js.map} +1 -1
  73. package/dist/components/{p-CHw7bav7.js → p-CqpahWAy.js} +3 -3
  74. package/dist/components/{p-CHw7bav7.js.map → p-CqpahWAy.js.map} +1 -1
  75. package/dist/components/p-CrmdI2cD.js +34 -0
  76. package/dist/components/p-CrmdI2cD.js.map +1 -0
  77. package/dist/components/p-D-s8kK6P.js +34 -0
  78. package/dist/components/p-D-s8kK6P.js.map +1 -0
  79. package/dist/components/{p-DR6QXFmO.js → p-Du8-vyL0.js} +3 -3
  80. package/dist/components/{p-DR6QXFmO.js.map → p-Du8-vyL0.js.map} +1 -1
  81. package/dist/components/{p-CsP5aJ3N.js → p-GNK9vrin.js} +3 -3
  82. package/dist/components/{p-CsP5aJ3N.js.map → p-GNK9vrin.js.map} +1 -1
  83. package/dist/components/{p-D60I2CpC.js → p-ntW8MKYi.js} +5 -5
  84. package/dist/components/{p-D60I2CpC.js.map → p-ntW8MKYi.js.map} +1 -1
  85. package/dist/components/{p-CVmIv1LY.js → p-ybbnPl4X.js} +7 -7
  86. package/dist/components/{p-CVmIv1LY.js.map → p-ybbnPl4X.js.map} +1 -1
  87. package/dist/components/sd-badge.js +1 -1
  88. package/dist/components/sd-button.js +1 -1
  89. package/dist/components/sd-card.js +1 -1
  90. package/dist/components/sd-checkbox.js +1 -1
  91. package/dist/components/sd-date-picker.js +5 -5
  92. package/dist/components/sd-date-range-picker.js +5 -5
  93. package/dist/components/sd-guide.js +6 -6
  94. package/dist/components/sd-icon.js +1 -1
  95. package/dist/components/sd-input.js +1 -1
  96. package/dist/components/sd-loading-spinner.js +1 -1
  97. package/dist/components/sd-pagination.js +1 -1
  98. package/dist/components/sd-popover.js +5 -5
  99. package/dist/components/sd-portal.js +1 -1
  100. package/dist/components/sd-progress.js +2 -2
  101. package/dist/components/sd-select-multiple-group.js +5 -5
  102. package/dist/components/sd-select-multiple.js +7 -7
  103. package/dist/components/sd-select-option-group.js +1 -1
  104. package/dist/components/sd-select-option.js +1 -1
  105. package/dist/components/sd-select.js +1 -1
  106. package/dist/components/sd-table-backup.d.ts +11 -0
  107. package/dist/components/sd-table-backup.js +379 -0
  108. package/dist/components/sd-table-backup.js.map +1 -0
  109. package/dist/components/sd-table.js +59 -70
  110. package/dist/components/sd-table.js.map +1 -1
  111. package/dist/components/sd-tag.js +1 -1
  112. package/dist/components/sd-tbody.d.ts +11 -0
  113. package/dist/components/sd-tbody.js +9 -0
  114. package/dist/components/sd-tbody.js.map +1 -0
  115. package/dist/components/sd-td.d.ts +11 -0
  116. package/dist/components/sd-td.js +50 -0
  117. package/dist/components/sd-td.js.map +1 -0
  118. package/dist/components/sd-th.d.ts +11 -0
  119. package/dist/components/sd-th.js +9 -0
  120. package/dist/components/sd-th.js.map +1 -0
  121. package/dist/components/sd-tooltip-portal.js +1 -1
  122. package/dist/components/sd-tooltip.js +1 -1
  123. package/dist/components/sd-tr.d.ts +11 -0
  124. package/dist/components/sd-tr.js +9 -0
  125. package/dist/components/sd-tr.js.map +1 -0
  126. package/dist/design-system/design-system.esm.js +1 -1
  127. package/dist/design-system/{p-ac7dbf3c.entry.js → p-01f44c51.entry.js} +2 -2
  128. package/dist/design-system/p-49f98f09.entry.js +2 -0
  129. package/dist/design-system/p-671a08a6.entry.js +2 -0
  130. package/dist/design-system/p-671a08a6.entry.js.map +1 -0
  131. package/dist/design-system/p-6a624672.entry.js +2 -0
  132. package/dist/design-system/{p-e9800353.entry.js → p-78f90517.entry.js} +2 -2
  133. package/dist/design-system/{p-048f83bb.entry.js → p-7e18d4cf.entry.js} +2 -2
  134. package/dist/design-system/p-7e18d4cf.entry.js.map +1 -0
  135. package/dist/design-system/{p-6d769a19.entry.js → p-88745dfe.entry.js} +2 -2
  136. package/dist/design-system/{p-eeed34eb.entry.js → p-8b60af66.entry.js} +2 -2
  137. package/dist/design-system/p-985be35d.entry.js +2 -0
  138. package/dist/design-system/{p-d492a315.entry.js.map → p-985be35d.entry.js.map} +1 -1
  139. package/dist/design-system/{p-cdc6b2c8.entry.js → p-a72c4b0c.entry.js} +2 -2
  140. package/dist/design-system/{p-56b88d9b.entry.js → p-d003ee3d.entry.js} +2 -2
  141. package/dist/design-system/p-d74bfbe4.entry.js +2 -0
  142. package/dist/design-system/p-d74bfbe4.entry.js.map +1 -0
  143. package/dist/design-system/p-ef5ffaa2.entry.js +2 -0
  144. package/dist/design-system/p-ef5ffaa2.entry.js.map +1 -0
  145. package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.esm.js.map +1 -0
  146. package/dist/design-system/sd-loading-spinner.entry.esm.js.map +1 -0
  147. package/dist/design-system/sd-table-backup.entry.esm.js.map +1 -0
  148. package/dist/design-system/sd-td.entry.esm.js.map +1 -0
  149. package/dist/esm/design-system.js +1 -1
  150. package/dist/esm/loader.js +1 -1
  151. package/dist/esm/sd-badge.entry.js +1 -1
  152. package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tbody.sd-th.sd-tooltip.sd-tooltip-portal.sd-tr.entry.js.map +1 -0
  153. package/dist/esm/{sd-button_13.entry.js → sd-button_15.entry.js} +79 -78
  154. package/dist/esm/sd-card.entry.js +1 -1
  155. package/dist/esm/sd-date-picker.entry.js +2 -2
  156. package/dist/esm/sd-date-range-picker.entry.js +2 -2
  157. package/dist/esm/sd-loading-spinner.entry.js +16 -0
  158. package/dist/esm/sd-loading-spinner.entry.js.map +1 -0
  159. package/dist/esm/sd-popover.entry.js +2 -2
  160. package/dist/esm/sd-progress.entry.js +2 -2
  161. package/dist/esm/sd-select-multiple.entry.js +2 -2
  162. package/dist/esm/sd-select-option-group.entry.js +3 -3
  163. package/dist/esm/sd-table-backup.entry.js +263 -0
  164. package/dist/esm/sd-table-backup.entry.js.map +1 -0
  165. package/dist/esm/sd-tag.entry.js +1 -1
  166. package/dist/esm/sd-td.entry.js +24 -0
  167. package/dist/esm/sd-td.entry.js.map +1 -0
  168. package/dist/types/components/sd-table/sd-table-backup.d.ts +80 -0
  169. package/dist/types/components/sd-table/sd-table.d.ts +0 -4
  170. package/dist/types/components/sd-table/sd-tbody/sd-tbody.d.ts +3 -0
  171. package/dist/types/components/sd-table/sd-td/sd-td.d.ts +7 -0
  172. package/dist/types/components/sd-table/sd-th/sd-th.d.ts +3 -0
  173. package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +3 -0
  174. package/dist/types/components.d.ts +221 -0
  175. package/hydrate/index.js +405 -39
  176. package/hydrate/index.mjs +405 -39
  177. package/package.json +2 -2
  178. package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +0 -1
  179. package/dist/components/p-DKW5kNQD.js.map +0 -1
  180. package/dist/design-system/p-048f83bb.entry.js.map +0 -1
  181. package/dist/design-system/p-c1e64ba9.entry.js +0 -2
  182. package/dist/design-system/p-ce01c171.entry.js +0 -2
  183. package/dist/design-system/p-d492a315.entry.js +0 -2
  184. package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +0 -1
  185. package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.js.map +0 -1
  186. /package/dist/design-system/{p-ac7dbf3c.entry.js.map → p-01f44c51.entry.js.map} +0 -0
  187. /package/dist/design-system/{p-ce01c171.entry.js.map → p-49f98f09.entry.js.map} +0 -0
  188. /package/dist/design-system/{p-c1e64ba9.entry.js.map → p-6a624672.entry.js.map} +0 -0
  189. /package/dist/design-system/{p-e9800353.entry.js.map → p-78f90517.entry.js.map} +0 -0
  190. /package/dist/design-system/{p-6d769a19.entry.js.map → p-88745dfe.entry.js.map} +0 -0
  191. /package/dist/design-system/{p-eeed34eb.entry.js.map → p-8b60af66.entry.js.map} +0 -0
  192. /package/dist/design-system/{p-cdc6b2c8.entry.js.map → p-a72c4b0c.entry.js.map} +0 -0
  193. /package/dist/design-system/{p-56b88d9b.entry.js.map → p-d003ee3d.entry.js.map} +0 -0
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
2
- import { d as defineCustomElement$1 } from './p-CsP5aJ3N.js';
2
+ import { d as defineCustomElement$1 } from './p-GNK9vrin.js';
3
3
 
4
4
  const sdInputCss = "sd-icon{line-height:0}sd-icon .sd-icon{line-height:0;vertical-align:middle}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-input{display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white}.sd-input--hovered,.sd-input--focused{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--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-input.sd-input--disabled .sd-input__native_element{color:#888888 !important}.sd-input .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__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-input .sd-input__clear-icon{cursor:pointer;margin-left:8px}";
5
5
 
@@ -104,11 +104,11 @@ const SdInput = /*@__PURE__*/ proxyCustomElement(class SdInput extends H {
104
104
  '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
105
105
  }
106
106
  : {};
107
- return (h(Host, { key: '928cdcf68de21bc5b6aeff4ee21b8731f4317467', style: inputWidth }, this.label && h("div", { key: 'a0c76f4ed0ee3336d14d353fc780b13e42dabfb6', class: "sd-input__label" }, this.label), h("label", { key: 'f143460e809a25a33d15e4493191b12fc3895e58', class: {
107
+ return (h(Host, { key: 'b32d1ffee0333ce2bf7cfc4ea6157bd05e8072c8', style: inputWidth }, this.label && h("div", { key: '886bf269148fdf6539e47840ae769ea21a0c2b32', class: "sd-input__label" }, this.label), h("label", { key: '9879bcdf3f2d70e15470154210f222398fedcb24', class: {
108
108
  'sd-input': true,
109
109
  [this.getInputStatus()]: true,
110
110
  'sd-input--barcode': !!this.barcode,
111
- }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '6f878f76b0ecabd9d50c3403e341fea0451801b5', name: "prefix" }), h("input", { key: 'f7dd11db863b5bf96566448d9cc4f1b6a2f3520b', 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: 'b71e5de26f10b8b97b0afcd413e05785567d580c', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'dfdf3c53c0920cc5170baa50c374c4a40fbd0208', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
111
+ }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: '7af6869c5e833133e596a36b6431756e72778eda', name: "prefix" }), h("input", { key: '7e512876904fc73c7dcf7ff67f0d3cca4c9bff6c', 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: '98cf2e1011b873fe0aaa352351a1fe669a6ab095', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '3cf6dbe1ab1bad476a636a634ebed6120902216b', name: "close", color: "#888", class: "sd-input__clear-icon", onClick: () => {
112
112
  this.internalValue = '';
113
113
  this.sdChange?.emit(this.internalValue);
114
114
  this.sdInput?.emit(this.internalValue);
@@ -162,6 +162,6 @@ function defineCustomElement() {
162
162
  }
163
163
 
164
164
  export { SdInput as S, defineCustomElement as d };
165
- //# sourceMappingURL=p-D60I2CpC.js.map
165
+ //# sourceMappingURL=p-ntW8MKYi.js.map
166
166
 
167
- //# sourceMappingURL=p-D60I2CpC.js.map
167
+ //# sourceMappingURL=p-ntW8MKYi.js.map
@@ -1 +1 @@
1
- {"file":"p-D60I2CpC.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\n.sd-input {\n display: flex;\n width: var(--input-width, 100%);\n align-items: center;\n height: 28px;\n padding: 4px 8px;\n border: 1px solid $grey_55;\n border-radius: 4px;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n background: white;\n\n &--hovered,\n &--focused {\n border-color: $brilliantblue_75;\n box-shadow: 0 0 4px 0 #0071ff66;\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--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 }\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","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() 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 {this.label && <div class=\"sd-input__label\">{this.label}</div>}\n <label\n class={{\n 'sd-input': true,\n [this.getInputStatus()]: true,\n 'sd-input--barcode': !!this.barcode,\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 </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"p-ntW8MKYi.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\n.sd-input {\n display: flex;\n width: var(--input-width, 100%);\n align-items: center;\n height: 28px;\n padding: 4px 8px;\n border: 1px solid $grey_55;\n border-radius: 4px;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n background: white;\n\n &--hovered,\n &--focused {\n border-color: $brilliantblue_75;\n box-shadow: 0 0 4px 0 #0071ff66;\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--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 }\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","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() 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 {this.label && <div class=\"sd-input__label\">{this.label}</div>}\n <label\n class={{\n 'sd-input': true,\n [this.getInputStatus()]: true,\n 'sd-input--barcode': !!this.barcode,\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 </Host>\n );\n }\n}\n"],"version":3}
@@ -1,10 +1,10 @@
1
1
  import { p as proxyCustomElement, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
2
2
  import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-BvuTaRpn.js';
3
- import { d as defineCustomElement$5 } from './p-DR6QXFmO.js';
4
- import { d as defineCustomElement$4 } from './p-CsP5aJ3N.js';
5
- import { d as defineCustomElement$3 } from './p-D60I2CpC.js';
6
- import { d as defineCustomElement$2 } from './p-DXyjyA0e.js';
7
- import { d as defineCustomElement$1 } from './p-BoIp700J.js';
3
+ import { d as defineCustomElement$5 } from './p-Du8-vyL0.js';
4
+ import { d as defineCustomElement$4 } from './p-GNK9vrin.js';
5
+ import { d as defineCustomElement$3 } from './p-ntW8MKYi.js';
6
+ import { d as defineCustomElement$2 } from './p-BEq3cGoC.js';
7
+ import { d as defineCustomElement$1 } from './p-BEDQ2CIp.js';
8
8
 
9
9
  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{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:hover:not(.sd-select--disabled){background:#f6f6f6}.sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}.sd-select.sd-select--disabled .sd-select__trigger{color:#888888}.sd-select.sd-select--disabled .sd-select__trigger:focus,.sd-select.sd-select--disabled .sd-select__trigger:focus-visible,.sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}.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__container{position:relative;width:100%;display:flex}.sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.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__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.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__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}.sd-select__dropdown .sd-select__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select__dropdown .sd-select__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select__dropdown .sd-select__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
10
10
 
@@ -318,6 +318,6 @@ function defineCustomElement() {
318
318
  }
319
319
 
320
320
  export { SdSelect as S, defineCustomElement as d };
321
- //# sourceMappingURL=p-CVmIv1LY.js.map
321
+ //# sourceMappingURL=p-ybbnPl4X.js.map
322
322
 
323
- //# sourceMappingURL=p-CVmIv1LY.js.map
323
+ //# sourceMappingURL=p-ybbnPl4X.js.map
@@ -1 +1 @@
1
- {"file":"p-CVmIv1LY.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\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.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__search-container {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n padding: 4px 8px;\n\n &--scrolled {\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n }\n }\n\n .sd-select__option-placeholder {\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n text-align: left;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\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?: HTMLSdInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n private dropdownRef?: HTMLElement;\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();\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();\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 <div\n class={{\n 'sd-select__search-container': true,\n 'sd-select__search-container--scrolled': this.isScrolled,\n }}\n onClick={event => event.stopPropagation()}\n >\n <sd-input\n ref={el => (this.searchRef = el)}\n value={this.searchText}\n placeholder=\"검색\"\n clearable\n inputStyle={{ 'padding-left': '8px' }}\n autofocus\n onSdInput={event => {\n this.searchText = String(event?.detail);\n }}\n onSdFocus={() => {\n this.itemIndex = -1;\n }}\n >\n <sd-icon\n name=\"search\"\n size={16}\n color=\"#737373\"\n style={{ marginRight: '4px' }}\n slot=\"prefix\"\n ></sd-icon>\n </sd-input>\n </div>\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-ybbnPl4X.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\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.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__search-container {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n padding: 4px 8px;\n\n &--scrolled {\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n }\n }\n\n .sd-select__option-placeholder {\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n text-align: left;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\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?: HTMLSdInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n private dropdownRef?: HTMLElement;\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();\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();\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 <div\n class={{\n 'sd-select__search-container': true,\n 'sd-select__search-container--scrolled': this.isScrolled,\n }}\n onClick={event => event.stopPropagation()}\n >\n <sd-input\n ref={el => (this.searchRef = el)}\n value={this.searchText}\n placeholder=\"검색\"\n clearable\n inputStyle={{ 'padding-left': '8px' }}\n autofocus\n onSdInput={event => {\n this.searchText = String(event?.detail);\n }}\n onSdFocus={() => {\n this.itemIndex = -1;\n }}\n >\n <sd-icon\n name=\"search\"\n size={16}\n color=\"#737373\"\n style={{ marginRight: '4px' }}\n slot=\"prefix\"\n ></sd-icon>\n </sd-input>\n </div>\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}
@@ -15,7 +15,7 @@ const SdBadge$1 = /*@__PURE__*/ proxyCustomElement(class SdBadge extends H {
15
15
  label = '';
16
16
  render() {
17
17
  const resolvedColor = resolveColor(this.color);
18
- return (h(Host, { key: 'e26d8310fa5e47198264e705cc029cc892e2bce3' }, h("div", { key: '34eaabd258c14f733a9e08be6155d046ab9c1cac', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '4a25963faec09d758f3c552823171f8eca90f6fe', class: "sd-badge__dot" }), h("div", { key: '3318cba370380bd36bd2cc140bf09152b7aa69dd', class: "sd-badge__label" }, this.label))));
18
+ return (h(Host, { key: '0eb736c6520c69a3b46d7ace56cd49d33afeec81' }, h("div", { key: 'f321c100d3703be8ea3c60448233bc81c8f5c117', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'f7970257ffcf0ad5bd90f7e5d0dbbfb18a35e535', class: "sd-badge__dot" }), h("div", { key: '117d13f51ff77d9d240c297bfd9a3251ad220d92', class: "sd-badge__label" }, this.label))));
19
19
  }
20
20
  static get style() { return sdBadgeCss; }
21
21
  }, [770, "sd-badge", {
@@ -1,4 +1,4 @@
1
- import { S as SdButton$1, d as defineCustomElement$1 } from './p-CHw7bav7.js';
1
+ import { S as SdButton$1, d as defineCustomElement$1 } from './p-CqpahWAy.js';
2
2
 
3
3
  const SdButton = SdButton$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -12,7 +12,7 @@ const SdCard$1 = /*@__PURE__*/ proxyCustomElement(class SdCard extends H {
12
12
  bordered = true;
13
13
  class = '';
14
14
  render() {
15
- return (h(Host, { key: '227f52f79c1a9705be09a5d19e3ac1f5fe60f926' }, h("div", { key: 'f56d202ec8c58e5770530f4a7f216b174d99ca02', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: '0d2300a9f36cbc5d8e2292e2904be92da04f55e4' }))));
15
+ return (h(Host, { key: '42ba538ab9341ea02415932b7d9332571bbb13e7' }, h("div", { key: 'b1f7b23f18b070adb2f42eea1ccdf4bc2a5ab092', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.class}` }, h("slot", { key: 'bcb88ca0c2916e6dce00f7b503e32f522245dc4c' }))));
16
16
  }
17
17
  static get style() { return sdCardCss; }
18
18
  }, [772, "sd-card", {
@@ -1,4 +1,4 @@
1
- import { S as SdCheckbox$1, d as defineCustomElement$1 } from './p-DR6QXFmO.js';
1
+ import { S as SdCheckbox$1, d as defineCustomElement$1 } from './p-Du8-vyL0.js';
2
2
 
3
3
  const SdCheckbox = SdCheckbox$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,9 +1,9 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
2
2
  import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
3
3
  import { d as defineCustomElement$5 } from './p-CVg_jkEo.js';
4
- import { d as defineCustomElement$4 } from './p-CsP5aJ3N.js';
5
- import { d as defineCustomElement$3 } from './p-D60I2CpC.js';
6
- import { d as defineCustomElement$2 } from './p-DXyjyA0e.js';
4
+ import { d as defineCustomElement$4 } from './p-GNK9vrin.js';
5
+ import { d as defineCustomElement$3 } from './p-ntW8MKYi.js';
6
+ import { d as defineCustomElement$2 } from './p-BEq3cGoC.js';
7
7
 
8
8
  const sdDatePickerCss = ".sd-date-picker.sc-sd-date-picker-h{width:160px;display:inline-block}.sd-date-picker__menu.sc-sd-date-picker{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.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{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.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}";
9
9
 
@@ -87,9 +87,9 @@ const SdDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDatePicker exten
87
87
  this.isOpen = false;
88
88
  };
89
89
  render() {
90
- return (h(Host, { key: 'ca46b34c79f12400737d8ffd99edabe637c652cc', class: "sd-date-picker" }, h("sd-input", { key: '87789f6a18f0b11f93a3fd01fdc71362fb7d88ba', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
90
+ return (h(Host, { key: '9f910fccd26ab417911edb655d63608045d5c41e', class: "sd-date-picker" }, h("sd-input", { key: '45a1a6ad305af7d47fe599baa4d037776db96150', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
91
91
  margin: '0 0 0 8px',
92
- }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'fbf2e5031f512f8c314f5ea077820ab84631199f', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'a4b2d3a143de94f896769bd4f22e4b1976f06847', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'abf0fe09873b8e8b4f335cc3aa223e6a1995f63b', class: "sd-date-picker__menu" }, h("div", { key: '4ab6d07971a765ed2e00b4e0e8c1764476044d7b', class: "sd-date-picker__header" }, h("div", { key: '27cf7310f6857c1134cadc014074e94ebeba49d8', class: "year-nav" }, h("button", { key: '25db54222284614c483895801390b668b2b1b411', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '8632ffb58a0ee957833a8949906282839957a612', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '656254670447c3ba5d8c7a80fe9e0e10447496a8', class: "year-nav__current" }, this.currentYear), h("button", { key: 'f2a1edcb353efb0c23b3c4d8a80f777b4edb913d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'f0c96a20f2851791835dea2009e8d787bffc66fd', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '14a8370e223519818dfbd31a0779c8822ed96f5e', class: "month-nav" }, h("button", { key: '571da52ef8829bf2595f520f130a5cd7f23ed10b', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '804fe9cd68f9c659b48a684cd9c5aff839cb5d67', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '5dacf5a466cf712074c09dcafbb9f9c230257452', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '2276839d97c42f91983d56ac53fdb7cc5adb0da1', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '3d1b8fd1cfcb4f5acd059afde97dd14048d2a637', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '02813e891695cf61a87c8f4e4c3060399aa10433', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'fbeea6b25435892cc9f2a183027669a1429e588f', class: "sd-date-picker__body" }, [
92
+ }, onClick: () => this.openMenu() }, h("sd-icon", { key: '16e1f67a61cd25816347f0bb8d89f402dbc1a203', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'f5fa53258f895e9c5052e9812e08a1175caddf4d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '072a2ae86e666678581d35f3e357fe5b756646ff', class: "sd-date-picker__menu" }, h("div", { key: 'c81834631a65d4f3b91939748051b3687addaeed', class: "sd-date-picker__header" }, h("div", { key: '817d4e0279ac94ab83f0ca654f0cc57670457f2e', class: "year-nav" }, h("button", { key: '50c420fa3bc7f2959f66ca0f85aefaa404b19a9e', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '33079e3ffd9d5d4152c88b57ce0ba37e6ab8ab41', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '93a7065db1490dc60585c94ab0bac376bce0180e', class: "year-nav__current" }, this.currentYear), h("button", { key: 'c16a36aa9a036789efb45dd957eec6e96b82d04c', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '421b6366168d75c9e02eba4f3c7f207bbb42cb4d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3c9cebfb11efcf592f02ff007462ff13d332f7d3', class: "month-nav" }, h("button", { key: 'aa0ec3de458a3f0b0ac5f16c8a74a0caa8c9fb12', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '7c5b1ddb7c3c0d77c6cc1037429ee1f9f3750854', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '2560f52cdc0d9200dfca89fac02e8ca8be0c57d5', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'f4245f1dbf538225f30221d2a51cf44bca9457bf', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'b2f721184bc7f863bd372e3fe2bdf57903324f8f', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '0e9b74e1ef69dd639a883b762fa974659f9c544e', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'dcef9e0f8ee2a31c52c6807882c85a14aa03d1c3', class: "sd-date-picker__body" }, [
93
93
  ...this.calendar.prevMonthDays,
94
94
  ...this.calendar.days,
95
95
  ...this.calendar.afterMonthDays,
@@ -1,9 +1,9 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host } from './p-CbnL1UUF.js';
2
2
  import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
3
3
  import { d as defineCustomElement$5 } from './p-CVg_jkEo.js';
4
- import { d as defineCustomElement$4 } from './p-CsP5aJ3N.js';
5
- import { d as defineCustomElement$3 } from './p-D60I2CpC.js';
6
- import { d as defineCustomElement$2 } from './p-DXyjyA0e.js';
4
+ import { d as defineCustomElement$4 } from './p-GNK9vrin.js';
5
+ import { d as defineCustomElement$3 } from './p-ntW8MKYi.js';
6
+ import { d as defineCustomElement$2 } from './p-BEq3cGoC.js';
7
7
 
8
8
  const addDays = (inputDate, days) => {
9
9
  const [year, month, day] = inputDate.split('-').map(Number);
@@ -162,9 +162,9 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
162
162
  this.isOpen = false;
163
163
  };
164
164
  render() {
165
- return (h(Host, { key: '8b73cef9de34c20717ed100fb601dcb347555efb', class: "sd-date-range-picker" }, h("sd-input", { key: 'a9b89bd7668cda06c6e1a3cf859c9453bfa69add', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
165
+ return (h(Host, { key: '32819a4bb1098493ff7eeeb5c01f3d76e5b1bcbc', class: "sd-date-range-picker" }, h("sd-input", { key: '3ce75d2544e24fb09b6ed853f35295834ad48c0d', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
166
166
  margin: '0 0 0 8px',
167
- }, onClick: () => this.openMenu() }, h("sd-icon", { key: '1289bbf0513966a3c1d68ecc9b6ba58b356aa107', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '1b6ac8dc70f388e4a3076792cb2148669b603955', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '2ad485eacabb8fdfb32347c0f6a9047bbb7dddc9', class: "sd-date-range-picker__menu" }, h("div", { key: '3f41048491255d7a5f70e47b6dd6cefc2ec3530d', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '9f12f991df90779a25d54f6e686343630423a62e', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'f92747539f8812374fe3f280d7c42c51951935a8', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'efb19fc81ec2d4398a6d956208f94be526ac2970', class: "header-label" }, this.prevYear), h("button", { key: '2c2009bc5831d7bd619252f376e336c3c3b858a2', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '6b5ec56827f067c54142be11360a847df82a5e70', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '6ac34cd6e181f2aca989ab90836fa0bebf7f942c', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
167
+ }, onClick: () => this.openMenu() }, h("sd-icon", { key: 'a38e381819ac1c469cfab99e8da3eca641d9dff5', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '05ea74ce59f9bfbe14404eea31a877fc007ab105', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'ec87b0e8dc56d880ad21f8bd233ba04b150bb6f0', class: "sd-date-range-picker__menu" }, h("div", { key: 'e6115593eef709220a1d0cf100b8896741b16553', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'a823d93eaf49bd691bf6e851056b5e2a95be3af9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'ebfad0c30a3a6847eb7fc3420a41c421560a83b1', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '4f65c1f3b510d7c527fcd61369046944186a101b', class: "header-label" }, this.prevYear), h("button", { key: '61d7903a7ee28d864f8d92dc6e79642ea5100660', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '3a18bb2fc66635ac7313a533b484a339be121e41', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '579d6c2ec0866798b19f0bc2f5a3d23d1beea64a', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
168
168
  ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
169
169
  : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
170
170
  this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===
@@ -1,8 +1,8 @@
1
1
  import { p as proxyCustomElement, H, h, c as Host } from './p-CbnL1UUF.js';
2
2
  import { c as colors } from './p-BYf-ybt2.js';
3
- import { d as defineCustomElement$4 } from './p-CHw7bav7.js';
4
- import { d as defineCustomElement$3 } from './p-CsP5aJ3N.js';
5
- import { d as defineCustomElement$2 } from './p-DXyjyA0e.js';
3
+ import { d as defineCustomElement$4 } from './p-CqpahWAy.js';
4
+ import { d as defineCustomElement$3 } from './p-GNK9vrin.js';
5
+ import { d as defineCustomElement$2 } from './p-BEq3cGoC.js';
6
6
 
7
7
  const sdGuideCss = "@charset \"UTF-8\";.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}sd-guide{display:inline-block;height:fit-content}sd-guide .sd-guide{display:inline-block}sd-guide .sd-guide .sd-button{padding:0 16px 0 12px;border-radius:16px;color:#333333 !important;display:flex;align-items:center;transition:none}sd-guide .sd-guide .sd-button .sd-button__content{color:#333333 !important}sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label{color:#333333 !important;margin-left:4px}sd-guide .sd-guide--active .sd-button{border:1px solid #12b553}sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label{color:white !important}.sd-guide__popup{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2::before{content:\"•\"}.sd-guide__popup__list__item--depth-2{padding-left:26px}";
8
8
 
@@ -59,11 +59,11 @@ const SdGuide$1 = /*@__PURE__*/ proxyCustomElement(class SdGuide extends H {
59
59
  };
60
60
  render() {
61
61
  const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
62
- return (h(Host, { key: '0347d2b653648d99f97bf235cc016738f82b641e', style: {
62
+ return (h(Host, { key: '456a4ced90ec49ddf4969c1e9a87d68fc503355c', style: {
63
63
  '--sd-guide-color': GUIDE_ICON[this.type].color,
64
- } }, h("sd-button", { key: '3f592030124b0033c2fc85e4ede091038c93efde', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '334dc8cef60e8354b43efa3a0d0a971ff2f82746', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'b0422529af3f92629024e6130393f3ff5c9df116', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'cd00540ffe1a70be9bcc9560c9b688709d1ce9be', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
64
+ } }, h("sd-button", { key: '64e61ca7e8d475abac27191f6f7e2ee33d7b8bc8', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '6139d4b7436c3d90e1b0228e1d105a15be240b60', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'b83b58048bc943f28decd421eca8eca78cfb87fd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'd5a27f011f1ef48f7b02cd1a12684a322b077dbf', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
65
65
  // buttonStyle={{ padding: '0px', minHeight: '0px' }}
66
- onSdClick: this.closeDropdown }), h("div", { key: '3a4393bb918273d4d66339de9d434e0a79e1cb94', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'c39e82ff77c2ec9e703e197bcc35d0ad6a65c03a', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: 'a4cc1d67bb52791661834e520d270808f3528d3a', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: 'f6d22130a11dd3d072d644f828d7d247aa291252', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
66
+ onSdClick: this.closeDropdown }), h("div", { key: '400884e7c9d5bc84a21a45bb6eb8bf83974d65a6', class: "sd-guide__popup__header" }, h("sd-icon", { key: '87c70c74d58100ab13de6daa338760856b20bebe', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '1ac10ed9ddc9fad160df651e4f6df90929c75b96', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '17aebdd0710223e0ddfe6502ebb14c74f3e6cdb2', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
67
67
  }
68
68
  // 현재 2depth까지만 스타일 적용
69
69
  renderListItem(message, depth = 0) {
@@ -1,4 +1,4 @@
1
- import { S as SdIcon$1, d as defineCustomElement$1 } from './p-CsP5aJ3N.js';
1
+ import { S as SdIcon$1, d as defineCustomElement$1 } from './p-GNK9vrin.js';
2
2
 
3
3
  const SdIcon = SdIcon$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { S as SdInput$1, d as defineCustomElement$1 } from './p-D60I2CpC.js';
1
+ import { S as SdInput$1, d as defineCustomElement$1 } from './p-ntW8MKYi.js';
2
2
 
3
3
  const SdInput = SdInput$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-Bry2vtXF.js';
1
+ import { S as SdLoadingSpinner$1, d as defineCustomElement$1 } from './p-5yzkkdZ2.js';
2
2
 
3
3
  const SdLoadingSpinner = SdLoadingSpinner$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { S as SdPagination$1, d as defineCustomElement$1 } from './p-cZZiWgpx.js';
1
+ import { S as SdPagination$1, d as defineCustomElement$1 } from './p-CSnKPDQz.js';
2
2
 
3
3
  const SdPagination = SdPagination$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,8 +1,8 @@
1
1
  import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
2
2
  import { T as TooltipArrow } from './p-wA4KCOG0.js';
3
- import { d as defineCustomElement$4 } from './p-CHw7bav7.js';
4
- import { d as defineCustomElement$3 } from './p-CsP5aJ3N.js';
5
- import { d as defineCustomElement$2 } from './p-BLVHOrsi.js';
3
+ import { d as defineCustomElement$4 } from './p-CqpahWAy.js';
4
+ import { d as defineCustomElement$3 } from './p-GNK9vrin.js';
5
+ import { d as defineCustomElement$2 } from './p-BG0UE2wL.js';
6
6
 
7
7
  const sdPopoverCss = ".sd-popover{position:relative;cursor:pointer;display:inline-block}";
8
8
 
@@ -44,11 +44,11 @@ const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
44
44
  this.showPopover = false;
45
45
  };
46
46
  render() {
47
- return (h(Fragment, { key: 'd457e8f54d99c4f42b85d90f04cbf67cbe36635c' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '9ea275ba7986ee4c084a2f2091d9c2eb590bcea2', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'ffb0f048433b15bf7fcbd7969f093e6e61ccb4cd', class: {
47
+ return (h(Fragment, { key: 'c589194a99064c6d4dcba4a3041fabc86e629190' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '8ad8df3d02c2889a404366a7a1486ee001415423', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'a45f59c40dfbdbe3ad70ea4733459841ddbd6ca2', class: {
48
48
  'sd-popover-menu': true,
49
49
  [`sd-popover-menu--${this.placement}`]: true,
50
50
  [this.menuClass]: !!this.menuClass,
51
- } }, h("i", { key: '92476592bcfe97ccc8d72780ddcab13e914a4902', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'df5077063d131d8022d92f3eeef3a87d70a74542' })), h("div", { key: '693b5b70079d87747d5a02daaa9fc9739fdf158e', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'ac67c0c9ecc93ef9b7581ca22d5cc7ad84aa438b', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'f133b49960594f1828dff11c130c85ff8e658aee', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '2c0ae6d8353528b870fd88dc205059fa7efd8166', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '84b0862776101eb67782ca6ca0919562f79eeebc', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '8dd2f9c6a9e36b86b1fd5b6463362a9c7773f711', name: "close", size: "12", color: "#AAAAAA" }))))))));
51
+ } }, h("i", { key: '37666b148d9638512cdcf9880b4d4f928c617398', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '34801580a143b2a9a0e4fd2a754e3b7df84715bb' })), h("div", { key: 'f6ed764d4c50b2573188164f387df4ec4df04430', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'd038bbede4912070b58772daac3f264908c7b0ef', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0bc6407b1deb2fdc2194fe8b45af199c797ad9de', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '77f310b36aabbd66ed92cbf3caa9edf619875f0e', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'd48a8945ff2419ff4f45f62bddc4b56cccf608e2', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '821ce775843d2958b2288f7deba565b1b5aa4cda', name: "close", size: "12", color: "#AAAAAA" }))))))));
52
52
  }
53
53
  static get watchers() { return {
54
54
  "show": ["watchShowHandler"]
@@ -1,4 +1,4 @@
1
- import { S as SdPortal$1, d as defineCustomElement$1 } from './p-DXyjyA0e.js';
1
+ import { S as SdPortal$1, d as defineCustomElement$1 } from './p-BEq3cGoC.js';
2
2
 
3
3
  const SdPortal = SdPortal$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -22,10 +22,10 @@ const SdProgress$1 = /*@__PURE__*/ proxyCustomElement(class SdProgress extends H
22
22
  error: '#FB4444',
23
23
  };
24
24
  render() {
25
- return (h(Host, { key: '2e2f7cf77bbc63dfb15910a3bc50ac45601020cd', style: {
25
+ return (h(Host, { key: 'f086ff0b5357c038b83f8b8b457cd7aa3c99ba03', style: {
26
26
  '--progress-color': this.statusColor[this.status],
27
27
  '--progress-percentage': `${this.percentage}%`,
28
- } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '3e72a490e148886c59345e5ac3161f760e0f4e85', class: "sd-progress__label" }, this.label)));
28
+ } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '2e8ce5a1fe1206f95f4268eaa571264f7daa7b8f', class: "sd-progress__label" }, this.label)));
29
29
  }
30
30
  renderBarProgress() {
31
31
  return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
@@ -1,10 +1,10 @@
1
1
  import { p as proxyCustomElement, d as createEvent, h, c as Host, F as Fragment } from './p-CbnL1UUF.js';
2
2
  import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-BvuTaRpn.js';
3
- import { d as defineCustomElement$6 } from './p-DR6QXFmO.js';
4
- import { d as defineCustomElement$5 } from './p-CsP5aJ3N.js';
5
- import { d as defineCustomElement$4 } from './p-D60I2CpC.js';
6
- import { d as defineCustomElement$3 } from './p-DXyjyA0e.js';
7
- import { d as defineCustomElement$2 } from './p-B5jkeFCb.js';
3
+ import { d as defineCustomElement$6 } from './p-Du8-vyL0.js';
4
+ import { d as defineCustomElement$5 } from './p-GNK9vrin.js';
5
+ import { d as defineCustomElement$4 } from './p-ntW8MKYi.js';
6
+ import { d as defineCustomElement$3 } from './p-BEq3cGoC.js';
7
+ import { d as defineCustomElement$2 } from './p-B8lMIjWB.js';
8
8
 
9
9
  const sdSelectMultipleGroupCss = ".sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}sd-select-multiple-group{display:inline-block;height:fit-content}sd-select-multiple-group .sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white;color:#333333}sd-select-multiple-group .sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group__container{position:relative;width:100%;display:flex}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-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}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container sd-input{width:100%}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}";
10
10
 
@@ -1,10 +1,10 @@
1
1
  import { p as proxyCustomElement, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
2
2
  import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-BvuTaRpn.js';
3
- import { d as defineCustomElement$6 } from './p-DR6QXFmO.js';
4
- import { d as defineCustomElement$5 } from './p-CsP5aJ3N.js';
5
- import { d as defineCustomElement$4 } from './p-D60I2CpC.js';
6
- import { d as defineCustomElement$3 } from './p-DXyjyA0e.js';
7
- import { d as defineCustomElement$2 } from './p-BoIp700J.js';
3
+ import { d as defineCustomElement$6 } from './p-Du8-vyL0.js';
4
+ import { d as defineCustomElement$5 } from './p-GNK9vrin.js';
5
+ import { d as defineCustomElement$4 } from './p-ntW8MKYi.js';
6
+ import { d as defineCustomElement$3 } from './p-BEq3cGoC.js';
7
+ import { d as defineCustomElement$2 } from './p-BEDQ2CIp.js';
8
8
 
9
9
  const sdSelectMultipleCss = ".sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__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}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
10
10
 
@@ -220,11 +220,11 @@ const SdSelectMultiple$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultip
220
220
  '--select-width': this.width || '200px',
221
221
  '--select-dropdown-height': this.dropdownHeight || '260px',
222
222
  };
223
- return (h(Host, { key: 'c569bb885003048b6ec22bfb0688c671a70a27d5', style: style }, h("div", { key: '94b43199502f44f7d663981c320696c6e8cf968f', class: {
223
+ return (h(Host, { key: '3c3cd8714a8d2a7e3f7ca5057c19b281488aa159', style: style }, h("div", { key: '877950e58b715002bb1976b11ead8abd41984534', class: {
224
224
  'sd-select-multiple': true,
225
225
  'sd-select-multiple--open': this.isOpen,
226
226
  'sd-select-multiple--disabled': this.disabled,
227
- }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'd4fd6929b78add118c01d7b52c1c1e0be9867924', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
227
+ }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '2839ca7bfa830226ace0a32e8deb62c03f1feb62', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
228
228
  }
229
229
  renderLabel(label) {
230
230
  if (!label)
@@ -1,4 +1,4 @@
1
- import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-B5jkeFCb.js';
1
+ import { S as SdSelectOptionGroup$1, d as defineCustomElement$1 } from './p-B8lMIjWB.js';
2
2
 
3
3
  const SdSelectOptionGroup = SdSelectOptionGroup$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-BoIp700J.js';
1
+ import { S as SdSelectOption$1, d as defineCustomElement$1 } from './p-BEDQ2CIp.js';
2
2
 
3
3
  const SdSelectOption = SdSelectOption$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { S as SdSelect$1, d as defineCustomElement$1 } from './p-CVmIv1LY.js';
1
+ import { S as SdSelect$1, d as defineCustomElement$1 } from './p-ybbnPl4X.js';
2
2
 
3
3
  const SdSelect = SdSelect$1;
4
4
  const defineCustomElement = defineCustomElement$1;