@sellmate/design-system 1.6.0 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-action-modal.cjs.entry.js +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +1 -1
- package/dist/cjs/sd-barcode-input.cjs.entry.js +1 -1
- package/dist/cjs/sd-button_2.cjs.entry.js +2 -2
- package/dist/cjs/sd-calendar_2.cjs.entry.js +5 -5
- package/dist/cjs/sd-callout.cjs.entry.js +1 -1
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- package/dist/cjs/sd-chip.cjs.entry.js +4 -4
- package/dist/cjs/sd-circle-progress.cjs.entry.js +1 -1
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +4 -3
- package/dist/cjs/sd-date-picker_7.cjs.entry.js +48 -20
- package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +1 -1
- package/dist/cjs/sd-field_3.cjs.entry.js +5 -4
- package/dist/cjs/sd-ghost-button.cjs.entry.js +2 -2
- package/dist/cjs/sd-guide.cjs.entry.js +2 -2
- package/dist/cjs/sd-modal-container.cjs.entry.js +3 -0
- package/dist/cjs/sd-popover.cjs.entry.js +8 -5
- package/dist/cjs/sd-portal.cjs.entry.js +1 -1
- package/dist/cjs/sd-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/sd-radio.cjs.entry.js +1 -1
- package/dist/cjs/sd-tag.cjs.entry.js +2 -2
- package/dist/cjs/sd-text-link.cjs.entry.js +3 -3
- package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
- package/dist/collection/components/sd-button/sd-button.js +2 -2
- package/dist/collection/components/sd-calendar/sd-calendar.js +3 -3
- package/dist/collection/components/sd-callout/sd-callout.js +1 -1
- package/dist/collection/components/sd-card/sd-card.js +1 -1
- package/dist/collection/components/sd-chip/sd-chip.js +4 -4
- package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
- package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
- package/dist/collection/components/sd-field/sd-field.js +5 -4
- package/dist/collection/components/sd-file-picker/sd-file-picker.css +15 -1
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +44 -16
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +2 -2
- package/dist/collection/components/sd-guide/sd-guide.js +2 -2
- package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +21 -1
- package/dist/collection/components/sd-modal-container/sd-modal-container.js +3 -0
- package/dist/collection/components/sd-popover/sd-popover.js +13 -23
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-radio/sd-radio.js +1 -1
- package/dist/collection/components/sd-radio-button/sd-radio-button.js +1 -1
- package/dist/collection/components/sd-radio-group/sd-radio-group.js +1 -1
- package/dist/collection/components/sd-tag/sd-tag.js +2 -2
- package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
- package/dist/components/{p-BNUsawW7.js → p-2z2c2umH.js} +1 -1
- package/dist/components/{p-BDJJQALT.js → p-B45aOf4I.js} +1 -1
- package/dist/components/{p-CSbyXQa9.js → p-B6G64i5a.js} +1 -1
- package/dist/components/{p-CRq8zgt_.js → p-B6JOxZKP.js} +1 -1
- package/dist/components/{p-CAP-9lnL.js → p-B6L3bPm2.js} +1 -1
- package/dist/components/{p-z564gmGG.js → p-BWJtQGYo.js} +1 -1
- package/dist/components/{p-BqYASycS.js → p-Bhh7ig9Q.js} +1 -1
- package/dist/components/p-C8c6MuKQ.js +1 -0
- package/dist/components/{p-BYRvYsiC.js → p-CTuKWVTh.js} +1 -1
- package/dist/components/{p-CJRGLvgC.js → p-CkR5oiLy.js} +1 -1
- package/dist/components/{p-CK6jFkqR.js → p-CwRItc2J.js} +1 -1
- package/dist/components/{p-BYU3wOaN.js → p-D6cUtm8p.js} +1 -1
- package/dist/components/{p-2aQ4cVXp.js → p-DCFqtVBm.js} +1 -1
- package/dist/components/{p-D4mjSR0u.js → p-DISZkQqT.js} +1 -1
- package/dist/components/p-DMrXwfmf.js +1 -0
- package/dist/components/p-DhmsCQrB.js +1 -0
- package/dist/components/{p-DfKa36bs.js → p-DhtKHJ7-.js} +1 -1
- package/dist/components/p-DmDGMDzt.js +1 -0
- package/dist/components/{p-BZRMoE3E.js → p-I9SoAcVO.js} +1 -1
- package/dist/components/{p-DZ_3ZYMC.js → p-ZSGGRCNc.js} +1 -1
- package/dist/components/{p-sRzhIrJR.js → p-cX2DD74L.js} +1 -1
- package/dist/components/{p-BCeq6-MU.js → p-f10Mw7qM.js} +1 -1
- package/dist/components/p-p4bNikji.js +1 -0
- package/dist/components/{p-B_2U9h3P.js → p-wLoP3KMv.js} +1 -1
- package/dist/components/{p-BE-21GLH.js → p-y_6iWhDy.js} +1 -1
- package/dist/components/sd-action-modal.js +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-calendar.js +1 -1
- package/dist/components/sd-callout.js +1 -1
- package/dist/components/sd-card.js +1 -1
- package/dist/components/sd-chip.js +1 -1
- package/dist/components/sd-circle-progress.js +1 -1
- package/dist/components/sd-confirm-modal.js +1 -1
- package/dist/components/sd-date-picker-trigger.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker-calendar.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-dropdown-button.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-ghost-button.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-key-value-table.js +1 -1
- package/dist/components/sd-loading-container.js +1 -1
- package/dist/components/sd-loading-modal.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-popup.js +1 -1
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-radio-button.js +1 -1
- package/dist/components/sd-radio-group.js +1 -1
- package/dist/components/sd-radio.js +1 -1
- package/dist/components/sd-select.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-text-link.js +1 -1
- package/dist/components/sd-textarea.js +1 -1
- package/dist/components/sd-thead.js +1 -1
- package/dist/components/sd-toast-container.js +1 -1
- package/dist/components/sd-toast.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-0de5a53b.entry.js +1 -0
- package/dist/design-system/{p-ea17a361.entry.js → p-2d3d25bd.entry.js} +1 -1
- package/dist/design-system/p-3e2b5e01.entry.js +1 -0
- package/dist/design-system/{p-840f592d.entry.js → p-46faa7ed.entry.js} +1 -1
- package/dist/design-system/{p-b08ca29b.entry.js → p-4c3ead1b.entry.js} +1 -1
- package/dist/design-system/{p-a6c9baa5.entry.js → p-5c4fd9c1.entry.js} +1 -1
- package/dist/design-system/{p-eef5f8d7.entry.js → p-5d5d8220.entry.js} +1 -1
- package/dist/design-system/p-60b80bf3.entry.js +1 -0
- package/dist/design-system/{p-8d2815cf.entry.js → p-74b3e95b.entry.js} +1 -1
- package/dist/design-system/{p-0964c79a.entry.js → p-78b0b759.entry.js} +1 -1
- package/dist/design-system/p-78c2fd6d.entry.js +1 -0
- package/dist/design-system/p-8674d868.entry.js +1 -0
- package/dist/design-system/{p-17883b40.entry.js → p-9d34518e.entry.js} +1 -1
- package/dist/design-system/{p-696764b0.entry.js → p-9e75a5dc.entry.js} +1 -1
- package/dist/design-system/p-bd4e5141.entry.js +1 -0
- package/dist/design-system/{p-70f47e43.entry.js → p-c1bac61e.entry.js} +1 -1
- package/dist/design-system/{p-7444d475.entry.js → p-cffa6da7.entry.js} +1 -1
- package/dist/design-system/{p-1743651a.entry.js → p-e81cb8c9.entry.js} +1 -1
- package/dist/design-system/{p-e9079238.entry.js → p-ea586c5e.entry.js} +1 -1
- package/dist/design-system/{p-733aa107.entry.js → p-f14962bd.entry.js} +1 -1
- package/dist/design-system/{p-521e5d2e.entry.js → p-f3dff8b8.entry.js} +1 -1
- package/dist/design-system/{p-afdca5bb.entry.js → p-fc6da22d.entry.js} +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-action-modal.entry.js +1 -1
- package/dist/esm/sd-badge.entry.js +1 -1
- package/dist/esm/sd-barcode-input.entry.js +1 -1
- package/dist/esm/sd-button_2.entry.js +2 -2
- package/dist/esm/sd-calendar_2.entry.js +5 -5
- package/dist/esm/sd-callout.entry.js +1 -1
- package/dist/esm/sd-card.entry.js +1 -1
- package/dist/esm/sd-chip.entry.js +4 -4
- package/dist/esm/sd-circle-progress.entry.js +1 -1
- package/dist/esm/sd-confirm-modal_2.entry.js +4 -3
- package/dist/esm/sd-date-picker_7.entry.js +48 -20
- package/dist/esm/sd-date-range-picker-calendar.entry.js +1 -1
- package/dist/esm/sd-field_3.entry.js +5 -4
- package/dist/esm/sd-ghost-button.entry.js +2 -2
- package/dist/esm/sd-guide.entry.js +2 -2
- package/dist/esm/sd-modal-container.entry.js +3 -0
- package/dist/esm/sd-popover.entry.js +8 -5
- package/dist/esm/sd-portal.entry.js +1 -1
- package/dist/esm/sd-radio-button.entry.js +1 -1
- package/dist/esm/sd-radio.entry.js +1 -1
- package/dist/esm/sd-tag.entry.js +2 -2
- package/dist/esm/sd-text-link.entry.js +3 -3
- package/dist/types/components/sd-chip/sd-chip.d.ts +1 -1
- package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +3 -0
- package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts +1 -0
- package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +1 -0
- package/dist/types/components/sd-popover/sd-popover.d.ts +2 -1
- package/dist/types/components.d.ts +3 -8
- package/hydrate/index.js +102 -65
- package/hydrate/index.mjs +102 -65
- package/package.json +1 -1
- package/dist/components/p-BUW6I_d5.js +0 -1
- package/dist/components/p-DSIM5Mkt.js +0 -1
- package/dist/components/p-Dwko_Bx3.js +0 -1
- package/dist/components/p-pTx5xpqU.js +0 -1
- package/dist/design-system/p-20a2e0d2.entry.js +0 -1
- package/dist/design-system/p-3a848c36.entry.js +0 -1
- package/dist/design-system/p-4bd9f005.entry.js +0 -1
- package/dist/design-system/p-4cf1c8ae.entry.js +0 -1
- package/dist/design-system/p-c5c4a66b.entry.js +0 -1
- package/dist/design-system/p-f97b75d3.entry.js +0 -1
|
@@ -93,9 +93,9 @@ export class SdDatePicker {
|
|
|
93
93
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
94
94
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
95
95
|
};
|
|
96
|
-
return (h("sd-field", { key: '
|
|
96
|
+
return (h("sd-field", { key: '12d77a181caa4a6a9125db8a5c823149386ee059', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2abc775817955caf06dd721d7b91c65d1bfd54de', class: "sd-date-picker", ref: el => {
|
|
97
97
|
this.triggerRef = el;
|
|
98
|
-
} }, h("sd-date-picker-trigger", { key: '
|
|
98
|
+
} }, h("sd-date-picker-trigger", { key: 'c8c041a503785e35ac4a14d902eeef0a20fa2dd7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2c3bf831068ca090247fa4494fac6c2ce3b20e81', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '52df44d23b85540cbca17c352aba5568ff43685d', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
99
99
|
}
|
|
100
100
|
static get is() { return "sd-date-picker"; }
|
|
101
101
|
static get originalStyleUrls() {
|
|
@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
|
|
|
239
239
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
240
240
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
241
241
|
};
|
|
242
|
-
return (h(Fragment, { key: '
|
|
242
|
+
return (h(Fragment, { key: 'a9e5bc8198cfda50227069661812341e7a19b21d' }, h("div", { key: 'a2c5bf6ae806fc24f421cb6b52323f4e92bfc255', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '2575175fa3537e010e1c7d573428d5c8ebfae488', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'bd43ac98b88665dbe85804c8b6345c19dca7d9fa', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
243
243
|
}
|
|
244
244
|
static get is() { return "sd-date-range-picker-calendar"; }
|
|
245
245
|
static get originalStyleUrls() {
|
|
@@ -172,20 +172,21 @@ export class SdField {
|
|
|
172
172
|
: {}),
|
|
173
173
|
}
|
|
174
174
|
: {};
|
|
175
|
-
return (h("div", { key: '
|
|
175
|
+
return (h("div", { key: 'c6d4bc9d09982d65c31596319569590df9b994b1', class: {
|
|
176
176
|
'sd-field': true,
|
|
177
177
|
'sd-field--has-label': this.label !== '',
|
|
178
178
|
'sd-field--has-addon': addon !== '',
|
|
179
179
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
180
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '
|
|
180
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '24f3e7702b3d3be42f8236988e1d64e26a31840e', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '7c45edce014adee7e2eb91296779896d9fd9fcc3', class: "sd-field__main", style: this.width !== '' && this.width !== 0
|
|
181
181
|
? {
|
|
182
182
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
183
183
|
flex: 'none',
|
|
184
184
|
}
|
|
185
|
-
: {} }, h("div", { key: '
|
|
185
|
+
: {} }, h("div", { key: '13c99702bf11e4ff76332141a9eaff93185882d3', class: {
|
|
186
186
|
'sd-field__control': true,
|
|
187
187
|
'sd-field__control--has-addon': addon !== '',
|
|
188
|
-
} }, addon && h("div", { key: '
|
|
188
|
+
} }, addon && (h("div", { key: '461170360e26e24051fab4507a22e932f5a37244', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'c8b63273a253da7911e5d8a6f57143a9cc909853', name: this.icon.name, size: this.icon.size ??
|
|
189
|
+
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '3c4a72a6152c50d525df972a2a4c4d6840240116' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
|
|
189
190
|
}
|
|
190
191
|
renderLabel(label) {
|
|
191
192
|
if (label == null || label === '')
|
|
@@ -1,8 +1,22 @@
|
|
|
1
1
|
sd-file-picker {
|
|
2
|
-
display:
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.sd-file-picker__wrapper {
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
3
10
|
width: 100%;
|
|
4
11
|
}
|
|
5
12
|
|
|
13
|
+
.sd-file-picker__chip-list {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
gap: 8px;
|
|
17
|
+
margin-top: 8px;
|
|
18
|
+
}
|
|
19
|
+
|
|
6
20
|
.sd-file-picker__content {
|
|
7
21
|
width: 100%;
|
|
8
22
|
height: 100%;
|
|
@@ -65,11 +65,11 @@ export class SdFilePicker {
|
|
|
65
65
|
return undefined;
|
|
66
66
|
return typeof value === 'string' ? Number(value) : value;
|
|
67
67
|
}
|
|
68
|
-
validateFiles(files) {
|
|
68
|
+
validateFiles(files, existingCount = 0) {
|
|
69
69
|
const maxFileSize = this.toBytes(this.maxFileSize);
|
|
70
70
|
const maxTotalSize = this.toBytes(this.maxTotalSize);
|
|
71
71
|
const maxFiles = this.maxFiles != null ? Number(this.maxFiles) : undefined;
|
|
72
|
-
if (maxFiles != null && files.length > maxFiles) {
|
|
72
|
+
if (maxFiles != null && existingCount + files.length > maxFiles) {
|
|
73
73
|
return { accepted: [], rejected: files, reason: 'max-files' };
|
|
74
74
|
}
|
|
75
75
|
if (maxFileSize != null) {
|
|
@@ -93,22 +93,34 @@ export class SdFilePicker {
|
|
|
93
93
|
return;
|
|
94
94
|
}
|
|
95
95
|
const fileArray = Array.from(files);
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
96
|
+
if (this.multiple) {
|
|
97
|
+
const existing = Array.isArray(this.internalValue) ? this.internalValue : [];
|
|
98
|
+
const { accepted, rejected, reason } = this.validateFiles(fileArray, existing.length);
|
|
99
99
|
if (this.fileInputRef) {
|
|
100
100
|
this.fileInputRef.value = '';
|
|
101
101
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
102
|
+
if (reason != null) {
|
|
103
|
+
this.reject?.emit({ files: rejected, reason });
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
const merged = [...existing, ...accepted];
|
|
107
|
+
this.internalValue = merged;
|
|
108
|
+
this.value = merged;
|
|
109
|
+
this.update?.emit(this.value);
|
|
106
110
|
}
|
|
107
111
|
else {
|
|
112
|
+
const { accepted, rejected, reason } = this.validateFiles(fileArray);
|
|
113
|
+
if (reason != null) {
|
|
114
|
+
this.reject?.emit({ files: rejected, reason });
|
|
115
|
+
if (this.fileInputRef) {
|
|
116
|
+
this.fileInputRef.value = '';
|
|
117
|
+
}
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
108
120
|
this.internalValue = accepted[0];
|
|
121
|
+
this.value = this.internalValue;
|
|
122
|
+
this.update?.emit(this.value);
|
|
109
123
|
}
|
|
110
|
-
this.value = this.internalValue;
|
|
111
|
-
this.update?.emit(this.value);
|
|
112
124
|
};
|
|
113
125
|
handleClear = (event) => {
|
|
114
126
|
if (this.disabled)
|
|
@@ -128,6 +140,8 @@ export class SdFilePicker {
|
|
|
128
140
|
this.fileInputRef?.click();
|
|
129
141
|
};
|
|
130
142
|
hasFiles() {
|
|
143
|
+
if (this.multiple)
|
|
144
|
+
return false;
|
|
131
145
|
if (!this.internalValue)
|
|
132
146
|
return false;
|
|
133
147
|
if (Array.isArray(this.internalValue)) {
|
|
@@ -135,14 +149,28 @@ export class SdFilePicker {
|
|
|
135
149
|
}
|
|
136
150
|
return true;
|
|
137
151
|
}
|
|
152
|
+
hasChips() {
|
|
153
|
+
return Array.isArray(this.internalValue) && this.internalValue.length > 0;
|
|
154
|
+
}
|
|
138
155
|
getDisplayText() {
|
|
139
156
|
if (!this.hasFiles())
|
|
140
157
|
return this.placeholder ?? 'Click to upload';
|
|
141
|
-
if (Array.isArray(this.internalValue)) {
|
|
142
|
-
return this.internalValue.map(f => f.name).join(', ');
|
|
143
|
-
}
|
|
144
158
|
return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
|
|
145
159
|
}
|
|
160
|
+
handleChipRemove = (index) => {
|
|
161
|
+
if (!Array.isArray(this.internalValue))
|
|
162
|
+
return;
|
|
163
|
+
const newFiles = [...this.internalValue];
|
|
164
|
+
newFiles.splice(index, 1);
|
|
165
|
+
this.internalValue = newFiles;
|
|
166
|
+
this.value = newFiles;
|
|
167
|
+
this.update?.emit(this.value);
|
|
168
|
+
};
|
|
169
|
+
renderChipList() {
|
|
170
|
+
if (!this.hasChips())
|
|
171
|
+
return null;
|
|
172
|
+
return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
|
|
173
|
+
}
|
|
146
174
|
checkOverflow() {
|
|
147
175
|
if (!this.fileNamesRef)
|
|
148
176
|
return;
|
|
@@ -182,9 +210,9 @@ export class SdFilePicker {
|
|
|
182
210
|
return (h("div", { class: {
|
|
183
211
|
'sd-file-picker--inline': true,
|
|
184
212
|
'sd-file-picker--inline-disabled': this.disabled,
|
|
185
|
-
}, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
|
|
213
|
+
}, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content, this.renderChipList()));
|
|
186
214
|
}
|
|
187
|
-
return (h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false)
|
|
215
|
+
return (h("div", { class: "sd-file-picker__wrapper", style: cssVars }, h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
|
|
188
216
|
}
|
|
189
217
|
static get is() { return "sd-file-picker"; }
|
|
190
218
|
static get originalStyleUrls() {
|
|
@@ -42,7 +42,7 @@ export class SdGhostButton {
|
|
|
42
42
|
? GHOST_BUTTON_DISABLED_COLORS[intent]
|
|
43
43
|
: GHOST_BUTTON_CONTENT_COLORS[intent];
|
|
44
44
|
const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
|
|
45
|
-
return (h("button", { key: '
|
|
45
|
+
return (h("button", { key: '7bf9f8b8d487be0b66a969668308fd451faeb442', class: {
|
|
46
46
|
'sd-ghost-button': true,
|
|
47
47
|
'sd-ghost-button--disabled': this.disabled,
|
|
48
48
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
@@ -51,7 +51,7 @@ export class SdGhostButton {
|
|
|
51
51
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
|
|
52
52
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
53
53
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
54
|
-
}, onClick: this.handleClick }, h("sd-icon", { key: '
|
|
54
|
+
}, onClick: this.handleClick }, h("sd-icon", { key: '4b6b05d186f8c38d2f05415fa24960349dd6c453', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
55
55
|
}
|
|
56
56
|
static get is() { return "sd-ghost-button"; }
|
|
57
57
|
static get originalStyleUrls() {
|
|
@@ -77,10 +77,10 @@ export class SdGuide {
|
|
|
77
77
|
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
78
78
|
if (isActive)
|
|
79
79
|
buttonClasses.push('sd-guide__button--active');
|
|
80
|
-
return (h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '
|
|
80
|
+
return (h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '94e12fa797748a02334b97e13c5012ab95bc2bce', class: "sd-guide__popup", style: {
|
|
81
81
|
...this.guideStyle,
|
|
82
82
|
width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
|
|
83
|
-
} }, h("sd-ghost-button", { key: '
|
|
83
|
+
} }, h("sd-ghost-button", { key: '6fc71032016e7a3be0581508ef0ecc6772981185', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '385c0c18bc888be6a654525dc6f4359a56ad6de9', class: "sd-guide__popup__header" }, h("sd-icon", { key: '34624d2ac3397ba15b2dc7ba23dc460a87cb878b', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: 'dd3527ec329698b0fd1ec82f2a7d0cf5865802c2', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '429357d0203acdf31177353ceb45d9ac41fadae7', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
84
84
|
}
|
|
85
85
|
// 현재 2depth까지만 스타일 적용
|
|
86
86
|
renderListItem(message, depth = 0) {
|
|
@@ -7,6 +7,7 @@ export class SdLoadingModal {
|
|
|
7
7
|
buttonLabel = '';
|
|
8
8
|
width;
|
|
9
9
|
height;
|
|
10
|
+
progress;
|
|
10
11
|
click;
|
|
11
12
|
get resolvedState() {
|
|
12
13
|
return this.state ?? 'loading';
|
|
@@ -45,7 +46,7 @@ export class SdLoadingModal {
|
|
|
45
46
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
46
47
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
47
48
|
};
|
|
48
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: 'e1161a16a56cddedc8e4bb76370bdf456d90e15a', style: hostStyle }, h("div", { key: 'e01979e4636465afa4b960ffdb9722f645386dca', class: "sd-loading-modal" }, h("div", { key: '1c1ecc05d20f58084c0d6f8048b17cd84f446edb', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '6793b86562b67699c59fd83fb0d6ee7378f6d991', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '75036f7d88be636987de2fe999c00d338fa352d5', class: "sd-loading-modal__button" }, h("sd-button", { key: '91f30470702df2be7256d451cc80d27e86510d2e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
49
50
|
}
|
|
50
51
|
static get is() { return "sd-loading-modal"; }
|
|
51
52
|
static get originalStyleUrls() {
|
|
@@ -184,6 +185,25 @@ export class SdLoadingModal {
|
|
|
184
185
|
"setter": false,
|
|
185
186
|
"reflect": false,
|
|
186
187
|
"attribute": "height"
|
|
188
|
+
},
|
|
189
|
+
"progress": {
|
|
190
|
+
"type": "number",
|
|
191
|
+
"mutable": false,
|
|
192
|
+
"complexType": {
|
|
193
|
+
"original": "number",
|
|
194
|
+
"resolved": "number | undefined",
|
|
195
|
+
"references": {}
|
|
196
|
+
},
|
|
197
|
+
"required": false,
|
|
198
|
+
"optional": true,
|
|
199
|
+
"docs": {
|
|
200
|
+
"tags": [],
|
|
201
|
+
"text": ""
|
|
202
|
+
},
|
|
203
|
+
"getter": false,
|
|
204
|
+
"setter": false,
|
|
205
|
+
"reflect": false,
|
|
206
|
+
"attribute": "progress"
|
|
187
207
|
}
|
|
188
208
|
};
|
|
189
209
|
}
|
|
@@ -195,6 +195,9 @@ export class SdModalContainer {
|
|
|
195
195
|
if (this.hasOwnProp(options, 'height')) {
|
|
196
196
|
this.setAttr(el, 'height', options.height != null ? String(options.height) : undefined);
|
|
197
197
|
}
|
|
198
|
+
if (this.hasOwnProp(options, 'progress')) {
|
|
199
|
+
el.progress = options.progress;
|
|
200
|
+
}
|
|
198
201
|
}
|
|
199
202
|
applyProps(el, options) {
|
|
200
203
|
if (this.hasOwnProp(options, 'type'))
|
|
@@ -15,10 +15,10 @@ export class SdPopover {
|
|
|
15
15
|
disabled = false;
|
|
16
16
|
type = 'button';
|
|
17
17
|
menuTitle;
|
|
18
|
-
messages = [];
|
|
19
18
|
leftLink;
|
|
20
19
|
button;
|
|
21
20
|
menuClass = '';
|
|
21
|
+
slotContentHTML = '';
|
|
22
22
|
showChange;
|
|
23
23
|
buttonEl;
|
|
24
24
|
setShow = (next) => {
|
|
@@ -40,27 +40,30 @@ export class SdPopover {
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
handleClose = () => this.setShow(false);
|
|
43
|
+
componentWillLoad() {
|
|
44
|
+
this.slotContentHTML = this.el.innerHTML;
|
|
45
|
+
this.el.innerHTML = '';
|
|
46
|
+
}
|
|
43
47
|
render() {
|
|
44
48
|
const placement = this.placement ?? 'bottom';
|
|
45
49
|
const color = this.color ?? '#01BB4B';
|
|
46
50
|
const icon = this.icon ?? 'helpOutline';
|
|
47
51
|
const iconSize = this.iconSize ?? 12;
|
|
48
52
|
const menuClass = this.menuClass ?? '';
|
|
49
|
-
const messages = Array.isArray(this.messages) ? this.messages : [];
|
|
50
53
|
const leftLink = this.leftLink;
|
|
51
54
|
const button = this.button;
|
|
52
55
|
const hasFooter = !!leftLink || !!button;
|
|
53
|
-
return (h(Fragment, { key: '
|
|
56
|
+
return (h(Fragment, { key: 'f0b7cc015ab688e21d6df2a797c3964808965934' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '3b8ad8010a7d74fb519f0ad9ff504c0c0fa32941', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: '8fba73c8cf2718258a176dac2033fb3b33a8a618', class: {
|
|
54
57
|
'sd-floating-menu': true,
|
|
55
58
|
'sd-floating-menu--popover': true,
|
|
56
59
|
[`sd-floating-menu--${placement}`]: true,
|
|
57
60
|
[menuClass]: menuClass !== '',
|
|
58
61
|
}, style: {
|
|
59
62
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
60
|
-
} }, h("i", { key: '
|
|
63
|
+
} }, h("i", { key: '1cef252c66b1c350ea43849e552faced5a53fec0', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '755246fe5fbf9b203509f8d45d2bcbeead0c02c6' })), h("div", { key: 'cbefa421598f83f692533d4abf8cfc584b4e02e1', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '0f1dfbaf65236416ba00e5f87cb60e2e98971995', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (h("div", { key: '38ef67a38921e3fbd1e8bee95892655fc57d124c', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (h("div", { key: '6b3f297563e3b7aa17ace0e20c4423d09b528b32', class: {
|
|
61
64
|
'sd-floating-menu__buttons': true,
|
|
62
65
|
'sd-floating-menu__buttons--with-link': !!leftLink,
|
|
63
|
-
} }, leftLink && (h("sd-text-link", { key: '
|
|
66
|
+
} }, leftLink && (h("sd-text-link", { key: '6ff83b0aefa24ac3bbae7f1399fdaaa1028b4e75', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: 'b8b75cd68c55b16b5eb0e4635c16b784381ced78', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), h("sd-ghost-button", { key: '246ab053d1109d7b999e63c3aa5a1048d6096583', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
|
|
64
67
|
}
|
|
65
68
|
static get is() { return "sd-popover"; }
|
|
66
69
|
static get originalStyleUrls() {
|
|
@@ -337,24 +340,6 @@ export class SdPopover {
|
|
|
337
340
|
"reflect": false,
|
|
338
341
|
"attribute": "menu-title"
|
|
339
342
|
},
|
|
340
|
-
"messages": {
|
|
341
|
-
"type": "unknown",
|
|
342
|
-
"mutable": false,
|
|
343
|
-
"complexType": {
|
|
344
|
-
"original": "string[]",
|
|
345
|
-
"resolved": "string[]",
|
|
346
|
-
"references": {}
|
|
347
|
-
},
|
|
348
|
-
"required": false,
|
|
349
|
-
"optional": false,
|
|
350
|
-
"docs": {
|
|
351
|
-
"tags": [],
|
|
352
|
-
"text": ""
|
|
353
|
-
},
|
|
354
|
-
"getter": false,
|
|
355
|
-
"setter": false,
|
|
356
|
-
"defaultValue": "[]"
|
|
357
|
-
},
|
|
358
343
|
"leftLink": {
|
|
359
344
|
"type": "unknown",
|
|
360
345
|
"mutable": false,
|
|
@@ -423,6 +408,11 @@ export class SdPopover {
|
|
|
423
408
|
}
|
|
424
409
|
};
|
|
425
410
|
}
|
|
411
|
+
static get states() {
|
|
412
|
+
return {
|
|
413
|
+
"slotContentHTML": {}
|
|
414
|
+
};
|
|
415
|
+
}
|
|
426
416
|
static get events() {
|
|
427
417
|
return [{
|
|
428
418
|
"method": "showChange",
|
|
@@ -220,7 +220,7 @@ export class SdPortal {
|
|
|
220
220
|
this.close.emit();
|
|
221
221
|
}
|
|
222
222
|
render() {
|
|
223
|
-
return h("slot", { key: '
|
|
223
|
+
return h("slot", { key: '87fb9bf3f15d09321c6c02a1f7b4ed9084516a04' });
|
|
224
224
|
}
|
|
225
225
|
static get is() { return "sd-portal"; }
|
|
226
226
|
static get properties() {
|
|
@@ -48,7 +48,7 @@ export class SdRadio {
|
|
|
48
48
|
'--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
|
|
49
49
|
'--sd-radio-label-color': RADIO_COLORS.label,
|
|
50
50
|
};
|
|
51
|
-
return (h("label", { key: '
|
|
51
|
+
return (h("label", { key: '68f1b169f2a7b072a92a64286fa88eff99313faf', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: 'fa2474cc359ef4f5480a68d9b5d0b6f151e7eec8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '345f286e2f87e5dd0687fb94a59f6886eac25f24', class: "sd-radio__circle" }), this.label && h("span", { key: 'e8bd76682569820121c9469984f0054386d9b117', class: "sd-radio__label" }, this.label)));
|
|
52
52
|
}
|
|
53
53
|
static get is() { return "sd-radio"; }
|
|
54
54
|
static get originalStyleUrls() {
|
|
@@ -75,7 +75,7 @@ export class SdRadioButton {
|
|
|
75
75
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
76
76
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
77
77
|
};
|
|
78
|
-
return (h("div", { key: '
|
|
78
|
+
return (h("div", { key: 'b916d790862409f8b8e1da566f049daadfc4e5e2', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
79
79
|
const isSelected = this.isOptionSelected(option);
|
|
80
80
|
const isDisabled = this.isOptionDisabled(option);
|
|
81
81
|
return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -22,7 +22,7 @@ export class SdRadioGroup {
|
|
|
22
22
|
return classes.join(' ');
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (h("div", { key: '
|
|
25
|
+
return (h("div", { key: 'd60a7fed2bbe1cd2d577827b10c99627aabbda66', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
26
26
|
return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
|
|
27
27
|
})));
|
|
28
28
|
}
|
|
@@ -27,7 +27,7 @@ export class SdTag {
|
|
|
27
27
|
render() {
|
|
28
28
|
const config = this.resolvedConfig;
|
|
29
29
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
30
|
-
return (h("span", { key: '
|
|
30
|
+
return (h("span", { key: '945a8a13f4891b5174e48e262b2a108674da7198', class: "sd-tag", style: {
|
|
31
31
|
'--sd-tag-background': config.background,
|
|
32
32
|
'--sd-tag-content': config.content,
|
|
33
33
|
'--sd-tag-height': config.height,
|
|
@@ -37,7 +37,7 @@ export class SdTag {
|
|
|
37
37
|
'--sd-tag-font-weight': config.fontWeight,
|
|
38
38
|
'--sd-tag-line-height': config.lineHeight,
|
|
39
39
|
'--sd-tag-radius': config.radius,
|
|
40
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '
|
|
40
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '441932c2eb85eea471838db541fb95302527df23', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "sd-tag"; }
|
|
43
43
|
static get originalStyleUrls() {
|
|
@@ -27,7 +27,7 @@ export class SdTextLink {
|
|
|
27
27
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
28
28
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
29
29
|
};
|
|
30
|
-
return (h("span", { key: '
|
|
30
|
+
return (h("span", { key: '23ddcce86220acc4e6c8a585e4240ecb7baee9f8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
31
31
|
'sd-text-link': true,
|
|
32
32
|
'sd-text-link--disabled': this.disabled,
|
|
33
33
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -35,13 +35,13 @@ export class SdTextLink {
|
|
|
35
35
|
e.preventDefault();
|
|
36
36
|
this.handleClick();
|
|
37
37
|
}
|
|
38
|
-
} }, this.icon && (h("sd-icon", { key: '
|
|
38
|
+
} }, this.icon && (h("sd-icon", { key: 'd265458a74db086efa270fd165fa5fa9855b708b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '9cb7e5909036aea5b70496fbe5ca69ce10ab3035', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '5ebe27c5929095d1799d81e930b2efa8d616f5bd', class: "sd-text-link__arrow", style: {
|
|
39
39
|
width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
40
40
|
height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
|
|
41
41
|
display: 'inline-flex',
|
|
42
42
|
alignItems: 'center',
|
|
43
43
|
justifyContent: 'center',
|
|
44
|
-
} }, h("sd-icon", { key: '
|
|
44
|
+
} }, h("sd-icon", { key: '5fc735391386ac733b77bfac6947cccc61fad198', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
|
|
45
45
|
}
|
|
46
46
|
static get is() { return "sd-text-link"; }
|
|
47
47
|
static get originalStyleUrls() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as s,c as e,h as o,t as a}from"./p-pwNG5WaX.js";import{d as n}from"./p-
|
|
1
|
+
import{p as t,H as s,c as e,h as o,t as a}from"./p-pwNG5WaX.js";import{d as n}from"./p-B6L3bPm2.js";import{d as i}from"./p-DhtKHJ7-.js";import{d}from"./p-DQj-S8AC.js";var c={bg:"#07284A",content:"#FFFFFF"},l={bg:"#FB4444",content:"#FFFFFF"},r={bg:"#FFC700",content:"#222222"},b={bg:"#00973C",content:"#FFFFFF"},f={bg:"#005CC9",content:"#FFFFFF"},u={bg:"#E6F1FF",icon:"#0075FF",text:"#222222",textLink:"#555555"};const p={default:"secondary_sm",danger:"danger_outline_sm",caution:"neutral_outline_sm",complete:"neutral_outline_sm",accent:"neutral_outline_sm",info:"secondary_sm"},h={default:{bg:c.bg,content:c.content},danger:{bg:l.bg,content:l.content},caution:{bg:r.bg,content:r.content},complete:{bg:b.bg,content:b.content},accent:{bg:f.bg,content:f.content},info:{bg:u.bg,content:u.text,icon:u.icon,linkColor:u.textLink}},g={iconSize:"16"},m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=e(this,"sdClose",7),this.buttonClick=e(this,"sdButtonClick",7)}icon;message;link;linkLabel;buttonLabel;useClose=!1;type="default";close;buttonClick;render(){const t=h[this.type]??h.default,s=Number(g.iconSize),e=t.icon??t.content,a=t.linkColor??t.content,n=["default","caution","info"].includes(this.type),i=p[this.type]??p.default;return o("div",{key:"735fa3f949ee4c7d0178f999c02e90c829c133b4",style:{"--sd-toast-bg":t.bg,"--sd-toast-text":t.content,"--sd-toast-icon":e,"--sd-toast-link":a}},o("div",{key:"4e483d858c3268bde838ddc5c5c9cb5065855326",class:"sd-toast",role:"status","aria-live":"polite","aria-atomic":"true"},this.icon&&o("div",{key:"007eded85c508bdd2da05b1c9d489ff2d03a4df9",class:"sd-toast__icon"},o("sd-icon",{key:"099d5556f4b0a11f5162cb76a6166a2d662d9590",name:this.icon,size:s,color:e})),o("div",{key:"3825916248bc2385fe87c8aeb6d741b59738246f",class:"sd-toast__content"},o("span",{key:"fba817baf33179296f50d3fe4147cc99c38fbb83",class:"sd-toast__message"},this.message)),this.link&&o("a",{key:"39667765a9a72c761f0b464f78c7652e60e6dd16",href:this.link,class:"sd-toast__link",target:"_blank",rel:"noopener noreferrer"},this.linkLabel||this.link),this.buttonLabel&&o("sd-button",{key:"3da2f9a5daf53de4400bfec79654b5795c3b6af4",class:"sd-toast__button",name:i,label:this.buttonLabel,onSdClick:t=>this.buttonClick.emit(t.detail)}),this.useClose&&o("sd-ghost-button",{key:"2578d35dc11e06178c6902cb358bcdb8ccabbf36",class:"sd-toast__close",icon:"close",intent:n?"default":"inverse",ariaLabel:"close",size:"xs",onClick:()=>this.close.emit()})))}static get style(){return"sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:500;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-link, var(--sd-toast-text));text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px;white-space:nowrap}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__close{flex-shrink:0}"}},[512,"sd-toast",{icon:[1],message:[1],link:[1],linkLabel:[1,"link-label"],buttonLabel:[1,"button-label"],useClose:[4,"use-close"],type:[1]}]);function _(){"undefined"!=typeof customElements&&["sd-toast","sd-button","sd-ghost-button","sd-icon"].forEach((t=>{switch(t){case"sd-toast":customElements.get(a(t))||customElements.define(a(t),m);break;case"sd-button":customElements.get(a(t))||n();break;case"sd-ghost-button":customElements.get(a(t))||i();break;case"sd-icon":customElements.get(a(t))||d()}}))}export{m as S,_ as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as d,H as r,c as i,h as o,t as
|
|
1
|
+
import{p as d,H as r,c as i,h as o,t as a}from"./p-pwNG5WaX.js";import{d as e}from"./p-CTuKWVTh.js";const s=d(class extends r{constructor(d){super(),!1!==d&&this.__registerHost(),this.change=i(this,"sdUpdate",7)}value;options=[];direction="vertical";disabled=!1;groupName;change;valueChanged(d){this.value=d}handleRadioChange=d=>{if(this.disabled)return;const r=this.options.find((r=>String(r.value)===String(d))),i=r?r.value:d;this.value=i,this.change?.emit(i)};getGroupClasses(){return["sd-radio-group",`sd-radio-group--${this.direction??"vertical"}`].join(" ")}render(){return o("div",{key:"d60a7fed2bbe1cd2d577827b10c99627aabbda66",class:this.getGroupClasses(),role:"radiogroup"},this.options.map((d=>o("sd-radio",{key:`radio-${d.value}`,val:String(d.value),value:String(this.value),label:d.label,disabled:this.disabled||!!d.disabled,onSdUpdate:({detail:d})=>this.handleRadioChange(d)}))))}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height)}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}'}},[512,"sd-radio-group",{value:[1032],options:[1040],direction:[1],disabled:[4],groupName:[1,"group-name"]},void 0,{value:[{valueChanged:0}]}]);function t(){"undefined"!=typeof customElements&&["sd-radio-group","sd-radio"].forEach((d=>{switch(d){case"sd-radio-group":customElements.get(a(d))||customElements.define(a(d),s);break;case"sd-radio":customElements.get(a(d))||e()}}))}export{s as S,t as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as a,c as r,h as n,F as d,t}from"./p-pwNG5WaX.js";import{u as i,t as c,W as s,C as l}from"./p-DnW8EAqd.js";import{d as g}from"./p-BQn6le_Y.js";import{d as o}from"./p-DfKa36bs.js";import{d as h}from"./p-DQj-S8AC.js";const p=(e,a)=>{const[r,n,d]=e.split("-").map(Number),t=new Date(r,n-1,d);return t.setDate(t.getDate()+a),`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`},k={bg:g.datepicker.calendar.range.bg,height:g.datepicker.calendar.range.height,panelGap:g.datepicker.calendar.range.panelGap,divider:g.datepicker.calendar.range.divider},_=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.select=r(this,"sdSelect",7),this.viewChange=r(this,"sdViewChange",7)}value=null;selectable;maxRange;currentYear;currentMonth;pendingStart="";hoverDate="";displayValue=null;select;viewChange;dateUtil=i();componentWillLoad(){this.syncFromValue()}handleValueChange(){this.syncFromValue()}syncFromValue(){const e=this.value?.[0]||c,[a,r]=e.split("-").map(Number);this.currentYear=a,this.currentMonth=r,this.pendingStart="",this.hoverDate="",this.displayValue=this.value?[this.value[0],this.value[1]]:null}get rightYear(){return 12===this.currentMonth?this.currentYear+1:this.currentYear}get rightMonth(){return 12===this.currentMonth?1:this.currentMonth+1}formatDate(e,a,r){return`${e}-${String(a).padStart(2,"0")}-${String(r).padStart(2,"0")}`}buildCells(e,a){const r=new Date(e,a-1,1).getDay(),n=new Date(e,a,0).getDate(),d=1===a?12:a-1,t=1===a?e-1:e,i=new Date(t,d,0).getDate(),c=12===a?1:a+1,s=12===a?e+1:e,l=[];for(let e=r-1;e>=0;e--){const a=i-e;l.push({date:this.formatDate(t,d,a),day:a,inCurrentMonth:!1})}for(let r=1;r<=n;r++)l.push({date:this.formatDate(e,a,r),day:r,inCurrentMonth:!0});const g=(7-l.length%7)%7;for(let e=1;e<=g;e++)l.push({date:this.formatDate(s,c,e),day:e,inCurrentMonth:!1});return l}emitViewChange(){this.viewChange.emit({year:this.currentYear,month:this.currentMonth})}goPrevYear=e=>{e.stopPropagation(),this.currentYear-=1,this.emitViewChange()};goNextYear=e=>{e.stopPropagation(),this.currentYear+=1,this.emitViewChange()};goPrevMonth=e=>{e.stopPropagation();const{newYear:a,newMonth:r}=this.dateUtil.calculateYearMonth(this.currentYear,this.currentMonth,"prev");this.currentYear=a,this.currentMonth=r,this.emitViewChange()};goNextMonth=e=>{e.stopPropagation();const{newYear:a,newMonth:r}=this.dateUtil.calculateYearMonth(this.currentYear,this.currentMonth,"next");this.currentYear=a,this.currentMonth=r,this.emitViewChange()};goToday=e=>{e.stopPropagation();const[a,r]=c.split("-").map(Number);this.currentYear===a&&this.currentMonth===r||(this.currentYear=a,this.currentMonth=r,this.emitViewChange())};isDisabled(e){if(this.selectable){const[a,r]=this.selectable;if(null!=a&&""!==a&&e<a)return!0;if(null!=r&&""!==r&&e>r)return!0}if(null!=this.maxRange&&this.maxRange>0&&""!==this.pendingStart){const a=p(this.pendingStart,-this.maxRange),r=p(this.pendingStart,this.maxRange);if(e<a||e>r)return!0}return!1}handleDayClick(e){if(!e.inCurrentMonth)return;if(this.isDisabled(e.date))return;if(""===this.pendingStart||null!=this.displayValue&&""!==this.displayValue[0]&&""!==this.displayValue[1]||e.date<this.pendingStart)return this.pendingStart=e.date,this.displayValue=null,void(this.hoverDate="");const a=[this.pendingStart,e.date];this.pendingStart="",this.hoverDate="",this.displayValue=a,this.select.emit(a)}handleDayHover(e){e.inCurrentMonth&&""!==this.pendingStart&&(this.hoverDate=e.date)}getRangeState(e,a){if(!a)return{inRange:!1,isRangeStart:!1,isRangeEnd:!1,isSelectedEdge:!1};if(""!==this.pendingStart){const a=e===this.pendingStart,r=""!==this.hoverDate&&this.hoverDate>=this.pendingStart?this.hoverDate:"";return{inRange:""!==r&&e>this.pendingStart&&e<=r,isRangeStart:a,isRangeEnd:""!==r&&e===r,isSelectedEdge:a}}if(null!=this.displayValue&&""!==this.displayValue[0]&&""!==this.displayValue[1]){const[a,r]=this.displayValue,n=e===a,d=e===r;return{inRange:e>a&&e<r,isRangeStart:n,isRangeEnd:d,isSelectedEdge:n||d}}return{inRange:!1,isRangeStart:!1,isRangeEnd:!1,isSelectedEdge:!1}}renderHeader(e,a,r){const d=`${e}.${String(a).padStart(2,"0")}`;return n("div",{class:"sd-date-range-picker-calendar__header"},n("div",{class:"sd-date-range-picker-calendar__nav-group sd-date-range-picker-calendar__nav-group-month"},n("sd-ghost-button",{class:{"sd-date-range-picker-calendar__nav-placeholder":!r},ariaLabel:"prevMonth",size:"xxs",icon:"chevronLeft",onClick:this.goPrevMonth}),n("span",{class:"sd-date-range-picker-calendar__label sd-date-range-picker-calendar__label-month"},d),n("sd-ghost-button",{class:{"sd-date-range-picker-calendar__nav-placeholder":r},ariaLabel:"nextMonth",size:"xxs",icon:"chevronRight",onClick:this.goNextMonth})))}renderYearNav(){return n("div",{class:"sd-date-range-picker-calendar__top-bar"},n("div",{class:"sd-date-range-picker-calendar__year-nav"},n("sd-ghost-button",{ariaLabel:"prevYear",size:"xxs",icon:"chevronLeft",onClick:this.goPrevYear}),n("span",{class:"sd-date-range-picker-calendar__label"},this.currentYear),n("sd-ghost-button",{ariaLabel:"nextYear",size:"xxs",icon:"chevronRight",onClick:this.goNextYear})),n("button",{type:"button",class:"sd-date-range-picker-calendar__today-button",onClick:this.goToday},"오늘"))}renderPanel(e,a,r){const d=this.buildCells(e,a);return n("div",{class:"sd-date-range-picker-calendar__panel"},this.renderHeader(e,a,r),n("div",{class:"sd-date-range-picker-calendar__week"},s.map((e=>n("span",{key:e,class:"sd-date-range-picker-calendar__week-cell"},e)))),n("div",{class:"sd-date-range-picker-calendar__grid"},d.map((e=>{const{inRange:a,isRangeStart:r,isRangeEnd:d,isSelectedEdge:t}=this.getRangeState(e.date,e.inCurrentMonth),i=e.inCurrentMonth&&c===e.date,s=e.inCurrentMonth&&this.isDisabled(e.date);return n("button",{type:"button",key:e.date,class:{"sd-date-range-picker-calendar__day":!0,"sd-date-range-picker-calendar__day--empty":!e.inCurrentMonth,"sd-date-range-picker-calendar__day--today":i,"sd-date-range-picker-calendar__day--in-range":a,"sd-date-range-picker-calendar__day--range-start":r,"sd-date-range-picker-calendar__day--range-end":d,"sd-date-range-picker-calendar__day--selected":t,"sd-date-range-picker-calendar__day--disabled":s},disabled:!e.inCurrentMonth||s,tabindex:e.inCurrentMonth?void 0:-1,"aria-hidden":e.inCurrentMonth?void 0:"true",onClick:()=>this.handleDayClick(e),onMouseEnter:()=>this.handleDayHover(e)},n("span",{class:"sd-date-range-picker-calendar__day-circle"},e.inCurrentMonth?e.day:""))}))))}render(){return n(d,{key:"b4082936889d6bed77917d9b06aafa3c80d413a7"},n("div",{key:"baf10fa376bf32982816258f950edf65d5622a99",class:"sd-date-range-picker-calendar",style:{"--calendar-bg":l.bg,"--calendar-padding":`${l.paddingXY}px`,"--calendar-gap":`${l.gap}px`,"--calendar-radius":`${l.radius}px`,"--calendar-header-gap":`${l.header.gap}px`,"--calendar-header-divider":l.header.divider,"--calendar-header-font-size":`${l.header.fontSize}px`,"--calendar-header-line-height":`${l.header.lineHeight}px`,"--calendar-header-font-weight":l.header.fontWeight,"--calendar-week-font-size":`${l.week.fontSize}px`,"--calendar-week-line-height":`${l.week.lineHeight}px`,"--calendar-week-font-weight":l.week.fontWeight,"--calendar-week-color":l.week.color,"--calendar-grid-row-gap":`${l.grid.rowGap}px`,"--calendar-day-size":`${l.day.size}px`,"--calendar-day-circle-size":`${l.day.circleSize}px`,"--calendar-day-circle-radius":`${l.day.circleRadius}px`,"--calendar-day-text":l.day.defaultText,"--calendar-day-hover-text":l.day.hoverText,"--calendar-day-hover-border":l.day.hoverBorder,"--calendar-day-select-bg":l.day.selectBg,"--calendar-day-select-text":l.day.selectText,"--calendar-day-disabled-text":l.day.disabledText,"--calendar-day-font-size":`${l.day.fontSize}px`,"--calendar-day-line-height":`${l.day.lineHeight}px`,"--calendar-day-font-weight":l.day.fontWeight,"--range-bg":k.bg,"--range-height":`${k.height}px`,"--range-panel-gap":`${k.panelGap}px`,"--range-divider":k.divider}},this.renderYearNav(),n("div",{key:"bacc88f756b64f4382b1c8c648269bb2c233dc54",class:"sd-date-range-picker-calendar__panels"},this.renderPanel(this.currentYear,this.currentMonth,!0),n("span",{key:"dcebf3cd120e2e606784c365c309d4c48296a5ae",class:"sd-date-range-picker-calendar__divider","aria-hidden":"true"}),this.renderPanel(this.rightYear,this.rightMonth,!1))))}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return"sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}"}},[512,"sd-date-range-picker-calendar",{value:[16],selectable:[16],maxRange:[2,"max-range"],currentYear:[32],currentMonth:[32],pendingStart:[32],hoverDate:[32],displayValue:[32]},void 0,{value:[{handleValueChange:0}]}]);function u(){"undefined"!=typeof customElements&&["sd-date-range-picker-calendar","sd-ghost-button","sd-icon"].forEach((e=>{switch(e){case"sd-date-range-picker-calendar":customElements.get(t(e))||customElements.define(t(e),_);break;case"sd-ghost-button":customElements.get(t(e))||o();break;case"sd-icon":customElements.get(t(e))||h()}}))}export{_ as S,u as d}
|
|
1
|
+
import{p as e,H as a,c as r,h as n,F as d,t}from"./p-pwNG5WaX.js";import{u as i,t as c,W as s,C as l}from"./p-DnW8EAqd.js";import{d as g}from"./p-BQn6le_Y.js";import{d as o}from"./p-DhtKHJ7-.js";import{d as h}from"./p-DQj-S8AC.js";const p=(e,a)=>{const[r,n,d]=e.split("-").map(Number),t=new Date(r,n-1,d);return t.setDate(t.getDate()+a),`${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,"0")}-${String(t.getDate()).padStart(2,"0")}`},k={bg:g.datepicker.calendar.range.bg,height:g.datepicker.calendar.range.height,panelGap:g.datepicker.calendar.range.panelGap,divider:g.datepicker.calendar.range.divider},_=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.select=r(this,"sdSelect",7),this.viewChange=r(this,"sdViewChange",7)}value=null;selectable;maxRange;currentYear;currentMonth;pendingStart="";hoverDate="";displayValue=null;select;viewChange;dateUtil=i();componentWillLoad(){this.syncFromValue()}handleValueChange(){this.syncFromValue()}syncFromValue(){const e=this.value?.[0]||c,[a,r]=e.split("-").map(Number);this.currentYear=a,this.currentMonth=r,this.pendingStart="",this.hoverDate="",this.displayValue=this.value?[this.value[0],this.value[1]]:null}get rightYear(){return 12===this.currentMonth?this.currentYear+1:this.currentYear}get rightMonth(){return 12===this.currentMonth?1:this.currentMonth+1}formatDate(e,a,r){return`${e}-${String(a).padStart(2,"0")}-${String(r).padStart(2,"0")}`}buildCells(e,a){const r=new Date(e,a-1,1).getDay(),n=new Date(e,a,0).getDate(),d=1===a?12:a-1,t=1===a?e-1:e,i=new Date(t,d,0).getDate(),c=12===a?1:a+1,s=12===a?e+1:e,l=[];for(let e=r-1;e>=0;e--){const a=i-e;l.push({date:this.formatDate(t,d,a),day:a,inCurrentMonth:!1})}for(let r=1;r<=n;r++)l.push({date:this.formatDate(e,a,r),day:r,inCurrentMonth:!0});const g=(7-l.length%7)%7;for(let e=1;e<=g;e++)l.push({date:this.formatDate(s,c,e),day:e,inCurrentMonth:!1});return l}emitViewChange(){this.viewChange.emit({year:this.currentYear,month:this.currentMonth})}goPrevYear=e=>{e.stopPropagation(),this.currentYear-=1,this.emitViewChange()};goNextYear=e=>{e.stopPropagation(),this.currentYear+=1,this.emitViewChange()};goPrevMonth=e=>{e.stopPropagation();const{newYear:a,newMonth:r}=this.dateUtil.calculateYearMonth(this.currentYear,this.currentMonth,"prev");this.currentYear=a,this.currentMonth=r,this.emitViewChange()};goNextMonth=e=>{e.stopPropagation();const{newYear:a,newMonth:r}=this.dateUtil.calculateYearMonth(this.currentYear,this.currentMonth,"next");this.currentYear=a,this.currentMonth=r,this.emitViewChange()};goToday=e=>{e.stopPropagation();const[a,r]=c.split("-").map(Number);this.currentYear===a&&this.currentMonth===r||(this.currentYear=a,this.currentMonth=r,this.emitViewChange())};isDisabled(e){if(this.selectable){const[a,r]=this.selectable;if(null!=a&&""!==a&&e<a)return!0;if(null!=r&&""!==r&&e>r)return!0}if(null!=this.maxRange&&this.maxRange>0&&""!==this.pendingStart){const a=p(this.pendingStart,-this.maxRange),r=p(this.pendingStart,this.maxRange);if(e<a||e>r)return!0}return!1}handleDayClick(e){if(!e.inCurrentMonth)return;if(this.isDisabled(e.date))return;if(""===this.pendingStart||null!=this.displayValue&&""!==this.displayValue[0]&&""!==this.displayValue[1]||e.date<this.pendingStart)return this.pendingStart=e.date,this.displayValue=null,void(this.hoverDate="");const a=[this.pendingStart,e.date];this.pendingStart="",this.hoverDate="",this.displayValue=a,this.select.emit(a)}handleDayHover(e){e.inCurrentMonth&&""!==this.pendingStart&&(this.hoverDate=e.date)}getRangeState(e,a){if(!a)return{inRange:!1,isRangeStart:!1,isRangeEnd:!1,isSelectedEdge:!1};if(""!==this.pendingStart){const a=e===this.pendingStart,r=""!==this.hoverDate&&this.hoverDate>=this.pendingStart?this.hoverDate:"";return{inRange:""!==r&&e>this.pendingStart&&e<=r,isRangeStart:a,isRangeEnd:""!==r&&e===r,isSelectedEdge:a}}if(null!=this.displayValue&&""!==this.displayValue[0]&&""!==this.displayValue[1]){const[a,r]=this.displayValue,n=e===a,d=e===r;return{inRange:e>a&&e<r,isRangeStart:n,isRangeEnd:d,isSelectedEdge:n||d}}return{inRange:!1,isRangeStart:!1,isRangeEnd:!1,isSelectedEdge:!1}}renderHeader(e,a,r){const d=`${e}.${String(a).padStart(2,"0")}`;return n("div",{class:"sd-date-range-picker-calendar__header"},n("div",{class:"sd-date-range-picker-calendar__nav-group sd-date-range-picker-calendar__nav-group-month"},n("sd-ghost-button",{class:{"sd-date-range-picker-calendar__nav-placeholder":!r},ariaLabel:"prevMonth",size:"xxs",icon:"chevronLeft",onClick:this.goPrevMonth}),n("span",{class:"sd-date-range-picker-calendar__label sd-date-range-picker-calendar__label-month"},d),n("sd-ghost-button",{class:{"sd-date-range-picker-calendar__nav-placeholder":r},ariaLabel:"nextMonth",size:"xxs",icon:"chevronRight",onClick:this.goNextMonth})))}renderYearNav(){return n("div",{class:"sd-date-range-picker-calendar__top-bar"},n("div",{class:"sd-date-range-picker-calendar__year-nav"},n("sd-ghost-button",{ariaLabel:"prevYear",size:"xxs",icon:"chevronLeft",onClick:this.goPrevYear}),n("span",{class:"sd-date-range-picker-calendar__label"},this.currentYear),n("sd-ghost-button",{ariaLabel:"nextYear",size:"xxs",icon:"chevronRight",onClick:this.goNextYear})),n("button",{type:"button",class:"sd-date-range-picker-calendar__today-button",onClick:this.goToday},"오늘"))}renderPanel(e,a,r){const d=this.buildCells(e,a);return n("div",{class:"sd-date-range-picker-calendar__panel"},this.renderHeader(e,a,r),n("div",{class:"sd-date-range-picker-calendar__week"},s.map((e=>n("span",{key:e,class:"sd-date-range-picker-calendar__week-cell"},e)))),n("div",{class:"sd-date-range-picker-calendar__grid"},d.map((e=>{const{inRange:a,isRangeStart:r,isRangeEnd:d,isSelectedEdge:t}=this.getRangeState(e.date,e.inCurrentMonth),i=e.inCurrentMonth&&c===e.date,s=e.inCurrentMonth&&this.isDisabled(e.date);return n("button",{type:"button",key:e.date,class:{"sd-date-range-picker-calendar__day":!0,"sd-date-range-picker-calendar__day--empty":!e.inCurrentMonth,"sd-date-range-picker-calendar__day--today":i,"sd-date-range-picker-calendar__day--in-range":a,"sd-date-range-picker-calendar__day--range-start":r,"sd-date-range-picker-calendar__day--range-end":d,"sd-date-range-picker-calendar__day--selected":t,"sd-date-range-picker-calendar__day--disabled":s},disabled:!e.inCurrentMonth||s,tabindex:e.inCurrentMonth?void 0:-1,"aria-hidden":e.inCurrentMonth?void 0:"true",onClick:()=>this.handleDayClick(e),onMouseEnter:()=>this.handleDayHover(e)},n("span",{class:"sd-date-range-picker-calendar__day-circle"},e.inCurrentMonth?e.day:""))}))))}render(){return n(d,{key:"a9e5bc8198cfda50227069661812341e7a19b21d"},n("div",{key:"a2c5bf6ae806fc24f421cb6b52323f4e92bfc255",class:"sd-date-range-picker-calendar",style:{"--calendar-bg":l.bg,"--calendar-padding":`${l.paddingXY}px`,"--calendar-gap":`${l.gap}px`,"--calendar-radius":`${l.radius}px`,"--calendar-header-gap":`${l.header.gap}px`,"--calendar-header-divider":l.header.divider,"--calendar-header-font-size":`${l.header.fontSize}px`,"--calendar-header-line-height":`${l.header.lineHeight}px`,"--calendar-header-font-weight":l.header.fontWeight,"--calendar-week-font-size":`${l.week.fontSize}px`,"--calendar-week-line-height":`${l.week.lineHeight}px`,"--calendar-week-font-weight":l.week.fontWeight,"--calendar-week-color":l.week.color,"--calendar-grid-row-gap":`${l.grid.rowGap}px`,"--calendar-day-size":`${l.day.size}px`,"--calendar-day-circle-size":`${l.day.circleSize}px`,"--calendar-day-circle-radius":`${l.day.circleRadius}px`,"--calendar-day-text":l.day.defaultText,"--calendar-day-hover-text":l.day.hoverText,"--calendar-day-hover-border":l.day.hoverBorder,"--calendar-day-select-bg":l.day.selectBg,"--calendar-day-select-text":l.day.selectText,"--calendar-day-disabled-text":l.day.disabledText,"--calendar-day-font-size":`${l.day.fontSize}px`,"--calendar-day-line-height":`${l.day.lineHeight}px`,"--calendar-day-font-weight":l.day.fontWeight,"--range-bg":k.bg,"--range-height":`${k.height}px`,"--range-panel-gap":`${k.panelGap}px`,"--range-divider":k.divider}},this.renderYearNav(),n("div",{key:"2575175fa3537e010e1c7d573428d5c8ebfae488",class:"sd-date-range-picker-calendar__panels"},this.renderPanel(this.currentYear,this.currentMonth,!0),n("span",{key:"bd43ac98b88665dbe85804c8b6345c19dca7d9fa",class:"sd-date-range-picker-calendar__divider","aria-hidden":"true"}),this.renderPanel(this.rightYear,this.rightMonth,!1))))}static get watchers(){return{value:[{handleValueChange:0}]}}static get style(){return"sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}"}},[512,"sd-date-range-picker-calendar",{value:[16],selectable:[16],maxRange:[2,"max-range"],currentYear:[32],currentMonth:[32],pendingStart:[32],hoverDate:[32],displayValue:[32]},void 0,{value:[{handleValueChange:0}]}]);function u(){"undefined"!=typeof customElements&&["sd-date-range-picker-calendar","sd-ghost-button","sd-icon"].forEach((e=>{switch(e){case"sd-date-range-picker-calendar":customElements.get(t(e))||customElements.define(t(e),_);break;case"sd-ghost-button":customElements.get(t(e))||o();break;case"sd-icon":customElements.get(t(e))||h()}}))}export{_ as S,u as d}
|