@sellmate/design-system 1.0.69 → 1.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-action-modal.cjs.entry.js +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +1 -1
- package/dist/cjs/sd-barcode-input.cjs.entry.js +1 -1
- package/dist/cjs/sd-button-v2_2.cjs.entry.js +3 -3
- package/dist/cjs/sd-button_4.cjs.entry.js +10 -5
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- 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-calendar.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-picker-trigger.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +1 -1
- package/dist/cjs/sd-dropdown-button.cjs.entry.js +3 -3
- package/dist/cjs/sd-ghost-button.cjs.entry.js +2 -2
- package/dist/cjs/sd-input_2.cjs.entry.js +2 -2
- package/dist/cjs/sd-loading-container.cjs.entry.js +2 -2
- package/dist/cjs/sd-number-input.cjs.entry.js +3 -3
- package/dist/cjs/sd-pagination_2.cjs.entry.js +61 -30
- package/dist/cjs/sd-popover.cjs.entry.js +23 -23
- package/dist/cjs/sd-portal.cjs.entry.js +1 -1
- package/dist/cjs/sd-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/sd-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/sd-radio.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-v2-list-item_4.cjs.entry.js +28 -4
- package/dist/cjs/sd-select.cjs.entry.js +1 -1
- package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
- package/dist/cjs/table-test.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
- package/dist/collection/components/sd-button-v2/sd-button-v2.js +3 -3
- 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-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-calendar/sd-date-picker-calendar.js +1 -1
- 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-dropdown-button/sd-dropdown-button.js +3 -3
- package/dist/collection/components/sd-field/sd-field.js +4 -4
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +12 -1
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +2 -2
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
- package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
- package/dist/collection/components/sd-number-input/sd-number-input.js +3 -3
- package/dist/collection/components/sd-pagination/sd-pagination.css +0 -1
- package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
- package/dist/collection/components/sd-popover/sd-popover.js +49 -53
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-radio/sd-radio.js +1 -1
- package/dist/collection/components/sd-radio-button/sd-radio-button.js +1 -1
- package/dist/collection/components/sd-radio-group/sd-radio-group.js +1 -1
- package/dist/collection/components/sd-select/sd-select.js +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +1 -1
- package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js +8 -2
- package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js +69 -2
- package/dist/collection/components/sd-select-v2/sd-select-v2.js +96 -27
- package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
- package/dist/collection/components/table-test/table-test.js +1 -1
- package/dist/components/{p-z9MoRjYX.js → p-9HhG23Vy.js} +1 -1
- package/dist/components/{p-CEnwrYaY.js → p-B8XV0vD8.js} +1 -1
- package/dist/components/{p-DlkxQ9Jn.js → p-BLxwBD2G.js} +1 -1
- package/dist/components/{p-B1j9ZWLJ.js → p-BM9Fr6OX.js} +1 -1
- package/dist/components/{p-DoSEK0_q.js → p-BfG60atH.js} +1 -1
- package/dist/components/p-CU7IOtCw.js +1 -0
- package/dist/components/{p-DPCj-bFr.js → p-Cc3bTBBn.js} +1 -1
- package/dist/components/{p-CS62OEXf.js → p-CeHRQb7A.js} +1 -1
- package/dist/components/{p-D21iKAp7.js → p-CoOl8zeX.js} +1 -1
- package/dist/components/{p-D99-lhhk.js → p-CscUxW9p.js} +1 -1
- package/dist/components/p-CuiFB2yQ.js +1 -0
- package/dist/components/p-D1SaZEYh.js +1 -0
- package/dist/components/{p-BJshZele.js → p-DM5vbfxB.js} +1 -1
- package/dist/components/{p-T5BGXHZg.js → p-DWJ3CIKO.js} +1 -1
- package/dist/components/{p-BFd54Imz.js → p-D_XZAh9v.js} +1 -1
- package/dist/components/{p-CtrDZYN5.js → p-DboqT9Do.js} +1 -1
- package/dist/components/p-DkHyt3Dz.js +1 -0
- package/dist/components/{p-DIro-Wat.js → p-Dmk-f7qn.js} +1 -1
- package/dist/components/p-DpBU4AWy.js +1 -0
- package/dist/components/{p-BaHpEtbz.js → p-W6QlwGnP.js} +1 -1
- package/dist/components/p-r8kAA1Su.js +1 -0
- package/dist/components/sd-action-modal.js +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-button-v2.js +1 -1
- package/dist/components/sd-card.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-calendar.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-dropdown-button.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-ghost-button.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-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-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-dropdown.js +1 -1
- package/dist/components/sd-select-group.js +1 -1
- package/dist/components/sd-select-multiple-group.js +1 -1
- package/dist/components/sd-select-multiple.js +1 -1
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select-v2-listbox.js +1 -1
- package/dist/components/sd-select-v2-trigger.js +1 -1
- package/dist/components/sd-select-v2.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/components/sd-tabs.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-tooltip.js +1 -1
- package/dist/components/table-test.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-1b8e63a6.entry.js → p-0967ef4b.entry.js} +1 -1
- package/dist/design-system/{p-449e58ee.entry.js → p-12f13678.entry.js} +1 -1
- package/dist/design-system/{p-23c31074.entry.js → p-132721ad.entry.js} +1 -1
- package/dist/design-system/{p-8cd1b533.entry.js → p-1af3c5c5.entry.js} +1 -1
- package/dist/design-system/{p-01ac7743.entry.js → p-2319b722.entry.js} +1 -1
- package/dist/design-system/{p-0d485537.entry.js → p-27165b31.entry.js} +1 -1
- package/dist/design-system/{p-4d434794.entry.js → p-3677b3ce.entry.js} +1 -1
- package/dist/design-system/p-38e8fe7c.entry.js +1 -0
- package/dist/design-system/{p-60ece09d.entry.js → p-3c64616c.entry.js} +1 -1
- package/dist/design-system/{p-b3d959b0.entry.js → p-4ba03850.entry.js} +1 -1
- package/dist/design-system/{p-71897864.entry.js → p-639d237f.entry.js} +1 -1
- package/dist/design-system/{p-35b29182.entry.js → p-7232731b.entry.js} +1 -1
- package/dist/design-system/{p-1389a68e.entry.js → p-7dc33db0.entry.js} +1 -1
- package/dist/design-system/{p-002e10ac.entry.js → p-8cb8444e.entry.js} +1 -1
- package/dist/design-system/p-8d65090b.entry.js +1 -0
- package/dist/design-system/{p-9f0fe1f6.entry.js → p-9960d880.entry.js} +1 -1
- package/dist/design-system/{p-92a52f89.entry.js → p-a4e85dba.entry.js} +1 -1
- package/dist/design-system/p-a70ca82b.entry.js +1 -0
- package/dist/design-system/{p-48f1f9ff.entry.js → p-a8e7406e.entry.js} +1 -1
- package/dist/design-system/{p-1a455448.entry.js → p-ac441e78.entry.js} +1 -1
- package/dist/design-system/{p-731429da.entry.js → p-b3b1f25d.entry.js} +1 -1
- package/dist/design-system/{p-609b3748.entry.js → p-beb8d3de.entry.js} +1 -1
- package/dist/design-system/{p-4f9f25a1.entry.js → p-c290c0e0.entry.js} +1 -1
- package/dist/design-system/{p-5442b4b4.entry.js → p-c62ad2f4.entry.js} +1 -1
- package/dist/design-system/{p-4de3b6b1.entry.js → p-c67ff78d.entry.js} +1 -1
- package/dist/design-system/{p-7dd8beba.entry.js → p-c68e37f2.entry.js} +1 -1
- package/dist/design-system/{p-6ef2d08f.entry.js → p-d8a48add.entry.js} +1 -1
- package/dist/design-system/{p-cdedac3c.entry.js → p-dc43ebf9.entry.js} +1 -1
- package/dist/design-system/{p-6b478f5c.entry.js → p-f6869087.entry.js} +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-action-modal.entry.js +1 -1
- package/dist/esm/sd-badge.entry.js +1 -1
- package/dist/esm/sd-barcode-input.entry.js +1 -1
- package/dist/esm/sd-button-v2_2.entry.js +3 -3
- package/dist/esm/sd-button_4.entry.js +10 -5
- package/dist/esm/sd-card.entry.js +1 -1
- 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-calendar.entry.js +1 -1
- package/dist/esm/sd-date-picker-trigger.entry.js +2 -2
- package/dist/esm/sd-date-picker.entry.js +2 -2
- package/dist/esm/sd-date-range-picker-calendar.entry.js +1 -1
- package/dist/esm/sd-dropdown-button.entry.js +3 -3
- package/dist/esm/sd-ghost-button.entry.js +2 -2
- package/dist/esm/sd-input_2.entry.js +2 -2
- package/dist/esm/sd-loading-container.entry.js +2 -2
- package/dist/esm/sd-number-input.entry.js +3 -3
- package/dist/esm/sd-pagination_2.entry.js +61 -30
- package/dist/esm/sd-popover.entry.js +24 -24
- package/dist/esm/sd-portal.entry.js +1 -1
- package/dist/esm/sd-radio-button.entry.js +1 -1
- package/dist/esm/sd-radio-group.entry.js +1 -1
- package/dist/esm/sd-radio.entry.js +1 -1
- package/dist/esm/sd-select-multiple-group.entry.js +1 -1
- package/dist/esm/sd-select-v2-list-item_4.entry.js +28 -4
- package/dist/esm/sd-select.entry.js +1 -1
- package/dist/esm/sd-tabs.entry.js +1 -1
- package/dist/esm/table-test.entry.js +1 -1
- package/dist/types/components/sd-floating-portal/sd-floating-portal.d.ts +1 -0
- package/dist/types/components/sd-popover/sd-popover.d.ts +12 -8
- package/dist/types/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.d.ts +4 -0
- package/dist/types/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.d.ts +6 -0
- package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +8 -0
- package/dist/types/components.d.ts +27 -15
- package/hydrate/index.js +169 -109
- package/hydrate/index.mjs +169 -109
- package/package.json +1 -1
- package/dist/components/p-Cb1M05mf.js +0 -1
- package/dist/components/p-CsPyZohK.js +0 -1
- package/dist/components/p-DGPGMB_Z.js +0 -1
- package/dist/components/p-D_lyw4rN.js +0 -1
- package/dist/components/p-Diis5oCN.js +0 -1
- package/dist/components/p-DukibDDA.js +0 -1
- package/dist/design-system/p-5a0b0a1b.entry.js +0 -1
- package/dist/design-system/p-87222184.entry.js +0 -1
- package/dist/design-system/p-a7ef7465.entry.js +0 -1
|
@@ -265,7 +265,7 @@ const SdDateRangePickerCalendar = class {
|
|
|
265
265
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
266
266
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
267
267
|
};
|
|
268
|
-
return (h(Fragment, { key: '
|
|
268
|
+
return (h(Fragment, { key: 'e925fa935f807e22b22a2f65b4af5b2568865781' }, h("div", { key: 'be601b16d179d91292b58c3b70ce6a4aa4f5e59a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'e193b983a7eb75a227ea8e1d13839dcc9e875588', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '6f2ea95c2fd490a46ac40f6a526ca028920bc564', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
269
269
|
}
|
|
270
270
|
static get watchers() { return {
|
|
271
271
|
"value": [{
|
|
@@ -244,7 +244,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
|
|
|
244
244
|
}
|
|
245
245
|
render() {
|
|
246
246
|
const { config, preset } = this.resolvedConfig;
|
|
247
|
-
return (h("div", { key: '
|
|
247
|
+
return (h("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, h("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
|
|
248
248
|
'--sd-dropdown-button-bg': config.color,
|
|
249
249
|
'--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
|
|
250
250
|
'--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
|
|
@@ -254,10 +254,10 @@ const SdDropdownButton = class extends BaseDropdownEvent {
|
|
|
254
254
|
'--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
|
|
255
255
|
'--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
|
|
256
256
|
'--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
|
|
257
|
-
} }, h("span", { key: '
|
|
257
|
+
} }, h("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
|
|
258
258
|
'sd-dropdown-button__trigger-icon': true,
|
|
259
259
|
'sd-dropdown-button__trigger-icon--open': this.isOpen,
|
|
260
|
-
}, "aria-hidden": "true" }, h("sd-icon", { key: '
|
|
260
|
+
}, "aria-hidden": "true" }, h("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
|
|
261
261
|
}
|
|
262
262
|
static get watchers() { return {
|
|
263
263
|
"isOpen": [{
|
|
@@ -153,7 +153,7 @@ const SdGhostButton = class {
|
|
|
153
153
|
? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
|
|
154
154
|
: GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
|
|
155
155
|
const accessibleName = this.ariaLabel.trim() || undefined;
|
|
156
|
-
return (h("button", { key: '
|
|
156
|
+
return (h("button", { key: '4d5159cb897b6c468380f18eba1eca218d24920e', class: {
|
|
157
157
|
'sd-ghost-button': true,
|
|
158
158
|
'sd-ghost-button--disabled': this.disabled,
|
|
159
159
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
@@ -162,7 +162,7 @@ const SdGhostButton = class {
|
|
|
162
162
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
|
|
163
163
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
164
164
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
165
|
-
}, onClick: this.handleClick }, h("sd-icon", { key: '
|
|
165
|
+
}, onClick: this.handleClick }, h("sd-icon", { key: '0461580c901aea244a3d0e693fb94fd6354873ab', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
166
166
|
}
|
|
167
167
|
};
|
|
168
168
|
SdGhostButton.style = sdGhostButtonCss();
|
|
@@ -148,12 +148,12 @@ const SdInput = class {
|
|
|
148
148
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
149
149
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
150
150
|
};
|
|
151
|
-
return (h("sd-field", { key: '
|
|
151
|
+
return (h("sd-field", { key: '6270fb99043a06aa9a4c2ead77007e6c03adafef', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'aaef18c323710235b41d76b26a21380cadcc6e0f', class: "sd-input__content" }, h("slot", { key: 'fd5d5845acf9d5351dec5af84e09d91246de8a68', name: "prefix" }), h("input", { key: '8b4dd1eab6488a29daec6e6dde5238b319001d5b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '79918e68de3045b509a27d8567e095665040689b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'f5358346a20830c1fef955a2bb6783156b251178', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
152
152
|
if (this.disabled)
|
|
153
153
|
return;
|
|
154
154
|
this.internalValue = '';
|
|
155
155
|
await this.formField?.sdValidate();
|
|
156
|
-
} })), this.type === 'password' && (h("sd-ghost-button", { key: '
|
|
156
|
+
} })), this.type === 'password' && (h("sd-ghost-button", { key: '77108ea21a4b9afc9e9051c98d4d49bcb571cffb', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
|
|
157
157
|
if (this.disabled)
|
|
158
158
|
return;
|
|
159
159
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -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: '7887102a2b03f911fad57784b3b45b12d2265ae2', 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: '0f815029574907643be52b50a6c8be8e66ced072', class: "sd-loading-container__backdrop" }), h("div", { key: '9ea0faf8ed4094b3fd93a6e29c55130d58b245fe', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '6e89faad35f282d91098c213879c0ecf8d05a5ed', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '05d3128ecf91a372a426a2508535c7789aff9bc1', class: "sd-loading-container__message" }, this.message)))));
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
SdLoadingContainer.style = sdLoadingContainerCss();
|
|
@@ -383,12 +383,12 @@ const SdNumberInput = class {
|
|
|
383
383
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
384
384
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
385
385
|
};
|
|
386
|
-
return (h("sd-field", { key: '
|
|
386
|
+
return (h("sd-field", { key: '85941d001afd73a10defb7f0728579ce0b8457b1', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '565de4d4a79219bc8d6e9c8f4528ec93a655c376', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'fa27f209b09a03121eb89959164a4a349d525d9a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '7f4fe23f4b0eba4a06e0153338228710365ce57f', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
387
387
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
388
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '
|
|
388
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '55a96b32e383cdf8d5b253336130460275373f41', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: 'e25faa5af70d89ae0266bd9dbf35c72276885a9b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
389
389
|
textAlign: this.useButton ? 'center' : 'right',
|
|
390
390
|
...this.inputStyle,
|
|
391
|
-
} }), this.inputSuffix && (h("span", { key: '
|
|
391
|
+
} }), this.inputSuffix && (h("span", { key: '777730846e62dd03a9193cf582908a059789b329', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: 'ef8b471cb1d2cbd3a5b350ddbbf856e3bd104567', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'e2440c5a4571b69dc0e91ab0b10dffdd8242b1d8', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
392
392
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
393
393
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
394
394
|
}
|
|
@@ -60,7 +60,7 @@ const PAGINATION_COLORS = {
|
|
|
60
60
|
iconDefault: '#888888',
|
|
61
61
|
};
|
|
62
62
|
|
|
63
|
-
const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)
|
|
63
|
+
const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
|
|
64
64
|
|
|
65
65
|
const PER_PAGE = 10;
|
|
66
66
|
const BUTTON_WIDTH = {
|
|
@@ -149,13 +149,13 @@ const SdPagination = class {
|
|
|
149
149
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
150
150
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
151
151
|
};
|
|
152
|
-
return (h("div", { key: '
|
|
152
|
+
return (h("div", { key: '2b9efc3a0340799a39e7bbfe6f3a270b7cc5f0c7', class: {
|
|
153
153
|
'sd-pagination': true,
|
|
154
154
|
'sd-pagination--simple': this.simple,
|
|
155
|
-
}, style: cssVars }, h("div", { key: '
|
|
155
|
+
}, style: cssVars }, h("div", { key: 'af585a4e9ad2fc25e47cb42fdcc66850d6210fd1', 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: {
|
|
156
156
|
'sd-pagination__item': true,
|
|
157
157
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
158
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '
|
|
158
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '3128e19dee5f2d00fcc5603f96f323afaf2750d4', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
159
159
|
}
|
|
160
160
|
};
|
|
161
161
|
SdPagination.style = sdPaginationCss();
|
|
@@ -202,11 +202,29 @@ const SdSelectV2 = class {
|
|
|
202
202
|
hovered = false;
|
|
203
203
|
update;
|
|
204
204
|
dropDownShow;
|
|
205
|
+
async sdFocus() {
|
|
206
|
+
if (this.disabled)
|
|
207
|
+
return;
|
|
208
|
+
await this.triggerComponentRef?.sdFocus();
|
|
209
|
+
}
|
|
210
|
+
async sdOpen() {
|
|
211
|
+
// sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
|
|
212
|
+
await new Promise(resolve => setTimeout(resolve, 0));
|
|
213
|
+
if (this.disabled || this.isOpen)
|
|
214
|
+
return;
|
|
215
|
+
this.prepareDropdownGeometry();
|
|
216
|
+
if (this.closeAnimationTimer)
|
|
217
|
+
clearTimeout(this.closeAnimationTimer);
|
|
218
|
+
this.isAnimatingOut = false;
|
|
219
|
+
this.isOpen = true;
|
|
220
|
+
}
|
|
205
221
|
triggerRef;
|
|
222
|
+
triggerComponentRef;
|
|
206
223
|
closeAnimationTimer;
|
|
207
224
|
internalName = nanoid();
|
|
225
|
+
triggerHasFocus = false;
|
|
208
226
|
watchIsOpen(newValue) {
|
|
209
|
-
this.
|
|
227
|
+
this.syncFocusedState(newValue);
|
|
210
228
|
this.dropDownShow.emit({ isOpen: newValue });
|
|
211
229
|
}
|
|
212
230
|
get isMulti() {
|
|
@@ -214,19 +232,19 @@ const SdSelectV2 = class {
|
|
|
214
232
|
}
|
|
215
233
|
get displayText() {
|
|
216
234
|
if (this.isMulti) {
|
|
217
|
-
if (!this.value ||
|
|
218
|
-
return '';
|
|
219
|
-
if (this.emitValue) {
|
|
220
|
-
const flat = this.flattenOptions(this.options);
|
|
221
|
-
return this.value
|
|
222
|
-
.map(v => flat.find(o => o.value === v)?.label ?? '')
|
|
223
|
-
.filter(Boolean)
|
|
224
|
-
.join(', ');
|
|
225
|
-
}
|
|
226
|
-
const selected = this.value;
|
|
227
|
-
if (selected.length === 0)
|
|
235
|
+
if (!Array.isArray(this.value) || this.value.length === 0)
|
|
228
236
|
return '';
|
|
229
|
-
|
|
237
|
+
const flat = this.flattenOptions(this.options);
|
|
238
|
+
return this.value
|
|
239
|
+
.map(item => {
|
|
240
|
+
if (item != null && typeof item === 'object') {
|
|
241
|
+
const opt = item;
|
|
242
|
+
return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
|
|
243
|
+
}
|
|
244
|
+
return flat.find(o => o.value === item)?.label ?? '';
|
|
245
|
+
})
|
|
246
|
+
.filter(Boolean)
|
|
247
|
+
.join(', ');
|
|
230
248
|
}
|
|
231
249
|
if (this.value == null)
|
|
232
250
|
return '';
|
|
@@ -301,20 +319,33 @@ const SdSelectV2 = class {
|
|
|
301
319
|
this.isAnimatingOut = false;
|
|
302
320
|
}, SdSelectV2.CLOSE_ANIMATION_DURATION);
|
|
303
321
|
}
|
|
304
|
-
|
|
322
|
+
prepareDropdownGeometry() {
|
|
305
323
|
if (this.triggerRef) {
|
|
306
324
|
this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
|
|
307
325
|
}
|
|
308
326
|
this.updateDropdownViewportConstraints();
|
|
327
|
+
}
|
|
328
|
+
syncFocusedState(isOpen = this.isOpen) {
|
|
329
|
+
this.focused = isOpen || this.triggerHasFocus;
|
|
330
|
+
}
|
|
331
|
+
handleTriggerFocus = () => {
|
|
332
|
+
this.triggerHasFocus = true;
|
|
333
|
+
this.syncFocusedState();
|
|
334
|
+
};
|
|
335
|
+
handleTriggerBlur = () => {
|
|
336
|
+
this.triggerHasFocus = false;
|
|
337
|
+
this.syncFocusedState();
|
|
338
|
+
};
|
|
339
|
+
handleTriggerClick = () => {
|
|
309
340
|
if (this.isOpen) {
|
|
310
341
|
this.closeDropdown();
|
|
342
|
+
return;
|
|
311
343
|
}
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
}
|
|
344
|
+
this.prepareDropdownGeometry();
|
|
345
|
+
if (this.closeAnimationTimer)
|
|
346
|
+
clearTimeout(this.closeAnimationTimer);
|
|
347
|
+
this.isAnimatingOut = false;
|
|
348
|
+
this.isOpen = true;
|
|
318
349
|
};
|
|
319
350
|
emitUpdate(value) {
|
|
320
351
|
this.update.emit(value);
|
|
@@ -351,9 +382,7 @@ const SdSelectV2 = class {
|
|
|
351
382
|
}
|
|
352
383
|
else {
|
|
353
384
|
const exists = selected.some(s => s.value === option.value);
|
|
354
|
-
newSelected = exists
|
|
355
|
-
? selected.filter(s => s.value !== option.value)
|
|
356
|
-
: [...selected, option];
|
|
385
|
+
newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
|
|
357
386
|
}
|
|
358
387
|
this.value = this.toMultiValue(newSelected);
|
|
359
388
|
this.emitUpdate(this.value);
|
|
@@ -375,13 +404,15 @@ const SdSelectV2 = class {
|
|
|
375
404
|
this.closeDropdown();
|
|
376
405
|
},
|
|
377
406
|
};
|
|
378
|
-
return (h("sd-field", { key: '
|
|
407
|
+
return (h("sd-field", { key: '8c9b5a1414bd0bb068acd53e07a61767b6904c62', name: this.fieldName || this.internalName, 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: () => {
|
|
379
408
|
this.hovered = true;
|
|
380
409
|
}, onMouseLeave: () => {
|
|
381
410
|
this.hovered = false;
|
|
382
|
-
} }, h("div", { key: '
|
|
411
|
+
} }, h("div", { key: '47677529c530f06cb3a35a30dd4cc9f9a34d8759', class: "sd-select-v2", ref: el => {
|
|
383
412
|
this.triggerRef = el;
|
|
384
|
-
} }, h("sd-select-v2-trigger", { key: '
|
|
413
|
+
} }, h("sd-select-v2-trigger", { key: '3aae441a7ec1a6d8faa0f04f41881f515b641853', ref: el => {
|
|
414
|
+
this.triggerComponentRef = el;
|
|
415
|
+
}, 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: '7c92db46231f4c46ce94668ac220dc7ec14ad118', ...portalProps }, h("sd-select-v2-listbox", { key: 'af3fc60a9554573e50145edeb0ea8f412116fd76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
385
416
|
}
|
|
386
417
|
static get watchers() { return {
|
|
387
418
|
"isOpen": [{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, a as getElement, h, F as Fragment } from './index-BGyJgVXm.js';
|
|
1
|
+
import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-BGyJgVXm.js';
|
|
2
2
|
import { T as TooltipArrow } from './tooltipArrow-BAjP9_Hx.js';
|
|
3
3
|
|
|
4
4
|
const popover = {
|
|
@@ -12,6 +12,7 @@ const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:
|
|
|
12
12
|
const SdPopover = class {
|
|
13
13
|
constructor(hostRef) {
|
|
14
14
|
registerInstance(this, hostRef);
|
|
15
|
+
this.showChange = createEvent(this, "sdShowChange", 7);
|
|
15
16
|
}
|
|
16
17
|
get el() { return getElement(this); }
|
|
17
18
|
show = false;
|
|
@@ -26,20 +27,17 @@ const SdPopover = class {
|
|
|
26
27
|
messages = [];
|
|
27
28
|
buttons = [];
|
|
28
29
|
menuClass = '';
|
|
29
|
-
noHover = true;
|
|
30
30
|
useClose = false;
|
|
31
|
-
|
|
32
|
-
slotContent = '';
|
|
33
|
-
watchShowHandler(newValue) {
|
|
34
|
-
this.showPopover = newValue;
|
|
35
|
-
}
|
|
36
|
-
componentWillLoad() {
|
|
37
|
-
this.showPopover = this.show;
|
|
38
|
-
this.slotContent = this.el.innerHTML;
|
|
39
|
-
}
|
|
31
|
+
showChange;
|
|
40
32
|
buttonEl;
|
|
33
|
+
setShow = (next) => {
|
|
34
|
+
if (this.show === next)
|
|
35
|
+
return;
|
|
36
|
+
this.show = next;
|
|
37
|
+
this.showChange.emit(next);
|
|
38
|
+
};
|
|
41
39
|
get popoverOffset() {
|
|
42
|
-
switch (this.placement) {
|
|
40
|
+
switch (this.placement ?? 'bottom') {
|
|
43
41
|
case 'top':
|
|
44
42
|
return [0, -4];
|
|
45
43
|
case 'bottom':
|
|
@@ -50,24 +48,26 @@ const SdPopover = class {
|
|
|
50
48
|
return [4, 0];
|
|
51
49
|
}
|
|
52
50
|
}
|
|
53
|
-
handleClose = () =>
|
|
54
|
-
this.showPopover = false;
|
|
55
|
-
};
|
|
51
|
+
handleClose = () => this.setShow(false);
|
|
56
52
|
render() {
|
|
57
|
-
|
|
53
|
+
const placement = this.placement ?? 'bottom';
|
|
54
|
+
const color = this.color ?? '#01BB4B';
|
|
55
|
+
const icon = this.icon ?? 'helpOutline';
|
|
56
|
+
const iconSize = this.iconSize ?? 12;
|
|
57
|
+
const buttonSize = this.buttonSize ?? 'sm';
|
|
58
|
+
const buttonVariant = this.buttonVariant ?? 'primary';
|
|
59
|
+
const menuClass = this.menuClass ?? '';
|
|
60
|
+
const messages = Array.isArray(this.messages) ? this.messages : [];
|
|
61
|
+
const buttons = Array.isArray(this.buttons) ? this.buttons : [];
|
|
62
|
+
return (h(Fragment, { key: 'e576deaacba9395c5aeb76fd13baa0dc1e908d38' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: buttonSize, color: color, variant: buttonVariant, class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '7520067b46527c22108292a659dd7e8fba85397c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'ba48632dd93359851bd87f4d55f2341653b0caab', class: {
|
|
58
63
|
'sd-floating-menu': true,
|
|
59
64
|
'sd-floating-menu--popover': true,
|
|
60
|
-
[`sd-floating-menu--${
|
|
61
|
-
[
|
|
65
|
+
[`sd-floating-menu--${placement}`]: true,
|
|
66
|
+
[menuClass]: !!menuClass,
|
|
62
67
|
}, style: {
|
|
63
68
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
64
|
-
} }, h("i", { key: '
|
|
69
|
+
} }, h("i", { key: 'fce80e5bc6f49f5dbc1772f910eae0fb9bc09a6b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '32aaa3b00f7ac77d47fd2bc3c968a7a4c20102c6' })), h("div", { key: '29b3240126412070466acee7ee1d061d235ba51e', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '6cb5cf4531f573e93146a552b34831dc04851661', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: 'ba15bb4efc4af37dd89b0da61539f516cc31a2f3', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), buttons.length > 0 && (h("div", { key: '2656545909634d8c54e9d34155e699041b5512f5', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${buttons.length}` }, buttons.map((button, i) => (h("sd-button", { key: `btn-${i}`, ...button })))))), this.useClose && (h("sd-ghost-button", { key: '315bf10dde1b7cde5727beb101a1a1ad07966138', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
|
|
65
70
|
}
|
|
66
|
-
static get watchers() { return {
|
|
67
|
-
"show": [{
|
|
68
|
-
"watchShowHandler": 0
|
|
69
|
-
}]
|
|
70
|
-
}; }
|
|
71
71
|
};
|
|
72
72
|
SdPopover.style = sdPopoverCss();
|
|
73
73
|
|
|
@@ -225,7 +225,7 @@ const SdPortal = class {
|
|
|
225
225
|
this.close.emit();
|
|
226
226
|
}
|
|
227
227
|
render() {
|
|
228
|
-
return h("slot", { key: '
|
|
228
|
+
return h("slot", { key: 'fa3033a01d6c8f6878c91367b9670206ab5c71d7' });
|
|
229
229
|
}
|
|
230
230
|
static get watchers() { return {
|
|
231
231
|
"open": [{
|
|
@@ -168,7 +168,7 @@ const SdRadioButton = class {
|
|
|
168
168
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
169
169
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
170
170
|
};
|
|
171
|
-
return (h("div", { key: '
|
|
171
|
+
return (h("div", { key: '67c8e7ad03fb6ee4cabd06591e3e11e5d38914f0', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
172
172
|
const isSelected = this.isOptionSelected(option);
|
|
173
173
|
const isDisabled = this.isOptionDisabled(option);
|
|
174
174
|
return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -29,7 +29,7 @@ const SdRadioGroup = class {
|
|
|
29
29
|
return classes.join(' ');
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: '5f6559df018e48958103d0a84a0f074f81bd255a', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
33
33
|
return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
|
|
34
34
|
})));
|
|
35
35
|
}
|
|
@@ -116,7 +116,7 @@ const SdRadio = class {
|
|
|
116
116
|
'--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
|
|
117
117
|
'--sd-radio-label-color': RADIO_COLORS.label,
|
|
118
118
|
};
|
|
119
|
-
return (h("label", { key: '
|
|
119
|
+
return (h("label", { key: '2b809f1f3ce39e6dd2429cf1c48a935500287614', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '1f44ab44d741ef40152318ce6fd437bb091c3cfb', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '941fddbb939a46afbe72c642d3b6f6f252f143f1', class: "sd-radio__circle" }), this.label && h("span", { key: 'e30139892e82b8da251525e3c717549a2b7522d0', class: "sd-radio__label" }, this.label)));
|
|
120
120
|
}
|
|
121
121
|
static get watchers() { return {
|
|
122
122
|
"value": [{
|
|
@@ -396,7 +396,7 @@ const SdSelectMultipleGroup = class extends BaseDropdownEvent {
|
|
|
396
396
|
});
|
|
397
397
|
}
|
|
398
398
|
render() {
|
|
399
|
-
return (h("sd-field", { key: '
|
|
399
|
+
return (h("sd-field", { key: '4140b6529565f97fa65d81ae1462108476d52bcc', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '2dab2697f3e375d214b66464b0f57aa32e77757b', class: {
|
|
400
400
|
'sd-select-multiple-group': true,
|
|
401
401
|
'sd-select-multiple-group--open': this.isOpen,
|
|
402
402
|
'sd-select-multiple-group--disabled': this.disabled,
|
|
@@ -424,13 +424,19 @@ const SdSelectV2Listbox = class {
|
|
|
424
424
|
* `children` is emptied by `filterTree`; in that case we fall back to the
|
|
425
425
|
* full original subtree because the user has no way to deselect descendants
|
|
426
426
|
* individually.
|
|
427
|
+
*
|
|
428
|
+
* disabled 항목은 사용자가 토글할 수 없으므로 leaves 집합에서 제외한다.
|
|
429
|
+
* 호출처(그룹 토글 / 카운트 / indeterminate 판정)가 모두 동일하게 "실제
|
|
430
|
+
* 토글 가능한 leaves" 만 보도록 통일한다.
|
|
427
431
|
*/
|
|
428
432
|
collectVisibleLeaves(option) {
|
|
433
|
+
if (option.disabled)
|
|
434
|
+
return [];
|
|
429
435
|
if (!option.children)
|
|
430
436
|
return [option];
|
|
431
437
|
if (option.children.length === 0) {
|
|
432
438
|
const original = this.findOriginalOption(option.value, this.options);
|
|
433
|
-
return original ? this.collectLeaves(original) : [];
|
|
439
|
+
return original ? this.collectLeaves(original).filter(l => !l.disabled) : [];
|
|
434
440
|
}
|
|
435
441
|
return option.children.flatMap(child => this.collectVisibleLeaves(child));
|
|
436
442
|
}
|
|
@@ -600,7 +606,7 @@ const SdSelectV2Listbox = class {
|
|
|
600
606
|
'--listbox-max-height': this.maxHeight,
|
|
601
607
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
602
608
|
};
|
|
603
|
-
return (h("div", { key: '
|
|
609
|
+
return (h("div", { key: '17ebae1a1589245944d7db5a05f2c011ad13e391', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '181ddd3a11ebe3b81353d66111459c7929c5af0b', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '91114e82f60a6bdeb74142d6d7abea2871e6678e', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
604
610
|
this.listEl = el;
|
|
605
611
|
} }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
|
|
606
612
|
}
|
|
@@ -618,17 +624,33 @@ const SdSelectV2Trigger = class {
|
|
|
618
624
|
constructor(hostRef) {
|
|
619
625
|
registerInstance(this, hostRef);
|
|
620
626
|
this.triggerClick = createEvent(this, "sdTriggerClick", 7);
|
|
627
|
+
this.triggerFocus = createEvent(this, "sdTriggerFocus", 7);
|
|
628
|
+
this.triggerBlur = createEvent(this, "sdTriggerBlur", 7);
|
|
621
629
|
}
|
|
622
630
|
displayText = '';
|
|
623
631
|
placeholder = '선택';
|
|
624
632
|
disabled = false;
|
|
625
633
|
isOpen = false;
|
|
626
634
|
triggerClick;
|
|
635
|
+
triggerFocus;
|
|
636
|
+
triggerBlur;
|
|
637
|
+
triggerEl;
|
|
638
|
+
async sdFocus() {
|
|
639
|
+
if (this.disabled)
|
|
640
|
+
return;
|
|
641
|
+
this.triggerEl?.focus();
|
|
642
|
+
}
|
|
627
643
|
handleClick = () => {
|
|
628
644
|
if (this.disabled)
|
|
629
645
|
return;
|
|
630
646
|
this.triggerClick.emit();
|
|
631
647
|
};
|
|
648
|
+
handleFocus = () => {
|
|
649
|
+
this.triggerFocus.emit();
|
|
650
|
+
};
|
|
651
|
+
handleBlur = () => {
|
|
652
|
+
this.triggerBlur.emit();
|
|
653
|
+
};
|
|
632
654
|
render() {
|
|
633
655
|
const hasValue = !!this.displayText;
|
|
634
656
|
const cssVars = {
|
|
@@ -646,11 +668,13 @@ const SdSelectV2Trigger = class {
|
|
|
646
668
|
? SELECT_COLORS.icon.disabled
|
|
647
669
|
: SELECT_COLORS.icon.default,
|
|
648
670
|
};
|
|
649
|
-
return (h("div", { key: '
|
|
671
|
+
return (h("div", { key: 'e5c4db3cfbaa29c0af7efd0376a972dee0e9db56', ref: el => {
|
|
672
|
+
this.triggerEl = el;
|
|
673
|
+
}, tabindex: this.disabled ? -1 : 0, class: {
|
|
650
674
|
'sd-select-v2-trigger': true,
|
|
651
675
|
'sd-select-v2-trigger--open': this.isOpen,
|
|
652
676
|
'sd-select-v2-trigger--disabled': this.disabled,
|
|
653
|
-
}, style: cssVars, onClick: this.handleClick }, h("div", { key: '
|
|
677
|
+
}, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '76a946a587f6245f8a21ecbf25c5a21895f35970', class: "sd-select-v2-trigger__content" }, h("span", { key: '3224e13cc49371e7bcd8095a8b08bd62d4f8b295', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: 'ea81dc671b63b14040292ed2ff4084a9c9fc6fca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
654
678
|
'sd-select-v2-trigger__icon': true,
|
|
655
679
|
'sd-select-v2-trigger__icon--open': this.isOpen,
|
|
656
680
|
} }))));
|
|
@@ -146,7 +146,7 @@ const SdSelect = class extends BaseDropdownEvent {
|
|
|
146
146
|
}
|
|
147
147
|
};
|
|
148
148
|
render() {
|
|
149
|
-
return (h("sd-field", { key: '
|
|
149
|
+
return (h("sd-field", { key: '6939161d0edb5eabca307b3883e02a53a29e66c4', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'a57d17cb3ff775c724f3a6c13025c04e031de45f', class: {
|
|
150
150
|
'sd-select': true,
|
|
151
151
|
'sd-select--disabled': this.disabled,
|
|
152
152
|
'sd-select--error': !!this.error,
|
|
@@ -46,7 +46,7 @@ const SdTabs = class {
|
|
|
46
46
|
return `square_xs_${color}`;
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
|
-
return (h("div", { key: '
|
|
49
|
+
return (h("div", { key: '85326c946694a115b466f07395872429c467d72f', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
|
|
50
50
|
const badgeName = this.getBadgeName(tab);
|
|
51
51
|
return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
|
|
52
52
|
})));
|
|
@@ -78,7 +78,7 @@ const DataTable = class {
|
|
|
78
78
|
return el.innerHTML;
|
|
79
79
|
}
|
|
80
80
|
render() {
|
|
81
|
-
return (h("div", { key: '
|
|
81
|
+
return (h("div", { key: '2aaa005ce2516e841fdace352e9d8cf2b98cbde4', class: "table-wrapper" }, h("table", { key: '3b13c885dc0cefd1c2b7de3c336d803099009063', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: 'a866c3ce695250fc6b220044955c6fafa68f5647' }, h("tr", { key: '465974d2bd2f39114cabda226aba8645d79b4a68' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '4b0a96da5bf54404774fca7bb9136561ddc57170' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: '1deba9664748b1953a65b2d7badc4b2e813ab2eb', class: "templates-slot", hidden: true }, h("slot", { key: '782d4ef14b8e6068e1d96a55af5f0b16af33dc0f' }))));
|
|
82
82
|
}
|
|
83
83
|
static get watchers() { return {
|
|
84
84
|
"columns": [{
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
+
import { EventEmitter } from '../../stencil-public-runtime';
|
|
1
2
|
import { ButtonSize, ButtonVariant } from '../sd-button/sd-button';
|
|
3
|
+
export interface PopoverButton {
|
|
4
|
+
label: string;
|
|
5
|
+
variant?: ButtonVariant;
|
|
6
|
+
color?: string;
|
|
7
|
+
size?: ButtonSize;
|
|
8
|
+
icon?: IconName;
|
|
9
|
+
onClick?: (e: Event) => void;
|
|
10
|
+
}
|
|
2
11
|
export declare class SdPopover {
|
|
3
12
|
el: HTMLElement;
|
|
4
13
|
show: boolean;
|
|
@@ -11,17 +20,12 @@ export declare class SdPopover {
|
|
|
11
20
|
buttonVariant: ButtonVariant;
|
|
12
21
|
menuTitle?: string;
|
|
13
22
|
messages: string[];
|
|
14
|
-
buttons:
|
|
15
|
-
[key: string]: any;
|
|
16
|
-
}[];
|
|
23
|
+
buttons: PopoverButton[];
|
|
17
24
|
menuClass: string;
|
|
18
|
-
noHover: boolean;
|
|
19
25
|
useClose: boolean;
|
|
20
|
-
|
|
21
|
-
slotContent: string;
|
|
22
|
-
watchShowHandler(newValue: boolean): void;
|
|
23
|
-
componentWillLoad(): void;
|
|
26
|
+
showChange: EventEmitter<boolean>;
|
|
24
27
|
private buttonEl?;
|
|
28
|
+
private setShow;
|
|
25
29
|
private get popoverOffset();
|
|
26
30
|
private handleClose;
|
|
27
31
|
render(): any;
|
|
@@ -33,6 +33,10 @@ export declare class SdSelectV2Listbox {
|
|
|
33
33
|
* `children` is emptied by `filterTree`; in that case we fall back to the
|
|
34
34
|
* full original subtree because the user has no way to deselect descendants
|
|
35
35
|
* individually.
|
|
36
|
+
*
|
|
37
|
+
* disabled 항목은 사용자가 토글할 수 없으므로 leaves 집합에서 제외한다.
|
|
38
|
+
* 호출처(그룹 토글 / 카운트 / indeterminate 판정)가 모두 동일하게 "실제
|
|
39
|
+
* 토글 가능한 leaves" 만 보도록 통일한다.
|
|
36
40
|
*/
|
|
37
41
|
private collectVisibleLeaves;
|
|
38
42
|
private get navigableOptions();
|