@sellmate/design-system 1.6.0 → 1.7.1

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 (183) 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-action-modal.cjs.entry.js +1 -1
  4. package/dist/cjs/sd-badge.cjs.entry.js +1 -1
  5. package/dist/cjs/sd-barcode-input.cjs.entry.js +1 -1
  6. package/dist/cjs/sd-button_2.cjs.entry.js +2 -2
  7. package/dist/cjs/sd-calendar_2.cjs.entry.js +5 -5
  8. package/dist/cjs/sd-callout.cjs.entry.js +1 -1
  9. package/dist/cjs/sd-card.cjs.entry.js +1 -1
  10. package/dist/cjs/sd-chip.cjs.entry.js +4 -4
  11. package/dist/cjs/sd-circle-progress.cjs.entry.js +1 -1
  12. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +4 -3
  13. package/dist/cjs/sd-date-picker_7.cjs.entry.js +48 -20
  14. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +1 -1
  15. package/dist/cjs/sd-field_3.cjs.entry.js +5 -4
  16. package/dist/cjs/sd-ghost-button.cjs.entry.js +2 -2
  17. package/dist/cjs/sd-guide.cjs.entry.js +2 -2
  18. package/dist/cjs/sd-modal-container.cjs.entry.js +3 -0
  19. package/dist/cjs/sd-popover.cjs.entry.js +8 -5
  20. package/dist/cjs/sd-portal.cjs.entry.js +1 -1
  21. package/dist/cjs/sd-radio-button.cjs.entry.js +1 -1
  22. package/dist/cjs/sd-radio.cjs.entry.js +1 -1
  23. package/dist/cjs/sd-tag.cjs.entry.js +2 -2
  24. package/dist/cjs/sd-text-link.cjs.entry.js +3 -3
  25. package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
  26. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  27. package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
  28. package/dist/collection/components/sd-button/sd-button.js +2 -2
  29. package/dist/collection/components/sd-calendar/sd-calendar.js +3 -3
  30. package/dist/collection/components/sd-callout/sd-callout.js +1 -1
  31. package/dist/collection/components/sd-card/sd-card.js +1 -1
  32. package/dist/collection/components/sd-chip/sd-chip.js +4 -4
  33. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
  34. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
  35. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  36. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  37. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
  38. package/dist/collection/components/sd-field/sd-field.js +5 -4
  39. package/dist/collection/components/sd-file-picker/sd-file-picker.css +15 -1
  40. package/dist/collection/components/sd-file-picker/sd-file-picker.js +44 -16
  41. package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +2 -2
  42. package/dist/collection/components/sd-guide/sd-guide.js +2 -2
  43. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +21 -1
  44. package/dist/collection/components/sd-modal-container/sd-modal-container.js +3 -0
  45. package/dist/collection/components/sd-popover/sd-popover.js +13 -23
  46. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  47. package/dist/collection/components/sd-radio/sd-radio.js +1 -1
  48. package/dist/collection/components/sd-radio-button/sd-radio-button.js +1 -1
  49. package/dist/collection/components/sd-radio-group/sd-radio-group.js +1 -1
  50. package/dist/collection/components/sd-tag/sd-tag.js +2 -2
  51. package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
  52. package/dist/components/{p-BNUsawW7.js → p-2z2c2umH.js} +1 -1
  53. package/dist/components/{p-BDJJQALT.js → p-B45aOf4I.js} +1 -1
  54. package/dist/components/{p-CSbyXQa9.js → p-B6G64i5a.js} +1 -1
  55. package/dist/components/{p-CRq8zgt_.js → p-B6JOxZKP.js} +1 -1
  56. package/dist/components/{p-CAP-9lnL.js → p-B6L3bPm2.js} +1 -1
  57. package/dist/components/{p-z564gmGG.js → p-BWJtQGYo.js} +1 -1
  58. package/dist/components/{p-BqYASycS.js → p-Bhh7ig9Q.js} +1 -1
  59. package/dist/components/p-C8c6MuKQ.js +1 -0
  60. package/dist/components/{p-BYRvYsiC.js → p-CTuKWVTh.js} +1 -1
  61. package/dist/components/{p-CJRGLvgC.js → p-CkR5oiLy.js} +1 -1
  62. package/dist/components/{p-CK6jFkqR.js → p-CwRItc2J.js} +1 -1
  63. package/dist/components/{p-BYU3wOaN.js → p-D6cUtm8p.js} +1 -1
  64. package/dist/components/{p-2aQ4cVXp.js → p-DCFqtVBm.js} +1 -1
  65. package/dist/components/{p-D4mjSR0u.js → p-DISZkQqT.js} +1 -1
  66. package/dist/components/p-DMrXwfmf.js +1 -0
  67. package/dist/components/p-DhmsCQrB.js +1 -0
  68. package/dist/components/{p-DfKa36bs.js → p-DhtKHJ7-.js} +1 -1
  69. package/dist/components/p-DmDGMDzt.js +1 -0
  70. package/dist/components/{p-BZRMoE3E.js → p-I9SoAcVO.js} +1 -1
  71. package/dist/components/{p-DZ_3ZYMC.js → p-ZSGGRCNc.js} +1 -1
  72. package/dist/components/{p-sRzhIrJR.js → p-cX2DD74L.js} +1 -1
  73. package/dist/components/{p-BCeq6-MU.js → p-f10Mw7qM.js} +1 -1
  74. package/dist/components/p-p4bNikji.js +1 -0
  75. package/dist/components/{p-B_2U9h3P.js → p-wLoP3KMv.js} +1 -1
  76. package/dist/components/{p-BE-21GLH.js → p-y_6iWhDy.js} +1 -1
  77. package/dist/components/sd-action-modal.js +1 -1
  78. package/dist/components/sd-badge.js +1 -1
  79. package/dist/components/sd-barcode-input.js +1 -1
  80. package/dist/components/sd-button.js +1 -1
  81. package/dist/components/sd-calendar.js +1 -1
  82. package/dist/components/sd-callout.js +1 -1
  83. package/dist/components/sd-card.js +1 -1
  84. package/dist/components/sd-chip.js +1 -1
  85. package/dist/components/sd-circle-progress.js +1 -1
  86. package/dist/components/sd-confirm-modal.js +1 -1
  87. package/dist/components/sd-date-picker-trigger.js +1 -1
  88. package/dist/components/sd-date-picker.js +1 -1
  89. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  90. package/dist/components/sd-date-range-picker.js +1 -1
  91. package/dist/components/sd-dropdown-button.js +1 -1
  92. package/dist/components/sd-field.js +1 -1
  93. package/dist/components/sd-file-picker.js +1 -1
  94. package/dist/components/sd-ghost-button.js +1 -1
  95. package/dist/components/sd-guide.js +1 -1
  96. package/dist/components/sd-input.js +1 -1
  97. package/dist/components/sd-key-value-table.js +1 -1
  98. package/dist/components/sd-loading-container.js +1 -1
  99. package/dist/components/sd-loading-modal.js +1 -1
  100. package/dist/components/sd-modal-container.js +1 -1
  101. package/dist/components/sd-number-input.js +1 -1
  102. package/dist/components/sd-popover.js +1 -1
  103. package/dist/components/sd-popup.js +1 -1
  104. package/dist/components/sd-portal.js +1 -1
  105. package/dist/components/sd-radio-button.js +1 -1
  106. package/dist/components/sd-radio-group.js +1 -1
  107. package/dist/components/sd-radio.js +1 -1
  108. package/dist/components/sd-select.js +1 -1
  109. package/dist/components/sd-table.js +1 -1
  110. package/dist/components/sd-tabs.js +1 -1
  111. package/dist/components/sd-tag.js +1 -1
  112. package/dist/components/sd-text-link.js +1 -1
  113. package/dist/components/sd-textarea.js +1 -1
  114. package/dist/components/sd-thead.js +1 -1
  115. package/dist/components/sd-toast-container.js +1 -1
  116. package/dist/components/sd-toast.js +1 -1
  117. package/dist/components/sd-tooltip.js +1 -1
  118. package/dist/design-system/design-system.esm.js +1 -1
  119. package/dist/design-system/p-0de5a53b.entry.js +1 -0
  120. package/dist/design-system/{p-ea17a361.entry.js → p-2d3d25bd.entry.js} +1 -1
  121. package/dist/design-system/p-3e2b5e01.entry.js +1 -0
  122. package/dist/design-system/{p-840f592d.entry.js → p-46faa7ed.entry.js} +1 -1
  123. package/dist/design-system/{p-b08ca29b.entry.js → p-4c3ead1b.entry.js} +1 -1
  124. package/dist/design-system/{p-a6c9baa5.entry.js → p-5c4fd9c1.entry.js} +1 -1
  125. package/dist/design-system/{p-eef5f8d7.entry.js → p-5d5d8220.entry.js} +1 -1
  126. package/dist/design-system/p-60b80bf3.entry.js +1 -0
  127. package/dist/design-system/{p-8d2815cf.entry.js → p-74b3e95b.entry.js} +1 -1
  128. package/dist/design-system/{p-0964c79a.entry.js → p-78b0b759.entry.js} +1 -1
  129. package/dist/design-system/p-78c2fd6d.entry.js +1 -0
  130. package/dist/design-system/p-8674d868.entry.js +1 -0
  131. package/dist/design-system/{p-17883b40.entry.js → p-9d34518e.entry.js} +1 -1
  132. package/dist/design-system/{p-696764b0.entry.js → p-9e75a5dc.entry.js} +1 -1
  133. package/dist/design-system/p-bd4e5141.entry.js +1 -0
  134. package/dist/design-system/{p-70f47e43.entry.js → p-c1bac61e.entry.js} +1 -1
  135. package/dist/design-system/{p-7444d475.entry.js → p-cffa6da7.entry.js} +1 -1
  136. package/dist/design-system/{p-1743651a.entry.js → p-e81cb8c9.entry.js} +1 -1
  137. package/dist/design-system/{p-e9079238.entry.js → p-ea586c5e.entry.js} +1 -1
  138. package/dist/design-system/{p-733aa107.entry.js → p-f14962bd.entry.js} +1 -1
  139. package/dist/design-system/{p-521e5d2e.entry.js → p-f3dff8b8.entry.js} +1 -1
  140. package/dist/design-system/{p-afdca5bb.entry.js → p-fc6da22d.entry.js} +1 -1
  141. package/dist/esm/design-system.js +1 -1
  142. package/dist/esm/loader.js +1 -1
  143. package/dist/esm/sd-action-modal.entry.js +1 -1
  144. package/dist/esm/sd-badge.entry.js +1 -1
  145. package/dist/esm/sd-barcode-input.entry.js +1 -1
  146. package/dist/esm/sd-button_2.entry.js +2 -2
  147. package/dist/esm/sd-calendar_2.entry.js +5 -5
  148. package/dist/esm/sd-callout.entry.js +1 -1
  149. package/dist/esm/sd-card.entry.js +1 -1
  150. package/dist/esm/sd-chip.entry.js +4 -4
  151. package/dist/esm/sd-circle-progress.entry.js +1 -1
  152. package/dist/esm/sd-confirm-modal_2.entry.js +4 -3
  153. package/dist/esm/sd-date-picker_7.entry.js +48 -20
  154. package/dist/esm/sd-date-range-picker-calendar.entry.js +1 -1
  155. package/dist/esm/sd-field_3.entry.js +5 -4
  156. package/dist/esm/sd-ghost-button.entry.js +2 -2
  157. package/dist/esm/sd-guide.entry.js +2 -2
  158. package/dist/esm/sd-modal-container.entry.js +3 -0
  159. package/dist/esm/sd-popover.entry.js +8 -5
  160. package/dist/esm/sd-portal.entry.js +1 -1
  161. package/dist/esm/sd-radio-button.entry.js +1 -1
  162. package/dist/esm/sd-radio.entry.js +1 -1
  163. package/dist/esm/sd-tag.entry.js +2 -2
  164. package/dist/esm/sd-text-link.entry.js +3 -3
  165. package/dist/types/components/sd-chip/sd-chip.d.ts +1 -1
  166. package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +3 -0
  167. package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts +1 -0
  168. package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +1 -0
  169. package/dist/types/components/sd-popover/sd-popover.d.ts +2 -1
  170. package/dist/types/components.d.ts +3 -8
  171. package/hydrate/index.js +102 -65
  172. package/hydrate/index.mjs +102 -65
  173. package/package.json +1 -1
  174. package/dist/components/p-BUW6I_d5.js +0 -1
  175. package/dist/components/p-DSIM5Mkt.js +0 -1
  176. package/dist/components/p-Dwko_Bx3.js +0 -1
  177. package/dist/components/p-pTx5xpqU.js +0 -1
  178. package/dist/design-system/p-20a2e0d2.entry.js +0 -1
  179. package/dist/design-system/p-3a848c36.entry.js +0 -1
  180. package/dist/design-system/p-4bd9f005.entry.js +0 -1
  181. package/dist/design-system/p-4cf1c8ae.entry.js +0 -1
  182. package/dist/design-system/p-c5c4a66b.entry.js +0 -1
  183. package/dist/design-system/p-f97b75d3.entry.js +0 -1
@@ -93,9 +93,9 @@ export class SdDatePicker {
93
93
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
94
94
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
95
95
  };
96
- return (h("sd-field", { key: '35d821e9a21a09e4b2dc0d47f9a95d895c4f9dc4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '21fe3c0ab5dff10265139111de741216fb06e4e4', class: "sd-date-picker", ref: el => {
96
+ return (h("sd-field", { key: '12d77a181caa4a6a9125db8a5c823149386ee059', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2abc775817955caf06dd721d7b91c65d1bfd54de', class: "sd-date-picker", ref: el => {
97
97
  this.triggerRef = el;
98
- } }, h("sd-date-picker-trigger", { key: 'b9fd9b90afa512aefdd4b227c66d0b4660b69318', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'b6e439d2b507922cc2e345fe1fba856d77441cbc', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'ae09060fec5542b9e30d051133f4bca3c772f5d9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
98
+ } }, h("sd-date-picker-trigger", { key: 'c8c041a503785e35ac4a14d902eeef0a20fa2dd7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2c3bf831068ca090247fa4494fac6c2ce3b20e81', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '52df44d23b85540cbca17c352aba5568ff43685d', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
99
99
  }
100
100
  static get is() { return "sd-date-picker"; }
101
101
  static get originalStyleUrls() {
@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
239
239
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
240
240
  '--range-divider': RANGE_LAYOUT.divider,
241
241
  };
242
- return (h(Fragment, { key: 'b4082936889d6bed77917d9b06aafa3c80d413a7' }, h("div", { key: 'baf10fa376bf32982816258f950edf65d5622a99', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'bacc88f756b64f4382b1c8c648269bb2c233dc54', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'dcebf3cd120e2e606784c365c309d4c48296a5ae', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
242
+ return (h(Fragment, { key: 'a9e5bc8198cfda50227069661812341e7a19b21d' }, h("div", { key: 'a2c5bf6ae806fc24f421cb6b52323f4e92bfc255', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '2575175fa3537e010e1c7d573428d5c8ebfae488', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'bd43ac98b88665dbe85804c8b6345c19dca7d9fa', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
243
243
  }
244
244
  static get is() { return "sd-date-range-picker-calendar"; }
245
245
  static get originalStyleUrls() {
@@ -172,20 +172,21 @@ export class SdField {
172
172
  : {}),
173
173
  }
174
174
  : {};
175
- return (h("div", { key: '1cc135c77708546f23b699bf337c018f6c4d315e', class: {
175
+ return (h("div", { key: 'c6d4bc9d09982d65c31596319569590df9b994b1', class: {
176
176
  'sd-field': true,
177
177
  'sd-field--has-label': this.label !== '',
178
178
  'sd-field--has-addon': addon !== '',
179
179
  [this.fieldStatus]: this.fieldStatus !== '',
180
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '506ace23aa27ad50a8ad60dcf6c71a0bdf04d7af', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '41b77a52c21eef8c38127362423378f1b9a6cb77', class: "sd-field__main", style: this.width !== '' && this.width !== 0
180
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '24f3e7702b3d3be42f8236988e1d64e26a31840e', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '7c45edce014adee7e2eb91296779896d9fd9fcc3', class: "sd-field__main", style: this.width !== '' && this.width !== 0
181
181
  ? {
182
182
  width: typeof this.width === 'number' ? `${this.width}px` : this.width,
183
183
  flex: 'none',
184
184
  }
185
- : {} }, h("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
185
+ : {} }, h("div", { key: '13c99702bf11e4ff76332141a9eaff93185882d3', class: {
186
186
  'sd-field__control': true,
187
187
  'sd-field__control--has-addon': addon !== '',
188
- } }, addon && h("div", { key: '39a28adaa959b89d3724672910157662e50b35ed', class: "sd-field__addon" }, addon), h("slot", { key: '0c9360e8644df658c389554c13a04bc22985e84d' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
188
+ } }, addon && (h("div", { key: '461170360e26e24051fab4507a22e932f5a37244', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'c8b63273a253da7911e5d8a6f57143a9cc909853', name: this.icon.name, size: this.icon.size ??
189
+ Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '3c4a72a6152c50d525df972a2a4c4d6840240116' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
189
190
  }
190
191
  renderLabel(label) {
191
192
  if (label == null || label === '')
@@ -1,8 +1,22 @@
1
1
  sd-file-picker {
2
- display: inline-flex;
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 100%;
5
+ }
6
+
7
+ .sd-file-picker__wrapper {
8
+ display: flex;
9
+ flex-direction: column;
3
10
  width: 100%;
4
11
  }
5
12
 
13
+ .sd-file-picker__chip-list {
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: 8px;
17
+ margin-top: 8px;
18
+ }
19
+
6
20
  .sd-file-picker__content {
7
21
  width: 100%;
8
22
  height: 100%;
@@ -65,11 +65,11 @@ export class SdFilePicker {
65
65
  return undefined;
66
66
  return typeof value === 'string' ? Number(value) : value;
67
67
  }
68
- validateFiles(files) {
68
+ validateFiles(files, existingCount = 0) {
69
69
  const maxFileSize = this.toBytes(this.maxFileSize);
70
70
  const maxTotalSize = this.toBytes(this.maxTotalSize);
71
71
  const maxFiles = this.maxFiles != null ? Number(this.maxFiles) : undefined;
72
- if (maxFiles != null && files.length > maxFiles) {
72
+ if (maxFiles != null && existingCount + files.length > maxFiles) {
73
73
  return { accepted: [], rejected: files, reason: 'max-files' };
74
74
  }
75
75
  if (maxFileSize != null) {
@@ -93,22 +93,34 @@ export class SdFilePicker {
93
93
  return;
94
94
  }
95
95
  const fileArray = Array.from(files);
96
- const { accepted, rejected, reason } = this.validateFiles(fileArray);
97
- if (reason != null) {
98
- this.reject?.emit({ files: rejected, reason });
96
+ if (this.multiple) {
97
+ const existing = Array.isArray(this.internalValue) ? this.internalValue : [];
98
+ const { accepted, rejected, reason } = this.validateFiles(fileArray, existing.length);
99
99
  if (this.fileInputRef) {
100
100
  this.fileInputRef.value = '';
101
101
  }
102
- return;
103
- }
104
- if (this.multiple) {
105
- this.internalValue = accepted;
102
+ if (reason != null) {
103
+ this.reject?.emit({ files: rejected, reason });
104
+ return;
105
+ }
106
+ const merged = [...existing, ...accepted];
107
+ this.internalValue = merged;
108
+ this.value = merged;
109
+ this.update?.emit(this.value);
106
110
  }
107
111
  else {
112
+ const { accepted, rejected, reason } = this.validateFiles(fileArray);
113
+ if (reason != null) {
114
+ this.reject?.emit({ files: rejected, reason });
115
+ if (this.fileInputRef) {
116
+ this.fileInputRef.value = '';
117
+ }
118
+ return;
119
+ }
108
120
  this.internalValue = accepted[0];
121
+ this.value = this.internalValue;
122
+ this.update?.emit(this.value);
109
123
  }
110
- this.value = this.internalValue;
111
- this.update?.emit(this.value);
112
124
  };
113
125
  handleClear = (event) => {
114
126
  if (this.disabled)
@@ -128,6 +140,8 @@ export class SdFilePicker {
128
140
  this.fileInputRef?.click();
129
141
  };
130
142
  hasFiles() {
143
+ if (this.multiple)
144
+ return false;
131
145
  if (!this.internalValue)
132
146
  return false;
133
147
  if (Array.isArray(this.internalValue)) {
@@ -135,14 +149,28 @@ export class SdFilePicker {
135
149
  }
136
150
  return true;
137
151
  }
152
+ hasChips() {
153
+ return Array.isArray(this.internalValue) && this.internalValue.length > 0;
154
+ }
138
155
  getDisplayText() {
139
156
  if (!this.hasFiles())
140
157
  return this.placeholder ?? 'Click to upload';
141
- if (Array.isArray(this.internalValue)) {
142
- return this.internalValue.map(f => f.name).join(', ');
143
- }
144
158
  return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
145
159
  }
160
+ handleChipRemove = (index) => {
161
+ if (!Array.isArray(this.internalValue))
162
+ return;
163
+ const newFiles = [...this.internalValue];
164
+ newFiles.splice(index, 1);
165
+ this.internalValue = newFiles;
166
+ this.value = newFiles;
167
+ this.update?.emit(this.value);
168
+ };
169
+ renderChipList() {
170
+ if (!this.hasChips())
171
+ return null;
172
+ return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
173
+ }
146
174
  checkOverflow() {
147
175
  if (!this.fileNamesRef)
148
176
  return;
@@ -182,9 +210,9 @@ export class SdFilePicker {
182
210
  return (h("div", { class: {
183
211
  'sd-file-picker--inline': true,
184
212
  'sd-file-picker--inline-disabled': this.disabled,
185
- }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
213
+ }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content, this.renderChipList()));
186
214
  }
187
- return (h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
215
+ return (h("div", { class: "sd-file-picker__wrapper", style: cssVars }, h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
188
216
  }
189
217
  static get is() { return "sd-file-picker"; }
190
218
  static get originalStyleUrls() {
@@ -42,7 +42,7 @@ export class SdGhostButton {
42
42
  ? GHOST_BUTTON_DISABLED_COLORS[intent]
43
43
  : GHOST_BUTTON_CONTENT_COLORS[intent];
44
44
  const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
45
- return (h("button", { key: '0707c0067aded10ea53bffbca0dbddbfdef35dc6', class: {
45
+ return (h("button", { key: '7bf9f8b8d487be0b66a969668308fd451faeb442', class: {
46
46
  'sd-ghost-button': true,
47
47
  'sd-ghost-button--disabled': this.disabled,
48
48
  }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -51,7 +51,7 @@ export class SdGhostButton {
51
51
  '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
52
52
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
53
53
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
54
- }, onClick: this.handleClick }, h("sd-icon", { key: 'c362f7da310fc5b20fbbf0b08da4959b6f4a5374', name: this.icon, size: sizeConfig.icon, color: contentColor })));
54
+ }, onClick: this.handleClick }, h("sd-icon", { key: '4b6b05d186f8c38d2f05415fa24960349dd6c453', name: this.icon, size: sizeConfig.icon, color: contentColor })));
55
55
  }
56
56
  static get is() { return "sd-ghost-button"; }
57
57
  static get originalStyleUrls() {
@@ -77,10 +77,10 @@ export class SdGuide {
77
77
  const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
78
78
  if (isActive)
79
79
  buttonClasses.push('sd-guide__button--active');
80
- return (h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '2a803402b120509ef8b6de361f360a7b5b96e9db', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '3e591b85ac24ea1db37bdaaf130f983d70ef2f36', class: "sd-guide__popup", style: {
80
+ return (h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '94e12fa797748a02334b97e13c5012ab95bc2bce', class: "sd-guide__popup", style: {
81
81
  ...this.guideStyle,
82
82
  width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
83
- } }, h("sd-ghost-button", { key: '1aa20f7bd3a1ba45c4932a67a8c1e67d6e068702', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: 'e48378d1731e0b9fcd5990cb908ae3af236d0346', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'c8c71c7c2f0fdb25e3741415c1f1fae1a8d4d3d2', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '4996225c27fbeae4fd9b4d68d6e493d87225d427', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: 'edb2d35594b47f19f2e847ba546fac0fc19b21b4', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
83
+ } }, h("sd-ghost-button", { key: '6fc71032016e7a3be0581508ef0ecc6772981185', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '385c0c18bc888be6a654525dc6f4359a56ad6de9', class: "sd-guide__popup__header" }, h("sd-icon", { key: '34624d2ac3397ba15b2dc7ba23dc460a87cb878b', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'dd3527ec329698b0fd1ec82f2a7d0cf5865802c2', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '429357d0203acdf31177353ceb45d9ac41fadae7', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
84
84
  }
85
85
  // 현재 2depth까지만 스타일 적용
86
86
  renderListItem(message, depth = 0) {
@@ -7,6 +7,7 @@ export class SdLoadingModal {
7
7
  buttonLabel = '';
8
8
  width;
9
9
  height;
10
+ progress;
10
11
  click;
11
12
  get resolvedState() {
12
13
  return this.state ?? 'loading';
@@ -45,7 +46,7 @@ export class SdLoadingModal {
45
46
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
46
47
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
47
48
  };
48
- return (h(Host, { key: '9276c9080c3f9bf2fdf31d1bb5e2b918a49b6a5a', style: hostStyle }, h("div", { key: '6f8d55dd13a92f248e0f7ed50c268f9105975913', class: "sd-loading-modal" }, h("div", { key: 'f40f91f1d61c6ba1bb2049277c664d5abd4657e8', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '1ecad303970f074b50dab0050872a95ddc99aad4', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'dd45d56a5475dc766487859e13e460bc2e27ec82', class: "sd-loading-modal__button" }, h("sd-button", { key: '5d11fa174168c568fd71013ee5600e0884f28c50', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
49
+ return (h(Host, { key: 'e1161a16a56cddedc8e4bb76370bdf456d90e15a', style: hostStyle }, h("div", { key: 'e01979e4636465afa4b960ffdb9722f645386dca', class: "sd-loading-modal" }, h("div", { key: '1c1ecc05d20f58084c0d6f8048b17cd84f446edb', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '6793b86562b67699c59fd83fb0d6ee7378f6d991', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '75036f7d88be636987de2fe999c00d338fa352d5', class: "sd-loading-modal__button" }, h("sd-button", { key: '91f30470702df2be7256d451cc80d27e86510d2e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
49
50
  }
50
51
  static get is() { return "sd-loading-modal"; }
51
52
  static get originalStyleUrls() {
@@ -184,6 +185,25 @@ export class SdLoadingModal {
184
185
  "setter": false,
185
186
  "reflect": false,
186
187
  "attribute": "height"
188
+ },
189
+ "progress": {
190
+ "type": "number",
191
+ "mutable": false,
192
+ "complexType": {
193
+ "original": "number",
194
+ "resolved": "number | undefined",
195
+ "references": {}
196
+ },
197
+ "required": false,
198
+ "optional": true,
199
+ "docs": {
200
+ "tags": [],
201
+ "text": ""
202
+ },
203
+ "getter": false,
204
+ "setter": false,
205
+ "reflect": false,
206
+ "attribute": "progress"
187
207
  }
188
208
  };
189
209
  }
@@ -195,6 +195,9 @@ export class SdModalContainer {
195
195
  if (this.hasOwnProp(options, 'height')) {
196
196
  this.setAttr(el, 'height', options.height != null ? String(options.height) : undefined);
197
197
  }
198
+ if (this.hasOwnProp(options, 'progress')) {
199
+ el.progress = options.progress;
200
+ }
198
201
  }
199
202
  applyProps(el, options) {
200
203
  if (this.hasOwnProp(options, 'type'))
@@ -15,10 +15,10 @@ export class SdPopover {
15
15
  disabled = false;
16
16
  type = 'button';
17
17
  menuTitle;
18
- messages = [];
19
18
  leftLink;
20
19
  button;
21
20
  menuClass = '';
21
+ slotContentHTML = '';
22
22
  showChange;
23
23
  buttonEl;
24
24
  setShow = (next) => {
@@ -40,27 +40,30 @@ export class SdPopover {
40
40
  }
41
41
  }
42
42
  handleClose = () => this.setShow(false);
43
+ componentWillLoad() {
44
+ this.slotContentHTML = this.el.innerHTML;
45
+ this.el.innerHTML = '';
46
+ }
43
47
  render() {
44
48
  const placement = this.placement ?? 'bottom';
45
49
  const color = this.color ?? '#01BB4B';
46
50
  const icon = this.icon ?? 'helpOutline';
47
51
  const iconSize = this.iconSize ?? 12;
48
52
  const menuClass = this.menuClass ?? '';
49
- const messages = Array.isArray(this.messages) ? this.messages : [];
50
53
  const leftLink = this.leftLink;
51
54
  const button = this.button;
52
55
  const hasFooter = !!leftLink || !!button;
53
- return (h(Fragment, { key: '7bf954f334ae12586a02b799139dc29421a86551' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: 'f785e5851cf126052d2c016220d9ff2376f2a9f3', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '5eb30ad12f0f1cb3f23ae90e6b51e9c545dee8fd', class: {
56
+ return (h(Fragment, { key: 'f0b7cc015ab688e21d6df2a797c3964808965934' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '3b8ad8010a7d74fb519f0ad9ff504c0c0fa32941', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '8fba73c8cf2718258a176dac2033fb3b33a8a618', class: {
54
57
  'sd-floating-menu': true,
55
58
  'sd-floating-menu--popover': true,
56
59
  [`sd-floating-menu--${placement}`]: true,
57
60
  [menuClass]: menuClass !== '',
58
61
  }, style: {
59
62
  '--sd-floating-bg': popoverTokens.popover.bg,
60
- } }, h("i", { key: '632639d52731fe47baf2860464013a4d0fd3c3d8', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '1f963e1a52b09803fd9f2d1f1ce7a07023951fc9' })), h("div", { key: '1c90735369085c465321e398775c4ce484190479', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '29584cd7bcb244c3fb6b0cb895a5c4b55093418a', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: '2c7a9671cbec98f0fb393b1d049bfecc1e8b8013', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), hasFooter && (h("div", { key: '18667a0a8eaf8f022513b048095c24487dd4ae98', class: {
63
+ } }, h("i", { key: '1cef252c66b1c350ea43849e552faced5a53fec0', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '755246fe5fbf9b203509f8d45d2bcbeead0c02c6' })), h("div", { key: 'cbefa421598f83f692533d4abf8cfc584b4e02e1', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '0f1dfbaf65236416ba00e5f87cb60e2e98971995', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: '38ef67a38921e3fbd1e8bee95892655fc57d124c', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: '6b3f297563e3b7aa17ace0e20c4423d09b528b32', class: {
61
64
  'sd-floating-menu__buttons': true,
62
65
  'sd-floating-menu__buttons--with-link': !!leftLink,
63
- } }, leftLink && (h("sd-text-link", { key: 'efbeb3047ea9eb62eba2f5940ec4f71f46d1c479', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '9044ee54225a7b441c85d1acf3355e2d3688f942', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: '4f37394444b692ff5a2b736fe3514e51eb49b601', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
66
+ } }, leftLink && (h("sd-text-link", { key: '6ff83b0aefa24ac3bbae7f1399fdaaa1028b4e75', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: 'b8b75cd68c55b16b5eb0e4635c16b784381ced78', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: '246ab053d1109d7b999e63c3aa5a1048d6096583', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
64
67
  }
65
68
  static get is() { return "sd-popover"; }
66
69
  static get originalStyleUrls() {
@@ -337,24 +340,6 @@ export class SdPopover {
337
340
  "reflect": false,
338
341
  "attribute": "menu-title"
339
342
  },
340
- "messages": {
341
- "type": "unknown",
342
- "mutable": false,
343
- "complexType": {
344
- "original": "string[]",
345
- "resolved": "string[]",
346
- "references": {}
347
- },
348
- "required": false,
349
- "optional": false,
350
- "docs": {
351
- "tags": [],
352
- "text": ""
353
- },
354
- "getter": false,
355
- "setter": false,
356
- "defaultValue": "[]"
357
- },
358
343
  "leftLink": {
359
344
  "type": "unknown",
360
345
  "mutable": false,
@@ -423,6 +408,11 @@ export class SdPopover {
423
408
  }
424
409
  };
425
410
  }
411
+ static get states() {
412
+ return {
413
+ "slotContentHTML": {}
414
+ };
415
+ }
426
416
  static get events() {
427
417
  return [{
428
418
  "method": "showChange",
@@ -220,7 +220,7 @@ export class SdPortal {
220
220
  this.close.emit();
221
221
  }
222
222
  render() {
223
- return h("slot", { key: 'a227fa8a0639de7fd3a014762998692151284f87' });
223
+ return h("slot", { key: '87fb9bf3f15d09321c6c02a1f7b4ed9084516a04' });
224
224
  }
225
225
  static get is() { return "sd-portal"; }
226
226
  static get properties() {
@@ -48,7 +48,7 @@ export class SdRadio {
48
48
  '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
49
49
  '--sd-radio-label-color': RADIO_COLORS.label,
50
50
  };
51
- return (h("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && h("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
51
+ return (h("label", { key: '68f1b169f2a7b072a92a64286fa88eff99313faf', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: 'fa2474cc359ef4f5480a68d9b5d0b6f151e7eec8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '345f286e2f87e5dd0687fb94a59f6886eac25f24', class: "sd-radio__circle" }), this.label && h("span", { key: 'e8bd76682569820121c9469984f0054386d9b117', class: "sd-radio__label" }, this.label)));
52
52
  }
53
53
  static get is() { return "sd-radio"; }
54
54
  static get originalStyleUrls() {
@@ -75,7 +75,7 @@ export class SdRadioButton {
75
75
  '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
76
76
  '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
77
77
  };
78
- return (h("div", { key: 'd1f572315ee66c5defebc4386e815fb21928b548', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
78
+ return (h("div", { key: 'b916d790862409f8b8e1da566f049daadfc4e5e2', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
79
79
  const isSelected = this.isOptionSelected(option);
80
80
  const isDisabled = this.isOptionDisabled(option);
81
81
  return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));
@@ -22,7 +22,7 @@ export class SdRadioGroup {
22
22
  return classes.join(' ');
23
23
  }
24
24
  render() {
25
- return (h("div", { key: '3bb952a72d5bccd1ad4842d9554efe6c69829773', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
25
+ return (h("div", { key: 'd60a7fed2bbe1cd2d577827b10c99627aabbda66', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
26
26
  return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
27
27
  })));
28
28
  }
@@ -27,7 +27,7 @@ export class SdTag {
27
27
  render() {
28
28
  const config = this.resolvedConfig;
29
29
  const iconNode = this.renderIcon(config.icon, config.iconSize);
30
- return (h("span", { key: 'c8b8b88e2c83401bb9d3e05004b0517d7e4a3a6a', class: "sd-tag", style: {
30
+ return (h("span", { key: '945a8a13f4891b5174e48e262b2a108674da7198', class: "sd-tag", style: {
31
31
  '--sd-tag-background': config.background,
32
32
  '--sd-tag-content': config.content,
33
33
  '--sd-tag-height': config.height,
@@ -37,7 +37,7 @@ export class SdTag {
37
37
  '--sd-tag-font-weight': config.fontWeight,
38
38
  '--sd-tag-line-height': config.lineHeight,
39
39
  '--sd-tag-radius': config.radius,
40
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '67094b09ab1d7b7e865c9f6b8017f8c5c3f8274a', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
40
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '441932c2eb85eea471838db541fb95302527df23', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
41
41
  }
42
42
  static get is() { return "sd-tag"; }
43
43
  static get originalStyleUrls() {
@@ -27,7 +27,7 @@ export class SdTextLink {
27
27
  '--sd-text-link-text-decoration': typo.textDecoration,
28
28
  ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
29
29
  };
30
- return (h("span", { key: '11d2153cc91818c1214e21ffa14bd08249ad1116', role: "button", tabindex: this.disabled ? -1 : 0, class: {
30
+ return (h("span", { key: '23ddcce86220acc4e6c8a585e4240ecb7baee9f8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
31
31
  'sd-text-link': true,
32
32
  'sd-text-link--disabled': this.disabled,
33
33
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -35,13 +35,13 @@ export class SdTextLink {
35
35
  e.preventDefault();
36
36
  this.handleClick();
37
37
  }
38
- } }, this.icon && (h("sd-icon", { key: '23972d53b4968c9bdef9b54dfa785e658ba117ef', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '5e99a6c1151093929086ec4398b93d7db590d959', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'b814759278cefe229a5321556374438f281ce0f3', class: "sd-text-link__arrow", style: {
38
+ } }, this.icon && (h("sd-icon", { key: 'd265458a74db086efa270fd165fa5fa9855b708b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '9cb7e5909036aea5b70496fbe5ca69ce10ab3035', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '5ebe27c5929095d1799d81e930b2efa8d616f5bd', class: "sd-text-link__arrow", style: {
39
39
  width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
40
40
  height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
41
41
  display: 'inline-flex',
42
42
  alignItems: 'center',
43
43
  justifyContent: 'center',
44
- } }, h("sd-icon", { key: 'dfe3286eaeef9a176f5ff1a69950713e2712a550', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
44
+ } }, h("sd-icon", { key: '5fc735391386ac733b77bfac6947cccc61fad198', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
45
45
  }
46
46
  static get is() { return "sd-text-link"; }
47
47
  static get originalStyleUrls() {
@@ -1 +1 @@
1
- import{p as t,H as s,c as e,h as o,t as a}from"./p-pwNG5WaX.js";import{d as n}from"./p-CAP-9lnL.js";import{d as i}from"./p-DfKa36bs.js";import{d}from"./p-DQj-S8AC.js";var c={bg:"#07284A",content:"#FFFFFF"},l={bg:"#FB4444",content:"#FFFFFF"},r={bg:"#FFC700",content:"#222222"},b={bg:"#00973C",content:"#FFFFFF"},f={bg:"#005CC9",content:"#FFFFFF"},u={bg:"#E6F1FF",icon:"#0075FF",text:"#222222",textLink:"#555555"};const p={default:"secondary_sm",danger:"danger_outline_sm",caution:"neutral_outline_sm",complete:"neutral_outline_sm",accent:"neutral_outline_sm",info:"secondary_sm"},h={default:{bg:c.bg,content:c.content},danger:{bg:l.bg,content:l.content},caution:{bg:r.bg,content:r.content},complete:{bg:b.bg,content:b.content},accent:{bg:f.bg,content:f.content},info:{bg:u.bg,content:u.text,icon:u.icon,linkColor:u.textLink}},g={iconSize:"16"},m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=e(this,"sdClose",7),this.buttonClick=e(this,"sdButtonClick",7)}icon;message;link;linkLabel;buttonLabel;useClose=!1;type="default";close;buttonClick;render(){const t=h[this.type]??h.default,s=Number(g.iconSize),e=t.icon??t.content,a=t.linkColor??t.content,n=["default","caution","info"].includes(this.type),i=p[this.type]??p.default;return o("div",{key:"735fa3f949ee4c7d0178f999c02e90c829c133b4",style:{"--sd-toast-bg":t.bg,"--sd-toast-text":t.content,"--sd-toast-icon":e,"--sd-toast-link":a}},o("div",{key:"4e483d858c3268bde838ddc5c5c9cb5065855326",class:"sd-toast",role:"status","aria-live":"polite","aria-atomic":"true"},this.icon&&o("div",{key:"007eded85c508bdd2da05b1c9d489ff2d03a4df9",class:"sd-toast__icon"},o("sd-icon",{key:"099d5556f4b0a11f5162cb76a6166a2d662d9590",name:this.icon,size:s,color:e})),o("div",{key:"3825916248bc2385fe87c8aeb6d741b59738246f",class:"sd-toast__content"},o("span",{key:"fba817baf33179296f50d3fe4147cc99c38fbb83",class:"sd-toast__message"},this.message)),this.link&&o("a",{key:"39667765a9a72c761f0b464f78c7652e60e6dd16",href:this.link,class:"sd-toast__link",target:"_blank",rel:"noopener noreferrer"},this.linkLabel||this.link),this.buttonLabel&&o("sd-button",{key:"3da2f9a5daf53de4400bfec79654b5795c3b6af4",class:"sd-toast__button",name:i,label:this.buttonLabel,onSdClick:t=>this.buttonClick.emit(t.detail)}),this.useClose&&o("sd-ghost-button",{key:"2578d35dc11e06178c6902cb358bcdb8ccabbf36",class:"sd-toast__close",icon:"close",intent:n?"default":"inverse",ariaLabel:"close",size:"xs",onClick:()=>this.close.emit()})))}static get style(){return"sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:500;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-link, var(--sd-toast-text));text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px;white-space:nowrap}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__close{flex-shrink:0}"}},[512,"sd-toast",{icon:[1],message:[1],link:[1],linkLabel:[1,"link-label"],buttonLabel:[1,"button-label"],useClose:[4,"use-close"],type:[1]}]);function _(){"undefined"!=typeof customElements&&["sd-toast","sd-button","sd-ghost-button","sd-icon"].forEach((t=>{switch(t){case"sd-toast":customElements.get(a(t))||customElements.define(a(t),m);break;case"sd-button":customElements.get(a(t))||n();break;case"sd-ghost-button":customElements.get(a(t))||i();break;case"sd-icon":customElements.get(a(t))||d()}}))}export{m as S,_ as d}
1
+ import{p as t,H as s,c as e,h as o,t as a}from"./p-pwNG5WaX.js";import{d as n}from"./p-B6L3bPm2.js";import{d as i}from"./p-DhtKHJ7-.js";import{d}from"./p-DQj-S8AC.js";var c={bg:"#07284A",content:"#FFFFFF"},l={bg:"#FB4444",content:"#FFFFFF"},r={bg:"#FFC700",content:"#222222"},b={bg:"#00973C",content:"#FFFFFF"},f={bg:"#005CC9",content:"#FFFFFF"},u={bg:"#E6F1FF",icon:"#0075FF",text:"#222222",textLink:"#555555"};const p={default:"secondary_sm",danger:"danger_outline_sm",caution:"neutral_outline_sm",complete:"neutral_outline_sm",accent:"neutral_outline_sm",info:"secondary_sm"},h={default:{bg:c.bg,content:c.content},danger:{bg:l.bg,content:l.content},caution:{bg:r.bg,content:r.content},complete:{bg:b.bg,content:b.content},accent:{bg:f.bg,content:f.content},info:{bg:u.bg,content:u.text,icon:u.icon,linkColor:u.textLink}},g={iconSize:"16"},m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=e(this,"sdClose",7),this.buttonClick=e(this,"sdButtonClick",7)}icon;message;link;linkLabel;buttonLabel;useClose=!1;type="default";close;buttonClick;render(){const t=h[this.type]??h.default,s=Number(g.iconSize),e=t.icon??t.content,a=t.linkColor??t.content,n=["default","caution","info"].includes(this.type),i=p[this.type]??p.default;return o("div",{key:"735fa3f949ee4c7d0178f999c02e90c829c133b4",style:{"--sd-toast-bg":t.bg,"--sd-toast-text":t.content,"--sd-toast-icon":e,"--sd-toast-link":a}},o("div",{key:"4e483d858c3268bde838ddc5c5c9cb5065855326",class:"sd-toast",role:"status","aria-live":"polite","aria-atomic":"true"},this.icon&&o("div",{key:"007eded85c508bdd2da05b1c9d489ff2d03a4df9",class:"sd-toast__icon"},o("sd-icon",{key:"099d5556f4b0a11f5162cb76a6166a2d662d9590",name:this.icon,size:s,color:e})),o("div",{key:"3825916248bc2385fe87c8aeb6d741b59738246f",class:"sd-toast__content"},o("span",{key:"fba817baf33179296f50d3fe4147cc99c38fbb83",class:"sd-toast__message"},this.message)),this.link&&o("a",{key:"39667765a9a72c761f0b464f78c7652e60e6dd16",href:this.link,class:"sd-toast__link",target:"_blank",rel:"noopener noreferrer"},this.linkLabel||this.link),this.buttonLabel&&o("sd-button",{key:"3da2f9a5daf53de4400bfec79654b5795c3b6af4",class:"sd-toast__button",name:i,label:this.buttonLabel,onSdClick:t=>this.buttonClick.emit(t.detail)}),this.useClose&&o("sd-ghost-button",{key:"2578d35dc11e06178c6902cb358bcdb8ccabbf36",class:"sd-toast__close",icon:"close",intent:n?"default":"inverse",ariaLabel:"close",size:"xs",onClick:()=>this.close.emit()})))}static get style(){return"sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:500;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-link, var(--sd-toast-text));text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px;white-space:nowrap}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__close{flex-shrink:0}"}},[512,"sd-toast",{icon:[1],message:[1],link:[1],linkLabel:[1,"link-label"],buttonLabel:[1,"button-label"],useClose:[4,"use-close"],type:[1]}]);function _(){"undefined"!=typeof customElements&&["sd-toast","sd-button","sd-ghost-button","sd-icon"].forEach((t=>{switch(t){case"sd-toast":customElements.get(a(t))||customElements.define(a(t),m);break;case"sd-button":customElements.get(a(t))||n();break;case"sd-ghost-button":customElements.get(a(t))||i();break;case"sd-icon":customElements.get(a(t))||d()}}))}export{m as S,_ as d}
@@ -1 +1 @@
1
- import{p as d,H as r,c as i,h as o,t as e}from"./p-pwNG5WaX.js";import{d as a}from"./p-BYRvYsiC.js";const s=d(class extends r{constructor(d){super(),!1!==d&&this.__registerHost(),this.change=i(this,"sdUpdate",7)}value;options=[];direction="vertical";disabled=!1;groupName;change;valueChanged(d){this.value=d}handleRadioChange=d=>{if(this.disabled)return;const r=this.options.find((r=>String(r.value)===String(d))),i=r?r.value:d;this.value=i,this.change?.emit(i)};getGroupClasses(){return["sd-radio-group",`sd-radio-group--${this.direction??"vertical"}`].join(" ")}render(){return o("div",{key:"3bb952a72d5bccd1ad4842d9554efe6c69829773",class:this.getGroupClasses(),role:"radiogroup"},this.options.map((d=>o("sd-radio",{key:`radio-${d.value}`,val:String(d.value),value:String(this.value),label:d.label,disabled:this.disabled||!!d.disabled,onSdUpdate:({detail:d})=>this.handleRadioChange(d)}))))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height)}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}'}},[512,"sd-radio-group",{value:[1032],options:[1040],direction:[1],disabled:[4],groupName:[1,"group-name"]},void 0,{value:[{valueChanged:0}]}]);function t(){"undefined"!=typeof customElements&&["sd-radio-group","sd-radio"].forEach((d=>{switch(d){case"sd-radio-group":customElements.get(e(d))||customElements.define(e(d),s);break;case"sd-radio":customElements.get(e(d))||a()}}))}export{s as S,t as d}
1
+ import{p as d,H as r,c as i,h as o,t as a}from"./p-pwNG5WaX.js";import{d as e}from"./p-CTuKWVTh.js";const s=d(class extends r{constructor(d){super(),!1!==d&&this.__registerHost(),this.change=i(this,"sdUpdate",7)}value;options=[];direction="vertical";disabled=!1;groupName;change;valueChanged(d){this.value=d}handleRadioChange=d=>{if(this.disabled)return;const r=this.options.find((r=>String(r.value)===String(d))),i=r?r.value:d;this.value=i,this.change?.emit(i)};getGroupClasses(){return["sd-radio-group",`sd-radio-group--${this.direction??"vertical"}`].join(" ")}render(){return o("div",{key:"d60a7fed2bbe1cd2d577827b10c99627aabbda66",class:this.getGroupClasses(),role:"radiogroup"},this.options.map((d=>o("sd-radio",{key:`radio-${d.value}`,val:String(d.value),value:String(this.value),label:d.label,disabled:this.disabled||!!d.disabled,onSdUpdate:({detail:d})=>this.handleRadioChange(d)}))))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height)}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}'}},[512,"sd-radio-group",{value:[1032],options:[1040],direction:[1],disabled:[4],groupName:[1,"group-name"]},void 0,{value:[{valueChanged:0}]}]);function t(){"undefined"!=typeof customElements&&["sd-radio-group","sd-radio"].forEach((d=>{switch(d){case"sd-radio-group":customElements.get(a(d))||customElements.define(a(d),s);break;case"sd-radio":customElements.get(a(d))||e()}}))}export{s as S,t as d}
@@ -1 +1 @@
1
- import{p as e,H as a,c as r,h as n,F as d,t}from"./p-pwNG5WaX.js";import{u as i,t as c,W as s,C as l}from"./p-DnW8EAqd.js";import{d as g}from"./p-BQn6le_Y.js";import{d as o}from"./p-DfKa36bs.js";import{d as h}from"./p-DQj-S8AC.js";const p=(e,a)=>{const[r,n,d]=e.split("-").map(Number),t=new Date(r,n-1,d);return t.setDate(t.getDate()+a),`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`},k={bg:g.datepicker.calendar.range.bg,height:g.datepicker.calendar.range.height,panelGap:g.datepicker.calendar.range.panelGap,divider:g.datepicker.calendar.range.divider},_=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.select=r(this,"sdSelect",7),this.viewChange=r(this,"sdViewChange",7)}value=null;selectable;maxRange;currentYear;currentMonth;pendingStart="";hoverDate="";displayValue=null;select;viewChange;dateUtil=i();componentWillLoad(){this.syncFromValue()}handleValueChange(){this.syncFromValue()}syncFromValue(){const e=this.value?.[0]||c,[a,r]=e.split("-").map(Number);this.currentYear=a,this.currentMonth=r,this.pendingStart="",this.hoverDate="",this.displayValue=this.value?[this.value[0],this.value[1]]:null}get rightYear(){return 12===this.currentMonth?this.currentYear+1:this.currentYear}get rightMonth(){return 12===this.currentMonth?1:this.currentMonth+1}formatDate(e,a,r){return`${e}-${String(a).padStart(2,"0")}-${String(r).padStart(2,"0")}`}buildCells(e,a){const r=new Date(e,a-1,1).getDay(),n=new Date(e,a,0).getDate(),d=1===a?12:a-1,t=1===a?e-1:e,i=new Date(t,d,0).getDate(),c=12===a?1:a+1,s=12===a?e+1:e,l=[];for(let e=r-1;e>=0;e--){const a=i-e;l.push({date:this.formatDate(t,d,a),day:a,inCurrentMonth:!1})}for(let r=1;r<=n;r++)l.push({date:this.formatDate(e,a,r),day:r,inCurrentMonth:!0});const g=(7-l.length%7)%7;for(let e=1;e<=g;e++)l.push({date:this.formatDate(s,c,e),day:e,inCurrentMonth:!1});return l}emitViewChange(){this.viewChange.emit({year:this.currentYear,month:this.currentMonth})}goPrevYear=e=>{e.stopPropagation(),this.currentYear-=1,this.emitViewChange()};goNextYear=e=>{e.stopPropagation(),this.currentYear+=1,this.emitViewChange()};goPrevMonth=e=>{e.stopPropagation();const{newYear:a,newMonth:r}=this.dateUtil.calculateYearMonth(this.currentYear,this.currentMonth,"prev");this.currentYear=a,this.currentMonth=r,this.emitViewChange()};goNextMonth=e=>{e.stopPropagation();const{newYear:a,newMonth:r}=this.dateUtil.calculateYearMonth(this.currentYear,this.currentMonth,"next");this.currentYear=a,this.currentMonth=r,this.emitViewChange()};goToday=e=>{e.stopPropagation();const[a,r]=c.split("-").map(Number);this.currentYear===a&&this.currentMonth===r||(this.currentYear=a,this.currentMonth=r,this.emitViewChange())};isDisabled(e){if(this.selectable){const[a,r]=this.selectable;if(null!=a&&""!==a&&e<a)return!0;if(null!=r&&""!==r&&e>r)return!0}if(null!=this.maxRange&&this.maxRange>0&&""!==this.pendingStart){const a=p(this.pendingStart,-this.maxRange),r=p(this.pendingStart,this.maxRange);if(e<a||e>r)return!0}return!1}handleDayClick(e){if(!e.inCurrentMonth)return;if(this.isDisabled(e.date))return;if(""===this.pendingStart||null!=this.displayValue&&""!==this.displayValue[0]&&""!==this.displayValue[1]||e.date<this.pendingStart)return this.pendingStart=e.date,this.displayValue=null,void(this.hoverDate="");const a=[this.pendingStart,e.date];this.pendingStart="",this.hoverDate="",this.displayValue=a,this.select.emit(a)}handleDayHover(e){e.inCurrentMonth&&""!==this.pendingStart&&(this.hoverDate=e.date)}getRangeState(e,a){if(!a)return{inRange:!1,isRangeStart:!1,isRangeEnd:!1,isSelectedEdge:!1};if(""!==this.pendingStart){const a=e===this.pendingStart,r=""!==this.hoverDate&&this.hoverDate>=this.pendingStart?this.hoverDate:"";return{inRange:""!==r&&e>this.pendingStart&&e<=r,isRangeStart:a,isRangeEnd:""!==r&&e===r,isSelectedEdge:a}}if(null!=this.displayValue&&""!==this.displayValue[0]&&""!==this.displayValue[1]){const[a,r]=this.displayValue,n=e===a,d=e===r;return{inRange:e>a&&e<r,isRangeStart:n,isRangeEnd:d,isSelectedEdge:n||d}}return{inRange:!1,isRangeStart:!1,isRangeEnd:!1,isSelectedEdge:!1}}renderHeader(e,a,r){const d=`${e}.${String(a).padStart(2,"0")}`;return n("div",{class:"sd-date-range-picker-calendar__header"},n("div",{class:"sd-date-range-picker-calendar__nav-group sd-date-range-picker-calendar__nav-group-month"},n("sd-ghost-button",{class:{"sd-date-range-picker-calendar__nav-placeholder":!r},ariaLabel:"prevMonth",size:"xxs",icon:"chevronLeft",onClick:this.goPrevMonth}),n("span",{class:"sd-date-range-picker-calendar__label sd-date-range-picker-calendar__label-month"},d),n("sd-ghost-button",{class:{"sd-date-range-picker-calendar__nav-placeholder":r},ariaLabel:"nextMonth",size:"xxs",icon:"chevronRight",onClick:this.goNextMonth})))}renderYearNav(){return n("div",{class:"sd-date-range-picker-calendar__top-bar"},n("div",{class:"sd-date-range-picker-calendar__year-nav"},n("sd-ghost-button",{ariaLabel:"prevYear",size:"xxs",icon:"chevronLeft",onClick:this.goPrevYear}),n("span",{class:"sd-date-range-picker-calendar__label"},this.currentYear),n("sd-ghost-button",{ariaLabel:"nextYear",size:"xxs",icon:"chevronRight",onClick:this.goNextYear})),n("button",{type:"button",class:"sd-date-range-picker-calendar__today-button",onClick:this.goToday},"오늘"))}renderPanel(e,a,r){const d=this.buildCells(e,a);return n("div",{class:"sd-date-range-picker-calendar__panel"},this.renderHeader(e,a,r),n("div",{class:"sd-date-range-picker-calendar__week"},s.map((e=>n("span",{key:e,class:"sd-date-range-picker-calendar__week-cell"},e)))),n("div",{class:"sd-date-range-picker-calendar__grid"},d.map((e=>{const{inRange:a,isRangeStart:r,isRangeEnd:d,isSelectedEdge:t}=this.getRangeState(e.date,e.inCurrentMonth),i=e.inCurrentMonth&&c===e.date,s=e.inCurrentMonth&&this.isDisabled(e.date);return n("button",{type:"button",key:e.date,class:{"sd-date-range-picker-calendar__day":!0,"sd-date-range-picker-calendar__day--empty":!e.inCurrentMonth,"sd-date-range-picker-calendar__day--today":i,"sd-date-range-picker-calendar__day--in-range":a,"sd-date-range-picker-calendar__day--range-start":r,"sd-date-range-picker-calendar__day--range-end":d,"sd-date-range-picker-calendar__day--selected":t,"sd-date-range-picker-calendar__day--disabled":s},disabled:!e.inCurrentMonth||s,tabindex:e.inCurrentMonth?void 0:-1,"aria-hidden":e.inCurrentMonth?void 0:"true",onClick:()=>this.handleDayClick(e),onMouseEnter:()=>this.handleDayHover(e)},n("span",{class:"sd-date-range-picker-calendar__day-circle"},e.inCurrentMonth?e.day:""))}))))}render(){return n(d,{key:"b4082936889d6bed77917d9b06aafa3c80d413a7"},n("div",{key:"baf10fa376bf32982816258f950edf65d5622a99",class:"sd-date-range-picker-calendar",style:{"--calendar-bg":l.bg,"--calendar-padding":`${l.paddingXY}px`,"--calendar-gap":`${l.gap}px`,"--calendar-radius":`${l.radius}px`,"--calendar-header-gap":`${l.header.gap}px`,"--calendar-header-divider":l.header.divider,"--calendar-header-font-size":`${l.header.fontSize}px`,"--calendar-header-line-height":`${l.header.lineHeight}px`,"--calendar-header-font-weight":l.header.fontWeight,"--calendar-week-font-size":`${l.week.fontSize}px`,"--calendar-week-line-height":`${l.week.lineHeight}px`,"--calendar-week-font-weight":l.week.fontWeight,"--calendar-week-color":l.week.color,"--calendar-grid-row-gap":`${l.grid.rowGap}px`,"--calendar-day-size":`${l.day.size}px`,"--calendar-day-circle-size":`${l.day.circleSize}px`,"--calendar-day-circle-radius":`${l.day.circleRadius}px`,"--calendar-day-text":l.day.defaultText,"--calendar-day-hover-text":l.day.hoverText,"--calendar-day-hover-border":l.day.hoverBorder,"--calendar-day-select-bg":l.day.selectBg,"--calendar-day-select-text":l.day.selectText,"--calendar-day-disabled-text":l.day.disabledText,"--calendar-day-font-size":`${l.day.fontSize}px`,"--calendar-day-line-height":`${l.day.lineHeight}px`,"--calendar-day-font-weight":l.day.fontWeight,"--range-bg":k.bg,"--range-height":`${k.height}px`,"--range-panel-gap":`${k.panelGap}px`,"--range-divider":k.divider}},this.renderYearNav(),n("div",{key:"bacc88f756b64f4382b1c8c648269bb2c233dc54",class:"sd-date-range-picker-calendar__panels"},this.renderPanel(this.currentYear,this.currentMonth,!0),n("span",{key:"dcebf3cd120e2e606784c365c309d4c48296a5ae",class:"sd-date-range-picker-calendar__divider","aria-hidden":"true"}),this.renderPanel(this.rightYear,this.rightMonth,!1))))}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return"sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}"}},[512,"sd-date-range-picker-calendar",{value:[16],selectable:[16],maxRange:[2,"max-range"],currentYear:[32],currentMonth:[32],pendingStart:[32],hoverDate:[32],displayValue:[32]},void 0,{value:[{handleValueChange:0}]}]);function u(){"undefined"!=typeof customElements&&["sd-date-range-picker-calendar","sd-ghost-button","sd-icon"].forEach((e=>{switch(e){case"sd-date-range-picker-calendar":customElements.get(t(e))||customElements.define(t(e),_);break;case"sd-ghost-button":customElements.get(t(e))||o();break;case"sd-icon":customElements.get(t(e))||h()}}))}export{_ as S,u as d}
1
+ import{p as e,H as a,c as r,h as n,F as d,t}from"./p-pwNG5WaX.js";import{u as i,t as c,W as s,C as l}from"./p-DnW8EAqd.js";import{d as g}from"./p-BQn6le_Y.js";import{d as o}from"./p-DhtKHJ7-.js";import{d as h}from"./p-DQj-S8AC.js";const p=(e,a)=>{const[r,n,d]=e.split("-").map(Number),t=new Date(r,n-1,d);return t.setDate(t.getDate()+a),`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`},k={bg:g.datepicker.calendar.range.bg,height:g.datepicker.calendar.range.height,panelGap:g.datepicker.calendar.range.panelGap,divider:g.datepicker.calendar.range.divider},_=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.select=r(this,"sdSelect",7),this.viewChange=r(this,"sdViewChange",7)}value=null;selectable;maxRange;currentYear;currentMonth;pendingStart="";hoverDate="";displayValue=null;select;viewChange;dateUtil=i();componentWillLoad(){this.syncFromValue()}handleValueChange(){this.syncFromValue()}syncFromValue(){const e=this.value?.[0]||c,[a,r]=e.split("-").map(Number);this.currentYear=a,this.currentMonth=r,this.pendingStart="",this.hoverDate="",this.displayValue=this.value?[this.value[0],this.value[1]]:null}get rightYear(){return 12===this.currentMonth?this.currentYear+1:this.currentYear}get rightMonth(){return 12===this.currentMonth?1:this.currentMonth+1}formatDate(e,a,r){return`${e}-${String(a).padStart(2,"0")}-${String(r).padStart(2,"0")}`}buildCells(e,a){const r=new Date(e,a-1,1).getDay(),n=new Date(e,a,0).getDate(),d=1===a?12:a-1,t=1===a?e-1:e,i=new Date(t,d,0).getDate(),c=12===a?1:a+1,s=12===a?e+1:e,l=[];for(let e=r-1;e>=0;e--){const a=i-e;l.push({date:this.formatDate(t,d,a),day:a,inCurrentMonth:!1})}for(let r=1;r<=n;r++)l.push({date:this.formatDate(e,a,r),day:r,inCurrentMonth:!0});const g=(7-l.length%7)%7;for(let e=1;e<=g;e++)l.push({date:this.formatDate(s,c,e),day:e,inCurrentMonth:!1});return l}emitViewChange(){this.viewChange.emit({year:this.currentYear,month:this.currentMonth})}goPrevYear=e=>{e.stopPropagation(),this.currentYear-=1,this.emitViewChange()};goNextYear=e=>{e.stopPropagation(),this.currentYear+=1,this.emitViewChange()};goPrevMonth=e=>{e.stopPropagation();const{newYear:a,newMonth:r}=this.dateUtil.calculateYearMonth(this.currentYear,this.currentMonth,"prev");this.currentYear=a,this.currentMonth=r,this.emitViewChange()};goNextMonth=e=>{e.stopPropagation();const{newYear:a,newMonth:r}=this.dateUtil.calculateYearMonth(this.currentYear,this.currentMonth,"next");this.currentYear=a,this.currentMonth=r,this.emitViewChange()};goToday=e=>{e.stopPropagation();const[a,r]=c.split("-").map(Number);this.currentYear===a&&this.currentMonth===r||(this.currentYear=a,this.currentMonth=r,this.emitViewChange())};isDisabled(e){if(this.selectable){const[a,r]=this.selectable;if(null!=a&&""!==a&&e<a)return!0;if(null!=r&&""!==r&&e>r)return!0}if(null!=this.maxRange&&this.maxRange>0&&""!==this.pendingStart){const a=p(this.pendingStart,-this.maxRange),r=p(this.pendingStart,this.maxRange);if(e<a||e>r)return!0}return!1}handleDayClick(e){if(!e.inCurrentMonth)return;if(this.isDisabled(e.date))return;if(""===this.pendingStart||null!=this.displayValue&&""!==this.displayValue[0]&&""!==this.displayValue[1]||e.date<this.pendingStart)return this.pendingStart=e.date,this.displayValue=null,void(this.hoverDate="");const a=[this.pendingStart,e.date];this.pendingStart="",this.hoverDate="",this.displayValue=a,this.select.emit(a)}handleDayHover(e){e.inCurrentMonth&&""!==this.pendingStart&&(this.hoverDate=e.date)}getRangeState(e,a){if(!a)return{inRange:!1,isRangeStart:!1,isRangeEnd:!1,isSelectedEdge:!1};if(""!==this.pendingStart){const a=e===this.pendingStart,r=""!==this.hoverDate&&this.hoverDate>=this.pendingStart?this.hoverDate:"";return{inRange:""!==r&&e>this.pendingStart&&e<=r,isRangeStart:a,isRangeEnd:""!==r&&e===r,isSelectedEdge:a}}if(null!=this.displayValue&&""!==this.displayValue[0]&&""!==this.displayValue[1]){const[a,r]=this.displayValue,n=e===a,d=e===r;return{inRange:e>a&&e<r,isRangeStart:n,isRangeEnd:d,isSelectedEdge:n||d}}return{inRange:!1,isRangeStart:!1,isRangeEnd:!1,isSelectedEdge:!1}}renderHeader(e,a,r){const d=`${e}.${String(a).padStart(2,"0")}`;return n("div",{class:"sd-date-range-picker-calendar__header"},n("div",{class:"sd-date-range-picker-calendar__nav-group sd-date-range-picker-calendar__nav-group-month"},n("sd-ghost-button",{class:{"sd-date-range-picker-calendar__nav-placeholder":!r},ariaLabel:"prevMonth",size:"xxs",icon:"chevronLeft",onClick:this.goPrevMonth}),n("span",{class:"sd-date-range-picker-calendar__label sd-date-range-picker-calendar__label-month"},d),n("sd-ghost-button",{class:{"sd-date-range-picker-calendar__nav-placeholder":r},ariaLabel:"nextMonth",size:"xxs",icon:"chevronRight",onClick:this.goNextMonth})))}renderYearNav(){return n("div",{class:"sd-date-range-picker-calendar__top-bar"},n("div",{class:"sd-date-range-picker-calendar__year-nav"},n("sd-ghost-button",{ariaLabel:"prevYear",size:"xxs",icon:"chevronLeft",onClick:this.goPrevYear}),n("span",{class:"sd-date-range-picker-calendar__label"},this.currentYear),n("sd-ghost-button",{ariaLabel:"nextYear",size:"xxs",icon:"chevronRight",onClick:this.goNextYear})),n("button",{type:"button",class:"sd-date-range-picker-calendar__today-button",onClick:this.goToday},"오늘"))}renderPanel(e,a,r){const d=this.buildCells(e,a);return n("div",{class:"sd-date-range-picker-calendar__panel"},this.renderHeader(e,a,r),n("div",{class:"sd-date-range-picker-calendar__week"},s.map((e=>n("span",{key:e,class:"sd-date-range-picker-calendar__week-cell"},e)))),n("div",{class:"sd-date-range-picker-calendar__grid"},d.map((e=>{const{inRange:a,isRangeStart:r,isRangeEnd:d,isSelectedEdge:t}=this.getRangeState(e.date,e.inCurrentMonth),i=e.inCurrentMonth&&c===e.date,s=e.inCurrentMonth&&this.isDisabled(e.date);return n("button",{type:"button",key:e.date,class:{"sd-date-range-picker-calendar__day":!0,"sd-date-range-picker-calendar__day--empty":!e.inCurrentMonth,"sd-date-range-picker-calendar__day--today":i,"sd-date-range-picker-calendar__day--in-range":a,"sd-date-range-picker-calendar__day--range-start":r,"sd-date-range-picker-calendar__day--range-end":d,"sd-date-range-picker-calendar__day--selected":t,"sd-date-range-picker-calendar__day--disabled":s},disabled:!e.inCurrentMonth||s,tabindex:e.inCurrentMonth?void 0:-1,"aria-hidden":e.inCurrentMonth?void 0:"true",onClick:()=>this.handleDayClick(e),onMouseEnter:()=>this.handleDayHover(e)},n("span",{class:"sd-date-range-picker-calendar__day-circle"},e.inCurrentMonth?e.day:""))}))))}render(){return n(d,{key:"a9e5bc8198cfda50227069661812341e7a19b21d"},n("div",{key:"a2c5bf6ae806fc24f421cb6b52323f4e92bfc255",class:"sd-date-range-picker-calendar",style:{"--calendar-bg":l.bg,"--calendar-padding":`${l.paddingXY}px`,"--calendar-gap":`${l.gap}px`,"--calendar-radius":`${l.radius}px`,"--calendar-header-gap":`${l.header.gap}px`,"--calendar-header-divider":l.header.divider,"--calendar-header-font-size":`${l.header.fontSize}px`,"--calendar-header-line-height":`${l.header.lineHeight}px`,"--calendar-header-font-weight":l.header.fontWeight,"--calendar-week-font-size":`${l.week.fontSize}px`,"--calendar-week-line-height":`${l.week.lineHeight}px`,"--calendar-week-font-weight":l.week.fontWeight,"--calendar-week-color":l.week.color,"--calendar-grid-row-gap":`${l.grid.rowGap}px`,"--calendar-day-size":`${l.day.size}px`,"--calendar-day-circle-size":`${l.day.circleSize}px`,"--calendar-day-circle-radius":`${l.day.circleRadius}px`,"--calendar-day-text":l.day.defaultText,"--calendar-day-hover-text":l.day.hoverText,"--calendar-day-hover-border":l.day.hoverBorder,"--calendar-day-select-bg":l.day.selectBg,"--calendar-day-select-text":l.day.selectText,"--calendar-day-disabled-text":l.day.disabledText,"--calendar-day-font-size":`${l.day.fontSize}px`,"--calendar-day-line-height":`${l.day.lineHeight}px`,"--calendar-day-font-weight":l.day.fontWeight,"--range-bg":k.bg,"--range-height":`${k.height}px`,"--range-panel-gap":`${k.panelGap}px`,"--range-divider":k.divider}},this.renderYearNav(),n("div",{key:"2575175fa3537e010e1c7d573428d5c8ebfae488",class:"sd-date-range-picker-calendar__panels"},this.renderPanel(this.currentYear,this.currentMonth,!0),n("span",{key:"bd43ac98b88665dbe85804c8b6345c19dca7d9fa",class:"sd-date-range-picker-calendar__divider","aria-hidden":"true"}),this.renderPanel(this.rightYear,this.rightMonth,!1))))}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return"sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}"}},[512,"sd-date-range-picker-calendar",{value:[16],selectable:[16],maxRange:[2,"max-range"],currentYear:[32],currentMonth:[32],pendingStart:[32],hoverDate:[32],displayValue:[32]},void 0,{value:[{handleValueChange:0}]}]);function u(){"undefined"!=typeof customElements&&["sd-date-range-picker-calendar","sd-ghost-button","sd-icon"].forEach((e=>{switch(e){case"sd-date-range-picker-calendar":customElements.get(t(e))||customElements.define(t(e),_);break;case"sd-ghost-button":customElements.get(t(e))||o();break;case"sd-icon":customElements.get(t(e))||h()}}))}export{_ as S,u as d}