@sellmate/design-system 0.0.25 → 0.0.26

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 (130) hide show
  1. package/dist/cjs/design-system.cjs.js +2 -2
  2. package/dist/cjs/{index-BjPOPvqs.js → index-DXo1Fhkn.js} +3 -3
  3. package/dist/cjs/index-DXo1Fhkn.js.map +1 -0
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/sd-badge.cjs.entry.js +1 -1
  6. 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-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -1
  7. package/dist/cjs/sd-button_12.cjs.entry.js +7 -7
  8. package/dist/cjs/sd-card.cjs.entry.js +1 -1
  9. package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
  10. package/dist/cjs/sd-date-picker.cjs.entry.js +1 -1
  11. package/dist/cjs/sd-date-range-picker.cjs.entry.js +1 -1
  12. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  13. package/dist/cjs/sd-select-multiple-group.cjs.entry.js +1 -1
  14. package/dist/cjs/sd-select-multiple.cjs.entry.js +1 -1
  15. package/dist/cjs/sd-select-option-group.cjs.entry.js +1 -1
  16. package/dist/cjs/sd-tag.cjs.entry.js +1 -1
  17. package/dist/cjs/{tooltipArrow-qwvq153k.js → tooltipArrow-DNiGFQNW.js} +3 -3
  18. package/dist/cjs/{tooltipArrow-qwvq153k.js.map → tooltipArrow-DNiGFQNW.js.map} +1 -1
  19. package/dist/collection/components/sd-tooltip/sd-tooltip.css +67 -1
  20. package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -5
  21. package/dist/collection/components/sd-tooltip/sd-tooltip.js.map +1 -1
  22. package/dist/components/index.js +1 -1
  23. package/dist/components/{p-Db_plCmk.js → p-B9QE7fbR.js} +4 -4
  24. package/dist/components/{p-Db_plCmk.js.map → p-B9QE7fbR.js.map} +1 -1
  25. package/dist/components/{p-CpfDowFL.js → p-BWF8FOjZ.js} +4 -4
  26. package/dist/components/{p-CpfDowFL.js.map → p-BWF8FOjZ.js.map} +1 -1
  27. package/dist/components/{p-_8cdZlN5.js → p-BhRUodRD.js} +13 -14
  28. package/dist/components/p-BhRUodRD.js.map +1 -0
  29. package/dist/components/{p-DzIffEfK.js → p-BtS3tSh2.js} +3 -3
  30. package/dist/components/{p-DzIffEfK.js.map → p-BtS3tSh2.js.map} +1 -1
  31. package/dist/components/{p-Ed1-kFCj.js → p-BttJlXkp.js} +5 -5
  32. package/dist/components/{p-Ed1-kFCj.js.map → p-BttJlXkp.js.map} +1 -1
  33. package/dist/components/{p-Bfro0I6y.js → p-BvuTaRpn.js} +3 -3
  34. package/dist/components/{p-Bfro0I6y.js.map → p-BvuTaRpn.js.map} +1 -1
  35. package/dist/components/{p-BHl-WJWF.js → p-CMFEznYN.js} +4 -4
  36. package/dist/components/{p-BHl-WJWF.js.map → p-CMFEznYN.js.map} +1 -1
  37. package/dist/components/{p-e74imoE0.js → p-Cafw-qR4.js} +3 -3
  38. package/dist/components/{p-e74imoE0.js.map → p-Cafw-qR4.js.map} +1 -1
  39. package/dist/components/{p-DzRr3BEe.js → p-CbnL1UUF.js} +3 -3
  40. package/dist/components/p-CbnL1UUF.js.map +1 -0
  41. package/dist/components/{p-Dar88QJr.js → p-CkHD07WH.js} +9 -9
  42. package/dist/components/{p-Dar88QJr.js.map → p-CkHD07WH.js.map} +1 -1
  43. package/dist/components/{p-BRrY7yTi.js → p-Cs1Kf3Tx.js} +3 -3
  44. package/dist/components/{p-BRrY7yTi.js.map → p-Cs1Kf3Tx.js.map} +1 -1
  45. package/dist/components/{p-D9gy3nk_.js → p-DWYqZdbI.js} +5 -5
  46. package/dist/components/{p-D9gy3nk_.js.map → p-DWYqZdbI.js.map} +1 -1
  47. package/dist/components/{p-B_lWW-k_.js → p-DtOWZESA.js} +3 -3
  48. package/dist/components/{p-B_lWW-k_.js.map → p-DtOWZESA.js.map} +1 -1
  49. package/dist/components/{p-B0qn2Tb-.js → p-hf6YF2Mx.js} +4 -4
  50. package/dist/components/{p-B0qn2Tb-.js.map → p-hf6YF2Mx.js.map} +1 -1
  51. package/dist/components/{p-BvOGkIDI.js → p-wA4KCOG0.js} +3 -3
  52. package/dist/components/{p-BvOGkIDI.js.map → p-wA4KCOG0.js.map} +1 -1
  53. package/dist/components/sd-badge.js +1 -1
  54. package/dist/components/sd-button.js +1 -1
  55. package/dist/components/sd-card.js +1 -1
  56. package/dist/components/sd-checkbox.js +1 -1
  57. package/dist/components/sd-date-box.js +1 -1
  58. package/dist/components/sd-date-picker.js +5 -5
  59. package/dist/components/sd-date-range-picker.js +5 -5
  60. package/dist/components/sd-guide.js +4 -4
  61. package/dist/components/sd-icon.js +1 -1
  62. package/dist/components/sd-input.js +1 -1
  63. package/dist/components/sd-pagination.js +1 -1
  64. package/dist/components/sd-popover.js +5 -5
  65. package/dist/components/sd-portal.js +1 -1
  66. package/dist/components/sd-select-multiple-group.js +7 -7
  67. package/dist/components/sd-select-multiple.js +7 -7
  68. package/dist/components/sd-select-option-group.js +1 -1
  69. package/dist/components/sd-select-option.js +1 -1
  70. package/dist/components/sd-select.js +1 -1
  71. package/dist/components/sd-table.js +11 -11
  72. package/dist/components/sd-tag.js +1 -1
  73. package/dist/components/sd-tooltip-portal.js +1 -1
  74. package/dist/components/sd-tooltip.js +1 -1
  75. package/dist/design-system/design-system.css +1 -1
  76. package/dist/design-system/design-system.esm.js +1 -1
  77. package/dist/design-system/{p-ffe8c43b.entry.js → p-054ae376.entry.js} +2 -2
  78. package/dist/design-system/{p-fcbeccb8.entry.js → p-12134716.entry.js} +2 -2
  79. package/dist/design-system/{p-7a71b770.entry.js → p-12b6c1a5.entry.js} +2 -2
  80. package/dist/design-system/{p-33ce46fa.entry.js → p-3d9fccae.entry.js} +2 -2
  81. package/dist/design-system/{p-691dc436.entry.js → p-871c8d66.entry.js} +2 -2
  82. package/dist/design-system/{p-dc35d827.entry.js → p-9975f6f3.entry.js} +2 -2
  83. package/dist/design-system/{p-dc35d827.entry.js.map → p-9975f6f3.entry.js.map} +1 -1
  84. package/dist/design-system/{p-CqOU6L62.js → p-B2T3tS5r.js} +3 -3
  85. package/dist/design-system/p-B2T3tS5r.js.map +1 -0
  86. package/dist/design-system/p-BE6EMCXm.js +2 -0
  87. package/dist/design-system/{p-BUzABVug.js.map → p-BE6EMCXm.js.map} +1 -1
  88. package/dist/design-system/{p-58257c45.entry.js → p-a7ab1b43.entry.js} +2 -2
  89. package/dist/design-system/{p-b6bb891c.entry.js → p-af3a1dbb.entry.js} +2 -2
  90. package/dist/design-system/{p-52365554.entry.js → p-d1aa75e7.entry.js} +2 -2
  91. package/dist/design-system/{p-f00fc7be.entry.js → p-e061c4f8.entry.js} +2 -2
  92. package/dist/design-system/{p-c96e287b.entry.js → p-e25d96e4.entry.js} +2 -2
  93. 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-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -1
  94. package/dist/esm/design-system.js +3 -3
  95. package/dist/esm/{index-CqOU6L62.js → index-B2T3tS5r.js} +3 -3
  96. package/dist/esm/index-B2T3tS5r.js.map +1 -0
  97. package/dist/esm/loader.js +3 -3
  98. package/dist/esm/sd-badge.entry.js +1 -1
  99. 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-tooltip.sd-tooltip-portal.entry.js.map +1 -1
  100. package/dist/esm/sd-button_12.entry.js +7 -7
  101. package/dist/esm/sd-card.entry.js +1 -1
  102. package/dist/esm/sd-date-box.entry.js +1 -1
  103. package/dist/esm/sd-date-picker.entry.js +1 -1
  104. package/dist/esm/sd-date-range-picker.entry.js +1 -1
  105. package/dist/esm/sd-popover.entry.js +2 -2
  106. package/dist/esm/sd-select-multiple-group.entry.js +1 -1
  107. package/dist/esm/sd-select-multiple.entry.js +1 -1
  108. package/dist/esm/sd-select-option-group.entry.js +1 -1
  109. package/dist/esm/sd-tag.entry.js +1 -1
  110. package/dist/esm/{tooltipArrow-hOEWkZyH.js → tooltipArrow-Pa2XQhpp.js} +3 -3
  111. package/dist/esm/{tooltipArrow-hOEWkZyH.js.map → tooltipArrow-Pa2XQhpp.js.map} +1 -1
  112. package/hydrate/index.js +6 -6
  113. package/hydrate/index.mjs +6 -6
  114. package/package.json +2 -2
  115. package/dist/cjs/index-BjPOPvqs.js.map +0 -1
  116. package/dist/components/p-DzRr3BEe.js.map +0 -1
  117. package/dist/components/p-_8cdZlN5.js.map +0 -1
  118. package/dist/design-system/p-BUzABVug.js +0 -2
  119. package/dist/design-system/p-CqOU6L62.js.map +0 -1
  120. package/dist/esm/index-CqOU6L62.js.map +0 -1
  121. /package/dist/design-system/{p-ffe8c43b.entry.js.map → p-054ae376.entry.js.map} +0 -0
  122. /package/dist/design-system/{p-fcbeccb8.entry.js.map → p-12134716.entry.js.map} +0 -0
  123. /package/dist/design-system/{p-7a71b770.entry.js.map → p-12b6c1a5.entry.js.map} +0 -0
  124. /package/dist/design-system/{p-33ce46fa.entry.js.map → p-3d9fccae.entry.js.map} +0 -0
  125. /package/dist/design-system/{p-691dc436.entry.js.map → p-871c8d66.entry.js.map} +0 -0
  126. /package/dist/design-system/{p-58257c45.entry.js.map → p-a7ab1b43.entry.js.map} +0 -0
  127. /package/dist/design-system/{p-b6bb891c.entry.js.map → p-af3a1dbb.entry.js.map} +0 -0
  128. /package/dist/design-system/{p-52365554.entry.js.map → p-d1aa75e7.entry.js.map} +0 -0
  129. /package/dist/design-system/{p-f00fc7be.entry.js.map → p-e061c4f8.entry.js.map} +0 -0
  130. /package/dist/design-system/{p-c96e287b.entry.js.map → p-e25d96e4.entry.js.map} +0 -0
@@ -1,10 +1,10 @@
1
- import { p as proxyCustomElement, d as createEvent, h, c as Host } from './p-DzRr3BEe.js';
2
- import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-Bfro0I6y.js';
3
- import { d as defineCustomElement$5 } from './p-CpfDowFL.js';
4
- import { d as defineCustomElement$4 } from './p-DzIffEfK.js';
5
- import { d as defineCustomElement$3 } from './p-Db_plCmk.js';
6
- import { d as defineCustomElement$2 } from './p-B_lWW-k_.js';
7
- import { d as defineCustomElement$1 } from './p-Ed1-kFCj.js';
1
+ import { p as proxyCustomElement, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
2
+ import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-BvuTaRpn.js';
3
+ import { d as defineCustomElement$5 } from './p-BWF8FOjZ.js';
4
+ import { d as defineCustomElement$4 } from './p-BtS3tSh2.js';
5
+ import { d as defineCustomElement$3 } from './p-B9QE7fbR.js';
6
+ import { d as defineCustomElement$2 } from './p-DtOWZESA.js';
7
+ import { d as defineCustomElement$1 } from './p-BttJlXkp.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-Dar88QJr.js.map
321
+ //# sourceMappingURL=p-CkHD07WH.js.map
322
322
 
323
- //# sourceMappingURL=p-Dar88QJr.js.map
323
+ //# sourceMappingURL=p-CkHD07WH.js.map
@@ -1 +1 @@
1
- {"file":"p-Dar88QJr.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';\r\n@import 'extend';\r\n\r\n.sd-select {\r\n display: flex;\r\n width: var(--select-width, 200px);\r\n height: 28px;\r\n position: relative;\r\n color: $grey_90;\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select--disabled) {\r\n background: $grey_10;\r\n }\r\n\r\n &.sd-select--disabled {\r\n cursor: not-allowed;\r\n background-color: $grey_20;\r\n border-color: $grey_45;\r\n\r\n .sd-select__label {\r\n border-right: 1px solid $grey_45;\r\n }\r\n\r\n .sd-select__trigger {\r\n color: $grey_65;\r\n &:focus,\r\n &:focus-visible,\r\n &:focus-within {\r\n outline: none !important;\r\n }\r\n }\r\n }\r\n\r\n &__label {\r\n font-size: 12px;\r\n line-height: 20px;\r\n font-weight: 500;\r\n color: $grey_90;\r\n padding: 4px 12px;\r\n border-right: 1px solid $grey_45;\r\n border-radius: 4px 0 0 4px;\r\n background-color: $grey_10;\r\n display: inline-block;\r\n white-space: nowrap;\r\n }\r\n\r\n &__container {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n\r\n .sd-select__trigger {\r\n padding: 4px 20px 4px 12px;\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n\r\n .sd-select__value {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n line-height: 20px;\r\n font-size: 12px;\r\n font-weight: 400;\r\n text-align: left;\r\n }\r\n\r\n .sd-select__clear {\r\n margin: 0 4px;\r\n width: 8px;\r\n height: 8px;\r\n background-color: transparent;\r\n outline: none;\r\n border: none;\r\n }\r\n }\r\n\r\n .sd-select__arrow {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n width: 12px;\r\n height: 12px;\r\n color: $grey_65;\r\n transition: transform 0.3s ease;\r\n\r\n &--open {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-select__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-dropdown-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n color: $grey_90;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .sd-select__search-container {\r\n position: sticky;\r\n top: 0;\r\n display: flex;\r\n width: 100%;\r\n background-color: white;\r\n align-items: center;\r\n padding: 4px 8px;\r\n\r\n &--scrolled {\r\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n }\r\n\r\n .sd-select__option-placeholder {\r\n padding: 4px 12px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: left;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string | number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item';\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: SelectGroupOptionType;\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n value: string | number | null;\r\n option: SelectOption | null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\r\n sdChange: SelectOption[] | null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string | number | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n const selectedOption = this.getSelectedOption();\r\n this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n this.filteredOptions = this.options;\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n if (this.itemIndex === -1) {\r\n searchInput?.focus();\r\n return;\r\n } else if (searchInput?.matches(':focus')) {\r\n searchInput?.blur();\r\n }\r\n }\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (!currentItem || !this.isOpen) return;\r\n\r\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n if (isOptionDisabled) {\r\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n return;\r\n }\r\n\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n this.filteredOptions = this.options;\r\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n this.onDropdownToggle(this.isOpen);\r\n\r\n const selectedOption = this.getSelectedOption();\r\n if (!selectedOption) {\r\n this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;\r\n } else {\r\n this.itemIndex = this.options.indexOf(selectedOption);\r\n }\r\n\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n if (this.isOpen === false) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n searchInput?.focus();\r\n }\r\n\r\n if (!currentItem) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n if (!this.selectRef?.contains(event.target as Node)) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n keyboardEvent.stopPropagation();\r\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n keyboardEvent.preventDefault();\r\n switch (keyboardEvent.key) {\r\n case 'ArrowDown':\r\n case 'ArrowUp':\r\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n this.itemIndex = nextIndex;\r\n break;\r\n case 'Enter':\r\n const selectedOption = this.filteredOptions[this.itemIndex];\r\n if (selectedOption && !selectedOption.disabled) {\r\n this.value = selectedOption.value;\r\n this.searchText = null;\r\n this.isOpen = false;\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.isOpen = !this.isOpen;\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n const { option, event } = detail;\r\n event.stopPropagation();\r\n\r\n if (!option.disabled) {\r\n this.value = option.value;\r\n this.isOpen = false;\r\n }\r\n };\r\n\r\n private filterOptions() {\r\n if (!this.searchText || this.searchText.trim() === '') {\r\n // 검색어가 없으면 전체 옵션 표시\r\n this.filteredOptions = this.options;\r\n } else {\r\n // 검색어가 있으면 필터링\r\n this.filteredOptions = this.options.filter(option =>\r\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n );\r\n }\r\n }\r\n\r\n private getSelectedOption(): SelectOption | undefined {\r\n return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n const target = event.target as HTMLElement;\r\n const scrollTop = target.scrollTop;\r\n\r\n // 스크롤이 조금이라도 되면 그림자 표시\r\n this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n if (this.searchRef) {\r\n return this.searchRef.getNativeElement();\r\n }\r\n return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n if (!this.dropdownRef || !optionElement) return;\r\n\r\n const dropdown = this.dropdownRef;\r\n const optionTop = optionElement.offsetTop;\r\n const optionHeight = optionElement.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n const visibleTop = dropdownScrollTop + searchOffset;\r\n const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n if (optionTop < visibleTop) {\r\n dropdown.scrollTop = optionTop - searchOffset;\r\n } else if (optionTop + optionHeight > visibleBottom) {\r\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n }\r\n }\r\n\r\n // render method\r\n render() {\r\n const style = {\r\n '--select-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n\r\n return (\r\n <Host style={style}>\r\n <div\r\n class={{\r\n 'sd-select': true,\r\n 'sd-select--open': this.isOpen,\r\n 'sd-select--disabled': this.disabled,\r\n }}\r\n ref={el => (this.selectRef = el)}\r\n >\r\n {this.renderLabel(this.label)}\r\n <div class=\"sd-select__container\">\r\n {this.renderTrigger()}\r\n {this.renderDropdown()}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n if (!label) return null;\r\n\r\n return <label class=\"sd-select__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n const selectedOption = this.getSelectedOption();\r\n return (\r\n <div\r\n class=\"sd-select__trigger\"\r\n tabindex={this.disabled ? -1 : 0}\r\n onClick={this.handleTriggerClick}\r\n >\r\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n {this.clearable && selectedOption && !this.disabled && (\r\n <sd-icon\r\n key=\"clear-icon\"\r\n name=\"close\"\r\n size={10}\r\n color=\"#888\"\r\n class=\"sd-select__clear\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n this.value = null;\r\n }}\r\n ></sd-icon>\r\n )}\r\n\r\n <sd-icon\r\n key=\"arrow-icon\"\r\n name=\"arrowDown\"\r\n color=\"#888\"\r\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n ></sd-icon>\r\n </div>\r\n );\r\n }\r\n\r\n private renderDropdown() {\r\n const style = {\r\n '--select-dropdown-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n if (this.isOpen === false) return null;\r\n\r\n return (\r\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n <div\r\n class=\"sd-select__dropdown\"\r\n style={style}\r\n onScroll={this.handleDropdownScroll}\r\n ref={el => (this.dropdownRef = el)}\r\n >\r\n {this.searchable && (\r\n <div\r\n class={{\r\n 'sd-select__search-container': true,\r\n 'sd-select__search-container--scrolled': this.isScrolled,\r\n }}\r\n onClick={event => event.stopPropagation()}\r\n >\r\n <sd-input\r\n ref={el => (this.searchRef = el)}\r\n value={this.searchText}\r\n placeholder=\"검색\"\r\n clearable\r\n inputStyle={{ 'padding-left': '8px' }}\r\n autofocus\r\n onSdInput={event => {\r\n this.searchText = String(event?.detail);\r\n }}\r\n onSdFocus={() => {\r\n this.itemIndex = -1;\r\n }}\r\n >\r\n <sd-icon\r\n name=\"search\"\r\n size={16}\r\n color=\"#737373\"\r\n style={{ marginRight: '4px' }}\r\n slot=\"prefix\"\r\n ></sd-icon>\r\n </sd-input>\r\n </div>\r\n )}\r\n {this.filteredOptions.length > 0 ? (\r\n this.filteredOptions.map((option, index) => (\r\n <slot name={`option-${option.value}`}>\r\n <sd-select-option\r\n option={option}\r\n index={index}\r\n isSelected={option.value === this.value}\r\n isFocused={index === this.itemIndex}\r\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n ></sd-select-option>\r\n </slot>\r\n ))\r\n ) : (\r\n <slot name=\"option-placeholder\">\r\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\r\n </slot>\r\n )}\r\n </div>\r\n </sd-portal>\r\n );\r\n }\r\n}\r\n\r\n{\r\n /*\r\n <sd-select id=\"select-1\">\r\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n </sd-select>\r\n <sd-select id=\"select-2\"> </sd-select>\r\n <sd-select id=\"select-3\" searchable clearable>\r\n <div slot=\"option-3\">test</div>\r\n </sd-select>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const select1 = document.getElementById('select-1');\r\n const select2 = document.getElementById('select-2');\r\n const select3 = document.getElementById('select-3');\r\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n select1.optionPlaceholder = 'No options available';\r\n\r\n const options = [\r\n { label: 'Option 1', value: '1' },\r\n { label: 'Option 2', value: '2' },\r\n { label: 'Option 3', value: '3', disabled: true },\r\n { label: 'Option 4', value: '4' },\r\n { label: 'Option 5', value: '5' },\r\n { label: 'Option 6', value: '6' },\r\n { label: 'Option 7', value: '7', disabled: true },\r\n { label: 'Option 8', value: '8' },\r\n { label: 'Option 9', value: '9' },\r\n { label: 'Option 10', value: '10' },\r\n { label: 'Option 11', value: '11', disabled: true },\r\n { label: 'Option 12', value: '12' },\r\n { label: 'Option 13', value: '13' },\r\n { label: 'Option 14', value: '14' },\r\n { label: 'Option 15', value: '15', disabled: true },\r\n { label: 'Option 16', value: '16' },\r\n { label: 'Option 17', value: '17' },\r\n { label: 'Option 18', value: '18' },\r\n { label: 'Option 19', value: '19', disabled: true },\r\n { label: 'Option 20', value: '20' },\r\n { label: 'Option 21', value: '21' },\r\n { label: 'Option 22', value: '22' },\r\n { label: 'Option 23', value: '23', disabled: true },\r\n { label: 'Option 24', value: '24' },\r\n ];\r\n\r\n select2.options = options;\r\n select3.options = options;\r\n });\r\n </script>\r\n\r\n */\r\n}\r\n"],"version":3}
1
+ {"file":"p-CkHD07WH.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';\r\n@import 'extend';\r\n\r\n.sd-select {\r\n display: flex;\r\n width: var(--select-width, 200px);\r\n height: 28px;\r\n position: relative;\r\n color: $grey_90;\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select--disabled) {\r\n background: $grey_10;\r\n }\r\n\r\n &.sd-select--disabled {\r\n cursor: not-allowed;\r\n background-color: $grey_20;\r\n border-color: $grey_45;\r\n\r\n .sd-select__label {\r\n border-right: 1px solid $grey_45;\r\n }\r\n\r\n .sd-select__trigger {\r\n color: $grey_65;\r\n &:focus,\r\n &:focus-visible,\r\n &:focus-within {\r\n outline: none !important;\r\n }\r\n }\r\n }\r\n\r\n &__label {\r\n font-size: 12px;\r\n line-height: 20px;\r\n font-weight: 500;\r\n color: $grey_90;\r\n padding: 4px 12px;\r\n border-right: 1px solid $grey_45;\r\n border-radius: 4px 0 0 4px;\r\n background-color: $grey_10;\r\n display: inline-block;\r\n white-space: nowrap;\r\n }\r\n\r\n &__container {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n\r\n .sd-select__trigger {\r\n padding: 4px 20px 4px 12px;\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n\r\n .sd-select__value {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n line-height: 20px;\r\n font-size: 12px;\r\n font-weight: 400;\r\n text-align: left;\r\n }\r\n\r\n .sd-select__clear {\r\n margin: 0 4px;\r\n width: 8px;\r\n height: 8px;\r\n background-color: transparent;\r\n outline: none;\r\n border: none;\r\n }\r\n }\r\n\r\n .sd-select__arrow {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n width: 12px;\r\n height: 12px;\r\n color: $grey_65;\r\n transition: transform 0.3s ease;\r\n\r\n &--open {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-select__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-dropdown-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n color: $grey_90;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .sd-select__search-container {\r\n position: sticky;\r\n top: 0;\r\n display: flex;\r\n width: 100%;\r\n background-color: white;\r\n align-items: center;\r\n padding: 4px 8px;\r\n\r\n &--scrolled {\r\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n }\r\n\r\n .sd-select__option-placeholder {\r\n padding: 4px 12px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: left;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string | number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item';\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: SelectGroupOptionType;\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n value: string | number | null;\r\n option: SelectOption | null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\r\n sdChange: SelectOption[] | null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string | number | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n const selectedOption = this.getSelectedOption();\r\n this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n this.filteredOptions = this.options;\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n if (this.itemIndex === -1) {\r\n searchInput?.focus();\r\n return;\r\n } else if (searchInput?.matches(':focus')) {\r\n searchInput?.blur();\r\n }\r\n }\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (!currentItem || !this.isOpen) return;\r\n\r\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n if (isOptionDisabled) {\r\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n return;\r\n }\r\n\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n this.filteredOptions = this.options;\r\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n this.onDropdownToggle(this.isOpen);\r\n\r\n const selectedOption = this.getSelectedOption();\r\n if (!selectedOption) {\r\n this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;\r\n } else {\r\n this.itemIndex = this.options.indexOf(selectedOption);\r\n }\r\n\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n if (this.isOpen === false) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n searchInput?.focus();\r\n }\r\n\r\n if (!currentItem) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n if (!this.selectRef?.contains(event.target as Node)) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n keyboardEvent.stopPropagation();\r\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n keyboardEvent.preventDefault();\r\n switch (keyboardEvent.key) {\r\n case 'ArrowDown':\r\n case 'ArrowUp':\r\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n this.itemIndex = nextIndex;\r\n break;\r\n case 'Enter':\r\n const selectedOption = this.filteredOptions[this.itemIndex];\r\n if (selectedOption && !selectedOption.disabled) {\r\n this.value = selectedOption.value;\r\n this.searchText = null;\r\n this.isOpen = false;\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.isOpen = !this.isOpen;\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n const { option, event } = detail;\r\n event.stopPropagation();\r\n\r\n if (!option.disabled) {\r\n this.value = option.value;\r\n this.isOpen = false;\r\n }\r\n };\r\n\r\n private filterOptions() {\r\n if (!this.searchText || this.searchText.trim() === '') {\r\n // 검색어가 없으면 전체 옵션 표시\r\n this.filteredOptions = this.options;\r\n } else {\r\n // 검색어가 있으면 필터링\r\n this.filteredOptions = this.options.filter(option =>\r\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n );\r\n }\r\n }\r\n\r\n private getSelectedOption(): SelectOption | undefined {\r\n return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n const target = event.target as HTMLElement;\r\n const scrollTop = target.scrollTop;\r\n\r\n // 스크롤이 조금이라도 되면 그림자 표시\r\n this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n if (this.searchRef) {\r\n return this.searchRef.getNativeElement();\r\n }\r\n return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n if (!this.dropdownRef || !optionElement) return;\r\n\r\n const dropdown = this.dropdownRef;\r\n const optionTop = optionElement.offsetTop;\r\n const optionHeight = optionElement.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n const visibleTop = dropdownScrollTop + searchOffset;\r\n const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n if (optionTop < visibleTop) {\r\n dropdown.scrollTop = optionTop - searchOffset;\r\n } else if (optionTop + optionHeight > visibleBottom) {\r\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n }\r\n }\r\n\r\n // render method\r\n render() {\r\n const style = {\r\n '--select-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n\r\n return (\r\n <Host style={style}>\r\n <div\r\n class={{\r\n 'sd-select': true,\r\n 'sd-select--open': this.isOpen,\r\n 'sd-select--disabled': this.disabled,\r\n }}\r\n ref={el => (this.selectRef = el)}\r\n >\r\n {this.renderLabel(this.label)}\r\n <div class=\"sd-select__container\">\r\n {this.renderTrigger()}\r\n {this.renderDropdown()}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n if (!label) return null;\r\n\r\n return <label class=\"sd-select__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n const selectedOption = this.getSelectedOption();\r\n return (\r\n <div\r\n class=\"sd-select__trigger\"\r\n tabindex={this.disabled ? -1 : 0}\r\n onClick={this.handleTriggerClick}\r\n >\r\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n {this.clearable && selectedOption && !this.disabled && (\r\n <sd-icon\r\n key=\"clear-icon\"\r\n name=\"close\"\r\n size={10}\r\n color=\"#888\"\r\n class=\"sd-select__clear\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n this.value = null;\r\n }}\r\n ></sd-icon>\r\n )}\r\n\r\n <sd-icon\r\n key=\"arrow-icon\"\r\n name=\"arrowDown\"\r\n color=\"#888\"\r\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n ></sd-icon>\r\n </div>\r\n );\r\n }\r\n\r\n private renderDropdown() {\r\n const style = {\r\n '--select-dropdown-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n if (this.isOpen === false) return null;\r\n\r\n return (\r\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n <div\r\n class=\"sd-select__dropdown\"\r\n style={style}\r\n onScroll={this.handleDropdownScroll}\r\n ref={el => (this.dropdownRef = el)}\r\n >\r\n {this.searchable && (\r\n <div\r\n class={{\r\n 'sd-select__search-container': true,\r\n 'sd-select__search-container--scrolled': this.isScrolled,\r\n }}\r\n onClick={event => event.stopPropagation()}\r\n >\r\n <sd-input\r\n ref={el => (this.searchRef = el)}\r\n value={this.searchText}\r\n placeholder=\"검색\"\r\n clearable\r\n inputStyle={{ 'padding-left': '8px' }}\r\n autofocus\r\n onSdInput={event => {\r\n this.searchText = String(event?.detail);\r\n }}\r\n onSdFocus={() => {\r\n this.itemIndex = -1;\r\n }}\r\n >\r\n <sd-icon\r\n name=\"search\"\r\n size={16}\r\n color=\"#737373\"\r\n style={{ marginRight: '4px' }}\r\n slot=\"prefix\"\r\n ></sd-icon>\r\n </sd-input>\r\n </div>\r\n )}\r\n {this.filteredOptions.length > 0 ? (\r\n this.filteredOptions.map((option, index) => (\r\n <slot name={`option-${option.value}`}>\r\n <sd-select-option\r\n option={option}\r\n index={index}\r\n isSelected={option.value === this.value}\r\n isFocused={index === this.itemIndex}\r\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n ></sd-select-option>\r\n </slot>\r\n ))\r\n ) : (\r\n <slot name=\"option-placeholder\">\r\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\r\n </slot>\r\n )}\r\n </div>\r\n </sd-portal>\r\n );\r\n }\r\n}\r\n\r\n{\r\n /*\r\n <sd-select id=\"select-1\">\r\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n </sd-select>\r\n <sd-select id=\"select-2\"> </sd-select>\r\n <sd-select id=\"select-3\" searchable clearable>\r\n <div slot=\"option-3\">test</div>\r\n </sd-select>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const select1 = document.getElementById('select-1');\r\n const select2 = document.getElementById('select-2');\r\n const select3 = document.getElementById('select-3');\r\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n select1.optionPlaceholder = 'No options available';\r\n\r\n const options = [\r\n { label: 'Option 1', value: '1' },\r\n { label: 'Option 2', value: '2' },\r\n { label: 'Option 3', value: '3', disabled: true },\r\n { label: 'Option 4', value: '4' },\r\n { label: 'Option 5', value: '5' },\r\n { label: 'Option 6', value: '6' },\r\n { label: 'Option 7', value: '7', disabled: true },\r\n { label: 'Option 8', value: '8' },\r\n { label: 'Option 9', value: '9' },\r\n { label: 'Option 10', value: '10' },\r\n { label: 'Option 11', value: '11', disabled: true },\r\n { label: 'Option 12', value: '12' },\r\n { label: 'Option 13', value: '13' },\r\n { label: 'Option 14', value: '14' },\r\n { label: 'Option 15', value: '15', disabled: true },\r\n { label: 'Option 16', value: '16' },\r\n { label: 'Option 17', value: '17' },\r\n { label: 'Option 18', value: '18' },\r\n { label: 'Option 19', value: '19', disabled: true },\r\n { label: 'Option 20', value: '20' },\r\n { label: 'Option 21', value: '21' },\r\n { label: 'Option 22', value: '22' },\r\n { label: 'Option 23', value: '23', disabled: true },\r\n { label: 'Option 24', value: '24' },\r\n ];\r\n\r\n select2.options = options;\r\n select3.options = options;\r\n });\r\n </script>\r\n\r\n */\r\n}\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, d as createEvent, h } from './p-DzRr3BEe.js';
1
+ import { p as proxyCustomElement, H, d as createEvent, h } from './p-CbnL1UUF.js';
2
2
 
3
3
  const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal extends H {
4
4
  constructor(registerHost) {
@@ -177,6 +177,6 @@ function defineCustomElement() {
177
177
  }
178
178
 
179
179
  export { SdTooltipPortal as S, defineCustomElement as d };
180
- //# sourceMappingURL=p-BRrY7yTi.js.map
180
+ //# sourceMappingURL=p-Cs1Kf3Tx.js.map
181
181
 
182
- //# sourceMappingURL=p-BRrY7yTi.js.map
182
+ //# sourceMappingURL=p-Cs1Kf3Tx.js.map
@@ -1 +1 @@
1
- {"file":"p-BRrY7yTi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n\r\n // DOM이 완전히 렌더링된 후 위치 계산\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n }\r\n });\r\n\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n\r\n // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n // if (this.open) this.updatePosition();\r\n\r\n if (this.open) {\r\n this.wrapper.style.display = 'block';\r\n // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible';\r\n }\r\n });\r\n } else {\r\n this.wrapper.style.display = 'none';\r\n this.wrapper.style.visibility = 'hidden';\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n top: '-9999px',\r\n left: '-9999px',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const rect = this.parentRef.getBoundingClientRect();\r\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n const [offsetX, offsetY] = this.offset;\r\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n let top = 0;\r\n let left = 0;\r\n\r\n switch (this.placement) {\r\n case 'top':\r\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'bottom':\r\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'left':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n break;\r\n\r\n case 'right':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n break;\r\n }\r\n\r\n Object.assign(this.wrapper!.style, {\r\n top: `${top}px`,\r\n left: `${left}px`,\r\n });\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"p-Cs1Kf3Tx.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n\r\n // DOM이 완전히 렌더링된 후 위치 계산\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n }\r\n });\r\n\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n\r\n // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n // if (this.open) this.updatePosition();\r\n\r\n if (this.open) {\r\n this.wrapper.style.display = 'block';\r\n // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible';\r\n }\r\n });\r\n } else {\r\n this.wrapper.style.display = 'none';\r\n this.wrapper.style.visibility = 'hidden';\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n top: '-9999px',\r\n left: '-9999px',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const rect = this.parentRef.getBoundingClientRect();\r\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n const [offsetX, offsetY] = this.offset;\r\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n let top = 0;\r\n let left = 0;\r\n\r\n switch (this.placement) {\r\n case 'top':\r\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'bottom':\r\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'left':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n break;\r\n\r\n case 'right':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n break;\r\n }\r\n\r\n Object.assign(this.wrapper!.style, {\r\n top: `${top}px`,\r\n left: `${left}px`,\r\n });\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"],"version":3}
@@ -1,6 +1,6 @@
1
- import { p as proxyCustomElement, H, d as createEvent, h } from './p-DzRr3BEe.js';
2
- import { d as defineCustomElement$2 } from './p-CpfDowFL.js';
3
- import { d as defineCustomElement$1 } from './p-DzIffEfK.js';
1
+ import { p as proxyCustomElement, H, d as createEvent, h } from './p-CbnL1UUF.js';
2
+ import { d as defineCustomElement$2 } from './p-BWF8FOjZ.js';
3
+ import { d as defineCustomElement$1 } from './p-BtS3tSh2.js';
4
4
 
5
5
  const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:28px;font-size:12px;line-height:20px}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox .sd-checkbox__bg{border-color:white !important}";
6
6
 
@@ -104,6 +104,6 @@ function defineCustomElement() {
104
104
  }
105
105
 
106
106
  export { SdSelectOptionGroup as S, defineCustomElement as d };
107
- //# sourceMappingURL=p-D9gy3nk_.js.map
107
+ //# sourceMappingURL=p-DWYqZdbI.js.map
108
108
 
109
- //# sourceMappingURL=p-D9gy3nk_.js.map
109
+ //# sourceMappingURL=p-DWYqZdbI.js.map
@@ -1 +1 @@
1
- {"file":"p-D9gy3nk_.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,4vEAA4vE;;MCO9wE,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGvB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAmB,KAAK;IAClC,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAC5B,YAAY,GAAa,IAAI;AAC7B,IAAA,SAAS,GAAmD;AACnE,QAAA,aAAa,EAAE,CAAC;AAChB,QAAA,UAAU,EAAE,CAAC;KACb;IAEQ,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;;AAGxF,IAAA,WAAW;IAOZ,WAAW,GAAG,CACrB,MAAyB,EACzB,UAA0B,EAC1B,KAAiB,KACd;QACH,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;AAC1D,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;YACF;;AAGD,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACtD,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAC3D,kCAAkC,EAAE,IAAI,CAAC,SAAS;gBAClD,uCAAuC,EAAE,IAAI,CAAC,WAAW;AACzD,gBAAA,gCAAgC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO;AAC9D,gBAAA,mCAAmC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;AACpE,gBAAA,+BAA+B,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;aAC5D,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,EAAA,EAEvE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wCAAwC,EAAA,EACjD,IAAI,CAAC,WAAW,KAChB,oEACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AAClD,aAAC,GACa,CACf,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,EACrE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,KAChD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0CAA0C,EAAA,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,aAAa,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,CAAQ,CAClI,CACI,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-select-option-group {\r\n display: block;\r\n height: fit-content;\r\n .sd-select__option-group {\r\n display: flex;\r\n padding: 4px 12px;\r\n padding-left: 28px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n\r\n &.sd-select__option-group--group,\r\n &.sd-select__option-group--subgroup {\r\n &:not(.sd-select__option-group--use-checkbox) {\r\n cursor: default;\r\n }\r\n }\r\n\r\n &.sd-select__option-group--group {\r\n padding-left: 12px;\r\n background-color: $brilliantblue_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 700;\r\n }\r\n\r\n &.sd-select__option-group--subgroup {\r\n padding-left: 20px;\r\n background-color: $grey_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 500;\r\n }\r\n\r\n sd-checkbox {\r\n &__bg {\r\n border-color: $grey_65;\r\n }\r\n }\r\n\r\n &__label-wrapper {\r\n display: flex;\r\n width: 100%;\r\n column-gap: 8px;\r\n align-items: center;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n\r\n sd-checkbox {\r\n flex-shrink: 0;\r\n }\r\n\r\n .sd-select__option-group-label {\r\n flex: 0 1 auto;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .sd-select__option-group__count-indicator {\r\n width: fit-content;\r\n flex-shrink: 0;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: $grey_65;\r\n }\r\n }\r\n\r\n &--focused {\r\n background-color: $brilliantblue_20;\r\n }\r\n\r\n &--selected,\r\n &--focused {\r\n &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n color: $brilliantblue_75;\r\n font-weight: 700;\r\n }\r\n }\r\n\r\n &--disabled {\r\n color: $grey_55;\r\n cursor: not-allowed;\r\n }\r\n\r\n &:hover {\r\n &:not(.sd-select__option-group--disabled) {\r\n background-color: $brilliantblue_75;\r\n color: white;\r\n }\r\n\r\n &.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox {\r\n .sd-checkbox__bg {\r\n border-color: white !important;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n @Prop() useIndicator?: boolean = true;\r\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\r\n selectedCount: 0,\r\n totalCount: 0,\r\n };\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n index: number;\r\n event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n option: SelectOptionGroup,\r\n isSelected: boolean | null,\r\n event: MouseEvent,\r\n ) => {\r\n event.stopPropagation();\r\n\r\n if (option.type === 'group' || option.type === 'subgroup') {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n return;\r\n }\r\n\r\n if (!this.option.disabled && !this.disabled) {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <div\r\n class={{\r\n 'sd-select__option-group': true,\r\n 'sd-select__option-group--selected': !!this.isSelected,\r\n 'sd-select__option-group--disabled': !!this.option.disabled,\r\n 'sd-select__option-group--focused': this.isFocused,\r\n 'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n 'sd-select__option-group--group': this.option.type === 'group',\r\n 'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n 'sd-select__option-group--item': this.option.type === 'item',\r\n }}\r\n onMouseEnter={() => (this.isHovered = true)}\r\n onMouseLeave={() => (this.isHovered = false)}\r\n style={this.optionStyle}\r\n data-index={this.index}\r\n onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n >\r\n <div class=\"sd-select__option-group__label-wrapper\">\r\n {this.useCheckbox && (\r\n <sd-checkbox\r\n checked={this.isSelected}\r\n disabled={this.option.disabled}\r\n onClick={e => {\r\n e.preventDefault();\r\n this.handleClick(this.option, this.isSelected, e);\r\n }}\r\n ></sd-checkbox>\r\n )}\r\n <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n {this.useIndicator && this.option.type !== 'item' && (\r\n <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"p-DWYqZdbI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-select-option-group {\r\n display: block;\r\n height: fit-content;\r\n .sd-select__option-group {\r\n display: flex;\r\n padding: 4px 12px;\r\n padding-left: 28px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n\r\n &.sd-select__option-group--group,\r\n &.sd-select__option-group--subgroup {\r\n &:not(.sd-select__option-group--use-checkbox) {\r\n cursor: default;\r\n }\r\n }\r\n\r\n &.sd-select__option-group--group {\r\n padding-left: 12px;\r\n background-color: $brilliantblue_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 700;\r\n }\r\n\r\n &.sd-select__option-group--subgroup {\r\n padding-left: 20px;\r\n background-color: $grey_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 500;\r\n }\r\n\r\n sd-checkbox {\r\n &__bg {\r\n border-color: $grey_65;\r\n }\r\n }\r\n\r\n &__label-wrapper {\r\n display: flex;\r\n width: 100%;\r\n column-gap: 8px;\r\n align-items: center;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n\r\n sd-checkbox {\r\n flex-shrink: 0;\r\n }\r\n\r\n .sd-select__option-group-label {\r\n flex: 0 1 auto;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .sd-select__option-group__count-indicator {\r\n width: fit-content;\r\n flex-shrink: 0;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: $grey_65;\r\n }\r\n }\r\n\r\n &--focused {\r\n background-color: $brilliantblue_20;\r\n }\r\n\r\n &--selected,\r\n &--focused {\r\n &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n color: $brilliantblue_75;\r\n font-weight: 700;\r\n }\r\n }\r\n\r\n &--disabled {\r\n color: $grey_55;\r\n cursor: not-allowed;\r\n }\r\n\r\n &:hover {\r\n &:not(.sd-select__option-group--disabled) {\r\n background-color: $brilliantblue_75;\r\n color: white;\r\n }\r\n\r\n &.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox {\r\n .sd-checkbox__bg {\r\n border-color: white !important;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n @Prop() useIndicator?: boolean = true;\r\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\r\n selectedCount: 0,\r\n totalCount: 0,\r\n };\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n index: number;\r\n event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n option: SelectOptionGroup,\r\n isSelected: boolean | null,\r\n event: MouseEvent,\r\n ) => {\r\n event.stopPropagation();\r\n\r\n if (option.type === 'group' || option.type === 'subgroup') {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n return;\r\n }\r\n\r\n if (!this.option.disabled && !this.disabled) {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <div\r\n class={{\r\n 'sd-select__option-group': true,\r\n 'sd-select__option-group--selected': !!this.isSelected,\r\n 'sd-select__option-group--disabled': !!this.option.disabled,\r\n 'sd-select__option-group--focused': this.isFocused,\r\n 'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n 'sd-select__option-group--group': this.option.type === 'group',\r\n 'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n 'sd-select__option-group--item': this.option.type === 'item',\r\n }}\r\n onMouseEnter={() => (this.isHovered = true)}\r\n onMouseLeave={() => (this.isHovered = false)}\r\n style={this.optionStyle}\r\n data-index={this.index}\r\n onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n >\r\n <div class=\"sd-select__option-group__label-wrapper\">\r\n {this.useCheckbox && (\r\n <sd-checkbox\r\n checked={this.isSelected}\r\n disabled={this.option.disabled}\r\n onClick={e => {\r\n e.preventDefault();\r\n this.handleClick(this.option, this.isSelected, e);\r\n }}\r\n ></sd-checkbox>\r\n )}\r\n <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n {this.useIndicator && this.option.type !== 'item' && (\r\n <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, d as createEvent, h } from './p-DzRr3BEe.js';
1
+ import { p as proxyCustomElement, H, d as createEvent, h } from './p-CbnL1UUF.js';
2
2
 
3
3
  const SdPortal = /*@__PURE__*/ proxyCustomElement(class SdPortal extends H {
4
4
  constructor(registerHost) {
@@ -145,6 +145,6 @@ function defineCustomElement() {
145
145
  }
146
146
 
147
147
  export { SdPortal as S, defineCustomElement as d };
148
- //# sourceMappingURL=p-B_lWW-k_.js.map
148
+ //# sourceMappingURL=p-DtOWZESA.js.map
149
149
 
150
- //# sourceMappingURL=p-B_lWW-k_.js.map
150
+ //# sourceMappingURL=p-DtOWZESA.js.map
@@ -1 +1 @@
1
- {"file":"p-B_lWW-k_.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-portal',\r\n shadow: false,\r\n})\r\nexport class SdPortal {\r\n @Element() hostEl!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 4];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n this.updatePosition();\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n this.wrapper.style.display = this.open ? 'block' : 'none';\r\n if (this.open) this.updatePosition();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const parentRect = this.parentRef.getBoundingClientRect();\r\n const wrapperRect = this.wrapper.getBoundingClientRect();\r\n const viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n };\r\n\r\n let top = parentRect.bottom + window.scrollY + this.offset[1];\r\n let left = parentRect.left + window.scrollX + this.offset[0];\r\n\r\n // 화면 상하단 넘어갈 시 반전\r\n if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\r\n top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\r\n }\r\n if (top < window.scrollY) {\r\n top = parentRect.bottom + window.scrollY + this.offset[1];\r\n }\r\n\r\n // 화면 좌우측 넘어갈 시 반전\r\n if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\r\n left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\r\n }\r\n if (left < 0) {\r\n left = this.offset[0];\r\n }\r\n\r\n this.wrapper.style.top = `${top}px`;\r\n this.wrapper.style.left = `${left}px`;\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"p-DtOWZESA.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-portal',\r\n shadow: false,\r\n})\r\nexport class SdPortal {\r\n @Element() hostEl!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 4];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n this.updatePosition();\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n this.wrapper.style.display = this.open ? 'block' : 'none';\r\n if (this.open) this.updatePosition();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const parentRect = this.parentRef.getBoundingClientRect();\r\n const wrapperRect = this.wrapper.getBoundingClientRect();\r\n const viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n };\r\n\r\n let top = parentRect.bottom + window.scrollY + this.offset[1];\r\n let left = parentRect.left + window.scrollX + this.offset[0];\r\n\r\n // 화면 상하단 넘어갈 시 반전\r\n if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\r\n top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\r\n }\r\n if (top < window.scrollY) {\r\n top = parentRect.bottom + window.scrollY + this.offset[1];\r\n }\r\n\r\n // 화면 좌우측 넘어갈 시 반전\r\n if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\r\n left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\r\n }\r\n if (left < 0) {\r\n left = this.offset[0];\r\n }\r\n\r\n this.wrapper.style.top = `${top}px`;\r\n this.wrapper.style.left = `${left}px`;\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"],"version":3}
@@ -1,6 +1,6 @@
1
- import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DzRr3BEe.js';
1
+ import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
2
2
  import { r as resolveColor } from './p-BYf-ybt2.js';
3
- import { d as defineCustomElement$1 } from './p-DzIffEfK.js';
3
+ import { d as defineCustomElement$1 } from './p-BtS3tSh2.js';
4
4
 
5
5
  const sdButtonCss = ".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}";
6
6
 
@@ -97,6 +97,6 @@ function defineCustomElement() {
97
97
  }
98
98
 
99
99
  export { SdButton as S, defineCustomElement as d };
100
- //# sourceMappingURL=p-B0qn2Tb-.js.map
100
+ //# sourceMappingURL=p-hf6YF2Mx.js.map
101
101
 
102
- //# sourceMappingURL=p-B0qn2Tb-.js.map
102
+ //# sourceMappingURL=p-hf6YF2Mx.js.map
@@ -1 +1 @@
1
- {"file":"p-B0qn2Tb-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-button {\r\n text-decoration: none;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n &--xs {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n min-height: 24px;\r\n }\r\n &--sm {\r\n padding: 0 12px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n min-height: 28px;\r\n }\r\n &--md {\r\n padding: 0 20px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 26px;\r\n min-height: 34px;\r\n }\r\n &--lg {\r\n padding: 0 28px;\r\n font-size: 18px;\r\n font-weight: 500;\r\n line-height: 30px;\r\n min-height: 62px;\r\n }\r\n &--primary {\r\n background-color: var(--button-color);\r\n color: white;\r\n transition: filter 0.2s ease;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: #000000;\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.25;\r\n }\r\n }\r\n\r\n &--outline {\r\n background: white;\r\n border: 1px solid var(--button-color);\r\n color: var(--button-color);\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--button-color);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.15;\r\n }\r\n\r\n .sd-button__content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n }\r\n &--ghost {\r\n background-color: transparent;\r\n color: var(--button-color);\r\n border-color: transparent;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--button-color);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.15;\r\n }\r\n\r\n .sd-button__content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n }\r\n &--disabled {\r\n border: 1px solid $grey_45;\r\n background: $grey_30;\r\n color: $grey_65;\r\n cursor: not-allowed !important;\r\n }\r\n &--icon-only {\r\n padding: 0;\r\n width: fit-content;\r\n height: fit-content;\r\n aspect-ratio: 1 / 1;\r\n }\r\n &--no-hover {\r\n &:hover::before {\r\n opacity: 0 !important;\r\n }\r\n }\r\n\r\n .sd-button__content {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n\r\n z-index: 1;\r\n font-weight: 500;\r\n }\r\n}\r\n\r\n// /* Focus styles */\r\n// .sd-button:focus-visible {\r\n// outline: 2px solid $primary;\r\n// outline-offset: 2px;\r\n// }\r\n\r\n// /* High contrast mode support */\r\n// @media (prefers-contrast: high) {\r\n// .sd-button {\r\n// border-width: 2px;\r\n// }\r\n// }\r\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\r\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\r\n\r\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\r\n xs: 12,\r\n sm: 16,\r\n md: 20,\r\n lg: 24,\r\n};\r\n\r\n@Component({\r\n tag: 'sd-button',\r\n styleUrl: 'sd-button.scss',\r\n})\r\nexport class SdButton {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() variant?: ButtonVariant = 'primary';\r\n @Prop() size: ButtonSize = 'sm';\r\n @Prop() color: string = '#025497';\r\n @Prop() label: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Prop() icon?: IconName;\r\n @Prop() iconColor?: string;\r\n @Prop() iconSize?: number;\r\n @Prop() iconRight?: IconName;\r\n @Prop() noHover: boolean = false;\r\n @Prop() class: string = '';\r\n @Event() sdClick!: EventEmitter<MouseEvent>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n this.sdClick.emit(event);\r\n };\r\n\r\n private getButtonClasses(): string {\r\n const classes = ['sd-button'];\r\n\r\n classes.push(`sd-button--${this.variant}`);\r\n classes.push(`sd-button--${this.size}`);\r\n classes.push(`sd-button--color-${this.color}`);\r\n\r\n if (this.disabled) {\r\n classes.push('sd-button--disabled');\r\n }\r\n\r\n if (!this.label && (this.icon || this.iconRight)) {\r\n classes.push('sd-button--icon-only');\r\n }\r\n\r\n if (this.noHover) {\r\n classes.push('sd-button--no-hover');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n render() {\r\n const buttonClasses = this.getButtonClasses();\r\n // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\r\n const resolvedColor = resolveColor(this.color);\r\n\r\n return (\r\n <Host style={{ '--button-color': resolvedColor }}>\r\n <button\r\n class={`${buttonClasses} ${this.class}`}\r\n type={this.type}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <div class=\"sd-button__content\">\r\n {this.icon && (\r\n <sd-icon\r\n class=\"sd-button__icon sd-button__icon--left\"\r\n name={this.icon}\r\n size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\r\n color={\r\n this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor\r\n }\r\n ></sd-icon>\r\n )}\r\n\r\n {this.label && <div class=\"sd-button__label\">{this.label}</div>}\r\n\r\n {this.iconRight && (\r\n <sd-icon\r\n class=\"sd-button__icon sd-button__icon--right\"\r\n name={this.iconRight}\r\n size={ICON_SIZES[this.size!]}\r\n color={this.variant === 'primary' ? '#fff' : resolvedColor}\r\n ></sd-icon>\r\n )}\r\n </div>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"p-hf6YF2Mx.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,moEAAmoE;;ACMvpE,MAAM,UAAU,GAAoC;AACnD,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;CACN;MAMY,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGZ,OAAO,GAAmB,SAAS;IACnC,IAAI,GAAe,IAAI;IACvB,KAAK,GAAW,SAAS;IACzB,KAAK,GAAW,EAAE;IAClB,QAAQ,GAAY,KAAK;IACzB,IAAI,GAAkC,QAAQ;AAC9C,IAAA,IAAI;AACJ,IAAA,SAAS;AACT,IAAA,QAAQ;AACR,IAAA,SAAS;IACT,OAAO,GAAY,KAAK;IACxB,KAAK,GAAW,EAAE;AACjB,IAAA,OAAO;AAER,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC3C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAED,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACzB,KAAC;IAEO,gBAAgB,GAAA;AACvB,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC;QAE7B,OAAO,CAAC,IAAI,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAE,CAAA,CAAC;QAC1C,OAAO,CAAC,IAAI,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;QACvC,OAAO,CAAC,IAAI,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAE,CAAA,CAAC;AAE9C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC;;AAGpC,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE;AACjD,YAAA,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC;;AAGrC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC;;AAGpC,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGzB,MAAM,GAAA;AACL,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE;;QAE7C,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QAE9C,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,aAAa,EAAE,EAAA,EAC/C,CACC,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,CAAE,CAAA,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,IAAI,CAAC,IAAI,KACT,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uCAAuC,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,IAAK,CAAC,EAC5D,KAAK,EACJ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,aAAa,GAE5E,CACX,EAEA,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,EAE9D,IAAI,CAAC,SAAS,KACd,gEACC,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,IAAK,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,aAAa,EAAA,CAChD,CACX,CACI,CACE,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-button {\r\n text-decoration: none;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n &--xs {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n min-height: 24px;\r\n }\r\n &--sm {\r\n padding: 0 12px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n min-height: 28px;\r\n }\r\n &--md {\r\n padding: 0 20px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 26px;\r\n min-height: 34px;\r\n }\r\n &--lg {\r\n padding: 0 28px;\r\n font-size: 18px;\r\n font-weight: 500;\r\n line-height: 30px;\r\n min-height: 62px;\r\n }\r\n &--primary {\r\n background-color: var(--button-color);\r\n color: white;\r\n transition: filter 0.2s ease;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: #000000;\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.25;\r\n }\r\n }\r\n\r\n &--outline {\r\n background: white;\r\n border: 1px solid var(--button-color);\r\n color: var(--button-color);\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--button-color);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.15;\r\n }\r\n\r\n .sd-button__content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n }\r\n &--ghost {\r\n background-color: transparent;\r\n color: var(--button-color);\r\n border-color: transparent;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--button-color);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.15;\r\n }\r\n\r\n .sd-button__content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n }\r\n &--disabled {\r\n border: 1px solid $grey_45;\r\n background: $grey_30;\r\n color: $grey_65;\r\n cursor: not-allowed !important;\r\n }\r\n &--icon-only {\r\n padding: 0;\r\n width: fit-content;\r\n height: fit-content;\r\n aspect-ratio: 1 / 1;\r\n }\r\n &--no-hover {\r\n &:hover::before {\r\n opacity: 0 !important;\r\n }\r\n }\r\n\r\n .sd-button__content {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n\r\n z-index: 1;\r\n font-weight: 500;\r\n }\r\n}\r\n\r\n// /* Focus styles */\r\n// .sd-button:focus-visible {\r\n// outline: 2px solid $primary;\r\n// outline-offset: 2px;\r\n// }\r\n\r\n// /* High contrast mode support */\r\n// @media (prefers-contrast: high) {\r\n// .sd-button {\r\n// border-width: 2px;\r\n// }\r\n// }\r\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\r\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\r\n\r\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\r\n xs: 12,\r\n sm: 16,\r\n md: 20,\r\n lg: 24,\r\n};\r\n\r\n@Component({\r\n tag: 'sd-button',\r\n styleUrl: 'sd-button.scss',\r\n})\r\nexport class SdButton {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() variant?: ButtonVariant = 'primary';\r\n @Prop() size: ButtonSize = 'sm';\r\n @Prop() color: string = '#025497';\r\n @Prop() label: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Prop() icon?: IconName;\r\n @Prop() iconColor?: string;\r\n @Prop() iconSize?: number;\r\n @Prop() iconRight?: IconName;\r\n @Prop() noHover: boolean = false;\r\n @Prop() class: string = '';\r\n @Event() sdClick!: EventEmitter<MouseEvent>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n this.sdClick.emit(event);\r\n };\r\n\r\n private getButtonClasses(): string {\r\n const classes = ['sd-button'];\r\n\r\n classes.push(`sd-button--${this.variant}`);\r\n classes.push(`sd-button--${this.size}`);\r\n classes.push(`sd-button--color-${this.color}`);\r\n\r\n if (this.disabled) {\r\n classes.push('sd-button--disabled');\r\n }\r\n\r\n if (!this.label && (this.icon || this.iconRight)) {\r\n classes.push('sd-button--icon-only');\r\n }\r\n\r\n if (this.noHover) {\r\n classes.push('sd-button--no-hover');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n render() {\r\n const buttonClasses = this.getButtonClasses();\r\n // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\r\n const resolvedColor = resolveColor(this.color);\r\n\r\n return (\r\n <Host style={{ '--button-color': resolvedColor }}>\r\n <button\r\n class={`${buttonClasses} ${this.class}`}\r\n type={this.type}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <div class=\"sd-button__content\">\r\n {this.icon && (\r\n <sd-icon\r\n class=\"sd-button__icon sd-button__icon--left\"\r\n name={this.icon}\r\n size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\r\n color={\r\n this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor\r\n }\r\n ></sd-icon>\r\n )}\r\n\r\n {this.label && <div class=\"sd-button__label\">{this.label}</div>}\r\n\r\n {this.iconRight && (\r\n <sd-icon\r\n class=\"sd-button__icon sd-button__icon--right\"\r\n name={this.iconRight}\r\n size={ICON_SIZES[this.size!]}\r\n color={this.variant === 'primary' ? '#fff' : resolvedColor}\r\n ></sd-icon>\r\n )}\r\n </div>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,8 +1,8 @@
1
- import { h } from './p-DzRr3BEe.js';
1
+ import { h } from './p-CbnL1UUF.js';
2
2
 
3
3
  const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
4
4
 
5
5
  export { TooltipArrow as T };
6
- //# sourceMappingURL=p-BvOGkIDI.js.map
6
+ //# sourceMappingURL=p-wA4KCOG0.js.map
7
7
 
8
- //# sourceMappingURL=p-BvOGkIDI.js.map
8
+ //# sourceMappingURL=p-wA4KCOG0.js.map
@@ -1 +1 @@
1
- {"file":"p-BvOGkIDI.js","mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3C,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAET,CACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;","names":[],"sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\r\n\r\nexport const TooltipArrow = (props: SVGProps) => (\r\n <svg\r\n width=\"16\"\r\n height=\"12\"\r\n viewBox=\"0 0 16 12\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n);\r\n"],"version":3}
1
+ {"file":"p-wA4KCOG0.js","mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3C,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAET,CACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;","names":[],"sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\r\n\r\nexport const TooltipArrow = (props: SVGProps) => (\r\n <svg\r\n width=\"16\"\r\n height=\"12\"\r\n viewBox=\"0 0 16 12\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n);\r\n"],"version":3}
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h, c as Host } from './p-DzRr3BEe.js';
1
+ import { p as proxyCustomElement, H, h, c as Host } from './p-CbnL1UUF.js';
2
2
  import { r as resolveColor } from './p-BYf-ybt2.js';
3
3
 
4
4
  const sdBadgeCss = ".sd-badge.sc-sd-badge{display:inline-flex;align-items:center;justify-content:center}.sd-badge.sc-sd-badge .sd-badge__dot.sc-sd-badge{background:var(--sd-badge-color, #0075ff)}.sd-badge.sc-sd-badge .sd-badge__label.sc-sd-badge{margin-left:8px;font-size:12px;font-weight:500;line-height:20px;color:#333333}.sd-badge--sm.sc-sd-badge .sd-badge__dot.sc-sd-badge{width:4px;height:4px;min-width:4px;min-height:4px;border-radius:2px}.sd-badge--md.sc-sd-badge .sd-badge__dot.sc-sd-badge{width:8px;height:8px;min-width:8px;min-height:8px;border-radius:4px}";
@@ -1,4 +1,4 @@
1
- import { S as SdButton$1, d as defineCustomElement$1 } from './p-B0qn2Tb-.js';
1
+ import { S as SdButton$1, d as defineCustomElement$1 } from './p-hf6YF2Mx.js';
2
2
 
3
3
  const SdButton = SdButton$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { p as proxyCustomElement, H, h, c as Host } from './p-DzRr3BEe.js';
1
+ import { p as proxyCustomElement, H, h, c as Host } from './p-CbnL1UUF.js';
2
2
 
3
3
  const sdCardCss = "sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card.sd-card--bordered{border:1px solid #e1e1e1}";
4
4
 
@@ -1,4 +1,4 @@
1
- import { S as SdCheckbox$1, d as defineCustomElement$1 } from './p-CpfDowFL.js';
1
+ import { S as SdCheckbox$1, d as defineCustomElement$1 } from './p-BWF8FOjZ.js';
2
2
 
3
3
  const SdCheckbox = SdCheckbox$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { S as SdDateBox$1, d as defineCustomElement$1 } from './p-e74imoE0.js';
1
+ import { S as SdDateBox$1, d as defineCustomElement$1 } from './p-Cafw-qR4.js';
2
2
 
3
3
  const SdDateBox = SdDateBox$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,9 +1,9 @@
1
- import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DzRr3BEe.js';
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
- import { d as defineCustomElement$5 } from './p-e74imoE0.js';
4
- import { d as defineCustomElement$4 } from './p-DzIffEfK.js';
5
- import { d as defineCustomElement$3 } from './p-Db_plCmk.js';
6
- import { d as defineCustomElement$2 } from './p-B_lWW-k_.js';
3
+ import { d as defineCustomElement$5 } from './p-Cafw-qR4.js';
4
+ import { d as defineCustomElement$4 } from './p-BtS3tSh2.js';
5
+ import { d as defineCustomElement$3 } from './p-B9QE7fbR.js';
6
+ import { d as defineCustomElement$2 } from './p-DtOWZESA.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
 
@@ -1,9 +1,9 @@
1
- import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host } from './p-DzRr3BEe.js';
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
- import { d as defineCustomElement$5 } from './p-e74imoE0.js';
4
- import { d as defineCustomElement$4 } from './p-DzIffEfK.js';
5
- import { d as defineCustomElement$3 } from './p-Db_plCmk.js';
6
- import { d as defineCustomElement$2 } from './p-B_lWW-k_.js';
3
+ import { d as defineCustomElement$5 } from './p-Cafw-qR4.js';
4
+ import { d as defineCustomElement$4 } from './p-BtS3tSh2.js';
5
+ import { d as defineCustomElement$3 } from './p-B9QE7fbR.js';
6
+ import { d as defineCustomElement$2 } from './p-DtOWZESA.js';
7
7
 
8
8
  const addDays = (inputDate, days) => {
9
9
  const [year, month, day] = inputDate.split('-').map(Number);
@@ -1,8 +1,8 @@
1
- import { p as proxyCustomElement, H, h, c as Host } from './p-DzRr3BEe.js';
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-B0qn2Tb-.js';
4
- import { d as defineCustomElement$3 } from './p-DzIffEfK.js';
5
- import { d as defineCustomElement$2 } from './p-B_lWW-k_.js';
3
+ import { d as defineCustomElement$4 } from './p-hf6YF2Mx.js';
4
+ import { d as defineCustomElement$3 } from './p-BtS3tSh2.js';
5
+ import { d as defineCustomElement$2 } from './p-DtOWZESA.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
 
@@ -1,4 +1,4 @@
1
- import { S as SdIcon$1, d as defineCustomElement$1 } from './p-DzIffEfK.js';
1
+ import { S as SdIcon$1, d as defineCustomElement$1 } from './p-BtS3tSh2.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-Db_plCmk.js';
1
+ import { S as SdInput$1, d as defineCustomElement$1 } from './p-B9QE7fbR.js';
2
2
 
3
3
  const SdInput = SdInput$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { S as SdPagination$1, d as defineCustomElement$1 } from './p-BHl-WJWF.js';
1
+ import { S as SdPagination$1, d as defineCustomElement$1 } from './p-CMFEznYN.js';
2
2
 
3
3
  const SdPagination = SdPagination$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,8 +1,8 @@
1
- import { p as proxyCustomElement, H, h, F as Fragment } from './p-DzRr3BEe.js';
2
- import { T as TooltipArrow } from './p-BvOGkIDI.js';
3
- import { d as defineCustomElement$4 } from './p-B0qn2Tb-.js';
4
- import { d as defineCustomElement$3 } from './p-DzIffEfK.js';
5
- import { d as defineCustomElement$2 } from './p-BRrY7yTi.js';
1
+ import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
2
+ import { T as TooltipArrow } from './p-wA4KCOG0.js';
3
+ import { d as defineCustomElement$4 } from './p-hf6YF2Mx.js';
4
+ import { d as defineCustomElement$3 } from './p-BtS3tSh2.js';
5
+ import { d as defineCustomElement$2 } from './p-Cs1Kf3Tx.js';
6
6
 
7
7
  const sdPopoverCss = ".sd-popover{position:relative;cursor:pointer;display:inline-block}";
8
8