@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
package/hydrate/index.mjs
CHANGED
|
@@ -5342,7 +5342,7 @@ class SdActionModal {
|
|
|
5342
5342
|
if (this.height != null && this.height !== '') {
|
|
5343
5343
|
sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
|
5344
5344
|
}
|
|
5345
|
-
return (hAsync("div", { key: '
|
|
5345
|
+
return (hAsync("div", { key: '19ea6ad7ef8aeb5fc4a8537e388542c6c2244c71', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: 'd56e8c35c88b3f4c2f279ee7e8b2f92c9e9760c5', class: "sd-action-modal__header" }, hAsync("h2", { key: '50e3334be477751314febff5b29103cc7600201e', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'bc95f535e273ad97f820d548647601897b6d4253', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '332a0923092c0ecec193d774f9b77316d41cd97c', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '56127a67e0130b9639b7b9146604ce09f9d48e16', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '22668cbe686a310e829c9d6052cec4b62a7bd194', class: "sd-action-modal__body" }, hAsync("slot", { key: '58621eddef8c7423620a41a3c8c52b128554946e', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '6c5ed286a5cfa39a1a46da606fee61767199344c', class: "sd-action-modal__footer" }, hAsync("div", { key: 'ea0f414e3a1aecd3b150f93d544b801d633793c8', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '171f7df6863e49565e9bf0d7193e7c39c05462b5', name: "bottom-sub-content" })), hAsync("sd-button", { key: '919ec31d0ab1c60fb1f186c6c404ba9452ff0dbb', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
|
|
5346
5346
|
}
|
|
5347
5347
|
static get style() { return sdActionModalCss(); }
|
|
5348
5348
|
static get cmpMeta() { return {
|
|
@@ -5395,7 +5395,7 @@ class SdBadge {
|
|
|
5395
5395
|
color = 'blue';
|
|
5396
5396
|
render() {
|
|
5397
5397
|
const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
|
|
5398
|
-
return (hAsync("div", { key: '
|
|
5398
|
+
return (hAsync("div", { key: '2531ebcfe66e33f8ac31be0299865ee8aa45ed17', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'a8ddd518167b90fedb4d6d26cc28b17082f5fe0b', class: "sd-badge__dot" })));
|
|
5399
5399
|
}
|
|
5400
5400
|
static get style() { return sdBadgeCss(); }
|
|
5401
5401
|
static get cmpMeta() { return {
|
|
@@ -5638,7 +5638,7 @@ class SdBarcodeInput {
|
|
|
5638
5638
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5639
5639
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5640
5640
|
};
|
|
5641
|
-
return (hAsync("sd-field", { key: '
|
|
5641
|
+
return (hAsync("sd-field", { key: '79dd05ab7f39104c2aa54c44a71cc3fe4cf7870f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '5470e7e6ddff60239bf1d42d78843f807a72c07b', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'ab15a2e5a9287f3c124f48f89610ab55c898b76e', name: "prefix" }), hAsync("input", { key: 'e2edbbcfb70ec035e68735c4de7792d6c8ef177f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'd2065cad4d491747a2a61b60b2bb10a7ef5b18d9', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '2b88fe6fd8c1c013c60b50584721a7c4d4f3bef5', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
|
|
5642
5642
|
if (this.disabled)
|
|
5643
5643
|
return;
|
|
5644
5644
|
this.internalValue = '';
|
|
@@ -7020,7 +7020,7 @@ class SdCalendar {
|
|
|
7020
7020
|
const eventMap = this.eventMap;
|
|
7021
7021
|
const legend = this.legendItems;
|
|
7022
7022
|
const hasEvents = (this.events?.length ?? 0) > 0;
|
|
7023
|
-
return (hAsync("div", { key: '
|
|
7023
|
+
return (hAsync("div", { key: '317beb7cdffbba8982306539441fec46e6330d82', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, hAsync("div", { key: '0d9e1084ee0bff994b4a00b7f2d490c0e101aa16', class: "sd-calendar__header" }, hAsync("div", { key: '8d82438f1820721fcbcd14cf42c1ae00b3a517d9', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '4e3391c57c0fdf3ad95b82d82c7a130c3202229d', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '6a7cbfb0069dd1d29e195cc09a9c55a8ae52aa40', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '239d5e623f830e8ceeb069e78126175772af48de', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '24362199d36afc204eebe5c5f14a41705f6782d9', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '7aa04fa1fbb355d8b3fae4cca011999b4f7f5850', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: 'ea5d0129d4f7eecaeff5793460363e2f15c238b8', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '7a3879edb74cb71c46fc500d7c230c21e19042c4', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '7532053f6607d9e4940403f22fd32994128fc457', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'ef59638defed69c325e49fc71ca0cc73a7d778bf', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '0205b10254c75567336bc7e4ed8a26d2227ecb33', class: "sd-calendar__grid" }, this.cells.map(cell => {
|
|
7024
7024
|
const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
|
|
7025
7025
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
7026
7026
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -7033,8 +7033,8 @@ class SdCalendar {
|
|
|
7033
7033
|
'sd-calendar__day--disabled': isDisabled,
|
|
7034
7034
|
}, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
|
|
7035
7035
|
})), legend.length > 0 && [
|
|
7036
|
-
hAsync("span", { key: '
|
|
7037
|
-
hAsync("div", { key: '
|
|
7036
|
+
hAsync("span", { key: 'a06b1cd9ec93891e3762f6334949cd23b643290f', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
|
|
7037
|
+
hAsync("div", { key: '8dc6bd2495ab471b56ed6fa252c9e0ad5ebe8341', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
|
|
7038
7038
|
]));
|
|
7039
7039
|
}
|
|
7040
7040
|
static get watchers() { return {
|
|
@@ -7291,7 +7291,7 @@ class SdCallout {
|
|
|
7291
7291
|
}
|
|
7292
7292
|
render() {
|
|
7293
7293
|
const showTitle = this.type === 'danger';
|
|
7294
|
-
return (hAsync("div", { key: '
|
|
7294
|
+
return (hAsync("div", { key: '6f1f3f4b05febbac7fcfe163d641beca60a67ddb', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), hAsync("div", { key: '2e0c4050c4ed2d353cd270420abfbd6aac014015', class: "sd-callout__body" }, this.renderBody())));
|
|
7295
7295
|
}
|
|
7296
7296
|
static get style() { return sdCalloutCss(); }
|
|
7297
7297
|
static get cmpMeta() { return {
|
|
@@ -7318,7 +7318,7 @@ class SdCard {
|
|
|
7318
7318
|
/** 카드 루트 엘리먼트에 추가할 클래스 */
|
|
7319
7319
|
sdClass = '';
|
|
7320
7320
|
render() {
|
|
7321
|
-
return (hAsync(Fragment, { key: '
|
|
7321
|
+
return (hAsync(Fragment, { key: 'c8835377275c2bed1a193eaf0a1db0c1c6fde960' }, hAsync("div", { key: '37cec8daa273881a40258f632109d9490e5c6978', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'b1b485f3cfe056db25c79bbe15420484e61e5d1a' }))));
|
|
7322
7322
|
}
|
|
7323
7323
|
static get style() { return sdCardCss(); }
|
|
7324
7324
|
static get cmpMeta() { return {
|
|
@@ -7876,7 +7876,7 @@ class SdChip {
|
|
|
7876
7876
|
'--sd-chip-font-weight': typography.fontWeight,
|
|
7877
7877
|
'--sd-chip-line-height': typography.lineHeight,
|
|
7878
7878
|
};
|
|
7879
|
-
return (hAsync("span", { key: '
|
|
7879
|
+
return (hAsync("span", { key: '2cd717bc842330a28bbc89a662deda16f59106ee', class: {
|
|
7880
7880
|
'sd-chip': true,
|
|
7881
7881
|
[`sd-chip--${state}`]: true,
|
|
7882
7882
|
'sd-chip--disabled': this.disabled,
|
|
@@ -8110,7 +8110,7 @@ const CHIP_INPUT_SUGGESTIONS = {
|
|
|
8110
8110
|
emptyLineHeight: '20px',
|
|
8111
8111
|
};
|
|
8112
8112
|
|
|
8113
|
-
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
8113
|
+
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input sd-portal{display:none}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
8114
8114
|
|
|
8115
8115
|
class SdChipInput {
|
|
8116
8116
|
constructor(hostRef) {
|
|
@@ -8285,7 +8285,6 @@ class SdChipInput {
|
|
|
8285
8285
|
this.update.emit(next);
|
|
8286
8286
|
this.inputEvent.emit('');
|
|
8287
8287
|
this.inputEl?.focus();
|
|
8288
|
-
this.suppressRecommendations = true;
|
|
8289
8288
|
};
|
|
8290
8289
|
handleChipRemove = (index) => {
|
|
8291
8290
|
const next = this.internalValues.filter((_, i) => i !== index);
|
|
@@ -8549,7 +8548,7 @@ class SdChipInput {
|
|
|
8549
8548
|
fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
|
|
8550
8549
|
color: CHIP_INPUT_SUGGESTIONS.emptyColor,
|
|
8551
8550
|
};
|
|
8552
|
-
return (hAsync("sd-field", { key: '
|
|
8551
|
+
return (hAsync("sd-field", { key: '5f654a66d1ba404b156c0fabcebd5006d033f67a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: 'c1b4648298f16f4d7ee5b4ef8b75da7ae380c70d', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: 'b838efe46b7b62be09c3ac5acc8c3d522d2859bf', class: {
|
|
8553
8552
|
'sd-chip-input__field': true,
|
|
8554
8553
|
'sd-chip-input__field--filled': this.inputValue !== '',
|
|
8555
8554
|
'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
|
|
@@ -8557,12 +8556,12 @@ class SdChipInput {
|
|
|
8557
8556
|
? this.inputValue
|
|
8558
8557
|
: this.internalValues.length === 0
|
|
8559
8558
|
? this.placeholder
|
|
8560
|
-
: '' }, hAsync("input", { key: '
|
|
8559
|
+
: '' }, hAsync("input", { key: '6d29024fd020e9a7e2ff2c68eb64aa6b1790f7c5', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
|
|
8561
8560
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
8562
|
-
hAsync("div", { key: '
|
|
8561
|
+
hAsync("div", { key: 'e816bb2bab75cb2f2862913d3e18b4c8ea6e3d1b', class: "sd-chip-input__reset",
|
|
8563
8562
|
// 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
|
|
8564
8563
|
// 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
|
|
8565
|
-
onMouseDown: e => e.preventDefault() }, this.inputValue === '' && hAsync("span", { key: '
|
|
8564
|
+
onMouseDown: e => e.preventDefault() }, this.inputValue === '' && hAsync("span", { key: '1c53892f50b7f7c3ce2bdb681dc745b5922bef48', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: '07efa515dce065f89642966da96cb4c4b90d6da9', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: 'a021bbe5ec6e0a74b58b758ec33088be7c2bbb00', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), hAsync("sd-portal", { key: '3b6b9044053fca449a225d68125a25796e4b3e20', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '9095dc0dfb4755b430910f6b5c43196f0aa24501', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: '82aa5105a054a76ca3d8da78ef519bd8fc78f122', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), showRecommendations ? (hAsync("div", { style: {
|
|
8566
8565
|
display: 'flex',
|
|
8567
8566
|
flexWrap: 'wrap',
|
|
8568
8567
|
gap: '8px',
|
|
@@ -8606,7 +8605,7 @@ class SdChipInput {
|
|
|
8606
8605
|
if (!isSelected)
|
|
8607
8606
|
this.addChip(item);
|
|
8608
8607
|
} }, hAsync("span", { style: { flex: '1' } }, item), isSelected && (hAsync("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
|
|
8609
|
-
})))))))
|
|
8608
|
+
})))))));
|
|
8610
8609
|
}
|
|
8611
8610
|
static get watchers() { return {
|
|
8612
8611
|
"values": [{
|
|
@@ -8768,7 +8767,7 @@ class SdCircleProgress {
|
|
|
8768
8767
|
}
|
|
8769
8768
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
8770
8769
|
const showPercent = !this.indeterminate;
|
|
8771
|
-
return (hAsync(Host, { key: '
|
|
8770
|
+
return (hAsync(Host, { key: 'b5b95509acbc4ce797cb30163e9e732cb4497ccc', style: hostStyle }, hAsync("svg", { key: 'dc0ad68b03996e71c5d60fbc98a5ee017dcf1442', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '48f479dfe00730a41fc4020c2c4c42e14c54c42e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '2d2a54ff75db11c87e21a7953d3580832e4511be', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '8c393fe080a5d893bdbb90670bdba0cf76a285f6', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '2bbad3b1a3ab35696b62e97c9627a152ae8f7bf6', class: "sd-circle-progress__label" }, this.label)));
|
|
8772
8771
|
}
|
|
8773
8772
|
static get style() { return sdCircleProgressCss(); }
|
|
8774
8773
|
static get cmpMeta() { return {
|
|
@@ -8899,9 +8898,9 @@ class SdConfirmModal {
|
|
|
8899
8898
|
const type = this.resolvedType;
|
|
8900
8899
|
const iconName = CONFIRM_MODAL_ICON_MAP[type];
|
|
8901
8900
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
|
|
8902
|
-
return (hAsync("div", { key: '
|
|
8901
|
+
return (hAsync("div", { key: 'e8fcb4879a5a9f2b3bf41753e4cc511e710db1f6', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'a8595db97066963534d0ee5529f39481ed1e6c27', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '3b5cf4842176f6c039ecb64ec7942e7cb5a6f1ac', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '6f7032707292e71e0f8adc655ce88487c08e1b8d', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'e21c66301b368ffd989063aaf9826e023de71925', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '3965561001b0520f491cac833bba3cfe92d7a200', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (hAsync("div", { key: 'dc2c38a945493e42d451e4fa3d3ebaa6dca75e4a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
8903
8902
|
this.customContentRef = el;
|
|
8904
|
-
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '
|
|
8903
|
+
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'ae35e60d69047547d159a452b838c8fc57a3e1a4', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '3bd41c58539faade80e61fac6a91a4ab318bbe88', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '177fba6b79a23c80b1037d3af4872c58a598aa33', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: 'b332d980d9236c584ebca47f89fc2d9b217c0bfd', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
|
|
8905
8904
|
}
|
|
8906
8905
|
static get style() { return sdConfirmModalCss(); }
|
|
8907
8906
|
static get cmpMeta() { return {
|
|
@@ -9221,9 +9220,9 @@ class SdDatePicker {
|
|
|
9221
9220
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9222
9221
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9223
9222
|
};
|
|
9224
|
-
return (hAsync("sd-field", { key: '
|
|
9223
|
+
return (hAsync("sd-field", { key: 'd40168072c744016d87e7e812b781f7cfeacbc0f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '75a6029631b17e71ce9ba984cb0804d4f0e4b003', class: "sd-date-picker", ref: el => {
|
|
9225
9224
|
this.triggerRef = el;
|
|
9226
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9225
|
+
} }, hAsync("sd-date-picker-trigger", { key: '50239daa174a49c306cd79633fc2b26756650b39', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '6b2bc9b10b5337b24ba2403a1a3dc29cf8c49007', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '04274e5bd12c2a3a9c0b6879c49fae4b547e5670', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
9227
9226
|
}
|
|
9228
9227
|
static get watchers() { return {
|
|
9229
9228
|
"isOpen": [{
|
|
@@ -9311,7 +9310,7 @@ class SdDatePickerTrigger {
|
|
|
9311
9310
|
? DATEPICKER_COLORS.icon.disabled
|
|
9312
9311
|
: DATEPICKER_COLORS.icon.default,
|
|
9313
9312
|
};
|
|
9314
|
-
return (hAsync("div", { key: '
|
|
9313
|
+
return (hAsync("div", { key: 'bd454879eb1a8f40f32e0131b3f2884bbf02b888', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
9315
9314
|
'sd-date-picker-trigger': true,
|
|
9316
9315
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
9317
9316
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -9319,7 +9318,7 @@ class SdDatePickerTrigger {
|
|
|
9319
9318
|
e.preventDefault();
|
|
9320
9319
|
this.handleClick();
|
|
9321
9320
|
}
|
|
9322
|
-
} }, hAsync("sd-icon", { key: '
|
|
9321
|
+
} }, hAsync("sd-icon", { key: '1c1d87b067a98d98d85a6c3e544a389b3b965715', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: 'da87df624c173336d434bd943c6fcce5e86feb03', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
9323
9322
|
}
|
|
9324
9323
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
9325
9324
|
static get cmpMeta() { return {
|
|
@@ -9768,7 +9767,7 @@ class SdDateRangePickerCalendar {
|
|
|
9768
9767
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
9769
9768
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
9770
9769
|
};
|
|
9771
|
-
return (hAsync(Fragment, { key: '
|
|
9770
|
+
return (hAsync(Fragment, { key: 'a32cc455c1d5fda2754a64374daa6cd664ccf811' }, hAsync("div", { key: 'beaaa15519e87cf3543981c4b902fe000c945d57', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '54ac87b736bd35236b900ca0b34940a82017b0ec', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'f4b585c6a6b680591de74c0f31801578df6629c9', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
9772
9771
|
}
|
|
9773
9772
|
static get watchers() { return {
|
|
9774
9773
|
"value": [{
|
|
@@ -9811,7 +9810,7 @@ class SdDivider {
|
|
|
9811
9810
|
const hostStyle = {
|
|
9812
9811
|
'--sd-divider-color': DIVIDER_COLORS.default,
|
|
9813
9812
|
};
|
|
9814
|
-
return (hAsync(Host, { key: '
|
|
9813
|
+
return (hAsync(Host, { key: '2708ce362531fa5f3658280ba77733c5f9fb8fa6', style: hostStyle }, hAsync("hr", { key: 'e38476a897aa2bae6500316d5961fc9d6d18780d', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
|
|
9815
9814
|
}
|
|
9816
9815
|
static get style() { return sdDividerCss(); }
|
|
9817
9816
|
static get cmpMeta() { return {
|
|
@@ -9978,7 +9977,7 @@ const DROPDOWN_DISABLED_BORDER = buttonTokens.button.border.disabled;
|
|
|
9978
9977
|
const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
|
|
9979
9978
|
const getDropdownButtonPreset = (value) => getPresetName(value);
|
|
9980
9979
|
|
|
9981
|
-
const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap,
|
|
9980
|
+
const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-dropdown-md-gap, 16px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#FFFFFF;--sd-dropdown-button-icon:var(--sd-dropdown-button-content);--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-current-icon:var(--sd-dropdown-button-icon);--sd-dropdown-button-divider:#006AC1;--sd-dropdown-button-accent:#0075FF;--sd-dropdown-button-disabled-bg:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-dropdown-button-disabled-content:var(--sd-button-button-text-disabled, #888888);--sd-dropdown-button-disabled-icon:var(--sd-button-button-icon-disabled, #BBBBBB);--sd-dropdown-button-disabled-border:var(--sd-button-button-border-disabled, #CCCCCC);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-button-dropdown-xs-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var( --sd-button-button-xs-typography-text-decoration, none )}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-button-dropdown-sm-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var( --sd-button-button-sm-typography-text-decoration, none )}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-dropdown-md-gap, 16px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var( --sd-button-button-md-typography-text-decoration, none );border-radius:var(--sd-button-button-radius-md, 6px)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);--sd-dropdown-button-current-icon:var(--sd-dropdown-button-disabled-icon);cursor:not-allowed}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger{gap:var(--sd-dropdown-button-gap);padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-label{padding:0}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-icon{min-width:0;padding:0}.sd-dropdown-button--split{display:inline-flex;align-items:stretch}.sd-dropdown-button--split .sd-dropdown-button__trigger--label-part{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part{border-top-left-radius:0;border-bottom-left-radius:0;border-left:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-divider)}.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part.sd-dropdown-button__trigger--disabled{border-left-color:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
|
|
9982
9981
|
|
|
9983
9982
|
class SdDropdownButton extends BaseDropdownEvent {
|
|
9984
9983
|
constructor(hostRef) {
|
|
@@ -10486,21 +10485,21 @@ class SdField {
|
|
|
10486
10485
|
: {}),
|
|
10487
10486
|
}
|
|
10488
10487
|
: {};
|
|
10489
|
-
return (hAsync("div", { key: '
|
|
10488
|
+
return (hAsync("div", { key: '45a5353fb451aa829092ca34f3212d6e62f1843a', class: {
|
|
10490
10489
|
'sd-field': true,
|
|
10491
10490
|
'sd-field--has-label': this.label !== '',
|
|
10492
10491
|
'sd-field--has-addon': addon !== '',
|
|
10493
10492
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
10494
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '
|
|
10493
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '75f3be0dae03f292b66980b7c92d574bd0bda988', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '69b9827a2599a2e01fad26224b4b9800fde6e347', class: "sd-field__main", style: this.width !== '' && this.width !== 0
|
|
10495
10494
|
? {
|
|
10496
10495
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
10497
10496
|
flex: 'none',
|
|
10498
10497
|
}
|
|
10499
|
-
: {} }, hAsync("div", { key: '
|
|
10498
|
+
: {} }, hAsync("div", { key: 'ba0e98fd309c32ee73b2ba92f956358d51790f58', class: {
|
|
10500
10499
|
'sd-field__control': true,
|
|
10501
10500
|
'sd-field__control--has-addon': addon !== '',
|
|
10502
|
-
} }, addon && (hAsync("div", { key: '
|
|
10503
|
-
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)), hAsync("slot", { key: '
|
|
10501
|
+
} }, addon && (hAsync("div", { key: '8f941150147145368d340c4be0e3636ef67060c3', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '78d5d092094c0f3e8562127d77821dadb2a21b6a', name: this.icon.name, size: this.icon.size ??
|
|
10502
|
+
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)), hAsync("slot", { key: 'b494ab4550ae739096957cad46cb95a8c71f5a0b' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
|
|
10504
10503
|
}
|
|
10505
10504
|
renderLabel(label) {
|
|
10506
10505
|
if (label == null || label === '')
|
|
@@ -11064,7 +11063,7 @@ class SdFloatingPopover {
|
|
|
11064
11063
|
}
|
|
11065
11064
|
}
|
|
11066
11065
|
render() {
|
|
11067
|
-
return hAsync("slot", { key: '
|
|
11066
|
+
return hAsync("slot", { key: 'a560d8d46ef03688ce16a984c54ae23f740e7ef8' });
|
|
11068
11067
|
}
|
|
11069
11068
|
static get style() { return sdFloatingPortalCss(); }
|
|
11070
11069
|
static get cmpMeta() { return {
|
|
@@ -11299,7 +11298,7 @@ const GHOST_BUTTON_DISABLED_COLORS = {
|
|
|
11299
11298
|
inverse: ghostButtonTokens.ghostButton.inverse.disabled,
|
|
11300
11299
|
};
|
|
11301
11300
|
|
|
11302
|
-
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%)}`;
|
|
11301
|
+
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}`;
|
|
11303
11302
|
|
|
11304
11303
|
class SdGhostButton {
|
|
11305
11304
|
constructor(hostRef) {
|
|
@@ -11371,7 +11370,7 @@ class SdGhostButton {
|
|
|
11371
11370
|
const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
|
|
11372
11371
|
const tooltipText = (this.tooltipText ?? '').trim();
|
|
11373
11372
|
const hasTooltip = tooltipText.length > 0;
|
|
11374
|
-
return (hAsync("button", { key: '
|
|
11373
|
+
return (hAsync("button", { key: '9d2d352d36c7c34c67d8c57de6236d72727bd078', class: {
|
|
11375
11374
|
'sd-ghost-button': true,
|
|
11376
11375
|
'sd-ghost-button--disabled': this.disabled,
|
|
11377
11376
|
}, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, style: {
|
|
@@ -11380,7 +11379,7 @@ class SdGhostButton {
|
|
|
11380
11379
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
|
|
11381
11380
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
11382
11381
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
11383
|
-
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (hAsync("sd-portal", { key: '
|
|
11382
|
+
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (hAsync("sd-portal", { key: '1a73fb53be28a622d03e4f20be0b30e0e76bccd4', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, hAsync("div", { key: 'e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: '4aa1525a6da6ee72daf1815f1440d665bd1cf2c8', name: "square_xs_grey", label: tooltipText })))), hAsync("sd-icon", { key: '4caac22d0d888c1998032697043e3a3761e012aa', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
11384
11383
|
}
|
|
11385
11384
|
static get style() { return sdGhostButtonCss(); }
|
|
11386
11385
|
static get cmpMeta() { return {
|
|
@@ -12136,12 +12135,12 @@ class SdInput {
|
|
|
12136
12135
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
12137
12136
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
12138
12137
|
};
|
|
12139
|
-
return (hAsync("sd-field", { key: '
|
|
12138
|
+
return (hAsync("sd-field", { key: '6dda00aedca8b7020960de585e27477b7ee104e7', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'ee4b9368d04388c5679943df7c380c879130a07d', class: "sd-input__content" }, hAsync("slot", { key: 'ba1737093bb22f790ab9ea4677966daf718cae01', name: "prefix" }), hAsync("input", { key: '94961d388267f7b84ac9b5c1e7a5b10a803266c7', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '1d5a1319d8f216d637eb546665e16be4dab1f2a8', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '901716b67a34eefc41bb497b86bb658207f79046', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
12140
12139
|
if (this.disabled || this.readonly)
|
|
12141
12140
|
return;
|
|
12142
12141
|
this.internalValue = '';
|
|
12143
12142
|
await this.formField?.sdValidate();
|
|
12144
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
12143
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '5b7e03060d88fee8256cdf9aba66d3e3eed36cdc', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
|
|
12145
12144
|
if (this.disabled || this.readonly)
|
|
12146
12145
|
return;
|
|
12147
12146
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -12602,7 +12601,7 @@ class SdLinearProgress {
|
|
|
12602
12601
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
12603
12602
|
};
|
|
12604
12603
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
12605
|
-
return (hAsync(Host, { key: '
|
|
12604
|
+
return (hAsync(Host, { key: '8ca7707d3d3da0e761b6534c1301dde83ee82cf5', style: hostStyle }, hAsync("div", { key: '0cee50f047b64cb4bdf0512aaa00cbfe2257bd8b', class: "sd-linear-progress__track" }, hAsync("div", { key: 'f9e6c3f21edfcf583d2254f72a2f33359b5cc0b6', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: '6586b4d39c2e8535dfee352ce78f0ab7f82c8c52', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: '9e35001008fb5c38094dcb22c0961c072e9603a4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '800e17a8a527e45134e8d4049bb133960bc0219d', class: "sd-linear-progress__label" }, this.label)));
|
|
12606
12605
|
}
|
|
12607
12606
|
static get style() { return sdLinearProgressCss(); }
|
|
12608
12607
|
static get cmpMeta() { return {
|
|
@@ -12638,10 +12637,10 @@ class SdLoadingContainer {
|
|
|
12638
12637
|
this.visible = false;
|
|
12639
12638
|
}
|
|
12640
12639
|
render() {
|
|
12641
|
-
return (hAsync("div", { key: '
|
|
12640
|
+
return (hAsync("div", { key: '19729567b6041e3220c11c569be814f51b31c388', class: {
|
|
12642
12641
|
'sd-loading-container': true,
|
|
12643
12642
|
'sd-loading-container--visible': this.visible,
|
|
12644
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
12643
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '50e6ac53e4515dc305e7a840362f2beb30714674', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '2f0943599188cb0800139f5ab543bab679f3bfee', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'a5977418272a167fe76073734be5a36ffa3136ab', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: '9285adc663909fafb762e84ad5dd108c6ba2c972', class: "sd-loading-container__message" }, this.message))));
|
|
12645
12644
|
}
|
|
12646
12645
|
static get style() { return sdLoadingContainerCss(); }
|
|
12647
12646
|
static get cmpMeta() { return {
|
|
@@ -12746,7 +12745,7 @@ class SdLoadingModal {
|
|
|
12746
12745
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
12747
12746
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
12748
12747
|
};
|
|
12749
|
-
return (hAsync(Host, { key: '
|
|
12748
|
+
return (hAsync(Host, { key: '163783850461aff1255dbd0784db91ad28da3f16', style: hostStyle }, hAsync("div", { key: '1e09f93378b0813d03c444570d06ffb09b494b63', class: "sd-loading-modal" }, hAsync("div", { key: '97a4919967f5be295b57b4194295c919b13151a4', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: 'aea0e4b45a55f0907e073f125ba0195bfa128078', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: 'b64767c954b366f6414886f032c80dd1c8c0190b', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '8a99e885b5561656f4046698235537d461b41455', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
12750
12749
|
}
|
|
12751
12750
|
static get style() { return sdLoadingModalCss(); }
|
|
12752
12751
|
static get cmpMeta() { return {
|
|
@@ -13629,15 +13628,15 @@ class SdNumberInput {
|
|
|
13629
13628
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
13630
13629
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
13631
13630
|
};
|
|
13632
|
-
return (hAsync("sd-field", { key: '
|
|
13631
|
+
return (hAsync("sd-field", { key: 'c50811d15f4b698d889132ac8e4527df72059a0d', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'c36595fc48eeb88090cfdeeda3da0e51a86d814e', class: {
|
|
13633
13632
|
'sd-number-input__content': true,
|
|
13634
13633
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
13635
|
-
} }, this.useButton && (hAsync("button", { key: '
|
|
13634
|
+
} }, this.useButton && (hAsync("button", { key: '89a68f1264907284d8718c59c42cbcc0d06ec29d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '9e9c5f4d33eadf088c6e8c428dd97d2c717905b3', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
13636
13635
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13637
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '
|
|
13636
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: 'b5d2bef21242c1dc65d10f6dcb3b4c50380804d2', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '2f1d5c24a3462ae5aded71d645317ad84ca2dd6b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
13638
13637
|
textAlign: this.useButton ? 'center' : 'right',
|
|
13639
13638
|
...this.inputStyle,
|
|
13640
|
-
} }), this.inputSuffix && hAsync("span", { key: '
|
|
13639
|
+
} }), this.inputSuffix && hAsync("span", { key: '53391ecdede9630774be6891412835dad3975186', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '9383cf29b0688252023b6bc9e10189c70f049ccf', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'a380dce8f2cf42c2f312657ea8304e94b9af8fe7', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
13641
13640
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13642
13641
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
13643
13642
|
}
|
|
@@ -13851,13 +13850,13 @@ class SdPagination {
|
|
|
13851
13850
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
13852
13851
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
13853
13852
|
};
|
|
13854
|
-
return (hAsync("div", { key: '
|
|
13853
|
+
return (hAsync("div", { key: '5a1ebb6aeb6732cd3b6133cedba47aeedf620291', class: {
|
|
13855
13854
|
'sd-pagination': true,
|
|
13856
13855
|
'sd-pagination--simple': this.simple,
|
|
13857
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
13856
|
+
}, style: cssVars }, hAsync("div", { key: 'a4856d8ffde66402eae909ad9f636f3b13f1b5d7', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
13858
13857
|
'sd-pagination__item': true,
|
|
13859
13858
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
13860
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
13859
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'fd1d6d0ba1c143ca4f9692f1c604f0e0fc0730db', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
13861
13860
|
}
|
|
13862
13861
|
static get style() { return sdPaginationCss(); }
|
|
13863
13862
|
static get cmpMeta() { return {
|
|
@@ -13957,17 +13956,17 @@ class SdPopover {
|
|
|
13957
13956
|
const leftLink = this.leftLink;
|
|
13958
13957
|
const button = this.button;
|
|
13959
13958
|
const hasFooter = !!leftLink || !!button;
|
|
13960
|
-
return (hAsync(Fragment, { key: '
|
|
13959
|
+
return (hAsync(Fragment, { key: '163802d6f0954b87902bbf957831f311829e63dc' }, this.label !== '' ? (hAsync("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) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: '1bd73048fd65916a400840c572d988c445dd662b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: 'f3791b078c7970174d9394ffcbb19beb450f12c5', class: {
|
|
13961
13960
|
'sd-floating-menu': true,
|
|
13962
13961
|
'sd-floating-menu--popover': true,
|
|
13963
13962
|
[`sd-floating-menu--${placement}`]: true,
|
|
13964
13963
|
[menuClass]: menuClass !== '',
|
|
13965
13964
|
}, style: {
|
|
13966
13965
|
'--sd-floating-bg': popoverTokens.popover.default.bg,
|
|
13967
|
-
} }, hAsync("i", { key: '
|
|
13966
|
+
} }, hAsync("i", { key: 'f9ab66a933669a057a1da5188cb82ca9e5f17ed6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '6ea9ca3bacd2c84c468e5f00fa33e93e61a6bf9d' })), hAsync("div", { key: '91d094cd45973bcc5ea6e6016510006f41956546', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'ebe9a1e130792d7e60ca9abef9020dff6c0bd4c4', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (hAsync("div", { key: 'b898402e77f125099b29f6bd8eb5384a70aa671a', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (hAsync("div", { key: 'e797202b27ff538d4148f3b6782b33f58fc6bc2f', class: {
|
|
13968
13967
|
'sd-floating-menu__buttons': true,
|
|
13969
13968
|
'sd-floating-menu__buttons--with-link': !!leftLink,
|
|
13970
|
-
} }, leftLink && (hAsync("sd-text-link", { key: '
|
|
13969
|
+
} }, leftLink && (hAsync("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 && (hAsync("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 }))))), hAsync("sd-ghost-button", { key: 'ca713f6a07637b014c58923db2ff7af1f3ae98a8', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
|
|
13971
13970
|
}
|
|
13972
13971
|
static get style() { return sdPopoverCss(); }
|
|
13973
13972
|
static get cmpMeta() { return {
|
|
@@ -14103,7 +14102,7 @@ class SdPopup {
|
|
|
14103
14102
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
14104
14103
|
...this.submitButtonProps,
|
|
14105
14104
|
};
|
|
14106
|
-
return (hAsync("div", { key: '
|
|
14105
|
+
return (hAsync("div", { key: '9138fc14fe3accf97fe3a5bae4dd089d658a2198', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '545591be690bc16f8b78875548dcd13ffaaaa521', class: "sd-popup__header" }, hAsync("h2", { key: '2a9e959ecac6a0be2bd97019e74bee23ab0c2ecc', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'f6e1053a8af7b1c87cb4adab5f8f5d51f970bc82', class: "sd-popup__body" }, hAsync("slot", { key: '9f66b2873cb0a8e7409709a400d91fc569da12b5' })), this.useFooter && (hAsync("footer", { key: 'fce908fd8f5bab94fee22184287072debce1b3ba', class: "sd-popup__footer" }, hAsync("div", { key: 'c4db14ca27f56154cfb01728133bd3cdbd1ce7e7', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '7b9e920b1c322eb28de40fb2e9b02f03aa9b64e8', name: "footer-left" })), hAsync("sd-button", { key: '87cb9bcbc9fb1657d1021609ce855118bd7c9b96', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
14107
14106
|
}
|
|
14108
14107
|
static get style() { return sdPopupCss(); }
|
|
14109
14108
|
static get cmpMeta() { return {
|
|
@@ -14294,19 +14293,27 @@ class SdPortal {
|
|
|
14294
14293
|
else {
|
|
14295
14294
|
top = Math.min(Math.max(top, minTop), maxTop);
|
|
14296
14295
|
}
|
|
14297
|
-
|
|
14298
|
-
left = parentRect.right - wrapperRect.width - offset[0];
|
|
14299
|
-
}
|
|
14296
|
+
const overflowsRight = left + wrapperRect.width > viewport.width - viewportPadding;
|
|
14300
14297
|
const minLeft = viewportPadding;
|
|
14301
14298
|
const maxLeft = viewport.width - viewportPadding - wrapperRect.width;
|
|
14299
|
+
this.wrapper.style.top = `${top}px`;
|
|
14302
14300
|
if (maxLeft < minLeft) {
|
|
14303
|
-
left
|
|
14301
|
+
// wrapper가 padding 내에 들어오지 못할 만큼 넓으면 left 기준으로 클램프
|
|
14302
|
+
this.wrapper.style.left = `${minLeft}px`;
|
|
14303
|
+
this.wrapper.style.right = 'auto';
|
|
14304
|
+
delete this.wrapper.dataset.align;
|
|
14305
|
+
}
|
|
14306
|
+
else if (overflowsRight) {
|
|
14307
|
+
this.wrapper.style.left = 'auto';
|
|
14308
|
+
this.wrapper.style.right = `${viewport.width - parentRect.right}px`;
|
|
14309
|
+
this.wrapper.dataset.align = 'right';
|
|
14304
14310
|
}
|
|
14305
14311
|
else {
|
|
14312
|
+
this.wrapper.style.right = 'auto';
|
|
14313
|
+
delete this.wrapper.dataset.align;
|
|
14306
14314
|
left = Math.min(Math.max(left, minLeft), maxLeft);
|
|
14315
|
+
this.wrapper.style.left = `${left}px`;
|
|
14307
14316
|
}
|
|
14308
|
-
this.wrapper.style.top = `${top}px`;
|
|
14309
|
-
this.wrapper.style.left = `${left}px`;
|
|
14310
14317
|
this.wrapper.style.visibility = 'visible';
|
|
14311
14318
|
this.wrapper.style.opacity = '1';
|
|
14312
14319
|
});
|
|
@@ -14370,9 +14377,13 @@ class SdPortal {
|
|
|
14370
14377
|
}
|
|
14371
14378
|
// 외부 클릭 감지
|
|
14372
14379
|
handleMouseDown(e) {
|
|
14380
|
+
if (!this.open)
|
|
14381
|
+
return;
|
|
14373
14382
|
this.isInsideClick = this.isInsideTarget(e.target);
|
|
14374
14383
|
}
|
|
14375
14384
|
handleWindowClick(e) {
|
|
14385
|
+
if (!this.open)
|
|
14386
|
+
return;
|
|
14376
14387
|
if (this.isInsideClick) {
|
|
14377
14388
|
this.isInsideClick = false;
|
|
14378
14389
|
return;
|
|
@@ -14382,13 +14393,14 @@ class SdPortal {
|
|
|
14382
14393
|
this.close.emit();
|
|
14383
14394
|
}
|
|
14384
14395
|
render() {
|
|
14385
|
-
return hAsync("slot", { key: '
|
|
14396
|
+
return hAsync("slot", { key: '0b01050e7c1ab2b648bf1118aec27140ff1aed4c' });
|
|
14386
14397
|
}
|
|
14387
14398
|
static get watchers() { return {
|
|
14388
14399
|
"open": [{
|
|
14389
14400
|
"handleOpenChange": 0
|
|
14390
14401
|
}]
|
|
14391
14402
|
}; }
|
|
14403
|
+
static get style() { return `:host { display: none !important; }`; }
|
|
14392
14404
|
static get cmpMeta() { return {
|
|
14393
14405
|
"$flags$": 772,
|
|
14394
14406
|
"$tagName$": "sd-portal",
|
|
@@ -14540,7 +14552,7 @@ class SdRadio {
|
|
|
14540
14552
|
'--sd-radio-label-color': RADIO_COLORS.label.default,
|
|
14541
14553
|
'--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
|
|
14542
14554
|
};
|
|
14543
|
-
return (hAsync("label", { key: '
|
|
14555
|
+
return (hAsync("label", { key: 'cc7ff62ac992791ef81db9212bb5986989f6b4d6', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("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 }), hAsync("span", { key: '61d8bdfdb5f8309b8832b89ea2979db5b80968c8', class: "sd-radio__circle" }), this.label && (hAsync("span", { key: 'cc2a5402e4745aaae897c8f37d5fc287a2ba9b29', class: "sd-radio__label", "data-label": this.label }, this.label))));
|
|
14544
14556
|
}
|
|
14545
14557
|
static get watchers() { return {
|
|
14546
14558
|
"value": [{
|
|
@@ -14745,7 +14757,7 @@ class SdRadioButton {
|
|
|
14745
14757
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
14746
14758
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
14747
14759
|
};
|
|
14748
|
-
return (hAsync("div", { key: '
|
|
14760
|
+
return (hAsync("div", { key: '17355ebde09f652f5b94b4f70f09f68ef44cd29d', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
14749
14761
|
const isSelected = this.isOptionSelected(option);
|
|
14750
14762
|
const isDisabled = this.isOptionDisabled(option);
|
|
14751
14763
|
return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -14803,7 +14815,7 @@ class SdRadioGroup {
|
|
|
14803
14815
|
return classes.join(' ');
|
|
14804
14816
|
}
|
|
14805
14817
|
render() {
|
|
14806
|
-
return (hAsync("div", { key: '
|
|
14818
|
+
return (hAsync("div", { key: 'e5f4051ea9b2843816a849a018b8040e7b951a55', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
14807
14819
|
return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
|
|
14808
14820
|
})));
|
|
14809
14821
|
}
|
|
@@ -15119,15 +15131,15 @@ class SdSelect {
|
|
|
15119
15131
|
this.closeDropdown();
|
|
15120
15132
|
},
|
|
15121
15133
|
};
|
|
15122
|
-
return (hAsync("sd-field", { key: '
|
|
15134
|
+
return (hAsync("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: () => {
|
|
15123
15135
|
this.hovered = true;
|
|
15124
15136
|
}, onMouseLeave: () => {
|
|
15125
15137
|
this.hovered = false;
|
|
15126
|
-
} }, hAsync("div", { key: '
|
|
15138
|
+
} }, hAsync("div", { key: '2fe78a384fef6083a08709fa72d98d2b2e399580', class: "sd-select", ref: el => {
|
|
15127
15139
|
this.triggerRef = el;
|
|
15128
|
-
} }, hAsync("sd-select-trigger", { key: '
|
|
15140
|
+
} }, hAsync("sd-select-trigger", { key: 'be647e0ba29295be5a888d92cb18c273980ec38f', ref: el => {
|
|
15129
15141
|
this.triggerComponentRef = el;
|
|
15130
|
-
}, 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) && (hAsync("sd-portal", { key: '
|
|
15142
|
+
}, 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) && (hAsync("sd-portal", { key: '2d519a9957ff7201519502a2053785cc669642c2', ...portalProps }, hAsync("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) })))));
|
|
15131
15143
|
}
|
|
15132
15144
|
static get watchers() { return {
|
|
15133
15145
|
"isOpen": [{
|
|
@@ -15388,7 +15400,7 @@ class SdSelectListItem {
|
|
|
15388
15400
|
return (
|
|
15389
15401
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
15390
15402
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
15391
|
-
hAsync("div", { key: '
|
|
15403
|
+
hAsync("div", { key: '2bec32f64859ef0e39928d4288cba3c727e16cf1', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
15392
15404
|
'sd-select-list-item': true,
|
|
15393
15405
|
'sd-select-list-item--group': isGroup,
|
|
15394
15406
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -15398,7 +15410,7 @@ class SdSelectListItem {
|
|
|
15398
15410
|
'sd-select-list-item--focused': this.isFocused,
|
|
15399
15411
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
15400
15412
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
15401
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
15413
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("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) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: '52162297e94d672128ea0a2343c6baf6e04ee78c', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
15402
15414
|
}
|
|
15403
15415
|
static get style() { return sdSelectListItemCss(); }
|
|
15404
15416
|
static get cmpMeta() { return {
|
|
@@ -15470,15 +15482,15 @@ class SdSelectListItemSearch {
|
|
|
15470
15482
|
clearTimeout(this.debounceTimer);
|
|
15471
15483
|
}
|
|
15472
15484
|
render() {
|
|
15473
|
-
return (hAsync("div", { key: '
|
|
15485
|
+
return (hAsync("div", { key: '4b0eefc35e86aa2f320ce9410185b64323d60e45', class: {
|
|
15474
15486
|
'sd-select-list-item-search': true,
|
|
15475
15487
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
15476
|
-
} }, hAsync("div", { key: '
|
|
15488
|
+
} }, hAsync("div", { key: 'b724cb790c3f8d5eb2ecb899c28dbddf9acad631', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '18ba78adbc46e9cc0f3a4e355996dba25fc1c8e9', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: 'c2a2df9bc2dfe692b1f5732706ce1208a005aab4', ref: el => {
|
|
15477
15489
|
this.inputEl = el;
|
|
15478
|
-
}, 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() }), hAsync("button", { key: '
|
|
15490
|
+
}, 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() }), hAsync("button", { key: '7d9d3e924a24ddecbeb4bf5316c2c791913ac782', type: "button", class: {
|
|
15479
15491
|
'sd-select-list-item-search__clear': true,
|
|
15480
15492
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
15481
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
15493
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '80d52b79d989e51513653655adf6604f352c43b0', name: "close", size: 12, color: "#888888" })))));
|
|
15482
15494
|
}
|
|
15483
15495
|
static get style() { return sdSelectListItemSearchCss(); }
|
|
15484
15496
|
static get cmpMeta() { return {
|
|
@@ -15862,9 +15874,9 @@ class SdSelectListbox {
|
|
|
15862
15874
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
15863
15875
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
15864
15876
|
};
|
|
15865
|
-
return (hAsync("div", { key: '
|
|
15877
|
+
return (hAsync("div", { key: 'df4d19f8807ce87384cad18ca981e0792da35682', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: 'b950890a9138fa5ab7f0df7c1d07bbea65140e67', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '1aeaf552893becedf8394c1e9af8ef7119e70fdb', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
15866
15878
|
this.listEl = el;
|
|
15867
|
-
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '
|
|
15879
|
+
} }, this.showSelectAll && (hAsync("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 ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("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) })))))));
|
|
15868
15880
|
}
|
|
15869
15881
|
static get watchers() { return {
|
|
15870
15882
|
"searchKeyword": [{
|
|
@@ -15953,7 +15965,7 @@ class SdSelectTrigger {
|
|
|
15953
15965
|
? SELECT_COLORS.icon.disabled
|
|
15954
15966
|
: SELECT_COLORS.icon.default,
|
|
15955
15967
|
};
|
|
15956
|
-
return (hAsync("div", { key: '
|
|
15968
|
+
return (hAsync("div", { key: 'bd967efa32ed0692512e549db9f852c7c08d5dcd', ref: el => {
|
|
15957
15969
|
this.triggerEl = el;
|
|
15958
15970
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
15959
15971
|
'sd-select-trigger': true,
|
|
@@ -15964,7 +15976,7 @@ class SdSelectTrigger {
|
|
|
15964
15976
|
e.preventDefault();
|
|
15965
15977
|
this.handleClick();
|
|
15966
15978
|
}
|
|
15967
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '
|
|
15979
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '04a8568ac5d109f0635d3474a394030d630f441e', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: 'ba256d1a780f7805c81330a6ba4e010c458be57e', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
15968
15980
|
'sd-select-trigger__icon': true,
|
|
15969
15981
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
15970
15982
|
} }))));
|
|
@@ -16093,7 +16105,7 @@ class SdSwitch {
|
|
|
16093
16105
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
16094
16106
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
16095
16107
|
};
|
|
16096
|
-
return (hAsync("label", { key: '
|
|
16108
|
+
return (hAsync("label", { key: 'f63559e7ee0523e475e26e80bc568d9b79f03c2a', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'f1d0697ba500514923aeb6d514761641e34e6080', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '988ccaf702365c76c76e11246e5de7035509cfa0', class: "sd-switch__track" }, hAsync("div", { key: '5a413a7e89054f5f93821f098f4d3173c09ce180', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'b1674d9039d0d1e9dc9c01525fc2e6b97c139ed1', class: "sd-switch__label" }, this.label)));
|
|
16097
16109
|
}
|
|
16098
16110
|
static get style() { return sdSwitchCss(); }
|
|
16099
16111
|
static get cmpMeta() { return {
|
|
@@ -17061,25 +17073,25 @@ class SdTable {
|
|
|
17061
17073
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
17062
17074
|
'--table-host-height': hostHeight,
|
|
17063
17075
|
};
|
|
17064
|
-
return (hAsync(Host, { key: '
|
|
17076
|
+
return (hAsync(Host, { key: '288633055ee4be465a96964b11d6c032fecd603f', style: hostStyle }, hAsync("div", { key: 'ab9878f8515bddc3058aafb1806310677fc9f360', class: "sd-table__container", style: {
|
|
17065
17077
|
'--table-width': this.width,
|
|
17066
17078
|
'--pagination-height': `${paginationHeight}px`,
|
|
17067
|
-
} }, hAsync("div", { key: '
|
|
17079
|
+
} }, hAsync("div", { key: '9f7f16a5cbf27f32a2209586f5b2604066bba4b4', class: {
|
|
17068
17080
|
'sd-table__wrapper': true,
|
|
17069
17081
|
'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
|
|
17070
17082
|
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
17071
|
-
} }, hAsync("div", { key: '
|
|
17083
|
+
} }, hAsync("div", { key: 'c16e48a6dc55ddcf398a7053a93d6e1595fc83da', class: {
|
|
17072
17084
|
'sd-table__scroll-container': true,
|
|
17073
17085
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
17074
17086
|
'sd-table__scroll-container--no-data': isNoData,
|
|
17075
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
17087
|
+
} }, this.isLoading && (hAsync("div", { key: '1bc3cd25cbd34d912aee00dc43ad961f442a8d2a', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '3c157990784d6f9e58fef6ff0e6b36ffd87d3a0d', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'ebb3e4560cc9729d496110e4f159a25737e26bca', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'c9b02b2aef01542a2fe5be0578d31ce72566bff6', class: "sd-table__no-data" }, hAsync("div", { key: '6ab6d9b90ef703b4865eedbf19deff2a04e9d278', class: "sd-table__no-data-content", ref: el => {
|
|
17076
17088
|
this.noDataContentEl = el;
|
|
17077
17089
|
if (el)
|
|
17078
17090
|
this.syncNoDataContentObserver();
|
|
17079
|
-
} }, hAsync("slot", { key: '
|
|
17091
|
+
} }, hAsync("slot", { key: '072b90261f1a0817ccc20d8d5d5346bdcd223304', name: "no-data" }, hAsync("span", { key: 'bbef2b4c13f8cf7736f02b11d149fe00af3cb567' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '2d7beab7b8fd42f5bfc4b2b5c9538e6cd7a08b2a', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
17080
17092
|
this.pagination.rowsPerPage > 0 &&
|
|
17081
17093
|
this.rowCount > 0 &&
|
|
17082
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
17094
|
+
!this.useVirtualScroll && (hAsync("div", { key: 'ee81359d024a466a2730c2e7df7a4a0f2b319de3', class: "sd-table__pagination" }, hAsync("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 && (hAsync("sd-select", { key: 'ce1798a0c99cff78318087d25bfc1ece86993e4a', value: this.useInternalPagination
|
|
17083
17095
|
? this.innerRowsPerPage
|
|
17084
17096
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
17085
17097
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -17390,7 +17402,7 @@ class SdTabs {
|
|
|
17390
17402
|
};
|
|
17391
17403
|
}
|
|
17392
17404
|
render() {
|
|
17393
|
-
return (hAsync("div", { key: '
|
|
17405
|
+
return (hAsync("div", { key: 'c824bcceda28b2591d57e713ae49f5f8260043c4', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
17394
17406
|
const badgeName = this.getBadgeName(tab);
|
|
17395
17407
|
return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
|
|
17396
17408
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -17632,7 +17644,7 @@ class SdTag {
|
|
|
17632
17644
|
render() {
|
|
17633
17645
|
const config = this.resolvedConfig;
|
|
17634
17646
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
17635
|
-
return (hAsync("span", { key: '
|
|
17647
|
+
return (hAsync("span", { key: '6cbf6fb37f0e926e604b24d482c8d648079b41dd', class: "sd-tag", style: {
|
|
17636
17648
|
'--sd-tag-background': config.background,
|
|
17637
17649
|
'--sd-tag-content': config.content,
|
|
17638
17650
|
'--sd-tag-height': config.height,
|
|
@@ -17642,7 +17654,7 @@ class SdTag {
|
|
|
17642
17654
|
'--sd-tag-font-weight': config.fontWeight,
|
|
17643
17655
|
'--sd-tag-line-height': config.lineHeight,
|
|
17644
17656
|
'--sd-tag-radius': config.radius,
|
|
17645
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
17657
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: 'e0e9410afe716341dc7fb7891bb46c85cde9d51b', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
17646
17658
|
}
|
|
17647
17659
|
static get style() { return sdTagCss(); }
|
|
17648
17660
|
static get cmpMeta() { return {
|
|
@@ -17711,9 +17723,9 @@ class SdTbody {
|
|
|
17711
17723
|
}
|
|
17712
17724
|
}
|
|
17713
17725
|
render() {
|
|
17714
|
-
return (hAsync(Host, { key: '
|
|
17726
|
+
return (hAsync(Host, { key: 'af02c942fe83b515e2065840ff3b83ad22fd5542', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '6f1b771c2a21ff087b5feb32b19e0fb4b0abed35', class: { tbody: true } }, [
|
|
17715
17727
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
17716
|
-
hAsync("slot", { key: '
|
|
17728
|
+
hAsync("slot", { key: '0c7c439b269527f9bfbb00bf60a1aec10646da56' }),
|
|
17717
17729
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
17718
17730
|
])));
|
|
17719
17731
|
}
|
|
@@ -17897,7 +17909,7 @@ class SdTd {
|
|
|
17897
17909
|
}
|
|
17898
17910
|
}
|
|
17899
17911
|
render() {
|
|
17900
|
-
return (hAsync(Host, { key: '
|
|
17912
|
+
return (hAsync(Host, { key: 'a8b2ea05cfaa821b1e4766657cce6a2b7a399881', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '7fa181915d15192257bc38500787207810ec2739' })));
|
|
17901
17913
|
}
|
|
17902
17914
|
static get watchers() { return {
|
|
17903
17915
|
"field": [{
|
|
@@ -18055,7 +18067,7 @@ const TEXT_LINK_COLORS = {
|
|
|
18055
18067
|
icon: textLinkTokens.textLink.icon,
|
|
18056
18068
|
};
|
|
18057
18069
|
|
|
18058
|
-
const sdTextLinkCss = () => `sd-text-link{display:inline-flex}sd-text-link .sd-text-link{display:inline-flex;align-items:center;gap:var(--sd-text-link-gap);cursor:pointer;user-select:none}sd-text-link .sd-text-link__label{font-size:var(--sd-text-link-font-size, 12px);line-height:var(--sd-text-link-line-height, 20px);text-decoration:var(--sd-text-link-text-decoration);color:var(--sd-text-link-color, inherit)}sd-text-link .sd-text-link:not(.sd-text-link--disabled):hover .sd-text-link__label{text-decoration:underline}sd-text-link .sd-text-link--disabled{cursor:not-allowed}`;
|
|
18070
|
+
const sdTextLinkCss = () => `sd-text-link{display:inline-flex}sd-text-link .sd-text-link{position:relative;display:inline-flex;align-items:center;gap:var(--sd-text-link-gap);cursor:pointer;user-select:none}sd-text-link .sd-text-link__label{font-size:var(--sd-text-link-font-size, 12px);line-height:var(--sd-text-link-line-height, 20px);text-decoration:var(--sd-text-link-text-decoration);color:var(--sd-text-link-color, inherit)}sd-text-link .sd-text-link:not(.sd-text-link--disabled):hover .sd-text-link__label{text-decoration:underline}sd-text-link .sd-text-link--disabled{cursor:not-allowed}sd-text-link .sd-text-link sd-portal{position:absolute;width:0;height:0;overflow:hidden}.sd-text-link__tooltip-inner{display:inline-flex;white-space:nowrap;transform:translateX(-50%)}[data-align=right] .sd-text-link__tooltip-inner{transform:none}`;
|
|
18059
18071
|
|
|
18060
18072
|
class SdTextLink {
|
|
18061
18073
|
constructor(hostRef) {
|
|
@@ -18078,6 +18090,10 @@ class SdTextLink {
|
|
|
18078
18090
|
disabled = false;
|
|
18079
18091
|
/** 텍스트 크기 */
|
|
18080
18092
|
size = 'sm';
|
|
18093
|
+
/** 호버 시 표시할 툴팁 텍스트 */
|
|
18094
|
+
tooltipText;
|
|
18095
|
+
get hostEl() { return getElement(this); }
|
|
18096
|
+
isTooltipOpen = false;
|
|
18081
18097
|
/** 클릭 시 발생합니다. */
|
|
18082
18098
|
click;
|
|
18083
18099
|
handleClick = () => {
|
|
@@ -18085,6 +18101,18 @@ class SdTextLink {
|
|
|
18085
18101
|
return;
|
|
18086
18102
|
this.click.emit();
|
|
18087
18103
|
};
|
|
18104
|
+
handleMouseEnter = () => {
|
|
18105
|
+
this.isTooltipOpen = true;
|
|
18106
|
+
};
|
|
18107
|
+
handleMouseLeave = () => {
|
|
18108
|
+
this.isTooltipOpen = false;
|
|
18109
|
+
};
|
|
18110
|
+
handleFocus = () => {
|
|
18111
|
+
this.isTooltipOpen = true;
|
|
18112
|
+
};
|
|
18113
|
+
handleBlur = () => {
|
|
18114
|
+
this.isTooltipOpen = false;
|
|
18115
|
+
};
|
|
18088
18116
|
render() {
|
|
18089
18117
|
const sizeConfig = TEXT_LINK_SIZE_CONFIG[this.size] ?? TEXT_LINK_SIZE_CONFIG.sm;
|
|
18090
18118
|
const typo = this.underline ? sizeConfig.typography.underline : sizeConfig.typography.default;
|
|
@@ -18100,7 +18128,9 @@ class SdTextLink {
|
|
|
18100
18128
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
18101
18129
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
18102
18130
|
};
|
|
18103
|
-
|
|
18131
|
+
const tooltipText = (this.tooltipText ?? '').trim();
|
|
18132
|
+
const hasTooltip = tooltipText.length > 0;
|
|
18133
|
+
return (hAsync("span", { key: 'd9653ed47a77fb5c00dc57f8f7cc2b4dc9035ca4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
18104
18134
|
'sd-text-link': true,
|
|
18105
18135
|
'sd-text-link--disabled': this.disabled,
|
|
18106
18136
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -18108,13 +18138,13 @@ class SdTextLink {
|
|
|
18108
18138
|
e.preventDefault();
|
|
18109
18139
|
this.handleClick();
|
|
18110
18140
|
}
|
|
18111
|
-
} }, this.icon && (hAsync("sd-icon", { key: '
|
|
18141
|
+
}, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (hAsync("sd-portal", { key: '62b3cb48c5b5fa6eb0b2b2962ef6c78bac5ac545', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, hAsync("div", { key: '5a428366f5bc2f8686a78fc73d91517ccca13eb9', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: '3416662595e9bfd164279e684e2ead9d1575a9d8', name: "square_xs_grey", label: tooltipText })))), this.icon && (hAsync("sd-icon", { key: '5056f0c55ebe92963e856f2970cfd74143876cfb', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '6cf8474ba642c9ec3dc5952c5530f9ba15046053', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: '17a74ec3a3e1a26f18b73f7d4816ea0aee0cb22c', class: "sd-text-link__arrow", style: {
|
|
18112
18142
|
width: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
18113
18143
|
height: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
18114
18144
|
display: 'inline-flex',
|
|
18115
18145
|
alignItems: 'center',
|
|
18116
18146
|
justifyContent: 'center',
|
|
18117
|
-
} }, hAsync("sd-icon", { key: '
|
|
18147
|
+
} }, hAsync("sd-icon", { key: 'ed0a6bf8b678a93fa8a0da907efb0cbf60427738', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
|
|
18118
18148
|
}
|
|
18119
18149
|
static get style() { return sdTextLinkCss(); }
|
|
18120
18150
|
static get cmpMeta() { return {
|
|
@@ -18128,7 +18158,9 @@ class SdTextLink {
|
|
|
18128
18158
|
"rightArrow": [1, "right-arrow"],
|
|
18129
18159
|
"underline": [516],
|
|
18130
18160
|
"disabled": [516],
|
|
18131
|
-
"size": [513]
|
|
18161
|
+
"size": [513],
|
|
18162
|
+
"tooltipText": [1, "tooltip-text"],
|
|
18163
|
+
"isTooltipOpen": [32]
|
|
18132
18164
|
},
|
|
18133
18165
|
"$listeners$": undefined,
|
|
18134
18166
|
"$lazyBundleId$": "-",
|
|
@@ -18296,7 +18328,7 @@ class SdTextarea {
|
|
|
18296
18328
|
'--sd-system-size-field-sm-height': 'auto',
|
|
18297
18329
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
18298
18330
|
};
|
|
18299
|
-
return (hAsync("sd-field", { key: '
|
|
18331
|
+
return (hAsync("sd-field", { key: '08375e678b02c61a201b70214772e8a354280601', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '5c9462b2b0c8f0078c34b044b8cd626dfd9f18be', class: "sd-textarea__content" }, hAsync("textarea", { key: 'a5f0d448791be4b75388c02e8a356486c0487d78', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
|
|
18300
18332
|
}
|
|
18301
18333
|
static get watchers() { return {
|
|
18302
18334
|
"value": [{
|
|
@@ -18350,7 +18382,7 @@ class SdTextarea {
|
|
|
18350
18382
|
}; }
|
|
18351
18383
|
}
|
|
18352
18384
|
|
|
18353
|
-
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}`;
|
|
18385
|
+
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}`;
|
|
18354
18386
|
|
|
18355
18387
|
class SdThead {
|
|
18356
18388
|
constructor(hostRef) {
|
|
@@ -18596,36 +18628,56 @@ class SdThead {
|
|
|
18596
18628
|
'--table-border-color': TABLE_BORDER.color,
|
|
18597
18629
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
18598
18630
|
};
|
|
18599
|
-
return (hAsync(Host, { key: '
|
|
18631
|
+
return (hAsync(Host, { key: '521fa63c751f74ba620aad7355127c7d7fe8217c', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '226911deb4a0a0898e064875fbba7aa1d326634b', class: {
|
|
18600
18632
|
'thead': true,
|
|
18601
18633
|
'thead--sticky': this._stickyHeader,
|
|
18602
|
-
} }, hAsync("tr", { key: '
|
|
18634
|
+
} }, hAsync("tr", { key: 'f60653ae5dc8b773b73ab05f9631358272e90df5', class: "tr" }, this._selectable && (hAsync("th", { key: '7826b9c1fa8ec84f83825f8380e7bcd014d3782a', class: {
|
|
18603
18635
|
'th': true,
|
|
18604
18636
|
'th--selected': true,
|
|
18605
18637
|
'sticky-left': true,
|
|
18606
18638
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
18607
18639
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
18608
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
18640
|
+
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '412a9ee49954014dc45dd0a2444642a549782d8e', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: '116b6c2a55cc7553090b39338e251101c1de057b', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
|
|
18609
18641
|
'th': true,
|
|
18610
18642
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
18611
18643
|
'sticky-left': true,
|
|
18612
18644
|
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
18613
18645
|
'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
|
|
18614
|
-
|
|
18646
|
+
'th--has-dropdown': col.hasDropdown === true,
|
|
18647
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
|
|
18648
|
+
? el => {
|
|
18649
|
+
this.dropdownThRefs[col.name] = el;
|
|
18650
|
+
}
|
|
18651
|
+
: undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
|
|
18652
|
+
e.stopPropagation();
|
|
18653
|
+
this.handleColumnSort(col);
|
|
18654
|
+
}, style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text)))))), col.hasDropdown === true && (hAsync("button", { class: {
|
|
18615
18655
|
'th__dropdown-trigger': true,
|
|
18616
18656
|
'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
|
|
18617
|
-
}, ref: el => {
|
|
18657
|
+
}, ref: el => {
|
|
18658
|
+
dropdownRefs[col.name] = el;
|
|
18659
|
+
}, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
|
|
18618
18660
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
18619
18661
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
18620
18662
|
hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
|
|
18621
18663
|
const actualColIdx = stickyLeftCount + relativeIdx;
|
|
18622
18664
|
return (hAsync("th", { key: col.name, class: {
|
|
18623
|
-
th: true,
|
|
18665
|
+
'th': true,
|
|
18624
18666
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
18625
|
-
|
|
18667
|
+
'th--has-dropdown': col.hasDropdown === true,
|
|
18668
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
|
|
18669
|
+
? el => {
|
|
18670
|
+
this.dropdownThRefs[col.name] = el;
|
|
18671
|
+
}
|
|
18672
|
+
: undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
|
|
18673
|
+
e.stopPropagation();
|
|
18674
|
+
this.handleColumnSort(col);
|
|
18675
|
+
}, style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text)))))), col.hasDropdown === true && (hAsync("button", { class: {
|
|
18626
18676
|
'th__dropdown-trigger': true,
|
|
18627
18677
|
'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
|
|
18628
|
-
}, ref: el => {
|
|
18678
|
+
}, ref: el => {
|
|
18679
|
+
this.dropdownRefs[col.name] = el;
|
|
18680
|
+
}, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
|
|
18629
18681
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
18630
18682
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
18631
18683
|
hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
@@ -18637,10 +18689,20 @@ class SdThead {
|
|
|
18637
18689
|
'sticky-right': true,
|
|
18638
18690
|
'sticky-right-edge': relativeIdx === 0,
|
|
18639
18691
|
'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
|
|
18640
|
-
|
|
18692
|
+
'th--has-dropdown': col.hasDropdown === true,
|
|
18693
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
|
|
18694
|
+
? el => {
|
|
18695
|
+
this.dropdownThRefs[col.name] = el;
|
|
18696
|
+
}
|
|
18697
|
+
: undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
|
|
18698
|
+
e.stopPropagation();
|
|
18699
|
+
this.handleColumnSort(col);
|
|
18700
|
+
}, style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text)))))), col.hasDropdown === true && (hAsync("button", { class: {
|
|
18641
18701
|
'th__dropdown-trigger': true,
|
|
18642
18702
|
'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
|
|
18643
|
-
}, ref: el => {
|
|
18703
|
+
}, ref: el => {
|
|
18704
|
+
this.dropdownRefs[col.name] = el;
|
|
18705
|
+
}, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
|
|
18644
18706
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
18645
18707
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
18646
18708
|
hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
|
|
@@ -18775,12 +18837,12 @@ class SdToast {
|
|
|
18775
18837
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
18776
18838
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
18777
18839
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
18778
|
-
return (hAsync("div", { key: '
|
|
18840
|
+
return (hAsync("div", { key: '240ed7553fa03d18bb4384b1192d16a821be5832', style: {
|
|
18779
18841
|
'--sd-toast-bg': typeConfig.bg,
|
|
18780
18842
|
'--sd-toast-text': typeConfig.content,
|
|
18781
18843
|
'--sd-toast-icon': iconColor,
|
|
18782
18844
|
'--sd-toast-link': linkColor,
|
|
18783
|
-
} }, hAsync("div", { key: '
|
|
18845
|
+
} }, hAsync("div", { key: 'bdb9a45473dcab86e2dd8bb6321e7b717f93b784', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '2a02e47336cd6a46c7cc3560f3f82d4f10a3d211', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '872cfb213c3a080fc1e5458ce53efa04c1fa8840', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '3a22f7518f63676e22c4faeb76873c31d6cf6b11', class: "sd-toast__content" }, hAsync("span", { key: 'dd6a533b60c07bdcbdc80090d61bdf29b8879609', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '45efddf62b906e8f0b2136ad3d1131204d0b9125', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '3729f4f21ba7e59c2702137053de946e284b226a', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: 'd7f0f670aef527be6253cd70bd2b19a900ccaddd', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
18784
18846
|
}
|
|
18785
18847
|
static get style() { return sdToastCss(); }
|
|
18786
18848
|
static get cmpMeta() { return {
|
|
@@ -19042,7 +19104,7 @@ class SdToastContainer {
|
|
|
19042
19104
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
19043
19105
|
const indexMap = new Map();
|
|
19044
19106
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
19045
|
-
return (hAsync("div", { key: '
|
|
19107
|
+
return (hAsync("div", { key: '6a6db296cca6ee2b3f1f5ba1b2014f3787fd6ee0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
19046
19108
|
this.expanded = true;
|
|
19047
19109
|
this.pauseTimers();
|
|
19048
19110
|
}, onMouseLeave: () => {
|
|
@@ -19204,7 +19266,7 @@ class SdToggle {
|
|
|
19204
19266
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
19205
19267
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
19206
19268
|
};
|
|
19207
|
-
return (hAsync("label", { key: '
|
|
19269
|
+
return (hAsync("label", { key: 'f5bc6364e15bfd720d639959d4b8eca1faf022ff', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: 'e6046c1887bac5fc46dfe94d065c4e782090997f', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
19208
19270
|
}
|
|
19209
19271
|
static get style() { return sdToggleCss(); }
|
|
19210
19272
|
static get cmpMeta() { return {
|
|
@@ -19392,7 +19454,7 @@ class SdTooltip {
|
|
|
19392
19454
|
const bodyHTML = this.message && this.message.length > 0
|
|
19393
19455
|
? this.message.map(line => `<div>${line}</div>`).join('')
|
|
19394
19456
|
: this.slotContentHTML;
|
|
19395
|
-
return (hAsync(Fragment, { key: '
|
|
19457
|
+
return (hAsync(Fragment, { key: '81d582c4c8847a0f57abf632d975461cdf07b535' }, hAsync("div", { key: 'c7515fb866fa85749405bb10512e27575850eb27', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("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 })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '903aaa3723a119687e5af8120d54fb1b9e43c584', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '813e1dbf7f2d8e0378f4fcac1225341aafbd9948', ref: el => (this.menuEl = el), class: {
|
|
19396
19458
|
'sd-floating-menu': true,
|
|
19397
19459
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
19398
19460
|
[`sd-floating-menu--${placement}`]: true,
|
|
@@ -19400,7 +19462,7 @@ class SdTooltip {
|
|
|
19400
19462
|
}, style: {
|
|
19401
19463
|
'--sd-floating-bg': typeConfig.bg,
|
|
19402
19464
|
'--sd-floating-content': typeConfig.content,
|
|
19403
|
-
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '
|
|
19465
|
+
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: 'd74071d3d236382bc952ad03a05ebd77219b4ddb', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '91c35bd2bc22294b7e7998965930219a43799310' })), hAsync("div", { key: '16edd2fc6e9ad02b646c05c6404d3eb79e2a7a71', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: 'd234906f7a4a603a8e18cef6da49f9d893adb731', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
|
|
19404
19466
|
}
|
|
19405
19467
|
static get style() { return sdTooltipCss(); }
|
|
19406
19468
|
static get cmpMeta() { return {
|