@sellmate/design-system 1.0.18 → 1.0.20
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/{index--TtofS7_.js → index-D-PnW6jc.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{resolveColor-B7Ku3IGq.js → resolveColor-4RlaGD62.js} +226 -226
- package/dist/cjs/sd-badge.cjs.entry.js +4 -4
- package/dist/cjs/sd-button_21.cjs.entry.js +75 -54
- package/dist/cjs/sd-card.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-file-picker.cjs.entry.js +5 -5
- package/dist/cjs/sd-form.cjs.entry.js +1 -1
- package/dist/cjs/sd-guide.cjs.entry.js +4 -4
- package/dist/cjs/sd-popover.cjs.entry.js +4 -4
- package/dist/cjs/sd-progress.cjs.entry.js +4 -4
- package/dist/cjs/sd-radio-button-group.cjs.entry.js +2 -2
- package/dist/cjs/sd-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-option-group.cjs.entry.js +5 -5
- package/dist/cjs/sd-tabs.cjs.entry.js +2 -2
- package/dist/cjs/sd-tag.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast.cjs.entry.js +4 -4
- package/dist/cjs/sd-toggle-button.cjs.entry.js +2 -2
- package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
- package/dist/cjs/{tooltipArrow-QmTMaygR.js → tooltipArrow-CMyNLSC-.js} +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/assets/checkFilled/index.js +1 -1
- package/dist/collection/components/assets/checkOutline/index.js +1 -1
- package/dist/collection/components/sd-badge/sd-badge.css +1 -1
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-button/sd-button.css +65 -26
- package/dist/collection/components/sd-button/sd-button.js +11 -7
- package/dist/collection/components/sd-card/sd-card.css +1 -1
- package/dist/collection/components/sd-card/sd-card.js +1 -1
- package/dist/collection/components/sd-checkbox/sd-checkbox.css +11 -11
- package/dist/collection/components/sd-date-box/sd-date-box.css +5 -5
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.css +1 -1
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
- package/dist/collection/components/sd-field/sd-field.css +14 -11
- package/dist/collection/components/sd-field/sd-field.js +3 -3
- package/dist/collection/components/sd-file-picker/sd-file-picker.css +10 -10
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +3 -3
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.css +15 -15
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
- package/dist/collection/components/sd-guide/sd-guide.css +66 -27
- package/dist/collection/components/sd-guide/sd-guide.js +2 -2
- package/dist/collection/components/sd-icon/sd-icon.js +2 -2
- package/dist/collection/components/sd-input/sd-input.css +2 -2
- package/dist/collection/components/sd-input/sd-input.js +1 -1
- package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
- package/dist/collection/components/sd-number-input/sd-number-input.css +5 -5
- package/dist/collection/components/sd-number-input/sd-number-input.js +5 -4
- package/dist/collection/components/sd-pagination/sd-pagination.css +4 -4
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +3 -3
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-progress/sd-progress.css +6 -6
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- package/dist/collection/components/sd-radio/sd-radio.css +8 -8
- package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.css +7 -7
- package/dist/collection/components/sd-radio-group/sd-radio-group.css +8 -8
- package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.css +2 -2
- package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js +2 -2
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css +4 -4
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +3 -3
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +2 -2
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css +6 -6
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- package/dist/collection/components/sd-table/sd-table.css +14 -14
- package/dist/collection/components/sd-tabs/sd-tabs.css +8 -8
- package/dist/collection/components/sd-textarea/sd-textarea.css +6 -6
- package/dist/collection/components/sd-textarea/sd-textarea.js +2 -2
- package/dist/collection/components/sd-toast/sd-toast.js +3 -3
- package/dist/collection/components/sd-toggle/sd-toggle.css +6 -6
- package/dist/collection/components/sd-toggle-button/sd-toggle-button.css +9 -9
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-D4TaDVPI.js → p-B-UC5tW2.js} +1 -1
- package/dist/components/p-B82gJZ4z.js +1 -0
- package/dist/components/{p-CIDMF6fj.js → p-BVFlD1Lp.js} +1 -1
- package/dist/components/{p-DAj1C6hg.js → p-C0yQ73oI.js} +1 -1
- package/dist/components/{p-CNgER9mk.js → p-C1XPuuO-.js} +1 -1
- package/dist/components/{p-DojkP9rD.js → p-C6J-ZZxF.js} +1 -1
- package/dist/components/p-CDehvEQ5.js +1 -0
- package/dist/components/p-CHAh-_qx.js +1 -0
- package/dist/components/{p-IFDX7o1t.js → p-CU5TiEeI.js} +1 -1
- package/dist/components/{p-DOdjsjwr.js → p-CWg2auF3.js} +1 -1
- package/dist/components/{p-Bdq3Hub5.js → p-CaEyReID.js} +1 -1
- package/dist/components/{p-Bxs0Hp4o.js → p-CbQobmaB.js} +1 -1
- package/dist/components/{p-BDlbibwl.js → p-Cef06v8S.js} +1 -1
- package/dist/components/{p-Cc-cekjN.js → p-D0U1cMbs.js} +1 -1
- package/dist/components/{p-Ay5V-5Fu.js → p-D35gOcGh.js} +1 -1
- package/dist/components/p-DUqcOPNn.js +1 -0
- package/dist/components/{p-BE_euN7G.js → p-DdNQILvd.js} +1 -1
- package/dist/components/{p-7hAgxVaZ.js → p-DdOM8yc2.js} +1 -1
- package/dist/components/{p-Csz5Om2E.js → p-J-Yn0oS3.js} +1 -1
- package/dist/components/{p-BkU8yMUR.js → p-MmKik3mL.js} +1 -1
- package/dist/components/{p-Czdx4VDt.js → p-qSu-ayDy.js} +1 -1
- package/dist/components/{p-GjahxZoU.js → p-rn5S2icF.js} +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-box.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-form.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-loading-spinner.js +1 -1
- package/dist/components/sd-modal-card.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-progress.js +1 -1
- package/dist/components/sd-radio-button-group.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-multiple-group.js +1 -1
- package/dist/components/sd-select-multiple.js +1 -1
- package/dist/components/sd-select-option-group.js +1 -1
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select-search-input.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-tag.js +1 -1
- package/dist/components/sd-textarea.js +1 -1
- package/dist/components/sd-toast.js +1 -1
- package/dist/components/sd-toggle-button.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.css +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-ae33c0ca.entry.js → p-0406b7f9.entry.js} +1 -1
- package/dist/design-system/{p-a4f8f2cd.entry.js → p-103de692.entry.js} +1 -1
- package/dist/design-system/{p-fe119275.entry.js → p-32c27eca.entry.js} +1 -1
- package/dist/design-system/{p-21da28bf.entry.js → p-3301c280.entry.js} +1 -1
- package/dist/design-system/{p-12669d98.entry.js → p-3d03b19e.entry.js} +1 -1
- package/dist/design-system/p-3e07e92a.entry.js +1 -0
- package/dist/design-system/{p-999055e0.entry.js → p-3edd59b5.entry.js} +1 -1
- package/dist/design-system/{p-6f68dfd1.entry.js → p-55c13597.entry.js} +1 -1
- package/dist/design-system/{p-2663d30c.entry.js → p-646ed990.entry.js} +1 -1
- package/dist/design-system/p-679e4367.entry.js +1 -0
- package/dist/design-system/p-822233ee.entry.js +1 -0
- package/dist/design-system/{p-69fafae5.entry.js → p-8f99cd66.entry.js} +1 -1
- package/dist/design-system/{p-4a733ba8.entry.js → p-8fde8570.entry.js} +1 -1
- package/dist/design-system/{p-Bu6bb0Fx.js → p-Bak0zfmv.js} +1 -1
- package/dist/design-system/p-C_an1PQ3.js +2 -0
- package/dist/design-system/p-DUqcOPNn.js +1 -0
- package/dist/design-system/{p-434d7316.entry.js → p-ab3b6f63.entry.js} +1 -1
- package/dist/design-system/p-d021a375.entry.js +1 -0
- package/dist/design-system/{p-f2b8fd2a.entry.js → p-d344fa9d.entry.js} +1 -1
- package/dist/design-system/{p-2c776f94.entry.js → p-d6b38732.entry.js} +1 -1
- package/dist/design-system/p-de339565.entry.js +1 -0
- package/dist/design-system/{p-f69a9ad8.entry.js → p-fc0e636b.entry.js} +1 -1
- package/dist/esm/design-system.js +2 -2
- package/dist/esm/{index-BNCQkS1w.js → index-C_an1PQ3.js} +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/{resolveColor-DcGvp3RM.js → resolveColor-DUqcOPNn.js} +226 -226
- package/dist/esm/sd-badge.entry.js +4 -4
- package/dist/esm/sd-button_21.entry.js +75 -54
- package/dist/esm/sd-card.entry.js +3 -3
- package/dist/esm/sd-date-picker.entry.js +2 -2
- package/dist/esm/sd-file-picker.entry.js +5 -5
- package/dist/esm/sd-form.entry.js +1 -1
- package/dist/esm/sd-guide.entry.js +4 -4
- package/dist/esm/sd-popover.entry.js +4 -4
- package/dist/esm/sd-progress.entry.js +4 -4
- package/dist/esm/sd-radio-button-group.entry.js +2 -2
- package/dist/esm/sd-radio-group.entry.js +2 -2
- package/dist/esm/sd-select-multiple-group.entry.js +2 -2
- package/dist/esm/sd-select-multiple.entry.js +2 -2
- package/dist/esm/sd-select-option-group.entry.js +5 -5
- package/dist/esm/sd-tabs.entry.js +2 -2
- package/dist/esm/sd-tag.entry.js +1 -1
- package/dist/esm/sd-toast.entry.js +4 -4
- package/dist/esm/sd-toggle-button.entry.js +2 -2
- package/dist/esm/sd-toggle.entry.js +2 -2
- package/dist/esm/{tooltipArrow-DSxHqrjN.js → tooltipArrow-BTp0AVR2.js} +1 -1
- package/dist/types/components/assets/checkFilled/index.d.ts +1 -1
- package/dist/types/components/assets/checkOutline/index.d.ts +1 -1
- package/dist/types/components/assets/index.d.ts +2 -2
- package/hydrate/index.js +329 -308
- package/hydrate/index.mjs +329 -308
- package/package.json +2 -2
- package/dist/components/p-4iQAU7kM.js +0 -1
- package/dist/components/p-B45-wHcP.js +0 -1
- package/dist/components/p-DHdV8DHV.js +0 -1
- package/dist/components/p-DcGvp3RM.js +0 -1
- package/dist/design-system/p-31175b5c.entry.js +0 -1
- package/dist/design-system/p-358de11a.entry.js +0 -1
- package/dist/design-system/p-BNCQkS1w.js +0 -2
- package/dist/design-system/p-DcGvp3RM.js +0 -1
- package/dist/design-system/p-b3a0300b.entry.js +0 -1
- package/dist/design-system/p-c5837bdf.entry.js +0 -1
- package/dist/design-system/p-d9af74c0.entry.js +0 -1
|
@@ -1,16 +1,33 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment, d as readTask } from './index-
|
|
2
|
-
import { r as resolveColor } from './resolveColor-
|
|
1
|
+
import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment, d as readTask } from './index-C_an1PQ3.js';
|
|
2
|
+
import { r as resolveColor } from './resolveColor-DUqcOPNn.js';
|
|
3
3
|
import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
|
|
4
4
|
import { n as nanoid, B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './select-keyboard-navigation-D8-D-mJX.js';
|
|
5
|
-
import { T as TooltipArrow } from './tooltipArrow-
|
|
5
|
+
import { T as TooltipArrow } from './tooltipArrow-BTp0AVR2.js';
|
|
6
|
+
|
|
7
|
+
const size = {
|
|
8
|
+
xs: {
|
|
9
|
+
icon: "12"
|
|
10
|
+
},
|
|
11
|
+
sm: {
|
|
12
|
+
icon: "16"
|
|
13
|
+
},
|
|
14
|
+
md: {
|
|
15
|
+
icon: "20"
|
|
16
|
+
},
|
|
17
|
+
lg: {
|
|
18
|
+
icon: "24"
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
var buttonTokens = {
|
|
22
|
+
size: size};
|
|
6
23
|
|
|
7
|
-
const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:
|
|
24
|
+
const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-radius-default, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}`;
|
|
8
25
|
|
|
9
26
|
const ICON_SIZES = {
|
|
10
|
-
xs:
|
|
11
|
-
sm:
|
|
12
|
-
md:
|
|
13
|
-
lg:
|
|
27
|
+
xs: Number(buttonTokens.size.xs.icon),
|
|
28
|
+
sm: Number(buttonTokens.size.sm.icon),
|
|
29
|
+
md: Number(buttonTokens.size.md.icon),
|
|
30
|
+
lg: Number(buttonTokens.size.lg.icon),
|
|
14
31
|
};
|
|
15
32
|
const SdButton = class {
|
|
16
33
|
constructor(hostRef) {
|
|
@@ -45,6 +62,9 @@ const SdButton = class {
|
|
|
45
62
|
if (this.disabled) {
|
|
46
63
|
classes.push('sd-button--disabled');
|
|
47
64
|
}
|
|
65
|
+
if (this.label) {
|
|
66
|
+
classes.push('sd-button--has-label');
|
|
67
|
+
}
|
|
48
68
|
if (!this.label && (this.icon || this.iconRight)) {
|
|
49
69
|
classes.push('sd-button--icon-only');
|
|
50
70
|
}
|
|
@@ -57,12 +77,12 @@ const SdButton = class {
|
|
|
57
77
|
const buttonClasses = this.getButtonClasses();
|
|
58
78
|
// 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
|
|
59
79
|
const resolvedColor = resolveColor(this.color);
|
|
60
|
-
return (h("button", { key: '
|
|
80
|
+
return (h("button", { key: 'b1436c0cdf0267446df9cd022df68a8a6c349ca5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '70f9450410dbc7b2603679cda397bc8f211928b1', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'ab09632262d175e8dc9a31df4e673470d128b274', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'c33e565c9108996ab4a3d84b5beaf1d8acbd5700', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '112a9649b77e7eb67198d0bf7bf407e9f7f71cd5', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
|
|
61
81
|
}
|
|
62
82
|
};
|
|
63
83
|
SdButton.style = sdButtonCss();
|
|
64
84
|
|
|
65
|
-
const sdCheckboxCss = () => `sd-checkbox{display:block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#
|
|
85
|
+
const sdCheckboxCss = () => `sd-checkbox{display:block;height:20px;line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px;max-height:20px}sd-checkbox .sd-checkbox>input{display:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg{border-color:#005CC9;background:#005CC9}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border:1px solid #0075FF;background:#D9EAFF}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border:1px solid transparent;background:#EEEEEE}sd-checkbox .sd-checkbox__bg{width:16px;height:16px;border-radius:2px;border:1px solid #888888;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:12px;color:#333333;line-height:20px}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:#EEEEEE;border:1px solid #CCCCCC !important}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border:1px solid #0075FF;background:#0075FF}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:white}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:#EEEEEE;border:1px solid #CCCCCC !important}`;
|
|
66
86
|
|
|
67
87
|
const SdCheckbox = class {
|
|
68
88
|
constructor(hostRef) {
|
|
@@ -147,7 +167,7 @@ const SdCheckbox = class {
|
|
|
147
167
|
};
|
|
148
168
|
SdCheckbox.style = sdCheckboxCss();
|
|
149
169
|
|
|
150
|
-
const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#
|
|
170
|
+
const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
|
|
151
171
|
|
|
152
172
|
const SdDateBox = class {
|
|
153
173
|
constructor(hostRef) {
|
|
@@ -206,7 +226,7 @@ const addDays = (inputDate, days) => {
|
|
|
206
226
|
return `${resultYear}-${resultMonth}-${resultDay}`;
|
|
207
227
|
};
|
|
208
228
|
|
|
209
|
-
const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-field__control.sc-sd-date-range-picker{min-width:210px}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#
|
|
229
|
+
const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-field__control.sc-sd-date-range-picker{min-width:210px}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#D8D8D8}`;
|
|
210
230
|
|
|
211
231
|
const SdDateRangePicker = class {
|
|
212
232
|
constructor(hostRef) {
|
|
@@ -366,10 +386,10 @@ const SdDateRangePicker = class {
|
|
|
366
386
|
this.setHoverDate(hoverDate);
|
|
367
387
|
}
|
|
368
388
|
render() {
|
|
369
|
-
return (h("div", { key: '
|
|
389
|
+
return (h("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
|
|
370
390
|
'sd-date-range-picker': true,
|
|
371
391
|
'sd-date-range-picker--disabled': this.disabled,
|
|
372
|
-
} }, h("sd-input", { key: '
|
|
392
|
+
} }, h("sd-input", { key: 'a84838a1a84d990b289f0b753ccf3e2f45da4770', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd926c672dcf457a68ebe644b32c90a03ba29b175', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0af519c7ac2ade00972e23b9ecb0344989d87f51', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'd9109e573215092c6b386ae27ac7377c4347df4c', class: "sd-date-range-picker__menu" }, h("div", { key: 'ca4743a26ed0571bc3b63218a32a113e50dbd81a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '6f0fe1ede6d171e749a241fbeec32056250709b9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '821526a069a845f271b0e5db607f747efe4e610c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9402009c8b034953d7ff4be5a4eea64d7fed21d', class: "header-label" }, this.prevYear), h("button", { key: 'b752631ab64e32a4a39c13898cc3db5e25897c4b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '62c6e0004ff1a0d8f260e11b9d17ea7ccca942ee', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3a05a7e02664be8d9dfb85d0bada03a2d352af12', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
|
|
373
393
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
374
394
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
|
|
375
395
|
}
|
|
@@ -381,7 +401,7 @@ const SdDateRangePicker = class {
|
|
|
381
401
|
};
|
|
382
402
|
SdDateRangePicker.style = sdDateRangePickerCss();
|
|
383
403
|
|
|
384
|
-
const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #
|
|
404
|
+
const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075FF !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #CCCCCC;border-right:none;border-radius:4px 0 0 4px;border-color:#AAAAAA;background-color:#F6F6F6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #AAAAAA;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #FB4444 !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075FF !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid #2BCE6C !important}sd-field .sd-field .sd-field__error-message{color:#FB4444;font-size:12px;line-height:20px;margin-top:4px}`;
|
|
385
405
|
|
|
386
406
|
const FORM_PARENT_TAGS = [
|
|
387
407
|
'sd-select',
|
|
@@ -501,15 +521,15 @@ const SdField = class {
|
|
|
501
521
|
}
|
|
502
522
|
}
|
|
503
523
|
render() {
|
|
504
|
-
return (h("div", { key: '
|
|
524
|
+
return (h("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
|
|
505
525
|
'sd-field': true,
|
|
506
526
|
'sd-field--has-label': !!this.label,
|
|
507
527
|
'sd-field--has-label-inside': !!this.label && this.insideLabel,
|
|
508
528
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
509
|
-
} }, h("div", { key: '
|
|
529
|
+
} }, h("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
|
|
510
530
|
'sd-field__control': true,
|
|
511
531
|
'sd-field__control--label-inside ': !!this.label && this.insideLabel,
|
|
512
|
-
} }, h("slot", { key: '
|
|
532
|
+
} }, h("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && h("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
|
|
513
533
|
}
|
|
514
534
|
renderLabel(label) {
|
|
515
535
|
if (!label)
|
|
@@ -519,7 +539,7 @@ const SdField = class {
|
|
|
519
539
|
};
|
|
520
540
|
SdField.style = sdFieldCss();
|
|
521
541
|
|
|
522
|
-
const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 20px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;background:#
|
|
542
|
+
const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 20px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;background:#07284A;color:#FFFFFF}.sd-floating-menu .sd-floating-menu__arrow{color:#07284A}.sd-floating-menu--default{background:#07284A;color:#FFFFFF}.sd-floating-menu--default .sd-floating-menu__arrow{color:#07284A}.sd-floating-menu--caution{background:#FCE6E6;color:#FB4444}.sd-floating-menu--caution .sd-floating-menu__arrow{color:#FCE6E6}.sd-floating-menu--notice{background:#FEF1EA;color:#FF6B00}.sd-floating-menu--notice .sd-floating-menu__arrow{color:#FEF1EA}.sd-floating-menu--accent{background:#E6F1FF;color:#0075FF}.sd-floating-menu--accent .sd-floating-menu__arrow{color:#E6F1FF}.sd-floating-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-weight:700;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}`;
|
|
523
543
|
|
|
524
544
|
const SdFloatingPopover = class {
|
|
525
545
|
constructor(hostRef) {
|
|
@@ -670,7 +690,7 @@ const SdFloatingPopover = class {
|
|
|
670
690
|
this.close.emit();
|
|
671
691
|
}
|
|
672
692
|
render() {
|
|
673
|
-
return h("slot", { key: '
|
|
693
|
+
return h("slot", { key: '2f33d335a7cf00ace576aed610a0e77d711a5b10' });
|
|
674
694
|
}
|
|
675
695
|
};
|
|
676
696
|
SdFloatingPopover.style = sdFloatingPortalCss();
|
|
@@ -1415,7 +1435,7 @@ const CheckFilled20 = (props) => (h("svg", { ...props, width: "20", height: "20"
|
|
|
1415
1435
|
|
|
1416
1436
|
const CheckFilled24 = (props) => (h("svg", { ...props, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM18.1299 8.46973C17.837 8.17703 17.3622 8.1769 17.0693 8.46973L10.8125 14.7275L7.09961 11.0146C6.80684 10.7221 6.33191 10.7223 6.03906 11.0146C5.74625 11.3075 5.7464 11.7823 6.03906 12.0752L10.1045 16.1416C10.495 16.5321 11.129 16.5321 11.5195 16.1416L18.1299 9.53027C18.4228 9.23738 18.4228 8.76262 18.1299 8.46973Z", fill: "currentColor" })));
|
|
1417
1437
|
|
|
1418
|
-
const
|
|
1438
|
+
const checkFilled = {
|
|
1419
1439
|
8: CheckFilled8,
|
|
1420
1440
|
10: CheckFilled10,
|
|
1421
1441
|
12: CheckFilled12,
|
|
@@ -1424,9 +1444,9 @@ const CheckFilled = {
|
|
|
1424
1444
|
24: CheckFilled24,
|
|
1425
1445
|
};
|
|
1426
1446
|
|
|
1427
|
-
var CheckFilled
|
|
1447
|
+
var CheckFilled = /*#__PURE__*/Object.freeze({
|
|
1428
1448
|
__proto__: null,
|
|
1429
|
-
|
|
1449
|
+
checkFilled: checkFilled
|
|
1430
1450
|
});
|
|
1431
1451
|
|
|
1432
1452
|
const CheckOutline8 = (props) => (h("svg", { ...props, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4 0.0332031C6.19058 0.0333789 7.9668 1.80938 7.9668 4C7.96662 6.19047 6.19047 7.96662 4 7.9668C1.80939 7.96679 0.0333844 6.19057 0.0332031 4C0.0332031 1.80927 1.80927 0.0332059 4 0.0332031ZM4 0.632812C2.14064 0.632815 0.632812 2.14064 0.632812 4C0.632994 5.8592 2.14076 7.36621 4 7.36621C5.8591 7.36603 7.36603 5.8591 7.36621 4C7.36621 2.14075 5.85921 0.632988 4 0.632812ZM5.6543 2.78809C5.77145 2.67093 5.96097 2.67093 6.07812 2.78809C6.19518 2.90525 6.19525 3.09479 6.07812 3.21191L3.875 5.41504C3.72544 5.5646 3.48274 5.56529 3.33301 5.41602L1.97754 4.06055C1.86045 3.94345 1.86057 3.75389 1.97754 3.63672C2.0947 3.51956 2.28421 3.51956 2.40137 3.63672L3.60352 4.83887L5.6543 2.78809Z", fill: "currentColor" })));
|
|
@@ -1441,7 +1461,7 @@ const CheckOutline20 = (props) => (h("svg", { ...props, width: "20", height: "20
|
|
|
1441
1461
|
|
|
1442
1462
|
const CheckOutline24 = (props) => (h("svg", { ...props, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 0.25C18.4893 0.25 23.75 5.51065 23.75 12C23.75 18.4893 18.4893 23.75 12 23.75C5.51065 23.75 0.25 18.4893 0.25 12C0.25 5.51065 5.51065 0.25 12 0.25ZM12 1.75C6.33908 1.75 1.75 6.33908 1.75 12C1.75 17.6609 6.33908 22.25 12 22.25C17.6609 22.25 22.25 17.6609 22.25 12C22.25 6.33908 17.6609 1.75 12 1.75ZM17.0693 8.46973C17.3622 8.1769 17.837 8.17703 18.1299 8.46973C18.4228 8.76262 18.4228 9.23738 18.1299 9.53027L11.5195 16.1416C11.129 16.5321 10.495 16.5321 10.1045 16.1416L6.03906 12.0752C5.7464 11.7823 5.74625 11.3075 6.03906 11.0146C6.33191 10.7223 6.80684 10.7221 7.09961 11.0146L10.8125 14.7275L17.0693 8.46973Z", fill: "currentColor" })));
|
|
1443
1463
|
|
|
1444
|
-
const
|
|
1464
|
+
const checkOutline = {
|
|
1445
1465
|
8: CheckOutline8,
|
|
1446
1466
|
10: CheckOutline10,
|
|
1447
1467
|
12: CheckOutline12,
|
|
@@ -1450,9 +1470,9 @@ const CheckOutline = {
|
|
|
1450
1470
|
24: CheckOutline24,
|
|
1451
1471
|
};
|
|
1452
1472
|
|
|
1453
|
-
var CheckOutline
|
|
1473
|
+
var CheckOutline = /*#__PURE__*/Object.freeze({
|
|
1454
1474
|
__proto__: null,
|
|
1455
|
-
|
|
1475
|
+
checkOutline: checkOutline
|
|
1456
1476
|
});
|
|
1457
1477
|
|
|
1458
1478
|
const ClockFilled8 = (props) => (h("svg", { ...props, width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4.00034 0.333313C6.02523 0.333489 7.66635 1.97537 7.66635 4.00031C7.66618 6.02509 6.02512 7.66614 4.00034 7.66632C1.9754 7.66632 0.333519 6.0252 0.333344 4.00031C0.333344 1.97526 1.97529 0.333313 4.00034 0.333313ZM4.00034 1.33331C3.81636 1.33331 3.66751 1.48239 3.66733 1.66632V3.99933C3.66733 4.18342 3.81624 4.33331 4.00034 4.33331H6.33334C6.51728 4.33313 6.66733 4.18331 6.66733 3.99933C6.66697 3.81565 6.51706 3.6665 6.33334 3.66632H4.33334V1.66632C4.33316 1.4825 4.18416 1.33349 4.00034 1.33331Z", fill: "currentColor" })));
|
|
@@ -2607,8 +2627,8 @@ const Icons = {
|
|
|
2607
2627
|
...CaretRight,
|
|
2608
2628
|
...CaretUp,
|
|
2609
2629
|
...Check,
|
|
2610
|
-
...CheckFilled
|
|
2611
|
-
...CheckOutline
|
|
2630
|
+
...CheckFilled,
|
|
2631
|
+
...CheckOutline,
|
|
2612
2632
|
...ClockFilled,
|
|
2613
2633
|
...ClockOutline,
|
|
2614
2634
|
...Close,
|
|
@@ -2684,12 +2704,12 @@ const SdIcon = class {
|
|
|
2684
2704
|
}
|
|
2685
2705
|
render() {
|
|
2686
2706
|
const IconComponent = Icons[this.name]?.[this.size];
|
|
2687
|
-
return (h("i", { key: '
|
|
2707
|
+
return (h("i", { key: '1d6a48769c99bbfe9576016e24766b8c82ab570e', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '3fdb4195ef13656e79b402a4eae2fb0210fb3a97', color: this.resolvedColor })));
|
|
2688
2708
|
}
|
|
2689
2709
|
};
|
|
2690
2710
|
SdIcon.style = sdIconCss();
|
|
2691
2711
|
|
|
2692
|
-
const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#
|
|
2712
|
+
const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#D8D8D8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:#333333;font-size:12px;line-height:20px;padding:0 8px}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:#888888}sd-input .sd-input__content .sd-input__native::placeholder{color:#AAAAAA}`;
|
|
2693
2713
|
|
|
2694
2714
|
const SdInput = class {
|
|
2695
2715
|
constructor(hostRef) {
|
|
@@ -2782,7 +2802,7 @@ const SdInput = class {
|
|
|
2782
2802
|
}
|
|
2783
2803
|
};
|
|
2784
2804
|
render() {
|
|
2785
|
-
return (h("sd-field", { key: '
|
|
2805
|
+
return (h("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), h("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, 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 }), h("slot", { key: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
|
|
2786
2806
|
this.internalValue = '';
|
|
2787
2807
|
await this.formField?.sdValidate();
|
|
2788
2808
|
} })))));
|
|
@@ -2809,7 +2829,7 @@ const SdLoadingSpinner = class {
|
|
|
2809
2829
|
return resolveColor(this.color);
|
|
2810
2830
|
}
|
|
2811
2831
|
render() {
|
|
2812
|
-
return (h(Fragment, { key: '
|
|
2832
|
+
return (h(Fragment, { key: 'c3b3448fcc65334af3246f80157b195ec5595afe' }, h("svg", { key: '24701b65d17e56434cf46b72dbd5acec208b5dc8', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'e19c68c082348d36eecd05fa561eee91182349f2', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
|
|
2813
2833
|
}
|
|
2814
2834
|
};
|
|
2815
2835
|
SdLoadingSpinner.style = sdLoadingSpinnerCss();
|
|
@@ -2856,7 +2876,7 @@ const SdModalCard = class {
|
|
|
2856
2876
|
};
|
|
2857
2877
|
SdModalCard.style = sdModalCardCss();
|
|
2858
2878
|
|
|
2859
|
-
const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}sd-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input[disabled]{cursor:not-allowed;color:#888888}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#
|
|
2879
|
+
const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}sd-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input[disabled]{cursor:not-allowed;color:#888888}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#AAAAAA}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#EFF6FF;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#E6F1FF}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#EEEEEE;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075FF;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
|
|
2860
2880
|
|
|
2861
2881
|
const SdNumberInput = class {
|
|
2862
2882
|
constructor(hostRef) {
|
|
@@ -3033,6 +3053,7 @@ const SdNumberInput = class {
|
|
|
3033
3053
|
}
|
|
3034
3054
|
};
|
|
3035
3055
|
handleFocus = (event) => {
|
|
3056
|
+
this.focused = true;
|
|
3036
3057
|
this.focus?.emit(event);
|
|
3037
3058
|
};
|
|
3038
3059
|
handleBlur = async (event) => {
|
|
@@ -3103,17 +3124,17 @@ const SdNumberInput = class {
|
|
|
3103
3124
|
const inputStyles = {
|
|
3104
3125
|
textAlign: this.useButton ? 'center' : 'right',
|
|
3105
3126
|
};
|
|
3106
|
-
return (h("sd-field", { key: '
|
|
3127
|
+
return (h("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', class: {
|
|
3107
3128
|
'sd-number-input': true,
|
|
3108
3129
|
[this.getInputStatus()]: true,
|
|
3109
3130
|
'sd-number-input--with-buttons': this.useButton,
|
|
3110
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '
|
|
3131
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, h("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', type: "button", class: {
|
|
3111
3132
|
'sd-number-input__button': true,
|
|
3112
3133
|
'sd-number-input__button--decrement': true,
|
|
3113
|
-
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '
|
|
3134
|
+
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', type: "button", class: {
|
|
3114
3135
|
'sd-number-input__button': true,
|
|
3115
3136
|
'sd-number-input__button--increment': true,
|
|
3116
|
-
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '
|
|
3137
|
+
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
|
|
3117
3138
|
}
|
|
3118
3139
|
static get watchers() { return {
|
|
3119
3140
|
"value": [{
|
|
@@ -3126,7 +3147,7 @@ const SdNumberInput = class {
|
|
|
3126
3147
|
};
|
|
3127
3148
|
SdNumberInput.style = sdNumberInputCss();
|
|
3128
3149
|
|
|
3129
|
-
const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #
|
|
3150
|
+
const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006AC1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006AC1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006AC1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
|
|
3130
3151
|
|
|
3131
3152
|
const BUTTON_WIDTH = {
|
|
3132
3153
|
1: 26,
|
|
@@ -3201,12 +3222,12 @@ const SdPagination = class {
|
|
|
3201
3222
|
}
|
|
3202
3223
|
}
|
|
3203
3224
|
render() {
|
|
3204
|
-
return (h("div", { key: '
|
|
3225
|
+
return (h("div", { key: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, h("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
3205
3226
|
'pagination-btn': true,
|
|
3206
3227
|
'pagination-btn--selected': this.currentPage === n,
|
|
3207
3228
|
}, disabled: this.currentPage === n, style: {
|
|
3208
3229
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
3209
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '
|
|
3230
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
|
|
3210
3231
|
}
|
|
3211
3232
|
};
|
|
3212
3233
|
SdPagination.style = sdPaginationCss();
|
|
@@ -3329,11 +3350,11 @@ const SdPortal = class {
|
|
|
3329
3350
|
this.close.emit();
|
|
3330
3351
|
}
|
|
3331
3352
|
render() {
|
|
3332
|
-
return h("slot", { key: '
|
|
3353
|
+
return h("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
|
|
3333
3354
|
}
|
|
3334
3355
|
};
|
|
3335
3356
|
|
|
3336
|
-
const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content;height:fit-content}sd-radio .sd-radio{cursor:pointer}sd-radio .sd-radio label{display:inline-flex;width:fit-content;align-items:center;gap:8px;cursor:pointer}sd-radio .sd-radio label input{display:inline-block;position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#
|
|
3357
|
+
const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content;height:fit-content}sd-radio .sd-radio{cursor:pointer}sd-radio .sd-radio label{display:inline-flex;width:fit-content;align-items:center;gap:8px;cursor:pointer}sd-radio .sd-radio label input{display:inline-block;position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075FF;background-color:white;cursor:pointer}sd-radio .sd-radio label input:checked{border-color:#0075FF;background-color:white}sd-radio .sd-radio label input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075FF}sd-radio .sd-radio label input:disabled{border-color:#CCCCCC;background-color:#EEEEEE}sd-radio .sd-radio label input:disabled:checked::before{background-color:#CCCCCC}sd-radio .sd-radio label input:not(:disabled):hover{border-color:#0075FF;background-color:#D9EAFF}sd-radio .sd-radio--disabled{cursor:not-allowed !important}sd-radio .sd-radio--disabled label{cursor:not-allowed !important}sd-radio .sd-radio--disabled label input{cursor:not-allowed !important}`;
|
|
3337
3358
|
|
|
3338
3359
|
const SdRadio = class {
|
|
3339
3360
|
constructor(hostRef) {
|
|
@@ -3537,7 +3558,7 @@ const SdSelect = class extends BaseDropdownEvent {
|
|
|
3537
3558
|
};
|
|
3538
3559
|
SdSelect.style = sdSelectCss();
|
|
3539
3560
|
|
|
3540
|
-
const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#
|
|
3561
|
+
const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#E5E5E5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{min-width:fit-content;width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
|
|
3541
3562
|
|
|
3542
3563
|
const SdSelectDropdown = class {
|
|
3543
3564
|
constructor(hostRef) {
|
|
@@ -3690,10 +3711,10 @@ const SdSelectDropdown = class {
|
|
|
3690
3711
|
this.isScrolled = scrollTop > 0;
|
|
3691
3712
|
};
|
|
3692
3713
|
render() {
|
|
3693
|
-
return (h("div", { key: '
|
|
3714
|
+
return (h("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
|
|
3694
3715
|
'sd-select-dropdown': true,
|
|
3695
3716
|
'sd-select-dropdown--ready': this.isDropdownReady,
|
|
3696
|
-
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '
|
|
3717
|
+
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
|
|
3697
3718
|
}
|
|
3698
3719
|
static get watchers() { return {
|
|
3699
3720
|
"filteredOptions": [{
|
|
@@ -3709,7 +3730,7 @@ const SdSelectDropdown = class {
|
|
|
3709
3730
|
};
|
|
3710
3731
|
SdSelectDropdown.style = sdSelectDropdownCss();
|
|
3711
3732
|
|
|
3712
|
-
const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#
|
|
3733
|
+
const sdSelectOptionCss = () => `sd-select-option{display:block;height:fit-content;line-height:0}sd-select-option .sd-select__option{display:flex;padding:4px 12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option .sd-select__option__checkbox-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option .sd-select__option--focused{background-color:#E6F1FF}sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox),sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox){color:#0075FF;font-weight:700}sd-select-option .sd-select__option--disabled{color:#AAAAAA;cursor:not-allowed}sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled){background-color:#0075FF;color:white}`;
|
|
3713
3734
|
|
|
3714
3735
|
const SdSelectOption = class {
|
|
3715
3736
|
constructor(hostRef) {
|
|
@@ -3740,7 +3761,7 @@ const SdSelectOption = class {
|
|
|
3740
3761
|
}
|
|
3741
3762
|
};
|
|
3742
3763
|
render() {
|
|
3743
|
-
return (h("div", { key: '
|
|
3764
|
+
return (h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
|
|
3744
3765
|
'sd-select__option': true,
|
|
3745
3766
|
'sd-select__option--selected': this.isSelected,
|
|
3746
3767
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -3786,22 +3807,22 @@ const SdSelectSearchInput = class {
|
|
|
3786
3807
|
input?.focus({ preventScroll: true });
|
|
3787
3808
|
}
|
|
3788
3809
|
render() {
|
|
3789
|
-
return (h("div", { key: '
|
|
3810
|
+
return (h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
|
|
3790
3811
|
'sd-select-search-input': true,
|
|
3791
3812
|
'sd-select-search-input--scrolled': !!this.isScrolled,
|
|
3792
|
-
}, onClick: event => event.stopPropagation() }, h("sd-input", { key: '
|
|
3813
|
+
}, onClick: event => event.stopPropagation() }, h("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
|
|
3793
3814
|
this.searchInput.emit(String(event?.detail));
|
|
3794
3815
|
}, onSdFocus: () => {
|
|
3795
3816
|
this.searchFocus.emit();
|
|
3796
3817
|
}, onKeyDown: event => {
|
|
3797
3818
|
if (event.code === 'Enter')
|
|
3798
3819
|
event.stopPropagation();
|
|
3799
|
-
} }, h("sd-icon", { key: '
|
|
3820
|
+
} }, h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
|
|
3800
3821
|
}
|
|
3801
3822
|
};
|
|
3802
3823
|
SdSelectSearchInput.style = sdSelectSearchInputCss();
|
|
3803
3824
|
|
|
3804
|
-
const sdTableCss = () => `.sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);display:flex;flex-direction:column;position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:100%;height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label{position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label:before,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;flex:1;min-height:240px;translate:0 -10%;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{font-size:12px;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}`;
|
|
3825
|
+
const sdTableCss = () => `.sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#E5E5E5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);display:flex;flex-direction:column;position:relative;border:1px solid #E1E1E1;border-radius:8px;font-size:12px;overflow:hidden;background:#FFFFFF}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;min-height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle--loading__spinner{position:absolute;top:0;left:0;width:100%;height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label{position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected sd-checkbox label:before,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#F5FAFF;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#F5FAFF}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #E1E1E1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #E1E1E1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;flex:1;min-height:240px;translate:0 -10%;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{font-size:12px;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #E1E1E1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0 !important}.sd-table__wrapper .sd-table__virtual-spacer td,.sd-table__wrapper .sd-table__virtual-row-spacer td{padding:0 !important;border:none}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background-image:repeating-linear-gradient(0deg, rgba(246, 246, 246, 0.3) 0px, rgba(225, 225, 225, 0.5) calc(var(--row-height, 44px) / 2), rgba(246, 246, 246, 0.3) var(--row-height, 44px));background-size:100% 200%;animation:skeleton-loading 1.5s ease-in-out infinite;position:relative}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton::before,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #E1E1E1 calc(var(--row-height, 44px) - 1px), #E1E1E1 var(--row-height, 44px));pointer-events:none}.sd-table__wrapper .sd-table__skeleton-cell{width:100%;height:20px;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}`;
|
|
3805
3826
|
|
|
3806
3827
|
const SdTable = class {
|
|
3807
3828
|
constructor(hostRef) {
|
|
@@ -4612,7 +4633,7 @@ const SdTable = class {
|
|
|
4612
4633
|
};
|
|
4613
4634
|
SdTable.style = sdTableCss();
|
|
4614
4635
|
|
|
4615
|
-
const sdTextareaCss = () => `sd-textarea{display:block}sd-textarea .sd-textarea{display:flex;flex-direction:column;color:#333333;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__content{width:100%;display:flex;border:1px solid #
|
|
4636
|
+
const sdTextareaCss = () => `sd-textarea{display:block}sd-textarea .sd-textarea{display:flex;flex-direction:column;color:#333333;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__content{width:100%;display:flex;border:1px solid #AAAAAA;border-radius:4px;background:white}sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:4px 8px;font-family:inherit;font-size:12px;line-height:20px;color:#333333;resize:vertical}sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:#AAAAAA}sd-textarea .sd-textarea--hovered .sd-textarea__content,sd-textarea .sd-textarea--focused .sd-textarea__content{border-color:#0075FF;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}sd-textarea .sd-textarea--disabled{cursor:not-allowed !important;box-shadow:none !important}sd-textarea .sd-textarea--disabled .sd-textarea__content{background:#EEEEEE !important;border:1px solid #CCCCCC !important;color:#888888 !important}sd-textarea .sd-textarea--disabled .sd-textarea__content .sd-textarea__native{cursor:not-allowed !important;color:#888888 !important}sd-textarea .sd-textarea .sd-textarea__footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__help-text{font-size:12px;line-height:20px;font-weight:400;color:#222222}sd-textarea .sd-textarea .sd-textarea__counter{color:#CCCCCC;margin-left:auto}`;
|
|
4616
4637
|
|
|
4617
4638
|
const SdTextarea = class {
|
|
4618
4639
|
constructor(hostRef) {
|
|
@@ -4696,10 +4717,10 @@ const SdTextarea = class {
|
|
|
4696
4717
|
}
|
|
4697
4718
|
render() {
|
|
4698
4719
|
const maxLengthCounter = this.getMaxLengthCounter();
|
|
4699
|
-
return (h("div", { key: '
|
|
4720
|
+
return (h("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
|
|
4700
4721
|
'sd-textarea': true,
|
|
4701
4722
|
[this.getTextareaStatus()]: true,
|
|
4702
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '
|
|
4723
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, h("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
|
|
4703
4724
|
}
|
|
4704
4725
|
static get watchers() { return {
|
|
4705
4726
|
"value": [{
|