@sellmate/design-system 1.21.0 → 1.23.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 +2 -2
- package/dist/cjs/{index-C-F-JEv_.js → index-BuaQW9U4.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- 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-button_2.cjs.entry.js +5 -5
- package/dist/cjs/sd-calendar_2.cjs.entry.js +1 -1
- package/dist/cjs/sd-callout.cjs.entry.js +1 -1
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- package/dist/cjs/sd-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/sd-chip-input.cjs.entry.js +61 -19
- package/dist/cjs/sd-chip.cjs.entry.js +6 -4
- package/dist/cjs/{sd-chip.config-DiLoRpct.js → sd-chip.config-DCNCzV8s.js} +1 -1
- package/dist/cjs/sd-circle-progress.cjs.entry.js +1 -1
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-picker_7.cjs.entry.js +1 -1
- 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 +2 -2
- package/dist/cjs/sd-form.cjs.entry.js +1 -1
- package/dist/cjs/sd-ghost-button_3.cjs.entry.js +4 -4
- package/dist/cjs/sd-guide.cjs.entry.js +1 -1
- package/dist/cjs/sd-key-value-table.cjs.entry.js +1 -1
- package/dist/cjs/sd-linear-progress.cjs.entry.js +1 -1
- package/dist/cjs/sd-loading-container.cjs.entry.js +1 -1
- package/dist/cjs/sd-modal-container.cjs.entry.js +1 -1
- package/dist/cjs/sd-pagination_4.cjs.entry.js +87 -8
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- 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 +1 -1
- package/dist/cjs/sd-select_3.cjs.entry.js +1 -1
- package/dist/cjs/sd-switch.cjs.entry.js +1 -1
- package/dist/cjs/sd-table.cjs.entry.js +1 -1
- 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 +1 -1
- package/dist/cjs/sd-toast-container.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast.cjs.entry.js +1 -1
- package/dist/cjs/sd-toggle.cjs.entry.js +1 -1
- package/dist/cjs/{tooltipArrow-26hYtSrD.js → tooltipArrow-VQq73W83.js} +1 -1
- package/dist/collection/components/assets/CaretDown.js +1 -1
- package/dist/collection/components/assets/CaretLeft.js +1 -1
- package/dist/collection/components/assets/CaretRight.js +1 -1
- package/dist/collection/components/assets/CaretUp.js +1 -1
- package/dist/collection/components/sd-chip/sd-chip.js +24 -2
- package/dist/collection/components/sd-chip-input/sd-chip-input.css +5 -0
- package/dist/collection/components/sd-chip-input/sd-chip-input.js +58 -16
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +3 -3
- package/dist/collection/components/sd-table/sd-table.stories.helpers.js +97 -0
- package/dist/collection/components/sd-table/sd-thead/sd-thead.css +21 -0
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +87 -7
- package/dist/components/index.js +1 -1
- package/dist/components/{p-C1QezE7u.js → p-2-7UYvqL.js} +1 -1
- package/dist/components/{p-B-Igud6n.js → p-4I0LJNSg.js} +1 -1
- package/dist/components/p-B3bERWUt.js +1 -0
- package/dist/components/{p-DIc8C633.js → p-BDm6daTX.js} +1 -1
- package/dist/components/{p-CZYTZeMe.js → p-BFMUpKa2.js} +1 -1
- package/dist/components/{p-Cj_1bYZF.js → p-BJMpxQSk.js} +1 -1
- package/dist/components/{p-DU0IkIvI.js → p-BLsuwMw4.js} +1 -1
- package/dist/components/{p-DZikCqcw.js → p-BRKeMTWI.js} +1 -1
- package/dist/components/{p-BjSMh85k.js → p-BUB0CcPo.js} +1 -1
- package/dist/components/{p-CBDBmMmw.js → p-BYgT6mRD.js} +1 -1
- package/dist/components/p-BdFwmTyS.js +1 -0
- package/dist/components/{p-BIHVGo10.js → p-BeKMwT89.js} +1 -1
- package/dist/components/p-BnhzUsGP.js +1 -0
- package/dist/components/{p-C3mTIE8H.js → p-Btpf6Xpg.js} +1 -1
- package/dist/components/{p-B76pFg6k.js → p-BwgUEhOa.js} +1 -1
- package/dist/components/{p-CTw1Deo8.js → p-C2cNc56z.js} +1 -1
- package/dist/components/{p-CTxZT3Je.js → p-C3rOud8J.js} +1 -1
- package/dist/components/{p-D4zy1T3V.js → p-C9rjLN0u.js} +1 -1
- package/dist/components/{p-CCCwPJ5p.js → p-CEVDmQdt.js} +1 -1
- package/dist/components/{p-BQQC-6k4.js → p-CGJ1L8_Y.js} +1 -1
- package/dist/components/{p-4MIzxb0h.js → p-CZpcFpSk.js} +1 -1
- package/dist/components/p-C_g09O6z.js +1 -0
- package/dist/components/{p-B5VNSTAf.js → p-CaQ-qyG-.js} +1 -1
- package/dist/components/{p-S2-XqY2R.js → p-ChwRSZ6R.js} +1 -1
- package/dist/components/{p-s_75vJTu.js → p-ClBvavih.js} +1 -1
- package/dist/components/{p-Dz7VXmIA.js → p-CpBPNHYe.js} +1 -1
- package/dist/components/{p-FA9fGvbL.js → p-D3dq5pt5.js} +1 -1
- package/dist/components/p-DDahT3Mp.js +1 -0
- package/dist/components/{p-BrHnpCXR.js → p-DfKZyde8.js} +1 -1
- package/dist/components/{p-DPXOBYhf.js → p-DgZ_vzrA.js} +1 -1
- package/dist/components/{p-BFlmHQm9.js → p-Dj1iJxUT.js} +1 -1
- package/dist/components/{p-CEKu7cxA.js → p-Dn93jl-w.js} +1 -1
- package/dist/components/{p-CcwzTAJC.js → p-DnHzWLdY.js} +1 -1
- package/dist/components/{p-Btj50AUe.js → p-IMWw_SJ1.js} +1 -1
- package/dist/components/{p-DC5W8Uy1.js → p-iORPryb0.js} +1 -1
- package/dist/components/{p-Cugxp5lo.js → p-kDokArZu.js} +1 -1
- package/dist/components/{p-l7TaS8q9.js → p-lL2VxD2V.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-box.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-form.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-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/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.css +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-2ba0b35a.entry.js → p-12e7b9fc.entry.js} +1 -1
- package/dist/design-system/{p-ccc85130.entry.js → p-1e1a5c69.entry.js} +1 -1
- package/dist/design-system/p-1e9793d6.entry.js +1 -0
- package/dist/design-system/{p-ce83eca1.entry.js → p-2646a746.entry.js} +1 -1
- package/dist/design-system/{p-a71a8b31.entry.js → p-3c4b57b5.entry.js} +1 -1
- package/dist/design-system/{p-99f33027.entry.js → p-43316703.entry.js} +1 -1
- package/dist/design-system/{p-e310f188.entry.js → p-43c79402.entry.js} +1 -1
- package/dist/design-system/{p-bfba449b.entry.js → p-45651573.entry.js} +1 -1
- package/dist/design-system/{p-88926a42.entry.js → p-496d3684.entry.js} +1 -1
- package/dist/design-system/{p-d5b535ad.entry.js → p-4d68b0a8.entry.js} +1 -1
- package/dist/design-system/{p-68687503.entry.js → p-578683b5.entry.js} +1 -1
- package/dist/design-system/{p-ce5df7ef.entry.js → p-586602a8.entry.js} +1 -1
- package/dist/design-system/{p-9dc0c2f9.entry.js → p-60f3ce4f.entry.js} +1 -1
- package/dist/design-system/{p-4f69fde0.entry.js → p-64d63a3f.entry.js} +1 -1
- package/dist/design-system/{p-563a8242.entry.js → p-6cd3da51.entry.js} +1 -1
- package/dist/design-system/p-7233ffb7.entry.js +1 -0
- package/dist/design-system/p-754c11a8.entry.js +1 -0
- package/dist/design-system/{p-ac81b46e.entry.js → p-8101c564.entry.js} +1 -1
- package/dist/design-system/{p-4bc0ce52.entry.js → p-829b7e4f.entry.js} +1 -1
- package/dist/design-system/{p-7c507d39.entry.js → p-83a86e6d.entry.js} +1 -1
- package/dist/design-system/p-86e54f19.entry.js +1 -0
- package/dist/design-system/{p-4eeca0cb.entry.js → p-93f876ce.entry.js} +1 -1
- package/dist/design-system/p-956956af.entry.js +1 -0
- package/dist/design-system/{p-90436be8.entry.js → p-9761ef4a.entry.js} +1 -1
- package/dist/design-system/{p-50b5cf37.entry.js → p-9b7d3077.entry.js} +1 -1
- package/dist/design-system/{p-C7HJ-NfO.js → p-BZ5lcC25.js} +1 -1
- package/dist/{components/p-BRmilX-4.js → design-system/p-GXE2lEVj.js} +1 -1
- package/dist/design-system/{p-DDj5KTBF.js → p-ITP9Focx.js} +1 -1
- package/dist/design-system/{p-c684cd96.entry.js → p-a42bcc11.entry.js} +1 -1
- package/dist/design-system/{p-ff726fad.entry.js → p-a5fe8b9a.entry.js} +1 -1
- package/dist/design-system/{p-2ca4902b.entry.js → p-b1f4e1e5.entry.js} +1 -1
- package/dist/design-system/{p-abcc9367.entry.js → p-b29569d7.entry.js} +1 -1
- package/dist/design-system/{p-a80cc067.entry.js → p-b2ef677a.entry.js} +1 -1
- package/dist/design-system/{p-35e1e2fa.entry.js → p-b7e80770.entry.js} +1 -1
- package/dist/design-system/{p-6d8a4a23.entry.js → p-c4c81918.entry.js} +1 -1
- package/dist/design-system/{p-2df32f8c.entry.js → p-c79bf2eb.entry.js} +1 -1
- package/dist/design-system/{p-52e88677.entry.js → p-ccbf8687.entry.js} +1 -1
- package/dist/design-system/{p-b881bbb6.entry.js → p-d10efe7e.entry.js} +1 -1
- package/dist/design-system/{p-274dbc65.entry.js → p-df5e8dba.entry.js} +1 -1
- package/dist/design-system/{p-fc65bbe2.entry.js → p-e018fdb1.entry.js} +1 -1
- package/dist/design-system/{p-9a010c12.entry.js → p-e897484c.entry.js} +1 -1
- package/dist/design-system/{p-552acf98.entry.js → p-e94bd6d7.entry.js} +1 -1
- package/dist/design-system/{p-c93c623f.entry.js → p-f280e59d.entry.js} +1 -1
- package/dist/esm/design-system.js +3 -3
- package/dist/esm/{index-C7HJ-NfO.js → index-BZ5lcC25.js} +1 -1
- package/dist/esm/loader.js +3 -3
- 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-button_2.entry.js +5 -5
- package/dist/esm/sd-calendar_2.entry.js +1 -1
- package/dist/esm/sd-callout.entry.js +1 -1
- package/dist/esm/sd-card.entry.js +1 -1
- package/dist/esm/sd-checkbox.entry.js +1 -1
- package/dist/esm/sd-chip-input.entry.js +61 -19
- package/dist/esm/{sd-chip.config-DDj5KTBF.js → sd-chip.config-ITP9Focx.js} +1 -1
- package/dist/esm/sd-chip.entry.js +6 -4
- package/dist/esm/sd-circle-progress.entry.js +1 -1
- package/dist/esm/sd-confirm-modal_2.entry.js +1 -1
- package/dist/esm/sd-date-box.entry.js +1 -1
- package/dist/esm/sd-date-picker_7.entry.js +1 -1
- 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 +2 -2
- package/dist/esm/sd-form.entry.js +1 -1
- package/dist/esm/sd-ghost-button_3.entry.js +4 -4
- package/dist/esm/sd-guide.entry.js +1 -1
- package/dist/esm/sd-key-value-table.entry.js +1 -1
- package/dist/esm/sd-linear-progress.entry.js +1 -1
- package/dist/esm/sd-loading-container.entry.js +1 -1
- package/dist/esm/sd-modal-container.entry.js +1 -1
- package/dist/esm/sd-pagination_4.entry.js +87 -8
- package/dist/esm/sd-popover.entry.js +2 -2
- 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 +1 -1
- package/dist/esm/sd-select_3.entry.js +1 -1
- package/dist/esm/sd-switch.entry.js +1 -1
- package/dist/esm/sd-table.entry.js +1 -1
- 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 +1 -1
- package/dist/esm/sd-toast-container.entry.js +1 -1
- package/dist/esm/sd-toast.entry.js +1 -1
- package/dist/esm/sd-toggle.entry.js +1 -1
- package/dist/esm/{tooltipArrow-Bgf3crs7.js → tooltipArrow-ByHjyr3Z.js} +1 -1
- package/dist/types/components/sd-chip/sd-chip.d.ts +2 -0
- package/dist/types/components/sd-table/constants.d.ts +1 -0
- package/dist/types/components/sd-table/sd-table.stories.helpers.d.ts +10 -0
- package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts +8 -0
- package/dist/types/components.d.ts +11 -0
- package/hydrate/index.js +160 -35
- package/hydrate/index.mjs +160 -35
- package/package.json +1 -1
- package/dist/components/p-BVlg0BoC.js +0 -1
- package/dist/components/p-BzsHwLh6.js +0 -1
- package/dist/components/p-DJY7lCe4.js +0 -1
- package/dist/components/p-YpyfqzoP.js +0 -1
- package/dist/design-system/p-0f35cd21.entry.js +0 -1
- package/dist/design-system/p-35da166a.entry.js +0 -1
- package/dist/design-system/p-4c1559c8.entry.js +0 -1
- package/dist/design-system/p-4e44b45b.entry.js +0 -1
- package/dist/design-system/p-DUyBmuH_.js +0 -1
- package/dist/design-system/p-fe5b8eaa.entry.js +0 -1
|
@@ -66,16 +66,16 @@ export class SdGhostButton {
|
|
|
66
66
|
const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
|
|
67
67
|
const tooltipText = (this.tooltipText ?? '').trim();
|
|
68
68
|
const hasTooltip = tooltipText.length > 0;
|
|
69
|
-
return (h("button", { key: '
|
|
69
|
+
return (h("button", { key: '6e5bcbc740d561702ce8849dfc4fb5a1ee3e5406', class: {
|
|
70
70
|
'sd-ghost-button': true,
|
|
71
71
|
'sd-ghost-button--disabled': this.disabled,
|
|
72
|
-
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
72
|
+
}, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, style: {
|
|
73
73
|
'--sd-ghost-button-size': `${sizeConfig.size}px`,
|
|
74
74
|
'--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
|
|
75
75
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
|
|
76
76
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
77
77
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
78
|
-
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen &&
|
|
78
|
+
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (h("sd-portal", { key: '2a55efb24a478982d60b3c292f601feacfc46625', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: '9ad100ef8c67ec000ab7f9bafd85adf65f66d725', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '1c0972bad91a4ee406087745c7671e6ad82bc7bc', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: '93d10ee62828ad2b9fa93ae9f717cb9e4da6a107', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
79
79
|
}
|
|
80
80
|
static get is() { return "sd-ghost-button"; }
|
|
81
81
|
static get originalStyleUrls() {
|
|
@@ -143,3 +143,100 @@ StoryVirtualTable = __decorate([
|
|
|
143
143
|
customElement('story-virtual-table')
|
|
144
144
|
], StoryVirtualTable);
|
|
145
145
|
export { StoryVirtualTable };
|
|
146
|
+
const DROPDOWN_STATUS_META = {
|
|
147
|
+
active: { bg: '#DCFCE7', color: '#166534', label: 'Active' },
|
|
148
|
+
reviewing: { bg: '#FEF3C7', color: '#92400E', label: 'Reviewing' },
|
|
149
|
+
archived: { bg: '#E2E8F0', color: '#475569', label: 'Archived' },
|
|
150
|
+
};
|
|
151
|
+
const DROPDOWN_SEED = [
|
|
152
|
+
{ id: 1, name: 'Avery Kim', role: 'Owner', region: 'Seoul', status: 'active' },
|
|
153
|
+
{ id: 2, name: 'Mina Park', role: 'Manager', region: 'Busan', status: 'reviewing' },
|
|
154
|
+
{ id: 3, name: 'Ethan Lee', role: 'Analyst', region: 'Incheon', status: 'archived' },
|
|
155
|
+
{ id: 4, name: 'Sora Choi', role: 'Owner', region: 'Daegu', status: 'active' },
|
|
156
|
+
{ id: 5, name: 'Jisoo Han', role: 'Manager', region: 'Daejeon', status: 'reviewing' },
|
|
157
|
+
{ id: 6, name: 'Noah Yoon', role: 'Analyst', region: 'Gwangju', status: 'active' },
|
|
158
|
+
{ id: 7, name: 'Iris Jung', role: 'Manager', region: 'Suwon', status: 'active' },
|
|
159
|
+
{ id: 8, name: 'Liam Seo', role: 'Owner', region: 'Ulsan', status: 'reviewing' },
|
|
160
|
+
];
|
|
161
|
+
const DROPDOWN_COLUMNS = [
|
|
162
|
+
{ name: 'name', label: 'Customer', field: 'name', autoWidth: true },
|
|
163
|
+
{ name: 'role', label: 'Role', field: 'role', align: 'center', width: '100px', hasDropdown: true },
|
|
164
|
+
{ name: 'region', label: 'Region', field: 'region', width: '100px' },
|
|
165
|
+
{ name: 'status', label: 'Status', field: 'status', align: 'center', width: '110px', hasDropdown: true },
|
|
166
|
+
];
|
|
167
|
+
const LISTBOX_STYLE = 'margin:0;padding:4px;list-style:none;min-width:140px;background:white;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.10);';
|
|
168
|
+
const ITEM_BASE_STYLE = 'padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px;';
|
|
169
|
+
let StoryDropdownTable = class StoryDropdownTable extends LitElement {
|
|
170
|
+
// Disable shadow DOM so Stencil's slot emulation can see and move
|
|
171
|
+
// the slotted <ul> nodes without Lit's ChildPart losing track of them.
|
|
172
|
+
createRenderRoot() { return this; }
|
|
173
|
+
constructor() {
|
|
174
|
+
super();
|
|
175
|
+
this.roleFilter = 'All';
|
|
176
|
+
this.statusFilter = 'All';
|
|
177
|
+
}
|
|
178
|
+
get displayRows() {
|
|
179
|
+
return DROPDOWN_SEED.filter(row => (this.roleFilter === 'All' || row.role === this.roleFilter) &&
|
|
180
|
+
(this.statusFilter === 'All' || row.status === this.statusFilter));
|
|
181
|
+
}
|
|
182
|
+
itemStyle(active) {
|
|
183
|
+
return `${ITEM_BASE_STYLE}background:${active ? '#f0f9ff' : 'transparent'};color:${active ? '#0369a1' : '#374151'};font-weight:${active ? '600' : '400'};`;
|
|
184
|
+
}
|
|
185
|
+
render() {
|
|
186
|
+
const rows = this.displayRows;
|
|
187
|
+
const roleOptions = ['All', 'Owner', 'Manager', 'Analyst'];
|
|
188
|
+
const statusOptions = ['All', 'active', 'reviewing', 'archived'];
|
|
189
|
+
return html `
|
|
190
|
+
<div style="display:flex;flex-direction:column;gap:12px;">
|
|
191
|
+
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;">
|
|
192
|
+
<span style="color:#64748b;">Active filters:</span>
|
|
193
|
+
${this.roleFilter !== 'All' ? html `<span style="border-radius:9999px;background:#ecfeff;padding:2px 12px;font-size:12px;font-weight:500;color:#0e7490;">Role: ${this.roleFilter}</span>` : nothing}
|
|
194
|
+
${this.statusFilter !== 'All' ? html `<span style="border-radius:9999px;background:#ecfeff;padding:2px 12px;font-size:12px;font-weight:500;color:#0e7490;">Status: ${DROPDOWN_STATUS_META[this.statusFilter]?.label}</span>` : nothing}
|
|
195
|
+
${this.roleFilter === 'All' && this.statusFilter === 'All' ? html `<span style="color:#94a3b8;">없음</span>` : nothing}
|
|
196
|
+
${this.roleFilter !== 'All' || this.statusFilter !== 'All' ? html `<button style="font-size:12px;color:#64748b;text-decoration:underline;background:none;border:none;cursor:pointer;" @click=${() => { this.roleFilter = 'All'; this.statusFilter = 'All'; }}>초기화</button>` : nothing}
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<sd-table .columns=${DROPDOWN_COLUMNS} .rows=${rows} row-key="id" width="100%">
|
|
200
|
+
<sd-thead>
|
|
201
|
+
<ul slot="dropdown-role" style=${LISTBOX_STYLE}>
|
|
202
|
+
${roleOptions.map(opt => html `
|
|
203
|
+
<li style=${this.itemStyle(this.roleFilter === opt)} @click=${() => { this.roleFilter = opt; }}>${opt}</li>
|
|
204
|
+
`)}
|
|
205
|
+
</ul>
|
|
206
|
+
<ul slot="dropdown-status" style=${LISTBOX_STYLE}>
|
|
207
|
+
${statusOptions.map(opt => html `
|
|
208
|
+
<li style=${this.itemStyle(this.statusFilter === opt)} @click=${() => { this.statusFilter = opt; }}>
|
|
209
|
+
${opt === 'All' ? 'All' : DROPDOWN_STATUS_META[opt].label}
|
|
210
|
+
</li>
|
|
211
|
+
`)}
|
|
212
|
+
</ul>
|
|
213
|
+
</sd-thead>
|
|
214
|
+
<sd-tbody>
|
|
215
|
+
${repeat(rows, row => row.id, row => {
|
|
216
|
+
const meta = DROPDOWN_STATUS_META[row.status];
|
|
217
|
+
return html `
|
|
218
|
+
<sd-tr row-key=${String(row.id)} .row=${row}>
|
|
219
|
+
<sd-td field="status" row-key=${String(row.id)}>
|
|
220
|
+
<span style="display:inline-flex;min-width:88px;align-items:center;justify-content:center;border-radius:9999px;padding:4px 10px;font-size:12px;font-weight:600;background:${meta.bg};color:${meta.color};">
|
|
221
|
+
${meta.label}
|
|
222
|
+
</span>
|
|
223
|
+
</sd-td>
|
|
224
|
+
</sd-tr>
|
|
225
|
+
`;
|
|
226
|
+
})}
|
|
227
|
+
</sd-tbody>
|
|
228
|
+
</sd-table>
|
|
229
|
+
</div>
|
|
230
|
+
`;
|
|
231
|
+
}
|
|
232
|
+
};
|
|
233
|
+
__decorate([
|
|
234
|
+
state()
|
|
235
|
+
], StoryDropdownTable.prototype, "roleFilter", void 0);
|
|
236
|
+
__decorate([
|
|
237
|
+
state()
|
|
238
|
+
], StoryDropdownTable.prototype, "statusFilter", void 0);
|
|
239
|
+
StoryDropdownTable = __decorate([
|
|
240
|
+
customElement('story-dropdown-table')
|
|
241
|
+
], StoryDropdownTable);
|
|
242
|
+
export { StoryDropdownTable };
|
|
@@ -143,6 +143,27 @@ sd-thead * {
|
|
|
143
143
|
background-color: var(--table-header-resizer-color, #CCCCCC);
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
+
.th__dropdown-trigger {
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
flex-shrink: 0;
|
|
151
|
+
width: 16px;
|
|
152
|
+
height: 16px;
|
|
153
|
+
padding: 0;
|
|
154
|
+
border: none;
|
|
155
|
+
background: transparent;
|
|
156
|
+
cursor: pointer;
|
|
157
|
+
color: inherit;
|
|
158
|
+
border-radius: 2px;
|
|
159
|
+
}
|
|
160
|
+
.th__dropdown-trigger sd-icon {
|
|
161
|
+
transition: transform 0.15s ease;
|
|
162
|
+
}
|
|
163
|
+
.th__dropdown-trigger--open sd-icon {
|
|
164
|
+
transform: rotate(180deg);
|
|
165
|
+
}
|
|
166
|
+
|
|
146
167
|
.th__resizer {
|
|
147
168
|
position: absolute;
|
|
148
169
|
top: 50%;
|
|
@@ -31,14 +31,29 @@ export class SdThead {
|
|
|
31
31
|
_stickyHeader = false;
|
|
32
32
|
_scrolledLeft = false;
|
|
33
33
|
_scrolledRight = false;
|
|
34
|
+
dropdownOpenMap = {};
|
|
34
35
|
tableEl = null;
|
|
36
|
+
dropdownRefs = {};
|
|
37
|
+
dropdownThRefs = {};
|
|
38
|
+
dropdownPortals = {};
|
|
35
39
|
handleColumnsChange(newCols) {
|
|
36
40
|
if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
|
|
37
41
|
this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
|
|
38
42
|
}
|
|
39
43
|
}
|
|
44
|
+
disconnectedCallback() {
|
|
45
|
+
const portals = this.dropdownPortals ?? {};
|
|
46
|
+
Object.values(portals).forEach(portal => {
|
|
47
|
+
if (portal?.parentNode != null)
|
|
48
|
+
portal.parentNode.removeChild(portal);
|
|
49
|
+
});
|
|
50
|
+
}
|
|
40
51
|
componentWillLoad() {
|
|
41
52
|
this.syncTableContext();
|
|
53
|
+
this.dropdownOpenMap = this.dropdownOpenMap ?? {};
|
|
54
|
+
this.dropdownRefs = this.dropdownRefs ?? {};
|
|
55
|
+
this.dropdownThRefs = this.dropdownThRefs ?? {};
|
|
56
|
+
this.dropdownPortals = this.dropdownPortals ?? {};
|
|
42
57
|
this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
|
|
43
58
|
this.resolveConfig();
|
|
44
59
|
if ((this.columnWidths ?? []).length === 0) {
|
|
@@ -48,6 +63,36 @@ export class SdThead {
|
|
|
48
63
|
componentDidLoad() {
|
|
49
64
|
this.syncTableContext();
|
|
50
65
|
this.resolveConfig();
|
|
66
|
+
this.initDropdownPortals();
|
|
67
|
+
}
|
|
68
|
+
// sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
|
|
69
|
+
// <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
|
|
70
|
+
initDropdownPortals() {
|
|
71
|
+
const cols = this._columns ?? [];
|
|
72
|
+
const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
|
|
73
|
+
if (hasDropdownCols.length === 0)
|
|
74
|
+
return;
|
|
75
|
+
for (const col of hasDropdownCols) {
|
|
76
|
+
const colName = col.name;
|
|
77
|
+
// 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
|
|
78
|
+
if ((this.dropdownPortals ?? {})[colName] != null)
|
|
79
|
+
continue;
|
|
80
|
+
const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
|
|
81
|
+
if (slotContent == null)
|
|
82
|
+
continue;
|
|
83
|
+
// slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
|
|
84
|
+
slotContent.removeAttribute('slot');
|
|
85
|
+
const portal = document.createElement('sd-portal');
|
|
86
|
+
portal.parentRef = this.dropdownThRefs[colName] ?? null;
|
|
87
|
+
portal.open = false;
|
|
88
|
+
// 첫 open 전까지 포탈 호스트 자체를 숨긴다.
|
|
89
|
+
// moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
|
|
90
|
+
portal.style.display = 'none';
|
|
91
|
+
portal.addEventListener('sdClose', () => this.closeDropdown(colName));
|
|
92
|
+
portal.appendChild(slotContent);
|
|
93
|
+
document.body.appendChild(portal);
|
|
94
|
+
this.dropdownPortals[colName] = portal;
|
|
95
|
+
}
|
|
51
96
|
}
|
|
52
97
|
syncTableContext() {
|
|
53
98
|
// sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
|
|
@@ -90,6 +135,7 @@ export class SdThead {
|
|
|
90
135
|
/** 테이블 설정을 다시 불러옵니다. */
|
|
91
136
|
async refreshConfig() {
|
|
92
137
|
this.resolveConfig();
|
|
138
|
+
this.initDropdownPortals();
|
|
93
139
|
}
|
|
94
140
|
/** 컬럼 너비를 업데이트합니다. */
|
|
95
141
|
async setColumnWidths(widths) {
|
|
@@ -134,6 +180,28 @@ export class SdThead {
|
|
|
134
180
|
handleColumnSort = (col) => {
|
|
135
181
|
this.sdColumnSort.emit({ column: col });
|
|
136
182
|
};
|
|
183
|
+
toggleDropdown(name) {
|
|
184
|
+
const isOpen = this.dropdownOpenMap[name] !== true;
|
|
185
|
+
const portals = this.dropdownPortals ?? {};
|
|
186
|
+
const newMap = { ...this.dropdownOpenMap };
|
|
187
|
+
// _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
|
|
188
|
+
for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
|
|
189
|
+
const shouldBeOpen = col.name === name ? isOpen : false;
|
|
190
|
+
newMap[col.name] = shouldBeOpen;
|
|
191
|
+
const portal = portals[col.name];
|
|
192
|
+
if (portal != null)
|
|
193
|
+
portal.open = shouldBeOpen;
|
|
194
|
+
}
|
|
195
|
+
this.dropdownOpenMap = newMap;
|
|
196
|
+
}
|
|
197
|
+
closeDropdown(name) {
|
|
198
|
+
if (this.dropdownOpenMap[name] !== true)
|
|
199
|
+
return;
|
|
200
|
+
this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
|
|
201
|
+
const portal = (this.dropdownPortals ?? {})[name];
|
|
202
|
+
if (portal != null)
|
|
203
|
+
portal.open = false;
|
|
204
|
+
}
|
|
137
205
|
handleSelectAll(checked) {
|
|
138
206
|
const nextChecked = !!checked;
|
|
139
207
|
const safeRows = Array.isArray(this.rows) ? this.rows : [];
|
|
@@ -150,6 +218,8 @@ export class SdThead {
|
|
|
150
218
|
}
|
|
151
219
|
render() {
|
|
152
220
|
const safeRows = Array.isArray(this.rows) ? this.rows : [];
|
|
221
|
+
const dropdownOpenMap = this.dropdownOpenMap ?? {};
|
|
222
|
+
const dropdownRefs = this.dropdownRefs ?? {};
|
|
153
223
|
const stickyLeftCount = this._stickyColumn.left || 0;
|
|
154
224
|
const stickyRightCount = this._stickyColumn.right || 0;
|
|
155
225
|
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
@@ -171,22 +241,25 @@ export class SdThead {
|
|
|
171
241
|
'--table-border-color': TABLE_BORDER.color,
|
|
172
242
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
173
243
|
};
|
|
174
|
-
return (h(Host, { key: '
|
|
244
|
+
return (h(Host, { key: '947f5e5b0e59e7e6f8a73e4fd44dbfa646cb630a', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '2e0ffbfe9d96528c6e0082d4883fa462a18831d6', class: {
|
|
175
245
|
'thead': true,
|
|
176
246
|
'thead--sticky': this._stickyHeader,
|
|
177
|
-
} }, h("tr", { key: '
|
|
247
|
+
} }, h("tr", { key: '5843a18e1548bc6546e447d4c9213375116af0e9', class: "tr" }, this._selectable && (h("th", { key: '914024ca35874747e39f1819337cd4ad1cbe733d', class: {
|
|
178
248
|
'th': true,
|
|
179
249
|
'th--selected': true,
|
|
180
250
|
'sticky-left': true,
|
|
181
251
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
182
252
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
183
|
-
}, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '
|
|
253
|
+
}, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'e07232f1f5fa02589573ddaae53ebdadbdb97674', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: '08b504cfd4f420e76e91d649eed28c7068517044', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
|
|
184
254
|
'th': true,
|
|
185
255
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
186
256
|
'sticky-left': true,
|
|
187
257
|
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
188
258
|
'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
|
|
189
|
-
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))
|
|
259
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
|
|
260
|
+
'th__dropdown-trigger': true,
|
|
261
|
+
'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
|
|
262
|
+
}, ref: el => { dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
|
|
190
263
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
191
264
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
192
265
|
h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
|
|
@@ -194,7 +267,10 @@ export class SdThead {
|
|
|
194
267
|
return (h("th", { key: col.name, class: {
|
|
195
268
|
th: true,
|
|
196
269
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
197
|
-
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))
|
|
270
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
|
|
271
|
+
'th__dropdown-trigger': true,
|
|
272
|
+
'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
|
|
273
|
+
}, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
|
|
198
274
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
199
275
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
200
276
|
h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
@@ -206,7 +282,10 @@ export class SdThead {
|
|
|
206
282
|
'sticky-right': true,
|
|
207
283
|
'sticky-right-edge': relativeIdx === 0,
|
|
208
284
|
'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
|
|
209
|
-
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))
|
|
285
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
|
|
286
|
+
'th__dropdown-trigger': true,
|
|
287
|
+
'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
|
|
288
|
+
}, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && (
|
|
210
289
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
211
290
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
212
291
|
h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
|
|
@@ -422,7 +501,8 @@ export class SdThead {
|
|
|
422
501
|
"_stickyColumn": {},
|
|
423
502
|
"_stickyHeader": {},
|
|
424
503
|
"_scrolledLeft": {},
|
|
425
|
-
"_scrolledRight": {}
|
|
504
|
+
"_scrolledRight": {},
|
|
505
|
+
"dropdownOpenMap": {}
|
|
426
506
|
};
|
|
427
507
|
}
|
|
428
508
|
static get events() {
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-CEVDmQdt.js";import{c as t}from"./p-DRVnqiWc.js";let n=null;function e(t,n){void 0!==n&&(void 0!==n.position&&t.setAttribute("position",n.position),null!=n.maxVisible&&t.setAttribute("max-visible",n.maxVisible+""),null!=n.defaultDuration&&t.setAttribute("default-duration",n.defaultDuration+""),null!=n.zIndex&&t.setAttribute("z-index",n.zIndex+""))}function i(t){return n&&document.body.contains(n)?(e(n,t),n):(n=document.createElement("sd-toast-container"),e(n,t),document.body.appendChild(n),n)}function o(t){return"function"==typeof t.create?Promise.resolve():new Promise((n=>{const e=()=>{"function"==typeof t.create?n():requestAnimationFrame(e)};requestAnimationFrame(e)}))}const c={async create(t,n,e){const{globalOptions:s,...r}=e??{},c=i(s);return await o(c),c.create({message:t,type:n,...r})},async dismiss(t){if(null!=n)return await o(n),n.dismiss(t)},async dismissAll(){if(null!=n)return await o(n),n.dismissAll()},configure(t){i(t)}},u="sd-modal-container";let d=null;const l={ok:"confirm",cancel:"cancel",close:"close"};class m{modalId;okFn;cancelFn;closeFn;clickFn;submitFn;dismissedFn;containerRef;pendingActions=[];dismissRequested=!1;constructor(t,n){this.modalId=t,this.containerRef=n}onOk(t){return this.okFn=t,this}onCancel(t){return this.cancelFn=t,this}onClose(t){return this.closeFn=t,this}onClick(t){return this.clickFn=t,this}onSubmit(t){return this.submitFn=t,this}onDismissed(t){return this.dismissedFn=t,this}update(t){return this.runOrQueue((()=>{this.containerRef?.update(this.modalId,t)})),this}ok(){return this.dismiss("ok")}cancel(){return this.dismiss("cancel")}close(){return this.dismiss("close")}dismiss(t="close"){if(this.dismissRequested)return this;this.dismissRequested=!0;const n=l[t];return this.runOrQueue((()=>{this.containerRef?.dismissById(this.modalId,n)})),this}_hasSubmit(){return null!=this.submitFn}_triggerOk(){this.okFn?.()}_triggerSubmit(){this.submitFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerClick(){this.clickFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(t){this.modalId=t;const n=[...this.pendingActions];this.pendingActions=[],n.forEach((t=>t()))}_setContainer(t){this.containerRef=t}runOrQueue(t){""===this.modalId||null==this.containerRef?this.pendingActions.push(t):t()}}function h(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}function f(){if(h(),function(){if(!customElements.get(u))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}(),d&&d.isConnected)return d;const t=document.createElement(u);return t.setAttribute("auto-remove",""),document.body.appendChild(t),d=t,t}async function w(t){if(await customElements.whenDefined(u),"function"==typeof t.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}function p(){return new m("")}function y(t,n){const{component:e,persistent:s}=n,i=f(),o={persistent:s};t._setContainer(i),w(i).then((async()=>{const n=await i.createCustom(e,o,t);t._setId(n)}))}const E={confirm(t){const n=f(),e=new m("",n);return w(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},loading(t={}){const n=f(),e=new m("",n);return w(n).then((async()=>{const s=await n.openLoading(t,e);e._setId(s)})),e},create(t){const n=p();return y(n,t),n},configure(n){h(),t(n)}},C="sd-loading-container";let k=null;async function _(t){const n=(function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdLoading] Browser APIs are unavailable. Use `sdLoading` only on the client.")}(),function(){if(!customElements.get(C))throw Error("[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.")}(),k&&document.body.contains(k)||(k=document.createElement(C),document.body.appendChild(k)),k);await customElements.whenDefined(C),t(n)}const A={show(t={}){_((n=>{n.show?.(t)}))},hide(){k&&_((t=>{t.hide?.()}))}};export{y as _attachSdModalWithRef,p as _createSdModalRef,A as sdLoading,E as sdModal,c as sdToast}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as d,H as i,c as r,h as e,t as o}from"./p-
|
|
1
|
+
import{p as d,H as i,c as r,h as e,t as o}from"./p-CEVDmQdt.js";import{d as a}from"./p-Dj1iJxUT.js";const s=d(class extends i{constructor(d){super(),!1!==d&&this.__registerHost(),this.change=r(this,"sdUpdate",7)}value;options=[];direction="vertical";disabled=!1;groupName;change;valueChanged(d){this.value=d}handleRadioChange=d=>{if(this.disabled)return;const i=this.options.find((i=>String(i.value)===String(d))),r=i?i.value:d;this.value=r,this.change?.emit(r)};getGroupClasses(){return["sd-radio-group",`sd-radio-group--${this.direction??"vertical"}`].join(" ")}render(){return e("div",{key:"3a1694daddf5794a1598838c44bc965de2976770",class:this.getGroupClasses(),role:"radiogroup"},this.options.map((d=>e("sd-radio",{key:`radio-${d.value}`,val:String(d.value),value:String(this.value),label:d.label,disabled:this.disabled||!!d.disabled,onSdUpdate:({detail:d})=>this.handleRadioChange(d)}))))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height);display:inline-flex;flex-direction:column}sd-radio .sd-radio__label::before{content:attr(data-label);height:0;font-weight:var(--sd-radio-selected-font-weight);visibility:hidden;overflow:hidden;user-select:none;pointer-events:none}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__label{font-weight:var(--sd-radio-selected-font-weight)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__label{color:var(--sd-radio-label-disabled-color)}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}'}},[512,"sd-radio-group",{value:[1032],options:[1040],direction:[1],disabled:[4],groupName:[1,"group-name"]},void 0,{value:[{valueChanged:0}]}]);function t(){"undefined"!=typeof customElements&&["sd-radio-group","sd-radio"].forEach((d=>{switch(d){case"sd-radio-group":customElements.get(o(d))||customElements.define(o(d),s);break;case"sd-radio":customElements.get(o(d))||a()}}))}export{s as S,t as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as s,h as e,d as o,t as i}from"./p-
|
|
1
|
+
import{p as t,H as s,h as e,d as o,t as i}from"./p-CEVDmQdt.js";import{T as a}from"./p-sZMi_32I.js";const d=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}get el(){return this}rows=[];tableId="";topSpacerHeight=0;bottomSpacerHeight=0;tableEl=null;handleRowsChange(t){const s=t??[];this.tableEl?.setRowCountSync&&this.tableEl.setRowCountSync(s.length)}componentWillLoad(){this.syncTableContext(),this.rows=this.rows??[],this.tableEl?.setRowCountSync&&this.tableEl.setRowCountSync(this.rows.length),this.el.setSpacersSync=(t,s)=>{this.topSpacerHeight=t,this.bottomSpacerHeight=s}}componentDidLoad(){this.syncTableContext()}syncTableContext(){const t=this.el.closest("sd-table"),s=this.el.getRootNode(),e=s instanceof ShadowRoot?s.host:null,o=t??e;this.tableEl=o;const i=o?.getTableIdSync?.(),d=o?.getAttribute(a),c=(null!=i&&""!==i&&"undefined"!==i?i:null)??(null!=d&&""!==d&&"undefined"!==d?d:null)??"";""!==c&&c!==this.tableId&&(this.tableId=c)}render(){return e(o,{key:"0f85168b22221551714f3c75bd12c366538cc5ec",slot:`${this.tableId}-body`},e("tbody",{key:"f9a8528d40c51988cfbca2c349905dafdafce8d3",class:{tbody:!0}},[this.topSpacerHeight>0&&e("tr",{key:"spacer-top",class:"tbody__spacer",style:{height:`${this.topSpacerHeight}px`,display:"block"}}),e("slot",{key:"7ecfe2f730b4c909d394fdee2d9aa015c5410cb4"}),this.bottomSpacerHeight>0&&e("tr",{key:"spacer-bottom",class:"tbody__spacer",style:{height:`${this.bottomSpacerHeight}px`,display:"block"}})]))}static get watchers(){return{rows:[{handleRowsChange:0}]}}static get style(){return":host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}"}},[769,"sd-tbody",{rows:[16],tableId:[32],topSpacerHeight:[32],bottomSpacerHeight:[32]},void 0,{rows:[{handleRowsChange:0}]}]);function c(){"undefined"!=typeof customElements&&["sd-tbody"].forEach((t=>{"sd-tbody"===t&&(customElements.get(i(t))||customElements.define(i(t),d))}))}export{d as S,c as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{h as t}from"./p-CEVDmQdt.js";const o=o=>t("svg",{width:"16",height:"12",viewBox:"0 0 16 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o},t("path",{d:"M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z",fill:"currentColor"}));export{o as T}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,c as s,h as i,t as o}from"./p-
|
|
1
|
+
import{p as t,H as e,c as s,h as i,t as o}from"./p-CEVDmQdt.js";import{n as r}from"./p-CCwNgVmC.js";import{d as h}from"./p-C3rOud8J.js";import{d as l}from"./p-D3dq5pt5.js";import{d as a}from"./p-BFMUpKa2.js";import{d}from"./p-BJMpxQSk.js";import{d as n}from"./p-BdFwmTyS.js";import{d as c}from"./p-BnhzUsGP.js";import{d as p}from"./p-ChwRSZ6R.js";import{d as u}from"./p-BwgUEhOa.js";import{d as m}from"./p-DfKZyde8.js";import{d as g}from"./p-IMWw_SJ1.js";import{d as b}from"./p-iORPryb0.js";import{d as f}from"./p-CGJ1L8_Y.js";import{d as w}from"./p-CpBPNHYe.js";const S=t(class t extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.update=s(this,"sdUpdate",7),this.dropDownShow=s(this,"sdDropDownShow",7)}static VIEWPORT_PADDING=20;static PORTAL_OFFSET_Y=4;static CLOSE_ANIMATION_DURATION=150;get el(){return this}type="default";value=null;options=[];placeholder="선택";dropdownWidth="";maxDropdownWidth="640px";dropdownHeight="260px";disabled=!1;label="";labelWidth="";addonLabel="";addonAlign="start";error=!1;hint="";errorMessage="";rules=[];icon=void 0;labelTooltip="";labelTooltipProps=null;emitValue=!1;width="";useSearch=!1;allSelectedLabel="전체";useSelectAll=!1;isOpen=!1;isAnimatingOut=!1;triggerWidth="200px";resolvedDropdownHeight="260px";resolvedMaxDropdownWidth="640px";focused=!1;hovered=!1;update;dropDownShow;async sdFocus(){this.disabled||await(this.triggerComponentRef?.sdFocus())}async sdOpen(){await new Promise((t=>setTimeout(t,0))),this.disabled||this.isOpen||(this.prepareDropdownGeometry(),this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.isAnimatingOut=!1,this.isOpen=!0)}triggerRef;triggerComponentRef;closeAnimationTimer;name=r();triggerHasFocus=!1;watchIsOpen(t){this.syncFocusedState(t),this.dropDownShow.emit({isOpen:t})}get isMulti(){return"multi"===this.type||"multi_depth"===this.type}get displayText(){if(this.isMulti){if(!Array.isArray(this.value)||0===this.value.length)return"";const t=this.getNonDisabledLeaves(this.options),e=this.getSelectedOptions();if(t.length>0&&t.every((t=>e.some((e=>e.value===t.value)))))return this.allSelectedLabel??"전체";const s=this.flattenOptions(this.options);return this.value.map((t=>{if(null!=t&&"object"==typeof t){const e=t;return e.label??s.find((t=>t.value===e.value))?.label??""}return s.find((e=>e.value===t))?.label??""})).filter(Boolean).join(", ")}if(null==this.value)return"";if(!this.emitValue&&"object"==typeof this.value&&!Array.isArray(this.value))return this.value.label??"";const t=this.flattenOptions(this.options);return t.find((t=>t.value===this.value))?.label??""}flattenOptions(t){return t.flatMap((t=>t.children?this.flattenOptions(t.children):[t]))}getNonDisabledLeaves(t){return t.flatMap((t=>t.disabled?[]:t.children?this.getNonDisabledLeaves(t.children):[t]))}getSelectedOptions(){const t=this.value;return null!=t&&Array.isArray(t)?this.emitValue?t.map((t=>this.findOriginalOption(t,this.options))).filter((t=>!!t)):t:[]}toMultiValue(t){return this.emitValue?t.map((t=>t.value)):t}parsePixelValue(t,e){const s=Number.parseFloat(t);return Number.isFinite(s)?s:e}updateDropdownViewportConstraints(){if(!this.triggerRef)return;const e=this.triggerRef.getBoundingClientRect(),s=t.VIEWPORT_PADDING,i=t.PORTAL_OFFSET_Y,o=this.parsePixelValue(this.dropdownHeight,260),r=this.parsePixelValue(this.maxDropdownWidth,640),h=Math.max(window.innerHeight-e.bottom-s-i,0),l=Math.max(e.top-s-i,0),a=Math.max(h,l),d=Math.max(window.innerWidth-2*s,0);this.resolvedDropdownHeight=`${Math.min(o,a)}px`,this.resolvedMaxDropdownWidth=`${Math.min(r,d)}px`}handleViewportResize=()=>{this.isOpen&&this.updateDropdownViewportConstraints()};findOriginalOption(t,e){for(const s of e){if(s.value===t)return s;if(s.children){const e=this.findOriginalOption(t,s.children);if(e)return e}}}closeDropdown(){this.isOpen&&(this.isOpen=!1,this.isAnimatingOut=!0,this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.closeAnimationTimer=setTimeout((()=>{this.isAnimatingOut=!1}),t.CLOSE_ANIMATION_DURATION))}prepareDropdownGeometry(){this.triggerRef&&(this.triggerWidth=`${this.triggerRef.offsetWidth}px`),this.updateDropdownViewportConstraints()}syncFocusedState(t=this.isOpen){this.focused=t||this.triggerHasFocus}handleTriggerFocus=()=>{this.triggerHasFocus=!0,this.syncFocusedState()};handleTriggerBlur=()=>{this.triggerHasFocus=!1,this.syncFocusedState()};handleTriggerClick=()=>{this.isOpen?this.closeDropdown():(this.prepareDropdownGeometry(),this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.isAnimatingOut=!1,this.isOpen=!0)};emitUpdate(t){this.update.emit(t)}handleOptionSelect=t=>{const{option:e,leaves:s}=t;if(this.isMulti)this.handleMultiSelect(e,s);else{this.closeDropdown(),this.value=this.emitValue?e.value:e;const t=this.value;requestAnimationFrame((()=>{this.emitUpdate(t)}))}};handleMultiSelect(t,e){const s=this.getSelectedOptions();let i;if(t.children)if(e.every((t=>s.some((e=>e.value===t.value))))){const t=new Set(e.map((t=>t.value)));i=s.filter((e=>!t.has(e.value)))}else{const t=new Set(s.map((t=>t.value))),o=e.filter((e=>!t.has(e.value)));i=[...s,...o]}else i=s.some((e=>e.value===t.value))?s.filter((e=>e.value!==t.value)):[...s,t];this.value=this.toMultiValue(i),this.emitUpdate(this.value)}connectedCallback(){window.addEventListener("resize",this.handleViewportResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleViewportResize),this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer)}render(){const e={open:this.isOpen,parentRef:this.triggerRef,viewportPadding:t.VIEWPORT_PADDING,onSdClose:()=>{this.closeDropdown()}};return i("sd-field",{key:"3387dc16a6f54bfae652338c71c4c0e1553828c9",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:()=>{this.hovered=!0},onMouseLeave:()=>{this.hovered=!1}},i("div",{key:"124325f8f6882a3c9ee1a1795ee969f13d67dfe2",class:"sd-select",ref:t=>{this.triggerRef=t}},i("sd-select-trigger",{key:"2e0e44ae666282d3931f9889650a7999929a312b",ref:t=>{this.triggerComponentRef=t},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)&&i("sd-portal",{key:"b6e97e43c5ea3a06fbb2976dab52d4f544822ae0",...e},i("sd-select-listbox",{key:"3d8a01c54667149507db2757d81813d2f285b32d",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:t=>this.handleOptionSelect(t.detail)})))}static get watchers(){return{isOpen:[{watchIsOpen:0}]}}static get style(){return"sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}"}},[512,"sd-select",{type:[1],value:[1032],options:[16],placeholder:[1],dropdownWidth:[1,"dropdown-width"],maxDropdownWidth:[1,"max-dropdown-width"],dropdownHeight:[1,"dropdown-height"],disabled:[4],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],error:[1028],hint:[1],errorMessage:[1,"error-message"],rules:[16],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],emitValue:[4,"emit-value"],width:[8],useSearch:[4,"use-search"],allSelectedLabel:[1,"all-selected-label"],useSelectAll:[4,"use-select-all"],name:[1],isOpen:[32],isAnimatingOut:[32],triggerWidth:[32],resolvedDropdownHeight:[32],resolvedMaxDropdownWidth:[32],focused:[32],hovered:[32],sdFocus:[64],sdOpen:[64]},void 0,{isOpen:[{watchIsOpen:0}]}]);function O(){"undefined"!=typeof customElements&&["sd-select","sd-button","sd-checkbox","sd-field","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-select-list-item","sd-select-list-item-search","sd-select-listbox","sd-select-trigger","sd-tag","sd-tooltip"].forEach((t=>{switch(t){case"sd-select":customElements.get(o(t))||customElements.define(o(t),S);break;case"sd-button":customElements.get(o(t))||h();break;case"sd-checkbox":customElements.get(o(t))||l();break;case"sd-field":customElements.get(o(t))||a();break;case"sd-floating-portal":customElements.get(o(t))||d();break;case"sd-ghost-button":customElements.get(o(t))||n();break;case"sd-icon":customElements.get(o(t))||c();break;case"sd-portal":customElements.get(o(t))||p();break;case"sd-select-list-item":customElements.get(o(t))||u();break;case"sd-select-list-item-search":customElements.get(o(t))||m();break;case"sd-select-listbox":customElements.get(o(t))||g();break;case"sd-select-trigger":customElements.get(o(t))||b();break;case"sd-tag":customElements.get(o(t))||f();break;case"sd-tooltip":customElements.get(o(t))||w()}}))}export{S,O as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as d,h as s,t as i}from"./p-CCCwPJ5p.js";import{f as l}from"./p-BOJJ_sQS.js";import{d as t}from"./p-CTxZT3Je.js";import{d as o}from"./p-Cj_1bYZF.js";import{d as r}from"./p-YpyfqzoP.js";import{d as a}from"./p-BVlg0BoC.js";import{d as f}from"./p-S2-XqY2R.js";import{d as n}from"./p-BQQC-6k4.js";import{d as h}from"./p-Dz7VXmIA.js";const c={start:"flex-start",center:"center",end:"flex-end"},p=l.field.label.sm,b=l.field.label.md,m={sm:{height:p.height,gap:p.gap,icon:p.icon,fontSize:p.typography.fontSize,lineHeight:p.typography.lineHeight,fontWeight:p.typography.fontWeight},md:{height:b.height,gap:b.gap,icon:b.icon,fontSize:b.typography.fontSize,lineHeight:b.typography.lineHeight,fontWeight:b.typography.fontWeight}},g=["sd-input","sd-barcode-input","sd-textarea","sd-number-input","sd-select","sd-file-picker","sd-date-picker","sd-date-range-picker","sd-chip-input"],_=e(class extends d{constructor(e){super(),!1!==e&&this.__registerHost()}get el(){return this}name="";rules=[];error=!1;disabled=!1;readonly=!1;hovered=!1;focused=!1;status;hint="";errorMessage="";width="";size="sm";label="";labelWidth="";addonLabel="";addonAlign="start";icon=void 0;labelTooltip="";labelTooltipProps=null;errorMsg="";hostElement=null;get value(){return this.hostElement?.value??null}get fieldStatus(){let e="";return this.disabled?(e="disabled",`sd-field--${e}`):this.readonly?(e="readonly",`sd-field--${e}`):this.focused?(e="focus",`sd-field--${e}`):(this.hovered&&(e="hover"),void 0!==this.status&&(e=this.status),this.error&&(e="error"),""!==e?`sd-field--${e}`:"")}componentDidLoad(){this.hostElement=this.findHostElement(),this.registerToForm()}disconnectedCallback(){this.unregisterFromForm()}findHostElement(){for(const e of g){const d=this.el.closest(e);if(d&&"value"in d)return d}return null}registerToForm(){const e=this.el.closest("sd-form");e&&"function"==typeof e.componentOnReady&&e.componentOnReady().then((e=>{e.sdRegisterField(this)}))}unregisterFromForm(){if(""===this.name)return;const e=this.el.closest("sd-form");e?.componentOnReady().then((e=>{e.sdUnregisterField(this)}))}async sdValidate(){if(!this.rules||0===this.rules.length)return!0;for(const e of this.rules){const d=e(this.value??"");if(!0!==d)return this.setError(!0,d),!1}return this.setError(!1,""),!0}async sdReset(){this.hostElement&&(this.hostElement.value=null),this.setError(!1,"")}async sdResetValidation(){this.setError(!1,"")}async sdFocus(){this.hostElement?.focus?.(),this.hostElement?.scrollIntoView({behavior:"smooth",block:"center"})}setError(e,d){this.errorMsg=d,this.hostElement&&(this.hostElement.error=e)}render(){const e=this.addonLabel,d=l.field.addonLabel,i=this.size in m?this.size:"sm",t=m[i],o={"--sd-field-wrapper-height":`var(--sd-system-size-field-${i}-height)`,"--sd-field-control-radius":`var(--sd-system-radius-field-${i})`,"--sd-field-label-margin-right":`var(--sd-system-space-field-${i}-gap)`},r={"--sd-field-error-message-color":l.field.errorMessage.color,"--sd-field-error-message-font-size":`${l.field.errorMessage.typography.fontSize}px`,"--sd-field-error-message-line-height":`${l.field.errorMessage.typography.lineHeight}px`,"--sd-field-hint-color":l.field.hint.color,"--sd-field-hint-font-size":`${l.field.hint.typography.fontSize}px`,"--sd-field-hint-line-height":`${l.field.hint.typography.lineHeight}px`,"--sd-field-message-gap":`${l.field.contents.gap}px`},a=""!==this.label?{"--sd-field-label-height":`${t.height}px`,"--sd-field-label-gap":`${t.gap}px`,"--sd-field-label-font-size":`${t.fontSize}px`,"--sd-field-label-line-height":`${t.lineHeight}px`,"--sd-field-label-font-weight":t.fontWeight,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-label-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{},f=""!==e?{"--sd-field-addon-padding-x":`${d.paddingX}px`,"--sd-field-addon-font-size":`${d.typography.fontSize}px`,"--sd-field-addon-line-height":`${d.typography.lineHeight}px`,"--sd-field-addon-font-weight":d.typography.fontWeight,"--sd-field-addon-bg":d.bg,"--sd-field-addon-border-color":this.disabled?d.border.disabled:d.border.default,"--sd-field-addon-gap":`${d.gap}px`,"--sd-field-addon-border-width":`${d.border.width}px`,"--sd-field-addon-justify":c[this.addonAlign]??c.start,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-addon-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{};return s("div",{key:"baf943d77385c9c02e2fe1d938f9622bd858129c",class:{"sd-field":!0,"sd-field--has-label":""!==this.label,"sd-field--has-addon":""!==e,[this.fieldStatus]:""!==this.fieldStatus},style:{...o,...a,...f,...r}},s("div",{key:"f5f204929ef4a4e1a260d7609bc00d9a1fe998f4",class:"sd-field__wrapper"},this.renderLabel(this.label),s("div",{key:"eff02956e5aae08691b2850bb0d1978865a446f9",class:"sd-field__main",style:""!==this.width&&0!==this.width?{width:"number"==typeof this.width?`${this.width}px`:this.width,flex:"none"}:{}},s("div",{key:"bf00b81dbb3d36a8a8ddf4919c9ec3383a1f3f14",class:{"sd-field__control":!0,"sd-field__control--has-addon":""!==e}},e&&s("div",{key:"4cef1308de0b709d5924ff7a02ee5bd3b78c1502",class:"sd-field__addon"},this.icon&&s("sd-icon",{key:"7fdfca555d80f5409082c43967224fd8108a6f29",name:this.icon.name,size:this.icon.size??Number(m[this.size in m?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate}),e),s("slot",{key:"c523813390db6f6f4acce3ffb8377820ffb95fad"})),""!==this.errorMsg||""!==this.errorMessage?s("div",{class:"sd-field__error-message"},""!==this.errorMsg?this.errorMsg:this.errorMessage):""!==this.hint&&s("div",{class:"sd-field__hint"},this.hint))))}renderLabel(e){return null==e||""===e?null:s("label",{class:"sd-field__label"},this.icon&&s("sd-icon",{name:this.icon.name,size:this.icon.size??Number(m[this.size in m?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate,class:"sd-field__label__icon"}),s("div",{class:"sd-field__label__text"},e),this.labelTooltip&&s("sd-tooltip",{class:"sd-field__label__tooltip",...this.labelTooltipProps},this.labelTooltip))}static get style(){return"sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}"}},[772,"sd-field",{name:[1],rules:[16],error:[1028],disabled:[1028],readonly:[1028],hovered:[1028],focused:[1028],status:[1],hint:[1],errorMessage:[1,"error-message"],width:[8],size:[513],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],errorMsg:[32],sdValidate:[64],sdReset:[64],sdResetValidation:[64],sdFocus:[64]}]);function u(){"undefined"!=typeof customElements&&["sd-field","sd-button","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tag","sd-tooltip"].forEach((e=>{switch(e){case"sd-field":customElements.get(i(e))||customElements.define(i(e),_);break;case"sd-button":customElements.get(i(e))||t();break;case"sd-floating-portal":customElements.get(i(e))||o();break;case"sd-ghost-button":customElements.get(i(e))||r();break;case"sd-icon":customElements.get(i(e))||a();break;case"sd-portal":customElements.get(i(e))||f();break;case"sd-tag":customElements.get(i(e))||n();break;case"sd-tooltip":customElements.get(i(e))||h()}}))}export{_ as S,u as d}
|
|
1
|
+
import{p as e,H as d,h as s,t as i}from"./p-CEVDmQdt.js";import{f as l}from"./p-BOJJ_sQS.js";import{d as t}from"./p-C3rOud8J.js";import{d as r}from"./p-BJMpxQSk.js";import{d as o}from"./p-BdFwmTyS.js";import{d as a}from"./p-BnhzUsGP.js";import{d as f}from"./p-ChwRSZ6R.js";import{d as n}from"./p-CGJ1L8_Y.js";import{d as h}from"./p-CpBPNHYe.js";const c={start:"flex-start",center:"center",end:"flex-end"},p=l.field.label.sm,b=l.field.label.md,m={sm:{height:p.height,gap:p.gap,icon:p.icon,fontSize:p.typography.fontSize,lineHeight:p.typography.lineHeight,fontWeight:p.typography.fontWeight},md:{height:b.height,gap:b.gap,icon:b.icon,fontSize:b.typography.fontSize,lineHeight:b.typography.lineHeight,fontWeight:b.typography.fontWeight}},g=["sd-input","sd-barcode-input","sd-textarea","sd-number-input","sd-select","sd-file-picker","sd-date-picker","sd-date-range-picker","sd-chip-input"],_=e(class extends d{constructor(e){super(),!1!==e&&this.__registerHost()}get el(){return this}name="";rules=[];error=!1;disabled=!1;readonly=!1;hovered=!1;focused=!1;status;hint="";errorMessage="";width="";size="sm";label="";labelWidth="";addonLabel="";addonAlign="start";icon=void 0;labelTooltip="";labelTooltipProps=null;errorMsg="";hostElement=null;get value(){return this.hostElement?.value??null}get fieldStatus(){let e="";return this.disabled?(e="disabled",`sd-field--${e}`):this.readonly?(e="readonly",`sd-field--${e}`):this.focused?(e="focus",`sd-field--${e}`):(this.hovered&&(e="hover"),void 0!==this.status&&(e=this.status),this.error&&(e="error"),""!==e?`sd-field--${e}`:"")}componentDidLoad(){this.hostElement=this.findHostElement(),this.registerToForm()}disconnectedCallback(){this.unregisterFromForm()}findHostElement(){for(const e of g){const d=this.el.closest(e);if(d&&"value"in d)return d}return null}registerToForm(){const e=this.el.closest("sd-form");e&&"function"==typeof e.componentOnReady&&e.componentOnReady().then((e=>{e.sdRegisterField(this)}))}unregisterFromForm(){if(""===this.name)return;const e=this.el.closest("sd-form");e?.componentOnReady().then((e=>{e.sdUnregisterField(this)}))}async sdValidate(){if(!this.rules||0===this.rules.length)return!0;for(const e of this.rules){const d=e(this.value??"");if(!0!==d)return this.setError(!0,d),!1}return this.setError(!1,""),!0}async sdReset(){this.hostElement&&(this.hostElement.value=null),this.setError(!1,"")}async sdResetValidation(){this.setError(!1,"")}async sdFocus(){this.hostElement?.focus?.(),this.hostElement?.scrollIntoView({behavior:"smooth",block:"center"})}setError(e,d){this.errorMsg=d,this.hostElement&&(this.hostElement.error=e)}render(){const e=this.addonLabel,d=l.field.addonLabel,i=this.size in m?this.size:"sm",t=m[i],r={"--sd-field-wrapper-height":`var(--sd-system-size-field-${i}-height)`,"--sd-field-control-radius":`var(--sd-system-radius-field-${i})`,"--sd-field-label-margin-right":`var(--sd-system-space-field-${i}-gap)`},o={"--sd-field-error-message-color":l.field.errorMessage.color,"--sd-field-error-message-font-size":`${l.field.errorMessage.typography.fontSize}px`,"--sd-field-error-message-line-height":`${l.field.errorMessage.typography.lineHeight}px`,"--sd-field-hint-color":l.field.hint.color,"--sd-field-hint-font-size":`${l.field.hint.typography.fontSize}px`,"--sd-field-hint-line-height":`${l.field.hint.typography.lineHeight}px`,"--sd-field-message-gap":`${l.field.contents.gap}px`},a=""!==this.label?{"--sd-field-label-height":`${t.height}px`,"--sd-field-label-gap":`${t.gap}px`,"--sd-field-label-font-size":`${t.fontSize}px`,"--sd-field-label-line-height":`${t.lineHeight}px`,"--sd-field-label-font-weight":t.fontWeight,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-label-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{},f=""!==e?{"--sd-field-addon-padding-x":`${d.paddingX}px`,"--sd-field-addon-font-size":`${d.typography.fontSize}px`,"--sd-field-addon-line-height":`${d.typography.lineHeight}px`,"--sd-field-addon-font-weight":d.typography.fontWeight,"--sd-field-addon-bg":d.bg,"--sd-field-addon-border-color":this.disabled?d.border.disabled:d.border.default,"--sd-field-addon-gap":`${d.gap}px`,"--sd-field-addon-border-width":`${d.border.width}px`,"--sd-field-addon-justify":c[this.addonAlign]??c.start,...""!==this.labelWidth&&0!==this.labelWidth?{"--sd-field-addon-width":"number"==typeof this.labelWidth?`${this.labelWidth}px`:this.labelWidth}:{}}:{};return s("div",{key:"baf943d77385c9c02e2fe1d938f9622bd858129c",class:{"sd-field":!0,"sd-field--has-label":""!==this.label,"sd-field--has-addon":""!==e,[this.fieldStatus]:""!==this.fieldStatus},style:{...r,...a,...f,...o}},s("div",{key:"f5f204929ef4a4e1a260d7609bc00d9a1fe998f4",class:"sd-field__wrapper"},this.renderLabel(this.label),s("div",{key:"eff02956e5aae08691b2850bb0d1978865a446f9",class:"sd-field__main",style:""!==this.width&&0!==this.width?{width:"number"==typeof this.width?`${this.width}px`:this.width,flex:"none"}:{}},s("div",{key:"bf00b81dbb3d36a8a8ddf4919c9ec3383a1f3f14",class:{"sd-field__control":!0,"sd-field__control--has-addon":""!==e}},e&&s("div",{key:"4cef1308de0b709d5924ff7a02ee5bd3b78c1502",class:"sd-field__addon"},this.icon&&s("sd-icon",{key:"7fdfca555d80f5409082c43967224fd8108a6f29",name:this.icon.name,size:this.icon.size??Number(m[this.size in m?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate}),e),s("slot",{key:"c523813390db6f6f4acce3ffb8377820ffb95fad"})),""!==this.errorMsg||""!==this.errorMessage?s("div",{class:"sd-field__error-message"},""!==this.errorMsg?this.errorMsg:this.errorMessage):""!==this.hint&&s("div",{class:"sd-field__hint"},this.hint))))}renderLabel(e){return null==e||""===e?null:s("label",{class:"sd-field__label"},this.icon&&s("sd-icon",{name:this.icon.name,size:this.icon.size??Number(m[this.size in m?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate,class:"sd-field__label__icon"}),s("div",{class:"sd-field__label__text"},e),this.labelTooltip&&s("sd-tooltip",{class:"sd-field__label__tooltip",...this.labelTooltipProps},this.labelTooltip))}static get style(){return"sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}"}},[772,"sd-field",{name:[1],rules:[16],error:[1028],disabled:[1028],readonly:[1028],hovered:[1028],focused:[1028],status:[1],hint:[1],errorMessage:[1,"error-message"],width:[8],size:[513],label:[1],labelWidth:[8,"label-width"],addonLabel:[1,"addon-label"],addonAlign:[1,"addon-align"],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],errorMsg:[32],sdValidate:[64],sdReset:[64],sdResetValidation:[64],sdFocus:[64]}]);function u(){"undefined"!=typeof customElements&&["sd-field","sd-button","sd-floating-portal","sd-ghost-button","sd-icon","sd-portal","sd-tag","sd-tooltip"].forEach((e=>{switch(e){case"sd-field":customElements.get(i(e))||customElements.define(i(e),_);break;case"sd-button":customElements.get(i(e))||t();break;case"sd-floating-portal":customElements.get(i(e))||r();break;case"sd-ghost-button":customElements.get(i(e))||o();break;case"sd-icon":customElements.get(i(e))||a();break;case"sd-portal":customElements.get(i(e))||f();break;case"sd-tag":customElements.get(i(e))||n();break;case"sd-tooltip":customElements.get(i(e))||h()}}))}export{_ as S,u as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as n,c as o,h as e,t as i}from"./p-
|
|
1
|
+
import{p as t,H as n,c as o,h as e,t as i}from"./p-CEVDmQdt.js";const a=t(class t extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=o(this,"sdClose",7)}get el(){return this}to="body";parentRef=null;offset=[0,0];zIndex=996;placement="bottom";open=!1;close;container;wrapper;rafId;isInsideClick=!1;resizeObserver;mutationObserver;scrollHandler=()=>this.updatePosition();static ARROW_SIZE=11.2;componentDidLoad(){this.container=this.resolveContainer(),this.createWrapper(),this.moveSlotContent(),requestAnimationFrame((()=>{this.updatePosition(),this.wrapper&&(this.wrapper.style.visibility="visible")})),this.observeParent(),window.addEventListener("scroll",this.scrollHandler,!0)}componentDidRender(){this.wrapper&&(this.open?(this.wrapper.style.display="block",requestAnimationFrame((()=>{this.updatePosition(),this.wrapper&&(this.wrapper.style.visibility="visible")}))):(this.wrapper.style.display="none",this.wrapper.style.visibility="hidden"))}disconnectedCallback(){void 0!==this.rafId&&cancelAnimationFrame(this.rafId),window.removeEventListener("scroll",this.scrollHandler,!0),this.unobserveParent(),this.wrapper?.remove()}resolveContainer(){const t="string"==typeof this.to?document.querySelector(this.to):this.to;return t instanceof n?t:document.body}resolveZIndex(){const t=this.zIndex??996,o=this.parentRef?.closest(".sd-modal-container__layer");if(!o)return t;const e=o.closest(".sd-modal-container"),i=e instanceof n?parseInt(getComputedStyle(e).zIndex,10):NaN,a=Number.isFinite(i)?i:997;return Math.max(t,a+1)}createWrapper(){this.wrapper=document.createElement("div"),Object.assign(this.wrapper.style,{position:"fixed",zIndex:this.resolveZIndex().toString(),transition:"opacity 0.4s",top:"-9999px",left:"-9999px"}),this.container.appendChild(this.wrapper)}moveSlotContent(){this.wrapper&&Array.from(this.el.childNodes).filter((t=>t.nodeType!==Node.COMMENT_NODE)).forEach((t=>this.wrapper.appendChild(t)))}updatePosition(){void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{if(!this.parentRef||!this.wrapper)return;const n=this.parentRef.getBoundingClientRect();if(0===n.width&&0===n.height)return;const[o,e]=this.offset??[0,0],i=t.ARROW_SIZE;let a=0,s=0;switch(this.placement??"bottom"){case"top":a=n.top-this.wrapper.offsetHeight+e-i,s=n.left+n.width/2-this.wrapper.offsetWidth/2+o;break;case"bottom":a=n.bottom+e+i,s=n.left+n.width/2-this.wrapper.offsetWidth/2+o;break;case"left":a=n.top+n.height/2-this.wrapper.offsetHeight/2+e,s=n.left-this.wrapper.offsetWidth-o-i;break;case"right":a=n.top+n.height/2-this.wrapper.offsetHeight/2+e,s=n.right+o+i}Object.assign(this.wrapper.style,{top:`${a}px`,left:`${s}px`})}))}observeParent(){this.parentRef&&(this.resizeObserver=new ResizeObserver((()=>this.updatePosition())),this.resizeObserver.observe(this.parentRef),this.mutationObserver=new MutationObserver((()=>this.updatePosition())),this.mutationObserver.observe(document.body,{childList:!0,subtree:!0}))}unobserveParent(){this.resizeObserver?.disconnect(),this.mutationObserver?.disconnect()}handleMouseDown(t){this.isInsideClick=!!(this.wrapper&&this.wrapper.contains(t.target)||this.parentRef&&this.parentRef.contains(t.target))}handleWindowClick(t){this.isInsideClick?this.isInsideClick=!1:this.wrapper?.contains(t.target)||this.close.emit()}handleKeydown(t){"Escape"===t.key&&this.close.emit()}render(){return e("slot",{key:"ee2a502ac1c924abb9be9fae19b4450659515c15"})}static get style(){return".sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu--has-close .sd-floating-menu__content{padding-right:28px}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}"}},[772,"sd-floating-portal",{to:[1],parentRef:[16],offset:[16],zIndex:[2,"z-index"],placement:[1],open:[4]},[[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"],[8,"keydown","handleKeydown"]]]);function s(){"undefined"!=typeof customElements&&["sd-floating-portal"].forEach((t=>{"sd-floating-portal"===t&&(customElements.get(i(t))||customElements.define(i(t),a))}))}export{a as S,s as d}
|