@sellmate/design-system 1.0.69 → 1.0.70
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 +60 -29
- 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.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-r8kAA1Su.js +1 -0
- package/dist/components/{p-BaHpEtbz.js → p-raiEivQ1.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-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-a7ef7465.entry.js → p-2196f439.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-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 +60 -29
- 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 +168 -108
- package/hydrate/index.mjs +168 -108
- 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/hydrate/index.js
CHANGED
|
@@ -5287,7 +5287,7 @@ class DataTable {
|
|
|
5287
5287
|
return el.innerHTML;
|
|
5288
5288
|
}
|
|
5289
5289
|
render() {
|
|
5290
|
-
return (hAsync("div", { key: '
|
|
5290
|
+
return (hAsync("div", { key: '2aaa005ce2516e841fdace352e9d8cf2b98cbde4', class: "table-wrapper" }, hAsync("table", { key: '3b13c885dc0cefd1c2b7de3c336d803099009063', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, hAsync("thead", { key: 'a866c3ce695250fc6b220044955c6fafa68f5647' }, hAsync("tr", { key: '465974d2bd2f39114cabda226aba8645d79b4a68' }, this.columns.map(column => (hAsync("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), hAsync("tbody", { key: '4b0a96da5bf54404774fca7bb9136561ddc57170' }, this.rows.map((row, rowIndex) => (hAsync("tr", { key: rowIndex }, this.columns.map(column => (hAsync("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), hAsync("div", { key: '1deba9664748b1953a65b2d7badc4b2e813ab2eb', class: "templates-slot", hidden: true }, hAsync("slot", { key: '782d4ef14b8e6068e1d96a55af5f0b16af33dc0f' }))));
|
|
5291
5291
|
}
|
|
5292
5292
|
static get watchers() { return {
|
|
5293
5293
|
"columns": [{
|
|
@@ -5448,7 +5448,7 @@ class SdActionModal {
|
|
|
5448
5448
|
if (this.height != null && this.height !== '') {
|
|
5449
5449
|
sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
|
5450
5450
|
}
|
|
5451
|
-
return (hAsync("div", { key: '
|
|
5451
|
+
return (hAsync("div", { key: '45997c9b1e10845c4d04528911147bc1d7192dd6', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '838bfdc66c52fffb7f226a2a1eb0bdd4a2a8addc', class: "sd-action-modal__header" }, hAsync("h2", { key: 'e17e9c7954d0217071e2c21aa030f3abcc0a584f', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'e81bbfa0bcabba237be8364a40a71c38a4120af1', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: 'b98817a60a874897acd209e7184690f04678a5ca', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '3b99fd3a4f3e795e5192fe9b41de8b97a40f80d0', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'f499d92ecc3adeed3da427ae8bbdc0c6d7edf37b', class: "sd-action-modal__body" }, hAsync("slot", { key: 'dd05e8f95be6aa98a84d5752c89dad9a28695601', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '43b2338654d3a56aced7029749b0e03f0427545f', class: "sd-action-modal__footer" }, hAsync("div", { key: '6308a79ed13017ee2c5a71d7dbf49a7da6bd775f', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: 'f3764684c374d82a31cbd65333bb0f69eb6f2f1b', name: "bottom-sub-content" })), hAsync("sd-button-v2", { key: '42a2b3068574b56172b0138076f49167da8e6625', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
|
|
5452
5452
|
}
|
|
5453
5453
|
static get style() { return sdActionModalCss(); }
|
|
5454
5454
|
static get cmpMeta() { return {
|
|
@@ -5501,7 +5501,7 @@ class SdBadge {
|
|
|
5501
5501
|
label = '';
|
|
5502
5502
|
render() {
|
|
5503
5503
|
const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
|
|
5504
|
-
return (hAsync("div", { key: '
|
|
5504
|
+
return (hAsync("div", { key: '25c24499f0474cad07059347491dd38dc4f59025', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '7580873ce298cf669a198c277bd4e6812e7c4120', class: "sd-badge__dot" }), hAsync("div", { key: '6c2b8e63a490a3f538cd98749283a5decde63ca6', class: "sd-badge__label" }, this.label)));
|
|
5505
5505
|
}
|
|
5506
5506
|
static get style() { return sdBadgeCss(); }
|
|
5507
5507
|
static get cmpMeta() { return {
|
|
@@ -5711,7 +5711,7 @@ class SdBarcodeInput {
|
|
|
5711
5711
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5712
5712
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5713
5713
|
};
|
|
5714
|
-
return (hAsync("sd-field", { key: '
|
|
5714
|
+
return (hAsync("sd-field", { key: '5e1e5e5ba201ea743fa83df03f7712d7141332e7', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '4b8d82acd91c247b148d1b16f3b3c9d4e69c178f', class: "sd-barcode-input__content" }, hAsync("slot", { key: '0fb54ff8ebca25f348f1fdbb7b29f5e391beea9e', name: "prefix" }), hAsync("input", { key: '9c1e3fd1bfa35cc663838dc0dc737497525a8aa6', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '6e060c721546d34ce6137986ba7204df90a55f51', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'ded4ca906d1f25bbc80a7ba8e090eb24f507bb09', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
|
|
5715
5715
|
if (this.disabled)
|
|
5716
5716
|
return;
|
|
5717
5717
|
this.internalValue = '';
|
|
@@ -6435,15 +6435,15 @@ class SdButtonV2 {
|
|
|
6435
6435
|
render() {
|
|
6436
6436
|
const { config, preset } = this.resolvedConfig;
|
|
6437
6437
|
const hasLabel = Boolean(this.label);
|
|
6438
|
-
const iconOnly = !this.label &&
|
|
6438
|
+
const iconOnly = !this.label && Boolean(this.icon) !== Boolean(this.rightIcon);
|
|
6439
6439
|
const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
|
|
6440
|
-
return (hAsync("button", { key: '
|
|
6440
|
+
return (hAsync("button", { key: '9e81a8201a521c9c1e14c2c0145607189b8c3838', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
6441
6441
|
'--sd-button-v2-bg': config.color,
|
|
6442
6442
|
'--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
|
|
6443
6443
|
'--sd-button-v2-border': PRESET_BORDER_COLORS$1[preset],
|
|
6444
6444
|
'--sd-button-v2-content': PRESET_CONTENT_COLORS$1[preset],
|
|
6445
6445
|
'--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
|
|
6446
|
-
}, onClick: this.handleClick }, hAsync("span", { key: '
|
|
6446
|
+
}, onClick: this.handleClick }, hAsync("span", { key: '42d8b7f20ab0b3e8e32a18f2e8b2af9251558413', class: "sd-button-v2__content" }, this.icon && (hAsync("sd-icon", { key: '8430b5aebe8c7d41bddf8378441d4182ee9ab344', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && hAsync("span", { key: '7a1865fb4472fb1e567c2adeb6a30e09665b6250', class: "sd-button-v2__label" }, this.label), this.rightIcon && (hAsync("sd-icon", { key: '51738c13c5e518cf0d864beb9c6cc680d0b5c867', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
|
|
6447
6447
|
}
|
|
6448
6448
|
static get style() { return sdButtonV2Css(); }
|
|
6449
6449
|
static get cmpMeta() { return {
|
|
@@ -6681,7 +6681,7 @@ class SdCard {
|
|
|
6681
6681
|
bordered = false;
|
|
6682
6682
|
sdClass = '';
|
|
6683
6683
|
render() {
|
|
6684
|
-
return (hAsync(Fragment, { key: '
|
|
6684
|
+
return (hAsync(Fragment, { key: 'fa3c7ed4a6fb93200c9faacc1aef1db51ed3050f' }, hAsync("div", { key: '2e82506370c7f6873793053248bf28c2b5fe42ce', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'a725bee33ea056e6662485f72dcd08ae96acf03e' }))));
|
|
6685
6685
|
}
|
|
6686
6686
|
static get style() { return sdCardCss(); }
|
|
6687
6687
|
static get cmpMeta() { return {
|
|
@@ -7202,7 +7202,7 @@ class SdChip {
|
|
|
7202
7202
|
'--sd-chip-font-weight': typography.fontWeight,
|
|
7203
7203
|
'--sd-chip-line-height': typography.lineHeight,
|
|
7204
7204
|
};
|
|
7205
|
-
return (hAsync("span", { key: '
|
|
7205
|
+
return (hAsync("span", { key: '70ea5743cf806c5d12f8559bdb12abb2adf2af30', class: {
|
|
7206
7206
|
'sd-chip': true,
|
|
7207
7207
|
[`sd-chip--${state}`]: true,
|
|
7208
7208
|
'sd-chip--disabled': this.disabled,
|
|
@@ -7304,7 +7304,7 @@ class SdCircleProgress {
|
|
|
7304
7304
|
arcStyle.strokeDashoffset = '0';
|
|
7305
7305
|
}
|
|
7306
7306
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
7307
|
-
return (hAsync(Host, { key: '
|
|
7307
|
+
return (hAsync(Host, { key: 'ce120476470e03e49d5a50a0395bb21955163019', style: hostStyle }, hAsync("svg", { key: 'ad0916ef87d9a04415d4712e3e84d44fcb8b40d7', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: 'db230e486fe5bfd1325ddb4510558cadea09032f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '9e1c53e5d6dc75c6e5c9a3b79b329847b17b10d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
|
|
7308
7308
|
}
|
|
7309
7309
|
static get style() { return sdCircleProgressCss(); }
|
|
7310
7310
|
static get cmpMeta() { return {
|
|
@@ -7414,9 +7414,9 @@ class SdConfirmModal {
|
|
|
7414
7414
|
render() {
|
|
7415
7415
|
const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
|
|
7416
7416
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
|
|
7417
|
-
return (hAsync("div", { key: '
|
|
7417
|
+
return (hAsync("div", { key: '527f7377ba0ccf59b2a212a885e05b0cfa3b3431', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '2423769fb6e746cf1e89a9d28a11cf7fc6d70ded', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '44f12a1fc2b19cf55ac75011af503ae0bab3188d', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '50406274eca8bd43fec1cdd50d8e348e2270d11c', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: 'a320636aa68da78881583005d3a2d5af9252f566', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6702a46ad0d3db59b1bda03e506515ba302dd292', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '1fa38c64b283b38a2b2dd58f772f1968c06be04d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
7418
7418
|
this.customContentRef = el;
|
|
7419
|
-
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '
|
|
7419
|
+
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '217a024876abf99c9eddc7721a71ee7ce2f09308', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '58b585e8a4481e12df904e764357d50c30896987', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: 'd066d5deb7a6993fbc7ff38ad9015dc3148b3241', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button-v2", { key: '920e596824d7fadf478f520f1e7814f5ab27aa95', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
|
|
7420
7420
|
}
|
|
7421
7421
|
static get style() { return sdConfirmModalCss(); }
|
|
7422
7422
|
static get cmpMeta() { return {
|
|
@@ -7774,9 +7774,9 @@ class SdDatePicker {
|
|
|
7774
7774
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
7775
7775
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
7776
7776
|
};
|
|
7777
|
-
return (hAsync("sd-field", { key: '
|
|
7777
|
+
return (hAsync("sd-field", { key: 'b8a0f70ce797b4d28997c1870641077d9c067347', 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, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'fe9117f48031e5524e2c751586f4b584a015000c', class: "sd-date-picker", ref: el => {
|
|
7778
7778
|
this.triggerRef = el;
|
|
7779
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
7779
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'd1bbcccf9de8b9aadb56291fdd2fa335af8c82dd', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '37a5c22f48e077e943a3701d4d686a52c102459e', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: 'dcc2248ad0963fb924f85aad59a6b24d7f3c23d8', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
7780
7780
|
}
|
|
7781
7781
|
static get watchers() { return {
|
|
7782
7782
|
"isOpen": [{
|
|
@@ -7958,7 +7958,7 @@ class SdDatePickerCalendar {
|
|
|
7958
7958
|
'--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
|
|
7959
7959
|
'--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
|
|
7960
7960
|
};
|
|
7961
|
-
return (hAsync("div", { key: '
|
|
7961
|
+
return (hAsync("div", { key: '8b1562e7be35eefd8b05c66931f6288edc48d4f7', class: "sd-date-picker-calendar", style: cssVars }, hAsync("div", { key: '0a5b4eeeb54eed144fcb89a2030fa33783e187e3', class: "sd-date-picker-calendar__header" }, hAsync("div", { key: '9d522b1a52afba7f035f2898aaec7252340f8f57', class: "sd-date-picker-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '944e17391090faf35e68d39b2c8c8de04ef115e5', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '2b708445cb919ecec6a72b9532a83d09c3324f77', class: "sd-date-picker-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '501f4ac1ba04fe55856f891b8738454abe358d6b', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: 'dff5ff19a16897c79ac85c887ebe358ecefb910b', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'cee819c90306c593e201aefcf278ecb6aeca2ee6', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '73c2fddb26e26fed12218a8320dce522c5de1303', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'abaa67ebd52b3e906989b84ead4a74187da7a176', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: 'e90263362f21b2521bea4e587f801fa2994a618d', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '6913c667bd423d5930f7c3b802b391e15c6522c9', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), hAsync("div", { key: '7c85954ecc18216ebab15f9249882f88965e6490', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
|
|
7962
7962
|
const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
|
|
7963
7963
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
7964
7964
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -8029,10 +8029,10 @@ class SdDatePickerTrigger {
|
|
|
8029
8029
|
? DATEPICKER_COLORS.icon.disabled
|
|
8030
8030
|
: DATEPICKER_COLORS.icon.default,
|
|
8031
8031
|
};
|
|
8032
|
-
return (hAsync("div", { key: '
|
|
8032
|
+
return (hAsync("div", { key: 'b68ee54fcd6dc1fe5aa4e1f157ebd2f7603240c6', class: {
|
|
8033
8033
|
'sd-date-picker-trigger': true,
|
|
8034
8034
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
8035
|
-
}, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '
|
|
8035
|
+
}, style: cssVars, onClick: this.handleClick }, hAsync("sd-icon", { key: '8cf46b98ab2f4839e631af68451185fd849ed45f', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '971afb2a5c045800ebdd96df579df362ccc950c6', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
8036
8036
|
}
|
|
8037
8037
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
8038
8038
|
static get cmpMeta() { return {
|
|
@@ -8453,7 +8453,7 @@ class SdDateRangePickerCalendar {
|
|
|
8453
8453
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
8454
8454
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
8455
8455
|
};
|
|
8456
|
-
return (hAsync(Fragment, { key: '
|
|
8456
|
+
return (hAsync(Fragment, { key: 'e925fa935f807e22b22a2f65b4af5b2568865781' }, hAsync("div", { key: 'be601b16d179d91292b58c3b70ce6a4aa4f5e59a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'e193b983a7eb75a227ea8e1d13839dcc9e875588', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '6f2ea95c2fd490a46ac40f6a526ca028920bc564', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
8457
8457
|
}
|
|
8458
8458
|
static get watchers() { return {
|
|
8459
8459
|
"value": [{
|
|
@@ -8821,7 +8821,7 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8821
8821
|
}
|
|
8822
8822
|
render() {
|
|
8823
8823
|
const { config, preset } = this.resolvedConfig;
|
|
8824
|
-
return (hAsync("div", { key: '
|
|
8824
|
+
return (hAsync("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, hAsync("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: {
|
|
8825
8825
|
'--sd-dropdown-button-bg': config.color,
|
|
8826
8826
|
'--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
|
|
8827
8827
|
'--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
|
|
@@ -8831,10 +8831,10 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8831
8831
|
'--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
|
|
8832
8832
|
'--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
|
|
8833
8833
|
'--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
|
|
8834
|
-
} }, hAsync("span", { key: '
|
|
8834
|
+
} }, hAsync("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
|
|
8835
8835
|
'sd-dropdown-button__trigger-icon': true,
|
|
8836
8836
|
'sd-dropdown-button__trigger-icon--open': this.isOpen,
|
|
8837
|
-
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: '
|
|
8837
|
+
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
|
|
8838
8838
|
}
|
|
8839
8839
|
static get watchers() { return {
|
|
8840
8840
|
"isOpen": [{
|
|
@@ -9105,20 +9105,20 @@ class SdField {
|
|
|
9105
9105
|
: {}),
|
|
9106
9106
|
}
|
|
9107
9107
|
: {};
|
|
9108
|
-
return (hAsync("div", { key: '
|
|
9108
|
+
return (hAsync("div", { key: '1968d09203629bca596f6569720d532cae387654', class: {
|
|
9109
9109
|
'sd-field': true,
|
|
9110
9110
|
'sd-field--has-label': !!this.label,
|
|
9111
9111
|
'sd-field--has-addon': !!addon,
|
|
9112
9112
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
9113
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '
|
|
9113
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: 'c373b7878033026747c8c4fa5d984d036d391cd8', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'd6a379920eded2abb88b9f9260108a32c80ca888', class: "sd-field__main", style: this.width
|
|
9114
9114
|
? {
|
|
9115
9115
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
9116
9116
|
flex: 'none',
|
|
9117
9117
|
}
|
|
9118
|
-
: {} }, hAsync("div", { key: '
|
|
9118
|
+
: {} }, hAsync("div", { key: '25aa5a21fed7d1482629e1f0c07fc2e3b5440c3e', class: {
|
|
9119
9119
|
'sd-field__control': true,
|
|
9120
9120
|
'sd-field__control--has-addon': !!addon,
|
|
9121
|
-
} }, addon && hAsync("div", { key: '
|
|
9121
|
+
} }, addon && hAsync("div", { key: 'e6b9edaaef227f202b8cd1b0f921dd3a07cbd296', class: "sd-field__addon" }, addon), hAsync("slot", { key: 'ecee94ec7996f99738508165c58afd07eced9d24' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
|
|
9122
9122
|
}
|
|
9123
9123
|
renderLabel(label) {
|
|
9124
9124
|
if (!label)
|
|
@@ -9591,8 +9591,13 @@ class SdFloatingPopover {
|
|
|
9591
9591
|
return;
|
|
9592
9592
|
this.close.emit();
|
|
9593
9593
|
}
|
|
9594
|
+
handleKeydown(e) {
|
|
9595
|
+
if (e.key === 'Escape') {
|
|
9596
|
+
this.close.emit();
|
|
9597
|
+
}
|
|
9598
|
+
}
|
|
9594
9599
|
render() {
|
|
9595
|
-
return hAsync("slot", { key: '
|
|
9600
|
+
return hAsync("slot", { key: 'c10da1f592b785b1c7540ba76e9d1768abeb0c11' });
|
|
9596
9601
|
}
|
|
9597
9602
|
static get style() { return sdFloatingPortalCss(); }
|
|
9598
9603
|
static get cmpMeta() { return {
|
|
@@ -9606,7 +9611,7 @@ class SdFloatingPopover {
|
|
|
9606
9611
|
"placement": [1],
|
|
9607
9612
|
"open": [4]
|
|
9608
9613
|
},
|
|
9609
|
-
"$listeners$": [[9, "scroll", "updatePosition"], [9, "resize", "updatePosition"], [9, "mousedown", "handleMouseDown"], [8, "click", "handleWindowClick"]],
|
|
9614
|
+
"$listeners$": [[9, "scroll", "updatePosition"], [9, "resize", "updatePosition"], [9, "mousedown", "handleMouseDown"], [8, "click", "handleWindowClick"], [8, "keydown", "handleKeydown"]],
|
|
9610
9615
|
"$lazyBundleId$": "-",
|
|
9611
9616
|
"$attrsToReflect$": []
|
|
9612
9617
|
}; }
|
|
@@ -9849,7 +9854,7 @@ class SdGhostButton {
|
|
|
9849
9854
|
? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
|
|
9850
9855
|
: GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
|
|
9851
9856
|
const accessibleName = this.ariaLabel.trim() || undefined;
|
|
9852
|
-
return (hAsync("button", { key: '
|
|
9857
|
+
return (hAsync("button", { key: '4d5159cb897b6c468380f18eba1eca218d24920e', class: {
|
|
9853
9858
|
'sd-ghost-button': true,
|
|
9854
9859
|
'sd-ghost-button--disabled': this.disabled,
|
|
9855
9860
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
@@ -9858,7 +9863,7 @@ class SdGhostButton {
|
|
|
9858
9863
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
|
|
9859
9864
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
9860
9865
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
9861
|
-
}, onClick: this.handleClick }, hAsync("sd-icon", { key: '
|
|
9866
|
+
}, onClick: this.handleClick }, hAsync("sd-icon", { key: '0461580c901aea244a3d0e693fb94fd6354873ab', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
9862
9867
|
}
|
|
9863
9868
|
static get style() { return sdGhostButtonCss(); }
|
|
9864
9869
|
static get cmpMeta() { return {
|
|
@@ -10769,12 +10774,12 @@ class SdInput {
|
|
|
10769
10774
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
10770
10775
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
10771
10776
|
};
|
|
10772
|
-
return (hAsync("sd-field", { key: '
|
|
10777
|
+
return (hAsync("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 }, hAsync("label", { key: 'aaef18c323710235b41d76b26a21380cadcc6e0f', class: "sd-input__content" }, hAsync("slot", { key: 'fd5d5845acf9d5351dec5af84e09d91246de8a68', name: "prefix" }), hAsync("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 }), hAsync("slot", { key: '79918e68de3045b509a27d8567e095665040689b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'f5358346a20830c1fef955a2bb6783156b251178', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
10773
10778
|
if (this.disabled)
|
|
10774
10779
|
return;
|
|
10775
10780
|
this.internalValue = '';
|
|
10776
10781
|
await this.formField?.sdValidate();
|
|
10777
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
10782
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '77108ea21a4b9afc9e9051c98d4d49bcb571cffb', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
|
|
10778
10783
|
if (this.disabled)
|
|
10779
10784
|
return;
|
|
10780
10785
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -10854,10 +10859,10 @@ class SdLoadingContainer {
|
|
|
10854
10859
|
this.visible = false;
|
|
10855
10860
|
}
|
|
10856
10861
|
render() {
|
|
10857
|
-
return (hAsync("div", { key: '
|
|
10862
|
+
return (hAsync("div", { key: '7887102a2b03f911fad57784b3b45b12d2265ae2', class: {
|
|
10858
10863
|
'sd-loading-container': true,
|
|
10859
10864
|
'sd-loading-container--visible': this.visible,
|
|
10860
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
10865
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '0f815029574907643be52b50a6c8be8e66ced072', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '9ea0faf8ed4094b3fd93a6e29c55130d58b245fe', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '6e89faad35f282d91098c213879c0ecf8d05a5ed', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '05d3128ecf91a372a426a2508535c7789aff9bc1', class: "sd-loading-container__message" }, this.message)))));
|
|
10861
10866
|
}
|
|
10862
10867
|
static get style() { return sdLoadingContainerCss(); }
|
|
10863
10868
|
static get cmpMeta() { return {
|
|
@@ -10950,7 +10955,7 @@ class SdLoadingModal {
|
|
|
10950
10955
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
10951
10956
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
10952
10957
|
};
|
|
10953
|
-
return (hAsync(Host, { key: '
|
|
10958
|
+
return (hAsync(Host, { key: 'd7e6e7d81ad63a6ddba6c4db9f49695be96b83f6', style: hostStyle }, hAsync("div", { key: '96a50aa04c7cab1c8797b7a187504107e383182b', class: "sd-loading-modal" }, hAsync("div", { key: '6741f7d180be2a7ffa4588aa73bf0b3831e3c869', class: "sd-loading-modal__content" }, this.state === 'loading' ? (hAsync("sd-circle-progress", { indeterminate: true })) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("p", { key: 'cd7d922fc8c8cd51de0a49e106d78a5254c9c35e', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (hAsync("div", { key: '78a926af4940be80da984cf4e55e8dfee50d6c31', class: "sd-loading-modal__button" }, hAsync("sd-button-v2", { key: 'a2e4ddf9b4b82fb6cecd9d859e6b95f8dd540137', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
10954
10959
|
}
|
|
10955
10960
|
static get style() { return sdLoadingModalCss(); }
|
|
10956
10961
|
static get cmpMeta() { return {
|
|
@@ -11736,12 +11741,12 @@ class SdNumberInput {
|
|
|
11736
11741
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
11737
11742
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
11738
11743
|
};
|
|
11739
|
-
return (hAsync("sd-field", { key: '
|
|
11744
|
+
return (hAsync("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 }, hAsync("div", { key: '565de4d4a79219bc8d6e9c8f4528ec93a655c376', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'fa27f209b09a03121eb89959164a4a349d525d9a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '7f4fe23f4b0eba4a06e0153338228710365ce57f', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
11740
11745
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11741
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '
|
|
11746
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '55a96b32e383cdf8d5b253336130460275373f41', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("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: {
|
|
11742
11747
|
textAlign: this.useButton ? 'center' : 'right',
|
|
11743
11748
|
...this.inputStyle,
|
|
11744
|
-
} }), this.inputSuffix && (hAsync("span", { key: '
|
|
11749
|
+
} }), this.inputSuffix && (hAsync("span", { key: '777730846e62dd03a9193cf582908a059789b329', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: 'ef8b471cb1d2cbd3a5b350ddbbf856e3bd104567', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'e2440c5a4571b69dc0e91ab0b10dffdd8242b1d8', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
11745
11750
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11746
11751
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
11747
11752
|
}
|
|
@@ -11947,13 +11952,13 @@ class SdPagination {
|
|
|
11947
11952
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
11948
11953
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
11949
11954
|
};
|
|
11950
|
-
return (hAsync("div", { key: '
|
|
11955
|
+
return (hAsync("div", { key: '2b9efc3a0340799a39e7bbfe6f3a270b7cc5f0c7', class: {
|
|
11951
11956
|
'sd-pagination': true,
|
|
11952
11957
|
'sd-pagination--simple': this.simple,
|
|
11953
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
11958
|
+
}, style: cssVars }, hAsync("div", { key: 'af585a4e9ad2fc25e47cb42fdcc66850d6210fd1', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
11954
11959
|
'sd-pagination__item': true,
|
|
11955
11960
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
11956
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
11961
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3128e19dee5f2d00fcc5603f96f323afaf2750d4', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
11957
11962
|
}
|
|
11958
11963
|
static get style() { return sdPaginationCss(); }
|
|
11959
11964
|
static get cmpMeta() { return {
|
|
@@ -11983,6 +11988,7 @@ const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:
|
|
|
11983
11988
|
class SdPopover {
|
|
11984
11989
|
constructor(hostRef) {
|
|
11985
11990
|
registerInstance(this, hostRef);
|
|
11991
|
+
this.showChange = createEvent(this, "sdShowChange", 7);
|
|
11986
11992
|
}
|
|
11987
11993
|
get el() { return getElement(this); }
|
|
11988
11994
|
show = false;
|
|
@@ -11997,20 +12003,17 @@ class SdPopover {
|
|
|
11997
12003
|
messages = [];
|
|
11998
12004
|
buttons = [];
|
|
11999
12005
|
menuClass = '';
|
|
12000
|
-
noHover = true;
|
|
12001
12006
|
useClose = false;
|
|
12002
|
-
|
|
12003
|
-
slotContent = '';
|
|
12004
|
-
watchShowHandler(newValue) {
|
|
12005
|
-
this.showPopover = newValue;
|
|
12006
|
-
}
|
|
12007
|
-
componentWillLoad() {
|
|
12008
|
-
this.showPopover = this.show;
|
|
12009
|
-
this.slotContent = this.el.innerHTML;
|
|
12010
|
-
}
|
|
12007
|
+
showChange;
|
|
12011
12008
|
buttonEl;
|
|
12009
|
+
setShow = (next) => {
|
|
12010
|
+
if (this.show === next)
|
|
12011
|
+
return;
|
|
12012
|
+
this.show = next;
|
|
12013
|
+
this.showChange.emit(next);
|
|
12014
|
+
};
|
|
12012
12015
|
get popoverOffset() {
|
|
12013
|
-
switch (this.placement) {
|
|
12016
|
+
switch (this.placement ?? 'bottom') {
|
|
12014
12017
|
case 'top':
|
|
12015
12018
|
return [0, -4];
|
|
12016
12019
|
case 'bottom':
|
|
@@ -12021,24 +12024,26 @@ class SdPopover {
|
|
|
12021
12024
|
return [4, 0];
|
|
12022
12025
|
}
|
|
12023
12026
|
}
|
|
12024
|
-
handleClose = () =>
|
|
12025
|
-
this.showPopover = false;
|
|
12026
|
-
};
|
|
12027
|
+
handleClose = () => this.setShow(false);
|
|
12027
12028
|
render() {
|
|
12028
|
-
|
|
12029
|
+
const placement = this.placement ?? 'bottom';
|
|
12030
|
+
const color = this.color ?? '#01BB4B';
|
|
12031
|
+
const icon = this.icon ?? 'helpOutline';
|
|
12032
|
+
const iconSize = this.iconSize ?? 12;
|
|
12033
|
+
const buttonSize = this.buttonSize ?? 'sm';
|
|
12034
|
+
const buttonVariant = this.buttonVariant ?? 'primary';
|
|
12035
|
+
const menuClass = this.menuClass ?? '';
|
|
12036
|
+
const messages = Array.isArray(this.messages) ? this.messages : [];
|
|
12037
|
+
const buttons = Array.isArray(this.buttons) ? this.buttons : [];
|
|
12038
|
+
return (hAsync(Fragment, { key: 'e576deaacba9395c5aeb76fd13baa0dc1e908d38' }, this.label ? (hAsync("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) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: '7520067b46527c22108292a659dd7e8fba85397c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: 'ba48632dd93359851bd87f4d55f2341653b0caab', class: {
|
|
12029
12039
|
'sd-floating-menu': true,
|
|
12030
12040
|
'sd-floating-menu--popover': true,
|
|
12031
|
-
[`sd-floating-menu--${
|
|
12032
|
-
[
|
|
12041
|
+
[`sd-floating-menu--${placement}`]: true,
|
|
12042
|
+
[menuClass]: !!menuClass,
|
|
12033
12043
|
}, style: {
|
|
12034
12044
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
12035
|
-
} }, hAsync("i", { key: '
|
|
12045
|
+
} }, hAsync("i", { key: 'fce80e5bc6f49f5dbc1772f910eae0fb9bc09a6b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '32aaa3b00f7ac77d47fd2bc3c968a7a4c20102c6' })), hAsync("div", { key: '29b3240126412070466acee7ee1d061d235ba51e', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '6cb5cf4531f573e93146a552b34831dc04851661', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (hAsync("div", { key: 'ba15bb4efc4af37dd89b0da61539f516cc31a2f3', class: "sd-floating-menu__messages" }, messages.map((message, i) => (hAsync("div", { key: `msg-${i}` }, message))))), buttons.length > 0 && (hAsync("div", { key: '2656545909634d8c54e9d34155e699041b5512f5', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${buttons.length}` }, buttons.map((button, i) => (hAsync("sd-button", { key: `btn-${i}`, ...button })))))), this.useClose && (hAsync("sd-ghost-button", { key: '315bf10dde1b7cde5727beb101a1a1ad07966138', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
|
|
12036
12046
|
}
|
|
12037
|
-
static get watchers() { return {
|
|
12038
|
-
"show": [{
|
|
12039
|
-
"watchShowHandler": 0
|
|
12040
|
-
}]
|
|
12041
|
-
}; }
|
|
12042
12047
|
static get style() { return sdPopoverCss(); }
|
|
12043
12048
|
static get cmpMeta() { return {
|
|
12044
12049
|
"$flags$": 512,
|
|
@@ -12052,18 +12057,15 @@ class SdPopover {
|
|
|
12052
12057
|
"label": [1],
|
|
12053
12058
|
"buttonSize": [513, "button-size"],
|
|
12054
12059
|
"buttonVariant": [513, "button-variant"],
|
|
12055
|
-
"menuTitle": [
|
|
12060
|
+
"menuTitle": [1, "menu-title"],
|
|
12056
12061
|
"messages": [16],
|
|
12057
12062
|
"buttons": [16],
|
|
12058
12063
|
"menuClass": [1, "menu-class"],
|
|
12059
|
-
"
|
|
12060
|
-
"useClose": [4, "use-close"],
|
|
12061
|
-
"showPopover": [32],
|
|
12062
|
-
"slotContent": [32]
|
|
12064
|
+
"useClose": [4, "use-close"]
|
|
12063
12065
|
},
|
|
12064
12066
|
"$listeners$": undefined,
|
|
12065
12067
|
"$lazyBundleId$": "-",
|
|
12066
|
-
"$attrsToReflect$": [["placement", "placement"], ["color", "color"], ["icon", "icon"], ["iconSize", "icon-size"], ["buttonSize", "button-size"], ["buttonVariant", "button-variant"]
|
|
12068
|
+
"$attrsToReflect$": [["placement", "placement"], ["color", "color"], ["icon", "icon"], ["iconSize", "icon-size"], ["buttonSize", "button-size"], ["buttonVariant", "button-variant"]]
|
|
12067
12069
|
}; }
|
|
12068
12070
|
}
|
|
12069
12071
|
|
|
@@ -12292,7 +12294,7 @@ class SdPortal {
|
|
|
12292
12294
|
this.close.emit();
|
|
12293
12295
|
}
|
|
12294
12296
|
render() {
|
|
12295
|
-
return hAsync("slot", { key: '
|
|
12297
|
+
return hAsync("slot", { key: 'fa3033a01d6c8f6878c91367b9670206ab5c71d7' });
|
|
12296
12298
|
}
|
|
12297
12299
|
static get watchers() { return {
|
|
12298
12300
|
"open": [{
|
|
@@ -12505,7 +12507,7 @@ class SdRadio {
|
|
|
12505
12507
|
'--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
|
|
12506
12508
|
'--sd-radio-label-color': RADIO_COLORS.label,
|
|
12507
12509
|
};
|
|
12508
|
-
return (hAsync("label", { key: '
|
|
12510
|
+
return (hAsync("label", { key: '2b809f1f3ce39e6dd2429cf1c48a935500287614', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("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 }), hAsync("span", { key: '941fddbb939a46afbe72c642d3b6f6f252f143f1', class: "sd-radio__circle" }), this.label && hAsync("span", { key: 'e30139892e82b8da251525e3c717549a2b7522d0', class: "sd-radio__label" }, this.label)));
|
|
12509
12511
|
}
|
|
12510
12512
|
static get watchers() { return {
|
|
12511
12513
|
"value": [{
|
|
@@ -12696,7 +12698,7 @@ class SdRadioButton {
|
|
|
12696
12698
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
12697
12699
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
12698
12700
|
};
|
|
12699
|
-
return (hAsync("div", { key: '
|
|
12701
|
+
return (hAsync("div", { key: '67c8e7ad03fb6ee4cabd06591e3e11e5d38914f0', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
12700
12702
|
const isSelected = this.isOptionSelected(option);
|
|
12701
12703
|
const isDisabled = this.isOptionDisabled(option);
|
|
12702
12704
|
return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -12748,7 +12750,7 @@ class SdRadioGroup {
|
|
|
12748
12750
|
return classes.join(' ');
|
|
12749
12751
|
}
|
|
12750
12752
|
render() {
|
|
12751
|
-
return (hAsync("div", { key: '
|
|
12753
|
+
return (hAsync("div", { key: '5f6559df018e48958103d0a84a0f074f81bd255a', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
12752
12754
|
return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
|
|
12753
12755
|
})));
|
|
12754
12756
|
}
|
|
@@ -12944,7 +12946,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
12944
12946
|
}
|
|
12945
12947
|
};
|
|
12946
12948
|
render() {
|
|
12947
|
-
return (hAsync("sd-field", { key: '
|
|
12949
|
+
return (hAsync("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) }, hAsync("div", { key: 'a57d17cb3ff775c724f3a6c13025c04e031de45f', class: {
|
|
12948
12950
|
'sd-select': true,
|
|
12949
12951
|
'sd-select--disabled': this.disabled,
|
|
12950
12952
|
'sd-select--error': !!this.error,
|
|
@@ -14196,7 +14198,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
|
|
|
14196
14198
|
});
|
|
14197
14199
|
}
|
|
14198
14200
|
render() {
|
|
14199
|
-
return (hAsync("sd-field", { key: '
|
|
14201
|
+
return (hAsync("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' } }, hAsync("div", { key: '2dab2697f3e375d214b66464b0f57aa32e77757b', class: {
|
|
14200
14202
|
'sd-select-multiple-group': true,
|
|
14201
14203
|
'sd-select-multiple-group--open': this.isOpen,
|
|
14202
14204
|
'sd-select-multiple-group--disabled': this.disabled,
|
|
@@ -14547,11 +14549,29 @@ class SdSelectV2 {
|
|
|
14547
14549
|
hovered = false;
|
|
14548
14550
|
update;
|
|
14549
14551
|
dropDownShow;
|
|
14552
|
+
async sdFocus() {
|
|
14553
|
+
if (this.disabled)
|
|
14554
|
+
return;
|
|
14555
|
+
await this.triggerComponentRef?.sdFocus();
|
|
14556
|
+
}
|
|
14557
|
+
async sdOpen() {
|
|
14558
|
+
// sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
|
|
14559
|
+
await new Promise(resolve => setTimeout(resolve, 0));
|
|
14560
|
+
if (this.disabled || this.isOpen)
|
|
14561
|
+
return;
|
|
14562
|
+
this.prepareDropdownGeometry();
|
|
14563
|
+
if (this.closeAnimationTimer)
|
|
14564
|
+
clearTimeout(this.closeAnimationTimer);
|
|
14565
|
+
this.isAnimatingOut = false;
|
|
14566
|
+
this.isOpen = true;
|
|
14567
|
+
}
|
|
14550
14568
|
triggerRef;
|
|
14569
|
+
triggerComponentRef;
|
|
14551
14570
|
closeAnimationTimer;
|
|
14552
14571
|
internalName = nanoid$1();
|
|
14572
|
+
triggerHasFocus = false;
|
|
14553
14573
|
watchIsOpen(newValue) {
|
|
14554
|
-
this.
|
|
14574
|
+
this.syncFocusedState(newValue);
|
|
14555
14575
|
this.dropDownShow.emit({ isOpen: newValue });
|
|
14556
14576
|
}
|
|
14557
14577
|
get isMulti() {
|
|
@@ -14559,19 +14579,19 @@ class SdSelectV2 {
|
|
|
14559
14579
|
}
|
|
14560
14580
|
get displayText() {
|
|
14561
14581
|
if (this.isMulti) {
|
|
14562
|
-
if (!this.value ||
|
|
14582
|
+
if (!Array.isArray(this.value) || this.value.length === 0)
|
|
14563
14583
|
return '';
|
|
14564
|
-
|
|
14565
|
-
|
|
14566
|
-
|
|
14567
|
-
|
|
14568
|
-
|
|
14569
|
-
.
|
|
14570
|
-
|
|
14571
|
-
|
|
14572
|
-
|
|
14573
|
-
|
|
14574
|
-
|
|
14584
|
+
const flat = this.flattenOptions(this.options);
|
|
14585
|
+
return this.value
|
|
14586
|
+
.map(item => {
|
|
14587
|
+
if (item != null && typeof item === 'object') {
|
|
14588
|
+
const opt = item;
|
|
14589
|
+
return opt.label ?? flat.find(o => o.value === opt.value)?.label ?? '';
|
|
14590
|
+
}
|
|
14591
|
+
return flat.find(o => o.value === item)?.label ?? '';
|
|
14592
|
+
})
|
|
14593
|
+
.filter(Boolean)
|
|
14594
|
+
.join(', ');
|
|
14575
14595
|
}
|
|
14576
14596
|
if (this.value == null)
|
|
14577
14597
|
return '';
|
|
@@ -14646,20 +14666,33 @@ class SdSelectV2 {
|
|
|
14646
14666
|
this.isAnimatingOut = false;
|
|
14647
14667
|
}, SdSelectV2.CLOSE_ANIMATION_DURATION);
|
|
14648
14668
|
}
|
|
14649
|
-
|
|
14669
|
+
prepareDropdownGeometry() {
|
|
14650
14670
|
if (this.triggerRef) {
|
|
14651
14671
|
this.triggerWidth = `${this.triggerRef.offsetWidth}px`;
|
|
14652
14672
|
}
|
|
14653
14673
|
this.updateDropdownViewportConstraints();
|
|
14674
|
+
}
|
|
14675
|
+
syncFocusedState(isOpen = this.isOpen) {
|
|
14676
|
+
this.focused = isOpen || this.triggerHasFocus;
|
|
14677
|
+
}
|
|
14678
|
+
handleTriggerFocus = () => {
|
|
14679
|
+
this.triggerHasFocus = true;
|
|
14680
|
+
this.syncFocusedState();
|
|
14681
|
+
};
|
|
14682
|
+
handleTriggerBlur = () => {
|
|
14683
|
+
this.triggerHasFocus = false;
|
|
14684
|
+
this.syncFocusedState();
|
|
14685
|
+
};
|
|
14686
|
+
handleTriggerClick = () => {
|
|
14654
14687
|
if (this.isOpen) {
|
|
14655
14688
|
this.closeDropdown();
|
|
14689
|
+
return;
|
|
14656
14690
|
}
|
|
14657
|
-
|
|
14658
|
-
|
|
14659
|
-
|
|
14660
|
-
|
|
14661
|
-
|
|
14662
|
-
}
|
|
14691
|
+
this.prepareDropdownGeometry();
|
|
14692
|
+
if (this.closeAnimationTimer)
|
|
14693
|
+
clearTimeout(this.closeAnimationTimer);
|
|
14694
|
+
this.isAnimatingOut = false;
|
|
14695
|
+
this.isOpen = true;
|
|
14663
14696
|
};
|
|
14664
14697
|
emitUpdate(value) {
|
|
14665
14698
|
this.update.emit(value);
|
|
@@ -14696,9 +14729,7 @@ class SdSelectV2 {
|
|
|
14696
14729
|
}
|
|
14697
14730
|
else {
|
|
14698
14731
|
const exists = selected.some(s => s.value === option.value);
|
|
14699
|
-
newSelected = exists
|
|
14700
|
-
? selected.filter(s => s.value !== option.value)
|
|
14701
|
-
: [...selected, option];
|
|
14732
|
+
newSelected = exists ? selected.filter(s => s.value !== option.value) : [...selected, option];
|
|
14702
14733
|
}
|
|
14703
14734
|
this.value = this.toMultiValue(newSelected);
|
|
14704
14735
|
this.emitUpdate(this.value);
|
|
@@ -14720,13 +14751,15 @@ class SdSelectV2 {
|
|
|
14720
14751
|
this.closeDropdown();
|
|
14721
14752
|
},
|
|
14722
14753
|
};
|
|
14723
|
-
return (hAsync("sd-field", { key: '
|
|
14754
|
+
return (hAsync("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: () => {
|
|
14724
14755
|
this.hovered = true;
|
|
14725
14756
|
}, onMouseLeave: () => {
|
|
14726
14757
|
this.hovered = false;
|
|
14727
|
-
} }, hAsync("div", { key: '
|
|
14758
|
+
} }, hAsync("div", { key: '47677529c530f06cb3a35a30dd4cc9f9a34d8759', class: "sd-select-v2", ref: el => {
|
|
14728
14759
|
this.triggerRef = el;
|
|
14729
|
-
} }, hAsync("sd-select-v2-trigger", { key: '
|
|
14760
|
+
} }, hAsync("sd-select-v2-trigger", { key: '3aae441a7ec1a6d8faa0f04f41881f515b641853', ref: el => {
|
|
14761
|
+
this.triggerComponentRef = el;
|
|
14762
|
+
}, displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '7c92db46231f4c46ce94668ac220dc7ec14ad118', ...portalProps }, hAsync("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) })))));
|
|
14730
14763
|
}
|
|
14731
14764
|
static get watchers() { return {
|
|
14732
14765
|
"isOpen": [{
|
|
@@ -14765,7 +14798,9 @@ class SdSelectV2 {
|
|
|
14765
14798
|
"resolvedDropdownHeight": [32],
|
|
14766
14799
|
"resolvedMaxDropdownWidth": [32],
|
|
14767
14800
|
"focused": [32],
|
|
14768
|
-
"hovered": [32]
|
|
14801
|
+
"hovered": [32],
|
|
14802
|
+
"sdFocus": [64],
|
|
14803
|
+
"sdOpen": [64]
|
|
14769
14804
|
},
|
|
14770
14805
|
"$listeners$": undefined,
|
|
14771
14806
|
"$lazyBundleId$": "-",
|
|
@@ -15224,13 +15259,19 @@ class SdSelectV2Listbox {
|
|
|
15224
15259
|
* `children` is emptied by `filterTree`; in that case we fall back to the
|
|
15225
15260
|
* full original subtree because the user has no way to deselect descendants
|
|
15226
15261
|
* individually.
|
|
15262
|
+
*
|
|
15263
|
+
* disabled 항목은 사용자가 토글할 수 없으므로 leaves 집합에서 제외한다.
|
|
15264
|
+
* 호출처(그룹 토글 / 카운트 / indeterminate 판정)가 모두 동일하게 "실제
|
|
15265
|
+
* 토글 가능한 leaves" 만 보도록 통일한다.
|
|
15227
15266
|
*/
|
|
15228
15267
|
collectVisibleLeaves(option) {
|
|
15268
|
+
if (option.disabled)
|
|
15269
|
+
return [];
|
|
15229
15270
|
if (!option.children)
|
|
15230
15271
|
return [option];
|
|
15231
15272
|
if (option.children.length === 0) {
|
|
15232
15273
|
const original = this.findOriginalOption(option.value, this.options);
|
|
15233
|
-
return original ? this.collectLeaves(original) : [];
|
|
15274
|
+
return original ? this.collectLeaves(original).filter(l => !l.disabled) : [];
|
|
15234
15275
|
}
|
|
15235
15276
|
return option.children.flatMap(child => this.collectVisibleLeaves(child));
|
|
15236
15277
|
}
|
|
@@ -15400,7 +15441,7 @@ class SdSelectV2Listbox {
|
|
|
15400
15441
|
'--listbox-max-height': this.maxHeight,
|
|
15401
15442
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
15402
15443
|
};
|
|
15403
|
-
return (hAsync("div", { key: '
|
|
15444
|
+
return (hAsync("div", { key: '17ebae1a1589245944d7db5a05f2c011ad13e391', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-v2-list-item-search", { key: '181ddd3a11ebe3b81353d66111459c7929c5af0b', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '91114e82f60a6bdeb74142d6d7abea2871e6678e', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
15404
15445
|
this.listEl = el;
|
|
15405
15446
|
} }, this.isEmpty ? (hAsync("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("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) })))))));
|
|
15406
15447
|
}
|
|
@@ -15437,17 +15478,33 @@ class SdSelectV2Trigger {
|
|
|
15437
15478
|
constructor(hostRef) {
|
|
15438
15479
|
registerInstance(this, hostRef);
|
|
15439
15480
|
this.triggerClick = createEvent(this, "sdTriggerClick", 7);
|
|
15481
|
+
this.triggerFocus = createEvent(this, "sdTriggerFocus", 7);
|
|
15482
|
+
this.triggerBlur = createEvent(this, "sdTriggerBlur", 7);
|
|
15440
15483
|
}
|
|
15441
15484
|
displayText = '';
|
|
15442
15485
|
placeholder = '선택';
|
|
15443
15486
|
disabled = false;
|
|
15444
15487
|
isOpen = false;
|
|
15445
15488
|
triggerClick;
|
|
15489
|
+
triggerFocus;
|
|
15490
|
+
triggerBlur;
|
|
15491
|
+
triggerEl;
|
|
15492
|
+
async sdFocus() {
|
|
15493
|
+
if (this.disabled)
|
|
15494
|
+
return;
|
|
15495
|
+
this.triggerEl?.focus();
|
|
15496
|
+
}
|
|
15446
15497
|
handleClick = () => {
|
|
15447
15498
|
if (this.disabled)
|
|
15448
15499
|
return;
|
|
15449
15500
|
this.triggerClick.emit();
|
|
15450
15501
|
};
|
|
15502
|
+
handleFocus = () => {
|
|
15503
|
+
this.triggerFocus.emit();
|
|
15504
|
+
};
|
|
15505
|
+
handleBlur = () => {
|
|
15506
|
+
this.triggerBlur.emit();
|
|
15507
|
+
};
|
|
15451
15508
|
render() {
|
|
15452
15509
|
const hasValue = !!this.displayText;
|
|
15453
15510
|
const cssVars = {
|
|
@@ -15465,11 +15522,13 @@ class SdSelectV2Trigger {
|
|
|
15465
15522
|
? SELECT_COLORS.icon.disabled
|
|
15466
15523
|
: SELECT_COLORS.icon.default,
|
|
15467
15524
|
};
|
|
15468
|
-
return (hAsync("div", { key: '
|
|
15525
|
+
return (hAsync("div", { key: 'e5c4db3cfbaa29c0af7efd0376a972dee0e9db56', ref: el => {
|
|
15526
|
+
this.triggerEl = el;
|
|
15527
|
+
}, tabindex: this.disabled ? -1 : 0, class: {
|
|
15469
15528
|
'sd-select-v2-trigger': true,
|
|
15470
15529
|
'sd-select-v2-trigger--open': this.isOpen,
|
|
15471
15530
|
'sd-select-v2-trigger--disabled': this.disabled,
|
|
15472
|
-
}, style: cssVars, onClick: this.handleClick }, hAsync("div", { key: '
|
|
15531
|
+
}, style: cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '76a946a587f6245f8a21ecbf25c5a21895f35970', class: "sd-select-v2-trigger__content" }, hAsync("span", { key: '3224e13cc49371e7bcd8095a8b08bd62d4f8b295', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), hAsync("sd-icon", { key: 'ea81dc671b63b14040292ed2ff4084a9c9fc6fca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
15473
15532
|
'sd-select-v2-trigger__icon': true,
|
|
15474
15533
|
'sd-select-v2-trigger__icon--open': this.isOpen,
|
|
15475
15534
|
} }))));
|
|
@@ -15482,7 +15541,8 @@ class SdSelectV2Trigger {
|
|
|
15482
15541
|
"displayText": [1, "display-text"],
|
|
15483
15542
|
"placeholder": [1],
|
|
15484
15543
|
"disabled": [4],
|
|
15485
|
-
"isOpen": [4, "is-open"]
|
|
15544
|
+
"isOpen": [4, "is-open"],
|
|
15545
|
+
"sdFocus": [64]
|
|
15486
15546
|
},
|
|
15487
15547
|
"$listeners$": undefined,
|
|
15488
15548
|
"$lazyBundleId$": "-",
|
|
@@ -16296,7 +16356,7 @@ class SdTabs {
|
|
|
16296
16356
|
return `square_xs_${color}`;
|
|
16297
16357
|
}
|
|
16298
16358
|
render() {
|
|
16299
|
-
return (hAsync("div", { key: '
|
|
16359
|
+
return (hAsync("div", { key: '85326c946694a115b466f07395872429c467d72f', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
|
|
16300
16360
|
const badgeName = this.getBadgeName(tab);
|
|
16301
16361
|
return (hAsync("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, hAsync("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && hAsync("sd-tag", { name: badgeName, label: tab.badge.toString() })));
|
|
16302
16362
|
})));
|