@sellmate/design-system 1.19.0 → 1.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.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-button_2.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 +2 -2
- 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 +9 -9
- 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-field_3.cjs.entry.js +8 -8
- package/dist/cjs/{sd-ghost-button_2.cjs.entry.js → sd-ghost-button_3.cjs.entry.js} +264 -10
- package/dist/cjs/sd-key-value-table.cjs.entry.js +4 -4
- 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-modal-container.cjs.entry.js +49 -1
- package/dist/cjs/sd-pagination_4.cjs.entry.js +8 -8
- package/dist/cjs/sd-popup.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 +8 -8
- package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
- package/dist/cjs/sd-td.cjs.entry.js +1 -1
- 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/assets/Close.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.js +2 -2
- 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-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 +2 -17
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +21 -12
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-key-value-table/sd-key-value-table.css +2 -2
- package/dist/collection/components/sd-key-value-table/sd-key-value-table.js +6 -6
- 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-modal-container/sd-modal-container.js +49 -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-popup/sd-popup.js +1 -1
- package/dist/collection/components/sd-portal/sd-portal.js +34 -3
- 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.css +1 -1
- package/dist/collection/components/sd-table/sd-table.js +9 -9
- 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.js +3 -3
- 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-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-5imde6N9.js +1 -0
- package/dist/components/p-B5bya7Gp.js +1 -0
- package/dist/components/p-B7PHGGFH.js +1 -0
- package/dist/components/p-BZfVV3gu.js +1 -0
- package/dist/components/p-BiBLp9_a.js +1 -0
- package/dist/components/{p-DMS9mQsg.js → p-BjcGzaFR.js} +1 -1
- package/dist/components/{p-BD8OoYud.js → p-Bz93hWXV.js} +1 -1
- package/dist/components/p-CB2A3pJ5.js +1 -0
- package/dist/components/{p-B_5uwji5.js → p-CJ69QmR3.js} +1 -1
- package/dist/components/p-CLlAhEDc.js +1 -0
- package/dist/components/{p-4HPAPKne.js → p-CQozoo2-.js} +1 -1
- package/dist/components/p-CRwvv7YM.js +1 -0
- package/dist/components/p-CTPImLDQ.js +1 -0
- package/dist/components/{p-CQWZv8vY.js → p-CUR9smP5.js} +1 -1
- package/dist/components/{p-DbLQoVx6.js → p-CXeOxSQ-.js} +1 -1
- package/dist/components/p-CZfsknba.js +1 -0
- package/dist/components/{p-CtWfOIxb.js → p-CoqA9KgU.js} +1 -1
- package/dist/components/{p-hzCGj0On.js → p-CrT06Uwc.js} +1 -1
- package/dist/components/p-CvSqieCH.js +1 -0
- package/dist/components/p-D99vy8Ip.js +1 -0
- package/dist/components/{p-B3SKaQId.js → p-DDAA-zcg.js} +1 -1
- package/dist/components/p-DIlNesBH.js +1 -0
- package/dist/components/p-DNnI3Nru.js +1 -0
- package/dist/components/p-DZTxHJlP.js +1 -0
- package/dist/components/{p-CH6cVc2a.js → p-DertIGhs.js} +1 -1
- package/dist/components/{p-CzCu_NDl.js → p-Dl89_4C3.js} +1 -1
- package/dist/components/{p-C_r3z9VA.js → p-FTvXz0-a.js} +1 -1
- package/dist/components/{p-BLNc_TL-.js → p-P2jWtk8J.js} +1 -1
- package/dist/components/{p-DrSHJYop.js → p-Rwc_ltPn.js} +1 -1
- package/dist/components/p-ZvI5A-_t.js +1 -0
- package/dist/components/{p-79DExV92.js → p-gOIeNT-Z.js} +1 -1
- package/dist/components/{p-BMIgVp9-.js → p-uSEbiD29.js} +1 -1
- package/dist/components/{p-DDR0VcRU.js → p-xkRWGISE.js} +1 -1
- 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-button.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-checkbox.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-icon.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-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/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-80bde621.entry.js → p-08343698.entry.js} +1 -1
- package/dist/design-system/p-17dcf0e4.entry.js +1 -0
- package/dist/design-system/{p-bbbc4b27.entry.js → p-2151e081.entry.js} +1 -1
- package/dist/design-system/p-316b8a08.entry.js +1 -0
- package/dist/design-system/{p-f5190934.entry.js → p-4acfc5f9.entry.js} +1 -1
- package/dist/design-system/{p-22484d65.entry.js → p-5039241c.entry.js} +1 -1
- package/dist/design-system/p-52f551a1.entry.js +1 -0
- package/dist/design-system/{p-d726d8e7.entry.js → p-54853a2b.entry.js} +1 -1
- package/dist/design-system/p-5eaa12af.entry.js +1 -0
- package/dist/design-system/{p-827f067b.entry.js → p-646a7830.entry.js} +1 -1
- package/dist/design-system/{p-9d35b674.entry.js → p-717eba5f.entry.js} +1 -1
- package/dist/design-system/p-7ed8c8f1.entry.js +1 -0
- package/dist/design-system/{p-8f90620b.entry.js → p-9289eb14.entry.js} +1 -1
- package/dist/design-system/{p-b4b20a86.entry.js → p-98e0b332.entry.js} +1 -1
- package/dist/design-system/{p-9124a1af.entry.js → p-9c38ee79.entry.js} +1 -1
- package/dist/design-system/{p-c318b762.entry.js → p-a4331364.entry.js} +1 -1
- package/dist/design-system/{p-683c3b91.entry.js → p-a5a586da.entry.js} +1 -1
- package/dist/design-system/{p-1602a5fa.entry.js → p-aa1c6202.entry.js} +1 -1
- package/dist/design-system/{p-8a84a4fe.entry.js → p-ae344950.entry.js} +1 -1
- package/dist/design-system/{p-4b15247b.entry.js → p-b291baab.entry.js} +1 -1
- package/dist/design-system/{p-e93dda25.entry.js → p-b63b8df9.entry.js} +1 -1
- package/dist/design-system/{p-3caf2c5b.entry.js → p-bdb7492c.entry.js} +1 -1
- package/dist/design-system/{p-cc5f5bff.entry.js → p-c47198fc.entry.js} +1 -1
- package/dist/design-system/{p-4b626171.entry.js → p-c995e6c3.entry.js} +1 -1
- package/dist/design-system/{p-9095aab6.entry.js → p-cb80327c.entry.js} +1 -1
- package/dist/design-system/{p-7ed5aed5.entry.js → p-ccf1a3fc.entry.js} +1 -1
- package/dist/design-system/{p-4e1d76b8.entry.js → p-df7c721d.entry.js} +1 -1
- package/dist/design-system/p-e3990243.entry.js +1 -0
- package/dist/design-system/{p-81aa23d1.entry.js → p-e9d1dbb5.entry.js} +1 -1
- package/dist/design-system/p-faf7b64c.entry.js +1 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.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-button_2.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 +2 -2
- 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 +9 -9
- 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-field_3.entry.js +8 -8
- package/dist/esm/{sd-ghost-button_2.entry.js → sd-ghost-button_3.entry.js} +265 -12
- package/dist/esm/sd-key-value-table.entry.js +4 -4
- package/dist/esm/sd-linear-progress.entry.js +1 -1
- package/dist/esm/sd-loading-container.entry.js +2 -2
- package/dist/esm/sd-modal-container.entry.js +49 -1
- package/dist/esm/sd-pagination_4.entry.js +8 -8
- package/dist/esm/sd-popup.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 +8 -8
- package/dist/esm/sd-tabs.entry.js +1 -1
- package/dist/esm/sd-td.entry.js +1 -1
- 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-ghost-button/sd-ghost-button.d.ts +7 -1
- package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts +2 -2
- package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +9 -0
- package/dist/types/components/sd-portal/sd-portal.d.ts +1 -0
- package/dist/types/components/sd-table/sd-table.d.ts +1 -1
- package/dist/types/components.d.ts +20 -17
- package/hydrate/index.js +163 -98
- package/hydrate/index.mjs +163 -98
- package/package.json +1 -1
- package/dist/cjs/sd-portal.cjs.entry.js +0 -243
- package/dist/components/p-AI4YlQmL.js +0 -1
- package/dist/components/p-B-4ulKJj.js +0 -1
- package/dist/components/p-BX5uKVOt.js +0 -1
- package/dist/components/p-BYTrIk62.js +0 -1
- package/dist/components/p-Bzo51vnP.js +0 -1
- package/dist/components/p-C0tkFuhj.js +0 -1
- package/dist/components/p-C3wv8gVC.js +0 -1
- package/dist/components/p-CXRFEcE_.js +0 -1
- package/dist/components/p-Cl5io5TH.js +0 -1
- package/dist/components/p-ClKABgST.js +0 -1
- package/dist/components/p-DAOeioSV.js +0 -1
- package/dist/components/p-DTFXzlvq.js +0 -1
- package/dist/components/p-Dr5Q2ZKB.js +0 -1
- package/dist/components/p-DyVh4pNL.js +0 -1
- package/dist/components/p-Ng3JMPxb.js +0 -1
- package/dist/components/p-qJeUUOyB.js +0 -1
- package/dist/design-system/p-12306783.entry.js +0 -1
- package/dist/design-system/p-3f7349ae.entry.js +0 -1
- package/dist/design-system/p-43529bba.entry.js +0 -1
- package/dist/design-system/p-46da89f2.entry.js +0 -1
- package/dist/design-system/p-8a025f91.entry.js +0 -1
- package/dist/design-system/p-a263af1b.entry.js +0 -1
- package/dist/design-system/p-a532d998.entry.js +0 -1
- package/dist/design-system/p-aa312937.entry.js +0 -1
- package/dist/esm/sd-portal.entry.js +0 -241
|
@@ -16,10 +16,10 @@ const SdLoadingContainer = class {
|
|
|
16
16
|
this.visible = false;
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: '6525405e4edafd9257be9887cca824a436b2807c', class: {
|
|
20
20
|
'sd-loading-container': true,
|
|
21
21
|
'sd-loading-container--visible': this.visible,
|
|
22
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '
|
|
22
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'd5f1e1e3df8b704d4a5dabe8cf7b50cc07a2699a', class: "sd-loading-container__backdrop" }), h("div", { key: '40dce62049e04a997b982ab65b47a755b6e917c7', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '9cb7a1ed52433f2d0982ceef1a298b1367a99dd4', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'bc581b692122ef5553e4e8eb99056b89257eb6d9', class: "sd-loading-container__message" }, this.message)))));
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
SdLoadingContainer.style = sdLoadingContainerCss();
|
|
@@ -5,6 +5,7 @@ const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-con
|
|
|
5
5
|
|
|
6
6
|
let modalIdCounter = 0;
|
|
7
7
|
const ANIMATION_DURATION = 350;
|
|
8
|
+
const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
|
|
8
9
|
const SdModalContainer = class {
|
|
9
10
|
constructor(hostRef) {
|
|
10
11
|
registerInstance(this, hostRef);
|
|
@@ -74,6 +75,7 @@ const SdModalContainer = class {
|
|
|
74
75
|
return;
|
|
75
76
|
this.entries = this.entries.map(e => (e.id === id ? { ...e, backdropVisible: true } : e));
|
|
76
77
|
modalEl.classList.add('sd-modal-container__modal--visible');
|
|
78
|
+
this.focusInitialElement(modalEl);
|
|
77
79
|
});
|
|
78
80
|
});
|
|
79
81
|
}
|
|
@@ -103,7 +105,14 @@ const SdModalContainer = class {
|
|
|
103
105
|
this.applyProps(entry.modalEl, props);
|
|
104
106
|
}
|
|
105
107
|
mountEntry(entry) {
|
|
106
|
-
|
|
108
|
+
const activeElement = typeof document !== 'undefined' ? document.activeElement : null;
|
|
109
|
+
this.entries = [
|
|
110
|
+
...(this.entries ?? []),
|
|
111
|
+
{
|
|
112
|
+
...entry,
|
|
113
|
+
previousActiveElement: activeElement,
|
|
114
|
+
},
|
|
115
|
+
];
|
|
107
116
|
registerModal({
|
|
108
117
|
id: entry.id,
|
|
109
118
|
persistent: entry.persistent,
|
|
@@ -161,6 +170,7 @@ const SdModalContainer = class {
|
|
|
161
170
|
clearTimeout(currentEntry.dismissTimerId);
|
|
162
171
|
currentEntry.modalEl.remove();
|
|
163
172
|
unregisterModal(id);
|
|
173
|
+
this.restoreFocus(currentEntry.previousActiveElement);
|
|
164
174
|
currentEntry.modalRef._triggerDismissed();
|
|
165
175
|
this.layerRefs.delete(id);
|
|
166
176
|
this.entries = (this.entries ?? []).filter(e => e.id !== id);
|
|
@@ -246,6 +256,44 @@ const SdModalContainer = class {
|
|
|
246
256
|
return;
|
|
247
257
|
requestCloseForModal(id);
|
|
248
258
|
}
|
|
259
|
+
/**
|
|
260
|
+
* 모달이 열릴 때 트리거 요소(버튼 등)에 남아 있던 포커스를 모달 내부로
|
|
261
|
+
* 이동시킨다. 이를 하지 않으면 모달을 연 버튼이 계속 포커스를 가져,
|
|
262
|
+
* Enter 키를 누를 때마다 트리거가 재실행되어 모달이 중첩으로 쌓인다.
|
|
263
|
+
*/
|
|
264
|
+
focusInitialElement(modalEl) {
|
|
265
|
+
const target = this.getInitialFocusTarget(modalEl);
|
|
266
|
+
target?.focus();
|
|
267
|
+
}
|
|
268
|
+
getInitialFocusTarget(modalEl) {
|
|
269
|
+
const explicit = modalEl.querySelector('[autofocus]');
|
|
270
|
+
if (explicit)
|
|
271
|
+
return explicit;
|
|
272
|
+
// 각 모달 타입의 메인(주요 액션) 버튼에 우선 포커스해 Enter 로 확정 가능하게 한다.
|
|
273
|
+
// confirm/action/loading 모두 대응한다.
|
|
274
|
+
const mainButton = modalEl.querySelector([
|
|
275
|
+
'.sd-confirm-modal__button sd-button:last-of-type button',
|
|
276
|
+
'.sd-action-modal__footer > sd-button button',
|
|
277
|
+
'.sd-loading-modal__button sd-button button',
|
|
278
|
+
].join(','));
|
|
279
|
+
if (mainButton)
|
|
280
|
+
return mainButton;
|
|
281
|
+
// 그 외(커스텀 모달 등): 헤더의 닫기(X) 버튼을 제외한 첫 포커스 가능 요소.
|
|
282
|
+
const focusables = Array.from(modalEl.querySelectorAll(FOCUSABLE_SELECTOR));
|
|
283
|
+
const preferred = focusables.find(el => !el.closest('.sd-action-modal__close, .sd-confirm-modal__close-button'));
|
|
284
|
+
if (focusables.length > 0)
|
|
285
|
+
return preferred ?? focusables[0];
|
|
286
|
+
if (!modalEl.hasAttribute('tabindex'))
|
|
287
|
+
modalEl.setAttribute('tabindex', '-1');
|
|
288
|
+
return modalEl;
|
|
289
|
+
}
|
|
290
|
+
restoreFocus(previousActiveElement) {
|
|
291
|
+
if (previousActiveElement &&
|
|
292
|
+
typeof previousActiveElement.focus === 'function' &&
|
|
293
|
+
previousActiveElement.isConnected) {
|
|
294
|
+
previousActiveElement.focus();
|
|
295
|
+
}
|
|
296
|
+
}
|
|
249
297
|
shakeModal(modalEl) {
|
|
250
298
|
const cls = 'sd-modal-container__modal--shake';
|
|
251
299
|
modalEl.classList.remove(cls);
|
|
@@ -152,13 +152,13 @@ const SdPagination = class {
|
|
|
152
152
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
153
153
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
154
154
|
};
|
|
155
|
-
return (h("div", { key: '
|
|
155
|
+
return (h("div", { key: '8a2219bbc3a17951ed66501e7246f230f0495e74', class: {
|
|
156
156
|
'sd-pagination': true,
|
|
157
157
|
'sd-pagination--simple': this.simple,
|
|
158
|
-
}, style: cssVars }, h("div", { key: '
|
|
158
|
+
}, style: cssVars }, h("div", { key: '7e9ddb98aff7506fc3b6053d84c1be211e3d1ff7', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
159
159
|
'sd-pagination__item': true,
|
|
160
160
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
161
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '
|
|
161
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '937554ea8d3ae71da85e2c1f49d82c99658141f0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
162
162
|
}
|
|
163
163
|
};
|
|
164
164
|
SdPagination.style = sdPaginationCss();
|
|
@@ -213,9 +213,9 @@ const SdTbody = class {
|
|
|
213
213
|
}
|
|
214
214
|
}
|
|
215
215
|
render() {
|
|
216
|
-
return (h(Host, { key: '
|
|
216
|
+
return (h(Host, { key: 'ae49b4a7e18afd3d44d07e7da6c3663a6a043796', slot: `${this.tableId}-body` }, h("tbody", { key: '7275cf9214f6917c5437b8a72a06cde3ca48dc8c', class: { tbody: true } }, [
|
|
217
217
|
this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
218
|
-
h("slot", { key: '
|
|
218
|
+
h("slot", { key: '6455be878c24df5371e094fbfe9687ddb992e0e6' }),
|
|
219
219
|
this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
220
220
|
])));
|
|
221
221
|
}
|
|
@@ -390,16 +390,16 @@ const SdThead = class {
|
|
|
390
390
|
'--table-border-color': TABLE_BORDER.color,
|
|
391
391
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
392
392
|
};
|
|
393
|
-
return (h(Host, { key: '
|
|
393
|
+
return (h(Host, { key: 'c25f6f9704c079d4cb93da7e65c8c15b6dedcb67', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'd91019378caafa2ec32dfa838eaa4d1fe815fb0d', class: {
|
|
394
394
|
'thead': true,
|
|
395
395
|
'thead--sticky': this._stickyHeader,
|
|
396
|
-
} }, h("tr", { key: '
|
|
396
|
+
} }, h("tr", { key: '84e581f5c564693d356f56525f57d6b1da211442', class: "tr" }, this._selectable && (h("th", { key: 'fb92e978229c32d560f46af4e90e0980c9c0a213', class: {
|
|
397
397
|
'th': true,
|
|
398
398
|
'th--selected': true,
|
|
399
399
|
'sticky-left': true,
|
|
400
400
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
401
401
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
402
|
-
}, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '
|
|
402
|
+
}, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '157f59b56a4ef2a8529318c8beaf6f59b91e12f0', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'b65e099ebe4940b26cc251961e66a375400f2379', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
|
|
403
403
|
'th': true,
|
|
404
404
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
405
405
|
'sticky-left': true,
|
|
@@ -103,7 +103,7 @@ const SdPopup = class {
|
|
|
103
103
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
104
104
|
...this.submitButtonProps,
|
|
105
105
|
};
|
|
106
|
-
return (h("div", { key: '
|
|
106
|
+
return (h("div", { key: 'fd14b75d27d3006978ceae9287486d9716bbbf5a', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'ac0222dc9512b99cd1d1b4684b9775cd462f39fa', class: "sd-popup__header" }, h("h2", { key: 'a11bea9fac5828161090d09d06d6e1c54c390392', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'ced8961a853cdf014d602c235cfc839a648fb19e', class: "sd-popup__body" }, h("slot", { key: '142807fd74e8b32a31ffb7ed8f3dfdcb07a6a1ba' })), this.useFooter && (h("footer", { key: '35a6b42e82ec13890b4fa56bda5b9781adeff229', class: "sd-popup__footer" }, h("div", { key: '44b2471e0f302bd001fdf1e1d72485dff4af094f', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: 'd1c8e29b60eb7ce86639e336c99a48a67437103a', name: "footer-left" })), h("sd-button", { key: '67b0a8530cae73e344cdae2ac0cb48fa3bdf4827', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
SdPopup.style = sdPopupCss();
|
|
@@ -79,7 +79,7 @@ const SdSelectListItem = class {
|
|
|
79
79
|
return (
|
|
80
80
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
81
81
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
82
|
-
h("div", { key: '
|
|
82
|
+
h("div", { key: '4322a04d65e4b2e1d82d0a6b09fdf6a57cce79ca', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
83
83
|
'sd-select-list-item': true,
|
|
84
84
|
'sd-select-list-item--group': isGroup,
|
|
85
85
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -89,7 +89,7 @@ const SdSelectListItem = class {
|
|
|
89
89
|
'sd-select-list-item--focused': this.isFocused,
|
|
90
90
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
91
91
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
92
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '
|
|
92
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '47ae4bbe3c2fd960dcee0f1157ae8003dc45f205', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: 'c89ba1e3ef52a1809d1252aaee5a18c40ff7cd61', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
93
93
|
}
|
|
94
94
|
};
|
|
95
95
|
SdSelectListItem.style = sdSelectListItemCss();
|
|
@@ -142,15 +142,15 @@ const SdSelectListItemSearch = class {
|
|
|
142
142
|
clearTimeout(this.debounceTimer);
|
|
143
143
|
}
|
|
144
144
|
render() {
|
|
145
|
-
return (h("div", { key: '
|
|
145
|
+
return (h("div", { key: '94215143f5e47887943c726147739cdb1a9fcbf7', class: {
|
|
146
146
|
'sd-select-list-item-search': true,
|
|
147
147
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
148
|
-
} }, h("div", { key: '
|
|
148
|
+
} }, h("div", { key: '0ff422b93d0e15f2425ef760706ae0e6e2cb79f6', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'cc3468339c8b76103b67182309fa3aa2baf24380', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'acc468ede845d0f5890c7908311443ea2aa156cf', ref: el => {
|
|
149
149
|
this.inputEl = el;
|
|
150
|
-
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '
|
|
150
|
+
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'b1f1539aea4eb76458794dcb041e53c7af7b91e2', type: "button", class: {
|
|
151
151
|
'sd-select-list-item-search__clear': true,
|
|
152
152
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
153
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '
|
|
153
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'a137986e0c801a6cf95e279edeb6a9b21cf00170', name: "close", size: 12, color: "#888888" })))));
|
|
154
154
|
}
|
|
155
155
|
};
|
|
156
156
|
SdSelectListItemSearch.style = sdSelectListItemSearchCss();
|
|
@@ -265,15 +265,15 @@ const SdSelect = class {
|
|
|
265
265
|
this.closeDropdown();
|
|
266
266
|
},
|
|
267
267
|
};
|
|
268
|
-
return (h("sd-field", { key: '
|
|
268
|
+
return (h("sd-field", { key: 'f95dc4008dd1f252f8cb41637aa817bdd4d72ba0', 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: () => {
|
|
269
269
|
this.hovered = true;
|
|
270
270
|
}, onMouseLeave: () => {
|
|
271
271
|
this.hovered = false;
|
|
272
|
-
} }, h("div", { key: '
|
|
272
|
+
} }, h("div", { key: 'f12b88dc846a01fc2076242623ac1376ebc0105c', class: "sd-select", ref: el => {
|
|
273
273
|
this.triggerRef = el;
|
|
274
|
-
} }, h("sd-select-trigger", { key: '
|
|
274
|
+
} }, h("sd-select-trigger", { key: '8cef3403ca0a0430c3ce9f8255c98f0e28142d80', ref: el => {
|
|
275
275
|
this.triggerComponentRef = el;
|
|
276
|
-
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '
|
|
276
|
+
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '417194938ff7aac0b22abbba621342dbe767b146', ...portalProps }, h("sd-select-listbox", { key: '0c311407fdc72f37fa7dddf48fdfbaab668a18f4', 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) })))));
|
|
277
277
|
}
|
|
278
278
|
static get watchers() { return {
|
|
279
279
|
"isOpen": [{
|
|
@@ -640,9 +640,9 @@ const SdSelectListbox = class {
|
|
|
640
640
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
641
641
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
642
642
|
};
|
|
643
|
-
return (h("div", { key: '
|
|
643
|
+
return (h("div", { key: '77f3df8e7105f08340cf46ee0ce146d48b927228', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'bd79903b4799e6a074895e0ea2b0987a4775a8e0', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '08c5e0a70837025d62b08d85b0f5044b826dc133', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
644
644
|
this.listEl = el;
|
|
645
|
-
} }, this.showSelectAll && (h("sd-select-list-item", { key: '
|
|
645
|
+
} }, this.showSelectAll && (h("sd-select-list-item", { key: '918c481cc05f4839d6a133e68a90c68ddfac5fba', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
|
|
646
646
|
}
|
|
647
647
|
static get watchers() { return {
|
|
648
648
|
"searchKeyword": [{
|
|
@@ -702,7 +702,7 @@ const SdSelectTrigger = class {
|
|
|
702
702
|
? SELECT_COLORS.icon.disabled
|
|
703
703
|
: SELECT_COLORS.icon.default,
|
|
704
704
|
};
|
|
705
|
-
return (h("div", { key: '
|
|
705
|
+
return (h("div", { key: '361344e040569fa6f7c2b5d16762d9b2120ca50e', ref: el => {
|
|
706
706
|
this.triggerEl = el;
|
|
707
707
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
708
708
|
'sd-select-trigger': true,
|
|
@@ -713,7 +713,7 @@ const SdSelectTrigger = class {
|
|
|
713
713
|
e.preventDefault();
|
|
714
714
|
this.handleClick();
|
|
715
715
|
}
|
|
716
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '
|
|
716
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '3ccbf7c188ca90dc8ba94f10ef2fa3f7cea70076', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '623f1f83d7b8c89e64f9ec8d8e3261bd771c45b4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
717
717
|
'sd-select-trigger__icon': true,
|
|
718
718
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
719
719
|
} }))));
|
|
@@ -103,7 +103,7 @@ const SdSwitch = class {
|
|
|
103
103
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
104
104
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
105
105
|
};
|
|
106
|
-
return (h("label", { key: '
|
|
106
|
+
return (h("label", { key: '4746eeb0cd3b977be3bc537c30cbf58c51d3a8fc', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'f022803741f2ac787a8993a2d987eedc5d6c8f24', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'd8684dcb2b446885f849e6f00d773ef340e37c73', class: "sd-switch__track" }, h("div", { key: '572bd3dd7f65c9a9fd36c27b4444b0e653ae2b23', class: "sd-switch__knob" })), this.label && h("span", { key: '5228763c541a4bc0a71bfb457a4432dca01d452f', class: "sd-switch__label" }, this.label)));
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
SdSwitch.style = sdSwitchCss();
|
|
@@ -17,7 +17,7 @@ let nanoid = (size = 21) => {
|
|
|
17
17
|
return id
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-
|
|
20
|
+
const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-useTop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
|
|
21
21
|
|
|
22
22
|
const SdTable = class {
|
|
23
23
|
constructor(hostRef) {
|
|
@@ -843,25 +843,25 @@ const SdTable = class {
|
|
|
843
843
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
844
844
|
'--table-host-height': hostHeight,
|
|
845
845
|
};
|
|
846
|
-
return (h(Host, { key: '
|
|
846
|
+
return (h(Host, { key: 'f5a5a2d4012f069619d110dcd9c2d5e6bd446407', style: hostStyle }, h("div", { key: '96ca8b8e4291ac077a6e1b6d3eed897777817b25', class: "sd-table__container", style: {
|
|
847
847
|
'--table-width': this.width,
|
|
848
848
|
'--pagination-height': `${paginationHeight}px`,
|
|
849
|
-
} }, h("div", { key: '
|
|
849
|
+
} }, h("div", { key: 'd8225691e78e5fe5341f03def8ad1d6dfb057056', class: {
|
|
850
850
|
'sd-table__wrapper': true,
|
|
851
|
-
'sd-table__wrapper--radius-
|
|
851
|
+
'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
|
|
852
852
|
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
853
|
-
} }, h("div", { key: '
|
|
853
|
+
} }, h("div", { key: 'fb8403bd7587a4d1fcbb77b1fe226ae0aa27be7a', class: {
|
|
854
854
|
'sd-table__scroll-container': true,
|
|
855
855
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
856
856
|
'sd-table__scroll-container--no-data': isNoData,
|
|
857
|
-
} }, this.isLoading && (h("div", { key: '
|
|
857
|
+
} }, this.isLoading && (h("div", { key: '4202fa1f03feff066f9779c5eb21c3b0c96f5cf3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '394c52823f5c24f288d51b34daec6f228de119d7', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: 'bb1d3d8b592194006bea7cd5ab2efc587f9abc44', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'c34df2b4f35c7ea8b5bbe6cf49dc354e11dac344', class: "sd-table__no-data" }, h("div", { key: '05006aacc2c242606ba8585ee0bdea50eea1b688', class: "sd-table__no-data-content", ref: el => {
|
|
858
858
|
this.noDataContentEl = el;
|
|
859
859
|
if (el)
|
|
860
860
|
this.syncNoDataContentObserver();
|
|
861
|
-
} }, h("slot", { key: '
|
|
861
|
+
} }, h("slot", { key: 'ad707be9bc8062da5a6236c9833176adb7b95851', name: "no-data" }, h("span", { key: '3aa57b547e05bd455829cff770c435af2ac78383' }, this.resolvedNoDataLabel)))))), h("table", { key: '6b2958f14d9708a49e3cbaff7cdb3653f7267e1c', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
862
862
|
this.pagination.rowsPerPage > 0 &&
|
|
863
863
|
this.rowCount > 0 &&
|
|
864
|
-
!this.useVirtualScroll && (h("div", { key: '
|
|
864
|
+
!this.useVirtualScroll && (h("div", { key: '950e80fdb6c06af2b4423e3b0c75ded7cfe4a298', class: "sd-table__pagination" }, h("sd-pagination", { key: '3257c7b631c262c9ddadbd23c83f2eb43f9bf7f5', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '7bb00889139aa7dbee4723efac511753afcb15e9', value: this.useInternalPagination
|
|
865
865
|
? this.innerRowsPerPage
|
|
866
866
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
867
867
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -199,7 +199,7 @@ const SdTabs = class {
|
|
|
199
199
|
};
|
|
200
200
|
}
|
|
201
201
|
render() {
|
|
202
|
-
return (h("div", { key: '
|
|
202
|
+
return (h("div", { key: 'c2a2bd86833267ca4b47e7c6420e04a504af05f5', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
203
203
|
const badgeName = this.getBadgeName(tab);
|
|
204
204
|
return (h("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 => {
|
|
205
205
|
if (e.key === 'Enter' || e.key === ' ') {
|
package/dist/esm/sd-td.entry.js
CHANGED
|
@@ -156,7 +156,7 @@ const SdTd = class {
|
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
158
|
render() {
|
|
159
|
-
return (h(Host, { key: '
|
|
159
|
+
return (h(Host, { key: 'ed5419d9190514381bb8fe43a8588c7d88983527', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '308d16388614375c94bd4c5efc8e173b56b4af2a' })));
|
|
160
160
|
}
|
|
161
161
|
static get watchers() { return {
|
|
162
162
|
"field": [{
|
|
@@ -232,7 +232,7 @@ const SdToastContainer = class {
|
|
|
232
232
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
233
233
|
const indexMap = new Map();
|
|
234
234
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
235
|
-
return (h("div", { key: '
|
|
235
|
+
return (h("div", { key: 'f5b2cb8f4d1286bbd8f7cd648916294397ed4742', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
236
236
|
this.expanded = true;
|
|
237
237
|
this.pauseTimers();
|
|
238
238
|
}, onMouseLeave: () => {
|
|
@@ -82,12 +82,12 @@ const SdToast = class {
|
|
|
82
82
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
83
83
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
84
84
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
85
|
-
return (h("div", { key: '
|
|
85
|
+
return (h("div", { key: '45a278a76dde70b17794763fa35365ac8d634194', style: {
|
|
86
86
|
'--sd-toast-bg': typeConfig.bg,
|
|
87
87
|
'--sd-toast-text': typeConfig.content,
|
|
88
88
|
'--sd-toast-icon': iconColor,
|
|
89
89
|
'--sd-toast-link': linkColor,
|
|
90
|
-
} }, h("div", { key: '
|
|
90
|
+
} }, h("div", { key: 'eb00957c65514153867322942ed111d24622c75b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'd30f442041ea963e86f8558f3ed07ceb28049ae9', class: "sd-toast__icon" }, h("sd-icon", { key: '04e57935a4fe4344f3eb1338cfc436bef449805e', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '02270cd25d409d44bbd1d7932b074494d2cbeca1', class: "sd-toast__content" }, h("span", { key: '5f180c70d130fc04b16901c69a399f6effa328b9', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '4fd2adab87dbdaae94c21483f66256ce773ae965', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '2c60553150114d6d5b99a2e86b35b4a85c4a34a4', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: 'c3e01391b713286b65a05352dd39ab98790564f8', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
91
91
|
}
|
|
92
92
|
};
|
|
93
93
|
SdToast.style = sdToastCss();
|
|
@@ -118,7 +118,7 @@ const SdToggle = class {
|
|
|
118
118
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
119
119
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
120
120
|
};
|
|
121
|
-
return (h("label", { key: '
|
|
121
|
+
return (h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
122
122
|
}
|
|
123
123
|
};
|
|
124
124
|
SdToggle.style = sdToggleCss();
|
|
@@ -5,12 +5,18 @@ export declare class SdGhostButton {
|
|
|
5
5
|
size: GhostButtonSize;
|
|
6
6
|
intent: GhostButtonIntent;
|
|
7
7
|
ariaLabel: string;
|
|
8
|
-
|
|
8
|
+
tooltipText?: string;
|
|
9
9
|
disabled: boolean;
|
|
10
|
+
hostEl: HTMLElement;
|
|
11
|
+
private isTooltipOpen;
|
|
10
12
|
click: EventEmitter<MouseEvent>;
|
|
11
13
|
private hasWarnedMissingAriaLabel;
|
|
12
14
|
componentWillLoad(): void;
|
|
13
15
|
private handleClick;
|
|
16
|
+
private handleMouseEnter;
|
|
17
|
+
private handleMouseLeave;
|
|
18
|
+
private handleFocus;
|
|
19
|
+
private handleBlur;
|
|
14
20
|
componentWillRender(): void;
|
|
15
21
|
private warnIfMissingAriaLabel;
|
|
16
22
|
render(): any;
|
|
@@ -13,10 +13,10 @@ export declare class SdKeyValueTable {
|
|
|
13
13
|
/**
|
|
14
14
|
* 테이블 border-radius 제어.
|
|
15
15
|
* - 'default': 전체 radius 적용
|
|
16
|
-
* - '
|
|
16
|
+
* - 'useTop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
|
|
17
17
|
* - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
|
|
18
18
|
*/
|
|
19
|
-
radius: 'default' | '
|
|
19
|
+
radius: 'default' | 'useTop' | 'full';
|
|
20
20
|
change: EventEmitter<SdKeyValueChangeDetail>;
|
|
21
21
|
searchEvent: EventEmitter<void>;
|
|
22
22
|
private emit;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ConfirmModalOptions, LoadingModalOptions, ModalDialogRefLike, ModalEntry, SdModalCreateOptions } from './sd-modal-container.config';
|
|
2
2
|
interface InternalEntry extends ModalEntry {
|
|
3
3
|
backdropVisible: boolean;
|
|
4
|
+
previousActiveElement: HTMLElement | null;
|
|
4
5
|
}
|
|
5
6
|
export declare class SdModalContainer {
|
|
6
7
|
el: HTMLElement;
|
|
@@ -25,6 +26,14 @@ export declare class SdModalContainer {
|
|
|
25
26
|
private applyLoadingProps;
|
|
26
27
|
private applyProps;
|
|
27
28
|
private handleBackdropClick;
|
|
29
|
+
/**
|
|
30
|
+
* 모달이 열릴 때 트리거 요소(버튼 등)에 남아 있던 포커스를 모달 내부로
|
|
31
|
+
* 이동시킨다. 이를 하지 않으면 모달을 연 버튼이 계속 포커스를 가져,
|
|
32
|
+
* Enter 키를 누를 때마다 트리거가 재실행되어 모달이 중첩으로 쌓인다.
|
|
33
|
+
*/
|
|
34
|
+
private focusInitialElement;
|
|
35
|
+
private getInitialFocusTarget;
|
|
36
|
+
private restoreFocus;
|
|
28
37
|
private shakeModal;
|
|
29
38
|
private waitForModalReady;
|
|
30
39
|
private hasOwnProp;
|
|
@@ -15,7 +15,7 @@ export declare class SdTable {
|
|
|
15
15
|
height?: string;
|
|
16
16
|
stickyHeader: boolean;
|
|
17
17
|
stickyColumn: SdTableStickyColumn;
|
|
18
|
-
radius: 'default' | '
|
|
18
|
+
radius: 'default' | 'useTop' | 'full';
|
|
19
19
|
noDataLabel: string;
|
|
20
20
|
resolvedNoDataLabel: string;
|
|
21
21
|
isLoading: boolean;
|
|
@@ -941,10 +941,7 @@ export namespace Components {
|
|
|
941
941
|
* @default 'sm'
|
|
942
942
|
*/
|
|
943
943
|
"size": GhostButtonSize;
|
|
944
|
-
|
|
945
|
-
* @default ''
|
|
946
|
-
*/
|
|
947
|
-
"tooltipLabel": string;
|
|
944
|
+
"tooltipText"?: string;
|
|
948
945
|
}
|
|
949
946
|
interface SdGuide {
|
|
950
947
|
/**
|
|
@@ -1123,10 +1120,10 @@ export namespace Components {
|
|
|
1123
1120
|
*/
|
|
1124
1121
|
"fields": SdKeyValueField[][];
|
|
1125
1122
|
/**
|
|
1126
|
-
* 테이블 border-radius 제어. - 'default': 전체 radius 적용 - '
|
|
1123
|
+
* 테이블 border-radius 제어. - 'default': 전체 radius 적용 - 'useTop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때) - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
|
|
1127
1124
|
* @default 'default'
|
|
1128
1125
|
*/
|
|
1129
|
-
"radius": 'default' | '
|
|
1126
|
+
"radius": 'default' | 'useTop' | 'full';
|
|
1130
1127
|
/**
|
|
1131
1128
|
* true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
|
|
1132
1129
|
* @default false
|
|
@@ -1398,6 +1395,10 @@ export namespace Components {
|
|
|
1398
1395
|
* @default null
|
|
1399
1396
|
*/
|
|
1400
1397
|
"parentRef": HTMLElement | null;
|
|
1398
|
+
/**
|
|
1399
|
+
* @default 'bottom'
|
|
1400
|
+
*/
|
|
1401
|
+
"placement": 'top' | 'bottom';
|
|
1401
1402
|
/**
|
|
1402
1403
|
* @default 'body'
|
|
1403
1404
|
*/
|
|
@@ -1680,7 +1681,7 @@ export namespace Components {
|
|
|
1680
1681
|
/**
|
|
1681
1682
|
* @default 'default'
|
|
1682
1683
|
*/
|
|
1683
|
-
"radius": 'default' | '
|
|
1684
|
+
"radius": 'default' | 'useTop' | 'full';
|
|
1684
1685
|
/**
|
|
1685
1686
|
* @default false
|
|
1686
1687
|
*/
|
|
@@ -4082,10 +4083,7 @@ declare namespace LocalJSX {
|
|
|
4082
4083
|
* @default 'sm'
|
|
4083
4084
|
*/
|
|
4084
4085
|
"size"?: GhostButtonSize;
|
|
4085
|
-
|
|
4086
|
-
* @default ''
|
|
4087
|
-
*/
|
|
4088
|
-
"tooltipLabel"?: string;
|
|
4086
|
+
"tooltipText"?: string;
|
|
4089
4087
|
}
|
|
4090
4088
|
interface SdGuide {
|
|
4091
4089
|
/**
|
|
@@ -4264,10 +4262,10 @@ declare namespace LocalJSX {
|
|
|
4264
4262
|
"onSdChange"?: (event: SdKeyValueTableCustomEvent<SdKeyValueChangeDetail>) => void;
|
|
4265
4263
|
"onSdSearch"?: (event: SdKeyValueTableCustomEvent<void>) => void;
|
|
4266
4264
|
/**
|
|
4267
|
-
* 테이블 border-radius 제어. - 'default': 전체 radius 적용 - '
|
|
4265
|
+
* 테이블 border-radius 제어. - 'default': 전체 radius 적용 - 'useTop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때) - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
|
|
4268
4266
|
* @default 'default'
|
|
4269
4267
|
*/
|
|
4270
|
-
"radius"?: 'default' | '
|
|
4268
|
+
"radius"?: 'default' | 'useTop' | 'full';
|
|
4271
4269
|
/**
|
|
4272
4270
|
* true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
|
|
4273
4271
|
* @default false
|
|
@@ -4535,6 +4533,10 @@ declare namespace LocalJSX {
|
|
|
4535
4533
|
* @default null
|
|
4536
4534
|
*/
|
|
4537
4535
|
"parentRef"?: HTMLElement | null;
|
|
4536
|
+
/**
|
|
4537
|
+
* @default 'bottom'
|
|
4538
|
+
*/
|
|
4539
|
+
"placement"?: 'top' | 'bottom';
|
|
4538
4540
|
/**
|
|
4539
4541
|
* @default 'body'
|
|
4540
4542
|
*/
|
|
@@ -4835,7 +4837,7 @@ declare namespace LocalJSX {
|
|
|
4835
4837
|
/**
|
|
4836
4838
|
* @default 'default'
|
|
4837
4839
|
*/
|
|
4838
|
-
"radius"?: 'default' | '
|
|
4840
|
+
"radius"?: 'default' | 'useTop' | 'full';
|
|
4839
4841
|
/**
|
|
4840
4842
|
* @default false
|
|
4841
4843
|
*/
|
|
@@ -5463,7 +5465,7 @@ declare namespace LocalJSX {
|
|
|
5463
5465
|
"size": GhostButtonSize;
|
|
5464
5466
|
"intent": GhostButtonIntent;
|
|
5465
5467
|
"ariaLabel": string;
|
|
5466
|
-
"
|
|
5468
|
+
"tooltipText": string;
|
|
5467
5469
|
"disabled": boolean;
|
|
5468
5470
|
}
|
|
5469
5471
|
interface SdGuideAttributes {
|
|
@@ -5513,7 +5515,7 @@ declare namespace LocalJSX {
|
|
|
5513
5515
|
}
|
|
5514
5516
|
interface SdKeyValueTableAttributes {
|
|
5515
5517
|
"search": boolean;
|
|
5516
|
-
"radius": 'default' | '
|
|
5518
|
+
"radius": 'default' | 'useTop' | 'full';
|
|
5517
5519
|
}
|
|
5518
5520
|
interface SdLinearProgressAttributes {
|
|
5519
5521
|
"indeterminate": boolean;
|
|
@@ -5592,6 +5594,7 @@ declare namespace LocalJSX {
|
|
|
5592
5594
|
"viewportPadding": number;
|
|
5593
5595
|
"zIndex": number;
|
|
5594
5596
|
"open": boolean;
|
|
5597
|
+
"placement": 'top' | 'bottom';
|
|
5595
5598
|
}
|
|
5596
5599
|
interface SdRadioAttributes {
|
|
5597
5600
|
"value": string;
|
|
@@ -5672,7 +5675,7 @@ declare namespace LocalJSX {
|
|
|
5672
5675
|
"width": string;
|
|
5673
5676
|
"height": string;
|
|
5674
5677
|
"stickyHeader": boolean;
|
|
5675
|
-
"radius": 'default' | '
|
|
5678
|
+
"radius": 'default' | 'useTop' | 'full';
|
|
5676
5679
|
"noDataLabel": string;
|
|
5677
5680
|
"isLoading": boolean;
|
|
5678
5681
|
"useInternalPagination": boolean;
|