@sellmate/design-system 1.0.38 → 1.0.39
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-button_20.cjs.entry.js +143 -35
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +6 -6
- package/dist/cjs/sd-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/sd-dropdown-button.cjs.entry.js +4 -15
- package/dist/cjs/sd-file-picker.cjs.entry.js +3 -3
- package/dist/cjs/sd-guide.cjs.entry.js +2 -2
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-group.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-option-group.cjs.entry.js +3 -3
- package/dist/cjs/sd-select-v2-list-item_2.cjs.entry.js +6 -6
- package/dist/cjs/sd-select-v2-listbox_2.cjs.entry.js +5 -10
- package/dist/cjs/sd-select-v2.cjs.entry.js +19 -8
- package/dist/cjs/{sd-select-v2.config-DedHbMz4.js → sd-select-v2.config-DZrPJ6OS.js} +0 -14
- package/dist/cjs/system-lN7yOMPF.js +20 -0
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +8 -7
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +3 -3
- package/dist/collection/components/sd-field/sd-field.css +12 -15
- package/dist/collection/components/sd-field/sd-field.js +26 -13
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +3 -3
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
- package/dist/collection/components/sd-guide/sd-guide.js +2 -2
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.config.js +34 -0
- package/dist/collection/components/sd-input/sd-input.css +16 -6
- package/dist/collection/components/sd-input/sd-input.js +61 -36
- package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
- package/dist/collection/components/sd-notice-modal/sd-notice-modal.js +2 -2
- package/dist/collection/components/sd-number-input/sd-number-input.js +11 -11
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js +2 -2
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js +3 -3
- package/dist/collection/components/sd-select/sd-select.js +8 -8
- package/dist/collection/components/sd-select-group/sd-select-group.js +8 -8
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js +2 -2
- package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js +3 -3
- package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js +1 -1
- package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.css +0 -12
- package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js +2 -27
- package/dist/collection/components/sd-select-v2/sd-select-v2.config.js +0 -8
- package/dist/collection/components/sd-select-v2/sd-select-v2.js +21 -16
- package/dist/components/{p-eZ82xLZt.js → p-0gO8WB9o.js} +1 -1
- package/dist/components/p-5UN9Ry8A.js +1 -0
- package/dist/components/{p-iusjOpcc.js → p-9EyS2_Bp.js} +1 -1
- package/dist/components/p-BH_WRHMs.js +1 -0
- package/dist/components/{p-C_3U90D_.js → p-BL0JF-Wh.js} +1 -1
- package/dist/components/{p-BAghib4O.js → p-BMpVqedy.js} +1 -1
- package/dist/components/{p-DQhPxH3o.js → p-C7G_tiJw.js} +1 -1
- package/dist/components/{p-Di17TAvI.js → p-CBmWor54.js} +1 -1
- package/dist/components/p-CCGsaeed.js +1 -0
- package/dist/components/{p-B0wG418y.js → p-CGU_sdK0.js} +1 -1
- package/dist/components/p-CIwsurLw.js +1 -0
- package/dist/components/p-CS6ohqwt.js +1 -0
- package/dist/components/{p-CQfrNtCG.js → p-Cefcggep.js} +1 -1
- package/dist/components/{p-CKi7RueC.js → p-Cm4BQbyn.js} +1 -1
- package/dist/components/{p-DjOSobI6.js → p-CnGJ-zsX.js} +1 -1
- package/dist/components/{p-BcrOYmsG.js → p-CsS4T0El.js} +1 -1
- package/dist/components/{p-Dpi-ww3O.js → p-DBCQtIY4.js} +1 -1
- package/dist/components/{p-BHLuiIDM.js → p-DS5oSTUS.js} +1 -1
- package/dist/components/{p-BiCK6R-J.js → p-Dzg317Va.js} +1 -1
- package/dist/components/p-Trj68Yo5.js +1 -0
- package/dist/components/p-_Zc2887O.js +1 -0
- package/dist/components/{p-CNUx4rbY.js → p-cWdYmHLY.js} +1 -1
- package/dist/components/{p-BzS0YntY.js → p-dvfewOFM.js} +1 -1
- package/dist/components/{p-BCPAPvp8.js → p-l5p-E_Gh.js} +1 -1
- package/dist/components/{p-D23gFKrT.js → p-nLkkdmKA.js} +1 -1
- package/dist/components/{p-DNyoL0F-.js → p-vMfU_F7J.js} +1 -1
- package/dist/components/sd-button-v2.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-calendar.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-confirm-modal.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-dropdown-button.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-loading-spinner.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-notice-modal.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-progress.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-option-group.js +1 -1
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select-search-input.js +1 -1
- package/dist/components/sd-select-v2-list-item-search.js +1 -1
- package/dist/components/sd-select-v2-list-item.js +1 -1
- package/dist/components/sd-select-v2-listbox.js +1 -1
- package/dist/components/sd-select-v2-trigger.js +1 -1
- package/dist/components/sd-select-v2.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/components/sd-tabs.js +1 -1
- package/dist/components/sd-tag.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.css +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-9933475e.entry.js → p-0fdca641.entry.js} +1 -1
- package/dist/design-system/{p-29a60707.entry.js → p-10945e57.entry.js} +1 -1
- package/dist/design-system/{p-f5460c6e.entry.js → p-1e975178.entry.js} +1 -1
- package/dist/design-system/{p-1b80635f.entry.js → p-2408d1ab.entry.js} +1 -1
- package/dist/design-system/p-342f48ab.entry.js +1 -0
- package/dist/design-system/p-36ba5f33.entry.js +1 -0
- package/dist/design-system/{p-72b09ede.entry.js → p-4731457c.entry.js} +1 -1
- package/dist/design-system/{p-c7c66261.entry.js → p-63f997d7.entry.js} +1 -1
- package/dist/design-system/p-9c6fea35.entry.js +1 -0
- package/dist/design-system/{p-812d7c00.entry.js → p-9d431ea6.entry.js} +1 -1
- package/dist/design-system/p-BOmBg3kj.js +1 -0
- package/dist/design-system/p-CS6ohqwt.js +1 -0
- package/dist/design-system/{p-f7203145.entry.js → p-b71d0858.entry.js} +1 -1
- package/dist/design-system/p-e96c881f.entry.js +1 -0
- package/dist/design-system/p-f87b6a45.entry.js +1 -0
- package/dist/design-system/p-f9075737.entry.js +1 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button_20.entry.js +143 -35
- package/dist/esm/sd-confirm-modal_2.entry.js +6 -6
- package/dist/esm/sd-date-picker.entry.js +1 -1
- package/dist/esm/sd-dropdown-button.entry.js +1 -12
- package/dist/esm/sd-file-picker.entry.js +3 -3
- package/dist/esm/sd-guide.entry.js +2 -2
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-progress.entry.js +2 -2
- package/dist/esm/sd-select-group.entry.js +2 -2
- package/dist/esm/sd-select-multiple.entry.js +1 -1
- package/dist/esm/sd-select-option-group.entry.js +3 -3
- package/dist/esm/sd-select-v2-list-item_2.entry.js +6 -6
- package/dist/esm/sd-select-v2-listbox_2.entry.js +5 -10
- package/dist/esm/{sd-select-v2.config-BXY0UBNx.js → sd-select-v2.config-BOmBg3kj.js} +0 -14
- package/dist/esm/sd-select-v2.entry.js +19 -8
- package/dist/esm/system-CS6ohqwt.js +18 -0
- package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts +1 -1
- package/dist/types/components/sd-field/sd-field.d.ts +1 -1
- package/dist/types/components/sd-input/sd-input.config.d.ts +38 -0
- package/dist/types/components/sd-input/sd-input.d.ts +4 -3
- package/dist/types/components/sd-number-input/sd-number-input.d.ts +1 -1
- package/dist/types/components/sd-select/sd-select.d.ts +1 -1
- package/dist/types/components/sd-select-group/sd-select-group.d.ts +1 -1
- package/dist/types/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.d.ts +0 -1
- package/dist/types/components/sd-select-v2/sd-select-v2.config.d.ts +0 -8
- package/dist/types/components/sd-select-v2/sd-select-v2.d.ts +2 -2
- package/dist/types/components.d.ts +73 -68
- package/hydrate/index.js +208 -105
- package/hydrate/index.mjs +208 -105
- package/package.json +1 -1
- package/dist/components/p-BzUx5X3N.js +0 -1
- package/dist/components/p-CC6lx8di.js +0 -1
- package/dist/components/p-CXKpL2GZ.js +0 -1
- package/dist/components/p-CyJZik9T.js +0 -1
- package/dist/components/p-DASdfaPf.js +0 -1
- package/dist/components/p-DyFykTJN.js +0 -1
- package/dist/design-system/p-26fc1fc0.entry.js +0 -1
- package/dist/design-system/p-87a783a7.entry.js +0 -1
- package/dist/design-system/p-BXY0UBNx.js +0 -1
- package/dist/design-system/p-c549e2c0.entry.js +0 -1
- package/dist/design-system/p-cc837ebf.entry.js +0 -1
- package/dist/design-system/p-e641f41f.entry.js +0 -1
- package/dist/design-system/p-e8fbedcd.entry.js +0 -1
|
@@ -4,6 +4,7 @@ var index = require('./index-Qvv0fGgj.js');
|
|
|
4
4
|
var component_button = require('./component.button-BjTPq93d.js');
|
|
5
5
|
var useDatePicker = require('./useDatePicker-B8_GIuXI.js');
|
|
6
6
|
var index$1 = require('./index-BUvXpPc3.js');
|
|
7
|
+
var system = require('./system-lN7yOMPF.js');
|
|
7
8
|
var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
|
|
8
9
|
var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');
|
|
9
10
|
var tooltipArrow = require('./tooltipArrow-Mb2Dhc7T.js');
|
|
@@ -471,13 +472,13 @@ const SdDateRangePicker = class {
|
|
|
471
472
|
return (index.h("div", { key: 'd76c5830570b080fe07fc01e9a3ea8f09ec1bf40', class: {
|
|
472
473
|
'sd-date-range-picker': true,
|
|
473
474
|
'sd-date-range-picker--disabled': this.disabled,
|
|
474
|
-
} }, index.h("sd-input", { key: '
|
|
475
|
+
} }, index.h("sd-input", { key: '3ecf2ccaa66e472037607fca63f29317a59e2f5d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: '317167fa8f25a25e869757dfdc6df63671caea57', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: 'f11baac3755a432b5c379a1b5a26590341136d68', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: 'c0cbd599dd4fac9970f3aa9bd84594fffb394533', class: "sd-date-range-picker__menu" }, index.h("div", { key: 'caaaa777a14f77d421b5d547ee45d71731390f74', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: '6c5169b88ce2f6d132ae18f1944ab4dcae3ba304', type: "button", name: "prev", title: "Previous", onClick: () => {
|
|
475
476
|
this.setPrevYear(this.prevYear - 1);
|
|
476
477
|
this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
|
|
477
|
-
} }, index.h("sd-icon", { key: '
|
|
478
|
+
} }, index.h("sd-icon", { key: '19a1d47598e047faa63ad230e5470421e71ecc66', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: '8f6d4100f1de0b5c830cc2b7cf1479a7e87f77f5', class: "header-label" }, this.prevYear), index.h("button", { key: '56d402286b78e5be0c2d1cc3227afbc6e8b327c7', type: "button", name: "next", title: "Next", onClick: () => {
|
|
478
479
|
this.setPrevYear(this.prevYear + 1);
|
|
479
480
|
this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
|
|
480
|
-
} }, index.h("sd-icon", { key: '
|
|
481
|
+
} }, index.h("sd-icon", { key: '6d6faeb9a890643e8b4b79a40d5c71a4a0e488f6', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: 'a959a9309a6a6fe17f3cf4b813c865d0b0470722', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
|
|
481
482
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
482
483
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index$1, Number(day))), type: this.getDateBoxType(this.formatDate(index$1, Number(day))), isToday: useDatePicker.today === this.formatDate(index$1, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index$1, Number(day))), inRange: this.isDateInRange(this.formatDate(index$1, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index$1, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index$1, Number(day)), onSdClick: () => this.handleDateClick(index$1, Number(day)), onSdMouseOver: () => this.handleDateHover(index$1, Number(day)) }))))))))))))));
|
|
483
484
|
}
|
|
@@ -489,7 +490,24 @@ const SdDateRangePicker = class {
|
|
|
489
490
|
};
|
|
490
491
|
SdDateRangePicker.style = sdDateRangePickerCss();
|
|
491
492
|
|
|
492
|
-
const
|
|
493
|
+
const field = {
|
|
494
|
+
addonLabel: {
|
|
495
|
+
paddingX: "12",
|
|
496
|
+
typography: {
|
|
497
|
+
fontWeight: "500",
|
|
498
|
+
fontSize: "12",
|
|
499
|
+
lineHeight: "20"},
|
|
500
|
+
bg: "#F6F6F6",
|
|
501
|
+
border: {
|
|
502
|
+
"default": "#AAAAAA",
|
|
503
|
+
disabled: "#CCCCCC"}
|
|
504
|
+
}
|
|
505
|
+
};
|
|
506
|
+
var fieldTokens = {
|
|
507
|
+
field: field
|
|
508
|
+
};
|
|
509
|
+
|
|
510
|
+
const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid var(--sd-system-color-field-border-hover) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#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;margin-right:var(--sd-system-space-field-sm-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:6px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;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:2px}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;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:1px solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px)}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-sm-height);display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-sm);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid 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--pass .sd-field__wrapper .sd-field__control{border:1px solid #2BCE6C !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-system-color-field-border-danger);font-size:12px;line-height:20px;margin-top:4px}`;
|
|
493
511
|
|
|
494
512
|
const FORM_PARENT_TAGS = [
|
|
495
513
|
'sd-select',
|
|
@@ -514,7 +532,7 @@ const SdField = class {
|
|
|
514
532
|
status;
|
|
515
533
|
// props - label
|
|
516
534
|
label = '';
|
|
517
|
-
|
|
535
|
+
addonLabel = '';
|
|
518
536
|
icon = undefined;
|
|
519
537
|
labelTooltip = '';
|
|
520
538
|
labelTooltipProps = null;
|
|
@@ -610,20 +628,32 @@ const SdField = class {
|
|
|
610
628
|
}
|
|
611
629
|
}
|
|
612
630
|
render() {
|
|
613
|
-
|
|
631
|
+
const addon = this.addonLabel;
|
|
632
|
+
const addonTokens = fieldTokens.field.addonLabel;
|
|
633
|
+
const addonCssVars = addon ? {
|
|
634
|
+
'--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
|
|
635
|
+
'--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
|
|
636
|
+
'--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
|
|
637
|
+
'--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
|
|
638
|
+
'--sd-field-addon-bg': addonTokens.bg,
|
|
639
|
+
'--sd-field-addon-border-color': this.disabled
|
|
640
|
+
? addonTokens.border.disabled
|
|
641
|
+
: addonTokens.border.default,
|
|
642
|
+
} : {};
|
|
643
|
+
return (index.h("div", { key: '54d2c495dbfb3a4e749b49fe770c3ed4b5f9f5ad', class: {
|
|
614
644
|
'sd-field': true,
|
|
615
645
|
'sd-field--has-label': !!this.label,
|
|
616
|
-
'sd-field--has-
|
|
646
|
+
'sd-field--has-addon': !!addon,
|
|
617
647
|
[this.fieldStatus]: !!this.fieldStatus,
|
|
618
|
-
} }, index.h("div", { key: '
|
|
648
|
+
}, style: addonCssVars }, index.h("div", { key: '7399b420af3adf54f3a1c7c3257e85453e17a9a1', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'db4915376244d14cfd63fcd07258de2c7d0e4c81', class: {
|
|
619
649
|
'sd-field__control': true,
|
|
620
|
-
'sd-field__control--
|
|
621
|
-
} }, index.h("slot", { key: '
|
|
650
|
+
'sd-field__control--has-addon': !!addon,
|
|
651
|
+
} }, addon && (index.h("div", { key: 'f1dde4b40f69fd14a625ff93146b0837d02b2a78', class: "sd-field__addon" }, addon)), index.h("slot", { key: '44d3d67efa90d71eb9868de9a8a7fcdd373dfff8' }))), this.errorMsg && index.h("div", { key: '2923e6fd9be55fe20489e7b1b164afa719d86dfa', class: "sd-field__error-message" }, this.errorMsg)));
|
|
622
652
|
}
|
|
623
653
|
renderLabel(label) {
|
|
624
654
|
if (!label)
|
|
625
655
|
return null;
|
|
626
|
-
return (index.h("label", { class:
|
|
656
|
+
return (index.h("label", { class: "sd-field__label" }, this.icon && (index.h("sd-icon", { name: this.icon.name, size: this.icon.size ?? 10, color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), index.h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (index.h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, index.h("div", { slot: "content" }, this.labelTooltip)))));
|
|
627
657
|
}
|
|
628
658
|
};
|
|
629
659
|
SdField.style = sdFieldCss();
|
|
@@ -779,7 +809,7 @@ const SdFloatingPopover = class {
|
|
|
779
809
|
this.close.emit();
|
|
780
810
|
}
|
|
781
811
|
render() {
|
|
782
|
-
return index.h("slot", { key: '
|
|
812
|
+
return index.h("slot", { key: 'a49df03bd324a4d37ac077881c0df71603cd3c8f' });
|
|
783
813
|
}
|
|
784
814
|
};
|
|
785
815
|
SdFloatingPopover.style = sdFloatingPortalCss();
|
|
@@ -2793,12 +2823,74 @@ const SdIcon = class {
|
|
|
2793
2823
|
}
|
|
2794
2824
|
render() {
|
|
2795
2825
|
const IconComponent = Icons[this.name]?.[this.size];
|
|
2796
|
-
return (index.h("i", { key: '
|
|
2826
|
+
return (index.h("i", { key: '62de720d781da34b7939d1ed6c3260dba41f3bd2', class: this.getIconClasses(), style: this.iconStyle }, index.h(IconComponent, { key: '5b4d068ad7db78ca7faee90e3712d383c9db3c49', color: this.resolvedColor })));
|
|
2797
2827
|
}
|
|
2798
2828
|
};
|
|
2799
2829
|
SdIcon.style = sdIconCss();
|
|
2800
2830
|
|
|
2801
|
-
const
|
|
2831
|
+
const input = {
|
|
2832
|
+
sm: {
|
|
2833
|
+
height: "28",
|
|
2834
|
+
paddingX: "12",
|
|
2835
|
+
gap: "8",
|
|
2836
|
+
radius: "4",
|
|
2837
|
+
typography: {
|
|
2838
|
+
fontWeight: "400",
|
|
2839
|
+
fontSize: "12",
|
|
2840
|
+
lineHeight: "20"}
|
|
2841
|
+
},
|
|
2842
|
+
md: {
|
|
2843
|
+
height: "36",
|
|
2844
|
+
paddingX: "16",
|
|
2845
|
+
gap: "12",
|
|
2846
|
+
radius: "6",
|
|
2847
|
+
typography: {
|
|
2848
|
+
fontWeight: "400",
|
|
2849
|
+
fontSize: "16",
|
|
2850
|
+
lineHeight: "26"}
|
|
2851
|
+
},
|
|
2852
|
+
text: {
|
|
2853
|
+
"default": "#222222",
|
|
2854
|
+
placeholder: "#AAAAAA",
|
|
2855
|
+
disabled: "#888888"},
|
|
2856
|
+
icon: {
|
|
2857
|
+
"default": "#888888"
|
|
2858
|
+
}};
|
|
2859
|
+
var inputTokens = {
|
|
2860
|
+
input: input
|
|
2861
|
+
};
|
|
2862
|
+
|
|
2863
|
+
const sm = inputTokens.input.sm;
|
|
2864
|
+
const md = inputTokens.input.md;
|
|
2865
|
+
const INPUT_SIZE_MAP = {
|
|
2866
|
+
sm: {
|
|
2867
|
+
height: sm.height,
|
|
2868
|
+
paddingX: sm.paddingX,
|
|
2869
|
+
gap: sm.gap,
|
|
2870
|
+
radius: sm.radius,
|
|
2871
|
+
fontSize: sm.typography.fontSize,
|
|
2872
|
+
lineHeight: sm.typography.lineHeight,
|
|
2873
|
+
fontWeight: sm.typography.fontWeight,
|
|
2874
|
+
},
|
|
2875
|
+
md: {
|
|
2876
|
+
height: md.height,
|
|
2877
|
+
paddingX: md.paddingX,
|
|
2878
|
+
gap: md.gap,
|
|
2879
|
+
radius: md.radius,
|
|
2880
|
+
fontSize: md.typography.fontSize,
|
|
2881
|
+
lineHeight: md.typography.lineHeight,
|
|
2882
|
+
fontWeight: md.typography.fontWeight,
|
|
2883
|
+
},
|
|
2884
|
+
};
|
|
2885
|
+
const INPUT_COLORS = {
|
|
2886
|
+
text: inputTokens.input.text,
|
|
2887
|
+
icon: inputTokens.input.icon,
|
|
2888
|
+
};
|
|
2889
|
+
const INPUT_ICON = {
|
|
2890
|
+
iconSize: Number(system.systemTokens.size.field.icon),
|
|
2891
|
+
};
|
|
2892
|
+
|
|
2893
|
+
const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#D8D8D8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color: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::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon{flex-shrink:0;cursor:pointer}`;
|
|
2802
2894
|
|
|
2803
2895
|
const SdInput = class {
|
|
2804
2896
|
constructor(hostRef) {
|
|
@@ -2809,14 +2901,13 @@ const SdInput = class {
|
|
|
2809
2901
|
}
|
|
2810
2902
|
get host() { return index.getElement(this); }
|
|
2811
2903
|
value = null;
|
|
2812
|
-
// @Prop() name?: string;
|
|
2813
2904
|
type = 'text';
|
|
2814
|
-
|
|
2905
|
+
size = 'sm';
|
|
2906
|
+
addonLabel = '';
|
|
2815
2907
|
placeholder = '입력해 주세요.';
|
|
2816
2908
|
disabled = false;
|
|
2817
2909
|
clearable = false;
|
|
2818
|
-
width;
|
|
2819
|
-
barcode = false;
|
|
2910
|
+
width = '100%';
|
|
2820
2911
|
rules = [];
|
|
2821
2912
|
autoFocus = false;
|
|
2822
2913
|
status;
|
|
@@ -2891,7 +2982,24 @@ const SdInput = class {
|
|
|
2891
2982
|
}
|
|
2892
2983
|
};
|
|
2893
2984
|
render() {
|
|
2894
|
-
|
|
2985
|
+
const sizeTokens = INPUT_SIZE_MAP[this.size] ?? INPUT_SIZE_MAP.sm;
|
|
2986
|
+
const resolvedWidth = /^\d+$/.test(this.width) ? `${this.width}px` : this.width;
|
|
2987
|
+
const cssVars = {
|
|
2988
|
+
// sd-input 자체 토큰
|
|
2989
|
+
'--sd-input-font-size': `${sizeTokens.fontSize}px`,
|
|
2990
|
+
'--sd-input-line-height': `${sizeTokens.lineHeight}px`,
|
|
2991
|
+
'--sd-input-font-weight': sizeTokens.fontWeight,
|
|
2992
|
+
'--sd-input-padding-x': `${sizeTokens.paddingX}px`,
|
|
2993
|
+
'--sd-input-gap': `${sizeTokens.gap}px`,
|
|
2994
|
+
'--sd-input-text-color': INPUT_COLORS.text.default,
|
|
2995
|
+
'--sd-input-placeholder-color': INPUT_COLORS.text.placeholder,
|
|
2996
|
+
'--sd-input-disabled-color': INPUT_COLORS.text.disabled,
|
|
2997
|
+
'--sd-input-icon-color': INPUT_COLORS.icon.default,
|
|
2998
|
+
// sd-field 시스템 변수 override (size별 높이/반경)
|
|
2999
|
+
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
3000
|
+
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
3001
|
+
};
|
|
3002
|
+
return (index.h("sd-field", { key: '3b559e592e3bcc57072eda7b081f6dc42f34813c', name: this.name, label: this.label, addonLabel: this.addonLabel, 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: { width: resolvedWidth, ...cssVars } }, index.h("label", { key: '6da8d8636353f3287c45c85ac75ac0a6202296e9', class: "sd-input__content" }, index.h("slot", { key: '065e5cb193ba2e3e91380ffd32d9c84854540fe2', name: "prefix" }), index.h("input", { key: 'c549470eb09eee2605871495f53a271d9978811e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: 'd3259163d6aa2eef4346afa5f26c4d4ba722bf40', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: 'eaec3486b16a2b19e98e1c0629d8ca8dd284e8e7', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
|
|
2895
3003
|
this.internalValue = '';
|
|
2896
3004
|
await this.formField?.sdValidate();
|
|
2897
3005
|
} })))));
|
|
@@ -2918,7 +3026,7 @@ const SdLoadingSpinner = class {
|
|
|
2918
3026
|
return useDatePicker.resolveColor(this.color);
|
|
2919
3027
|
}
|
|
2920
3028
|
render() {
|
|
2921
|
-
return (index.h(index.Fragment, { key: '
|
|
3029
|
+
return (index.h(index.Fragment, { key: '463ab22264fafc013af7a602066eb8ebed10ac05' }, index.h("svg", { key: '6b90c0c3448c309813038fb8281b4ed73b1145d3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: 'aa553d712b98c3316c98b7e52b955b7185eaee20', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
|
|
2922
3030
|
}
|
|
2923
3031
|
};
|
|
2924
3032
|
SdLoadingSpinner.style = sdLoadingSpinnerCss();
|
|
@@ -2940,7 +3048,7 @@ const SdNumberInput = class {
|
|
|
2940
3048
|
useDecimal = false;
|
|
2941
3049
|
value = null;
|
|
2942
3050
|
label;
|
|
2943
|
-
|
|
3051
|
+
addonLabel = '';
|
|
2944
3052
|
placeholder = '입력해 주세요.';
|
|
2945
3053
|
disabled = false;
|
|
2946
3054
|
width;
|
|
@@ -3171,17 +3279,17 @@ const SdNumberInput = class {
|
|
|
3171
3279
|
const inputStyles = {
|
|
3172
3280
|
textAlign: this.useButton ? 'center' : 'right',
|
|
3173
3281
|
};
|
|
3174
|
-
return (index.h("sd-field", { key: '
|
|
3282
|
+
return (index.h("sd-field", { key: '6e530f1a553adc3dfcf244f9d5119c4c3585105e', name: this.name, label: this.label, addonLabel: this.addonLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, index.h("label", { key: 'b3c548af3db1c15ef53d4dd1e171a5ba39b638f6', class: {
|
|
3175
3283
|
'sd-number-input': true,
|
|
3176
3284
|
[this.getInputStatus()]: true,
|
|
3177
3285
|
'sd-number-input--with-buttons': this.useButton,
|
|
3178
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: '
|
|
3286
|
+
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, index.h("input", { key: '0857278d2ef0c288bedd90adcea519bdc894417a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (index.h("div", { key: '5b58e8dcfb83db649aedb13faf556c9e6e5b5bb6', class: "sd-number-input__buttons" }, index.h("button", { key: '8cdd4eccb323e1e3974e5de0c99e5a622a36c41e', type: "button", class: {
|
|
3179
3287
|
'sd-number-input__button': true,
|
|
3180
3288
|
'sd-number-input__button--decrement': true,
|
|
3181
|
-
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '
|
|
3289
|
+
}, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '0d6d37ebbd7548484e6cf51a2dce962e52e74042', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), index.h("button", { key: '0da4636adfbd8918a5180d1f5abbc97d16664271', type: "button", class: {
|
|
3182
3290
|
'sd-number-input__button': true,
|
|
3183
3291
|
'sd-number-input__button--increment': true,
|
|
3184
|
-
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '
|
|
3292
|
+
}, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '16d62c22bcbfed3a7098780784b58376700f9a5b', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
|
|
3185
3293
|
}
|
|
3186
3294
|
static get watchers() { return {
|
|
3187
3295
|
"value": [{
|
|
@@ -3269,12 +3377,12 @@ const SdPagination = class {
|
|
|
3269
3377
|
}
|
|
3270
3378
|
}
|
|
3271
3379
|
render() {
|
|
3272
|
-
return (index.h("div", { key: '
|
|
3380
|
+
return (index.h("div", { key: '403af836a1c920164401029eb1e52339ddd4b69e', class: this.paginationClasses }, index.h("div", { key: '5b899b37cabe16ccef734f45a3ca8752b7f37b08', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
3273
3381
|
'pagination-btn': true,
|
|
3274
3382
|
'pagination-btn--selected': this.currentPage === n,
|
|
3275
3383
|
}, disabled: this.currentPage === n, style: {
|
|
3276
3384
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
3277
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '
|
|
3385
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '58e0c871da394403b7504c9a8293b63703ca55f0', class: "append-btns" }, this.renderNextButtons())));
|
|
3278
3386
|
}
|
|
3279
3387
|
};
|
|
3280
3388
|
SdPagination.style = sdPaginationCss();
|
|
@@ -3571,7 +3679,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
|
|
|
3571
3679
|
searchable = false;
|
|
3572
3680
|
// props - label
|
|
3573
3681
|
label = '';
|
|
3574
|
-
|
|
3682
|
+
addonLabel = '';
|
|
3575
3683
|
icon = undefined;
|
|
3576
3684
|
labelTooltip = '';
|
|
3577
3685
|
labelTooltipProps = null;
|
|
@@ -3689,7 +3797,7 @@ const SdSelect = class extends baseDropdownEvent.BaseDropdownEvent {
|
|
|
3689
3797
|
}
|
|
3690
3798
|
};
|
|
3691
3799
|
render() {
|
|
3692
|
-
return (index.h("sd-field", { key: '
|
|
3800
|
+
return (index.h("sd-field", { key: 'f7cd0c34188712a30389d07bde7edc7875e9923b', label: this.label, 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) }, index.h("div", { key: '460a8a23247e24a02bd25470105598914029e205', class: {
|
|
3693
3801
|
'sd-select': true,
|
|
3694
3802
|
'sd-select--disabled': this.disabled,
|
|
3695
3803
|
'sd-select--error': !!this.error,
|
|
@@ -3872,10 +3980,10 @@ const SdSelectDropdown = class {
|
|
|
3872
3980
|
this.isScrolled = scrollTop > 0;
|
|
3873
3981
|
};
|
|
3874
3982
|
render() {
|
|
3875
|
-
return (index.h("div", { key: '
|
|
3983
|
+
return (index.h("div", { key: 'aca6d4044905863975c944afb44f92df0d6f1568', class: {
|
|
3876
3984
|
'sd-select-dropdown': true,
|
|
3877
3985
|
'sd-select-dropdown--ready': this.isDropdownReady,
|
|
3878
|
-
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: '
|
|
3986
|
+
}, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'c87e4d9a391bf7b583bca1cda8930f977a1aec2c', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
|
|
3879
3987
|
}
|
|
3880
3988
|
static get watchers() { return {
|
|
3881
3989
|
"filteredOptions": [{
|
|
@@ -3922,7 +4030,7 @@ const SdSelectOption = class {
|
|
|
3922
4030
|
}
|
|
3923
4031
|
};
|
|
3924
4032
|
render() {
|
|
3925
|
-
return (index.h("div", { key: '
|
|
4033
|
+
return (index.h("div", { key: 'e28519019fa39af328fe7f5a25f18bb227e4d622', class: {
|
|
3926
4034
|
'sd-select__option': true,
|
|
3927
4035
|
'sd-select__option--selected': this.isSelected,
|
|
3928
4036
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -3968,17 +4076,17 @@ const SdSelectSearchInput = class {
|
|
|
3968
4076
|
input?.focus({ preventScroll: true });
|
|
3969
4077
|
}
|
|
3970
4078
|
render() {
|
|
3971
|
-
return (index.h("div", { key: '
|
|
4079
|
+
return (index.h("div", { key: '2f4e9dfd95524f7d62f49f2cba50f14157d56fe3', class: {
|
|
3972
4080
|
'sd-select-search-input': true,
|
|
3973
4081
|
'sd-select-search-input--scrolled': !!this.isScrolled,
|
|
3974
|
-
}, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: '
|
|
4082
|
+
}, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: '509714588ae43b950ea7abc8cd045aee9007e04c', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
|
|
3975
4083
|
this.searchInput.emit(String(event?.detail));
|
|
3976
4084
|
}, onSdFocus: () => {
|
|
3977
4085
|
this.searchFocus.emit();
|
|
3978
4086
|
}, onKeyDown: event => {
|
|
3979
4087
|
if (event.code === 'Enter')
|
|
3980
4088
|
event.stopPropagation();
|
|
3981
|
-
} }, index.h("sd-icon", { key: '
|
|
4089
|
+
} }, index.h("sd-icon", { key: '1f13b6f332a930d7ffe515ccd4a77cf4e7e1af7f', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
|
|
3982
4090
|
}
|
|
3983
4091
|
};
|
|
3984
4092
|
SdSelectSearchInput.style = sdSelectSearchInputCss();
|
|
@@ -60,7 +60,7 @@ const SdConfirmModal = class {
|
|
|
60
60
|
mainButtonName;
|
|
61
61
|
mainButtonLabel = '확인';
|
|
62
62
|
subButtonLabel = '';
|
|
63
|
-
tagPreset;
|
|
63
|
+
tagPreset = 'square_sm_grey';
|
|
64
64
|
tagLabel = '';
|
|
65
65
|
slotLabel = '';
|
|
66
66
|
tagContents;
|
|
@@ -96,7 +96,7 @@ const SdConfirmModal = class {
|
|
|
96
96
|
return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
|
|
97
97
|
}
|
|
98
98
|
get hasTagContent() {
|
|
99
|
-
return !!(this.tagLabel
|
|
99
|
+
return !!(this.tagLabel || this.slotLabel);
|
|
100
100
|
}
|
|
101
101
|
get showContentBox() {
|
|
102
102
|
return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
|
|
@@ -113,9 +113,9 @@ const SdConfirmModal = class {
|
|
|
113
113
|
render() {
|
|
114
114
|
const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
|
|
115
115
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
|
|
116
|
-
return (index.h("div", { key: '
|
|
116
|
+
return (index.h("div", { key: '6fc7e6c41e74e44c1eb6228375a8230ffa46dab5', class: "sd-confirm-modal" }, index.h("sd-icon", { key: '79e901efb1b32fdd8d7be3bd8f33eb2d606cd25c', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), index.h("sd-icon", { key: '8d80711f1ddea567a388b0ad7c76608f0d794fde', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), index.h("h2", { key: '47dcfe8774e2d14d4edc8d1c23fff413146119e6', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'fb18833bd9f5cb858f2f5b05b7b45d5e0f3cdb72', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '9d158176578cb4374fe1ca37b62b4d61e81df6a1', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '4f781266ecdd43ac51195e1ee473d67d2bcff681', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
117
117
|
this.customContentRef = el;
|
|
118
|
-
} })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.
|
|
118
|
+
} })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '04baced447a0cf11406df52b734f73ea39ff00d2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '7054a3388d93610b21152c4c3df34445b7b64cdd', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '25fdec9094700beaf4d6fa0dee15920d6c3c294a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: '7611e5b0a187b1588026308220b09e3239f59463', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
121
|
SdConfirmModal.style = sdConfirmModalCss();
|
|
@@ -188,9 +188,9 @@ const SdNoticeModal = class {
|
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
render() {
|
|
191
|
-
return (index.h("div", { key: '
|
|
191
|
+
return (index.h("div", { key: 'bdabd03353df6668e77ea29477e79586b9ee18ad', class: "sd-notice-modal" }, index.h("sd-icon", { key: '2369161b7a25a72da40235f32f6cc006c8b060bd', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), index.h("h2", { key: '9a8b1c37f874b5299911ae5f081f692cd2bce470', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'c44382d6484301d3ed4081cda456628bad387f53', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '81ff93a305aeb3e1fac90362e0a5158355b96d88', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '5d3131ed1aba498fdadf4b035df9c1b178dd1b36', class: "sd-notice-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-notice-modal__custom-content", ref: el => {
|
|
192
192
|
this.customContentRef = el;
|
|
193
|
-
} })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && index.h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '
|
|
193
|
+
} })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && index.h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '0c9e040dbcdb0873f6a4e1606ef0fa9729340860', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '7fe0737620fd3583300a62eb5b55704147a7511e', class: "sd-notice-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '70f0d98a14eb0184ac08cd16aa0676e848fa035d', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), index.h("sd-button-v2", { key: '54554ce5c26fa59924db03728628cca8538de081', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
|
|
194
194
|
}
|
|
195
195
|
};
|
|
196
196
|
SdNoticeModal.style = sdNoticeModalCss();
|
|
@@ -37,7 +37,7 @@ const SdDatePicker = class {
|
|
|
37
37
|
this.viewChange.emit(e.detail);
|
|
38
38
|
};
|
|
39
39
|
render() {
|
|
40
|
-
return (index.h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '
|
|
40
|
+
return (index.h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, index.h("sd-input", { key: '8473fc052a8e61b1b403328046b984b858a69ccd', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'ccc4ac16bcb3e340e574d1098d229d93bba32671', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '9b85074b30fc5d6e8204c1e815fe325871e8205a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, index.h("div", { key: 'fff4a6d1d2b1c0923b74abcf453a32829ee5865a', class: "sd-date-picker__menu" }, index.h("sd-calendar", { key: 'f157822fca3dffb9fbbaa05e9d9ba67ba6a440bb', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
SdDatePicker.style = sdDatePickerCss();
|
|
@@ -4,18 +4,7 @@ var index = require('./index-Qvv0fGgj.js');
|
|
|
4
4
|
var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
|
|
5
5
|
var sdButtonV2_config = require('./sd-button-v2.config-DniiNqy_.js');
|
|
6
6
|
var component_button = require('./component.button-BjTPq93d.js');
|
|
7
|
-
|
|
8
|
-
const color = {
|
|
9
|
-
bg: {
|
|
10
|
-
accent: {
|
|
11
|
-
"default": "#0075FF"}},
|
|
12
|
-
content: {
|
|
13
|
-
secondary: "#555555",
|
|
14
|
-
inverse: "#FFFFFF"
|
|
15
|
-
}};
|
|
16
|
-
var systemTokens = {
|
|
17
|
-
color: color
|
|
18
|
-
};
|
|
7
|
+
var system = require('./system-lN7yOMPF.js');
|
|
19
8
|
|
|
20
9
|
const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
|
|
21
10
|
const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, sdButtonV2_config.BUTTON_CONFIG[name]]));
|
|
@@ -35,9 +24,9 @@ const PRESET_DIVIDER_COLORS = {
|
|
|
35
24
|
danger: component_button.buttonTokens.danger.strong.dropdown.divider,
|
|
36
25
|
danger_outline: PRESET_BORDER_COLORS.danger_outline,
|
|
37
26
|
};
|
|
38
|
-
const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
|
|
39
|
-
const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
|
|
40
|
-
const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.content.inverse;
|
|
27
|
+
const MENU_ITEM_COLOR = system.systemTokens.color.content.secondary;
|
|
28
|
+
const MENU_ITEM_ACTIVE_BACKGROUND = system.systemTokens.color.bg.accent.default;
|
|
29
|
+
const MENU_ITEM_ACTIVE_COLOR = system.systemTokens.color.content.inverse;
|
|
41
30
|
const PRESET_MENU_ITEM_COLORS = {
|
|
42
31
|
primary: MENU_ITEM_COLOR,
|
|
43
32
|
secondary: MENU_ITEM_COLOR,
|
|
@@ -100,15 +100,15 @@ const SdFilePicker = class {
|
|
|
100
100
|
render() {
|
|
101
101
|
const hasFiles = this.hasFiles();
|
|
102
102
|
const displayText = this.getDisplayText();
|
|
103
|
-
return (index.h("div", { key: '
|
|
103
|
+
return (index.h("div", { key: 'f1a0f3eaf06618eb5e4c08f465425eeb969fffaa', class: {
|
|
104
104
|
'sd-file-picker': true,
|
|
105
105
|
[this.getStatusClass()]: true,
|
|
106
106
|
'sd-file-picker--inline': this.inline,
|
|
107
|
-
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '
|
|
107
|
+
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '759217d5121c7b97dab6c70516efbf79b836884e', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), index.h("sd-icon", { key: '95f94370b7b64e16220b7e4a63d4613790bb6e28', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '1bae1466b85d68719bd558a67c64e86c6070b9d0', ref: el => (this.fileNamesRef = el), class: {
|
|
108
108
|
'sd-file-picker__text': true,
|
|
109
109
|
'sd-file-picker__text--placeholder': !hasFiles,
|
|
110
110
|
'sd-file-picker__text--active': hasFiles,
|
|
111
|
-
} }, displayText), !this.disabled && hasFiles && (index.h("sd-icon", { key: '
|
|
111
|
+
} }, displayText), !this.disabled && hasFiles && (index.h("sd-icon", { key: 'd45e9a39d8c2661f8e92bd7760c36b170c1a76c0', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '8bcd7f87363167c482f3b99d931443491eaa7bbe', class: "sd-file-picker__tooltip" }, displayText))));
|
|
112
112
|
}
|
|
113
113
|
static get watchers() { return {
|
|
114
114
|
"value": [{
|
|
@@ -55,9 +55,9 @@ const SdGuide = class {
|
|
|
55
55
|
};
|
|
56
56
|
render() {
|
|
57
57
|
const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
|
|
58
|
-
return (index.h("div", { key: '
|
|
58
|
+
return (index.h("div", { key: '9dc36025eb3c7571bda1eefaee5dafd1f040ff30', class: "sd-guide", style: {
|
|
59
59
|
'--sd-guide-color': GUIDE_ICON[this.type].color,
|
|
60
|
-
} }, index.h("sd-button", { key: '
|
|
60
|
+
} }, index.h("sd-button", { key: '8b64096d65f427d62b783903ed58d8569a8f60c1', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '255c720a0b9fe59e55bd53bd8463a18586b311c0', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '0b367183b33c6299afd7525b0ee09f342d1f3a53', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '2c8f947b3e127b968a62ad5965a040ae3f915484', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '856eba0563552527573e778cf26102a5bc47750c', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: '4741f95d5b63475bafc6cc3cd78f675c68ea1dd7', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '1b2a1303d08fe08b362300a0565ded6bff897159', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: '062bf0c82c7330cc93301d757316d6e691871c86', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: 'e2a239b690587639422d5d7a8dfeff2682198d27', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
|
|
61
61
|
}
|
|
62
62
|
// 현재 2depth까지만 스타일 적용
|
|
63
63
|
renderListItem(message, depth = 0) {
|
|
@@ -48,14 +48,14 @@ const SdPopover = class {
|
|
|
48
48
|
this.showPopover = false;
|
|
49
49
|
};
|
|
50
50
|
render() {
|
|
51
|
-
return (index.h(index.Fragment, { key: '
|
|
51
|
+
return (index.h(index.Fragment, { key: '205b8f574ce69afcb2abef1b0d0d6ec769230783' }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (index.h("sd-floating-portal", { key: 'af82589e6ed773709c83a6855c37b1ac7092b9ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'dfee40fa54b436a43583ebdc71830e6d590e1793', class: {
|
|
52
52
|
'sd-floating-menu': true,
|
|
53
53
|
'sd-floating-menu--popover': true,
|
|
54
54
|
[`sd-floating-menu--${this.placement}`]: true,
|
|
55
55
|
[this.menuClass]: !!this.menuClass,
|
|
56
56
|
}, style: {
|
|
57
57
|
'--sd-floating-bg': popoverTokens.popover.bg,
|
|
58
|
-
} }, index.h("i", { key: '
|
|
58
|
+
} }, index.h("i", { key: '388ac52f514ddd9247e79d20309a1de029fcd601', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '2502e1a63e3dca7e9c6d66805a9ec04e3106dd99' })), index.h("div", { key: 'e12b0df1dbdfe4b34de81ed231e1578bb5361afa', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '91f068beee3338f547157db06a0eee4f5e88355d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '1283a6209c1c062d925ae1c32ba2a4f2aa98c8fa', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '130f5468eb8ac34bb02dce9a5a55c1fad17c8dcf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '330fb79d032bac9da45afec3ccf0f2ec6e3dafba', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '7ba5d1e112ac776bb29253ac2cee510d36147ced', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
|
|
59
59
|
}
|
|
60
60
|
static get watchers() { return {
|
|
61
61
|
"show": [{
|
|
@@ -41,10 +41,10 @@ const SdProgress = class {
|
|
|
41
41
|
return this.statusColor[this.progressStatus];
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
44
|
-
return (index.h("div", { key: '
|
|
44
|
+
return (index.h("div", { key: '864f669831515b9c149ad579b6233e960eee79a9', style: {
|
|
45
45
|
'--progress-color': this.progressColor,
|
|
46
46
|
'--progress-percentage': `${this.progressPercentage}%`,
|
|
47
|
-
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '
|
|
47
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '42920cc06b249371ec7d98c07d2185d71265a538', class: "sd-progress__label" }, this.label)));
|
|
48
48
|
}
|
|
49
49
|
renderBarProgress() {
|
|
50
50
|
return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, index.h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));
|