@sellmate/design-system 1.0.63 → 1.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-barcode-input.cjs.entry.js +2 -1
- package/dist/cjs/sd-button_4.cjs.entry.js +11 -5
- package/dist/cjs/sd-date-picker.cjs.entry.js +3 -2
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +3 -2
- package/dist/cjs/sd-file-picker.cjs.entry.js +2 -1
- package/dist/cjs/sd-input_2.cjs.entry.js +3 -2
- package/dist/cjs/sd-number-input.cjs.entry.js +4 -3
- package/dist/cjs/sd-pagination_2.cjs.entry.js +4 -3
- package/dist/cjs/sd-select-group.cjs.entry.js +2 -1
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +2 -1
- package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -1
- package/dist/cjs/sd-select.cjs.entry.js +2 -1
- package/dist/cjs/sd-textarea.cjs.entry.js +2 -1
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +22 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +23 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +23 -2
- package/dist/collection/components/sd-field/sd-field.css +7 -0
- package/dist/collection/components/sd-field/sd-field.js +30 -4
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +22 -1
- package/dist/collection/components/sd-input/sd-input.js +23 -2
- package/dist/collection/components/sd-number-input/sd-number-input.js +24 -3
- package/dist/collection/components/sd-select/sd-select.js +22 -1
- package/dist/collection/components/sd-select-group/sd-select-group.js +22 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +22 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +22 -1
- package/dist/collection/components/sd-select-v2/sd-select-v2.js +24 -3
- package/dist/collection/components/sd-textarea/sd-textarea.js +22 -1
- package/dist/components/p-BjjrNz4C.js +1 -0
- package/dist/components/{p-DUqX35W_.js → p-BkUclgga.js} +1 -1
- package/dist/components/p-CKU8CeW3.js +1 -0
- package/dist/components/p-DC9KYl3L.js +1 -0
- package/dist/components/{p-DgYBr7xb.js → p-xmvTLf74.js} +1 -1
- package/dist/components/sd-barcode-input.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-input.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-select-dropdown.js +1 -1
- package/dist/components/sd-select-group.js +1 -1
- package/dist/components/sd-select-multiple-group.js +1 -1
- package/dist/components/sd-select-multiple.js +1 -1
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select-v2.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/components/sd-textarea.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-010e4f47.entry.js +1 -0
- package/dist/design-system/p-2ae97b1c.entry.js +1 -0
- package/dist/design-system/p-6644c4a0.entry.js +1 -0
- package/dist/design-system/p-96b14db1.entry.js +1 -0
- package/dist/design-system/p-a983560d.entry.js +1 -0
- package/dist/design-system/p-b3279f07.entry.js +1 -0
- package/dist/design-system/p-b81e0493.entry.js +1 -0
- package/dist/design-system/p-cb65a9e4.entry.js +1 -0
- package/dist/design-system/p-cf1156cb.entry.js +1 -0
- package/dist/design-system/p-d040ec6f.entry.js +1 -0
- package/dist/design-system/p-d8eb17a8.entry.js +1 -0
- package/dist/design-system/p-ed61fe19.entry.js +1 -0
- package/dist/design-system/p-f3d082c8.entry.js +1 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-barcode-input.entry.js +2 -1
- package/dist/esm/sd-button_4.entry.js +11 -5
- package/dist/esm/sd-date-picker.entry.js +3 -2
- package/dist/esm/sd-date-range-picker.entry.js +3 -2
- package/dist/esm/sd-file-picker.entry.js +2 -1
- package/dist/esm/sd-input_2.entry.js +3 -2
- package/dist/esm/sd-number-input.entry.js +4 -3
- package/dist/esm/sd-pagination_2.entry.js +4 -3
- package/dist/esm/sd-select-group.entry.js +2 -1
- package/dist/esm/sd-select-multiple-group.entry.js +2 -1
- package/dist/esm/sd-select-multiple.entry.js +2 -1
- package/dist/esm/sd-select.entry.js +2 -1
- package/dist/esm/sd-textarea.entry.js +2 -1
- package/dist/types/components/sd-barcode-input/sd-barcode-input.d.ts +1 -0
- package/dist/types/components/sd-date-picker/sd-date-picker.d.ts +1 -0
- package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts +1 -0
- package/dist/types/components/sd-field/sd-field.d.ts +1 -0
- package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +1 -0
- package/dist/types/components/sd-input/sd-input.d.ts +1 -0
- package/dist/types/components/sd-number-input/sd-number-input.d.ts +1 -0
- package/dist/types/components/sd-select/sd-select.d.ts +1 -0
- package/dist/types/components/sd-select-group/sd-select-group.d.ts +1 -0
- package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts +1 -0
- package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +1 -0
- package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +1 -0
- package/dist/types/components/sd-textarea/sd-textarea.d.ts +1 -0
- package/dist/types/components.d.ts +117 -0
- package/hydrate/index.js +55 -24
- package/hydrate/index.mjs +55 -24
- package/package.json +1 -1
- package/dist/components/p-aC4HJHug.js +0 -1
- package/dist/components/p-e35Du7-7.js +0 -1
- package/dist/components/p-e8HA30H_.js +0 -1
- package/dist/design-system/p-0ca594a4.entry.js +0 -1
- package/dist/design-system/p-1b9e427e.entry.js +0 -1
- package/dist/design-system/p-1cbe4b22.entry.js +0 -1
- package/dist/design-system/p-656acb07.entry.js +0 -1
- package/dist/design-system/p-748ece8e.entry.js +0 -1
- package/dist/design-system/p-9af7e19a.entry.js +0 -1
- package/dist/design-system/p-a24c3431.entry.js +0 -1
- package/dist/design-system/p-c2f3470f.entry.js +0 -1
- package/dist/design-system/p-c98ed6ae.entry.js +0 -1
- package/dist/design-system/p-ca80379a.entry.js +0 -1
- package/dist/design-system/p-e9f24d23.entry.js +0 -1
- package/dist/design-system/p-ec79fefd.entry.js +0 -1
- package/dist/design-system/p-f3a60f61.entry.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -5616,6 +5616,7 @@ class SdBarcodeInput {
|
|
|
5616
5616
|
hovered = false;
|
|
5617
5617
|
// props - label
|
|
5618
5618
|
label = '';
|
|
5619
|
+
labelWidth = '';
|
|
5619
5620
|
icon = undefined;
|
|
5620
5621
|
labelTooltip = '';
|
|
5621
5622
|
labelTooltipProps = null;
|
|
@@ -5694,7 +5695,7 @@ class SdBarcodeInput {
|
|
|
5694
5695
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5695
5696
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5696
5697
|
};
|
|
5697
|
-
return (hAsync("sd-field", { key: '
|
|
5698
|
+
return (hAsync("sd-field", { key: 'bba439856e0cbaedc7b54411dac904f9c845b50c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '8553cfb4b5ef9535608abc1f2987ce08970c318a', class: "sd-barcode-input__content" }, hAsync("slot", { key: '93db2b38e8d674230f48e3b9496a7221d8477da6', name: "prefix" }), hAsync("input", { key: '30997bea593052322a2d29fc1e517b00cf19b1fb', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '690daa6c1daa6058713ee09b0efe976557cde3ab', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '8ab4e45a23d1b06dc415d969e25ed5ea59540643', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
|
|
5698
5699
|
if (this.disabled)
|
|
5699
5700
|
return;
|
|
5700
5701
|
this.internalValue = '';
|
|
@@ -5732,6 +5733,7 @@ class SdBarcodeInput {
|
|
|
5732
5733
|
"focused": [1028],
|
|
5733
5734
|
"hovered": [1028],
|
|
5734
5735
|
"label": [1],
|
|
5736
|
+
"labelWidth": [8, "label-width"],
|
|
5735
5737
|
"icon": [16],
|
|
5736
5738
|
"labelTooltip": [1, "label-tooltip"],
|
|
5737
5739
|
"labelTooltipProps": [16],
|
|
@@ -7344,6 +7346,7 @@ class SdDatePicker {
|
|
|
7344
7346
|
width = '';
|
|
7345
7347
|
// sd-field 공통 props
|
|
7346
7348
|
label = '';
|
|
7349
|
+
labelWidth = '';
|
|
7347
7350
|
addonLabel = '';
|
|
7348
7351
|
hint = '';
|
|
7349
7352
|
errorMessage = '';
|
|
@@ -7423,9 +7426,9 @@ class SdDatePicker {
|
|
|
7423
7426
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
7424
7427
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
7425
7428
|
};
|
|
7426
|
-
return (hAsync("sd-field", { key: '
|
|
7429
|
+
return (hAsync("sd-field", { key: '693c0c75e6b0a9ee8323f4be7ec101592e586372', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', class: "sd-date-picker", ref: el => {
|
|
7427
7430
|
this.triggerRef = el;
|
|
7428
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
7431
|
+
} }, hAsync("sd-date-picker-trigger", { key: '0109eb0326655018bc02cc373e766ffdada85ff0', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
7429
7432
|
}
|
|
7430
7433
|
static get watchers() { return {
|
|
7431
7434
|
"isOpen": [{
|
|
@@ -7444,6 +7447,7 @@ class SdDatePicker {
|
|
|
7444
7447
|
"disabled": [516],
|
|
7445
7448
|
"width": [8],
|
|
7446
7449
|
"label": [1],
|
|
7450
|
+
"labelWidth": [8, "label-width"],
|
|
7447
7451
|
"addonLabel": [1, "addon-label"],
|
|
7448
7452
|
"hint": [1],
|
|
7449
7453
|
"errorMessage": [1, "error-message"],
|
|
@@ -7723,6 +7727,7 @@ class SdDateRangePicker {
|
|
|
7723
7727
|
width = '';
|
|
7724
7728
|
// sd-field 공통 props
|
|
7725
7729
|
label = '';
|
|
7730
|
+
labelWidth = '';
|
|
7726
7731
|
addonLabel = '';
|
|
7727
7732
|
hint = '';
|
|
7728
7733
|
errorMessage = '';
|
|
@@ -7807,9 +7812,9 @@ class SdDateRangePicker {
|
|
|
7807
7812
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
7808
7813
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
7809
7814
|
};
|
|
7810
|
-
return (hAsync("sd-field", { key: '
|
|
7815
|
+
return (hAsync("sd-field", { key: '95ec666c91635d6b6b749d660b4495b7ebe48e6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', class: "sd-date-range-picker", ref: el => {
|
|
7811
7816
|
this.triggerRef = el;
|
|
7812
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
7817
|
+
} }, hAsync("sd-date-picker-trigger", { key: '71693b5a4cec562169d9427a4e19aed4d8b19a45', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
7813
7818
|
}
|
|
7814
7819
|
static get watchers() { return {
|
|
7815
7820
|
"isOpen": [{
|
|
@@ -7829,6 +7834,7 @@ class SdDateRangePicker {
|
|
|
7829
7834
|
"disabled": [516],
|
|
7830
7835
|
"width": [8],
|
|
7831
7836
|
"label": [1],
|
|
7837
|
+
"labelWidth": [8, "label-width"],
|
|
7832
7838
|
"addonLabel": [1, "addon-label"],
|
|
7833
7839
|
"hint": [1],
|
|
7834
7840
|
"errorMessage": [1, "error-message"],
|
|
@@ -8567,7 +8573,7 @@ const FIELD_LABEL_SIZE_MAP = {
|
|
|
8567
8573
|
},
|
|
8568
8574
|
};
|
|
8569
8575
|
|
|
8570
|
-
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.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
|
|
8576
|
+
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.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
|
|
8571
8577
|
|
|
8572
8578
|
const FORM_PARENT_TAGS = [
|
|
8573
8579
|
'sd-select',
|
|
@@ -8600,6 +8606,7 @@ class SdField {
|
|
|
8600
8606
|
size = 'sm';
|
|
8601
8607
|
// props - label
|
|
8602
8608
|
label = '';
|
|
8609
|
+
labelWidth = '';
|
|
8603
8610
|
addonLabel = '';
|
|
8604
8611
|
icon = undefined;
|
|
8605
8612
|
labelTooltip = '';
|
|
@@ -8712,6 +8719,11 @@ class SdField {
|
|
|
8712
8719
|
'--sd-field-label-font-size': `${labelTokens.fontSize}px`,
|
|
8713
8720
|
'--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
|
|
8714
8721
|
'--sd-field-label-font-weight': labelTokens.fontWeight,
|
|
8722
|
+
...(this.labelWidth
|
|
8723
|
+
? {
|
|
8724
|
+
'--sd-field-label-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
|
|
8725
|
+
}
|
|
8726
|
+
: {}),
|
|
8715
8727
|
}
|
|
8716
8728
|
: {};
|
|
8717
8729
|
const addonCssVars = addon
|
|
@@ -8728,20 +8740,20 @@ class SdField {
|
|
|
8728
8740
|
'--sd-field-addon-border-width': `${addonTokens.border.width}px`,
|
|
8729
8741
|
}
|
|
8730
8742
|
: {};
|
|
8731
|
-
return (hAsync("div", { key: '
|
|
8743
|
+
return (hAsync("div", { key: 'f12b2e13ac8152d1e688f903a60a8fa670e99065', class: {
|
|
8732
8744
|
'sd-field': true,
|
|
8733
8745
|
'sd-field--has-label': !!this.label,
|
|
8734
8746
|
'sd-field--has-addon': !!addon,
|
|
8735
8747
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
8736
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '
|
|
8748
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', class: "sd-field__main", style: this.width
|
|
8737
8749
|
? {
|
|
8738
8750
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
8739
8751
|
flex: 'none',
|
|
8740
8752
|
}
|
|
8741
|
-
: {} }, hAsync("div", { key: '
|
|
8753
|
+
: {} }, hAsync("div", { key: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
|
|
8742
8754
|
'sd-field__control': true,
|
|
8743
8755
|
'sd-field__control--has-addon': !!addon,
|
|
8744
|
-
} }, addon && hAsync("div", { key: '
|
|
8756
|
+
} }, addon && hAsync("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), hAsync("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), this.errorMsg || this.errorMessage ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
|
|
8745
8757
|
}
|
|
8746
8758
|
renderLabel(label) {
|
|
8747
8759
|
if (!label)
|
|
@@ -8765,6 +8777,7 @@ class SdField {
|
|
|
8765
8777
|
"width": [8],
|
|
8766
8778
|
"size": [513],
|
|
8767
8779
|
"label": [1],
|
|
8780
|
+
"labelWidth": [8, "label-width"],
|
|
8768
8781
|
"addonLabel": [1, "addon-label"],
|
|
8769
8782
|
"icon": [16],
|
|
8770
8783
|
"labelTooltip": [1, "label-tooltip"],
|
|
@@ -8845,6 +8858,7 @@ class SdFilePicker {
|
|
|
8845
8858
|
// sd-field 패스스루 props
|
|
8846
8859
|
name = '';
|
|
8847
8860
|
label = '';
|
|
8861
|
+
labelWidth = '';
|
|
8848
8862
|
addonLabel = '';
|
|
8849
8863
|
hint = '';
|
|
8850
8864
|
errorMessage = '';
|
|
@@ -9007,7 +9021,7 @@ class SdFilePicker {
|
|
|
9007
9021
|
'sd-file-picker--inline-disabled': this.disabled,
|
|
9008
9022
|
}, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
|
|
9009
9023
|
}
|
|
9010
|
-
return (hAsync("sd-field", { name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
|
|
9024
|
+
return (hAsync("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
|
|
9011
9025
|
}
|
|
9012
9026
|
static get watchers() { return {
|
|
9013
9027
|
"value": [{
|
|
@@ -9030,6 +9044,7 @@ class SdFilePicker {
|
|
|
9030
9044
|
"maxFiles": [8, "max-files"],
|
|
9031
9045
|
"name": [1],
|
|
9032
9046
|
"label": [1],
|
|
9047
|
+
"labelWidth": [8, "label-width"],
|
|
9033
9048
|
"addonLabel": [1, "addon-label"],
|
|
9034
9049
|
"hint": [1],
|
|
9035
9050
|
"errorMessage": [1, "error-message"],
|
|
@@ -10167,6 +10182,7 @@ class SdInput {
|
|
|
10167
10182
|
hovered = false;
|
|
10168
10183
|
// props - label
|
|
10169
10184
|
label = '';
|
|
10185
|
+
labelWidth = '';
|
|
10170
10186
|
icon = undefined;
|
|
10171
10187
|
labelTooltip = '';
|
|
10172
10188
|
labelTooltipProps = null;
|
|
@@ -10248,12 +10264,12 @@ class SdInput {
|
|
|
10248
10264
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
10249
10265
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
10250
10266
|
};
|
|
10251
|
-
return (hAsync("sd-field", { key: '
|
|
10267
|
+
return (hAsync("sd-field", { key: 'a72ce8674fb761de7cd188e99cc19d5f3731a899', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'e5cbdbc2b233bda57488ead19401d277891301ae', class: "sd-input__content" }, hAsync("slot", { key: 'a327005770df94ef61f2e08071e77407a24b7b5c', name: "prefix" }), hAsync("input", { key: '36301cd586151b8c607e14715b26fca467f68c13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '532e201860db0709572502aa4275fc9251e1aeb1', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'cc6132852c65f0597cbe25751c7246b1cdad3096', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
10252
10268
|
if (this.disabled)
|
|
10253
10269
|
return;
|
|
10254
10270
|
this.internalValue = '';
|
|
10255
10271
|
await this.formField?.sdValidate();
|
|
10256
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
10272
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'fd3d567346cf5771ec28c73f15cdf0db15835766', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
|
|
10257
10273
|
if (this.disabled)
|
|
10258
10274
|
return;
|
|
10259
10275
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -10297,6 +10313,7 @@ class SdInput {
|
|
|
10297
10313
|
"focused": [1028],
|
|
10298
10314
|
"hovered": [1028],
|
|
10299
10315
|
"label": [1],
|
|
10316
|
+
"labelWidth": [8, "label-width"],
|
|
10300
10317
|
"icon": [16],
|
|
10301
10318
|
"labelTooltip": [1, "label-tooltip"],
|
|
10302
10319
|
"labelTooltipProps": [16],
|
|
@@ -10873,6 +10890,7 @@ class SdNumberInput {
|
|
|
10873
10890
|
useDecimal = false;
|
|
10874
10891
|
value = null;
|
|
10875
10892
|
label;
|
|
10893
|
+
labelWidth = '';
|
|
10876
10894
|
addonLabel = '';
|
|
10877
10895
|
placeholder = '입력해 주세요.';
|
|
10878
10896
|
disabled = false;
|
|
@@ -11132,12 +11150,12 @@ class SdNumberInput {
|
|
|
11132
11150
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
11133
11151
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
11134
11152
|
};
|
|
11135
|
-
return (hAsync("sd-field", { key: '
|
|
11153
|
+
return (hAsync("sd-field", { key: 'f81b01b27960130cbf6b37a29fc0ddc11750768e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '0f9b5a0b966c7d51d5913c61a585ff789fa4973f', class: "sd-number-input__content" }, this.useButton && (hAsync("button", { key: 'b037ee3062253bf229f9639dd04c7475657fabb6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '39a9f73a15008a481e758e663e027cd4f6454146', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
11136
11154
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11137
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '
|
|
11155
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (hAsync("span", { key: '050334ce25bb767e7f11dca886d4aeecaa1ed3dc', class: "sd-number-input__prefix" }, this.inputPrefix)), hAsync("input", { key: 'a72697d136eeee52ef23fee6ee2017b6dd37e54c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
11138
11156
|
textAlign: this.useButton ? 'center' : 'right',
|
|
11139
11157
|
...this.inputStyle,
|
|
11140
|
-
} }), this.inputSuffix && (hAsync("span", { key: '
|
|
11158
|
+
} }), this.inputSuffix && (hAsync("span", { key: '845202622b3377add18782d96d0af0c49caf95ec', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (hAsync("button", { key: '208c976c1b755bec0cd7efb5ceacb3e07dce3a7d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'fe9848c8f044d01378dc183a80d3f81eb56a67f9', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
11141
11159
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11142
11160
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
11143
11161
|
}
|
|
@@ -11162,6 +11180,7 @@ class SdNumberInput {
|
|
|
11162
11180
|
"useDecimal": [4, "use-decimal"],
|
|
11163
11181
|
"value": [1032],
|
|
11164
11182
|
"label": [1],
|
|
11183
|
+
"labelWidth": [8, "label-width"],
|
|
11165
11184
|
"addonLabel": [1, "addon-label"],
|
|
11166
11185
|
"placeholder": [1],
|
|
11167
11186
|
"disabled": [4],
|
|
@@ -12153,6 +12172,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
12153
12172
|
searchable = false;
|
|
12154
12173
|
// props - label
|
|
12155
12174
|
label = '';
|
|
12175
|
+
labelWidth = '';
|
|
12156
12176
|
addonLabel = '';
|
|
12157
12177
|
icon = undefined;
|
|
12158
12178
|
labelTooltip = '';
|
|
@@ -12271,7 +12291,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
12271
12291
|
}
|
|
12272
12292
|
};
|
|
12273
12293
|
render() {
|
|
12274
|
-
return (hAsync("sd-field", { key: '
|
|
12294
|
+
return (hAsync("sd-field", { key: 'd96961fe4c425c3f0fcb1c2f438c8b70c510b632', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '0113ffb76ea79cbe3b77dff85d8186a5b994e7b6', class: {
|
|
12275
12295
|
'sd-select': true,
|
|
12276
12296
|
'sd-select--disabled': this.disabled,
|
|
12277
12297
|
'sd-select--error': !!this.error,
|
|
@@ -12314,6 +12334,7 @@ class SdSelect extends BaseDropdownEvent {
|
|
|
12314
12334
|
"clearable": [4],
|
|
12315
12335
|
"searchable": [4],
|
|
12316
12336
|
"label": [1],
|
|
12337
|
+
"labelWidth": [8, "label-width"],
|
|
12317
12338
|
"addonLabel": [1, "addon-label"],
|
|
12318
12339
|
"icon": [16],
|
|
12319
12340
|
"labelTooltip": [1, "label-tooltip"],
|
|
@@ -12556,6 +12577,7 @@ class SdSelectGroup extends BaseDropdownEvent {
|
|
|
12556
12577
|
searchable = false;
|
|
12557
12578
|
// props - label
|
|
12558
12579
|
label = '';
|
|
12580
|
+
labelWidth = '';
|
|
12559
12581
|
addonLabel = '';
|
|
12560
12582
|
icon = undefined;
|
|
12561
12583
|
labelTooltip = '';
|
|
@@ -12803,7 +12825,7 @@ class SdSelectGroup extends BaseDropdownEvent {
|
|
|
12803
12825
|
});
|
|
12804
12826
|
}
|
|
12805
12827
|
render() {
|
|
12806
|
-
return (hAsync("sd-field", { key: '
|
|
12828
|
+
return (hAsync("sd-field", { key: '1e6a0f9947f5d137bb65844fe666c07b4eefb2f7', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '62dcd2f37c2eda0e51f2e77de36ece6ab592c4ce', class: {
|
|
12807
12829
|
'sd-select-group': true,
|
|
12808
12830
|
'sd-select-group--open': this.isOpen,
|
|
12809
12831
|
'sd-select-group--disabled': this.disabled,
|
|
@@ -12868,6 +12890,7 @@ class SdSelectGroup extends BaseDropdownEvent {
|
|
|
12868
12890
|
"clearable": [4],
|
|
12869
12891
|
"searchable": [4],
|
|
12870
12892
|
"label": [1],
|
|
12893
|
+
"labelWidth": [8, "label-width"],
|
|
12871
12894
|
"addonLabel": [1, "addon-label"],
|
|
12872
12895
|
"icon": [16],
|
|
12873
12896
|
"labelTooltip": [1, "label-tooltip"],
|
|
@@ -12927,6 +12950,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
12927
12950
|
useCheckbox = false;
|
|
12928
12951
|
// props - label
|
|
12929
12952
|
label = '';
|
|
12953
|
+
labelWidth = '';
|
|
12930
12954
|
icon = undefined;
|
|
12931
12955
|
labelTooltip = '';
|
|
12932
12956
|
labelTooltipProps = null;
|
|
@@ -13051,7 +13075,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
13051
13075
|
this.handleOptionSelection(option);
|
|
13052
13076
|
};
|
|
13053
13077
|
render() {
|
|
13054
|
-
return (hAsync("sd-field", { key: '
|
|
13078
|
+
return (hAsync("sd-field", { key: 'f5dda40563661955aa194d841ca89628afd496cb', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, hAsync("div", { key: '81541d9adabfea7c3af1c22ed419036f56e1a353', class: {
|
|
13055
13079
|
'sd-select-multiple': true,
|
|
13056
13080
|
'sd-select-multiple--open': this.isOpen,
|
|
13057
13081
|
'sd-select-multiple--disabled': this.disabled,
|
|
@@ -13098,6 +13122,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
|
|
|
13098
13122
|
"useAll": [4, "use-all"],
|
|
13099
13123
|
"useCheckbox": [4, "use-checkbox"],
|
|
13100
13124
|
"label": [1],
|
|
13125
|
+
"labelWidth": [8, "label-width"],
|
|
13101
13126
|
"icon": [16],
|
|
13102
13127
|
"labelTooltip": [1, "label-tooltip"],
|
|
13103
13128
|
"labelTooltipProps": [16],
|
|
@@ -13148,6 +13173,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
|
|
|
13148
13173
|
allCheckOptionLabel = '전체';
|
|
13149
13174
|
// props - label
|
|
13150
13175
|
label = '';
|
|
13176
|
+
labelWidth = '';
|
|
13151
13177
|
icon = undefined;
|
|
13152
13178
|
labelTooltip = '';
|
|
13153
13179
|
labelTooltipProps = null;
|
|
@@ -13514,7 +13540,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
|
|
|
13514
13540
|
});
|
|
13515
13541
|
}
|
|
13516
13542
|
render() {
|
|
13517
|
-
return (hAsync("sd-field", { key: '
|
|
13543
|
+
return (hAsync("sd-field", { key: 'e7d00571a19a83e8d243d0c4f7433d931d4a2304', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, hAsync("div", { key: '8c7288d853fed5bb829f1ef90af5e96a512c11b3', class: {
|
|
13518
13544
|
'sd-select-multiple-group': true,
|
|
13519
13545
|
'sd-select-multiple-group--open': this.isOpen,
|
|
13520
13546
|
'sd-select-multiple-group--disabled': this.disabled,
|
|
@@ -13587,6 +13613,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
|
|
|
13587
13613
|
"allCheckedLabel": [1, "all-checked-label"],
|
|
13588
13614
|
"allCheckOptionLabel": [1, "all-check-option-label"],
|
|
13589
13615
|
"label": [1],
|
|
13616
|
+
"labelWidth": [8, "label-width"],
|
|
13590
13617
|
"icon": [16],
|
|
13591
13618
|
"labelTooltip": [1, "label-tooltip"],
|
|
13592
13619
|
"labelTooltipProps": [16],
|
|
@@ -13842,6 +13869,7 @@ class SdSelectV2 {
|
|
|
13842
13869
|
dropdownHeight = '260px';
|
|
13843
13870
|
disabled = false;
|
|
13844
13871
|
label = '';
|
|
13872
|
+
labelWidth = '';
|
|
13845
13873
|
addonLabel = '';
|
|
13846
13874
|
error = false;
|
|
13847
13875
|
hint = '';
|
|
@@ -14035,13 +14063,13 @@ class SdSelectV2 {
|
|
|
14035
14063
|
this.closeDropdown();
|
|
14036
14064
|
},
|
|
14037
14065
|
};
|
|
14038
|
-
return (hAsync("sd-field", { key: '
|
|
14066
|
+
return (hAsync("sd-field", { key: 'c9f08598c8f9852ab4000f056621dfef238e16de', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
|
|
14039
14067
|
this.hovered = true;
|
|
14040
14068
|
}, onMouseLeave: () => {
|
|
14041
14069
|
this.hovered = false;
|
|
14042
|
-
} }, hAsync("div", { key: '
|
|
14070
|
+
} }, hAsync("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
|
|
14043
14071
|
this.triggerRef = el;
|
|
14044
|
-
} }, hAsync("sd-select-v2-trigger", { key: '
|
|
14072
|
+
} }, hAsync("sd-select-v2-trigger", { key: 'a22bca400e5d10ee29e569da04d36b9291a1dade', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, hAsync("sd-select-v2-listbox", { key: '90c18612d553342be091a30e05194bab91407c76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
14045
14073
|
}
|
|
14046
14074
|
static get watchers() { return {
|
|
14047
14075
|
"isOpen": [{
|
|
@@ -14061,6 +14089,7 @@ class SdSelectV2 {
|
|
|
14061
14089
|
"dropdownHeight": [1, "dropdown-height"],
|
|
14062
14090
|
"disabled": [4],
|
|
14063
14091
|
"label": [1],
|
|
14092
|
+
"labelWidth": [8, "label-width"],
|
|
14064
14093
|
"addonLabel": [1, "addon-label"],
|
|
14065
14094
|
"error": [1028],
|
|
14066
14095
|
"hint": [1],
|
|
@@ -16101,6 +16130,7 @@ class SdTextarea {
|
|
|
16101
16130
|
width = '';
|
|
16102
16131
|
// props - sd-field
|
|
16103
16132
|
label = '';
|
|
16133
|
+
labelWidth = '';
|
|
16104
16134
|
addonLabel = '';
|
|
16105
16135
|
hint = '';
|
|
16106
16136
|
errorMessage = '';
|
|
@@ -16188,7 +16218,7 @@ class SdTextarea {
|
|
|
16188
16218
|
'--sd-system-size-field-sm-height': 'auto',
|
|
16189
16219
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
16190
16220
|
};
|
|
16191
|
-
return (hAsync("sd-field", { key: '
|
|
16221
|
+
return (hAsync("sd-field", { key: '6b2360f01a356db14659e1ebc53d8c4d8c4f671f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'f43279ee861d3502c9130f1de0c47cba61ad0866', class: "sd-textarea__content" }, hAsync("textarea", { key: '0600b577417019ae36a0daba637168ebc5685220', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
|
|
16192
16222
|
}
|
|
16193
16223
|
static get watchers() { return {
|
|
16194
16224
|
"value": [{
|
|
@@ -16215,6 +16245,7 @@ class SdTextarea {
|
|
|
16215
16245
|
"spellcheck": [4],
|
|
16216
16246
|
"width": [8],
|
|
16217
16247
|
"label": [1],
|
|
16248
|
+
"labelWidth": [8, "label-width"],
|
|
16218
16249
|
"addonLabel": [1, "addon-label"],
|
|
16219
16250
|
"hint": [1],
|
|
16220
16251
|
"errorMessage": [1, "error-message"],
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{p as e,H as d,h as s,t as i}from"./p-DuYi4aqj.js";import{d as t}from"./p-BLC3AWW8.js";import{d as l}from"./p-DxzgCf_d.js";import{d as r}from"./p-CGssy8eb.js";import{d as o}from"./p-BZ7V5xV5.js";var a={sm:{height:"28",gap:"6",icon:"12",typography:{fontWeight:"700",fontSize:"12",lineHeight:"20"}},md:{height:"36",gap:"8",icon:"16",typography:{fontWeight:"700",fontSize:"16",lineHeight:"26"}}},n={gap:"6",paddingX:"12",typography:{fontWeight:"500",fontSize:"12",lineHeight:"20"},bg:"#F6F6F6",border:{default:"#AAAAAA",disabled:"#CCCCCC",width:"1"}};const f=a.sm,h=a.md,p={sm:{height:f.height,gap:f.gap,icon:f.icon,fontSize:f.typography.fontSize,lineHeight:f.typography.lineHeight,fontWeight:f.typography.fontWeight},md:{height:h.height,gap:h.gap,icon:h.icon,fontSize:h.typography.fontSize,lineHeight:h.typography.lineHeight,fontWeight:h.typography.fontWeight}},c=["sd-select","sd-select-multiple","sd-select-multiple-group","sd-input","sd-barcode-input","sd-textarea","sd-number-input","sd-select-v2","sd-file-picker","sd-date-picker","sd-date-range-picker"],b=e(class extends d{constructor(e){super(),!1!==e&&this.__registerHost()}get el(){return this}name="";rules=[];error=!1;disabled=!1;hovered=!1;focused=!1;status;hint="";errorMessage="";width="";size="sm";label="";addonLabel="";icon=void 0;labelTooltip="";labelTooltipProps=null;errorMsg="";hostElement=null;get value(){return this.hostElement?.value??null}get fieldStatus(){let e="";return this.disabled?(e="disabled",`sd-field--${e}`):this.focused?(e="focus",`sd-field--${e}`):(this.hovered&&(e="hover"),this.status&&(e=this.status),this.error&&(e="error"),e?`sd-field--${e}`:"")}componentDidLoad(){this.hostElement=this.findHostElement(),this.registerToForm()}disconnectedCallback(){this.unregisterFromForm()}findHostElement(){for(const e of c){const d=this.el.closest(e);if(d&&"value"in d)return d}return null}registerToForm(){const e=this.el.closest("sd-form");e&&"function"==typeof e.componentOnReady&&e.componentOnReady().then((e=>{e.sdRegisterField(this)}))}unregisterFromForm(){if(!this.name)return;const e=this.el.closest("sd-form");e?.componentOnReady().then((e=>{e.sdUnregisterField(this.name)}))}async sdValidate(){if(!this.rules||0===this.rules.length)return!0;for(const e of this.rules){const d=e(this.value??"");if(!0!==d)return this.setError(!0,d),!1}return this.setError(!1,""),!0}async sdReset(){this.hostElement&&(this.hostElement.value=null),this.setError(!1,"")}async sdResetValidation(){this.setError(!1,"")}async sdFocus(){this.hostElement?.focus?.(),this.hostElement?.scrollIntoView({behavior:"smooth",block:"center"})}setError(e,d){this.errorMsg=d,this.hostElement&&(this.hostElement.error=e)}render(){const e=this.addonLabel,d=this.size in p?this.size:"sm",i=p[d],t={"--sd-field-wrapper-height":`var(--sd-system-size-field-${d}-height)`,"--sd-field-control-radius":`var(--sd-system-radius-field-${d})`,"--sd-field-label-margin-right":`var(--sd-system-space-field-${d}-gap)`},l=this.label?{"--sd-field-label-height":`${i.height}px`,"--sd-field-label-gap":`${i.gap}px`,"--sd-field-label-font-size":`${i.fontSize}px`,"--sd-field-label-line-height":`${i.lineHeight}px`,"--sd-field-label-font-weight":i.fontWeight}:{},r=e?{"--sd-field-addon-padding-x":`${n.paddingX}px`,"--sd-field-addon-font-size":`${n.typography.fontSize}px`,"--sd-field-addon-line-height":`${n.typography.lineHeight}px`,"--sd-field-addon-font-weight":n.typography.fontWeight,"--sd-field-addon-bg":n.bg,"--sd-field-addon-border-color":this.disabled?n.border.disabled:n.border.default,"--sd-field-addon-gap":`${n.gap}px`,"--sd-field-addon-border-width":`${n.border.width}px`}:{};return s("div",{key:"72ffdb42c88b90eb60637b10c1330dc509ece812",class:{"sd-field":!0,"sd-field--has-label":!!this.label,"sd-field--has-addon":!!e,[this.fieldStatus]:!!this.fieldStatus},style:{...t,...l,...r}},s("div",{key:"fb5d90aea5a4988ec58984b4a85ed609f032549e",class:"sd-field__wrapper"},this.renderLabel(this.label),s("div",{key:"c0372be3a39ca1d6cebfe5e765d120751e39d03e",class:"sd-field__main",style:this.width?{width:"number"==typeof this.width?`${this.width}px`:this.width,flex:"none"}:{}},s("div",{key:"d203154db0eef4e73908d78ba3667710c51b6595",class:{"sd-field__control":!0,"sd-field__control--has-addon":!!e}},e&&s("div",{key:"851b996010c4f0402df8b6bfe9ced0c8444bc591",class:"sd-field__addon"},e),s("slot",{key:"081b95a99090c3c1d2d28170500ac7be15452876"})),this.errorMsg||this.errorMessage?s("div",{class:"sd-field__error-message"},this.errorMsg||this.errorMessage):this.hint&&s("div",{class:"sd-field__hint"},this.hint))))}renderLabel(e){return e?s("label",{class:"sd-field__label"},this.icon&&s("sd-icon",{name:this.icon.name,size:this.icon.size??Number(p[this.size in p?this.size:"sm"].icon),color:this.icon.color,rotate:this.icon.rotate,class:"sd-field__label__icon"}),s("div",{class:"sd-field__label__text"},e),this.labelTooltip&&s("sd-tooltip",{class:"sd-field__label__tooltip",...this.labelTooltipProps},this.labelTooltip)):null}static get style(){return"sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}"}},[772,"sd-field",{name:[1],rules:[16],error:[1028],disabled:[1028],hovered:[1028],focused:[1028],status:[1],hint:[1],errorMessage:[1,"error-message"],width:[8],size:[513],label:[1],addonLabel:[1,"addon-label"],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],errorMsg:[32],sdValidate:[64],sdReset:[64],sdResetValidation:[64],sdFocus:[64]}]);function g(){"undefined"!=typeof customElements&&["sd-field","sd-button","sd-floating-portal","sd-icon","sd-tooltip"].forEach((e=>{switch(e){case"sd-field":customElements.get(i(e))||customElements.define(i(e),b);break;case"sd-button":customElements.get(i(e))||t();break;case"sd-floating-portal":customElements.get(i(e))||l();break;case"sd-icon":customElements.get(i(e))||r();break;case"sd-tooltip":customElements.get(i(e))||o()}}))}export{b as S,g as d}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{p as t,H as e,c as s,h as i,t as o}from"./p-DuYi4aqj.js";import{n as r}from"./p-CCwNgVmC.js";import{d as a}from"./p-BLC3AWW8.js";import{d as h}from"./p-TMuoVuhE.js";import{d as l}from"./p-aC4HJHug.js";import{d}from"./p-DxzgCf_d.js";import{d as n}from"./p-CGssy8eb.js";import{d as c}from"./p-BgRPWxrz.js";import{d as p}from"./p-kZ5N_lFC.js";import{d as m}from"./p-DRY8HJ-T.js";import{d as u}from"./p-DpsDTjcN.js";import{d as f}from"./p-B6OgnOKC.js";import{d as b}from"./p-BZ7V5xV5.js";const g=t(class t extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.update=s(this,"sdUpdate",7),this.dropDownShow=s(this,"sdDropDownShow",7)}static VIEWPORT_PADDING=20;static PORTAL_OFFSET_Y=4;static CLOSE_ANIMATION_DURATION=150;get el(){return this}name="default";value=null;options=[];placeholder="선택";maxDropdownWidth="640px";dropdownHeight="260px";disabled=!1;label="";addonLabel="";error=!1;hint="";errorMessage="";fieldName="";rules=[];icon=void 0;labelTooltip="";labelTooltipProps=null;emitValue=!1;width="";isOpen=!1;isAnimatingOut=!1;triggerWidth="200px";resolvedDropdownHeight="260px";resolvedMaxDropdownWidth="640px";focused=!1;hovered=!1;update;dropDownShow;triggerRef;closeAnimationTimer;internalName=r();watchIsOpen(t){this.focused=t,this.dropDownShow.emit({isOpen:t})}get isMulti(){return"multi"===this.name||"multi_depth"===this.name}get displayText(){if(this.isMulti){if(!this.value||!Array.isArray(this.value))return"";if(this.emitValue){const t=this.flattenOptions(this.options);return this.value.map((e=>t.find((t=>t.value===e))?.label??"")).filter(Boolean).join(", ")}const t=this.value;return 0===t.length?"":t.map((t=>t.label)).join(", ")}if(null==this.value)return"";if(!this.emitValue&&"object"==typeof this.value&&!Array.isArray(this.value))return this.value.label??"";const t=this.flattenOptions(this.options).find((t=>t.value===this.value));return t?.label??""}flattenOptions(t){return t.flatMap((t=>t.children?this.flattenOptions(t.children):[t]))}getSelectedOptions(){const t=this.value;return t&&Array.isArray(t)?this.emitValue?t.map((t=>this.findOriginalOption(t,this.options))).filter((t=>!!t)):t:[]}toMultiValue(t){return this.emitValue?t.map((t=>t.value)):t}parsePixelValue(t,e){const s=Number.parseFloat(t);return Number.isFinite(s)?s:e}updateDropdownViewportConstraints(){if(!this.triggerRef)return;const e=this.triggerRef.getBoundingClientRect(),s=t.VIEWPORT_PADDING,i=t.PORTAL_OFFSET_Y,o=this.parsePixelValue(this.dropdownHeight,260),r=this.parsePixelValue(this.maxDropdownWidth,640),a=Math.max(window.innerHeight-e.bottom-s-i,0),h=Math.max(e.top-s-i,0),l=Math.max(a,h),d=Math.max(window.innerWidth-2*s,0);this.resolvedDropdownHeight=`${Math.min(o,l)}px`,this.resolvedMaxDropdownWidth=`${Math.min(r,d)}px`}handleViewportResize=()=>{this.isOpen&&this.updateDropdownViewportConstraints()};findOriginalOption(t,e){for(const s of e){if(s.value===t)return s;if(s.children){const e=this.findOriginalOption(t,s.children);if(e)return e}}}closeDropdown(){this.isOpen&&(this.isOpen=!1,this.isAnimatingOut=!0,this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.closeAnimationTimer=setTimeout((()=>{this.isAnimatingOut=!1}),t.CLOSE_ANIMATION_DURATION))}handleTriggerClick=()=>{this.triggerRef&&(this.triggerWidth=`${this.triggerRef.offsetWidth}px`),this.updateDropdownViewportConstraints(),this.isOpen?this.closeDropdown():(this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.isAnimatingOut=!1,this.isOpen=!0)};emitUpdate(t){this.update.emit(t)}handleOptionSelect=t=>{const{option:e,leaves:s}=t;if(this.isMulti)this.handleMultiSelect(e,s);else{this.closeDropdown(),this.value=this.emitValue?e.value:e;const t=this.value;requestAnimationFrame((()=>{this.emitUpdate(t)}))}};handleMultiSelect(t,e){const s=this.getSelectedOptions();let i;if(t.children)if(e.every((t=>s.some((e=>e.value===t.value))))){const t=new Set(e.map((t=>t.value)));i=s.filter((e=>!t.has(e.value)))}else{const t=new Set(s.map((t=>t.value))),o=e.filter((e=>!t.has(e.value)));i=[...s,...o]}else i=s.some((e=>e.value===t.value))?s.filter((e=>e.value!==t.value)):[...s,t];this.value=this.toMultiValue(i),this.emitUpdate(this.value)}connectedCallback(){window.addEventListener("resize",this.handleViewportResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleViewportResize),this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer)}render(){const e={open:this.isOpen,parentRef:this.triggerRef,viewportPadding:t.VIEWPORT_PADDING,onSdClose:()=>{this.closeDropdown()}};return i("sd-field",{key:"b2a7f6ff2b4844069703400d68e9e736689d130a",name:this.fieldName||this.internalName,label:this.label,addonLabel:this.addonLabel,hint:this.hint,errorMessage:this.errorMessage,width:this.width,rules:this.rules,error:this.error,disabled:this.disabled,focused:this.focused,hovered:this.hovered,icon:this.icon,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,onMouseEnter:()=>{this.hovered=!0},onMouseLeave:()=>{this.hovered=!1}},i("div",{key:"f832e4df90c6874c56e1f0ec5b109a7a77f3d0d1",class:"sd-select-v2",ref:t=>{this.triggerRef=t}},i("sd-select-v2-trigger",{key:"9f2eaff8ca1ece8bec8fe635372e961a42ec0f80",displayText:this.displayText,placeholder:this.placeholder,disabled:this.disabled,isOpen:this.isOpen,onSdTriggerClick:this.handleTriggerClick})),(this.isOpen||this.isAnimatingOut)&&i("sd-portal",{key:"2b8c31b66ac81a51dbd7657d5bbeeeaeb3ff0c83",...e},i("sd-select-v2-listbox",{key:"8d16190fff39d403c74966e197c09afb55e9b9f8",name:this.name,options:this.options,value:this.value,emitValue:this.emitValue,triggerWidth:this.triggerWidth,maxWidth:this.resolvedMaxDropdownWidth,maxHeight:this.resolvedDropdownHeight,onSdOptionSelect:t=>this.handleOptionSelect(t.detail)})))}static get watchers(){return{isOpen:[{watchIsOpen:0}]}}static get style(){return"sd-select-v2{display:inline-flex}sd-select-v2 sd-portal{display:none}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}"}},[512,"sd-select-v2",{name:[1],value:[1032],options:[16],placeholder:[1],maxDropdownWidth:[1,"max-dropdown-width"],dropdownHeight:[1,"dropdown-height"],disabled:[4],label:[1],addonLabel:[1,"addon-label"],error:[1028],hint:[1],errorMessage:[1,"error-message"],fieldName:[1,"field-name"],rules:[16],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],emitValue:[4,"emit-value"],width:[8],isOpen:[32],isAnimatingOut:[32],triggerWidth:[32],resolvedDropdownHeight:[32],resolvedMaxDropdownWidth:[32],focused:[32],hovered:[32]},void 0,{isOpen:[{watchIsOpen:0}]}]);function w(){"undefined"!=typeof customElements&&["sd-select-v2","sd-button","sd-checkbox","sd-field","sd-floating-portal","sd-icon","sd-portal","sd-select-v2-list-item","sd-select-v2-list-item-search","sd-select-v2-listbox","sd-select-v2-trigger","sd-tooltip"].forEach((t=>{switch(t){case"sd-select-v2":customElements.get(o(t))||customElements.define(o(t),g);break;case"sd-button":customElements.get(o(t))||a();break;case"sd-checkbox":customElements.get(o(t))||h();break;case"sd-field":customElements.get(o(t))||l();break;case"sd-floating-portal":customElements.get(o(t))||d();break;case"sd-icon":customElements.get(o(t))||n();break;case"sd-portal":customElements.get(o(t))||c();break;case"sd-select-v2-list-item":customElements.get(o(t))||p();break;case"sd-select-v2-list-item-search":customElements.get(o(t))||m();break;case"sd-select-v2-listbox":customElements.get(o(t))||u();break;case"sd-select-v2-trigger":customElements.get(o(t))||f();break;case"sd-tooltip":customElements.get(o(t))||b()}}))}export{g as S,w as d}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{p as t,H as s,c as e,h as i,t as n}from"./p-DuYi4aqj.js";import{n as o}from"./p-CCwNgVmC.js";import{i as a}from"./p-CJwbBrt5.js";import{d}from"./p-BLC3AWW8.js";import{d as l}from"./p-aC4HJHug.js";import{d as r}from"./p-DxzgCf_d.js";import{d as u}from"./p-B1S4ybd6.js";import{d as h}from"./p-CGssy8eb.js";import{d as p}from"./p-BZ7V5xV5.js";const c=a.textinput.sm,f=a.textinput.md,b={sm:{height:c.height,paddingX:c.paddingX,gap:c.gap,radius:c.radius,fontSize:c.typography.fontSize,lineHeight:c.typography.lineHeight,fontWeight:c.typography.fontWeight},md:{height:f.height,paddingX:f.paddingX,gap:f.gap,radius:f.radius,fontSize:f.typography.fontSize,lineHeight:f.typography.lineHeight,fontWeight:f.typography.fontWeight}},m={text:a.textinput.text,icon:a.textinput.icon},g=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.input=e(this,"sdUpdate",7),this.focus=e(this,"sdFocus",7),this.blur=e(this,"sdBlur",7)}get host(){return this}value=null;type="text";size="sm";addonLabel="";placeholder="입력해 주세요.";disabled=!1;clearable=!1;width="";rules=[];autoFocus=!1;autocomplete="";maxlength;minlength;inputmode;enterkeyhint;spellcheck=!1;status;hint="";errorMessage="";inputClass="";readonly=!1;error=!1;focused=!1;hovered=!1;label="";icon=void 0;labelTooltip="";labelTooltipProps=null;inputStyle={};internalValue=null;passwordVisible=!1;nativeEl=void 0;formField;name=o();input;focus;blur;valueChanged(t){this.internalValue=t}internalValueChanged(t){t!==this.value&&(this.value=t,this.input?.emit(this.value))}async sdGetNativeElement(){return this.nativeEl||null}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}componentWillLoad(){this.value&&(this.internalValue=this.value)}componentDidLoad(){this.autoFocus&&this.nativeEl?.focus()}handleInput=t=>{this.internalValue=t.target.value};handleFocus=async(t,s)=>{this.focused="focus"===t,"blur"===t?(this.rules&&this.rules.length>0&&await(this.formField?.sdValidate()),this.blur?.emit(s)):this.focus?.emit(s)};render(){const t=b[this.size]??b.sm;return i("sd-field",{key:"a96aaa54fe54c9d9ee5ab31537e1b6fb7b612c8f",name:this.name,label:this.label,addonLabel:this.addonLabel,hint:this.hint,errorMessage:this.errorMessage,width:this.width,rules:this.rules,error:this.error,disabled:this.disabled,focused:this.focused,hovered:this.hovered,status:this.status,size:this.size,icon:this.icon,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:t=>this.formField=t,onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1,style:{"--sd-input-font-size":`${t.fontSize}px`,"--sd-input-line-height":`${t.lineHeight}px`,"--sd-input-font-weight":t.fontWeight,"--sd-input-padding-x":`${t.paddingX}px`,"--sd-input-gap":`${t.gap}px`,"--sd-input-text-color":m.text.default,"--sd-input-placeholder-color":m.text.placeholder,"--sd-input-disabled-color":m.text.disabled,"--sd-input-icon-color":m.icon.default,"--sd-system-size-field-sm-height":`${t.height}px`,"--sd-system-radius-field-sm":`${t.radius}px`}},i("label",{key:"d806549d41156ab414d04664e6887075ef97f307",class:"sd-input__content"},i("slot",{key:"29f447128f6211792742a252d1ea087b5a5b413e",name:"prefix"}),i("input",{key:"e1870c7573268e97eac820d7508e134c13c32b40",name:this.name,ref:t=>this.nativeEl=t,class:`sd-input__native ${this.inputClass}`,type:"password"===this.type&&this.passwordVisible?"text":this.type,value:this.internalValue||"",placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,autofocus:this.autoFocus,autocomplete:this.autocomplete||void 0,maxlength:this.maxlength,minlength:this.minlength,inputmode:this.inputmode,enterkeyhint:this.enterkeyhint,spellcheck:this.spellcheck,onInput:this.handleInput,onFocus:t=>this.handleFocus("focus",t),onBlur:t=>this.handleFocus("blur",t),style:this.inputStyle}),i("slot",{key:"f12b87b5d30878a55e1224abf789b924c1fd3a0c",name:"suffix"}),this.clearable&&this.internalValue&&!this.disabled&&i("sd-ghost-button",{key:"dad4be5dc6e8239dedc094fe0eb02a2587dd9f9c",icon:"close",ariaLabel:"close",size:"xxs",disabled:this.disabled,class:"sd-input__clear-icon",onClick:async()=>{this.disabled||(this.internalValue="",await(this.formField?.sdValidate()))}}),"password"===this.type&&i("sd-ghost-button",{key:"71c5cf7565ad13f08173fc10e828ddf5f8f546b8",icon:this.passwordVisible?"visibilityOn":"visibilityOff",ariaLabel:"visibility",size:"xxs",disabled:this.disabled,class:"sd-input__password-icon",onClick:()=>{this.disabled||(this.passwordVisible=!this.passwordVisible)}})))}static get watchers(){return{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}}static get style(){return"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)}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:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native[readonly]{color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0}sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__password-icon{cursor:not-allowed;pointer-events:none}"}},[772,"sd-input",{value:[1032],type:[1],size:[1],addonLabel:[1,"addon-label"],placeholder:[1],disabled:[4],clearable:[4],width:[8],rules:[16],autoFocus:[4,"auto-focus"],autocomplete:[1],maxlength:[2],minlength:[2],inputmode:[1],enterkeyhint:[1],spellcheck:[4],status:[1],hint:[1],errorMessage:[1,"error-message"],inputClass:[1,"input-class"],readonly:[4],error:[1028],focused:[1028],hovered:[1028],label:[1],icon:[16],labelTooltip:[1,"label-tooltip"],labelTooltipProps:[16],inputStyle:[16],internalValue:[32],passwordVisible:[32],sdGetNativeElement:[64],sdValidate:[64],sdReset:[64],sdResetValidate:[64],sdFocus:[64]},void 0,{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}]);function _(){"undefined"!=typeof customElements&&["sd-input","sd-button","sd-field","sd-floating-portal","sd-ghost-button","sd-icon","sd-tooltip"].forEach((t=>{switch(t){case"sd-input":customElements.get(n(t))||customElements.define(n(t),g);break;case"sd-button":customElements.get(n(t))||d();break;case"sd-field":customElements.get(n(t))||l();break;case"sd-floating-portal":customElements.get(n(t))||r();break;case"sd-ghost-button":customElements.get(n(t))||u();break;case"sd-icon":customElements.get(n(t))||h();break;case"sd-tooltip":customElements.get(n(t))||p()}}))}export{g as S,_ as d}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,a as s,h as e}from"./p-BqHL8W3c.js";import{n}from"./p-CCwNgVmC.js";import{i as o}from"./p-CJwbBrt5.js";const a=o.textinput.sm,d=o.textinput.md,l={sm:{height:a.height,paddingX:a.paddingX,gap:a.gap,radius:a.radius,fontSize:a.typography.fontSize,lineHeight:a.typography.lineHeight,fontWeight:a.typography.fontWeight},md:{height:d.height,paddingX:d.paddingX,gap:d.gap,radius:d.radius,fontSize:d.typography.fontSize,lineHeight:d.typography.lineHeight,fontWeight:d.typography.fontWeight}},h={text:o.textinput.text,icon:o.textinput.icon},r=class{constructor(s){t(this,s),this.input=i(this,"sdUpdate",7),this.focus=i(this,"sdFocus",7),this.blur=i(this,"sdBlur",7)}get host(){return s(this)}value=null;type="text";size="sm";addonLabel="";placeholder="입력해 주세요.";disabled=!1;clearable=!1;width="";rules=[];autoFocus=!1;autocomplete="";maxlength;minlength;inputmode;enterkeyhint;spellcheck=!1;status;hint="";errorMessage="";inputClass="";readonly=!1;error=!1;focused=!1;hovered=!1;label="";icon=void 0;labelTooltip="";labelTooltipProps=null;inputStyle={};internalValue=null;passwordVisible=!1;nativeEl=void 0;formField;name=n();input;focus;blur;valueChanged(t){this.internalValue=t}internalValueChanged(t){t!==this.value&&(this.value=t,this.input?.emit(this.value))}async sdGetNativeElement(){return this.nativeEl||null}async sdValidate(){this.formField?.sdValidate()}async sdReset(){this.formField?.sdReset()}async sdResetValidate(){this.formField?.sdResetValidation()}async sdFocus(){this.formField?.sdFocus()}componentWillLoad(){this.value&&(this.internalValue=this.value)}componentDidLoad(){this.autoFocus&&this.nativeEl?.focus()}handleInput=t=>{this.internalValue=t.target.value};handleFocus=async(t,i)=>{this.focused="focus"===t,"blur"===t?(this.rules&&this.rules.length>0&&await(this.formField?.sdValidate()),this.blur?.emit(i)):this.focus?.emit(i)};render(){const t=l[this.size]??l.sm;return e("sd-field",{key:"a96aaa54fe54c9d9ee5ab31537e1b6fb7b612c8f",name:this.name,label:this.label,addonLabel:this.addonLabel,hint:this.hint,errorMessage:this.errorMessage,width:this.width,rules:this.rules,error:this.error,disabled:this.disabled,focused:this.focused,hovered:this.hovered,status:this.status,size:this.size,icon:this.icon,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,ref:t=>this.formField=t,onMouseEnter:()=>this.hovered=!0,onMouseLeave:()=>this.hovered=!1,style:{"--sd-input-font-size":`${t.fontSize}px`,"--sd-input-line-height":`${t.lineHeight}px`,"--sd-input-font-weight":t.fontWeight,"--sd-input-padding-x":`${t.paddingX}px`,"--sd-input-gap":`${t.gap}px`,"--sd-input-text-color":h.text.default,"--sd-input-placeholder-color":h.text.placeholder,"--sd-input-disabled-color":h.text.disabled,"--sd-input-icon-color":h.icon.default,"--sd-system-size-field-sm-height":`${t.height}px`,"--sd-system-radius-field-sm":`${t.radius}px`}},e("label",{key:"d806549d41156ab414d04664e6887075ef97f307",class:"sd-input__content"},e("slot",{key:"29f447128f6211792742a252d1ea087b5a5b413e",name:"prefix"}),e("input",{key:"e1870c7573268e97eac820d7508e134c13c32b40",name:this.name,ref:t=>this.nativeEl=t,class:`sd-input__native ${this.inputClass}`,type:"password"===this.type&&this.passwordVisible?"text":this.type,value:this.internalValue||"",placeholder:this.placeholder,disabled:this.disabled,readonly:this.readonly,autofocus:this.autoFocus,autocomplete:this.autocomplete||void 0,maxlength:this.maxlength,minlength:this.minlength,inputmode:this.inputmode,enterkeyhint:this.enterkeyhint,spellcheck:this.spellcheck,onInput:this.handleInput,onFocus:t=>this.handleFocus("focus",t),onBlur:t=>this.handleFocus("blur",t),style:this.inputStyle}),e("slot",{key:"f12b87b5d30878a55e1224abf789b924c1fd3a0c",name:"suffix"}),this.clearable&&this.internalValue&&!this.disabled&&e("sd-ghost-button",{key:"dad4be5dc6e8239dedc094fe0eb02a2587dd9f9c",icon:"close",ariaLabel:"close",size:"xxs",disabled:this.disabled,class:"sd-input__clear-icon",onClick:async()=>{this.disabled||(this.internalValue="",await(this.formField?.sdValidate()))}}),"password"===this.type&&e("sd-ghost-button",{key:"71c5cf7565ad13f08173fc10e828ddf5f8f546b8",icon:this.passwordVisible?"visibilityOn":"visibilityOff",ariaLabel:"visibility",size:"xxs",disabled:this.disabled,class:"sd-input__password-icon",onClick:()=>{this.disabled||(this.passwordVisible=!this.passwordVisible)}})))}static get watchers(){return{value:[{valueChanged:0}],internalValue:[{internalValueChanged:0}]}}};r.style="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)}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:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native[readonly]{color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0}sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__password-icon{cursor:not-allowed;pointer-events:none}";const c=class{constructor(s){t(this,s),this.searchInput=i(this,"sdSearchInput",7),this.searchFocus=i(this,"sdSearchFocus",7)}isScrolled=!1;searchText="";searchInput;searchFocus;searchRef;async sdGetNativeElement(){return this.searchRef?this.searchRef.sdGetNativeElement():null}async sdSearchInputFocus(){const t=await this.sdGetNativeElement();t?.focus({preventScroll:!0})}render(){return e("div",{key:"36003b7e0e7d8a3df224b18257d4d6b1712d47da",class:{"sd-select-search-input":!0,"sd-select-search-input--scrolled":!!this.isScrolled},onClick:t=>t.stopPropagation()},e("sd-input",{key:"3b6f80d033a7903cb8e3692a2eebe0ab991e8d68",ref:t=>this.searchRef=t,value:this.searchText,placeholder:"검색",clearable:!0,inputStyle:{"padding-left":"8px"},autofocus:!0,onSdUpdate:t=>{this.searchInput.emit(String(t?.detail))},onSdFocus:()=>{this.searchFocus.emit()},onKeyDown:t=>{"Enter"===t.code&&t.stopPropagation()}},e("sd-icon",{key:"7c453e87ba6b384c5be7bb142697ba43c0d1a20b",name:"search",size:16,color:"#737373",style:{marginRight:"4px"},slot:"prefix"})))}};c.style="sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}";export{r as sd_input,c as sd_select_search_input}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,F as s,a as n}from"./p-BqHL8W3c.js";import{n as a}from"./p-CCwNgVmC.js";const o={1:26,2:36,3:42,4:50,5:58},r=10,h=class{constructor(e){t(this,e),this.pageChange=i(this,"sdPageChange",7)}currentPage=1;lastPage=1;simple=!1;pageChange;get paginationClasses(){const t=["sd-pagination"];return this.simple&&t.push("sd-pagination--simple"),t.join(" ")}get pageNumbers(){const t=Math.floor((this.currentPage-1)/r)*r+1,i=Math.min(t+r-1,this.lastPage);return Array.from({length:i-t+1},((i,e)=>t+e))}get buttonWidth(){const t=(this.pageNumbers.at(-1)??1).toString().length;return o[t]||o[1]}handlePageChange(t){t<1||t>this.lastPage||(this.currentPage=t,this.pageChange.emit(t))}handleGroupChange(t){const i=Math.min(Math.max(this.currentPage+("forward"===t?r:-10),1),this.lastPage);this.handlePageChange(i)}get isFirstGroup(){return this.currentPage<=r}get isLastGroup(){return Math.floor((this.currentPage-1)/r)*r+1+r-1>=this.lastPage}renderPrevButtons(){return this.simple?this.currentPage<=1?null:e(s,null,e("button",{"aria-label":"Go to first page",onClick:()=>this.handlePageChange(1)},e("sd-icon",{name:"chevronLeftEnd",size:"12",color:"#222222"})),e("button",{"aria-label":"Go to previous page",onClick:()=>this.handlePageChange(this.currentPage-1)},e("sd-icon",{name:"arrowLeft",size:"12",color:"#222222"}))):this.isFirstGroup?void 0:e(s,null,e("button",{"aria-label":"Go to first page",onClick:()=>this.handlePageChange(1)},e("sd-icon",{name:"chevronLeftEnd",size:"12",color:"#222222"})),e("button",{"aria-label":"Go to previous page group",onClick:()=>this.handleGroupChange("backward")},e("sd-icon",{name:"arrowLeft",size:"12",color:"#222222"})))}renderNextButtons(){return this.simple?this.currentPage>=this.lastPage?null:e(s,null,e("button",{"aria-label":"Go to next page",onClick:()=>this.handlePageChange(this.currentPage+1)},e("sd-icon",{name:"arrowRight",size:"12",color:"#222222"})),e("button",{"aria-label":"Go to last page",onClick:()=>this.handlePageChange(this.lastPage)},e("sd-icon",{name:"chevronRightEnd",size:"12",color:"#222222"}))):this.isLastGroup?void 0:e(s,null,e("button",{"aria-label":"Go to next page group",onClick:()=>this.handleGroupChange("forward")},e("sd-icon",{name:"arrowRight",size:"12",color:"#222222"})),e("button",{"aria-label":"Go to last page",onClick:()=>this.handlePageChange(this.lastPage)},e("sd-icon",{name:"chevronRightEnd",size:"12",color:"#222222"})))}render(){return e("div",{key:"5136947eb1aa1539d240af359eec8763d708906b",class:this.paginationClasses},e("div",{key:"3114f336a27b4f3bf6249fd82649b9d21831a57a",class:"prepend-btns"},this.renderPrevButtons()),this.simple?e("div",{class:"pagination-info"},e("span",{class:"current-page"},this.currentPage),e("span",null,"/"),e("span",{class:"last-page"},this.lastPage)):this.pageNumbers.map((t=>e("button",{type:"button","aria-current":this.currentPage===t?"page":void 0,class:{"pagination-btn":!0,"pagination-btn--selected":this.currentPage===t},disabled:this.currentPage===t,style:{"--pagination-btn-width":`${this.buttonWidth}px`},onClick:()=>this.handlePageChange(t)},t))),e("div",{key:"a85d2e89389d2638e797873e18717d1079a8b156",class:"append-btns"},this.renderNextButtons()))}};h.style=".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}";const l=class{constructor(e){t(this,e),this.update=i(this,"sdUpdate",7),this.dropDownShow=i(this,"sdDropDownShow",7)}static VIEWPORT_PADDING=20;static PORTAL_OFFSET_Y=4;static CLOSE_ANIMATION_DURATION=150;get el(){return n(this)}name="default";value=null;options=[];placeholder="선택";maxDropdownWidth="640px";dropdownHeight="260px";disabled=!1;label="";addonLabel="";error=!1;hint="";errorMessage="";fieldName="";rules=[];icon=void 0;labelTooltip="";labelTooltipProps=null;emitValue=!1;width="";isOpen=!1;isAnimatingOut=!1;triggerWidth="200px";resolvedDropdownHeight="260px";resolvedMaxDropdownWidth="640px";focused=!1;hovered=!1;update;dropDownShow;triggerRef;closeAnimationTimer;internalName=a();watchIsOpen(t){this.focused=t,this.dropDownShow.emit({isOpen:t})}get isMulti(){return"multi"===this.name||"multi_depth"===this.name}get displayText(){if(this.isMulti){if(!this.value||!Array.isArray(this.value))return"";if(this.emitValue){const t=this.flattenOptions(this.options);return this.value.map((i=>t.find((t=>t.value===i))?.label??"")).filter(Boolean).join(", ")}const t=this.value;return 0===t.length?"":t.map((t=>t.label)).join(", ")}if(null==this.value)return"";if(!this.emitValue&&"object"==typeof this.value&&!Array.isArray(this.value))return this.value.label??"";const t=this.flattenOptions(this.options).find((t=>t.value===this.value));return t?.label??""}flattenOptions(t){return t.flatMap((t=>t.children?this.flattenOptions(t.children):[t]))}getSelectedOptions(){const t=this.value;return t&&Array.isArray(t)?this.emitValue?t.map((t=>this.findOriginalOption(t,this.options))).filter((t=>!!t)):t:[]}toMultiValue(t){return this.emitValue?t.map((t=>t.value)):t}parsePixelValue(t,i){const e=Number.parseFloat(t);return Number.isFinite(e)?e:i}updateDropdownViewportConstraints(){if(!this.triggerRef)return;const t=this.triggerRef.getBoundingClientRect(),i=l.VIEWPORT_PADDING,e=l.PORTAL_OFFSET_Y,s=this.parsePixelValue(this.dropdownHeight,260),n=this.parsePixelValue(this.maxDropdownWidth,640),a=Math.max(window.innerHeight-t.bottom-i-e,0),o=Math.max(t.top-i-e,0),r=Math.max(a,o),h=Math.max(window.innerWidth-2*i,0);this.resolvedDropdownHeight=`${Math.min(s,r)}px`,this.resolvedMaxDropdownWidth=`${Math.min(n,h)}px`}handleViewportResize=()=>{this.isOpen&&this.updateDropdownViewportConstraints()};findOriginalOption(t,i){for(const e of i){if(e.value===t)return e;if(e.children){const i=this.findOriginalOption(t,e.children);if(i)return i}}}closeDropdown(){this.isOpen&&(this.isOpen=!1,this.isAnimatingOut=!0,this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.closeAnimationTimer=setTimeout((()=>{this.isAnimatingOut=!1}),l.CLOSE_ANIMATION_DURATION))}handleTriggerClick=()=>{this.triggerRef&&(this.triggerWidth=`${this.triggerRef.offsetWidth}px`),this.updateDropdownViewportConstraints(),this.isOpen?this.closeDropdown():(this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer),this.isAnimatingOut=!1,this.isOpen=!0)};emitUpdate(t){this.update.emit(t)}handleOptionSelect=t=>{const{option:i,leaves:e}=t;if(this.isMulti)this.handleMultiSelect(i,e);else{this.closeDropdown(),this.value=this.emitValue?i.value:i;const t=this.value;requestAnimationFrame((()=>{this.emitUpdate(t)}))}};handleMultiSelect(t,i){const e=this.getSelectedOptions();let s;if(t.children)if(i.every((t=>e.some((i=>i.value===t.value))))){const t=new Set(i.map((t=>t.value)));s=e.filter((i=>!t.has(i.value)))}else{const t=new Set(e.map((t=>t.value))),n=i.filter((i=>!t.has(i.value)));s=[...e,...n]}else s=e.some((i=>i.value===t.value))?e.filter((i=>i.value!==t.value)):[...e,t];this.value=this.toMultiValue(s),this.emitUpdate(this.value)}connectedCallback(){window.addEventListener("resize",this.handleViewportResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleViewportResize),this.closeAnimationTimer&&clearTimeout(this.closeAnimationTimer)}render(){const t={open:this.isOpen,parentRef:this.triggerRef,viewportPadding:l.VIEWPORT_PADDING,onSdClose:()=>{this.closeDropdown()}};return e("sd-field",{key:"b2a7f6ff2b4844069703400d68e9e736689d130a",name:this.fieldName||this.internalName,label:this.label,addonLabel:this.addonLabel,hint:this.hint,errorMessage:this.errorMessage,width:this.width,rules:this.rules,error:this.error,disabled:this.disabled,focused:this.focused,hovered:this.hovered,icon:this.icon,labelTooltip:this.labelTooltip,labelTooltipProps:this.labelTooltipProps,onMouseEnter:()=>{this.hovered=!0},onMouseLeave:()=>{this.hovered=!1}},e("div",{key:"f832e4df90c6874c56e1f0ec5b109a7a77f3d0d1",class:"sd-select-v2",ref:t=>{this.triggerRef=t}},e("sd-select-v2-trigger",{key:"9f2eaff8ca1ece8bec8fe635372e961a42ec0f80",displayText:this.displayText,placeholder:this.placeholder,disabled:this.disabled,isOpen:this.isOpen,onSdTriggerClick:this.handleTriggerClick})),(this.isOpen||this.isAnimatingOut)&&e("sd-portal",{key:"2b8c31b66ac81a51dbd7657d5bbeeeaeb3ff0c83",...t},e("sd-select-v2-listbox",{key:"8d16190fff39d403c74966e197c09afb55e9b9f8",name:this.name,options:this.options,value:this.value,emitValue:this.emitValue,triggerWidth:this.triggerWidth,maxWidth:this.resolvedMaxDropdownWidth,maxHeight:this.resolvedDropdownHeight,onSdOptionSelect:t=>this.handleOptionSelect(t.detail)})))}static get watchers(){return{isOpen:[{watchIsOpen:0}]}}};l.style="sd-select-v2{display:inline-flex}sd-select-v2 sd-portal{display:none}sd-select-v2 .sd-select-v2{position:relative;width:100%;height:100%}";export{h as sd_pagination,l as sd_select_v2}
|