@sellmate/design-system 1.25.1 → 1.26.0
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-calendar_2.cjs.entry.js +2 -2
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-picker_7.cjs.entry.js +9 -9
- package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +1 -1
- package/dist/cjs/sd-divider.cjs.entry.js +1 -1
- package/dist/cjs/sd-field_3.cjs.entry.js +7 -7
- package/dist/cjs/sd-ghost-button_3.cjs.entry.js +11 -3
- package/dist/cjs/sd-linear-progress.cjs.entry.js +1 -1
- package/dist/cjs/sd-loading-container.cjs.entry.js +2 -2
- package/dist/cjs/sd-pagination_4.cjs.entry.js +8 -8
- package/dist/cjs/sd-popup.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-list-item_2.cjs.entry.js +6 -6
- package/dist/cjs/sd-select_3.cjs.entry.js +8 -8
- package/dist/cjs/sd-switch.cjs.entry.js +1 -1
- package/dist/cjs/sd-table.cjs.entry.js +6 -6
- package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
- package/dist/cjs/sd-td.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast-container.cjs.entry.js +1 -1
- package/dist/cjs/sd-toast.cjs.entry.js +2 -2
- package/dist/cjs/sd-toggle.cjs.entry.js +1 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
- package/dist/collection/components/sd-divider/sd-divider.js +1 -1
- package/dist/collection/components/sd-field/sd-field.js +4 -4
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
- package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
- package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
- package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
- package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
- package/dist/collection/components/sd-popup/sd-popup.js +1 -1
- package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +2 -2
- package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +4 -4
- package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +2 -2
- package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
- package/dist/collection/components/sd-select/sd-select.js +4 -4
- package/dist/collection/components/sd-switch/sd-switch.js +1 -1
- package/dist/collection/components/sd-table/sd-table.js +6 -6
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +2 -2
- package/dist/collection/components/sd-table/sd-td/sd-td.js +1 -1
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +3 -3
- package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
- package/dist/collection/components/sd-tag/sd-tag.css +2 -1
- package/dist/collection/components/sd-tag/sd-tag.js +31 -3
- package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
- package/dist/collection/components/sd-toast/sd-toast.js +2 -2
- package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/components/{p-I-9rJnxk.js → p-0UeArSzN.js} +1 -1
- package/dist/components/{p-BW-I-6Id.js → p-1kjTqHez.js} +1 -1
- package/dist/components/{p-BlN03Cqm.js → p-B4ua22vZ.js} +1 -1
- package/dist/components/{p-CqivNcjh.js → p-BAIi5T00.js} +1 -1
- package/dist/components/{p-Dny4KukK.js → p-BCLDTSO0.js} +1 -1
- package/dist/components/{p-PMD-Col0.js → p-BGIwu6m1.js} +1 -1
- package/dist/components/{p-DMvWCQfX.js → p-BOrdn-Js.js} +1 -1
- package/dist/components/{p-B8uvCE1e.js → p-BTWV2vRX.js} +1 -1
- package/dist/components/{p-BuuIkYiY.js → p-Bv_CVYp1.js} +1 -1
- package/dist/components/{p-1fgPu1BU.js → p-BwwpMQLA.js} +1 -1
- package/dist/components/{p-0U99W-3Z.js → p-C1vqL1Kl.js} +1 -1
- package/dist/components/{p-CtNDxhxx.js → p-C7sPq8UM.js} +1 -1
- package/dist/components/p-C7sUn4qb.js +1 -0
- package/dist/components/{p-CQLezwlh.js → p-CA2sZAsI.js} +1 -1
- package/dist/components/{p-BAsjJuJJ.js → p-CFqCJx9B.js} +1 -1
- package/dist/components/{p-lGr865w2.js → p-D0Xz7CoK.js} +1 -1
- package/dist/components/{p-BzrpKueg.js → p-D15bTkjr.js} +1 -1
- package/dist/components/{p-BZUlNC0d.js → p-DPotN1QM.js} +1 -1
- package/dist/components/{p-DBw58vNP.js → p-DU2_jzh4.js} +1 -1
- package/dist/components/{p-BGpxtouI.js → p-DsGK3Aye.js} +1 -1
- package/dist/components/{p-DpYG9T3S.js → p-DznzJSU-.js} +1 -1
- package/dist/components/{p-BoH7ykYx.js → p-IBgCA-vo.js} +1 -1
- package/dist/components/{p-CNwoxvpg.js → p-JamWHNrr.js} +1 -1
- package/dist/components/{p-Dxye4-ZY.js → p-UkSGSWSA.js} +1 -1
- package/dist/components/{p-h9_f4fUW.js → p-aYmWxyum.js} +1 -1
- package/dist/components/{p-d3KpOGRC.js → p-tSYcqBKN.js} +1 -1
- package/dist/components/{p-DbbdfMAF.js → p-zGr4He38.js} +1 -1
- package/dist/components/sd-action-modal.js +1 -1
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-calendar.js +1 -1
- package/dist/components/sd-chip-input.js +1 -1
- package/dist/components/sd-chip.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-divider.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-ghost-button.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-key-value-table.js +1 -1
- package/dist/components/sd-linear-progress.js +1 -1
- package/dist/components/sd-loading-container.js +1 -1
- package/dist/components/sd-loading-modal.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-popup.js +1 -1
- package/dist/components/sd-select-list-item-search.js +1 -1
- package/dist/components/sd-select-list-item.js +1 -1
- package/dist/components/sd-select-listbox.js +1 -1
- package/dist/components/sd-select-trigger.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-switch.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-tbody.js +1 -1
- package/dist/components/sd-td.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-toggle.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-9ea2fbec.entry.js → p-065cd2f4.entry.js} +1 -1
- package/dist/design-system/p-28e1cf94.entry.js +1 -0
- package/dist/design-system/{p-cb63d4cf.entry.js → p-2c704047.entry.js} +1 -1
- package/dist/design-system/{p-43d521c4.entry.js → p-4d747082.entry.js} +1 -1
- package/dist/design-system/{p-74e605c0.entry.js → p-4deb11d8.entry.js} +1 -1
- package/dist/design-system/{p-84b415d7.entry.js → p-681f8612.entry.js} +1 -1
- package/dist/design-system/{p-9afc1f7c.entry.js → p-79d85b32.entry.js} +1 -1
- package/dist/design-system/{p-8862e3e3.entry.js → p-7c22de74.entry.js} +1 -1
- package/dist/design-system/{p-3b71d1d4.entry.js → p-8b4d246f.entry.js} +1 -1
- package/dist/design-system/{p-b4df75b9.entry.js → p-8da06c09.entry.js} +1 -1
- package/dist/design-system/{p-5a67c40d.entry.js → p-940de4ba.entry.js} +1 -1
- package/dist/design-system/{p-a1438f7d.entry.js → p-9c3f7c57.entry.js} +1 -1
- package/dist/design-system/{p-a8d69ab2.entry.js → p-a992c64b.entry.js} +1 -1
- package/dist/design-system/{p-21d8f192.entry.js → p-b127ac21.entry.js} +1 -1
- package/dist/design-system/{p-6f77fc76.entry.js → p-ba10c791.entry.js} +1 -1
- package/dist/design-system/{p-f1e0ba30.entry.js → p-bd700588.entry.js} +1 -1
- package/dist/design-system/p-c3b032a1.entry.js +1 -0
- package/dist/design-system/{p-6b20c76b.entry.js → p-d8bebc8e.entry.js} +1 -1
- package/dist/design-system/{p-a505459f.entry.js → p-dca19618.entry.js} +1 -1
- package/dist/design-system/{p-c0198e3a.entry.js → p-e45e6e56.entry.js} +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-calendar_2.entry.js +2 -2
- package/dist/esm/sd-confirm-modal_2.entry.js +1 -1
- package/dist/esm/sd-date-picker_7.entry.js +9 -9
- package/dist/esm/sd-date-range-picker-calendar.entry.js +1 -1
- package/dist/esm/sd-divider.entry.js +1 -1
- package/dist/esm/sd-field_3.entry.js +7 -7
- package/dist/esm/sd-ghost-button_3.entry.js +12 -4
- package/dist/esm/sd-linear-progress.entry.js +1 -1
- package/dist/esm/sd-loading-container.entry.js +2 -2
- package/dist/esm/sd-pagination_4.entry.js +8 -8
- package/dist/esm/sd-popup.entry.js +1 -1
- package/dist/esm/sd-select-list-item_2.entry.js +6 -6
- package/dist/esm/sd-select_3.entry.js +8 -8
- package/dist/esm/sd-switch.entry.js +1 -1
- package/dist/esm/sd-table.entry.js +6 -6
- package/dist/esm/sd-tabs.entry.js +1 -1
- package/dist/esm/sd-td.entry.js +1 -1
- package/dist/esm/sd-toast-container.entry.js +1 -1
- package/dist/esm/sd-toast.entry.js +2 -2
- package/dist/esm/sd-toggle.entry.js +1 -1
- package/dist/types/components/sd-tag/sd-tag.d.ts +3 -0
- package/dist/types/components.d.ts +11 -0
- package/hydrate/index.js +73 -64
- package/hydrate/index.mjs +73 -64
- package/package.json +1 -1
- package/dist/components/p-D8T1XeGP.js +0 -1
- package/dist/design-system/p-0d5d2723.entry.js +0 -1
- package/dist/design-system/p-ad822c82.entry.js +0 -1
|
@@ -158,13 +158,13 @@ const SdPagination = class {
|
|
|
158
158
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
159
159
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
160
160
|
};
|
|
161
|
-
return (index.h("div", { key: '
|
|
161
|
+
return (index.h("div", { key: '8cdda030c6ffa1a4f3358a5877da3b76293bae39', class: {
|
|
162
162
|
'sd-pagination': true,
|
|
163
163
|
'sd-pagination--simple': this.simple,
|
|
164
|
-
}, style: cssVars }, index.h("div", { key: '
|
|
164
|
+
}, style: cssVars }, index.h("div", { key: '34569687e67dec4b218ef6d3da01e21b19176284', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "sd-pagination__info" }, index.h("span", { class: "sd-pagination__current" }, this.currentPage), index.h("span", { class: "sd-pagination__divider" }, "/"), index.h("span", { class: "sd-pagination__last" }, this.lastPage))) : (index.h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
165
165
|
'sd-pagination__item': true,
|
|
166
166
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
167
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: '
|
|
167
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), index.h("div", { key: 'a222ff48f10bce574ad9ef928d66d99696f6923b', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
168
168
|
}
|
|
169
169
|
};
|
|
170
170
|
SdPagination.style = sdPaginationCss();
|
|
@@ -220,9 +220,9 @@ const SdTbody = class {
|
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
222
|
render() {
|
|
223
|
-
return (index.h(index.Host, { key: '
|
|
223
|
+
return (index.h(index.Host, { key: '3c3b748b436dc9db4054a5528fc205da7d21c8e8', slot: `${this.tableId}-body` }, index.h("tbody", { key: '7cd092ce9b54bed7e4aaaf4b9b3df788d13e382c', class: { tbody: true } }, [
|
|
224
224
|
this.topSpacerHeight > 0 && (index.h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
225
|
-
index.h("slot", { key: '
|
|
225
|
+
index.h("slot", { key: '0a8c271acdd45802cb036c58303bd08037067c7d' }),
|
|
226
226
|
this.bottomSpacerHeight > 0 && (index.h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
227
227
|
])));
|
|
228
228
|
}
|
|
@@ -480,16 +480,16 @@ const SdThead = class {
|
|
|
480
480
|
'--table-border-color': sdTable_config.TABLE_BORDER.color,
|
|
481
481
|
'--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
|
|
482
482
|
};
|
|
483
|
-
return (index.h(index.Host, { key: '
|
|
483
|
+
return (index.h(index.Host, { key: '0f9c6f9eb3c1afbd2af6c729152e3767b9637886', slot: `${this.tableId}-head`, style: headStyle }, index.h("thead", { key: '35a3d8864c5801058e810b6c0b7b281bf7943b85', class: {
|
|
484
484
|
'thead': true,
|
|
485
485
|
'thead--sticky': this._stickyHeader,
|
|
486
|
-
} }, index.h("tr", { key: '
|
|
486
|
+
} }, index.h("tr", { key: '04827a6c5148f1be3de475e4e0a9ead839aab89e', class: "tr" }, this._selectable && (index.h("th", { key: '169e3b47c9710851ee6dbe58765a1b9da5ac6f75', class: {
|
|
487
487
|
'th': true,
|
|
488
488
|
'th--selected': true,
|
|
489
489
|
'sticky-left': true,
|
|
490
490
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
491
491
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
492
|
-
}, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '
|
|
492
|
+
}, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '85f1dc11ae78307cd814813736e9e3097fdd4a47', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), index.h("div", { key: 'adc4e163b5161fe7e6adf41c4b48284654a223b9', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
|
|
493
493
|
'th': true,
|
|
494
494
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
495
495
|
'sticky-left': true,
|
|
@@ -109,7 +109,7 @@ const SdPopup = class {
|
|
|
109
109
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
110
110
|
...this.submitButtonProps,
|
|
111
111
|
};
|
|
112
|
-
return (index.h("div", { key: '
|
|
112
|
+
return (index.h("div", { key: 'bc5ca3d1f4bc9c340245262f891612cb3cebcbca', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, index.h("header", { key: 'd061ed390b7ee14c70f7f1515a1ca240090f51b1', class: "sd-popup__header" }, index.h("h2", { key: '9fcc3683714d5160d77df1d099de3f7152ce0a8d', class: "sd-popup__title" }, this.popupTitle)), index.h("div", { key: 'e2943e318cc283d27d385fab001e673740c0c5bd', class: "sd-popup__body" }, index.h("slot", { key: '9b846412c09cae14f1f93364606cf6db91a11112' })), this.useFooter && (index.h("footer", { key: '9ad29d21e6d63d628474551a3000615690436937', class: "sd-popup__footer" }, index.h("div", { key: '039359244691aa35d0589f6d842398b88715fdd8', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, index.h("slot", { key: '0c29f4aba59e40b7435eb9693d2d47fa7d4ea7da', name: "footer-left" })), index.h("sd-button", { key: '5c79526dfdde154fb50deab79730376e17445831', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
113
113
|
}
|
|
114
114
|
};
|
|
115
115
|
SdPopup.style = sdPopupCss();
|
|
@@ -88,7 +88,7 @@ const SdSelectListItem = class {
|
|
|
88
88
|
return (
|
|
89
89
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
90
90
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
91
|
-
index.h("div", { key: '
|
|
91
|
+
index.h("div", { key: '42f9e69d39035fedce11095a2d5be95795831241', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
92
92
|
'sd-select-list-item': true,
|
|
93
93
|
'sd-select-list-item--group': isGroup,
|
|
94
94
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -98,7 +98,7 @@ const SdSelectListItem = class {
|
|
|
98
98
|
'sd-select-list-item--focused': this.isFocused,
|
|
99
99
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
100
100
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
101
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '
|
|
101
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '655cf931840a15545c1afdd4aeb2044c7ae24c0a', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), sdSelect_config.isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '5461f3861a093d25e866cd94e603a4b6017fd701', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
102
102
|
}
|
|
103
103
|
};
|
|
104
104
|
SdSelectListItem.style = sdSelectListItemCss();
|
|
@@ -155,15 +155,15 @@ const SdSelectListItemSearch = class {
|
|
|
155
155
|
clearTimeout(this.debounceTimer);
|
|
156
156
|
}
|
|
157
157
|
render() {
|
|
158
|
-
return (index.h("div", { key: '
|
|
158
|
+
return (index.h("div", { key: 'eeeabfcd97514124434c4c6c61d219d2230e7a1e', class: {
|
|
159
159
|
'sd-select-list-item-search': true,
|
|
160
160
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
161
|
-
} }, index.h("div", { key: '
|
|
161
|
+
} }, index.h("div", { key: 'a378a2745db91faf00a5fa00105fb152f8b6f59e', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '08681aab44c7a30a5f4a36cdf7a8ec58fdbb6cf4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '0e75fdbfdab69b3f0bd9146d97915926200ba2c0', ref: el => {
|
|
162
162
|
this.inputEl = el;
|
|
163
|
-
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '
|
|
163
|
+
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: 'a45bba91cce1700bab677e4528ab6df79e08547f', type: "button", class: {
|
|
164
164
|
'sd-select-list-item-search__clear': true,
|
|
165
165
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
166
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: '
|
|
166
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: 'e5c01644bf8b6651d6ec312b18f77d79cc61f455', name: "close", size: 12, color: "#888888" })))));
|
|
167
167
|
}
|
|
168
168
|
};
|
|
169
169
|
SdSelectListItemSearch.style = sdSelectListItemSearchCss();
|
|
@@ -296,15 +296,15 @@ const SdSelect = class {
|
|
|
296
296
|
this.closeDropdown();
|
|
297
297
|
},
|
|
298
298
|
};
|
|
299
|
-
return (index.h("sd-field", { key: '
|
|
299
|
+
return (index.h("sd-field", { key: 'dd5f5142ec0a6ba80a67b544543c592c4492246b', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
|
|
300
300
|
this.hovered = true;
|
|
301
301
|
}, onMouseLeave: () => {
|
|
302
302
|
this.hovered = false;
|
|
303
|
-
} }, index.h("div", { key: '
|
|
303
|
+
} }, index.h("div", { key: '2069d25c1739610ee4bf8652da9a10bc149b0bc3', class: "sd-select", ref: el => {
|
|
304
304
|
this.triggerRef = el;
|
|
305
|
-
} }, index.h("sd-select-trigger", { key: '
|
|
305
|
+
} }, index.h("sd-select-trigger", { key: 'b9b332bee38e449802be1b6a2c4b02a8243aa220', ref: el => {
|
|
306
306
|
this.triggerComponentRef = el;
|
|
307
|
-
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '
|
|
307
|
+
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'fba3b55ec6c0d7fa9afe2d0ac8d41ba85ad62e6b', ...portalProps }, index.h("sd-select-listbox", { key: 'ad505ebdcb6a2f27083520877e42eccf4aeacbc3', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
308
308
|
}
|
|
309
309
|
static get watchers() { return {
|
|
310
310
|
"isOpen": [{
|
|
@@ -681,9 +681,9 @@ const SdSelectListbox = class {
|
|
|
681
681
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
682
682
|
'--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
|
|
683
683
|
};
|
|
684
|
-
return (index.h("div", { key: '
|
|
684
|
+
return (index.h("div", { key: '86caa4b3d4fbc3bcc6214ffe8596f62b6595b2e0', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '7a4f2cf77da2af673c7c11836cf1152f8cf55c2d', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '243c0be0b5898754a35adbce89d9f72671e39a3a', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
685
685
|
this.listEl = el;
|
|
686
|
-
} }, this.showSelectAll && (index.h("sd-select-list-item", { key: '
|
|
686
|
+
} }, this.showSelectAll && (index.h("sd-select-list-item", { key: 'eef122310c6a45ed876af8cd578b86d1f27a68d3', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
|
|
687
687
|
}
|
|
688
688
|
static get watchers() { return {
|
|
689
689
|
"searchKeyword": [{
|
|
@@ -751,7 +751,7 @@ const SdSelectTrigger = class {
|
|
|
751
751
|
? sdSelect_config.SELECT_COLORS.icon.disabled
|
|
752
752
|
: sdSelect_config.SELECT_COLORS.icon.default,
|
|
753
753
|
};
|
|
754
|
-
return (index.h("div", { key: '
|
|
754
|
+
return (index.h("div", { key: '0c3e197cd8a238a979ee6d794a607e07585b2025', ref: el => {
|
|
755
755
|
this.triggerEl = el;
|
|
756
756
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
757
757
|
'sd-select-trigger': true,
|
|
@@ -762,7 +762,7 @@ const SdSelectTrigger = class {
|
|
|
762
762
|
e.preventDefault();
|
|
763
763
|
this.handleClick();
|
|
764
764
|
}
|
|
765
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '
|
|
765
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '4c068fb6a6784bde01669b7a5ad30d91dc358dd3', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '7172c372c2864574ca6ab0f726a0af091a3d0110', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
766
766
|
'sd-select-trigger__icon': true,
|
|
767
767
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
768
768
|
} }))));
|
|
@@ -109,7 +109,7 @@ const SdSwitch = class {
|
|
|
109
109
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
110
110
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
111
111
|
};
|
|
112
|
-
return (index.h("label", { key: '
|
|
112
|
+
return (index.h("label", { key: '1c1ad8fff6d40b4e58f36f1238efe0e1d92ac391', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'c93a0da431b173fa705d5ffef018e605c625cb2a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '03483ff7893a072b4778230d9d1be3b737537d53', class: "sd-switch__track" }, index.h("div", { key: '0db9dc3442e77b327fe1c6544e4c320d71389ca6', class: "sd-switch__knob" })), this.label && index.h("span", { key: '35f6aad85d20458d364ea84aaabcf518b9c8983c', class: "sd-switch__label" }, this.label)));
|
|
113
113
|
}
|
|
114
114
|
};
|
|
115
115
|
SdSwitch.style = sdSwitchCss();
|
|
@@ -880,25 +880,25 @@ const SdTable = class {
|
|
|
880
880
|
'--table-selectable-width': `${sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
881
881
|
'--table-host-height': hostHeight,
|
|
882
882
|
};
|
|
883
|
-
return (index.h(index.Host, { key: '
|
|
883
|
+
return (index.h(index.Host, { key: '91d045af5763bca824e393c597f4623da9e02705', style: hostStyle }, index.h("div", { key: 'b441e620f75dd0d71d5457fdb2a61f82d44096c0', class: "sd-table__container", style: {
|
|
884
884
|
'--table-width': this.width,
|
|
885
885
|
'--pagination-height': `${paginationHeight}px`,
|
|
886
|
-
} }, index.h("div", { key: '
|
|
886
|
+
} }, index.h("div", { key: '4d78e38b038113894b175afbd0f26123f17cd0b4', class: {
|
|
887
887
|
'sd-table__wrapper': true,
|
|
888
888
|
'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
|
|
889
889
|
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
890
|
-
} }, index.h("div", { key: '
|
|
890
|
+
} }, index.h("div", { key: '263058e881fcd6f5b120d39df069823641a54e62', class: {
|
|
891
891
|
'sd-table__scroll-container': true,
|
|
892
892
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
893
893
|
'sd-table__scroll-container--no-data': isNoData,
|
|
894
|
-
} }, this.isLoading && (index.h("div", { key: '
|
|
894
|
+
} }, this.isLoading && (index.h("div", { key: '5d3b2a9b93bb160e45c9dc68161c548e9b307a81', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: 'b951f5b435bc7bbd0bf97543b7ec68e7ca37a282', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '646b4d962be56d3dcd410855a80ada7680a3471f', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'e86161b138d07a50c579f65f3fef44a70a596774', class: "sd-table__no-data" }, index.h("div", { key: '5fd55dd68fbb7b55d8b00be6934076fbef919760', class: "sd-table__no-data-content", ref: el => {
|
|
895
895
|
this.noDataContentEl = el;
|
|
896
896
|
if (el)
|
|
897
897
|
this.syncNoDataContentObserver();
|
|
898
|
-
} }, index.h("slot", { key: '
|
|
898
|
+
} }, index.h("slot", { key: 'ba83b3f3ae09e8768a2301e75653f3c4562436a4', name: "no-data" }, index.h("span", { key: 'd95683ca3bcd1f0dba2e8594e5751c76c2919d9c' }, this.resolvedNoDataLabel)))))), index.h("table", { key: 'a82706073a9e8c5d9c3b011db2c21697b30e8203', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
899
899
|
this.pagination.rowsPerPage > 0 &&
|
|
900
900
|
this.rowCount > 0 &&
|
|
901
|
-
!this.useVirtualScroll && (index.h("div", { key: '
|
|
901
|
+
!this.useVirtualScroll && (index.h("div", { key: 'bde43c82f954ba6bc5a70b07683e1159cdf0b7c6', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '7d8bc79ae3452a8cc22d7e51871eeb4fa495b276', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'a087902b29b75129d52f5513b6c317cddbb6de15', value: this.useInternalPagination
|
|
902
902
|
? this.innerRowsPerPage
|
|
903
903
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
904
904
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -207,7 +207,7 @@ const SdTabs = class {
|
|
|
207
207
|
};
|
|
208
208
|
}
|
|
209
209
|
render() {
|
|
210
|
-
return (index.h("div", { key: '
|
|
210
|
+
return (index.h("div", { key: 'c88c2d10181fd02076ac9c0ecdb6d3e95bd727c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
|
|
211
211
|
const badgeName = this.getBadgeName(tab);
|
|
212
212
|
return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
|
|
213
213
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -167,7 +167,7 @@ const SdTd = class {
|
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
render() {
|
|
170
|
-
return (index.h(index.Host, { key: '
|
|
170
|
+
return (index.h(index.Host, { key: '3a57e2c9669facd934506fcac11d3fe6474cf4e6', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '1936262e4fa08e364cc57a5587703c546199007a' })));
|
|
171
171
|
}
|
|
172
172
|
static get watchers() { return {
|
|
173
173
|
"field": [{
|
|
@@ -243,7 +243,7 @@ const SdToastContainer = class {
|
|
|
243
243
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
244
244
|
const indexMap = new Map();
|
|
245
245
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
246
|
-
return (index.h("div", { key: '
|
|
246
|
+
return (index.h("div", { key: 'ce0bd7179ac744e558f900228fcf80d16b676d1d', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
247
247
|
this.expanded = true;
|
|
248
248
|
this.pauseTimers();
|
|
249
249
|
}, onMouseLeave: () => {
|
|
@@ -93,12 +93,12 @@ const SdToast = class {
|
|
|
93
93
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
94
94
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
95
95
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
96
|
-
return (index.h("div", { key: '
|
|
96
|
+
return (index.h("div", { key: '98f2adc86e98e6e1a33eec9f1166a36fd0132091', style: {
|
|
97
97
|
'--sd-toast-bg': typeConfig.bg,
|
|
98
98
|
'--sd-toast-text': typeConfig.content,
|
|
99
99
|
'--sd-toast-icon': iconColor,
|
|
100
100
|
'--sd-toast-link': linkColor,
|
|
101
|
-
} }, index.h("div", { key: '
|
|
101
|
+
} }, index.h("div", { key: 'bf62e48b849b5d233b917e9bff8b516cdee3273d', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '4a17910884a1778ff647cc4037d23a25834a5c8d', class: "sd-toast__icon" }, index.h("sd-icon", { key: '7b6d9567d94f8351d5c07bdf4351bc028f9b0b06', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '1a0fa06eeb4b5aaf9a3b7804c3aa90be85797839', class: "sd-toast__content" }, index.h("span", { key: '32eed9d06fae03ffea1de307eb006bc2889731c2', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'f1bafc6c06d5faad3fc556419ca556df9e76ee4f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '94fcfb175c9e302cbb27d2dc3ed7256a65960013', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'ae2bcd09d6c0ee5afbdfeed6e268b899a308ec64', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
102
102
|
}
|
|
103
103
|
};
|
|
104
104
|
SdToast.style = sdToastCss();
|
|
@@ -124,7 +124,7 @@ const SdToggle = class {
|
|
|
124
124
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
125
125
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
126
126
|
};
|
|
127
|
-
return (index.h("label", { key: '
|
|
127
|
+
return (index.h("label", { key: '79ca3923f8eda2791a41bc3ce6c61798102a078c', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '7ff2b7a49b65fa0b5f6bed383928880f1771239d', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
128
128
|
}
|
|
129
129
|
};
|
|
130
130
|
SdToggle.style = sdToggleCss();
|
package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js
CHANGED
|
@@ -38,7 +38,7 @@ export class SdDatePickerTrigger {
|
|
|
38
38
|
? DATEPICKER_COLORS.icon.disabled
|
|
39
39
|
: DATEPICKER_COLORS.icon.default,
|
|
40
40
|
};
|
|
41
|
-
return (h("div", { key: '
|
|
41
|
+
return (h("div", { key: '4fdd8662a0a0d36261df4390c39797c7ac9e8862', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
42
42
|
'sd-date-picker-trigger': true,
|
|
43
43
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
44
44
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -46,7 +46,7 @@ export class SdDatePickerTrigger {
|
|
|
46
46
|
e.preventDefault();
|
|
47
47
|
this.handleClick();
|
|
48
48
|
}
|
|
49
|
-
} }, h("sd-icon", { key: '
|
|
49
|
+
} }, h("sd-icon", { key: '8d855539cdaf82758a17766bba710e61aa211c70', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '49cbf18d44ec0dc09251d12b933ef0e841393e11', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
50
50
|
}
|
|
51
51
|
static get is() { return "sd-date-picker-trigger"; }
|
|
52
52
|
static get originalStyleUrls() {
|
|
@@ -116,9 +116,9 @@ export class SdDatePicker {
|
|
|
116
116
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
117
117
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
118
118
|
};
|
|
119
|
-
return (h("sd-field", { key: '
|
|
119
|
+
return (h("sd-field", { key: 'ffb39c09ac88e10d083eea775c1bc01532c625bc', 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: 'c9501fc3a0b2f0df85b78887c23d41737f95dff1', class: "sd-date-picker", ref: el => {
|
|
120
120
|
this.triggerRef = el;
|
|
121
|
-
} }, h("sd-date-picker-trigger", { key: '
|
|
121
|
+
} }, h("sd-date-picker-trigger", { key: 'b09f91b2c5433913d85116498d582cfa631a8534', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '8f15c254eef196212499746da68d7cdd52bfc338', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '3939d9444c6674b0aaa54aaec186ba6fbd988bf4', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
122
122
|
}
|
|
123
123
|
static get is() { return "sd-date-picker"; }
|
|
124
124
|
static get originalStyleUrls() {
|
|
@@ -244,7 +244,7 @@ export class SdDateRangePickerCalendar {
|
|
|
244
244
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
245
245
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
246
246
|
};
|
|
247
|
-
return (h(Fragment, { key: '
|
|
247
|
+
return (h(Fragment, { key: '9f94444bf58cdf5e1f25b377b1cb7bfac7fde4e9' }, h("div", { key: '1a516f6effa60cc84f22441dbc705fd06508002a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '7318074e2146d3b7be635a3e80ee62ec956ff200', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'dc40b470c2ece3cad43bac1e3446d6fe0d139966', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
248
248
|
}
|
|
249
249
|
static get is() { return "sd-date-range-picker-calendar"; }
|
|
250
250
|
static get originalStyleUrls() {
|
|
@@ -7,7 +7,7 @@ export class SdDivider {
|
|
|
7
7
|
const hostStyle = {
|
|
8
8
|
'--sd-divider-color': DIVIDER_COLORS.default,
|
|
9
9
|
};
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: 'db5c3c41114485dc464c548d4a9f62a07092b448', style: hostStyle }, h("hr", { key: 'dbc8aed5991da3e99573997d8a1de7d227baefd8', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
|
|
11
11
|
}
|
|
12
12
|
static get is() { return "sd-divider"; }
|
|
13
13
|
static get originalStyleUrls() {
|
|
@@ -205,18 +205,18 @@ export class SdField {
|
|
|
205
205
|
: {}),
|
|
206
206
|
}
|
|
207
207
|
: {};
|
|
208
|
-
return (h("div", { key: '
|
|
208
|
+
return (h("div", { key: '3f7d253e821031efe998686ba750b5d79f093dfb', class: {
|
|
209
209
|
'sd-field': true,
|
|
210
210
|
'sd-field--has-label': this.label !== '',
|
|
211
211
|
'sd-field--has-addon': addon !== '',
|
|
212
212
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
213
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '
|
|
213
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '2dcfb4712b65514ee05f4d3f769d3395916a0bbe', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '2e6279e9a977a1afe7417f87a7947e60f6a057c0', class: "sd-field__main" }, h("div", { key: 'abf3959ccabdd36b8e57f925bc7ef288dde0dbf0', class: {
|
|
214
214
|
'sd-field__control': true,
|
|
215
215
|
'sd-field__control--has-addon': addon !== '',
|
|
216
216
|
}, style: this.width !== '' && this.width !== 0
|
|
217
217
|
? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
|
|
218
|
-
: {} }, addon && (h("div", { key: '
|
|
219
|
-
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: '
|
|
218
|
+
: {} }, addon && (h("div", { key: '1f338c8324a0a8a49fed5a7f8a6a3496b99d1eca', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '7c1d23f99ea181642fba65678b5fdb26ba4721b4', name: this.icon.name, size: this.icon.size ??
|
|
219
|
+
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: 'dab3ba9002d7c9ff9726b1a242b11473eccc99dc' })), 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))))));
|
|
220
220
|
}
|
|
221
221
|
renderLabel(label) {
|
|
222
222
|
if (label == null || label === '')
|
|
@@ -173,7 +173,7 @@ export class SdFloatingPopover {
|
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
render() {
|
|
176
|
-
return h("slot", { key: '
|
|
176
|
+
return h("slot", { key: 'cadee10f344de11650330995b0de9a342babe1e3' });
|
|
177
177
|
}
|
|
178
178
|
static get is() { return "sd-floating-portal"; }
|
|
179
179
|
static get originalStyleUrls() {
|
|
@@ -152,12 +152,12 @@ export class SdInput {
|
|
|
152
152
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
153
153
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
154
154
|
};
|
|
155
|
-
return (h("sd-field", { key: '
|
|
155
|
+
return (h("sd-field", { key: 'c160e40525cd64a14964363ce8da30ba4e327378', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '8c9c4048bdb1e919d12949db0568ac8419ee1724', class: "sd-input__content" }, h("slot", { key: '87ad6a20a39b0328bb70e8beee1439cd7dd11c45', name: "prefix" }), h("input", { key: '651123773cc7c525eb3c9951db260796b1f3ccc9', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '6565cc41b71fbe07724b10aba6bdac9f478cd8e9', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '2fb785d07ab27fb4de6f6d7179bd8d66e6041fe7', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
156
156
|
if (this.disabled || this.readonly)
|
|
157
157
|
return;
|
|
158
158
|
this.internalValue = '';
|
|
159
159
|
await this.formField?.sdValidate();
|
|
160
|
-
} })), this.type === 'password' && (h("sd-ghost-button", { key: '
|
|
160
|
+
} })), this.type === 'password' && (h("sd-ghost-button", { key: 'f447711ee4082283e8cd130c4bfe3d0ff22e3970', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
|
|
161
161
|
if (this.disabled || this.readonly)
|
|
162
162
|
return;
|
|
163
163
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -31,7 +31,7 @@ export class SdLinearProgress {
|
|
|
31
31
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
32
32
|
};
|
|
33
33
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: 'cb460a4f0b5716eb067b7c5ddedb93bc2d3ba0b3', style: hostStyle }, h("div", { key: 'e135bed6a1ee332a60f9d56fe472922df0235189', class: "sd-linear-progress__track" }, h("div", { key: 'd4639603633b2b5a47ef907c136ca6b48a023524', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: 'ec6864d38e770504e6112a86e088e95c0d6dc9dc', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: 'd7657671095fa0d5b88e1723656ac6e2eab1dfff', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'b7780eb3e698c42313d63083f733354404357429', class: "sd-linear-progress__label" }, this.label)));
|
|
35
35
|
}
|
|
36
36
|
static get is() { return "sd-linear-progress"; }
|
|
37
37
|
static get originalStyleUrls() {
|
|
@@ -12,10 +12,10 @@ export class SdLoadingContainer {
|
|
|
12
12
|
this.visible = false;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h("div", { key: '
|
|
15
|
+
return (h("div", { key: 'e5ed85a0b5467ce92d3b31324752285f3d6a40f9', class: {
|
|
16
16
|
'sd-loading-container': true,
|
|
17
17
|
'sd-loading-container--visible': this.visible,
|
|
18
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '
|
|
18
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '80f6425043b106aedfc8110fbd1511fbf32eb283', class: "sd-loading-container__backdrop" }), h("div", { key: 'e8a24b8a9eb4986a08d903fa3ed54d1a4048d4d6', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '9b37b330ef551f75c78974ccae1d8fd3edfbb898', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '1be0b6565528d0415b5e43c2b16729ac707ed9e8', class: "sd-loading-container__message" }, this.message))));
|
|
19
19
|
}
|
|
20
20
|
static get is() { return "sd-loading-container"; }
|
|
21
21
|
static get originalStyleUrls() {
|
|
@@ -54,7 +54,7 @@ export class SdLoadingModal {
|
|
|
54
54
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
55
55
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
56
56
|
};
|
|
57
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: '2283ab10ad01f45488a9cc8d6cf7727606b405e9', style: hostStyle }, h("div", { key: '18e367ecf8dfd716c41a1936c6a44b22ad25a601', class: "sd-loading-modal" }, h("div", { key: '149ac117d0645c35e9d9e6b7dcac7103aa4aa554', 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: 'c30f2f115d448e0489d93ee5e8a0fb8e5347926a', 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: '8db7230e3fb62c525db9cf6f5fa5781dcb44dad9', class: "sd-loading-modal__button" }, h("sd-button", { key: 'faf1ceccaa5009d589e727349b17c7c5080e3c48', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
58
58
|
}
|
|
59
59
|
static get is() { return "sd-loading-modal"; }
|
|
60
60
|
static get originalStyleUrls() {
|
|
@@ -314,15 +314,15 @@ export class SdNumberInput {
|
|
|
314
314
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
315
315
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
316
316
|
};
|
|
317
|
-
return (h("sd-field", { key: '
|
|
317
|
+
return (h("sd-field", { key: 'c2047618e4efff7023d390f95efa349af0eb52af', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2e4dc263460e89763a5794499aef1cd7c9dbc267', class: {
|
|
318
318
|
'sd-number-input__content': true,
|
|
319
319
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
320
|
-
} }, this.useButton && (h("button", { key: '
|
|
320
|
+
} }, this.useButton && (h("button", { key: 'ce1e5d01421763c4ba77887ad823ddc63578b462', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '819664ac86d1813c3850e863412c9334195786f2', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
321
321
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
322
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '
|
|
322
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: 'bb7355f2ace27bbd93cf506c2d973651d74d6d88', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '8c8ee1d3e4b9ef5b89b00189bd138c32a7bcbe48', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
323
323
|
textAlign: this.useButton ? 'center' : 'right',
|
|
324
324
|
...this.inputStyle,
|
|
325
|
-
} }), this.inputSuffix && h("span", { key: '
|
|
325
|
+
} }), this.inputSuffix && h("span", { key: '8da77f4901166b778544d51b9a88a7990aa15ba1', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '251cce12749955262b112d80ebd15298944bd079', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '5ef30dba0f14baadca36fd651ca09e780ff9be7c', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
326
326
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
327
327
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
328
328
|
}
|
|
@@ -87,13 +87,13 @@ export class SdPagination {
|
|
|
87
87
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
88
88
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
89
89
|
};
|
|
90
|
-
return (h("div", { key: '
|
|
90
|
+
return (h("div", { key: '8cdda030c6ffa1a4f3358a5877da3b76293bae39', class: {
|
|
91
91
|
'sd-pagination': true,
|
|
92
92
|
'sd-pagination--simple': this.simple,
|
|
93
|
-
}, style: cssVars }, h("div", { key: '
|
|
93
|
+
}, style: cssVars }, h("div", { key: '34569687e67dec4b218ef6d3da01e21b19176284', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
94
94
|
'sd-pagination__item': true,
|
|
95
95
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
96
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '
|
|
96
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'a222ff48f10bce574ad9ef928d66d99696f6923b', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
97
97
|
}
|
|
98
98
|
static get is() { return "sd-pagination"; }
|
|
99
99
|
static get originalStyleUrls() {
|
|
@@ -40,7 +40,7 @@ export class SdPopup {
|
|
|
40
40
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
41
41
|
...this.submitButtonProps,
|
|
42
42
|
};
|
|
43
|
-
return (h("div", { key: '
|
|
43
|
+
return (h("div", { key: 'bc5ca3d1f4bc9c340245262f891612cb3cebcbca', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'd061ed390b7ee14c70f7f1515a1ca240090f51b1', class: "sd-popup__header" }, h("h2", { key: '9fcc3683714d5160d77df1d099de3f7152ce0a8d', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'e2943e318cc283d27d385fab001e673740c0c5bd', class: "sd-popup__body" }, h("slot", { key: '9b846412c09cae14f1f93364606cf6db91a11112' })), this.useFooter && (h("footer", { key: '9ad29d21e6d63d628474551a3000615690436937', class: "sd-popup__footer" }, h("div", { key: '039359244691aa35d0589f6d842398b88715fdd8', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '0c29f4aba59e40b7435eb9693d2d47fa7d4ea7da', name: "footer-left" })), h("sd-button", { key: '5c79526dfdde154fb50deab79730376e17445831', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "sd-popup"; }
|
|
46
46
|
static get originalStyleUrls() {
|
|
@@ -78,7 +78,7 @@ export class SdSelectListItem {
|
|
|
78
78
|
return (
|
|
79
79
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
80
80
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
81
|
-
h("div", { key: '
|
|
81
|
+
h("div", { key: '42f9e69d39035fedce11095a2d5be95795831241', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
82
82
|
'sd-select-list-item': true,
|
|
83
83
|
'sd-select-list-item--group': isGroup,
|
|
84
84
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -88,7 +88,7 @@ export class SdSelectListItem {
|
|
|
88
88
|
'sd-select-list-item--focused': this.isFocused,
|
|
89
89
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
90
90
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
91
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '
|
|
91
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '655cf931840a15545c1afdd4aeb2044c7ae24c0a', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '5461f3861a093d25e866cd94e603a4b6017fd701', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
92
92
|
}
|
|
93
93
|
static get is() { return "sd-select-list-item"; }
|
|
94
94
|
static get originalStyleUrls() {
|
|
@@ -45,15 +45,15 @@ export class SdSelectListItemSearch {
|
|
|
45
45
|
clearTimeout(this.debounceTimer);
|
|
46
46
|
}
|
|
47
47
|
render() {
|
|
48
|
-
return (h("div", { key: '
|
|
48
|
+
return (h("div", { key: 'eeeabfcd97514124434c4c6c61d219d2230e7a1e', class: {
|
|
49
49
|
'sd-select-list-item-search': true,
|
|
50
50
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
51
|
-
} }, h("div", { key: '
|
|
51
|
+
} }, h("div", { key: 'a378a2745db91faf00a5fa00105fb152f8b6f59e', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '08681aab44c7a30a5f4a36cdf7a8ec58fdbb6cf4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '0e75fdbfdab69b3f0bd9146d97915926200ba2c0', ref: el => {
|
|
52
52
|
this.inputEl = el;
|
|
53
|
-
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '
|
|
53
|
+
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'a45bba91cce1700bab677e4528ab6df79e08547f', type: "button", class: {
|
|
54
54
|
'sd-select-list-item-search__clear': true,
|
|
55
55
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
56
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '
|
|
56
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'e5c01644bf8b6651d6ec312b18f77d79cc61f455', name: "close", size: 12, color: "#888888" })))));
|
|
57
57
|
}
|
|
58
58
|
static get is() { return "sd-select-list-item-search"; }
|
|
59
59
|
static get originalStyleUrls() {
|