@sellmate/design-system 0.0.12 → 0.0.13
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.
- package/dist/{esm/resolveColor-BYf-ybt2.js → cjs/color-Oz29vj7L.js} +6 -14
- package/dist/cjs/color-Oz29vj7L.js.map +1 -0
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/resolveColor-CauSLF0s.js +18 -0
- package/dist/{esm/resolveColor-BYf-ybt2.js.map → cjs/resolveColor-CauSLF0s.js.map} +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +3 -2
- package/dist/cjs/sd-badge.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-button.sd-tooltip-portal.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-button_2.cjs.entry.js +222 -0
- package/dist/cjs/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-checkbox_9.cjs.entry.js +1650 -0
- package/dist/cjs/{sd-date-box_2.cjs.entry.js → sd-date-box.cjs.entry.js} +1 -119
- package/dist/cjs/sd-date-box.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-guide.cjs.entry.js +109 -0
- package/dist/cjs/sd-guide.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-pagination_2.cjs.entry.js +4 -4
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-table.cjs.entry.js +2 -2
- package/dist/cjs/sd-tag.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/event-management.js +20 -0
- package/dist/collection/components/event-management.js.map +1 -0
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-checkbox/sd-checkbox.css +2 -1
- package/dist/collection/components/sd-checkbox/sd-checkbox.js +1 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
- package/dist/collection/components/sd-guide/sd-guide.js +2 -2
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css +6 -0
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +3 -4
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js.map +1 -1
- package/dist/collection/components/sd-select/sd-select.js +7 -136
- package/dist/collection/components/sd-select/sd-select.js.map +1 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +1504 -0
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +585 -0
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js.map +1 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +1499 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +754 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js.map +1 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css +1412 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +265 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js.map +1 -0
- package/dist/collection/components/sd-table/sd-table.js +2 -2
- package/dist/collection/components/sd-tag/sd-tag.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/{p-BVMP8_7g.js → p-BBm_kUA7.js} +5 -5
- package/dist/components/{p-BVMP8_7g.js.map → p-BBm_kUA7.js.map} +1 -1
- package/dist/components/{p-D7VWdAch.js → p-BqCRj-SM.js} +3 -3
- package/dist/components/{p-D7VWdAch.js.map → p-BqCRj-SM.js.map} +1 -1
- package/dist/components/p-Cf4fh47I.js +106 -0
- package/dist/components/p-Cf4fh47I.js.map +1 -0
- package/dist/components/{p-hwVfUtSx.js → p-CuDrOaaO.js} +5 -5
- package/dist/components/p-CuDrOaaO.js.map +1 -0
- package/dist/components/{p-CiTGsdkP.js → p-Cw2pw4LC.js} +7 -7
- package/dist/components/{p-CiTGsdkP.js.map → p-Cw2pw4LC.js.map} +1 -1
- package/dist/components/{p-BbUf81Wx.js → p-D0hPGqjM.js} +5 -5
- package/dist/components/{p-BbUf81Wx.js.map → p-D0hPGqjM.js.map} +1 -1
- package/dist/components/{p-exVR_ekC.js → p-D267VRcj.js} +3 -3
- package/dist/components/{p-exVR_ekC.js.map → p-D267VRcj.js.map} +1 -1
- package/dist/components/{p-CI-1-u3u.js → p-DVFPBdfj.js} +3 -3
- package/dist/components/{p-CI-1-u3u.js.map → p-DVFPBdfj.js.map} +1 -1
- package/dist/components/{p-CwnpMbLt.js → p-DfkKMnWF.js} +9 -10
- package/dist/components/p-DfkKMnWF.js.map +1 -0
- package/dist/components/p-sQ8mybM7.js +115 -0
- package/dist/components/p-sQ8mybM7.js.map +1 -0
- package/dist/components/{p-BO6LLSyN.js → p-tyC8W4sw.js} +3 -3
- package/dist/components/{p-BO6LLSyN.js.map → p-tyC8W4sw.js.map} +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-picker.js +5 -5
- package/dist/components/sd-date-range-picker.js +5 -5
- package/dist/components/sd-guide.js +5 -5
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +5 -5
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-select-multiple-group.d.ts +11 -0
- package/dist/components/sd-select-multiple-group.js +389 -0
- package/dist/components/sd-select-multiple-group.js.map +1 -0
- package/dist/components/sd-select-multiple.d.ts +11 -0
- package/dist/components/sd-select-multiple.js +335 -0
- package/dist/components/sd-select-multiple.js.map +1 -0
- package/dist/components/sd-select-option-group.d.ts +11 -0
- package/dist/components/sd-select-option-group.js +9 -0
- package/dist/components/sd-select-option-group.js.map +1 -0
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select.js +14 -136
- package/dist/components/sd-select.js.map +1 -1
- package/dist/components/sd-table.js +8 -8
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-4cd267c5.entry.js → p-02d30a1b.entry.js} +2 -2
- package/dist/design-system/p-0529b7d6.entry.js +2 -0
- package/dist/design-system/p-0529b7d6.entry.js.map +1 -0
- package/dist/design-system/{p-fe6d6d27.entry.js → p-131f639a.entry.js} +2 -2
- package/dist/design-system/p-3fe6dda9.entry.js +2 -0
- package/dist/design-system/p-3fe6dda9.entry.js.map +1 -0
- package/dist/design-system/p-52454cc4.entry.js +2 -0
- package/dist/design-system/p-52454cc4.entry.js.map +1 -0
- package/dist/design-system/p-70a394fe.entry.js +2 -0
- package/dist/design-system/p-70a394fe.entry.js.map +1 -0
- package/dist/design-system/p-7ae03d45.entry.js +2 -0
- package/dist/design-system/p-7ae03d45.entry.js.map +1 -0
- package/dist/design-system/p-BoLmB6pG.js +2 -0
- package/dist/design-system/{p-BYf-ybt2.js.map → p-BoLmB6pG.js.map} +1 -1
- package/dist/design-system/{p-BYf-ybt2.js → p-CgyTlXBV.js} +2 -2
- package/dist/design-system/p-CgyTlXBV.js.map +1 -0
- package/dist/design-system/{p-5af93f6e.entry.js → p-a7ef9b22.entry.js} +2 -2
- package/dist/design-system/{p-7dcff5f4.entry.js → p-ab46652a.entry.js} +2 -2
- package/dist/design-system/{p-c89d383a.entry.js → p-b5abb919.entry.js} +2 -2
- package/dist/design-system/{p-585f1e0c.entry.js → p-cdaa51d7.entry.js} +2 -2
- package/dist/design-system/sd-badge.entry.esm.js.map +1 -1
- package/dist/design-system/sd-button.sd-tooltip-portal.entry.esm.js.map +1 -0
- package/dist/design-system/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.esm.js.map +1 -0
- package/dist/design-system/sd-date-box.entry.esm.js.map +1 -0
- package/dist/design-system/sd-guide.entry.esm.js.map +1 -0
- package/dist/{cjs/resolveColor-DxvExwgo.js → esm/color-CgyTlXBV.js} +4 -17
- package/dist/esm/color-CgyTlXBV.js.map +1 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/resolveColor-CswQ9y2Q.js +16 -0
- package/dist/{cjs/resolveColor-DxvExwgo.js.map → esm/resolveColor-CswQ9y2Q.js.map} +1 -1
- package/dist/esm/sd-badge.entry.js +3 -2
- package/dist/esm/sd-badge.entry.js.map +1 -1
- package/dist/esm/sd-button.sd-tooltip-portal.entry.js.map +1 -0
- package/dist/esm/sd-button_2.entry.js +219 -0
- package/dist/esm/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.js.map +1 -0
- package/dist/esm/sd-checkbox_9.entry.js +1640 -0
- package/dist/esm/{sd-date-box_2.entry.js → sd-date-box.entry.js} +3 -120
- package/dist/esm/sd-date-box.entry.js.map +1 -0
- package/dist/esm/sd-date-picker.entry.js +2 -2
- package/dist/esm/sd-date-range-picker.entry.js +2 -2
- package/dist/esm/sd-guide.entry.js +107 -0
- package/dist/esm/sd-guide.entry.js.map +1 -0
- package/dist/esm/sd-pagination_2.entry.js +4 -4
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-table.entry.js +2 -2
- package/dist/esm/sd-tag.entry.js +1 -1
- package/dist/types/components/event-management.d.ts +6 -0
- package/dist/types/components/sd-select/sd-select.d.ts +0 -6
- package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts +54 -0
- package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +75 -0
- package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts +24 -0
- package/dist/types/components.d.ts +336 -12
- package/hydrate/index.js +759 -72
- package/hydrate/index.mjs +759 -72
- package/package.json +2 -2
- package/dist/cjs/sd-button.sd-guide.sd-icon.sd-portal.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-button_4.cjs.entry.js +0 -587
- package/dist/cjs/sd-checkbox.cjs.entry.js +0 -81
- package/dist/cjs/sd-checkbox.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-date-box.sd-input.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-select-option.cjs.entry.js +0 -55
- package/dist/cjs/sd-select-option.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-select.cjs.entry.js +0 -371
- package/dist/cjs/sd-select.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-tooltip-portal.cjs.entry.js +0 -158
- package/dist/cjs/sd-tooltip-portal.entry.cjs.js.map +0 -1
- package/dist/components/p-CwnpMbLt.js.map +0 -1
- package/dist/components/p-hwVfUtSx.js.map +0 -1
- package/dist/design-system/p-3824f9a6.entry.js +0 -2
- package/dist/design-system/p-3824f9a6.entry.js.map +0 -1
- package/dist/design-system/p-71ac64b0.entry.js +0 -2
- package/dist/design-system/p-71ac64b0.entry.js.map +0 -1
- package/dist/design-system/p-9f6aa159.entry.js +0 -2
- package/dist/design-system/p-9f6aa159.entry.js.map +0 -1
- package/dist/design-system/p-bfd17f46.entry.js +0 -2
- package/dist/design-system/p-bfd17f46.entry.js.map +0 -1
- package/dist/design-system/p-c7b6d94d.entry.js +0 -2
- package/dist/design-system/p-c7b6d94d.entry.js.map +0 -1
- package/dist/design-system/p-ca8e64cf.entry.js +0 -2
- package/dist/design-system/p-ca8e64cf.entry.js.map +0 -1
- package/dist/design-system/p-d4395043.entry.js +0 -2
- package/dist/design-system/p-d4395043.entry.js.map +0 -1
- package/dist/design-system/sd-button.sd-guide.sd-icon.sd-portal.entry.esm.js.map +0 -1
- package/dist/design-system/sd-checkbox.entry.esm.js.map +0 -1
- package/dist/design-system/sd-date-box.sd-input.entry.esm.js.map +0 -1
- package/dist/design-system/sd-select-option.entry.esm.js.map +0 -1
- package/dist/design-system/sd-select.entry.esm.js.map +0 -1
- package/dist/design-system/sd-tooltip-portal.entry.esm.js.map +0 -1
- package/dist/esm/sd-button.sd-guide.sd-icon.sd-portal.entry.js.map +0 -1
- package/dist/esm/sd-button_4.entry.js +0 -582
- package/dist/esm/sd-checkbox.entry.js +0 -79
- package/dist/esm/sd-checkbox.entry.js.map +0 -1
- package/dist/esm/sd-date-box.sd-input.entry.js.map +0 -1
- package/dist/esm/sd-select-option.entry.js +0 -53
- package/dist/esm/sd-select-option.entry.js.map +0 -1
- package/dist/esm/sd-select.entry.js +0 -369
- package/dist/esm/sd-select.entry.js.map +0 -1
- package/dist/esm/sd-tooltip-portal.entry.js +0 -156
- package/dist/esm/sd-tooltip-portal.entry.js.map +0 -1
- /package/dist/design-system/{p-4cd267c5.entry.js.map → p-02d30a1b.entry.js.map} +0 -0
- /package/dist/design-system/{p-fe6d6d27.entry.js.map → p-131f639a.entry.js.map} +0 -0
- /package/dist/design-system/{p-5af93f6e.entry.js.map → p-a7ef9b22.entry.js.map} +0 -0
- /package/dist/design-system/{p-7dcff5f4.entry.js.map → p-ab46652a.entry.js.map} +0 -0
- /package/dist/design-system/{p-c89d383a.entry.js.map → p-b5abb919.entry.js.map} +0 -0
- /package/dist/design-system/{p-585f1e0c.entry.js.map → p-cdaa51d7.entry.js.map} +0 -0
package/hydrate/index.js
CHANGED
|
@@ -3682,7 +3682,7 @@ class SdBadge {
|
|
|
3682
3682
|
label = '';
|
|
3683
3683
|
render() {
|
|
3684
3684
|
const resolvedColor = resolveColor(this.color);
|
|
3685
|
-
return (hAsync(Host, { key: '
|
|
3685
|
+
return (hAsync(Host, { key: 'f9656554c449b25e8638249cf61c77ae904a89cc' }, hAsync("div", { key: '526b30ebd4f299032331f2245ef08660ae379dc5', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'dbf9720ed8d99c691af28bc7adc159c62b74ff77', class: "sd-badge__dot" }), hAsync("div", { key: 'b3438ebce29a11c80e84a9d6c06e78fc1ca700f9', class: "sd-badge__label" }, this.label))));
|
|
3686
3686
|
}
|
|
3687
3687
|
static get style() { return sdBadgeCss; }
|
|
3688
3688
|
static get cmpMeta() { return {
|
|
@@ -3782,7 +3782,7 @@ class SdButton {
|
|
|
3782
3782
|
}; }
|
|
3783
3783
|
}
|
|
3784
3784
|
|
|
3785
|
-
const sdCheckboxCss = ".sd-checkbox.sc-sd-checkbox{line-height:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px;position:relative;cursor:pointer}.sd-checkbox.sc-sd-checkbox>input.sc-sd-checkbox{display:none}.sd-checkbox.sc-sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg.sc-sd-checkbox{background:#005cc9}.sd-checkbox.sc-sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg.sc-sd-checkbox{border:1px solid #0075ff;background:#d9eaff}.sd-checkbox.sc-sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg.sc-sd-checkbox{border:1px solid transparent;background:#eeeeee}.sd-checkbox__bg.sc-sd-checkbox{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}.sd-checkbox__label.sc-sd-checkbox{font-size:12px;color:#333333;line-height:20px}.sd-checkbox--checked.sd-checkbox--disabled.sc-sd-checkbox .sd-checkbox__bg.sc-sd-checkbox{background:#eeeeee;border:1px solid #cccccc !important}.sd-checkbox--checked.sc-sd-checkbox .sd-checkbox__bg.sc-sd-checkbox{border:
|
|
3785
|
+
const sdCheckboxCss = ".sd-checkbox.sc-sd-checkbox{line-height:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px;position:relative;cursor:pointer}.sd-checkbox.sc-sd-checkbox>input.sc-sd-checkbox{display:none}.sd-checkbox.sc-sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg.sc-sd-checkbox{border-color:1px solid #005cc9;background:#005cc9}.sd-checkbox.sc-sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg.sc-sd-checkbox{border:1px solid #0075ff;background:#d9eaff}.sd-checkbox.sc-sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg.sc-sd-checkbox{border:1px solid transparent;background:#eeeeee}.sd-checkbox__bg.sc-sd-checkbox{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}.sd-checkbox__label.sc-sd-checkbox{font-size:12px;color:#333333;line-height:20px}.sd-checkbox--checked.sd-checkbox--disabled.sc-sd-checkbox .sd-checkbox__bg.sc-sd-checkbox{background:#eeeeee;border:1px solid #cccccc !important}.sd-checkbox--checked.sc-sd-checkbox .sd-checkbox__bg.sc-sd-checkbox{border:1px solid #0075ff;background:#0075ff}.sd-checkbox--unchecked.sc-sd-checkbox .sd-checkbox__bg.sc-sd-checkbox{background:white}.sd-checkbox--disabled.sc-sd-checkbox{cursor:not-allowed}.sd-checkbox--disabled.sc-sd-checkbox .sd-checkbox__bg.sc-sd-checkbox{background:#eeeeee;border:1px solid #cccccc !important}";
|
|
3786
3786
|
|
|
3787
3787
|
class SdCheckbox {
|
|
3788
3788
|
constructor(hostRef) {
|
|
@@ -3849,7 +3849,7 @@ class SdCheckbox {
|
|
|
3849
3849
|
this.sdChange.emit(newValue);
|
|
3850
3850
|
};
|
|
3851
3851
|
render() {
|
|
3852
|
-
return (hAsync(Host, { key: '
|
|
3852
|
+
return (hAsync(Host, { key: '6e88ca34b4464d33b0aa54880eff5821d5c612d9' }, hAsync("label", { key: '392dc3fe13ef18eb34625b830702f390131d2bab', class: this.getCheckboxClasses() }, hAsync("input", { key: 'ed84bc69e4928488cf1ae76e62b0cbea4ca6a636', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: this.handleChange }), hAsync("div", { key: 'e434643d9bda619da1af184ea93b333364cc4972', class: "sd-checkbox__bg", style: this.checkboxStyle }, this.isChecked ? (hAsync("sd-icon", { name: "check", size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && hAsync("span", { key: '84d72a707e97e7b22a2c3183353bc295340ba490', class: "sd-checkbox__label" }, this.label))));
|
|
3853
3853
|
}
|
|
3854
3854
|
static get watchers() { return {
|
|
3855
3855
|
"checked": ["watchValueHandler"]
|
|
@@ -4071,9 +4071,9 @@ class SdDatePicker {
|
|
|
4071
4071
|
this.isOpen = false;
|
|
4072
4072
|
};
|
|
4073
4073
|
render() {
|
|
4074
|
-
return (hAsync(Host, { key: '
|
|
4074
|
+
return (hAsync(Host, { key: '31250b271bdfe3c4ce671e5a337e1eefbff206d4', class: "sd-date-picker" }, hAsync("sd-input", { key: '19a53a715cf767cfaa78bcbb1177618fa3333305', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
4075
4075
|
margin: '0 0 0 8px',
|
|
4076
|
-
}, onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '
|
|
4076
|
+
}, onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '7cb545aa2caf117b9681bea5a1cab5c21f5804df', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: '08c8ec69c57aa9899e3c93978965883525fe635d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: '64f68877a65206743517e6db5b3221527128597b', class: "sd-date-picker__menu" }, hAsync("div", { key: 'f527835c913d10eadf17bb8ef4b7068675c23bc2', class: "sd-date-picker__header" }, hAsync("div", { key: 'ecd393d337e3a0ffc3915e5a02de10a0b429e744', class: "year-nav" }, hAsync("button", { key: '72f9f4ce5f04a32d54d74666f83add668c7c91cd', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, hAsync("sd-icon", { key: '1331873a57d9658704fc8c14ec4db51713759aa4', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '8369803e76f17dace570294b0469a8cdc889dd07', class: "year-nav__current" }, this.currentYear), hAsync("button", { key: '2c6dde370f92cdc6b43deb159cdd44f0ff61b463', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, hAsync("sd-icon", { key: 'e0ada642507fadecc58cc1b19dce43a5a96d61fe', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: '8bef4214917e837edf0f6d5ae6c80d2b8bc0abc7', class: "month-nav" }, hAsync("button", { key: '1e4fef6ee5fc4da3aac9c429da37b1a5be6b4059', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, hAsync("sd-icon", { key: '4a1537b2afb6cbd4653046416a2d0a3a0424e09e', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("span", { key: '39f866e69fab5c86589f039773abdc9267748242', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), hAsync("button", { key: 'cbc177a8850d37ba170eb85d9cf330af198066e4', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, hAsync("sd-icon", { key: '530bd26b28a779b25e72fe90f4a77d8b2e2f0311', name: "arrowRight", size: "12", color: "#CCCCCC" })))), hAsync("div", { key: '283742d67f2916e4fe44efea649442872681506e', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("div", { key: day, class: "day" }, day)))), hAsync("div", { key: '6fe54b4404d793ca629574b2eeac9b05bff2afde', class: "sd-date-picker__body" }, [
|
|
4077
4077
|
...this.calendar.prevMonthDays,
|
|
4078
4078
|
...this.calendar.days,
|
|
4079
4079
|
...this.calendar.afterMonthDays,
|
|
@@ -4246,9 +4246,9 @@ class SdDateRangePicker {
|
|
|
4246
4246
|
this.isOpen = false;
|
|
4247
4247
|
};
|
|
4248
4248
|
render() {
|
|
4249
|
-
return (hAsync(Host, { key: '
|
|
4249
|
+
return (hAsync(Host, { key: '60ab93954c070ffbbc8c5c81d39b9e2202d682fa', class: "sd-date-range-picker" }, hAsync("sd-input", { key: 'df6974fedf73ec6de8c0aec7bf27bd87088065bf', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
4250
4250
|
margin: '0 0 0 8px',
|
|
4251
|
-
}, onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '
|
|
4251
|
+
}, onClick: () => this.openMenu() }, hAsync("sd-icon", { key: '79d0e2596a741260072d5331c13e5afb94f09b9a', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (hAsync("sd-portal", { key: 'e16e7401cd86bcb63d9278b6ddb00bd8b193fa52', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, hAsync("div", { key: 'beb8f1550889104fccb9e240588d9ec9b58a85fa', class: "sd-date-range-picker__menu" }, hAsync("div", { key: '28cfcef75b4e5485098dff0e322cdd2725ce6abd', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, hAsync("button", { key: '77452ba7a29869efcb59a42214927a932ed91da7', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, hAsync("sd-icon", { key: '2a526f4f91b1814be3fd69f9ef7fe019cfa212c9', name: "arrowLeft", size: "12", color: "#CCCCCC" })), hAsync("div", { key: 'dd721be8b6a0040ce9d7d18f4cb4663ca8b66577', class: "header-label" }, this.prevYear), hAsync("button", { key: '2b2d6ce769945ce408c019be1e0a9ea3e18c7ed8', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, hAsync("sd-icon", { key: '59107ca17a8dc3f4b6c6f126fb6a8dfba9b43b4e', name: "arrowRight", size: "12", color: "#CCCCCC" }))), hAsync("div", { key: 'e11121959ec1b0d7531ae8fe654d23b10e417802', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (hAsync(Fragment, null, index === 1 && hAsync("div", { class: "separator" }), hAsync("div", { key: index, class: "calendar-container" }, hAsync("div", { class: "calendar-header" }, hAsync("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, hAsync("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
|
|
4252
4252
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
4253
4253
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), hAsync("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (hAsync("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), hAsync("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (hAsync("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
|
|
4254
4254
|
this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===
|
|
@@ -4349,7 +4349,7 @@ class SdGuide {
|
|
|
4349
4349
|
};
|
|
4350
4350
|
render() {
|
|
4351
4351
|
const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
|
|
4352
|
-
return (hAsync(Host, { key: '
|
|
4352
|
+
return (hAsync(Host, { key: 'd3975227833fe5304ee63c26989724bf505e4e6c', style: this.getGuideStyle() }, hAsync("sd-button", { key: '7d9c8788d6022f718e986c1a30591f5fcf7dab91', ref: el => (this.guideRef = el), class: this.getGuideClasses(), variant: "outline", label: SdGuide.guideTitle[this.type], size: "md", color: "var(--guide-color)", icon: iconName, iconColor: iconColor, iconSize: iconSize, iconStyle: { marginRight: '4px' }, buttonStyle: {
|
|
4353
4353
|
height: '28px',
|
|
4354
4354
|
minHeight: '28px',
|
|
4355
4355
|
padding: '4px 12px',
|
|
@@ -4359,7 +4359,7 @@ class SdGuide {
|
|
|
4359
4359
|
fontSize: '12px',
|
|
4360
4360
|
fontWeight: '400',
|
|
4361
4361
|
backgroundColor: 'var(--guide-background)',
|
|
4362
|
-
}, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: '
|
|
4362
|
+
}, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (hAsync("sd-portal", { key: 'f0b87eea6c9abe2b61d4e3a30b931b54585219ae', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 24] }, hAsync("div", { key: 'b151630790e32f2da7f54307853d728ac08d8cfd', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, hAsync("sd-button", { key: 'e265b60f46ed7f76e9c021d5c673d44ed02f0ee6', class: "sd-guide__popup__close", icon: "close", color: colors$1.grey_65, size: "md", variant: "ghost", noHover: true, buttonStyle: { padding: '0px', minHeight: '0px' }, onSdClick: this.closeDropdown }), hAsync("div", { key: '50406979d5c832abb262ea121b3c1cd0fb464b77', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '2e0fd5798d96b58c732a88e4917a7c9d47e28901', name: "helpOutline", size: 24, color: colors$1.green_65 }), hAsync("h3", { key: 'ab6f05250c499dc741b118ddf346857f2c55969f', class: "sd-guide__popup__title" }, this.popupTitle || SdGuide.guideTitle[this.type])), hAsync("ul", { key: '6676f25ca3f75a5fb306013ad1efc33e5ccac1c2', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
4363
4363
|
}
|
|
4364
4364
|
// 현재 2depth까지만 스타일 적용
|
|
4365
4365
|
renderListItem(message, depth = 0) {
|
|
@@ -4703,7 +4703,7 @@ class SdIcon {
|
|
|
4703
4703
|
}
|
|
4704
4704
|
render() {
|
|
4705
4705
|
const IconComponent = Icons[this.name]?.[this.size];
|
|
4706
|
-
return (hAsync("i", { key: '
|
|
4706
|
+
return (hAsync("i", { key: '2618a42977f5d3340d9e2daf15b4ddda67689cf5', class: this.getIconClasses(), style: this.iconStyle }, hAsync(IconComponent, { key: 'f8ff1fe92433c2ba82fed4223fc6e4678e52c34b', color: this.resolvedColor })));
|
|
4707
4707
|
}
|
|
4708
4708
|
static get style() { return sdIconCss; }
|
|
4709
4709
|
static get cmpMeta() { return {
|
|
@@ -4823,11 +4823,11 @@ class SdInput {
|
|
|
4823
4823
|
'--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
4824
4824
|
}
|
|
4825
4825
|
: {};
|
|
4826
|
-
return (hAsync(Host, { key: '
|
|
4826
|
+
return (hAsync(Host, { key: 'd96f6ba31f2a6933ad3b079f096bbf90f9a17fb9', style: inputWidth }, this.label && hAsync("div", { key: '02758b3e02a680f1287e9dddf1d4a7ce5c1fd9c2', class: "sd-input__label" }, this.label), hAsync("label", { key: 'fbac7be9d0de9041dae55be4c8ed88d9fa9019de', class: {
|
|
4827
4827
|
'sd-input': true,
|
|
4828
4828
|
[this.getInputStatus()]: true,
|
|
4829
4829
|
'sd-input--barcode': !!this.barcode,
|
|
4830
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: '
|
|
4830
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, hAsync("slot", { key: '1d0b462c1b57372b864d4991109b6d7bb08f7355', name: "prefix" }), hAsync("input", { key: '25f3186a06e7535b95eebf6aa553f5e50a091d97', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), hAsync("slot", { key: 'cdbc64c69645c0585ad5835bfcc36af54c2de33f', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-icon", { key: 'f6088690c7d34249509dffedd2fe6b3eb280dd01', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
|
|
4831
4831
|
this.internalValue = '';
|
|
4832
4832
|
this.sdChange?.emit(this.internalValue);
|
|
4833
4833
|
this.sdInput?.emit(this.internalValue);
|
|
@@ -4947,12 +4947,12 @@ class SdPagination {
|
|
|
4947
4947
|
}
|
|
4948
4948
|
}
|
|
4949
4949
|
render() {
|
|
4950
|
-
return (hAsync("div", { key: '
|
|
4950
|
+
return (hAsync("div", { key: 'a59ec8c79042ac6b245dc796099b18f574a59045', class: this.paginationClasses }, hAsync("div", { key: 'd4d951dc0f5c8b5212a21eaa02389344768ad15c', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
4951
4951
|
'pagination-btn': true,
|
|
4952
4952
|
'pagination-btn--selected': this.currentPage === n,
|
|
4953
4953
|
}, disabled: this.currentPage === n, style: {
|
|
4954
4954
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
4955
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '
|
|
4955
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '90070d87eae5ba4d7e45c8b1163c6d910b202427', class: "append-btns" }, this.renderNextButtons())));
|
|
4956
4956
|
}
|
|
4957
4957
|
static get watchers() { return {
|
|
4958
4958
|
"currentPage": ["onPropChange"],
|
|
@@ -5011,11 +5011,11 @@ class SdPopover {
|
|
|
5011
5011
|
this.showPopover = false;
|
|
5012
5012
|
};
|
|
5013
5013
|
render() {
|
|
5014
|
-
return (hAsync(Fragment, { key: '
|
|
5014
|
+
return (hAsync(Fragment, { key: 'e058418533929563a9ea1991823ec5bf2406e5f6' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (hAsync("sd-tooltip-portal", { key: 'debecbef44714e705bf87bded2b7a85d016faba1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '26afb49bf9bc4c8227427a9fe93280e5435d20fc', class: {
|
|
5015
5015
|
'sd-popover-menu': true,
|
|
5016
5016
|
[`sd-popover-menu--${this.placement}`]: true,
|
|
5017
5017
|
[this.menuClass]: !!this.menuClass,
|
|
5018
|
-
} }, hAsync("i", { key: '
|
|
5018
|
+
} }, hAsync("i", { key: '52dd82b64d1d4ae5ec3741febb07ef553e50f42d', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'e94ac6ea51e421546a813406d1821e6f3727e7bd' })), hAsync("div", { key: '0abdb59077846308b2ccff14339eb193f8073433', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: '9b0f289d9f7dbfb09c3e0a8b4162af97aef53e73', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '6311f5e4a7ae9699d65d344f0b407b3715f2e072', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '65b7ea1a67400b1887248a615fdb1ba93928e34a', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '9032a6f6381cdf0b4bd3df689280aadb8357ffa6', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '6ac75128090091c510065cb7317478722a35de7c', name: "close", size: "12", color: "#AAAAAA" }))))))));
|
|
5019
5019
|
}
|
|
5020
5020
|
static get watchers() { return {
|
|
5021
5021
|
"show": ["watchShowHandler"]
|
|
@@ -5145,7 +5145,7 @@ class SdPortal {
|
|
|
5145
5145
|
this.sdClose.emit();
|
|
5146
5146
|
}
|
|
5147
5147
|
render() {
|
|
5148
|
-
return hAsync("slot", { key: '
|
|
5148
|
+
return hAsync("slot", { key: '2423eed047adb72c699ad363c5f756820f0ccad2' });
|
|
5149
5149
|
}
|
|
5150
5150
|
static get cmpMeta() { return {
|
|
5151
5151
|
"$flags$": 772,
|
|
@@ -5296,6 +5296,558 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5296
5296
|
disabled = false;
|
|
5297
5297
|
clearable = false;
|
|
5298
5298
|
searchable = false;
|
|
5299
|
+
// props - custom slots
|
|
5300
|
+
optionRenderer;
|
|
5301
|
+
// states
|
|
5302
|
+
filteredOptions = this.options;
|
|
5303
|
+
isOpen = false;
|
|
5304
|
+
searchText = null;
|
|
5305
|
+
itemIndex = -1;
|
|
5306
|
+
isScrolled = false;
|
|
5307
|
+
// events
|
|
5308
|
+
sdChange;
|
|
5309
|
+
dropDownShow;
|
|
5310
|
+
selectRef;
|
|
5311
|
+
searchRef;
|
|
5312
|
+
optionRef;
|
|
5313
|
+
dropdownRef;
|
|
5314
|
+
valueChanged() {
|
|
5315
|
+
const selectedOption = this.getSelectedOption();
|
|
5316
|
+
this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
|
|
5317
|
+
}
|
|
5318
|
+
optionsChanged() {
|
|
5319
|
+
this.filteredOptions = this.options;
|
|
5320
|
+
this.filterOptions();
|
|
5321
|
+
}
|
|
5322
|
+
searchTextChanged() {
|
|
5323
|
+
this.filterOptions();
|
|
5324
|
+
}
|
|
5325
|
+
async itemIndexChanged(newIndex, oldIndex) {
|
|
5326
|
+
if (this.searchable) {
|
|
5327
|
+
const searchInput = await this.getNativeInputElement();
|
|
5328
|
+
if (this.itemIndex === -1) {
|
|
5329
|
+
searchInput?.focus();
|
|
5330
|
+
return;
|
|
5331
|
+
}
|
|
5332
|
+
else if (searchInput?.matches(':focus')) {
|
|
5333
|
+
searchInput?.blur();
|
|
5334
|
+
}
|
|
5335
|
+
}
|
|
5336
|
+
const optionElements = this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];
|
|
5337
|
+
const currentItem = optionElements?.[this.itemIndex];
|
|
5338
|
+
if (!currentItem || !this.isOpen)
|
|
5339
|
+
return;
|
|
5340
|
+
this.optionRef = currentItem;
|
|
5341
|
+
const isOptionDisabled = await this.optionRef.isDisabled();
|
|
5342
|
+
if (isOptionDisabled) {
|
|
5343
|
+
newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
|
|
5344
|
+
return;
|
|
5345
|
+
}
|
|
5346
|
+
this.scrollToOption(currentItem);
|
|
5347
|
+
}
|
|
5348
|
+
componentWillLoad() {
|
|
5349
|
+
// props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
|
|
5350
|
+
this.filteredOptions = this.options;
|
|
5351
|
+
this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
|
|
5352
|
+
}
|
|
5353
|
+
disconnectedCallback() {
|
|
5354
|
+
this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
|
|
5355
|
+
}
|
|
5356
|
+
async isOpenChanged() {
|
|
5357
|
+
// Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
|
|
5358
|
+
this.onDropdownToggle(this.isOpen);
|
|
5359
|
+
const selectedOption = this.getSelectedOption();
|
|
5360
|
+
if (!selectedOption) {
|
|
5361
|
+
this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;
|
|
5362
|
+
}
|
|
5363
|
+
else {
|
|
5364
|
+
this.itemIndex = this.options.indexOf(selectedOption);
|
|
5365
|
+
}
|
|
5366
|
+
this.dropDownShow?.emit({ isOpen: this.isOpen });
|
|
5367
|
+
if (this.isOpen === false)
|
|
5368
|
+
return;
|
|
5369
|
+
await new Promise(resolve => setTimeout(resolve, 10));
|
|
5370
|
+
const optionElements = this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];
|
|
5371
|
+
const currentItem = optionElements?.[this.itemIndex];
|
|
5372
|
+
if (this.searchable) {
|
|
5373
|
+
const searchInput = await this.getNativeInputElement();
|
|
5374
|
+
searchInput?.focus();
|
|
5375
|
+
}
|
|
5376
|
+
if (!currentItem)
|
|
5377
|
+
return;
|
|
5378
|
+
await new Promise(resolve => setTimeout(resolve, 10));
|
|
5379
|
+
this.scrollToOption(currentItem);
|
|
5380
|
+
}
|
|
5381
|
+
handleDocumentClick(event) {
|
|
5382
|
+
if (!this.selectRef?.contains(event.target)) {
|
|
5383
|
+
this.isOpen = false;
|
|
5384
|
+
}
|
|
5385
|
+
}
|
|
5386
|
+
handleDocumentKeydown(keyboardEvent) {
|
|
5387
|
+
keyboardEvent.stopPropagation();
|
|
5388
|
+
const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
|
|
5389
|
+
if (!targetKey.includes(keyboardEvent.key))
|
|
5390
|
+
return;
|
|
5391
|
+
keyboardEvent.preventDefault();
|
|
5392
|
+
switch (keyboardEvent.key) {
|
|
5393
|
+
case 'ArrowDown':
|
|
5394
|
+
case 'ArrowUp':
|
|
5395
|
+
const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
|
|
5396
|
+
const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
|
|
5397
|
+
this.itemIndex = nextIndex;
|
|
5398
|
+
break;
|
|
5399
|
+
case 'Enter':
|
|
5400
|
+
const selectedOption = this.filteredOptions[this.itemIndex];
|
|
5401
|
+
if (selectedOption && !selectedOption.disabled) {
|
|
5402
|
+
this.value = selectedOption.value;
|
|
5403
|
+
this.searchText = null;
|
|
5404
|
+
this.isOpen = false;
|
|
5405
|
+
}
|
|
5406
|
+
break;
|
|
5407
|
+
case 'Escape':
|
|
5408
|
+
this.isOpen = false;
|
|
5409
|
+
break;
|
|
5410
|
+
}
|
|
5411
|
+
}
|
|
5412
|
+
// closeDropdown 메서드 구현 (Manager에서 호출됨)
|
|
5413
|
+
closeDropdown() {
|
|
5414
|
+
this.isOpen = false;
|
|
5415
|
+
}
|
|
5416
|
+
// event handlers
|
|
5417
|
+
handleTriggerClick = (event) => {
|
|
5418
|
+
event.stopPropagation();
|
|
5419
|
+
if (!this.disabled) {
|
|
5420
|
+
this.isOpen = !this.isOpen;
|
|
5421
|
+
this.dropDownShow?.emit({ isOpen: this.isOpen });
|
|
5422
|
+
}
|
|
5423
|
+
};
|
|
5424
|
+
handleOptionClick = (detail) => {
|
|
5425
|
+
const { option, event } = detail;
|
|
5426
|
+
event.stopPropagation();
|
|
5427
|
+
if (!option.disabled) {
|
|
5428
|
+
this.value = option.value;
|
|
5429
|
+
this.isOpen = false;
|
|
5430
|
+
}
|
|
5431
|
+
};
|
|
5432
|
+
filterOptions() {
|
|
5433
|
+
if (!this.searchText || this.searchText.trim() === '') {
|
|
5434
|
+
// 검색어가 없으면 전체 옵션 표시
|
|
5435
|
+
this.filteredOptions = this.options;
|
|
5436
|
+
}
|
|
5437
|
+
else {
|
|
5438
|
+
// 검색어가 있으면 필터링
|
|
5439
|
+
this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
|
|
5440
|
+
}
|
|
5441
|
+
}
|
|
5442
|
+
getSelectedOption() {
|
|
5443
|
+
return this.options.find(option => option.value === this.value);
|
|
5444
|
+
}
|
|
5445
|
+
handleDropdownScroll = (event) => {
|
|
5446
|
+
const target = event.target;
|
|
5447
|
+
const scrollTop = target.scrollTop;
|
|
5448
|
+
// 스크롤이 조금이라도 되면 그림자 표시
|
|
5449
|
+
this.isScrolled = scrollTop > 0;
|
|
5450
|
+
};
|
|
5451
|
+
async getNativeInputElement() {
|
|
5452
|
+
if (this.searchRef) {
|
|
5453
|
+
return this.searchRef.getNativeElement();
|
|
5454
|
+
}
|
|
5455
|
+
return null;
|
|
5456
|
+
}
|
|
5457
|
+
scrollToOption(optionElement) {
|
|
5458
|
+
if (!this.dropdownRef || !optionElement)
|
|
5459
|
+
return;
|
|
5460
|
+
const dropdown = this.dropdownRef;
|
|
5461
|
+
const optionTop = optionElement.offsetTop;
|
|
5462
|
+
const optionHeight = optionElement.offsetHeight;
|
|
5463
|
+
const dropdownScrollTop = dropdown.scrollTop;
|
|
5464
|
+
const dropdownHeight = dropdown.clientHeight;
|
|
5465
|
+
const searchContainer = dropdown.querySelector('.sd-select__search-container');
|
|
5466
|
+
const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
|
|
5467
|
+
const visibleTop = dropdownScrollTop + searchOffset;
|
|
5468
|
+
const visibleBottom = dropdownScrollTop + dropdownHeight;
|
|
5469
|
+
if (optionTop < visibleTop) {
|
|
5470
|
+
dropdown.scrollTop = optionTop - searchOffset;
|
|
5471
|
+
}
|
|
5472
|
+
else if (optionTop + optionHeight > visibleBottom) {
|
|
5473
|
+
dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
|
|
5474
|
+
}
|
|
5475
|
+
}
|
|
5476
|
+
// render method
|
|
5477
|
+
render() {
|
|
5478
|
+
const style = {
|
|
5479
|
+
'--select-width': this.width || '200px',
|
|
5480
|
+
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
5481
|
+
};
|
|
5482
|
+
return (hAsync(Host, { key: '34242e3aff012b7f77ae0f58fc35143d050491e7', style: style }, hAsync("div", { key: 'f713437e9ea2463abb1306a67e89fbb212c03c84', class: {
|
|
5483
|
+
'sd-select': true,
|
|
5484
|
+
'sd-select--open': this.isOpen,
|
|
5485
|
+
'sd-select--disabled': this.disabled,
|
|
5486
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '0ba8978cbfa5972c51f30d8d98760d8f72341555', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
5487
|
+
}
|
|
5488
|
+
renderLabel(label) {
|
|
5489
|
+
if (!label)
|
|
5490
|
+
return null;
|
|
5491
|
+
return hAsync("label", { class: "sd-select__label" }, label);
|
|
5492
|
+
}
|
|
5493
|
+
renderTrigger() {
|
|
5494
|
+
const selectedOption = this.getSelectedOption();
|
|
5495
|
+
return (hAsync("div", { class: "sd-select__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, hAsync("span", { class: "sd-select__value" }, selectedOption ? selectedOption.label : this.placeholder), this.clearable && selectedOption && !this.disabled && (hAsync("sd-icon", { key: "clear-icon", name: "close", size: 10, color: "#888", class: "sd-select__clear", onClick: event => {
|
|
5496
|
+
event.stopPropagation();
|
|
5497
|
+
this.value = null;
|
|
5498
|
+
} })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen } })));
|
|
5499
|
+
}
|
|
5500
|
+
renderDropdown() {
|
|
5501
|
+
if (this.isOpen === false)
|
|
5502
|
+
return null;
|
|
5503
|
+
return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-select__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("div", { class: {
|
|
5504
|
+
'sd-select__search-container': true,
|
|
5505
|
+
'sd-select__search-container--scrolled': this.isScrolled,
|
|
5506
|
+
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
|
|
5507
|
+
this.searchText = String(event?.detail);
|
|
5508
|
+
}, onSdFocus: () => {
|
|
5509
|
+
this.itemIndex = -1;
|
|
5510
|
+
} }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: option.value === this.value, isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail) }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select__option-placeholder' }, this.optionPlaceholder))))));
|
|
5511
|
+
}
|
|
5512
|
+
static get watchers() { return {
|
|
5513
|
+
"value": ["valueChanged"],
|
|
5514
|
+
"options": ["optionsChanged"],
|
|
5515
|
+
"searchText": ["searchTextChanged"],
|
|
5516
|
+
"itemIndex": ["itemIndexChanged"],
|
|
5517
|
+
"isOpen": ["isOpenChanged"]
|
|
5518
|
+
}; }
|
|
5519
|
+
static get style() { return sdSelectCss; }
|
|
5520
|
+
static get cmpMeta() { return {
|
|
5521
|
+
"$flags$": 772,
|
|
5522
|
+
"$tagName$": "sd-select",
|
|
5523
|
+
"$members$": {
|
|
5524
|
+
"value": [1032],
|
|
5525
|
+
"label": [1],
|
|
5526
|
+
"options": [1040],
|
|
5527
|
+
"placeholder": [1],
|
|
5528
|
+
"optionPlaceholder": [1, "option-placeholder"],
|
|
5529
|
+
"width": [1],
|
|
5530
|
+
"dropdownHeight": [1, "dropdown-height"],
|
|
5531
|
+
"disabled": [4],
|
|
5532
|
+
"clearable": [4],
|
|
5533
|
+
"searchable": [4],
|
|
5534
|
+
"optionRenderer": [16],
|
|
5535
|
+
"filteredOptions": [32],
|
|
5536
|
+
"isOpen": [32],
|
|
5537
|
+
"searchText": [32],
|
|
5538
|
+
"itemIndex": [32],
|
|
5539
|
+
"isScrolled": [32]
|
|
5540
|
+
},
|
|
5541
|
+
"$listeners$": undefined,
|
|
5542
|
+
"$lazyBundleId$": "-",
|
|
5543
|
+
"$attrsToReflect$": []
|
|
5544
|
+
}; }
|
|
5545
|
+
}
|
|
5546
|
+
|
|
5547
|
+
const sdSelectMultipleCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}.sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb:hover{background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb:active{background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
|
|
5548
|
+
|
|
5549
|
+
class SdSelectMultiple extends BaseDropdownEvent {
|
|
5550
|
+
constructor(hostRef) {
|
|
5551
|
+
super();
|
|
5552
|
+
registerInstance(this, hostRef);
|
|
5553
|
+
this.sdChange = createEvent(this, "sdChange");
|
|
5554
|
+
this.dropDownShow = createEvent(this, "dropDownShow");
|
|
5555
|
+
}
|
|
5556
|
+
get el() { return getElement(this); }
|
|
5557
|
+
// props
|
|
5558
|
+
value = null;
|
|
5559
|
+
label = '';
|
|
5560
|
+
options = [];
|
|
5561
|
+
placeholder = '선택';
|
|
5562
|
+
optionPlaceholder = '옵션이 없습니다.';
|
|
5563
|
+
width = '200px';
|
|
5564
|
+
dropdownHeight = '260px';
|
|
5565
|
+
disabled = false;
|
|
5566
|
+
clearable = false;
|
|
5567
|
+
searchable = false;
|
|
5568
|
+
useCheckbox = false;
|
|
5569
|
+
// props - custom slots
|
|
5570
|
+
optionRenderer;
|
|
5571
|
+
// states
|
|
5572
|
+
filteredOptions = this.options;
|
|
5573
|
+
isOpen = false;
|
|
5574
|
+
searchText = null;
|
|
5575
|
+
itemIndex = -1;
|
|
5576
|
+
isScrolled = false;
|
|
5577
|
+
// events
|
|
5578
|
+
sdChange;
|
|
5579
|
+
dropDownShow;
|
|
5580
|
+
selectRef;
|
|
5581
|
+
searchRef;
|
|
5582
|
+
optionRef;
|
|
5583
|
+
dropdownRef;
|
|
5584
|
+
valueChanged() {
|
|
5585
|
+
this.sdChange?.emit(this.value);
|
|
5586
|
+
}
|
|
5587
|
+
optionsChanged() {
|
|
5588
|
+
this.filteredOptions = this.options;
|
|
5589
|
+
this.filterOptions();
|
|
5590
|
+
}
|
|
5591
|
+
searchTextChanged() {
|
|
5592
|
+
this.filterOptions();
|
|
5593
|
+
}
|
|
5594
|
+
async itemIndexChanged(newIndex, oldIndex) {
|
|
5595
|
+
if (this.searchable) {
|
|
5596
|
+
const searchInput = await this.getNativeInputElement();
|
|
5597
|
+
if (this.itemIndex === -1) {
|
|
5598
|
+
searchInput?.focus();
|
|
5599
|
+
return;
|
|
5600
|
+
}
|
|
5601
|
+
else if (searchInput?.matches(':focus')) {
|
|
5602
|
+
searchInput?.blur();
|
|
5603
|
+
}
|
|
5604
|
+
}
|
|
5605
|
+
const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || []);
|
|
5606
|
+
const currentItem = optionElements?.[this.itemIndex];
|
|
5607
|
+
if (!currentItem || !this.isOpen)
|
|
5608
|
+
return;
|
|
5609
|
+
this.optionRef = currentItem;
|
|
5610
|
+
const isOptionDisabled = await this.optionRef.isDisabled();
|
|
5611
|
+
if (isOptionDisabled) {
|
|
5612
|
+
newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
|
|
5613
|
+
return;
|
|
5614
|
+
}
|
|
5615
|
+
this.scrollToOption(currentItem);
|
|
5616
|
+
}
|
|
5617
|
+
async isOpenChanged() {
|
|
5618
|
+
// Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
|
|
5619
|
+
this.onDropdownToggle(this.isOpen);
|
|
5620
|
+
const selectedOption = this.getSelectedOption();
|
|
5621
|
+
if (!selectedOption) {
|
|
5622
|
+
this.itemIndex = -1;
|
|
5623
|
+
}
|
|
5624
|
+
else {
|
|
5625
|
+
this.itemIndex = this.options.indexOf(selectedOption[0]);
|
|
5626
|
+
}
|
|
5627
|
+
this.dropDownShow?.emit({ isOpen: this.isOpen });
|
|
5628
|
+
if (this.isOpen === false)
|
|
5629
|
+
return;
|
|
5630
|
+
await new Promise(resolve => setTimeout(resolve, 10));
|
|
5631
|
+
const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
|
|
5632
|
+
const currentItem = optionElements?.[this.itemIndex];
|
|
5633
|
+
// 드롭다운이 열릴 때 검색 입력에 포커스
|
|
5634
|
+
if (this.searchable) {
|
|
5635
|
+
const searchInput = await this.getNativeInputElement();
|
|
5636
|
+
searchInput?.focus();
|
|
5637
|
+
}
|
|
5638
|
+
if (!currentItem)
|
|
5639
|
+
return;
|
|
5640
|
+
await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
|
|
5641
|
+
this.scrollToOption(currentItem);
|
|
5642
|
+
}
|
|
5643
|
+
connectedCallback() {
|
|
5644
|
+
// props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
|
|
5645
|
+
this.filteredOptions = this.options;
|
|
5646
|
+
this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
|
|
5647
|
+
}
|
|
5648
|
+
disconnectedCallback() {
|
|
5649
|
+
this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
|
|
5650
|
+
}
|
|
5651
|
+
handleDocumentClick(event) {
|
|
5652
|
+
if (!this.selectRef?.contains(event.target)) {
|
|
5653
|
+
this.isOpen = false;
|
|
5654
|
+
}
|
|
5655
|
+
}
|
|
5656
|
+
handleDocumentKeydown(keyboardEvent) {
|
|
5657
|
+
keyboardEvent.stopPropagation();
|
|
5658
|
+
const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
|
|
5659
|
+
if (!targetKey.includes(keyboardEvent.key))
|
|
5660
|
+
return;
|
|
5661
|
+
keyboardEvent.preventDefault();
|
|
5662
|
+
switch (keyboardEvent.key) {
|
|
5663
|
+
case 'ArrowDown':
|
|
5664
|
+
case 'ArrowUp':
|
|
5665
|
+
const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
|
|
5666
|
+
const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
|
|
5667
|
+
this.itemIndex = nextIndex;
|
|
5668
|
+
break;
|
|
5669
|
+
case 'Enter':
|
|
5670
|
+
const selectedOption = this.filteredOptions[this.itemIndex];
|
|
5671
|
+
if (selectedOption && !selectedOption.disabled) {
|
|
5672
|
+
this.handleOptionSelection(selectedOption);
|
|
5673
|
+
}
|
|
5674
|
+
break;
|
|
5675
|
+
case 'Escape':
|
|
5676
|
+
this.isOpen = false;
|
|
5677
|
+
break;
|
|
5678
|
+
}
|
|
5679
|
+
}
|
|
5680
|
+
// event handlers
|
|
5681
|
+
handleTriggerClick = (event) => {
|
|
5682
|
+
event.stopPropagation();
|
|
5683
|
+
if (!this.disabled) {
|
|
5684
|
+
this.isOpen = !this.isOpen;
|
|
5685
|
+
this.dropDownShow?.emit({ isOpen: this.isOpen });
|
|
5686
|
+
}
|
|
5687
|
+
};
|
|
5688
|
+
handleOptionClick = (detail) => {
|
|
5689
|
+
const { option, event } = detail;
|
|
5690
|
+
event.stopPropagation();
|
|
5691
|
+
this.handleOptionSelection(option);
|
|
5692
|
+
};
|
|
5693
|
+
filterOptions() {
|
|
5694
|
+
if (!this.searchText || this.searchText.trim() === '') {
|
|
5695
|
+
// 검색어가 없으면 전체 옵션 표시
|
|
5696
|
+
this.filteredOptions = this.options;
|
|
5697
|
+
}
|
|
5698
|
+
else {
|
|
5699
|
+
// 검색어가 있으면 필터링
|
|
5700
|
+
this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
|
|
5701
|
+
}
|
|
5702
|
+
}
|
|
5703
|
+
getSelectedOption() {
|
|
5704
|
+
return this.options.filter(option => this.value?.includes(option));
|
|
5705
|
+
}
|
|
5706
|
+
handleDropdownScroll = (event) => {
|
|
5707
|
+
const target = event.target;
|
|
5708
|
+
const scrollTop = target.scrollTop;
|
|
5709
|
+
// 스크롤이 조금이라도 되면 그림자 표시
|
|
5710
|
+
this.isScrolled = scrollTop > 0;
|
|
5711
|
+
};
|
|
5712
|
+
async getNativeInputElement() {
|
|
5713
|
+
if (this.searchRef) {
|
|
5714
|
+
return this.searchRef.getNativeElement();
|
|
5715
|
+
}
|
|
5716
|
+
return null;
|
|
5717
|
+
}
|
|
5718
|
+
handleOptionSelection = (option) => {
|
|
5719
|
+
if (!option || option.disabled)
|
|
5720
|
+
return;
|
|
5721
|
+
const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
|
|
5722
|
+
if (isAlreadySelected) {
|
|
5723
|
+
// 이미 선택된 옵션인 경우, 선택 해제
|
|
5724
|
+
this.value = this.value?.filter(opt => opt.value !== option.value) || null;
|
|
5725
|
+
}
|
|
5726
|
+
else {
|
|
5727
|
+
// 새로운 옵션 선택
|
|
5728
|
+
this.value = [...(this.value || []), option];
|
|
5729
|
+
}
|
|
5730
|
+
};
|
|
5731
|
+
closeDropdown() {
|
|
5732
|
+
this.isOpen = false;
|
|
5733
|
+
}
|
|
5734
|
+
scrollToOption(optionElement) {
|
|
5735
|
+
if (!this.dropdownRef || !optionElement)
|
|
5736
|
+
return;
|
|
5737
|
+
const dropdown = this.dropdownRef;
|
|
5738
|
+
const optionTop = optionElement.offsetTop;
|
|
5739
|
+
const optionHeight = optionElement.offsetHeight;
|
|
5740
|
+
const dropdownScrollTop = dropdown.scrollTop;
|
|
5741
|
+
const dropdownHeight = dropdown.clientHeight;
|
|
5742
|
+
const searchContainer = dropdown.querySelector('.sd-select__search-container');
|
|
5743
|
+
const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
|
|
5744
|
+
const visibleTop = dropdownScrollTop + searchOffset;
|
|
5745
|
+
const visibleBottom = dropdownScrollTop + dropdownHeight;
|
|
5746
|
+
if (optionTop < visibleTop) {
|
|
5747
|
+
dropdown.scrollTop = optionTop - searchOffset;
|
|
5748
|
+
}
|
|
5749
|
+
else if (optionTop + optionHeight > visibleBottom) {
|
|
5750
|
+
dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
|
|
5751
|
+
}
|
|
5752
|
+
}
|
|
5753
|
+
// render method
|
|
5754
|
+
render() {
|
|
5755
|
+
const style = {
|
|
5756
|
+
'--select-width': this.width || '200px',
|
|
5757
|
+
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
5758
|
+
};
|
|
5759
|
+
return (hAsync(Host, { key: '7f809c5d682b5f03e624151a23056e93dd420704', style: style }, hAsync("div", { key: 'e681c6817d2245a9b3d9f168a972beb6b9c648aa', class: {
|
|
5760
|
+
'sd-select-multiple': true,
|
|
5761
|
+
'sd-select-multiple--open': this.isOpen,
|
|
5762
|
+
'sd-select-multiple--disabled': this.disabled,
|
|
5763
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'f3b36403172d090098f618b7aa734e0d2aacfe71', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
5764
|
+
}
|
|
5765
|
+
renderLabel(label) {
|
|
5766
|
+
if (!label)
|
|
5767
|
+
return null;
|
|
5768
|
+
return hAsync("label", { class: "sd-select-multiple__label" }, label);
|
|
5769
|
+
}
|
|
5770
|
+
renderTrigger() {
|
|
5771
|
+
const selectedOption = this.getSelectedOption();
|
|
5772
|
+
return (hAsync("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, hAsync("span", { class: "sd-select-multiple__value" }, !selectedOption
|
|
5773
|
+
? '선택'
|
|
5774
|
+
: selectedOption.length
|
|
5775
|
+
? selectedOption.map(option => option.label).join(', ')
|
|
5776
|
+
: this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: event => {
|
|
5777
|
+
event.stopPropagation();
|
|
5778
|
+
this.value = null;
|
|
5779
|
+
} })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
|
|
5780
|
+
}
|
|
5781
|
+
renderDropdown() {
|
|
5782
|
+
if (this.isOpen === false)
|
|
5783
|
+
return null;
|
|
5784
|
+
return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-select-multiple__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("div", { class: {
|
|
5785
|
+
'sd-select-multiple__search-container': true,
|
|
5786
|
+
'sd-select-multiple__search-container--scrolled': this.isScrolled,
|
|
5787
|
+
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
|
|
5788
|
+
this.searchText = String(event?.detail);
|
|
5789
|
+
}, onSdFocus: () => {
|
|
5790
|
+
this.itemIndex = -1;
|
|
5791
|
+
} }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option", { option: option, index: index, isSelected: this.value?.some(selected => selected.value === option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple__option-placeholder' }, this.optionPlaceholder))))));
|
|
5792
|
+
}
|
|
5793
|
+
static get watchers() { return {
|
|
5794
|
+
"value": ["valueChanged"],
|
|
5795
|
+
"options": ["optionsChanged"],
|
|
5796
|
+
"searchText": ["searchTextChanged"],
|
|
5797
|
+
"itemIndex": ["itemIndexChanged"],
|
|
5798
|
+
"isOpen": ["isOpenChanged"]
|
|
5799
|
+
}; }
|
|
5800
|
+
static get style() { return sdSelectMultipleCss; }
|
|
5801
|
+
static get cmpMeta() { return {
|
|
5802
|
+
"$flags$": 772,
|
|
5803
|
+
"$tagName$": "sd-select-multiple",
|
|
5804
|
+
"$members$": {
|
|
5805
|
+
"value": [1040],
|
|
5806
|
+
"label": [1],
|
|
5807
|
+
"options": [1040],
|
|
5808
|
+
"placeholder": [1],
|
|
5809
|
+
"optionPlaceholder": [1, "option-placeholder"],
|
|
5810
|
+
"width": [1],
|
|
5811
|
+
"dropdownHeight": [1, "dropdown-height"],
|
|
5812
|
+
"disabled": [4],
|
|
5813
|
+
"clearable": [4],
|
|
5814
|
+
"searchable": [4],
|
|
5815
|
+
"useCheckbox": [4, "use-checkbox"],
|
|
5816
|
+
"optionRenderer": [16],
|
|
5817
|
+
"filteredOptions": [32],
|
|
5818
|
+
"isOpen": [32],
|
|
5819
|
+
"searchText": [32],
|
|
5820
|
+
"itemIndex": [32],
|
|
5821
|
+
"isScrolled": [32]
|
|
5822
|
+
},
|
|
5823
|
+
"$listeners$": undefined,
|
|
5824
|
+
"$lazyBundleId$": "-",
|
|
5825
|
+
"$attrsToReflect$": []
|
|
5826
|
+
}; }
|
|
5827
|
+
}
|
|
5828
|
+
|
|
5829
|
+
const sdSelectMultipleGroupCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb:hover{background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb:active{background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}:host{display:display;height:fit-content}.sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}.sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}.sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple-group__container{position:relative;width:100%;display:flex}.sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}";
|
|
5830
|
+
|
|
5831
|
+
class SdSelectMultipleGroup extends BaseDropdownEvent {
|
|
5832
|
+
constructor(hostRef) {
|
|
5833
|
+
super();
|
|
5834
|
+
registerInstance(this, hostRef);
|
|
5835
|
+
this.sdChange = createEvent(this, "sdChange");
|
|
5836
|
+
this.dropDownShow = createEvent(this, "dropDownShow");
|
|
5837
|
+
}
|
|
5838
|
+
get el() { return getElement(this); }
|
|
5839
|
+
// props
|
|
5840
|
+
value = null;
|
|
5841
|
+
label = '';
|
|
5842
|
+
options = [];
|
|
5843
|
+
placeholder = '선택';
|
|
5844
|
+
optionPlaceholder = '옵션이 없습니다.';
|
|
5845
|
+
width = '200px';
|
|
5846
|
+
dropdownHeight = '260px';
|
|
5847
|
+
disabled = false;
|
|
5848
|
+
clearable = false;
|
|
5849
|
+
searchable = false;
|
|
5850
|
+
useCheckbox = false;
|
|
5299
5851
|
// props - custom styles
|
|
5300
5852
|
containerStyle = {};
|
|
5301
5853
|
triggerStyle = {};
|
|
@@ -5318,8 +5870,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5318
5870
|
optionRef;
|
|
5319
5871
|
dropdownRef;
|
|
5320
5872
|
valueChanged() {
|
|
5321
|
-
|
|
5322
|
-
this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });
|
|
5873
|
+
this.sdChange?.emit(this.value);
|
|
5323
5874
|
}
|
|
5324
5875
|
optionsChanged() {
|
|
5325
5876
|
this.filteredOptions = this.options;
|
|
@@ -5339,7 +5890,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5339
5890
|
searchInput?.blur();
|
|
5340
5891
|
}
|
|
5341
5892
|
}
|
|
5342
|
-
const optionElements = this.dropdownRef?.querySelectorAll('.sd-
|
|
5893
|
+
const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || []);
|
|
5343
5894
|
const currentItem = optionElements?.[this.itemIndex];
|
|
5344
5895
|
if (!currentItem || !this.isOpen)
|
|
5345
5896
|
return;
|
|
@@ -5351,39 +5902,40 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5351
5902
|
}
|
|
5352
5903
|
this.scrollToOption(currentItem);
|
|
5353
5904
|
}
|
|
5354
|
-
componentWillLoad() {
|
|
5355
|
-
// props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
|
|
5356
|
-
this.filteredOptions = this.options;
|
|
5357
|
-
this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
|
|
5358
|
-
}
|
|
5359
|
-
disconnectedCallback() {
|
|
5360
|
-
this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
|
|
5361
|
-
}
|
|
5362
5905
|
async isOpenChanged() {
|
|
5363
5906
|
// Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
|
|
5364
5907
|
this.onDropdownToggle(this.isOpen);
|
|
5365
5908
|
const selectedOption = this.getSelectedOption();
|
|
5366
5909
|
if (!selectedOption) {
|
|
5367
|
-
this.itemIndex =
|
|
5910
|
+
this.itemIndex = -1;
|
|
5368
5911
|
}
|
|
5369
5912
|
else {
|
|
5370
|
-
this.itemIndex = this.options.indexOf(selectedOption);
|
|
5913
|
+
this.itemIndex = this.options.indexOf(selectedOption[0]);
|
|
5371
5914
|
}
|
|
5372
5915
|
this.dropDownShow?.emit({ isOpen: this.isOpen });
|
|
5373
5916
|
if (this.isOpen === false)
|
|
5374
5917
|
return;
|
|
5375
5918
|
await new Promise(resolve => setTimeout(resolve, 10));
|
|
5376
|
-
const optionElements = this.dropdownRef?.querySelectorAll('.sd-
|
|
5919
|
+
const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
|
|
5377
5920
|
const currentItem = optionElements?.[this.itemIndex];
|
|
5921
|
+
// 드롭다운이 열릴 때 검색 입력에 포커스
|
|
5378
5922
|
if (this.searchable) {
|
|
5379
5923
|
const searchInput = await this.getNativeInputElement();
|
|
5380
5924
|
searchInput?.focus();
|
|
5381
5925
|
}
|
|
5382
5926
|
if (!currentItem)
|
|
5383
5927
|
return;
|
|
5384
|
-
await new Promise(resolve => setTimeout(resolve, 10));
|
|
5928
|
+
await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
|
|
5385
5929
|
this.scrollToOption(currentItem);
|
|
5386
5930
|
}
|
|
5931
|
+
connectedCallback() {
|
|
5932
|
+
// props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
|
|
5933
|
+
this.filteredOptions = this.options;
|
|
5934
|
+
this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
|
|
5935
|
+
}
|
|
5936
|
+
disconnectedCallback() {
|
|
5937
|
+
this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
|
|
5938
|
+
}
|
|
5387
5939
|
handleDocumentClick(event) {
|
|
5388
5940
|
if (!this.selectRef?.contains(event.target)) {
|
|
5389
5941
|
this.isOpen = false;
|
|
@@ -5405,9 +5957,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5405
5957
|
case 'Enter':
|
|
5406
5958
|
const selectedOption = this.filteredOptions[this.itemIndex];
|
|
5407
5959
|
if (selectedOption && !selectedOption.disabled) {
|
|
5408
|
-
this.
|
|
5409
|
-
this.searchText = null;
|
|
5410
|
-
this.isOpen = false;
|
|
5960
|
+
this.handleOptionSelection(selectedOption);
|
|
5411
5961
|
}
|
|
5412
5962
|
break;
|
|
5413
5963
|
case 'Escape':
|
|
@@ -5415,10 +5965,6 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5415
5965
|
break;
|
|
5416
5966
|
}
|
|
5417
5967
|
}
|
|
5418
|
-
// closeDropdown 메서드 구현 (Manager에서 호출됨)
|
|
5419
|
-
closeDropdown() {
|
|
5420
|
-
this.isOpen = false;
|
|
5421
|
-
}
|
|
5422
5968
|
// event handlers
|
|
5423
5969
|
handleTriggerClick = (event) => {
|
|
5424
5970
|
event.stopPropagation();
|
|
@@ -5430,13 +5976,37 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5430
5976
|
handleOptionClick = (detail) => {
|
|
5431
5977
|
const { option, event } = detail;
|
|
5432
5978
|
event.stopPropagation();
|
|
5433
|
-
if (
|
|
5434
|
-
this.
|
|
5435
|
-
|
|
5436
|
-
|
|
5979
|
+
if (option.type === 'group')
|
|
5980
|
+
this.handleGroupOptionClick(detail);
|
|
5981
|
+
if (option.type === 'subgroup')
|
|
5982
|
+
this.handleSubGroupOptionClick(detail);
|
|
5983
|
+
if (option.type === 'item')
|
|
5984
|
+
this.handleOptionSelection(option);
|
|
5985
|
+
};
|
|
5986
|
+
handleGroupOptionClick = (detail) => {
|
|
5987
|
+
const { option, isSelected } = detail;
|
|
5988
|
+
const childOptions = this.options.filter(opt => opt.parent === option.value && !opt.disabled);
|
|
5989
|
+
childOptions.forEach(subgroup => {
|
|
5990
|
+
this.handleSubGroupOptionClick({
|
|
5991
|
+
option: subgroup,
|
|
5992
|
+
isSelected: isSelected || isSelected === null,
|
|
5993
|
+
});
|
|
5994
|
+
});
|
|
5437
5995
|
};
|
|
5438
|
-
|
|
5439
|
-
|
|
5996
|
+
handleSubGroupOptionClick = (detail) => {
|
|
5997
|
+
const { option, isSelected } = detail;
|
|
5998
|
+
const childOptions = this.options.filter(opt => opt.parent === option.value && !opt.disabled);
|
|
5999
|
+
if (isSelected || isSelected === null) {
|
|
6000
|
+
// 모든 자식 옵션이 선택된 경우, 모두 선택 해제
|
|
6001
|
+
this.value =
|
|
6002
|
+
this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
|
|
6003
|
+
null;
|
|
6004
|
+
}
|
|
6005
|
+
else {
|
|
6006
|
+
// 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
|
|
6007
|
+
const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
|
|
6008
|
+
this.value = [...(this.value || []), ...newSelections];
|
|
6009
|
+
}
|
|
5440
6010
|
};
|
|
5441
6011
|
filterOptions() {
|
|
5442
6012
|
if (!this.searchText || this.searchText.trim() === '') {
|
|
@@ -5449,7 +6019,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5449
6019
|
}
|
|
5450
6020
|
}
|
|
5451
6021
|
getSelectedOption() {
|
|
5452
|
-
return this.options.
|
|
6022
|
+
return this.options.filter(option => this.value?.includes(option));
|
|
5453
6023
|
}
|
|
5454
6024
|
handleDropdownScroll = (event) => {
|
|
5455
6025
|
const target = event.target;
|
|
@@ -5463,6 +6033,31 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5463
6033
|
}
|
|
5464
6034
|
return null;
|
|
5465
6035
|
}
|
|
6036
|
+
handleOptionSelection = (option) => {
|
|
6037
|
+
if (!option || option.disabled)
|
|
6038
|
+
return;
|
|
6039
|
+
const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
|
|
6040
|
+
if (isAlreadySelected) {
|
|
6041
|
+
// 이미 선택된 옵션인 경우, 선택 해제
|
|
6042
|
+
this.value = this.value?.filter(opt => opt.value !== option.value) || null;
|
|
6043
|
+
}
|
|
6044
|
+
else {
|
|
6045
|
+
// 새로운 옵션 선택
|
|
6046
|
+
this.value = [...(this.value || []), option];
|
|
6047
|
+
}
|
|
6048
|
+
};
|
|
6049
|
+
isAllChildrenSelected(parentOption) {
|
|
6050
|
+
const childOptions = this.options.filter(option => option.parent === parentOption.value);
|
|
6051
|
+
const isChecked = childOptions.filter(child => this.value?.some(selected => selected.value === child.value));
|
|
6052
|
+
if (isChecked.length === childOptions.length)
|
|
6053
|
+
return true;
|
|
6054
|
+
if (isChecked.length > 0)
|
|
6055
|
+
return null;
|
|
6056
|
+
return false;
|
|
6057
|
+
}
|
|
6058
|
+
closeDropdown() {
|
|
6059
|
+
this.isOpen = false;
|
|
6060
|
+
}
|
|
5466
6061
|
scrollToOption(optionElement) {
|
|
5467
6062
|
if (!this.dropdownRef || !optionElement)
|
|
5468
6063
|
return;
|
|
@@ -5482,41 +6077,49 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5482
6077
|
dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
|
|
5483
6078
|
}
|
|
5484
6079
|
}
|
|
5485
|
-
// render method
|
|
5486
6080
|
render() {
|
|
5487
6081
|
const style = {
|
|
5488
6082
|
'--select-width': this.width || '200px',
|
|
5489
6083
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
5490
6084
|
};
|
|
5491
|
-
return (hAsync(Host, { key: '
|
|
5492
|
-
'sd-select': true,
|
|
5493
|
-
'sd-select--open': this.isOpen,
|
|
5494
|
-
'sd-select--disabled': this.disabled,
|
|
5495
|
-
}, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '
|
|
6085
|
+
return (hAsync(Host, { key: 'b2dd93262b0d07ca7991b9a9c4b4b643ece0132d', style: style }, hAsync("div", { key: '02759e35f71bcc24242d55448218947232232c84', class: {
|
|
6086
|
+
'sd-select-multiple-group': true,
|
|
6087
|
+
'sd-select-multiple-group--open': this.isOpen,
|
|
6088
|
+
'sd-select-multiple-group--disabled': this.disabled,
|
|
6089
|
+
}, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: 'de24276ab88ecad8e49d1766153c84366380cf68', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
5496
6090
|
}
|
|
5497
6091
|
renderLabel(label, labelStyle) {
|
|
5498
6092
|
if (!label)
|
|
5499
6093
|
return null;
|
|
5500
|
-
return (hAsync("label", { class: "sd-
|
|
6094
|
+
return (hAsync("label", { class: "sd-select-multiple-group__label", style: labelStyle }, label));
|
|
5501
6095
|
}
|
|
5502
6096
|
renderTrigger() {
|
|
5503
6097
|
const selectedOption = this.getSelectedOption();
|
|
5504
|
-
return (hAsync("div", { class: "sd-
|
|
6098
|
+
return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, !selectedOption
|
|
6099
|
+
? '선택'
|
|
6100
|
+
: selectedOption.length
|
|
6101
|
+
? selectedOption.map(option => option.label).join(', ')
|
|
6102
|
+
: this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
|
|
5505
6103
|
event.stopPropagation();
|
|
5506
6104
|
this.value = null;
|
|
5507
|
-
} })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
|
|
6105
|
+
} })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
|
|
6106
|
+
'sd-select-multiple-group__arrow': true,
|
|
6107
|
+
'sd-select-multiple-group__arrow--open': this.isOpen,
|
|
6108
|
+
} })));
|
|
5508
6109
|
}
|
|
5509
6110
|
renderDropdown() {
|
|
5510
6111
|
if (this.isOpen === false)
|
|
5511
6112
|
return null;
|
|
5512
|
-
return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-
|
|
5513
|
-
'sd-
|
|
5514
|
-
'sd-
|
|
6113
|
+
return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-select-multiple-group__dropdown", style: this.dropdownStyle, onScroll: this.handleDropdownScroll }, this.searchable && (hAsync("div", { class: {
|
|
6114
|
+
'sd-select-multiple-group__search-container': true,
|
|
6115
|
+
'sd-select-multiple-group__search-container--scrolled': this.isScrolled,
|
|
5515
6116
|
}, onClick: event => event.stopPropagation() }, hAsync("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
|
|
5516
6117
|
this.searchText = String(event?.detail);
|
|
5517
6118
|
}, onSdFocus: () => {
|
|
5518
6119
|
this.itemIndex = -1;
|
|
5519
|
-
} }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373",
|
|
6120
|
+
} }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
|
|
6121
|
+
? this.value?.some(selected => selected.value === option.value)
|
|
6122
|
+
: this.isAllChildrenSelected(option), isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
|
|
5520
6123
|
}
|
|
5521
6124
|
static get watchers() { return {
|
|
5522
6125
|
"value": ["valueChanged"],
|
|
@@ -5525,12 +6128,12 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5525
6128
|
"itemIndex": ["itemIndexChanged"],
|
|
5526
6129
|
"isOpen": ["isOpenChanged"]
|
|
5527
6130
|
}; }
|
|
5528
|
-
static get style() { return
|
|
6131
|
+
static get style() { return sdSelectMultipleGroupCss; }
|
|
5529
6132
|
static get cmpMeta() { return {
|
|
5530
6133
|
"$flags$": 772,
|
|
5531
|
-
"$tagName$": "sd-select",
|
|
6134
|
+
"$tagName$": "sd-select-multiple-group",
|
|
5532
6135
|
"$members$": {
|
|
5533
|
-
"value": [
|
|
6136
|
+
"value": [1040],
|
|
5534
6137
|
"label": [1],
|
|
5535
6138
|
"options": [1040],
|
|
5536
6139
|
"placeholder": [1],
|
|
@@ -5540,6 +6143,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5540
6143
|
"disabled": [4],
|
|
5541
6144
|
"clearable": [4],
|
|
5542
6145
|
"searchable": [4],
|
|
6146
|
+
"useCheckbox": [4, "use-checkbox"],
|
|
5543
6147
|
"containerStyle": [16],
|
|
5544
6148
|
"triggerStyle": [16],
|
|
5545
6149
|
"dropdownStyle": [16],
|
|
@@ -5558,7 +6162,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
5558
6162
|
}; }
|
|
5559
6163
|
}
|
|
5560
6164
|
|
|
5561
|
-
const sdSelectOptionCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px}.sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-select__option--focused{background-color:#e6f1ff}.sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),.sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075ff;font-weight:700}.sd-select__option--disabled{color:#aaaaaa;cursor:not-allowed}.sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075ff;color:white}";
|
|
6165
|
+
const sdSelectOptionCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}:host{display:block;height:fit-content;line-height:0}.sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px}.sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-select__option--focused{background-color:#e6f1ff}.sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),.sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075ff;font-weight:700}.sd-select__option--disabled{color:#aaaaaa;cursor:not-allowed}.sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075ff;color:white}";
|
|
5562
6166
|
|
|
5563
6167
|
class SdSelectOption {
|
|
5564
6168
|
constructor(hostRef) {
|
|
@@ -5589,7 +6193,7 @@ class SdSelectOption {
|
|
|
5589
6193
|
}
|
|
5590
6194
|
};
|
|
5591
6195
|
render() {
|
|
5592
|
-
return (hAsync("div", { key: '
|
|
6196
|
+
return (hAsync(Host, { key: '706574a311653939b3ce1b3e4f0bf66a9b02d53f' }, hAsync("div", { key: '7b3ec16c61f90fa5d262702c850bc6c28749c287', class: {
|
|
5593
6197
|
'sd-select__option': true,
|
|
5594
6198
|
'sd-select__option--selected': this.isSelected,
|
|
5595
6199
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -5602,11 +6206,11 @@ class SdSelectOption {
|
|
|
5602
6206
|
: { borderColor: '#0075ff' }, onClick: e => {
|
|
5603
6207
|
e.preventDefault();
|
|
5604
6208
|
this.handleClick(e);
|
|
5605
|
-
} }), hAsync("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label)));
|
|
6209
|
+
} }), hAsync("span", { class: "sd-select__option-label" }, this.option.label))) : (this.option.label))));
|
|
5606
6210
|
}
|
|
5607
6211
|
static get style() { return sdSelectOptionCss; }
|
|
5608
6212
|
static get cmpMeta() { return {
|
|
5609
|
-
"$flags$":
|
|
6213
|
+
"$flags$": 768,
|
|
5610
6214
|
"$tagName$": "sd-select-option",
|
|
5611
6215
|
"$members$": {
|
|
5612
6216
|
"option": [16],
|
|
@@ -5625,6 +6229,86 @@ class SdSelectOption {
|
|
|
5625
6229
|
}; }
|
|
5626
6230
|
}
|
|
5627
6231
|
|
|
6232
|
+
const sdSelectOptionGroupCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}:host{display:block;height:fit-content}.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--group:not(.sd-select__option-group--use-checkbox),.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--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}.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__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-select__option-group--focused{background-color:#e6f1ff}.sd-select__option-group--selected:not(:hover):not(.sd-select__option-group--use-checkbox),.sd-select__option-group--focused:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}.sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}.sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}";
|
|
6233
|
+
|
|
6234
|
+
class SdSelectOptionGroup {
|
|
6235
|
+
constructor(hostRef) {
|
|
6236
|
+
registerInstance(this, hostRef);
|
|
6237
|
+
this.optionClick = createEvent(this, "optionClick");
|
|
6238
|
+
}
|
|
6239
|
+
get el() { return getElement(this); }
|
|
6240
|
+
option;
|
|
6241
|
+
index;
|
|
6242
|
+
isSelected = false;
|
|
6243
|
+
isFocused = false;
|
|
6244
|
+
optionStyle;
|
|
6245
|
+
disabled = false;
|
|
6246
|
+
useCheckbox = false;
|
|
6247
|
+
isHovered = false;
|
|
6248
|
+
async isDisabled() {
|
|
6249
|
+
return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';
|
|
6250
|
+
}
|
|
6251
|
+
optionClick;
|
|
6252
|
+
handleClick = (option, isSelected, event) => {
|
|
6253
|
+
event.stopPropagation();
|
|
6254
|
+
if (option.type === 'group' || option.type === 'subgroup') {
|
|
6255
|
+
this.optionClick.emit({
|
|
6256
|
+
option: this.option,
|
|
6257
|
+
isSelected,
|
|
6258
|
+
index: this.index,
|
|
6259
|
+
event,
|
|
6260
|
+
});
|
|
6261
|
+
return;
|
|
6262
|
+
}
|
|
6263
|
+
if (!this.option.disabled && !this.disabled) {
|
|
6264
|
+
this.optionClick.emit({
|
|
6265
|
+
option: this.option,
|
|
6266
|
+
isSelected,
|
|
6267
|
+
index: this.index,
|
|
6268
|
+
event,
|
|
6269
|
+
});
|
|
6270
|
+
}
|
|
6271
|
+
};
|
|
6272
|
+
render() {
|
|
6273
|
+
return (hAsync(Host, { key: '2c25ad33d49eefbfedae7e1b9ee4453131b53321' }, hAsync("div", { key: '4f6ef860ca32e13bb8253d768f8bf70b4fd1fe91', class: {
|
|
6274
|
+
'sd-select__option-group': true,
|
|
6275
|
+
'sd-select__option-group--selected': !!this.isSelected,
|
|
6276
|
+
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
6277
|
+
'sd-select__option-group--focused': this.isFocused,
|
|
6278
|
+
'sd-select__option-group--use-checkbox': this.useCheckbox,
|
|
6279
|
+
'sd-select__option-group--group': this.option.type === 'group',
|
|
6280
|
+
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
6281
|
+
'sd-select__option-group--item': this.option.type === 'item',
|
|
6282
|
+
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, this.useCheckbox ? (hAsync("div", { class: "sd-select__option-group__checkbox-wrapper" }, hAsync("sd-checkbox", { checked: this.isSelected, disabled: this.option.disabled, checkboxStyle: !this.isSelected
|
|
6283
|
+
? { borderColor: '#888' }
|
|
6284
|
+
: this.isHovered
|
|
6285
|
+
? { borderColor: 'white' }
|
|
6286
|
+
: { borderColor: '#0075ff' }, onClick: e => {
|
|
6287
|
+
e.preventDefault();
|
|
6288
|
+
this.handleClick(this.option, this.isSelected, e);
|
|
6289
|
+
} }), hAsync("span", { class: "sd-select__option-group-label" }, this.option.label))) : (this.option.label))));
|
|
6290
|
+
}
|
|
6291
|
+
static get style() { return sdSelectOptionGroupCss; }
|
|
6292
|
+
static get cmpMeta() { return {
|
|
6293
|
+
"$flags$": 768,
|
|
6294
|
+
"$tagName$": "sd-select-option-group",
|
|
6295
|
+
"$members$": {
|
|
6296
|
+
"option": [16],
|
|
6297
|
+
"index": [2],
|
|
6298
|
+
"isSelected": [4, "is-selected"],
|
|
6299
|
+
"isFocused": [4, "is-focused"],
|
|
6300
|
+
"optionStyle": [16],
|
|
6301
|
+
"disabled": [4],
|
|
6302
|
+
"useCheckbox": [4, "use-checkbox"],
|
|
6303
|
+
"isHovered": [32],
|
|
6304
|
+
"isDisabled": [64]
|
|
6305
|
+
},
|
|
6306
|
+
"$listeners$": undefined,
|
|
6307
|
+
"$lazyBundleId$": "-",
|
|
6308
|
+
"$attrsToReflect$": []
|
|
6309
|
+
}; }
|
|
6310
|
+
}
|
|
6311
|
+
|
|
5628
6312
|
const sdTableCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb:hover{background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb:active{background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%)}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr:last-of-type td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}";
|
|
5629
6313
|
|
|
5630
6314
|
class SdTable {
|
|
@@ -5825,10 +6509,10 @@ class SdTable {
|
|
|
5825
6509
|
}))))));
|
|
5826
6510
|
}
|
|
5827
6511
|
render() {
|
|
5828
|
-
return (hAsync(Host, { key: '
|
|
6512
|
+
return (hAsync(Host, { key: '362b2d53c4a66aeac6abf8c024c32172f181a90d' }, hAsync("div", { key: 'ed9a2d658030925f20af988d917e35a357bfa564', class: "sd-table__wrapper", style: {
|
|
5829
6513
|
'--table-width': this.width,
|
|
5830
6514
|
'--table-height': this.height,
|
|
5831
|
-
} }, hAsync("div", { key: '
|
|
6515
|
+
} }, hAsync("div", { key: 'd94b1b2b09e23ab27bce4f8328ccb3b3678d7ffb', class: "sd-table__container" }, hAsync("div", { key: 'a68354221c4953b7b60ce66a072659e0b137451f', class: "sd-table__middle" }, hAsync("table", { key: 'e2bbc397989777920bdb55bd02f6f4a60f7bfd17', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), hAsync("div", { key: '6d9176e65c7dfc8810ba08ae563aeb47ab366298', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '0bbf8ea1b355cb894b99fbc42b196493c97dd5f2', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '2e5d02690a2276a4ba61652ae238b0ace453445b', currentPage: this.currentPage, lastPage: this.lastPageNumber, onPageChange: (e) => {
|
|
5832
6516
|
this.currentPage = e.detail;
|
|
5833
6517
|
this.sdPageChange.emit(this.currentPage);
|
|
5834
6518
|
} }))))));
|
|
@@ -5913,7 +6597,7 @@ class SdTag {
|
|
|
5913
6597
|
}
|
|
5914
6598
|
render() {
|
|
5915
6599
|
const tagClasses = this.getTagClasses();
|
|
5916
|
-
return (hAsync("span", { key: '
|
|
6600
|
+
return (hAsync("span", { key: '44ee85021c96527798f69e3cfa772ca5f7db2164', class: tagClasses, style: {
|
|
5917
6601
|
'--tag-bg-color': this.bgColor,
|
|
5918
6602
|
'--tag-text-color': this.textColor,
|
|
5919
6603
|
}, "aria-label": this.label || 'tag' }, this.renderContent()));
|
|
@@ -5968,11 +6652,11 @@ class SdTooltip {
|
|
|
5968
6652
|
: {
|
|
5969
6653
|
onClick: () => (console.log('click tooltip'), (this.showTooltip = !this.showTooltip)),
|
|
5970
6654
|
};
|
|
5971
|
-
return (hAsync(Fragment, { key: '
|
|
6655
|
+
return (hAsync(Fragment, { key: '2047cb9cab136a3260f8641a08d784acd9554a0a' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: '28be62164055c23d711fe19feaafe05dc53de9b2', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: 'c98d6d06e504daf8d13122623d65b8d9998f87f0', class: {
|
|
5972
6656
|
'sd-tooltip-menu': true,
|
|
5973
6657
|
[`sd-tooltip-menu--${this.placement}`]: true,
|
|
5974
6658
|
'sd-tooltip-menu--with-close': this.useClose,
|
|
5975
|
-
} }, hAsync("i", { key: '
|
|
6659
|
+
} }, hAsync("i", { key: '955f4f5476cb97cdfbf58251486c100a5c3b4537', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '4376c6d745d35831b3245e9d6118e45f9b72f2d7' })), hAsync("div", { key: 'af47262e47026506861befead5ba4c0f2203d28b', class: "sd-tooltip-menu__content" }, hAsync("slot", { key: 'a63f5549325e6e19b87e7a4ea0be24c4c27026e5' }, this.el.textContent)), this.useClose && (hAsync("div", { key: 'b8ea7c8582237d79de063be6bedef8ec0473f3dd', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '9776d45108b4b4eb27d38871e9705323db392b82', onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '298d7b079c3866d0448b05d38e4fe2c688a883b7', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
5976
6660
|
}
|
|
5977
6661
|
static get style() { return sdTooltipCss; }
|
|
5978
6662
|
static get cmpMeta() { return {
|
|
@@ -6145,7 +6829,7 @@ class SdTooltipPortal {
|
|
|
6145
6829
|
this.sdClose.emit();
|
|
6146
6830
|
}
|
|
6147
6831
|
render() {
|
|
6148
|
-
return hAsync("slot", { key: '
|
|
6832
|
+
return hAsync("slot", { key: '04e02ba53bc52d5377071b352159ebbf84a0141c' });
|
|
6149
6833
|
}
|
|
6150
6834
|
static get cmpMeta() { return {
|
|
6151
6835
|
"$flags$": 777,
|
|
@@ -6178,7 +6862,10 @@ registerComponents([
|
|
|
6178
6862
|
SdPopover,
|
|
6179
6863
|
SdPortal,
|
|
6180
6864
|
SdSelect,
|
|
6865
|
+
SdSelectMultiple,
|
|
6866
|
+
SdSelectMultipleGroup,
|
|
6181
6867
|
SdSelectOption,
|
|
6868
|
+
SdSelectOptionGroup,
|
|
6182
6869
|
SdTable,
|
|
6183
6870
|
SdTag,
|
|
6184
6871
|
SdTooltip,
|