@sellmate/design-system 1.23.0 → 1.25.0
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/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-action-modal.cjs.entry.js +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +1 -1
- package/dist/cjs/sd-barcode-input.cjs.entry.js +1 -1
- package/dist/cjs/sd-calendar_2.cjs.entry.js +5 -5
- package/dist/cjs/sd-callout.cjs.entry.js +1 -1
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- package/dist/cjs/sd-chip-input.cjs.entry.js +6 -7
- package/dist/cjs/sd-chip.cjs.entry.js +1 -1
- package/dist/cjs/sd-circle-progress.cjs.entry.js +1 -1
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-picker_7.cjs.entry.js +10 -10
- package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +1 -1
- package/dist/cjs/sd-divider.cjs.entry.js +1 -1
- package/dist/cjs/sd-dropdown-button.cjs.entry.js +1 -1
- package/dist/cjs/sd-field_3.cjs.entry.js +8 -8
- package/dist/cjs/sd-ghost-button_3.cjs.entry.js +25 -12
- package/dist/cjs/sd-linear-progress.cjs.entry.js +1 -1
- package/dist/cjs/sd-loading-container.cjs.entry.js +2 -2
- package/dist/cjs/sd-pagination_4.cjs.entry.js +46 -16
- package/dist/cjs/sd-popover.cjs.entry.js +3 -3
- package/dist/cjs/sd-popup.cjs.entry.js +1 -1
- package/dist/cjs/sd-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/sd-radio.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-list-item_2.cjs.entry.js +6 -6
- package/dist/cjs/sd-select_3.cjs.entry.js +8 -8
- package/dist/cjs/sd-switch.cjs.entry.js +1 -1
- package/dist/cjs/sd-table.cjs.entry.js +6 -6
- package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
- package/dist/cjs/sd-td.cjs.entry.js +1 -1
- package/dist/cjs/sd-text-link.cjs.entry.js +22 -4
- package/dist/cjs/sd-toast-container.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast.cjs.entry.js +2 -2
- package/dist/cjs/sd-toggle.cjs.entry.js +1 -1
- package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
- package/dist/collection/components/sd-calendar/sd-calendar.js +3 -3
- package/dist/collection/components/sd-callout/sd-callout.js +1 -1
- package/dist/collection/components/sd-card/sd-card.js +1 -1
- package/dist/collection/components/sd-chip/sd-chip.js +1 -1
- package/dist/collection/components/sd-chip-input/sd-chip-input.css +3 -0
- package/dist/collection/components/sd-chip-input/sd-chip-input.js +5 -6
- package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
- package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
- 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-calendar/sd-date-range-picker-calendar.js +1 -1
- package/dist/collection/components/sd-divider/sd-divider.js +1 -1
- package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.css +4 -4
- package/dist/collection/components/sd-field/sd-field.js +5 -5
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.css +4 -0
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +2 -2
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
- package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
- package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
- package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
- package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
- package/dist/collection/components/sd-popover/sd-popover.js +3 -3
- package/dist/collection/components/sd-popup/sd-popup.js +1 -1
- package/dist/collection/components/sd-portal/sd-portal.js +20 -7
- package/dist/collection/components/sd-radio/sd-radio.js +1 -1
- package/dist/collection/components/sd-radio-button/sd-radio-button.js +1 -1
- package/dist/collection/components/sd-radio-group/sd-radio-group.js +1 -1
- package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +2 -2
- package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +4 -4
- package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +2 -2
- package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
- package/dist/collection/components/sd-select/sd-select.js +4 -4
- package/dist/collection/components/sd-switch/sd-switch.js +1 -1
- package/dist/collection/components/sd-table/sd-table.js +6 -6
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +2 -2
- package/dist/collection/components/sd-table/sd-td/sd-td.js +1 -1
- package/dist/collection/components/sd-table/sd-thead/sd-thead.css +4 -0
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +40 -10
- package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
- package/dist/collection/components/sd-tag/sd-tag.js +2 -2
- package/dist/collection/components/sd-text-link/sd-text-link.css +17 -0
- package/dist/collection/components/sd-text-link/sd-text-link.js +46 -3
- package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
- package/dist/collection/components/sd-toast/sd-toast.js +2 -2
- package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/components/{p-BYgT6mRD.js → p--qAfho9a.js} +1 -1
- package/dist/components/{p-Btpf6Xpg.js → p-0U99W-3Z.js} +1 -1
- package/dist/components/{p-BFMUpKa2.js → p-0eogwabp.js} +1 -1
- package/dist/components/{p-4I0LJNSg.js → p-B8uvCE1e.js} +1 -1
- package/dist/components/{p-CZpcFpSk.js → p-BAsjJuJJ.js} +1 -1
- package/dist/components/{p-CpBPNHYe.js → p-BGpxtouI.js} +1 -1
- package/dist/components/{p-BDm6daTX.js → p-BQHbIUbt.js} +1 -1
- package/dist/components/{p-IMWw_SJ1.js → p-BZUlNC0d.js} +1 -1
- package/dist/components/p-BckY1cBy.js +1 -0
- package/dist/components/p-BlN03Cqm.js +1 -0
- package/dist/components/{p-C2cNc56z.js → p-Bls7CCxZ.js} +1 -1
- package/dist/components/{p-DgZ_vzrA.js → p-BoH7ykYx.js} +1 -1
- package/dist/components/{p-BRKeMTWI.js → p-BuuIkYiY.js} +1 -1
- package/dist/components/{p-lL2VxD2V.js → p-BvJuT-H0.js} +1 -1
- package/dist/components/{p-Dj1iJxUT.js → p-CBXH-GWN.js} +1 -1
- package/dist/components/{p-DfKZyde8.js → p-CNwoxvpg.js} +1 -1
- package/dist/components/{p-DnHzWLdY.js → p-CnEZJlEp.js} +1 -1
- package/dist/components/{p-BLsuwMw4.js → p-CqivNcjh.js} +1 -1
- package/dist/components/{p-BwgUEhOa.js → p-CtNDxhxx.js} +1 -1
- package/dist/components/p-D6noGX38.js +1 -0
- package/dist/components/{p-CGJ1L8_Y.js → p-D8T1XeGP.js} +1 -1
- package/dist/components/{p-DDahT3Mp.js → p-DBw58vNP.js} +1 -1
- package/dist/components/{p-BUB0CcPo.js → p-DFp9nJnT.js} +1 -1
- package/dist/components/{p-BJMpxQSk.js → p-DMvWCQfX.js} +1 -1
- package/dist/components/{p-2-7UYvqL.js → p-DNRm9_Bv.js} +1 -1
- package/dist/components/{p-ClBvavih.js → p-DpHtcEDP.js} +1 -1
- package/dist/components/p-DpYG9T3S.js +1 -0
- package/dist/components/{p-iORPryb0.js → p-PMD-Col0.js} +1 -1
- package/dist/components/{p-kDokArZu.js → p-d3KpOGRC.js} +1 -1
- package/dist/components/{p-C9rjLN0u.js → p-h9_f4fUW.js} +1 -1
- package/dist/components/p-lGr865w2.js +1 -0
- package/dist/components/sd-action-modal.js +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-calendar.js +1 -1
- package/dist/components/sd-callout.js +1 -1
- package/dist/components/sd-card.js +1 -1
- package/dist/components/sd-chip-input.js +1 -1
- package/dist/components/sd-chip.js +1 -1
- package/dist/components/sd-circle-progress.js +1 -1
- package/dist/components/sd-confirm-modal.js +1 -1
- package/dist/components/sd-date-picker-trigger.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker-calendar.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-divider.js +1 -1
- package/dist/components/sd-dropdown-button.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-ghost-button.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-key-value-table.js +1 -1
- package/dist/components/sd-linear-progress.js +1 -1
- package/dist/components/sd-loading-container.js +1 -1
- package/dist/components/sd-loading-modal.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-popup.js +1 -1
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-radio-button.js +1 -1
- package/dist/components/sd-radio-group.js +1 -1
- package/dist/components/sd-radio.js +1 -1
- package/dist/components/sd-select-list-item-search.js +1 -1
- package/dist/components/sd-select-list-item.js +1 -1
- package/dist/components/sd-select-listbox.js +1 -1
- package/dist/components/sd-select-trigger.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-switch.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/components/sd-tabs.js +1 -1
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +1 -1
- package/dist/components/sd-text-link.js +1 -1
- package/dist/components/sd-textarea.js +1 -1
- package/dist/components/sd-thead.js +1 -1
- package/dist/components/sd-toast-container.js +1 -1
- package/dist/components/sd-toast.js +1 -1
- package/dist/components/sd-toggle.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-0d5d2723.entry.js +1 -0
- package/dist/design-system/{p-578683b5.entry.js → p-21d8f192.entry.js} +1 -1
- package/dist/design-system/{p-b29569d7.entry.js → p-3b71d1d4.entry.js} +1 -1
- package/dist/design-system/{p-64d63a3f.entry.js → p-43d521c4.entry.js} +1 -1
- package/dist/design-system/{p-45651573.entry.js → p-5a67c40d.entry.js} +1 -1
- package/dist/design-system/{p-86e54f19.entry.js → p-5b184e17.entry.js} +1 -1
- package/dist/design-system/p-662ce409.entry.js +1 -0
- package/dist/design-system/{p-43316703.entry.js → p-6b20c76b.entry.js} +1 -1
- package/dist/design-system/{p-e897484c.entry.js → p-6f77fc76.entry.js} +1 -1
- package/dist/design-system/{p-586602a8.entry.js → p-74e605c0.entry.js} +1 -1
- package/dist/design-system/{p-b2ef677a.entry.js → p-8001447c.entry.js} +1 -1
- package/dist/design-system/{p-f280e59d.entry.js → p-8862e3e3.entry.js} +1 -1
- package/dist/design-system/{p-93f876ce.entry.js → p-90a360ca.entry.js} +1 -1
- package/dist/design-system/{p-1e1a5c69.entry.js → p-9afc1f7c.entry.js} +1 -1
- package/dist/design-system/{p-6cd3da51.entry.js → p-9b53de38.entry.js} +1 -1
- package/dist/design-system/{p-a5fe8b9a.entry.js → p-9ea2fbec.entry.js} +1 -1
- package/dist/design-system/{p-d10efe7e.entry.js → p-a1438f7d.entry.js} +1 -1
- package/dist/design-system/{p-e018fdb1.entry.js → p-a505459f.entry.js} +1 -1
- package/dist/design-system/{p-df5e8dba.entry.js → p-a8d69ab2.entry.js} +1 -1
- package/dist/design-system/p-ad822c82.entry.js +1 -0
- package/dist/design-system/{p-e94bd6d7.entry.js → p-b4df75b9.entry.js} +1 -1
- package/dist/design-system/p-ba5bb1ee.entry.js +1 -0
- package/dist/design-system/p-c0198e3a.entry.js +1 -0
- package/dist/design-system/{p-8101c564.entry.js → p-c7ff7bc8.entry.js} +1 -1
- package/dist/design-system/{p-b7e80770.entry.js → p-c8e86fb4.entry.js} +1 -1
- package/dist/design-system/{p-496d3684.entry.js → p-cb63d4cf.entry.js} +1 -1
- package/dist/design-system/p-d4097b87.entry.js +1 -0
- package/dist/design-system/{p-60f3ce4f.entry.js → p-d6329729.entry.js} +1 -1
- package/dist/design-system/{p-9b7d3077.entry.js → p-e77fe58a.entry.js} +1 -1
- package/dist/design-system/{p-43c79402.entry.js → p-f1e0ba30.entry.js} +1 -1
- package/dist/design-system/{p-3c4b57b5.entry.js → p-f418055d.entry.js} +1 -1
- package/dist/design-system/{p-c4c81918.entry.js → p-f9c0013c.entry.js} +1 -1
- package/dist/design-system/{p-a42bcc11.entry.js → p-fb609583.entry.js} +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-action-modal.entry.js +1 -1
- package/dist/esm/sd-badge.entry.js +1 -1
- package/dist/esm/sd-barcode-input.entry.js +1 -1
- package/dist/esm/sd-calendar_2.entry.js +5 -5
- package/dist/esm/sd-callout.entry.js +1 -1
- package/dist/esm/sd-card.entry.js +1 -1
- package/dist/esm/sd-chip-input.entry.js +6 -7
- package/dist/esm/sd-chip.entry.js +1 -1
- package/dist/esm/sd-circle-progress.entry.js +1 -1
- package/dist/esm/sd-confirm-modal_2.entry.js +3 -3
- package/dist/esm/sd-date-picker_7.entry.js +10 -10
- package/dist/esm/sd-date-range-picker-calendar.entry.js +1 -1
- package/dist/esm/sd-divider.entry.js +1 -1
- package/dist/esm/sd-dropdown-button.entry.js +1 -1
- package/dist/esm/sd-field_3.entry.js +8 -8
- package/dist/esm/sd-ghost-button_3.entry.js +25 -12
- package/dist/esm/sd-linear-progress.entry.js +1 -1
- package/dist/esm/sd-loading-container.entry.js +2 -2
- package/dist/esm/sd-pagination_4.entry.js +46 -16
- package/dist/esm/sd-popover.entry.js +3 -3
- package/dist/esm/sd-popup.entry.js +1 -1
- package/dist/esm/sd-radio-button.entry.js +1 -1
- package/dist/esm/sd-radio.entry.js +1 -1
- package/dist/esm/sd-select-list-item_2.entry.js +6 -6
- package/dist/esm/sd-select_3.entry.js +8 -8
- package/dist/esm/sd-switch.entry.js +1 -1
- package/dist/esm/sd-table.entry.js +6 -6
- package/dist/esm/sd-tabs.entry.js +1 -1
- package/dist/esm/sd-td.entry.js +1 -1
- package/dist/esm/sd-text-link.entry.js +23 -5
- package/dist/esm/sd-toast-container.entry.js +1 -1
- package/dist/esm/sd-toast.entry.js +2 -2
- package/dist/esm/sd-toggle.entry.js +1 -1
- package/dist/types/components/sd-text-link/sd-text-link.d.ts +8 -0
- package/dist/types/components.d.ts +9 -0
- package/hydrate/index.js +174 -112
- package/hydrate/index.mjs +174 -112
- package/package.json +1 -1
- package/dist/components/p-BdFwmTyS.js +0 -1
- package/dist/components/p-BeKMwT89.js +0 -1
- package/dist/components/p-C_g09O6z.js +0 -1
- package/dist/components/p-ChwRSZ6R.js +0 -1
- package/dist/components/p-Dn93jl-w.js +0 -1
- package/dist/design-system/p-1e9793d6.entry.js +0 -1
- package/dist/design-system/p-7233ffb7.entry.js +0 -1
- package/dist/design-system/p-829b7e4f.entry.js +0 -1
- package/dist/design-system/p-956956af.entry.js +0 -1
- package/dist/design-system/p-b1f4e1e5.entry.js +0 -1
- package/dist/design-system/p-ccbf8687.entry.js +0 -1
|
@@ -237,21 +237,21 @@ const SdField = class {
|
|
|
237
237
|
: {}),
|
|
238
238
|
}
|
|
239
239
|
: {};
|
|
240
|
-
return (h("div", { key: '
|
|
240
|
+
return (h("div", { key: '45a5353fb451aa829092ca34f3212d6e62f1843a', class: {
|
|
241
241
|
'sd-field': true,
|
|
242
242
|
'sd-field--has-label': this.label !== '',
|
|
243
243
|
'sd-field--has-addon': addon !== '',
|
|
244
244
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
245
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '
|
|
245
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '75f3be0dae03f292b66980b7c92d574bd0bda988', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '69b9827a2599a2e01fad26224b4b9800fde6e347', class: "sd-field__main", style: this.width !== '' && this.width !== 0
|
|
246
246
|
? {
|
|
247
247
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
248
248
|
flex: 'none',
|
|
249
249
|
}
|
|
250
|
-
: {} }, h("div", { key: '
|
|
250
|
+
: {} }, h("div", { key: 'ba0e98fd309c32ee73b2ba92f956358d51790f58', class: {
|
|
251
251
|
'sd-field__control': true,
|
|
252
252
|
'sd-field__control--has-addon': addon !== '',
|
|
253
|
-
} }, addon && (h("div", { key: '
|
|
254
|
-
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '
|
|
253
|
+
} }, addon && (h("div", { key: '8f941150147145368d340c4be0e3636ef67060c3', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '78d5d092094c0f3e8562127d77821dadb2a21b6a', name: this.icon.name, size: this.icon.size ??
|
|
254
|
+
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'b494ab4550ae739096957cad46cb95a8c71f5a0b' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
|
|
255
255
|
}
|
|
256
256
|
renderLabel(label) {
|
|
257
257
|
if (label == null || label === '')
|
|
@@ -442,7 +442,7 @@ const SdFloatingPopover = class {
|
|
|
442
442
|
}
|
|
443
443
|
}
|
|
444
444
|
render() {
|
|
445
|
-
return h("slot", { key: '
|
|
445
|
+
return h("slot", { key: 'a560d8d46ef03688ce16a984c54ae23f740e7ef8' });
|
|
446
446
|
}
|
|
447
447
|
};
|
|
448
448
|
SdFloatingPopover.style = sdFloatingPortalCss();
|
|
@@ -618,7 +618,7 @@ const SdTooltip = class {
|
|
|
618
618
|
const bodyHTML = this.message && this.message.length > 0
|
|
619
619
|
? this.message.map(line => `<div>${line}</div>`).join('')
|
|
620
620
|
: this.slotContentHTML;
|
|
621
|
-
return (h(Fragment, { key: '
|
|
621
|
+
return (h(Fragment, { key: '81d582c4c8847a0f57abf632d975461cdf07b535' }, h("div", { key: 'c7515fb866fa85749405bb10512e27575850eb27', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (h("slot", { name: "anchor" })) : hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '903aaa3723a119687e5af8120d54fb1b9e43c584', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '813e1dbf7f2d8e0378f4fcac1225341aafbd9948', ref: el => (this.menuEl = el), class: {
|
|
622
622
|
'sd-floating-menu': true,
|
|
623
623
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
624
624
|
[`sd-floating-menu--${placement}`]: true,
|
|
@@ -626,7 +626,7 @@ const SdTooltip = class {
|
|
|
626
626
|
}, style: {
|
|
627
627
|
'--sd-floating-bg': typeConfig.bg,
|
|
628
628
|
'--sd-floating-content': typeConfig.content,
|
|
629
|
-
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: '
|
|
629
|
+
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: 'd74071d3d236382bc952ad03a05ebd77219b4ddb', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '91c35bd2bc22294b7e7998965930219a43799310' })), h("div", { key: '16edd2fc6e9ad02b646c05c6404d3eb79e2a7a71', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: 'd234906f7a4a603a8e18cef6da49f9d893adb731', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
|
|
630
630
|
}
|
|
631
631
|
};
|
|
632
632
|
SdTooltip.style = sdTooltipCss();
|
|
@@ -112,7 +112,7 @@ const GHOST_BUTTON_DISABLED_COLORS = {
|
|
|
112
112
|
inverse: ghostButtonTokens.ghostButton.inverse.disabled,
|
|
113
113
|
};
|
|
114
114
|
|
|
115
|
-
const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip-inner{display:inline-flex;white-space:nowrap;transform:translateX(-50%)}`;
|
|
115
|
+
const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip-inner{display:inline-flex;white-space:nowrap;transform:translateX(-50%)}[data-align=right] .sd-ghost-button__tooltip-inner{transform:none}`;
|
|
116
116
|
|
|
117
117
|
const SdGhostButton = class {
|
|
118
118
|
constructor(hostRef) {
|
|
@@ -184,7 +184,7 @@ const SdGhostButton = class {
|
|
|
184
184
|
const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
|
|
185
185
|
const tooltipText = (this.tooltipText ?? '').trim();
|
|
186
186
|
const hasTooltip = tooltipText.length > 0;
|
|
187
|
-
return (h("button", { key: '
|
|
187
|
+
return (h("button", { key: '9d2d352d36c7c34c67d8c57de6236d72727bd078', class: {
|
|
188
188
|
'sd-ghost-button': true,
|
|
189
189
|
'sd-ghost-button--disabled': this.disabled,
|
|
190
190
|
}, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, style: {
|
|
@@ -193,7 +193,7 @@ const SdGhostButton = class {
|
|
|
193
193
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
|
|
194
194
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
195
195
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
196
|
-
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (h("sd-portal", { key: '
|
|
196
|
+
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (h("sd-portal", { key: '1a73fb53be28a622d03e4f20be0b30e0e76bccd4', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: 'e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '4aa1525a6da6ee72daf1815f1440d665bd1cf2c8', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: '4caac22d0d888c1998032697043e3a3761e012aa', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
197
197
|
}
|
|
198
198
|
};
|
|
199
199
|
SdGhostButton.style = sdGhostButtonCss();
|
|
@@ -371,19 +371,27 @@ const SdPortal = class {
|
|
|
371
371
|
else {
|
|
372
372
|
top = Math.min(Math.max(top, minTop), maxTop);
|
|
373
373
|
}
|
|
374
|
-
|
|
375
|
-
left = parentRect.right - wrapperRect.width - offset[0];
|
|
376
|
-
}
|
|
374
|
+
const overflowsRight = left + wrapperRect.width > viewport.width - viewportPadding;
|
|
377
375
|
const minLeft = viewportPadding;
|
|
378
376
|
const maxLeft = viewport.width - viewportPadding - wrapperRect.width;
|
|
377
|
+
this.wrapper.style.top = `${top}px`;
|
|
379
378
|
if (maxLeft < minLeft) {
|
|
380
|
-
left
|
|
379
|
+
// wrapper가 padding 내에 들어오지 못할 만큼 넓으면 left 기준으로 클램프
|
|
380
|
+
this.wrapper.style.left = `${minLeft}px`;
|
|
381
|
+
this.wrapper.style.right = 'auto';
|
|
382
|
+
delete this.wrapper.dataset.align;
|
|
383
|
+
}
|
|
384
|
+
else if (overflowsRight) {
|
|
385
|
+
this.wrapper.style.left = 'auto';
|
|
386
|
+
this.wrapper.style.right = `${viewport.width - parentRect.right}px`;
|
|
387
|
+
this.wrapper.dataset.align = 'right';
|
|
381
388
|
}
|
|
382
389
|
else {
|
|
390
|
+
this.wrapper.style.right = 'auto';
|
|
391
|
+
delete this.wrapper.dataset.align;
|
|
383
392
|
left = Math.min(Math.max(left, minLeft), maxLeft);
|
|
393
|
+
this.wrapper.style.left = `${left}px`;
|
|
384
394
|
}
|
|
385
|
-
this.wrapper.style.top = `${top}px`;
|
|
386
|
-
this.wrapper.style.left = `${left}px`;
|
|
387
395
|
this.wrapper.style.visibility = 'visible';
|
|
388
396
|
this.wrapper.style.opacity = '1';
|
|
389
397
|
});
|
|
@@ -447,9 +455,13 @@ const SdPortal = class {
|
|
|
447
455
|
}
|
|
448
456
|
// 외부 클릭 감지
|
|
449
457
|
handleMouseDown(e) {
|
|
458
|
+
if (!this.open)
|
|
459
|
+
return;
|
|
450
460
|
this.isInsideClick = this.isInsideTarget(e.target);
|
|
451
461
|
}
|
|
452
462
|
handleWindowClick(e) {
|
|
463
|
+
if (!this.open)
|
|
464
|
+
return;
|
|
453
465
|
if (this.isInsideClick) {
|
|
454
466
|
this.isInsideClick = false;
|
|
455
467
|
return;
|
|
@@ -459,7 +471,7 @@ const SdPortal = class {
|
|
|
459
471
|
this.close.emit();
|
|
460
472
|
}
|
|
461
473
|
render() {
|
|
462
|
-
return h("slot", { key: '
|
|
474
|
+
return h("slot", { key: '0b01050e7c1ab2b648bf1118aec27140ff1aed4c' });
|
|
463
475
|
}
|
|
464
476
|
static get watchers() { return {
|
|
465
477
|
"open": [{
|
|
@@ -467,6 +479,7 @@ const SdPortal = class {
|
|
|
467
479
|
}]
|
|
468
480
|
}; }
|
|
469
481
|
};
|
|
482
|
+
SdPortal.style = `:host { display: none !important; }`;
|
|
470
483
|
|
|
471
484
|
const tag = {
|
|
472
485
|
xs: {
|
|
@@ -678,7 +691,7 @@ const SdTag = class {
|
|
|
678
691
|
render() {
|
|
679
692
|
const config = this.resolvedConfig;
|
|
680
693
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
681
|
-
return (h("span", { key: '
|
|
694
|
+
return (h("span", { key: '6cbf6fb37f0e926e604b24d482c8d648079b41dd', class: "sd-tag", style: {
|
|
682
695
|
'--sd-tag-background': config.background,
|
|
683
696
|
'--sd-tag-content': config.content,
|
|
684
697
|
'--sd-tag-height': config.height,
|
|
@@ -688,7 +701,7 @@ const SdTag = class {
|
|
|
688
701
|
'--sd-tag-font-weight': config.fontWeight,
|
|
689
702
|
'--sd-tag-line-height': config.lineHeight,
|
|
690
703
|
'--sd-tag-radius': config.radius,
|
|
691
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '
|
|
704
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: 'e0e9410afe716341dc7fb7891bb46c85cde9d51b', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
692
705
|
}
|
|
693
706
|
};
|
|
694
707
|
SdTag.style = sdTagCss();
|
|
@@ -50,7 +50,7 @@ const SdLinearProgress = class {
|
|
|
50
50
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
51
51
|
};
|
|
52
52
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
53
|
-
return (h(Host, { key: '
|
|
53
|
+
return (h(Host, { key: '8ca7707d3d3da0e761b6534c1301dde83ee82cf5', style: hostStyle }, h("div", { key: '0cee50f047b64cb4bdf0512aaa00cbfe2257bd8b', class: "sd-linear-progress__track" }, h("div", { key: 'f9e6c3f21edfcf583d2254f72a2f33359b5cc0b6', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '6586b4d39c2e8535dfee352ce78f0ab7f82c8c52', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '9e35001008fb5c38094dcb22c0961c072e9603a4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '800e17a8a527e45134e8d4049bb133960bc0219d', class: "sd-linear-progress__label" }, this.label)));
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
56
|
SdLinearProgress.style = sdLinearProgressCss();
|
|
@@ -18,10 +18,10 @@ const SdLoadingContainer = class {
|
|
|
18
18
|
this.visible = false;
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (h("div", { key: '
|
|
21
|
+
return (h("div", { key: '19729567b6041e3220c11c569be814f51b31c388', class: {
|
|
22
22
|
'sd-loading-container': true,
|
|
23
23
|
'sd-loading-container--visible': this.visible,
|
|
24
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '
|
|
24
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '50e6ac53e4515dc305e7a840362f2beb30714674', class: "sd-loading-container__backdrop" }), h("div", { key: '2f0943599188cb0800139f5ab543bab679f3bfee', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'a5977418272a167fe76073734be5a36ffa3136ab', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '9285adc663909fafb762e84ad5dd108c6ba2c972', class: "sd-loading-container__message" }, this.message))));
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
SdLoadingContainer.style = sdLoadingContainerCss();
|
|
@@ -156,13 +156,13 @@ const SdPagination = class {
|
|
|
156
156
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
157
157
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
158
158
|
};
|
|
159
|
-
return (h("div", { key: '
|
|
159
|
+
return (h("div", { key: '5a1ebb6aeb6732cd3b6133cedba47aeedf620291', class: {
|
|
160
160
|
'sd-pagination': true,
|
|
161
161
|
'sd-pagination--simple': this.simple,
|
|
162
|
-
}, style: cssVars }, h("div", { key: '
|
|
162
|
+
}, style: cssVars }, h("div", { key: 'a4856d8ffde66402eae909ad9f636f3b13f1b5d7', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
163
163
|
'sd-pagination__item': true,
|
|
164
164
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
165
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '
|
|
165
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'fd1d6d0ba1c143ca4f9692f1c604f0e0fc0730db', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
166
166
|
}
|
|
167
167
|
};
|
|
168
168
|
SdPagination.style = sdPaginationCss();
|
|
@@ -218,9 +218,9 @@ const SdTbody = class {
|
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
220
|
render() {
|
|
221
|
-
return (h(Host, { key: '
|
|
221
|
+
return (h(Host, { key: 'af02c942fe83b515e2065840ff3b83ad22fd5542', slot: `${this.tableId}-body` }, h("tbody", { key: '6f1b771c2a21ff087b5feb32b19e0fb4b0abed35', class: { tbody: true } }, [
|
|
222
222
|
this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
223
|
-
h("slot", { key: '
|
|
223
|
+
h("slot", { key: '0c7c439b269527f9bfbb00bf60a1aec10646da56' }),
|
|
224
224
|
this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
225
225
|
])));
|
|
226
226
|
}
|
|
@@ -232,7 +232,7 @@ const SdTbody = class {
|
|
|
232
232
|
};
|
|
233
233
|
SdTbody.style = sdTbodyCss();
|
|
234
234
|
|
|
235
|
-
const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.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:0;pointer-events:none;transition:opacity 0.2s}.th.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:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
|
|
235
|
+
const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.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:0;pointer-events:none;transition:opacity 0.2s}.th.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:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th--has-dropdown{cursor:pointer}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
|
|
236
236
|
|
|
237
237
|
const SdThead = class {
|
|
238
238
|
constructor(hostRef) {
|
|
@@ -478,36 +478,56 @@ const SdThead = class {
|
|
|
478
478
|
'--table-border-color': TABLE_BORDER.color,
|
|
479
479
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
480
480
|
};
|
|
481
|
-
return (h(Host, { key: '
|
|
481
|
+
return (h(Host, { key: '521fa63c751f74ba620aad7355127c7d7fe8217c', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '226911deb4a0a0898e064875fbba7aa1d326634b', class: {
|
|
482
482
|
'thead': true,
|
|
483
483
|
'thead--sticky': this._stickyHeader,
|
|
484
|
-
} }, h("tr", { key: '
|
|
484
|
+
} }, h("tr", { key: 'f60653ae5dc8b773b73ab05f9631358272e90df5', class: "tr" }, this._selectable && (h("th", { key: '7826b9c1fa8ec84f83825f8380e7bcd014d3782a', class: {
|
|
485
485
|
'th': true,
|
|
486
486
|
'th--selected': true,
|
|
487
487
|
'sticky-left': true,
|
|
488
488
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
489
489
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
490
|
-
}, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '
|
|
490
|
+
}, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '412a9ee49954014dc45dd0a2444642a549782d8e', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: '116b6c2a55cc7553090b39338e251101c1de057b', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
|
|
491
491
|
'th': true,
|
|
492
492
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
493
493
|
'sticky-left': true,
|
|
494
494
|
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
495
495
|
'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
|
|
496
|
-
|
|
496
|
+
'th--has-dropdown': col.hasDropdown === true,
|
|
497
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
|
|
498
|
+
? el => {
|
|
499
|
+
this.dropdownThRefs[col.name] = el;
|
|
500
|
+
}
|
|
501
|
+
: undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
|
|
502
|
+
e.stopPropagation();
|
|
503
|
+
this.handleColumnSort(col);
|
|
504
|
+
}, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
|
|
497
505
|
'th__dropdown-trigger': true,
|
|
498
506
|
'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
|
|
499
|
-
}, ref: el => {
|
|
507
|
+
}, ref: el => {
|
|
508
|
+
dropdownRefs[col.name] = el;
|
|
509
|
+
}, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
|
|
500
510
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
501
511
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
502
512
|
h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
|
|
503
513
|
const actualColIdx = stickyLeftCount + relativeIdx;
|
|
504
514
|
return (h("th", { key: col.name, class: {
|
|
505
|
-
th: true,
|
|
515
|
+
'th': true,
|
|
506
516
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
507
|
-
|
|
517
|
+
'th--has-dropdown': col.hasDropdown === true,
|
|
518
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
|
|
519
|
+
? el => {
|
|
520
|
+
this.dropdownThRefs[col.name] = el;
|
|
521
|
+
}
|
|
522
|
+
: undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
|
|
523
|
+
e.stopPropagation();
|
|
524
|
+
this.handleColumnSort(col);
|
|
525
|
+
}, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
|
|
508
526
|
'th__dropdown-trigger': true,
|
|
509
527
|
'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
|
|
510
|
-
}, ref: el => {
|
|
528
|
+
}, ref: el => {
|
|
529
|
+
this.dropdownRefs[col.name] = el;
|
|
530
|
+
}, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
|
|
511
531
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
512
532
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
513
533
|
h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
@@ -519,10 +539,20 @@ const SdThead = class {
|
|
|
519
539
|
'sticky-right': true,
|
|
520
540
|
'sticky-right-edge': relativeIdx === 0,
|
|
521
541
|
'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
|
|
522
|
-
|
|
542
|
+
'th--has-dropdown': col.hasDropdown === true,
|
|
543
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
|
|
544
|
+
? el => {
|
|
545
|
+
this.dropdownThRefs[col.name] = el;
|
|
546
|
+
}
|
|
547
|
+
: undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
|
|
548
|
+
e.stopPropagation();
|
|
549
|
+
this.handleColumnSort(col);
|
|
550
|
+
}, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
|
|
523
551
|
'th__dropdown-trigger': true,
|
|
524
552
|
'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
|
|
525
|
-
}, ref: el => {
|
|
553
|
+
}, ref: el => {
|
|
554
|
+
this.dropdownRefs[col.name] = el;
|
|
555
|
+
}, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
|
|
526
556
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
527
557
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
528
558
|
h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
|
|
@@ -82,17 +82,17 @@ const SdPopover = class {
|
|
|
82
82
|
const leftLink = this.leftLink;
|
|
83
83
|
const button = this.button;
|
|
84
84
|
const hasFooter = !!leftLink || !!button;
|
|
85
|
-
return (h(Fragment, { key: '
|
|
85
|
+
return (h(Fragment, { key: '163802d6f0954b87902bbf957831f311829e63dc' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '1bd73048fd65916a400840c572d988c445dd662b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'f3791b078c7970174d9394ffcbb19beb450f12c5', class: {
|
|
86
86
|
'sd-floating-menu': true,
|
|
87
87
|
'sd-floating-menu--popover': true,
|
|
88
88
|
[`sd-floating-menu--${placement}`]: true,
|
|
89
89
|
[menuClass]: menuClass !== '',
|
|
90
90
|
}, style: {
|
|
91
91
|
'--sd-floating-bg': popoverTokens.popover.default.bg,
|
|
92
|
-
} }, h("i", { key: '
|
|
92
|
+
} }, h("i", { key: 'f9ab66a933669a057a1da5188cb82ca9e5f17ed6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '6ea9ca3bacd2c84c468e5f00fa33e93e61a6bf9d' })), h("div", { key: '91d094cd45973bcc5ea6e6016510006f41956546', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'ebe9a1e130792d7e60ca9abef9020dff6c0bd4c4', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: 'b898402e77f125099b29f6bd8eb5384a70aa671a', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: 'e797202b27ff538d4148f3b6782b33f58fc6bc2f', class: {
|
|
93
93
|
'sd-floating-menu__buttons': true,
|
|
94
94
|
'sd-floating-menu__buttons--with-link': !!leftLink,
|
|
95
|
-
} }, leftLink && (h("sd-text-link", { key: '
|
|
95
|
+
} }, leftLink && (h("sd-text-link", { key: 'fdeacc2b97c997d0c7385bab5260e060a70292e6', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', rightArrow: leftLink.rightArrow ?? 'none', underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '4a56e7e714517edcbea075e7d4521f0a54388e9f', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: 'ca713f6a07637b014c58923db2ff7af1f3ae98a8', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
98
|
SdPopover.style = sdPopoverCss();
|
|
@@ -107,7 +107,7 @@ const SdPopup = class {
|
|
|
107
107
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
108
108
|
...this.submitButtonProps,
|
|
109
109
|
};
|
|
110
|
-
return (h("div", { key: '
|
|
110
|
+
return (h("div", { key: '9138fc14fe3accf97fe3a5bae4dd089d658a2198', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '545591be690bc16f8b78875548dcd13ffaaaa521', class: "sd-popup__header" }, h("h2", { key: '2a9e959ecac6a0be2bd97019e74bee23ab0c2ecc', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'f6e1053a8af7b1c87cb4adab5f8f5d51f970bc82', class: "sd-popup__body" }, h("slot", { key: '9f66b2873cb0a8e7409709a400d91fc569da12b5' })), this.useFooter && (h("footer", { key: 'fce908fd8f5bab94fee22184287072debce1b3ba', class: "sd-popup__footer" }, h("div", { key: 'c4db14ca27f56154cfb01728133bd3cdbd1ce7e7', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '7b9e920b1c322eb28de40fb2e9b02f03aa9b64e8', name: "footer-left" })), h("sd-button", { key: '87cb9bcbc9fb1657d1021609ce855118bd7c9b96', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
111
111
|
}
|
|
112
112
|
};
|
|
113
113
|
SdPopup.style = sdPopupCss();
|
|
@@ -182,7 +182,7 @@ const SdRadioButton = class {
|
|
|
182
182
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
183
183
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
184
184
|
};
|
|
185
|
-
return (h("div", { key: '
|
|
185
|
+
return (h("div", { key: '17355ebde09f652f5b94b4f70f09f68ef44cd29d', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
186
186
|
const isSelected = this.isOptionSelected(option);
|
|
187
187
|
const isDisabled = this.isOptionDisabled(option);
|
|
188
188
|
return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -133,7 +133,7 @@ const SdRadio = class {
|
|
|
133
133
|
'--sd-radio-label-color': RADIO_COLORS.label.default,
|
|
134
134
|
'--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
|
|
135
135
|
};
|
|
136
|
-
return (h("label", { key: '
|
|
136
|
+
return (h("label", { key: 'cc7ff62ac992791ef81db9212bb5986989f6b4d6', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '20bfeaf5bc322335f5300955ebf653213d662fa6', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '61d8bdfdb5f8309b8832b89ea2979db5b80968c8', class: "sd-radio__circle" }), this.label && (h("span", { key: 'cc2a5402e4745aaae897c8f37d5fc287a2ba9b29', class: "sd-radio__label", "data-label": this.label }, this.label))));
|
|
137
137
|
}
|
|
138
138
|
static get watchers() { return {
|
|
139
139
|
"value": [{
|
|
@@ -86,7 +86,7 @@ const SdSelectListItem = class {
|
|
|
86
86
|
return (
|
|
87
87
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
88
88
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
89
|
-
h("div", { key: '
|
|
89
|
+
h("div", { key: '2bec32f64859ef0e39928d4288cba3c727e16cf1', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
90
90
|
'sd-select-list-item': true,
|
|
91
91
|
'sd-select-list-item--group': isGroup,
|
|
92
92
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -96,7 +96,7 @@ const SdSelectListItem = class {
|
|
|
96
96
|
'sd-select-list-item--focused': this.isFocused,
|
|
97
97
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
98
98
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
99
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '
|
|
99
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'fb6d2ed50e6d24d0491200b5be2cb3ab97df1b04', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '52162297e94d672128ea0a2343c6baf6e04ee78c', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
102
|
SdSelectListItem.style = sdSelectListItemCss();
|
|
@@ -153,15 +153,15 @@ const SdSelectListItemSearch = class {
|
|
|
153
153
|
clearTimeout(this.debounceTimer);
|
|
154
154
|
}
|
|
155
155
|
render() {
|
|
156
|
-
return (h("div", { key: '
|
|
156
|
+
return (h("div", { key: '4b0eefc35e86aa2f320ce9410185b64323d60e45', class: {
|
|
157
157
|
'sd-select-list-item-search': true,
|
|
158
158
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
159
|
-
} }, h("div", { key: '
|
|
159
|
+
} }, h("div", { key: 'b724cb790c3f8d5eb2ecb899c28dbddf9acad631', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '18ba78adbc46e9cc0f3a4e355996dba25fc1c8e9', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'c2a2df9bc2dfe692b1f5732706ce1208a005aab4', ref: el => {
|
|
160
160
|
this.inputEl = el;
|
|
161
|
-
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '
|
|
161
|
+
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '7d9d3e924a24ddecbeb4bf5316c2c791913ac782', type: "button", class: {
|
|
162
162
|
'sd-select-list-item-search__clear': true,
|
|
163
163
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
164
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '
|
|
164
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '80d52b79d989e51513653655adf6604f352c43b0', name: "close", size: 12, color: "#888888" })))));
|
|
165
165
|
}
|
|
166
166
|
};
|
|
167
167
|
SdSelectListItemSearch.style = sdSelectListItemSearchCss();
|
|
@@ -294,15 +294,15 @@ const SdSelect = class {
|
|
|
294
294
|
this.closeDropdown();
|
|
295
295
|
},
|
|
296
296
|
};
|
|
297
|
-
return (h("sd-field", { key: '
|
|
297
|
+
return (h("sd-field", { key: '5dceeb2361339527e65657f66966a5b843f7a03b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
|
|
298
298
|
this.hovered = true;
|
|
299
299
|
}, onMouseLeave: () => {
|
|
300
300
|
this.hovered = false;
|
|
301
|
-
} }, h("div", { key: '
|
|
301
|
+
} }, h("div", { key: '2fe78a384fef6083a08709fa72d98d2b2e399580', class: "sd-select", ref: el => {
|
|
302
302
|
this.triggerRef = el;
|
|
303
|
-
} }, h("sd-select-trigger", { key: '
|
|
303
|
+
} }, h("sd-select-trigger", { key: 'be647e0ba29295be5a888d92cb18c273980ec38f', ref: el => {
|
|
304
304
|
this.triggerComponentRef = el;
|
|
305
|
-
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '
|
|
305
|
+
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2d519a9957ff7201519502a2053785cc669642c2', ...portalProps }, h("sd-select-listbox", { key: '33377475b06c3be1f6ba7e6909a9bfb938144b3a', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
306
306
|
}
|
|
307
307
|
static get watchers() { return {
|
|
308
308
|
"isOpen": [{
|
|
@@ -679,9 +679,9 @@ const SdSelectListbox = class {
|
|
|
679
679
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
680
680
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
681
681
|
};
|
|
682
|
-
return (h("div", { key: '
|
|
682
|
+
return (h("div", { key: 'df4d19f8807ce87384cad18ca981e0792da35682', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'b950890a9138fa5ab7f0df7c1d07bbea65140e67', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '1aeaf552893becedf8394c1e9af8ef7119e70fdb', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
683
683
|
this.listEl = el;
|
|
684
|
-
} }, this.showSelectAll && (h("sd-select-list-item", { key: '
|
|
684
|
+
} }, this.showSelectAll && (h("sd-select-list-item", { key: '83329f2d454d116d64155ef8a83c076e27cdc7b0', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
|
|
685
685
|
}
|
|
686
686
|
static get watchers() { return {
|
|
687
687
|
"searchKeyword": [{
|
|
@@ -749,7 +749,7 @@ const SdSelectTrigger = class {
|
|
|
749
749
|
? SELECT_COLORS.icon.disabled
|
|
750
750
|
: SELECT_COLORS.icon.default,
|
|
751
751
|
};
|
|
752
|
-
return (h("div", { key: '
|
|
752
|
+
return (h("div", { key: 'bd967efa32ed0692512e549db9f852c7c08d5dcd', ref: el => {
|
|
753
753
|
this.triggerEl = el;
|
|
754
754
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
755
755
|
'sd-select-trigger': true,
|
|
@@ -760,7 +760,7 @@ const SdSelectTrigger = class {
|
|
|
760
760
|
e.preventDefault();
|
|
761
761
|
this.handleClick();
|
|
762
762
|
}
|
|
763
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '
|
|
763
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '04a8568ac5d109f0635d3474a394030d630f441e', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: 'ba256d1a780f7805c81330a6ba4e010c458be57e', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
764
764
|
'sd-select-trigger__icon': true,
|
|
765
765
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
766
766
|
} }))));
|
|
@@ -107,7 +107,7 @@ const SdSwitch = class {
|
|
|
107
107
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
108
108
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
109
109
|
};
|
|
110
|
-
return (h("label", { key: '
|
|
110
|
+
return (h("label", { key: 'f63559e7ee0523e475e26e80bc568d9b79f03c2a', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'f1d0697ba500514923aeb6d514761641e34e6080', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '988ccaf702365c76c76e11246e5de7035509cfa0', class: "sd-switch__track" }, h("div", { key: '5a413a7e89054f5f93821f098f4d3173c09ce180', class: "sd-switch__knob" })), this.label && h("span", { key: 'b1674d9039d0d1e9dc9c01525fc2e6b97c139ed1', class: "sd-switch__label" }, this.label)));
|
|
111
111
|
}
|
|
112
112
|
};
|
|
113
113
|
SdSwitch.style = sdSwitchCss();
|
|
@@ -878,25 +878,25 @@ const SdTable = class {
|
|
|
878
878
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
879
879
|
'--table-host-height': hostHeight,
|
|
880
880
|
};
|
|
881
|
-
return (h(Host, { key: '
|
|
881
|
+
return (h(Host, { key: '288633055ee4be465a96964b11d6c032fecd603f', style: hostStyle }, h("div", { key: 'ab9878f8515bddc3058aafb1806310677fc9f360', class: "sd-table__container", style: {
|
|
882
882
|
'--table-width': this.width,
|
|
883
883
|
'--pagination-height': `${paginationHeight}px`,
|
|
884
|
-
} }, h("div", { key: '
|
|
884
|
+
} }, h("div", { key: '9f7f16a5cbf27f32a2209586f5b2604066bba4b4', class: {
|
|
885
885
|
'sd-table__wrapper': true,
|
|
886
886
|
'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
|
|
887
887
|
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
888
|
-
} }, h("div", { key: '
|
|
888
|
+
} }, h("div", { key: 'c16e48a6dc55ddcf398a7053a93d6e1595fc83da', class: {
|
|
889
889
|
'sd-table__scroll-container': true,
|
|
890
890
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
891
891
|
'sd-table__scroll-container--no-data': isNoData,
|
|
892
|
-
} }, this.isLoading && (h("div", { key: '
|
|
892
|
+
} }, this.isLoading && (h("div", { key: '1bc3cd25cbd34d912aee00dc43ad961f442a8d2a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '3c157990784d6f9e58fef6ff0e6b36ffd87d3a0d', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'ebb3e4560cc9729d496110e4f159a25737e26bca', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'c9b02b2aef01542a2fe5be0578d31ce72566bff6', class: "sd-table__no-data" }, h("div", { key: '6ab6d9b90ef703b4865eedbf19deff2a04e9d278', class: "sd-table__no-data-content", ref: el => {
|
|
893
893
|
this.noDataContentEl = el;
|
|
894
894
|
if (el)
|
|
895
895
|
this.syncNoDataContentObserver();
|
|
896
|
-
} }, h("slot", { key: '
|
|
896
|
+
} }, h("slot", { key: '072b90261f1a0817ccc20d8d5d5346bdcd223304', name: "no-data" }, h("span", { key: 'bbef2b4c13f8cf7736f02b11d149fe00af3cb567' }, this.resolvedNoDataLabel)))))), h("table", { key: '2d7beab7b8fd42f5bfc4b2b5c9538e6cd7a08b2a', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
897
897
|
this.pagination.rowsPerPage > 0 &&
|
|
898
898
|
this.rowCount > 0 &&
|
|
899
|
-
!this.useVirtualScroll && (h("div", { key: '
|
|
899
|
+
!this.useVirtualScroll && (h("div", { key: 'ee81359d024a466a2730c2e7df7a4a0f2b319de3', class: "sd-table__pagination" }, h("sd-pagination", { key: '069c72080181324d82c9ef207398e11d7766cb34', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'ce1798a0c99cff78318087d25bfc1ece86993e4a', value: this.useInternalPagination
|
|
900
900
|
? this.innerRowsPerPage
|
|
901
901
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
902
902
|
if (!this.isRowsPerPageValue(e.detail))
|