@sellmate/design-system 1.17.0 → 1.19.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/component.listItem-Bnh0r_CA.js +53 -0
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +11 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-button_2.cjs.entry.js +54 -0
- package/dist/cjs/sd-calendar_2.cjs.entry.js +2 -2
- package/dist/cjs/sd-chip-input.cjs.entry.js +263 -18
- package/dist/cjs/sd-circle-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +3 -3
- 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 +2 -2
- package/dist/cjs/sd-dropdown-button.cjs.entry.js +17 -7
- package/dist/cjs/sd-field_3.cjs.entry.js +8 -8
- package/dist/cjs/sd-ghost-button_2.cjs.entry.js +2 -2
- package/dist/cjs/sd-guide.cjs.entry.js +1 -1
- package/dist/cjs/sd-key-value-table.cjs.entry.js +40 -13
- package/dist/cjs/sd-linear-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-loading-container.cjs.entry.js +2 -2
- package/dist/cjs/sd-modal-container.cjs.entry.js +8 -1
- package/dist/cjs/sd-pagination_4.cjs.entry.js +10 -10
- package/dist/cjs/sd-popup.cjs.entry.js +2 -2
- package/dist/cjs/sd-portal.cjs.entry.js +16 -12
- package/dist/cjs/sd-select-list-item_2.cjs.entry.js +8 -7
- package/dist/cjs/{sd-select.config-DrJ4LNVz.js → sd-select.config-C9Ohe1QA.js} +25 -71
- package/dist/cjs/sd-select_3.cjs.entry.js +12 -11
- package/dist/cjs/sd-switch.cjs.entry.js +1 -1
- package/dist/cjs/sd-table.cjs.entry.js +12 -11
- package/dist/cjs/{sd-table.config-BjJW74Zx.js → sd-table.config-B7MuRLoR.js} +1 -1
- package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
- package/dist/cjs/sd-td.cjs.entry.js +1 -1
- package/dist/cjs/sd-text-link.cjs.entry.js +4 -4
- 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/cjs/{system-CdAyz3ej.js → system-MjrAugX-.js} +7 -0
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/assets/Bill.js +5 -0
- package/dist/collection/components/assets/Coupon.js +5 -0
- package/dist/collection/components/assets/Delete.js +5 -0
- package/dist/collection/components/assets/Dot.js +5 -0
- package/dist/collection/components/assets/Launcher.js +5 -0
- package/dist/collection/components/assets/Monitor.js +5 -0
- package/dist/collection/components/assets/Shield.js +5 -0
- package/dist/collection/components/assets/Sidebar.js +5 -0
- package/dist/collection/components/assets/Store.js +5 -0
- package/dist/collection/components/assets/index.js +18 -0
- package/dist/collection/components/sd-button/sd-button.js +2 -2
- package/dist/collection/components/sd-chip-input/sd-chip-input.config.js +29 -0
- package/dist/collection/components/sd-chip-input/sd-chip-input.css +50 -0
- package/dist/collection/components/sd-chip-input/sd-chip-input.js +367 -19
- package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +2 -2
- package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
- package/dist/collection/components/sd-divider/sd-divider.js +1 -1
- package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js +7 -0
- package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +10 -7
- package/dist/collection/components/sd-field/sd-field.js +5 -5
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +1 -1
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-key-value-table/sd-key-value-table.config.js +3 -3
- package/dist/collection/components/sd-key-value-table/sd-key-value-table.css +11 -4
- package/dist/collection/components/sd-key-value-table/sd-key-value-table.js +42 -15
- 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-modal-container/sd-modal-container.js +8 -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-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-popup/sd-popup.js +1 -1
- package/dist/collection/components/sd-portal/sd-portal.js +16 -12
- 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 +4 -4
- package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
- package/dist/collection/components/sd-select/sd-select.config.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.css +4 -1
- package/dist/collection/components/sd-table/sd-table.js +15 -14
- 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.js +3 -3
- package/dist/collection/components/sd-text-link/sd-text-link.js +4 -4
- package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
- package/dist/collection/components/sd-toast/sd-toast.js +3 -3
- 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 +4 -4
- package/dist/collection/utils/modal.js +11 -0
- package/dist/components/index.js +1 -1
- package/dist/components/{p-DfZ8X4ly.js → p-4HPAPKne.js} +1 -1
- package/dist/components/{p-B57sOZvR.js → p-79DExV92.js} +1 -1
- package/dist/components/{p-RE577yb-.js → p-AI4YlQmL.js} +1 -1
- package/dist/components/{p-B4pLCd0_.js → p-B-4ulKJj.js} +1 -1
- package/dist/components/{p-G_N9xEDL.js → p-B3SKaQId.js} +1 -1
- package/dist/components/p-BD8OoYud.js +1 -0
- package/dist/components/p-BJfiMC9H.js +1 -0
- package/dist/components/{p-DknZgTo9.js → p-BLNc_TL-.js} +1 -1
- package/dist/components/{p-CLEAGFjW.js → p-BMIgVp9-.js} +1 -1
- package/dist/components/{p-vS0t7bWk.js → p-BX5uKVOt.js} +1 -1
- package/dist/components/p-BYTrIk62.js +1 -0
- package/dist/components/{p-_P21dOPl.js → p-B_5uwji5.js} +1 -1
- package/dist/components/{p-DUwrMHYa.js → p-Bzo51vnP.js} +1 -1
- package/dist/components/{p-DtG23tkr.js → p-C0tkFuhj.js} +1 -1
- package/dist/components/{p-YlaidN9T.js → p-C3wv8gVC.js} +1 -1
- package/dist/components/{p-YKESuy-p.js → p-CH6cVc2a.js} +1 -1
- package/dist/components/{p-Bfrg9lvO.js → p-CQWZv8vY.js} +1 -1
- package/dist/components/{p-BsQf9d7Q.js → p-CXRFEcE_.js} +1 -1
- package/dist/components/{p-B-61rIur.js → p-C_r3z9VA.js} +1 -1
- package/dist/components/{p-BvAJ_toQ.js → p-Cl5io5TH.js} +1 -1
- package/dist/components/p-ClKABgST.js +1 -0
- package/dist/components/{p-DGyTYauz.js → p-Cmg10jpN.js} +1 -1
- package/dist/components/{p-DeXO3mpJ.js → p-CtWfOIxb.js} +1 -1
- package/dist/components/{p-CIZpVJBx.js → p-CzCu_NDl.js} +1 -1
- package/dist/components/{p-FGvi8J2D.js → p-DAOeioSV.js} +1 -1
- package/dist/components/{p-iGvyLmbb.js → p-DDR0VcRU.js} +1 -1
- package/dist/components/{p-CnfnK5aj.js → p-DMS9mQsg.js} +1 -1
- package/dist/components/{p-B73U-Zw2.js → p-DTFXzlvq.js} +1 -1
- package/dist/components/{p-CHjF0mwj.js → p-DbLQoVx6.js} +1 -1
- package/dist/components/p-Dr5Q2ZKB.js +1 -0
- package/dist/components/{p-B4UxhQes.js → p-DrSHJYop.js} +1 -1
- package/dist/components/p-DvvGi4J_.js +1 -0
- package/dist/components/{p-BrzBnO1L.js → p-DyVh4pNL.js} +1 -1
- package/dist/components/{p-C_6HUUGg.js → p-Ng3JMPxb.js} +1 -1
- package/dist/components/p-U8VaRj9c.js +1 -0
- package/dist/components/{p-BY1ItC8N.js → p-hzCGj0On.js} +1 -1
- package/dist/components/{p-BMVHvEDw.js → p-qJeUUOyB.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-button.js +1 -1
- package/dist/components/sd-calendar.js +1 -1
- package/dist/components/sd-callout.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-chip-input.js +1 -1
- package/dist/components/sd-chip.js +1 -1
- package/dist/components/sd-circle-progress.js +1 -1
- package/dist/components/sd-confirm-modal.js +1 -1
- package/dist/components/sd-date-picker-trigger.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker-calendar.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-divider.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-ghost-button.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-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-portal.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/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/index.esm.js +1 -1
- package/dist/design-system/p-12306783.entry.js +1 -0
- package/dist/design-system/{p-b457611c.entry.js → p-1602a5fa.entry.js} +1 -1
- package/dist/design-system/p-1f3c1cca.entry.js +1 -0
- package/dist/design-system/{p-3045ffe1.entry.js → p-22484d65.entry.js} +1 -1
- package/dist/design-system/p-3caf2c5b.entry.js +1 -0
- package/dist/design-system/p-3f7349ae.entry.js +1 -0
- package/dist/design-system/{p-b8ea656d.entry.js → p-43529bba.entry.js} +1 -1
- package/dist/design-system/p-46da89f2.entry.js +1 -0
- package/dist/design-system/p-4b15247b.entry.js +1 -0
- package/dist/design-system/p-4b626171.entry.js +1 -0
- package/dist/design-system/{p-a1f756ab.entry.js → p-4e1d76b8.entry.js} +1 -1
- package/dist/design-system/{p-03bcd782.entry.js → p-683c3b91.entry.js} +1 -1
- package/dist/design-system/{p-99ffe505.entry.js → p-6ce68bf2.entry.js} +1 -1
- package/dist/design-system/{p-a5131a43.entry.js → p-80bde621.entry.js} +1 -1
- package/dist/design-system/{p-22883fe1.entry.js → p-81aa23d1.entry.js} +1 -1
- package/dist/design-system/{p-c78b8822.entry.js → p-827f067b.entry.js} +1 -1
- package/dist/design-system/p-8a025f91.entry.js +1 -0
- package/dist/design-system/{p-3e62a3ea.entry.js → p-8a84a4fe.entry.js} +1 -1
- package/dist/design-system/{p-d2833150.entry.js → p-8f90620b.entry.js} +1 -1
- package/dist/design-system/{p-a0775a0c.entry.js → p-9124a1af.entry.js} +1 -1
- package/dist/design-system/p-9d35b674.entry.js +1 -0
- package/dist/design-system/p-BJfiMC9H.js +1 -0
- package/dist/design-system/p-CAFz8W8_.js +1 -0
- package/dist/design-system/{p-DGyTYauz.js → p-Cmg10jpN.js} +1 -1
- package/dist/design-system/p-U8VaRj9c.js +1 -0
- package/dist/design-system/{p-c6307ba4.entry.js → p-a263af1b.entry.js} +1 -1
- package/dist/design-system/p-aa312937.entry.js +1 -0
- package/dist/design-system/p-b4b20a86.entry.js +1 -0
- package/dist/design-system/{p-7eb31041.entry.js → p-bbbc4b27.entry.js} +1 -1
- package/dist/design-system/{p-14340e46.entry.js → p-cc5f5bff.entry.js} +1 -1
- package/dist/design-system/{p-8140a225.entry.js → p-d5032f31.entry.js} +1 -1
- package/dist/design-system/{p-6d765b25.entry.js → p-e93dda25.entry.js} +1 -1
- package/dist/design-system/{p-c4e1641b.entry.js → p-f5190934.entry.js} +1 -1
- package/dist/esm/component.listItem-U8VaRj9c.js +50 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/index.js +11 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button_2.entry.js +54 -0
- package/dist/esm/sd-calendar_2.entry.js +2 -2
- package/dist/esm/sd-chip-input.entry.js +263 -18
- package/dist/esm/sd-circle-progress.entry.js +2 -2
- package/dist/esm/sd-confirm-modal_2.entry.js +3 -3
- 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 +2 -2
- package/dist/esm/sd-dropdown-button.entry.js +17 -7
- package/dist/esm/sd-field_3.entry.js +8 -8
- package/dist/esm/sd-ghost-button_2.entry.js +2 -2
- package/dist/esm/sd-guide.entry.js +1 -1
- package/dist/esm/sd-key-value-table.entry.js +40 -13
- package/dist/esm/sd-linear-progress.entry.js +2 -2
- package/dist/esm/sd-loading-container.entry.js +2 -2
- package/dist/esm/sd-modal-container.entry.js +8 -1
- package/dist/esm/sd-pagination_4.entry.js +10 -10
- package/dist/esm/sd-popup.entry.js +2 -2
- package/dist/esm/sd-portal.entry.js +16 -12
- package/dist/esm/sd-select-list-item_2.entry.js +8 -7
- package/dist/esm/{sd-select.config-DtrsLG0Z.js → sd-select.config-D6ktrl7E.js} +4 -50
- package/dist/esm/sd-select_3.entry.js +12 -11
- package/dist/esm/sd-switch.entry.js +1 -1
- package/dist/esm/{sd-table.config-D9meRqTx.js → sd-table.config-B3wuA5wX.js} +1 -1
- package/dist/esm/sd-table.entry.js +12 -11
- package/dist/esm/sd-tabs.entry.js +1 -1
- package/dist/esm/sd-td.entry.js +1 -1
- package/dist/esm/sd-text-link.entry.js +4 -4
- 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/esm/{system-j2khhcHY.js → system-BJfiMC9H.js} +7 -0
- package/dist/types/components/assets/Bill.d.ts +1 -0
- package/dist/types/components/assets/Coupon.d.ts +1 -0
- package/dist/types/components/assets/Delete.d.ts +1 -0
- package/dist/types/components/assets/Dot.d.ts +1 -0
- package/dist/types/components/assets/Launcher.d.ts +1 -0
- package/dist/types/components/assets/Monitor.d.ts +1 -0
- package/dist/types/components/assets/Shield.d.ts +1 -0
- package/dist/types/components/assets/Sidebar.d.ts +1 -0
- package/dist/types/components/assets/Store.d.ts +1 -0
- package/dist/types/components/assets/index.d.ts +9 -0
- package/dist/types/components/sd-chip-input/sd-chip-input.config.d.ts +24 -0
- package/dist/types/components/sd-chip-input/sd-chip-input.d.ts +19 -0
- package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts +4 -0
- package/dist/types/components/sd-dropdown-button/sd-dropdown-button.d.ts +1 -0
- package/dist/types/components/sd-key-value-table/sd-key-value-table.config.d.ts +2 -2
- package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts +10 -3
- package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +2 -0
- package/dist/types/components/sd-portal/sd-portal.d.ts +1 -0
- package/dist/types/components/sd-table/sd-table.d.ts +1 -1
- package/dist/types/components.d.ts +62 -20
- package/dist/types/utils/modal.d.ts +6 -0
- package/hydrate/index.js +576 -213
- package/hydrate/index.mjs +576 -213
- package/package.json +3 -3
- package/dist/components/p-6oSCGUOo.js +0 -1
- package/dist/components/p-BWoC-hMr.js +0 -1
- package/dist/components/p-C5wgHjtx.js +0 -1
- package/dist/components/p-Cftyepf_.js +0 -1
- package/dist/components/p-IgBxAXyL.js +0 -1
- package/dist/components/p-j2khhcHY.js +0 -1
- package/dist/design-system/p-0c5192b8.entry.js +0 -1
- package/dist/design-system/p-13b0db59.entry.js +0 -1
- package/dist/design-system/p-1652ae55.entry.js +0 -1
- package/dist/design-system/p-21fa7f85.entry.js +0 -1
- package/dist/design-system/p-2753c6c9.entry.js +0 -1
- package/dist/design-system/p-56a45ef9.entry.js +0 -1
- package/dist/design-system/p-71739336.entry.js +0 -1
- package/dist/design-system/p-DtrsLG0Z.js +0 -1
- package/dist/design-system/p-b22cb811.entry.js +0 -1
- package/dist/design-system/p-b576bc21.entry.js +0 -1
- package/dist/design-system/p-c1f71355.entry.js +0 -1
- package/dist/design-system/p-da90b448.entry.js +0 -1
- package/dist/design-system/p-j2khhcHY.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -5711,6 +5711,11 @@ const Bell = (props) => {
|
|
|
5711
5711
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M14.8 18.8086C14.9105 18.8086 15.0008 18.8985 14.9944 19.0088C14.8972 20.6781 13.5938 22 12.0002 22C10.4066 22 9.10324 20.6781 9.00609 19.0088C8.99968 18.8985 9.08997 18.8086 9.20043 18.8086H14.8Z", fill: "currentColor" }), hAsync("path", { d: "M12.0002 2C12.5525 2.00002 13.0002 2.44772 13.0002 3V4.20898C15.9941 4.69573 18.2815 7.3314 18.2815 10.5107V14.1582C18.2815 15.0811 19.1207 15.8005 19.7629 16.4531C20.4046 17.1057 19.6388 17.957 18.7307 17.957H5.26976C4.36161 17.957 3.59581 17.1057 4.23754 16.4531C4.87979 15.8005 5.71898 15.0811 5.71898 14.1582V10.5107C5.71898 7.33139 8.00632 4.69572 11.0002 4.20898V3C11.0002 2.44772 11.4479 2 12.0002 2Z", fill: "currentColor" })));
|
|
5712
5712
|
};
|
|
5713
5713
|
|
|
5714
|
+
const Bill = (props) => {
|
|
5715
|
+
const { size = 24, ...rest } = props;
|
|
5716
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.2891 8.7998C16.4208 8.40733 16.8457 8.19563 17.2383 8.32715C17.6309 8.45871 17.8423 8.88369 17.7109 9.27637L16.8818 11.75H18C18.4142 11.75 18.75 12.0858 18.75 12.5C18.75 12.9142 18.4142 13.25 18 13.25H16.3799L15.6035 15.5664C15.2492 16.6239 13.7487 16.6085 13.416 15.5439L12.6992 13.25H11.3008L10.584 15.5439C10.2513 16.6085 8.7508 16.6239 8.39648 15.5664L7.62012 13.25H6C5.58579 13.25 5.25 12.9142 5.25 12.5C5.25 12.0858 5.58579 11.75 6 11.75H7.11816L6.28906 9.27637C6.15765 8.88369 6.36905 8.45871 6.76172 8.32715C7.15433 8.19563 7.57919 8.40733 7.71094 8.7998L8.69922 11.75H10.1982L10.9023 9.49805L10.9375 9.40039C11.3201 8.45471 12.6799 8.45472 13.0625 9.40039L13.0977 9.49805L13.8018 11.75H15.3008L16.2891 8.7998ZM9.47461 14.0645L9.72949 13.25H9.20215L9.47461 14.0645ZM14.5244 14.0645L14.7979 13.25H14.2705L14.5244 14.0645ZM11.7695 11.75H12.2305L12 11.0137L11.7695 11.75Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5 4.25C20.7426 4.25 21.75 5.25736 21.75 6.5V17.5C21.75 18.7426 20.7426 19.75 19.5 19.75H4.5C3.25736 19.75 2.25 18.7426 2.25 17.5L2.25 6.5C2.25 5.25736 3.25736 4.25 4.5 4.25H19.5ZM4.5 5.75C4.08579 5.75 3.75 6.08579 3.75 6.5V17.5C3.75 17.9142 4.08579 18.25 4.5 18.25H19.5C19.9142 18.25 20.25 17.9142 20.25 17.5V6.5C20.25 6.08579 19.9142 5.75 19.5 5.75H4.5Z", fill: "currentColor" })));
|
|
5717
|
+
};
|
|
5718
|
+
|
|
5714
5719
|
const Board = (props) => {
|
|
5715
5720
|
const { size = 24, ...rest } = props;
|
|
5716
5721
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M15 14.25C15.4142 14.25 15.75 14.5858 15.75 15C15.75 15.4142 15.4142 15.75 15 15.75H9C8.58579 15.75 8.25 15.4142 8.25 15C8.25 14.5858 8.58579 14.25 9 14.25H15Z", fill: "currentColor" }), hAsync("path", { d: "M15 10.25C15.4142 10.25 15.75 10.5858 15.75 11C15.75 11.4142 15.4142 11.75 15 11.75H9C8.58579 11.75 8.25 11.4142 8.25 11C8.25 10.5858 8.58579 10.25 9 10.25H15Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.75 2.0498C14.5699 2.0498 15.2733 2.54394 15.582 3.25H18.2002C19.1665 3.25021 19.9502 4.03363 19.9502 5V20.2002C19.9501 21.1665 19.1664 21.95 18.2002 21.9502H5.7998C4.83346 21.9501 4.04991 21.1665 4.0498 20.2002V5C4.0498 4.03356 4.83339 3.2501 5.7998 3.25H8.41797C8.72672 2.54394 9.43009 2.0498 10.25 2.0498H13.75ZM5.7998 4.75C5.66182 4.7501 5.5498 4.86199 5.5498 5V20.2002C5.54991 20.3381 5.66188 20.4501 5.7998 20.4502H18.2002C18.338 20.45 18.4501 20.338 18.4502 20.2002V5C18.4502 4.86206 18.3381 4.75021 18.2002 4.75H15.6211C15.3371 5.50881 14.6079 6.0498 13.75 6.0498H10.25C9.39207 6.0498 8.66292 5.50881 8.37891 4.75H5.7998ZM10.25 3.5498C9.97392 3.5498 9.7501 3.77375 9.75 4.0498C9.75 4.32595 9.97386 4.5498 10.25 4.5498H13.75C14.0261 4.5498 14.25 4.32595 14.25 4.0498C14.2499 3.77375 14.0261 3.5498 13.75 3.5498H10.25Z", fill: "currentColor" })));
|
|
@@ -5831,6 +5836,11 @@ const Copy = (props) => {
|
|
|
5831
5836
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 7.54395C20.9664 7.54404 21.7499 8.32759 21.75 9.29395V20C21.7499 20.9664 20.9664 21.7499 20 21.75H9.29395C8.32756 21.7499 7.54404 20.9664 7.54395 20V9.29395C7.54404 8.32757 8.32757 7.54401 9.29395 7.54395H20ZM9.29395 9.04395C9.15599 9.04401 9.04404 9.156 9.04395 9.29395V20C9.04404 20.138 9.15599 20.2499 9.29395 20.25H20C20.1379 20.2499 20.2499 20.1379 20.25 20V9.29395C20.2499 9.15602 20.1379 9.04404 20 9.04395H9.29395Z", fill: "currentColor" }), hAsync("path", { d: "M14.7061 2.25C15.6725 2.25009 16.4561 3.03356 16.4561 4V6C16.4561 6.41416 16.1202 6.74991 15.7061 6.75C15.2918 6.75 14.9561 6.41421 14.9561 6V4C14.9561 3.86199 14.844 3.75009 14.7061 3.75H4C3.86193 3.75 3.75 3.86193 3.75 4V14.7061C3.75009 14.844 3.86199 14.9561 4 14.9561H6C6.41421 14.9561 6.75 15.2918 6.75 15.7061C6.74991 16.1202 6.41416 16.4561 6 16.4561H4C3.03356 16.4561 2.25009 15.6725 2.25 14.7061V4C2.25 3.0335 3.0335 2.25 4 2.25H14.7061Z", fill: "currentColor" })));
|
|
5832
5837
|
};
|
|
5833
5838
|
|
|
5839
|
+
const Coupon = (props) => {
|
|
5840
|
+
const { size = 24, ...rest } = props;
|
|
5841
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M15 13.5C15.8284 13.5 16.5 14.1716 16.5 15C16.5 15.8284 15.8284 16.5 15 16.5C14.1716 16.5 13.5 15.8284 13.5 15C13.5 14.1716 14.1716 13.5 15 13.5Z", fill: "currentColor" }), hAsync("path", { d: "M14.9092 7.96973C15.2021 7.67705 15.6769 7.67691 15.9697 7.96973C16.2625 8.26255 16.2624 8.73738 15.9697 9.03027L9.03027 15.9697C8.73739 16.2625 8.26261 16.2625 7.96973 15.9697C7.67685 15.6769 7.67689 15.2021 7.96973 14.9092L14.9092 7.96973Z", fill: "currentColor" }), hAsync("path", { d: "M9 7.5C9.82843 7.5 10.5 8.17157 10.5 9C10.5 9.82843 9.82843 10.5 9 10.5C8.17157 10.5 7.5 9.82843 7.5 9C7.5 8.17157 8.17157 7.5 9 7.5Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5 4.25C20.7426 4.25 21.75 5.25736 21.75 6.5V9C21.75 9.5042 21.5307 9.91547 21.2715 10.2178C21.0155 10.5162 20.6946 10.7418 20.4014 10.9023C20.0117 11.1156 19.75 11.5278 19.75 12C19.75 12.4722 20.0117 12.8844 20.4014 13.0977C20.6946 13.2582 21.0155 13.4838 21.2715 13.7822C21.5307 14.0845 21.75 14.4958 21.75 15V17.5C21.75 18.7426 20.7426 19.75 19.5 19.75H4.5C3.25736 19.75 2.25 18.7426 2.25 17.5V15C2.25 14.4958 2.46932 14.0845 2.72852 13.7822C2.98448 13.4838 3.30543 13.2582 3.59863 13.0977C3.98828 12.8844 4.25 12.4722 4.25 12C4.25 11.5278 3.98828 11.1156 3.59863 10.9023C3.30543 10.7418 2.98448 10.5162 2.72852 10.2178C2.46932 9.91547 2.25 9.5042 2.25 9L2.25 6.5C2.25 5.25736 3.25736 4.25 4.5 4.25H19.5ZM4.5 5.75C4.08579 5.75 3.75 6.08579 3.75 6.5V9C3.75 9.04794 3.76826 9.12579 3.86719 9.24121C3.96955 9.36057 4.12814 9.48225 4.31934 9.58691C5.17022 10.0528 5.75 10.9581 5.75 12C5.75 13.0419 5.17022 13.9472 4.31934 14.4131C4.12814 14.5178 3.96955 14.6394 3.86719 14.7588C3.76826 14.8742 3.75 14.9521 3.75 15V17.5C3.75 17.9142 4.08579 18.25 4.5 18.25H19.5C19.9142 18.25 20.25 17.9142 20.25 17.5V15C20.25 14.9521 20.2317 14.8742 20.1328 14.7588C20.0304 14.6394 19.8719 14.5178 19.6807 14.4131C18.8298 13.9472 18.25 13.0419 18.25 12C18.25 10.9581 18.8298 10.0528 19.6807 9.58691C19.8719 9.48225 20.0304 9.36057 20.1328 9.24121C20.2317 9.12579 20.25 9.04794 20.25 9V6.5C20.25 6.08579 19.9142 5.75 19.5 5.75H4.5Z", fill: "currentColor" })));
|
|
5842
|
+
};
|
|
5843
|
+
|
|
5834
5844
|
const Dashboard = (props) => {
|
|
5835
5845
|
const { size = 24, ...rest } = props;
|
|
5836
5846
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M11 13.25C11 13.5261 10.7761 13.75 10.5 13.75L6.5 13.75C6.22386 13.75 6 13.5261 6 13.25L6 7.25C6 6.97386 6.22386 6.75 6.5 6.75L10.5 6.75C10.7761 6.75 11 6.97386 11 7.25L11 13.25Z", fill: "currentColor" }), hAsync("path", { d: "M18 9.25C18 9.52614 17.7761 9.75 17.5 9.75L13.5 9.75C13.2239 9.75 13 9.52614 13 9.25L13 7.25C13 6.97386 13.2239 6.75 13.5 6.75L17.5 6.75C17.7761 6.75 18 6.97386 18 7.25L18 9.25Z", fill: "currentColor" }), hAsync("path", { d: "M18 13.25C18 13.5261 17.7761 13.75 17.5 13.75L13.5 13.75C13.2239 13.75 13 13.5261 13 13.25L13 11.25C13 10.9739 13.2239 10.75 13.5 10.75L17.5 10.75C17.7761 10.75 18 10.9739 18 11.25L18 13.25Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.9502 14.75C21.9502 15.9925 20.9427 16.9998 19.7002 17L12.75 17L12.75 19L15 19C15.4142 19 15.75 19.3358 15.75 19.75C15.75 20.1642 15.4142 20.5 15 20.5L9 20.5C8.58579 20.5 8.25 20.1642 8.25 19.75C8.25 19.3358 8.58579 19 9 19L11.25 19L11.25 17L4.29981 17C3.05725 16.9999 2.04981 15.9926 2.04981 14.75L2.04981 5.75C2.04981 4.50742 3.05725 3.5001 4.29981 3.5L19.7002 3.5C20.9427 3.50021 21.9502 4.50749 21.9502 5.75L21.9502 14.75ZM20.4502 5.75C20.4502 5.33592 20.1142 5.00021 19.7002 5L4.29981 5C3.88568 5.0001 3.54981 5.33585 3.54981 5.75L3.54981 14.75C3.54981 15.1642 3.88568 15.4999 4.29981 15.5L19.7002 15.5C20.1142 15.4998 20.4502 15.1641 20.4502 14.75L20.4502 5.75Z", fill: "currentColor" })));
|
|
@@ -5841,6 +5851,16 @@ const DateIcon = (props) => {
|
|
|
5841
5851
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M18 14C18.5522 14.0001 19 14.4478 19 15V18C18.9999 18.5521 18.5521 18.9999 18 19H15C14.4478 19 14.0001 18.5522 14 18V15C14 14.4477 14.4477 14 15 14H18Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 2.0498C17.4141 2.0499 17.75 2.38565 17.75 2.7998V4.25H20.2002C21.1665 4.25021 21.9502 5.03363 21.9502 6V20.2002C21.95 21.1664 21.1664 21.95 20.2002 21.9502H3.7998C2.83344 21.9502 2.05002 21.1665 2.0498 20.2002V6C2.0498 5.0335 2.83331 4.25 3.7998 4.25H6.25V2.7998C6.25 2.38559 6.58579 2.0498 7 2.0498C7.41413 2.0499 7.75 2.38565 7.75 2.7998V4.25H16.25V2.7998C16.25 2.38559 16.5858 2.0498 17 2.0498ZM3.5498 20.2002C3.55002 20.3381 3.66187 20.4502 3.7998 20.4502H20.2002C20.338 20.45 20.45 20.338 20.4502 20.2002V9H3.5498V20.2002Z", fill: "currentColor" })));
|
|
5842
5852
|
};
|
|
5843
5853
|
|
|
5854
|
+
const Delete = (props) => {
|
|
5855
|
+
const { size = 24, ...rest } = props;
|
|
5856
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M8.35254 10.7646C8.75858 10.6834 9.15395 10.9466 9.23535 11.3525L10.2354 16.3525C10.3166 16.7586 10.0534 17.1539 9.64746 17.2354C9.24142 17.3166 8.84605 17.0534 8.76465 16.6475L7.76465 11.6475C7.68344 11.2414 7.94658 10.8461 8.35254 10.7646Z", fill: "currentColor" }), hAsync("path", { d: "M12 10.75C12.4142 10.75 12.75 11.0858 12.75 11.5V16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5V11.5C11.25 11.0858 11.5858 10.75 12 10.75Z", fill: "currentColor" }), hAsync("path", { d: "M14.7646 11.3525C14.8461 10.9466 15.2414 10.6834 15.6475 10.7646C16.0534 10.8461 16.3166 11.2414 16.2354 11.6475L15.2354 16.6475C15.1539 17.0534 14.7586 17.3166 14.3525 17.2354C13.9466 17.1539 13.6834 16.7586 13.7646 16.3525L14.7646 11.3525Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13 2.0498C13.9664 2.0498 14.7499 2.8334 14.75 3.7998V4.25H20C20.4142 4.25 20.75 4.58579 20.75 5V8C20.75 8.41421 20.4142 8.75 20 8.75H19.6445L17.999 19.6123C17.7952 20.9565 16.6398 21.9502 15.2803 21.9502H8.71973C7.36018 21.9502 6.20481 20.9565 6.00098 19.6123L4.35547 8.75H4C3.58579 8.75 3.25 8.41421 3.25 8V5C3.25 4.58579 3.58579 4.25 4 4.25H8.75V3.7998C8.75011 2.8334 9.53357 2.0498 10.5 2.0498H13ZM7.48438 19.3877C7.57717 19.9985 8.10188 20.4502 8.71973 20.4502H15.2803C15.8981 20.4502 16.4228 19.9985 16.5156 19.3877L18.1279 8.75H5.87207L7.48438 19.3877ZM4.75 7.25H19.25V5.75H4.75V7.25ZM10.5 3.5498C10.362 3.5498 10.2501 3.66182 10.25 3.7998V4.25H13.25V3.7998C13.2499 3.66182 13.138 3.5498 13 3.5498H10.5Z", fill: "currentColor" })));
|
|
5857
|
+
};
|
|
5858
|
+
|
|
5859
|
+
const Dot = (props) => {
|
|
5860
|
+
const { size = 24, ...rest } = props;
|
|
5861
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor" })));
|
|
5862
|
+
};
|
|
5863
|
+
|
|
5844
5864
|
const Download = (props) => {
|
|
5845
5865
|
const { size = 24, ...rest } = props;
|
|
5846
5866
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M21.2002 19.3501C21.6142 19.3503 21.9502 19.686 21.9502 20.1001C21.9502 20.5142 21.6142 20.8499 21.2002 20.8501H2.7998C2.38568 20.85 2.0498 20.5142 2.0498 20.1001C2.0498 19.6859 2.38568 19.3502 2.7998 19.3501H21.2002Z", fill: "currentColor" }), hAsync("path", { d: "M12 3.1499C12.4142 3.1499 12.7499 3.48577 12.75 3.8999V15.0581L17.4639 10.2329C17.7533 9.93678 18.2281 9.93094 18.5244 10.2202C18.8205 10.5096 18.8254 10.9845 18.5361 11.2808L12.5361 17.4243C12.395 17.5686 12.2018 17.6499 12 17.6499C11.7982 17.6499 11.605 17.5686 11.4639 17.4243L5.46387 11.2808C5.17461 10.9845 5.17951 10.5096 5.47559 10.2202C5.77186 9.93094 6.24673 9.93678 6.53613 10.2329L11.25 15.0581V3.8999C11.2501 3.48577 11.5858 3.1499 12 3.1499Z", fill: "currentColor" })));
|
|
@@ -5901,6 +5921,11 @@ const Inline = (props) => {
|
|
|
5901
5921
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M11.0801 2.0498C11.4941 2.04995 11.83 2.38577 11.8301 2.7998C11.8301 3.21393 11.4942 3.54966 11.0801 3.5498H3.7998C3.66191 3.54994 3.5499 3.6619 3.5498 3.7998V20.2002C3.55001 20.338 3.66197 20.4501 3.7998 20.4502H20.2002C20.338 20.45 20.45 20.338 20.4502 20.2002V12.9199C20.4503 12.5059 20.7862 12.1701 21.2002 12.1699C21.6142 12.1701 21.9501 12.5059 21.9502 12.9199V20.2002C21.95 21.1664 21.1664 21.95 20.2002 21.9502H3.7998C2.83355 21.9501 2.05001 21.1664 2.0498 20.2002V3.7998C2.0499 2.83347 2.83348 2.04994 3.7998 2.0498H11.0801Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.3252 4.66699C19.5765 4.21659 20.0655 4.07962 20.4551 4.17578C20.858 4.27538 21.248 4.65457 21.2051 5.21094L21.1475 5.79199C20.9808 7.18748 20.5611 8.83543 19.5479 10.2197C18.424 11.755 16.6276 12.8864 13.8779 13.0596V15.8457C13.8779 16.7061 12.8828 17.1403 12.2539 16.6279L12.1328 16.5127L7.59082 11.4375C7.25096 11.0578 7.25096 10.4832 7.59082 10.1035L12.1328 5.0293C12.7449 4.34543 13.8779 4.77847 13.8779 5.69629V8.55957C15.0735 8.59246 17.4617 8.00699 19.3252 4.66699ZM9.00684 10.7715L12.3779 14.5381V12.583C12.3781 12.0114 12.8468 11.5923 13.3662 11.5811C15.9616 11.5247 17.4486 10.5489 18.3379 9.33398C18.787 8.72044 19.0992 8.02407 19.3135 7.31152C17.0812 9.91545 14.4914 10.247 13.166 9.9873C12.6634 9.8888 12.3779 9.44604 12.3779 9.01953V7.00488L9.00684 10.7715Z", fill: "currentColor" })));
|
|
5902
5922
|
};
|
|
5903
5923
|
|
|
5924
|
+
const Launcher = (props) => {
|
|
5925
|
+
const { size = 24, ...rest } = props;
|
|
5926
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M5 18C5.55228 18 6 18.4477 6 19V21C6 21.5523 5.55228 22 5 22H3C2.44772 22 2 21.5523 2 21V19C2 18.4477 2.44772 18 3 18H5Z", fill: "currentColor" }), hAsync("path", { d: "M13 18C13.5523 18 14 18.4477 14 19V21C14 21.5523 13.5523 22 13 22H11C10.4477 22 10 21.5523 10 21V19C10 18.4477 10.4477 18 11 18H13Z", fill: "currentColor" }), hAsync("path", { d: "M21 18C21.5523 18 22 18.4477 22 19V21C22 21.5523 21.5523 22 21 22H19C18.4477 22 18 21.5523 18 21V19C18 18.4477 18.4477 18 19 18H21Z", fill: "currentColor" }), hAsync("path", { d: "M5 10C5.55228 10 6 10.4477 6 11V13C6 13.5523 5.55228 14 5 14H3C2.44772 14 2 13.5523 2 13V11C2 10.4477 2.44772 10 3 10H5Z", fill: "currentColor" }), hAsync("path", { d: "M13 10C13.5523 10 14 10.4477 14 11V13C14 13.5523 13.5523 14 13 14H11C10.4477 14 10 13.5523 10 13V11C10 10.4477 10.4477 10 11 10H13Z", fill: "currentColor" }), hAsync("path", { d: "M21 10C21.5523 10 22 10.4477 22 11V13C22 13.5523 21.5523 14 21 14H19C18.4477 14 18 13.5523 18 13V11C18 10.4477 18.4477 10 19 10H21Z", fill: "currentColor" }), hAsync("path", { d: "M5 2C5.55228 2 6 2.44772 6 3V5C6 5.55228 5.55228 6 5 6H3C2.44772 6 2 5.55228 2 5V3C2 2.44772 2.44772 2 3 2H5Z", fill: "currentColor" }), hAsync("path", { d: "M13 2C13.5523 2 14 2.44772 14 3V5C14 5.55228 13.5523 6 13 6H11C10.4477 6 10 5.55228 10 5V3C10 2.44772 10.4477 2 11 2H13Z", fill: "currentColor" }), hAsync("path", { d: "M21 2C21.5523 2 22 2.44772 22 3V5C22 5.55228 21.5523 6 21 6H19C18.4477 6 18 5.55228 18 5V3C18 2.44772 18.4477 2 19 2H21Z", fill: "currentColor" })));
|
|
5927
|
+
};
|
|
5928
|
+
|
|
5904
5929
|
const Line = (props) => {
|
|
5905
5930
|
const { size = 24, ...rest } = props;
|
|
5906
5931
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M4.25 13C4.66421 13 5 13.3358 5 13.75V21.25C5 21.6642 4.66421 22 4.25 22H2.75C2.33579 22 2 21.6642 2 21.25V13.75C2 13.3358 2.33579 13 2.75 13H4.25Z", fill: "currentColor" }), hAsync("path", { d: "M12.75 13C13.1642 13 13.5 13.3358 13.5 13.75V21.25C13.5 21.6642 13.1642 22 12.75 22H11.25C10.8358 22 10.5 21.6642 10.5 21.25V13.75C10.5 13.3358 10.8358 13 11.25 13H12.75Z", fill: "currentColor" }), hAsync("path", { d: "M4.25 2C4.66421 2 5 2.33579 5 2.75V10.25C5 10.6642 4.66421 11 4.25 11H2.75C2.33579 11 2 10.6642 2 10.25V2.75C2 2.33579 2.33579 2 2.75 2H4.25Z", fill: "currentColor" }), hAsync("path", { d: "M12.75 2C13.1642 2 13.5 2.33579 13.5 2.75V10.25C13.5 10.6642 13.1642 11 12.75 11H11.25C10.8358 11 10.5 10.6642 10.5 10.25V2.75C10.5 2.33579 10.8358 2 11.25 2H12.75Z", fill: "currentColor" }), hAsync("path", { d: "M21.25 2C21.6642 2 22 2.33579 22 2.75V10.25C22 10.6642 21.6642 11 21.25 11H19.75C19.3358 11 19 10.6642 19 10.25V2.75C19 2.33579 19.3358 2 19.75 2H21.25Z", fill: "currentColor" })));
|
|
@@ -5921,6 +5946,11 @@ const Minus = (props) => {
|
|
|
5921
5946
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M20 11.25C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H20Z", fill: "currentColor" })));
|
|
5922
5947
|
};
|
|
5923
5948
|
|
|
5949
|
+
const Monitor = (props) => {
|
|
5950
|
+
const { size = 24, ...rest } = props;
|
|
5951
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.9502 14.75C21.9502 15.9925 20.9426 16.9998 19.7002 17L12.75 17L12.75 19H15C15.4142 19 15.75 19.3358 15.75 19.75C15.75 20.1642 15.4142 20.5 15 20.5L8.99997 20.5C8.58576 20.5 8.24997 20.1642 8.24997 19.75C8.24997 19.3358 8.58576 19 8.99997 19H11.25L11.25 17H4.29977C3.05722 16.9999 2.04977 15.9926 2.04977 14.75L2.04977 5.75C2.04978 4.50742 3.05722 3.5001 4.29977 3.5L19.7002 3.5C20.9426 3.50021 21.9502 4.50749 21.9502 5.75L21.9502 14.75ZM20.4502 5.75C20.4502 5.33592 20.1142 5.00021 19.7002 5L4.29977 5C3.88565 5.0001 3.54978 5.33585 3.54977 5.75L3.54977 14.75C3.54977 15.1642 3.88565 15.4999 4.29977 15.5L19.7002 15.5C20.1142 15.4998 20.4502 15.1641 20.4502 14.75L20.4502 5.75Z", fill: "currentColor" })));
|
|
5952
|
+
};
|
|
5953
|
+
|
|
5924
5954
|
const New = (props) => {
|
|
5925
5955
|
const { size = 24, ...rest } = props;
|
|
5926
5956
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M20 2C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4C2 2.89543 2.89543 2 4 2H20ZM7.5 6.75V17.25H9.99902V11.082H10.0713L14.374 17.25H16.5V6.75H14.0059V12.9072H13.918L9.66211 6.75H7.5Z", fill: "currentColor" })));
|
|
@@ -6001,11 +6031,26 @@ const Setting = (props) => {
|
|
|
6001
6031
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M13.1858 1C13.5092 1 13.7985 1.2013 13.9074 1.5027L14.6839 3.65537C14.9622 3.72467 15.2009 3.79397 15.4033 3.86657C15.6244 3.94577 15.9093 4.06567 16.2613 4.22956L18.0696 3.27257C18.2172 3.19437 18.3862 3.16614 18.5512 3.19213C18.7162 3.21811 18.8683 3.2969 18.9848 3.41667L20.5753 5.06115C20.7865 5.28005 20.8459 5.60015 20.7271 5.87954L19.8791 7.86722C20.0198 8.12572 20.132 8.34681 20.2178 8.53161C20.3102 8.73291 20.4246 9.01011 20.561 9.3676L22.5377 10.2146C22.8346 10.3411 23.0183 10.6381 22.9985 10.956L22.8533 13.2385C22.8434 13.3867 22.7902 13.5288 22.7002 13.6471C22.6103 13.7654 22.4876 13.8547 22.3474 13.9039L20.4752 14.5694C20.4213 14.8279 20.3652 15.049 20.3058 15.236C20.21 15.5248 20.1006 15.8089 19.978 16.0874L20.9185 18.1664C20.9849 18.3125 21.0028 18.476 20.9695 18.6329C20.9363 18.7899 20.8536 18.9321 20.7337 19.0387L18.9452 20.6359C18.8274 20.7406 18.6804 20.8069 18.5239 20.8257C18.3674 20.8446 18.2089 20.8152 18.0696 20.7415L16.2261 19.7647C15.9377 19.9174 15.6401 20.0522 15.3351 20.1684L14.5299 20.4698L13.815 22.4497C13.762 22.5947 13.6664 22.7203 13.5408 22.81C13.4151 22.8998 13.2653 22.9494 13.111 22.9524L11.0211 22.9997C10.8626 23.0039 10.7068 22.9588 10.575 22.8708C10.4432 22.7827 10.342 22.656 10.2852 22.508L9.44261 20.2784C9.15513 20.1801 8.8705 20.0737 8.58904 19.9594C8.35884 19.8597 8.13211 19.7522 7.90927 19.6371L5.81934 20.5303C5.68163 20.589 5.52981 20.6065 5.38237 20.5805C5.23492 20.5545 5.09821 20.4862 4.98887 20.384L3.44232 18.9331C3.32718 18.8255 3.24876 18.6845 3.21817 18.5299C3.18757 18.3754 3.20634 18.2151 3.27183 18.0718L4.17049 16.1138C4.05098 15.8819 3.94017 15.6456 3.83831 15.4054C3.7194 15.1114 3.60936 14.8139 3.50832 14.5133L1.53939 13.9138C1.37934 13.8655 1.23975 13.7656 1.14229 13.6298C1.04483 13.4939 0.99495 13.3297 1.0004 13.1626L1.0774 11.0495C1.08288 10.9116 1.12595 10.7779 1.20195 10.6627C1.27795 10.5475 1.38398 10.4553 1.50859 10.3961L3.57431 9.4039C3.67001 9.053 3.75361 8.78021 3.82731 8.58111C3.93108 8.31518 4.04632 8.05387 4.17269 7.79792L3.27733 5.90594C3.20938 5.76227 3.18874 5.60074 3.21839 5.44459C3.24804 5.28845 3.32644 5.14573 3.44232 5.03695L4.98667 3.57837C5.09493 3.47626 5.23038 3.40761 5.37674 3.38068C5.5231 3.35375 5.67412 3.36969 5.81164 3.42657L7.89937 4.28896C8.13036 4.13496 8.33935 4.01067 8.52854 3.91057C8.75404 3.79067 9.05543 3.66527 9.43491 3.52997L10.1609 1.5049C10.2146 1.35669 10.3127 1.22867 10.4418 1.1383C10.571 1.04794 10.7248 0.999641 10.8825 1H13.1858ZM12.0264 8.72081C10.1928 8.72081 8.70674 10.1893 8.70674 12.0021C8.70674 13.8148 10.1928 15.2844 12.0264 15.2844C13.859 15.2844 15.345 13.8148 15.345 12.0021C15.345 10.1893 13.8601 8.72081 12.0264 8.72081Z", fill: "currentColor" })));
|
|
6002
6032
|
};
|
|
6003
6033
|
|
|
6034
|
+
const Shield = (props) => {
|
|
6035
|
+
const { size = 24, ...rest } = props;
|
|
6036
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M16.2549 9.3486C16.5477 9.05582 17.0225 9.05602 17.3154 9.3486C17.6083 9.64149 17.6083 10.1163 17.3154 10.4091L12.0859 15.6386C11.6954 16.0291 11.0624 16.0291 10.6719 15.6386L7.46973 12.4365C7.17728 12.1436 7.17703 11.6687 7.46973 11.3759C7.76264 11.0833 8.23844 11.0831 8.53125 11.3759L11.3789 14.2246L16.2549 9.3486Z", fill: "currentColor" }), hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.501 1.4404C11.8718 1.27889 12.3024 1.30624 12.6533 1.52145L20.1533 6.12204C20.5238 6.34931 20.7499 6.75284 20.75 7.18747V10.5302C20.75 11.8881 20.6005 13.3051 20.0645 14.6425C19.5554 15.9124 18.7155 17.6378 17.4502 19.1894C16.1835 20.7426 14.4592 22.1581 12.1816 22.7275L12 22.7734L11.8184 22.7275C9.54076 22.1581 7.81646 20.7426 6.5498 19.1894C5.2845 17.6378 4.4446 15.9124 3.93555 14.6425C3.39949 13.3051 3.25 11.8881 3.25 10.5302V7.18747C3.25007 6.75284 3.47619 6.34931 3.84668 6.12204L11.3467 1.52145L11.501 1.4404ZM4.75 7.32712V10.5302C4.75 11.7887 4.89082 12.9929 5.32812 14.084C5.80497 15.2735 6.57635 16.8486 7.71191 18.2412C8.80911 19.5866 10.2182 20.7255 12 21.2216C13.7818 20.7255 15.1909 19.5866 16.2881 18.2412C17.4236 16.8486 18.195 15.2735 18.6719 14.084C19.1092 12.9929 19.25 11.7887 19.25 10.5302V7.32712L12 2.87985L4.75 7.32712Z", fill: "currentColor" })));
|
|
6037
|
+
};
|
|
6038
|
+
|
|
6039
|
+
const Sidebar = (props) => {
|
|
6040
|
+
const { size = 24, ...rest } = props;
|
|
6041
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19 3C20.6569 3 22 4.34315 22 6V18L21.9961 18.1543C21.9184 19.6883 20.6883 20.9184 19.1543 20.9961L19 21H5L4.8457 20.9961C3.31166 20.9184 2.08163 19.6883 2.00391 18.1543L2 18V6C2 4.34315 3.34315 3 5 3H19ZM5 4.5C4.17157 4.5 3.5 5.17157 3.5 6V18C3.5 18.8284 4.17157 19.5 5 19.5H8V4.5H5ZM9.5 19.5H19C19.8284 19.5 20.5 18.8284 20.5 18V6C20.5 5.17157 19.8284 4.5 19 4.5H9.5V19.5Z", fill: "currentColor" })));
|
|
6042
|
+
};
|
|
6043
|
+
|
|
6004
6044
|
const Star = (props) => {
|
|
6005
6045
|
const { size = 24, ...rest } = props;
|
|
6006
6046
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M12.2607 1C12.3943 1 12.5045 1.10494 12.5107 1.23828L12.9258 10.3945L21.0645 6.17676C21.1829 6.11552 21.3286 6.1581 21.3955 6.27344L21.6572 6.72656C21.7236 6.84217 21.6875 6.98956 21.5752 7.06152L13.8535 11.999L21.5752 16.9385C21.6874 17.0104 21.7236 17.1578 21.6572 17.2734L21.3955 17.7266C21.3286 17.8419 21.1829 17.8844 21.0645 17.8232L12.9268 13.6055L12.5107 22.7617C12.5045 22.8951 12.3943 23 12.2607 23H11.7393C11.6057 23 11.4955 22.8951 11.4893 22.7617L11.0723 13.6055L2.93555 17.8232C2.81708 17.8844 2.67137 17.8419 2.60449 17.7266L2.34278 17.2734C2.2764 17.1578 2.31256 17.0104 2.42481 16.9385L10.1455 11.999L2.42481 7.06152C2.31253 6.98956 2.27637 6.84217 2.34278 6.72656L2.60449 6.27344C2.67139 6.1581 2.81708 6.11553 2.93555 6.17676L11.0723 10.3936L11.4893 1.23828C11.4955 1.10494 11.6057 1 11.7393 1H12.2607Z", fill: "currentColor" })));
|
|
6007
6047
|
};
|
|
6008
6048
|
|
|
6049
|
+
const Store = (props) => {
|
|
6050
|
+
const { size = 24, ...rest } = props;
|
|
6051
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.3817 6C19.0445 6 19.6507 6.37497 19.9472 6.96777L21.9472 10.9678C22.5286 12.1313 21.6825 13.5 20.3817 13.5H19.7499V19.75C19.7499 20.1642 19.4141 20.5 18.9999 20.5C18.5858 20.4998 18.2499 20.1641 18.2499 19.75V13.5H13.7499V18.75C13.7499 19.7165 12.9664 20.5 11.9999 20.5H5.99991C5.03355 20.4998 4.24991 19.7164 4.24991 18.75V13.5H3.61807C2.3175 13.4998 1.47136 12.1312 2.05264 10.9678L4.05264 6.96777C4.34903 6.375 4.95534 6.00012 5.61807 6H18.3817ZM5.74991 18.75C5.74991 18.888 5.86198 18.9998 5.99991 19H11.9999C12.138 19 12.2499 18.8881 12.2499 18.75V13.5H5.74991V18.75ZM5.61807 7.5C5.5235 7.50012 5.43674 7.55407 5.39444 7.63867L3.39444 11.6387C3.31183 11.8047 3.43258 11.9998 3.61807 12H20.3817C20.5675 12 20.6882 11.8048 20.6054 11.6387L18.6054 7.63867C18.563 7.55405 18.4764 7.5 18.3817 7.5H5.61807Z", fill: "currentColor" }), hAsync("path", { d: "M17.9999 4C18.4141 4 18.7499 4.33579 18.7499 4.75C18.7499 5.16421 18.4141 5.5 17.9999 5.5H5.99991C5.58584 5.49983 5.24991 5.16411 5.24991 4.75C5.24991 4.33589 5.58584 4.00017 5.99991 4H17.9999Z", fill: "currentColor" })));
|
|
6052
|
+
};
|
|
6053
|
+
|
|
6009
6054
|
const Synchronize = (props) => {
|
|
6010
6055
|
const { size = 24, ...rest } = props;
|
|
6011
6056
|
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M3.30769 10.8175C3.57806 10.5965 3.96606 10.5921 4.24226 10.8057L6.33991 12.4278C6.66706 12.6813 6.7261 13.1521 6.47272 13.4796C6.21918 13.8067 5.74841 13.8675 5.42097 13.6143L4.62116 12.9952C4.92795 14.8404 5.99601 17.3161 8.753 18.6602C12.4087 20.4424 15.8051 18.6615 17.0333 17.5479C17.34 17.2701 17.8136 17.2925 18.0919 17.5987C18.3701 17.9055 18.347 18.381 18.0401 18.6592C16.5549 20.0056 12.5074 22.16 8.09479 20.0089C4.62913 18.3191 3.39551 15.1712 3.09675 12.9298L2.27546 13.6016C1.95491 13.8639 1.48116 13.8165 1.21882 13.4962C0.956723 13.1758 1.00408 12.7028 1.32429 12.4405L3.30769 10.8175Z", fill: "currentColor" }), hAsync("path", { d: "M5.96003 5.34089C7.44498 3.99457 11.4916 1.83985 15.9044 3.99128C19.3702 5.68114 20.6036 8.82876 20.9024 11.0704L21.7247 10.3985C22.0452 10.1363 22.518 10.1837 22.7803 10.504C23.0426 10.8245 22.9953 11.2973 22.6749 11.5596L20.6915 13.1827C20.4211 13.4035 20.034 13.408 19.7579 13.1944L17.6602 11.5723C17.333 11.3189 17.2732 10.8481 17.5264 10.5206C17.78 10.1931 18.2516 10.1324 18.5792 10.3858L19.379 11.005C19.0722 9.15965 18.0042 6.68321 15.2471 5.33893C11.5915 3.55662 8.19499 5.33864 6.96687 6.45222C6.66013 6.72978 6.1864 6.70667 5.90827 6.40046C5.63009 6.09371 5.65335 5.61916 5.96003 5.34089Z", fill: "currentColor" })));
|
|
@@ -6068,6 +6113,7 @@ const Icons = {
|
|
|
6068
6113
|
attachFile: AttachFile,
|
|
6069
6114
|
barcode: Barcode,
|
|
6070
6115
|
bell: Bell,
|
|
6116
|
+
bill: Bill,
|
|
6071
6117
|
board: Board,
|
|
6072
6118
|
box: Box,
|
|
6073
6119
|
camera: Camera,
|
|
@@ -6092,8 +6138,11 @@ const Icons = {
|
|
|
6092
6138
|
clockOutline: ClockOutline,
|
|
6093
6139
|
close: Close,
|
|
6094
6140
|
copy: Copy,
|
|
6141
|
+
coupon: Coupon,
|
|
6095
6142
|
dashboard: Dashboard,
|
|
6096
6143
|
date: DateIcon,
|
|
6144
|
+
delete: Delete,
|
|
6145
|
+
dot: Dot,
|
|
6097
6146
|
download: Download,
|
|
6098
6147
|
drag: Drag,
|
|
6099
6148
|
edit: Edit,
|
|
@@ -6106,10 +6155,12 @@ const Icons = {
|
|
|
6106
6155
|
imageFill: ImageFill,
|
|
6107
6156
|
imageOutline: ImageOutline,
|
|
6108
6157
|
inline: Inline,
|
|
6158
|
+
launcher: Launcher,
|
|
6109
6159
|
line: Line,
|
|
6110
6160
|
location: Location,
|
|
6111
6161
|
logout: Logout,
|
|
6112
6162
|
minus: Minus,
|
|
6163
|
+
monitor: Monitor,
|
|
6113
6164
|
new: New,
|
|
6114
6165
|
notificationFill: NotificationFill,
|
|
6115
6166
|
notificationOutline: NotificationOutline,
|
|
@@ -6126,7 +6177,10 @@ const Icons = {
|
|
|
6126
6177
|
save: Save,
|
|
6127
6178
|
search: Search,
|
|
6128
6179
|
setting: Setting,
|
|
6180
|
+
shield: Shield,
|
|
6181
|
+
sidebar: Sidebar,
|
|
6129
6182
|
star: Star,
|
|
6183
|
+
store: Store,
|
|
6130
6184
|
synchronize: Synchronize,
|
|
6131
6185
|
updown: Updown,
|
|
6132
6186
|
user: User,
|
|
@@ -7813,6 +7867,98 @@ var chipInputTokens = {
|
|
|
7813
7867
|
chipInput: chipInput
|
|
7814
7868
|
};
|
|
7815
7869
|
|
|
7870
|
+
const typography = {
|
|
7871
|
+
feedback: {
|
|
7872
|
+
sm: {
|
|
7873
|
+
regular: {
|
|
7874
|
+
fontSize: "12",
|
|
7875
|
+
fontWeight: "400"}}}};
|
|
7876
|
+
const color = {
|
|
7877
|
+
bg: {
|
|
7878
|
+
frame: "#FFFFFF",
|
|
7879
|
+
accent: {
|
|
7880
|
+
"default": "#0075FF"}},
|
|
7881
|
+
fg: {
|
|
7882
|
+
primary: "#222222",
|
|
7883
|
+
secondary: "#555555",
|
|
7884
|
+
tertiary: "#888888",
|
|
7885
|
+
success: "#00973C",
|
|
7886
|
+
accent: "#0075FF",
|
|
7887
|
+
inverse: "#FFFFFF"
|
|
7888
|
+
},
|
|
7889
|
+
divider: {
|
|
7890
|
+
"default": "#E1E1E1"
|
|
7891
|
+
},
|
|
7892
|
+
blue: {
|
|
7893
|
+
strong: "#0075FF"},
|
|
7894
|
+
darkblue: {
|
|
7895
|
+
strong: "#006AC1"},
|
|
7896
|
+
grey: {
|
|
7897
|
+
strong: "#737373"}};
|
|
7898
|
+
const shadow = {
|
|
7899
|
+
spread: {
|
|
7900
|
+
md: {
|
|
7901
|
+
x: "0",
|
|
7902
|
+
y: "0",
|
|
7903
|
+
blur: "24",
|
|
7904
|
+
spread: "0",
|
|
7905
|
+
color: "rgba(34,34,34,0.2)"}
|
|
7906
|
+
}};
|
|
7907
|
+
var systemTokens = {
|
|
7908
|
+
typography: typography,
|
|
7909
|
+
color: color,
|
|
7910
|
+
shadow: shadow
|
|
7911
|
+
};
|
|
7912
|
+
|
|
7913
|
+
const listBox = {
|
|
7914
|
+
radius: "4"};
|
|
7915
|
+
var listBoxTokens = {
|
|
7916
|
+
listBox: listBox
|
|
7917
|
+
};
|
|
7918
|
+
|
|
7919
|
+
const listItem$1 = {
|
|
7920
|
+
paddingY: "4",
|
|
7921
|
+
paddingRight: "12",
|
|
7922
|
+
gap: "8",
|
|
7923
|
+
paddingLeft: {
|
|
7924
|
+
depth1: "12",
|
|
7925
|
+
depth2: "20",
|
|
7926
|
+
depth3: "28"
|
|
7927
|
+
},
|
|
7928
|
+
typography: {
|
|
7929
|
+
"default": {
|
|
7930
|
+
fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
|
|
7931
|
+
fontWeight: "400",
|
|
7932
|
+
fontSize: "12",
|
|
7933
|
+
lineHeight: "20"},
|
|
7934
|
+
selected: {
|
|
7935
|
+
fontWeight: "700"}
|
|
7936
|
+
},
|
|
7937
|
+
bg: {
|
|
7938
|
+
"default": "#FFFFFF",
|
|
7939
|
+
hover: "#0075FF"
|
|
7940
|
+
},
|
|
7941
|
+
content: {
|
|
7942
|
+
"default": "#222222",
|
|
7943
|
+
hover: "#FFFFFF",
|
|
7944
|
+
disabled: "#888888",
|
|
7945
|
+
selected: "#0075FF"
|
|
7946
|
+
},
|
|
7947
|
+
depth1: {
|
|
7948
|
+
bg: {
|
|
7949
|
+
"default": "#EFF6FF"},
|
|
7950
|
+
border: {
|
|
7951
|
+
color: "#E1E1E1",
|
|
7952
|
+
width: "1"
|
|
7953
|
+
}},
|
|
7954
|
+
depth2: {
|
|
7955
|
+
middle: {
|
|
7956
|
+
bg: "#F6F6F6"}
|
|
7957
|
+
}};
|
|
7958
|
+
var listItemTokens = {
|
|
7959
|
+
listItem: listItem$1
|
|
7960
|
+
};
|
|
7961
|
+
|
|
7816
7962
|
const sm$4 = chipInputTokens.chipInput.sm;
|
|
7817
7963
|
const md$4 = chipInputTokens.chipInput.md;
|
|
7818
7964
|
const CHIP_INPUT_SIZE_MAP = {
|
|
@@ -7850,8 +7996,34 @@ const CHIP_INPUT_RESET = {
|
|
|
7850
7996
|
iconColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
|
|
7851
7997
|
labelColor: '#555555', // TODO: 토큰 반영 후 교체 (grey_70)
|
|
7852
7998
|
};
|
|
7853
|
-
|
|
7854
|
-
const
|
|
7999
|
+
const feedbackSm = systemTokens.typography.feedback.sm.regular;
|
|
8000
|
+
const CHIP_INPUT_MAX_COUNT = {
|
|
8001
|
+
fontSize: `${feedbackSm.fontSize}px`,
|
|
8002
|
+
fontWeight: `${feedbackSm.fontWeight}`,
|
|
8003
|
+
color: chipInputTokens.chipInput.text.placeholder,
|
|
8004
|
+
};
|
|
8005
|
+
const listItem = listItemTokens.listItem;
|
|
8006
|
+
const CHIP_INPUT_SUGGESTIONS = {
|
|
8007
|
+
radius: `${listBoxTokens.listBox.radius}px`,
|
|
8008
|
+
maxHeight: '260px',
|
|
8009
|
+
itemPaddingY: `${listItem.paddingY}px`,
|
|
8010
|
+
itemPaddingX: `${listItem.paddingLeft.depth1}px`,
|
|
8011
|
+
itemPaddingRight: `${listItem.paddingRight}px`,
|
|
8012
|
+
itemGap: `${listItem.gap}px`,
|
|
8013
|
+
itemFontSize: `${listItem.typography.default.fontSize}px`,
|
|
8014
|
+
itemFontWeight: listItem.typography.default.fontWeight,
|
|
8015
|
+
itemFontWeightSelected: listItem.typography.selected.fontWeight,
|
|
8016
|
+
itemLineHeight: `${listItem.typography.default.lineHeight}px`,
|
|
8017
|
+
itemFontFamily: listItem.typography.default.fontFamily,
|
|
8018
|
+
itemColor: listItem.content.default,
|
|
8019
|
+
itemColorHover: listItem.content.hover,
|
|
8020
|
+
itemBgHover: listItem.bg.hover,
|
|
8021
|
+
emptyColor: '#888888',
|
|
8022
|
+
emptyFontSize: '12px',
|
|
8023
|
+
emptyLineHeight: '20px',
|
|
8024
|
+
};
|
|
8025
|
+
|
|
8026
|
+
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
7855
8027
|
|
|
7856
8028
|
class SdChipInput {
|
|
7857
8029
|
constructor(hostRef) {
|
|
@@ -7859,7 +8031,9 @@ class SdChipInput {
|
|
|
7859
8031
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
7860
8032
|
this.focusEvent = createEvent(this, "sdFocus", 7);
|
|
7861
8033
|
this.blurEvent = createEvent(this, "sdBlur", 7);
|
|
8034
|
+
this.inputEvent = createEvent(this, "sdInput", 7);
|
|
7862
8035
|
}
|
|
8036
|
+
static SUGGESTIONS_VIEWPORT_PADDING = 8;
|
|
7863
8037
|
get host() { return getElement(this); }
|
|
7864
8038
|
values = [];
|
|
7865
8039
|
errors = [];
|
|
@@ -7871,6 +8045,12 @@ class SdChipInput {
|
|
|
7871
8045
|
rules = [];
|
|
7872
8046
|
error = false;
|
|
7873
8047
|
useReset = false;
|
|
8048
|
+
maxCount;
|
|
8049
|
+
duplicateLabel;
|
|
8050
|
+
suggestions = [];
|
|
8051
|
+
loadingSuggestions = false;
|
|
8052
|
+
recommendedItems = [];
|
|
8053
|
+
loadingRecommendedItems = false;
|
|
7874
8054
|
// sd-field props
|
|
7875
8055
|
label = '';
|
|
7876
8056
|
labelWidth = '';
|
|
@@ -7886,8 +8066,12 @@ class SdChipInput {
|
|
|
7886
8066
|
focused = false;
|
|
7887
8067
|
hovered = false;
|
|
7888
8068
|
inputValue = '';
|
|
8069
|
+
activeSuggestionIndex = -1;
|
|
8070
|
+
suppressSuggestions = false;
|
|
8071
|
+
suppressRecommendations = false;
|
|
7889
8072
|
inputEl;
|
|
7890
8073
|
formField;
|
|
8074
|
+
chipInputRef;
|
|
7891
8075
|
get value() {
|
|
7892
8076
|
return this.internalValues;
|
|
7893
8077
|
}
|
|
@@ -7899,6 +8083,22 @@ class SdChipInput {
|
|
|
7899
8083
|
this.internalErrors = [...newErrors];
|
|
7900
8084
|
}
|
|
7901
8085
|
}
|
|
8086
|
+
internalValuesChanged_validate() {
|
|
8087
|
+
if (typeof this.formField?.sdValidate === 'function') {
|
|
8088
|
+
this.formField.sdValidate();
|
|
8089
|
+
}
|
|
8090
|
+
}
|
|
8091
|
+
suggestionsChanged(newVal) {
|
|
8092
|
+
if (!Array.isArray(newVal))
|
|
8093
|
+
this.suggestions = [];
|
|
8094
|
+
this.activeSuggestionIndex = -1;
|
|
8095
|
+
this.suppressSuggestions = false;
|
|
8096
|
+
}
|
|
8097
|
+
recommendedItemsChanged(newVal) {
|
|
8098
|
+
if (!Array.isArray(newVal))
|
|
8099
|
+
this.recommendedItems = [];
|
|
8100
|
+
this.activeSuggestionIndex = -1;
|
|
8101
|
+
}
|
|
7902
8102
|
componentWillLoad() {
|
|
7903
8103
|
this.internalValues = Array.isArray(this.values) ? [...this.values] : [];
|
|
7904
8104
|
if (Array.isArray(this.errors)) {
|
|
@@ -7906,7 +8106,13 @@ class SdChipInput {
|
|
|
7906
8106
|
}
|
|
7907
8107
|
this.inputValue = this.inputValue ?? '';
|
|
7908
8108
|
}
|
|
8109
|
+
isDuplicateChip(index) {
|
|
8110
|
+
const value = this.internalValues[index];
|
|
8111
|
+
return this.internalValues.indexOf(value) !== index;
|
|
8112
|
+
}
|
|
7909
8113
|
getChipError(index) {
|
|
8114
|
+
if (this.isDuplicateChip(index))
|
|
8115
|
+
return true;
|
|
7910
8116
|
if (typeof this.errors === 'function') {
|
|
7911
8117
|
return this.errors(this.internalValues?.[index] ?? '');
|
|
7912
8118
|
}
|
|
@@ -7923,6 +8129,7 @@ class SdChipInput {
|
|
|
7923
8129
|
update;
|
|
7924
8130
|
focusEvent;
|
|
7925
8131
|
blurEvent;
|
|
8132
|
+
inputEvent;
|
|
7926
8133
|
async sdValidate() {
|
|
7927
8134
|
return this.formField?.sdValidate();
|
|
7928
8135
|
}
|
|
@@ -7935,6 +8142,31 @@ class SdChipInput {
|
|
|
7935
8142
|
async sdFocus() {
|
|
7936
8143
|
return this.formField?.sdFocus();
|
|
7937
8144
|
}
|
|
8145
|
+
addChip = (value) => {
|
|
8146
|
+
if (this.maxCount != null && this.internalValues.length >= this.maxCount)
|
|
8147
|
+
return;
|
|
8148
|
+
const next = [...this.internalValues, value];
|
|
8149
|
+
this.internalValues = next;
|
|
8150
|
+
this.values = next;
|
|
8151
|
+
if (Array.isArray(this.errors)) {
|
|
8152
|
+
const nextErrors = [...this.internalErrors, false];
|
|
8153
|
+
this.internalErrors = nextErrors;
|
|
8154
|
+
this.errors = nextErrors;
|
|
8155
|
+
}
|
|
8156
|
+
if (Array.isArray(this.disabledChips)) {
|
|
8157
|
+
this.disabledChips = [...this.disabledChips, false];
|
|
8158
|
+
}
|
|
8159
|
+
if (this.inputEl != null) {
|
|
8160
|
+
this.inputEl.value = '';
|
|
8161
|
+
}
|
|
8162
|
+
this.inputValue = '';
|
|
8163
|
+
this.activeSuggestionIndex = -1;
|
|
8164
|
+
this.suppressSuggestions = true;
|
|
8165
|
+
this.update.emit(next);
|
|
8166
|
+
this.inputEvent.emit('');
|
|
8167
|
+
this.inputEl?.focus();
|
|
8168
|
+
this.suppressRecommendations = true;
|
|
8169
|
+
};
|
|
7938
8170
|
handleChipRemove = (index) => {
|
|
7939
8171
|
const next = this.internalValues.filter((_, i) => i !== index);
|
|
7940
8172
|
this.internalValues = next;
|
|
@@ -7948,26 +8180,54 @@ class SdChipInput {
|
|
|
7948
8180
|
this.disabledChips = this.disabledChips.filter((_, i) => i !== index);
|
|
7949
8181
|
}
|
|
7950
8182
|
this.update.emit(next);
|
|
8183
|
+
// .focus()는 동기 실행 → handleFocus가 suppressRecommendations=false로 리셋하므로 이후 덮어씀
|
|
7951
8184
|
this.inputEl?.focus();
|
|
8185
|
+
this.suppressRecommendations = true;
|
|
7952
8186
|
};
|
|
7953
8187
|
handleKeyDown = (event) => {
|
|
7954
8188
|
const input = event.target;
|
|
7955
|
-
|
|
7956
|
-
|
|
7957
|
-
|
|
7958
|
-
this.
|
|
7959
|
-
this.
|
|
7960
|
-
|
|
7961
|
-
|
|
7962
|
-
|
|
7963
|
-
|
|
8189
|
+
const suggestions = this.suggestions ?? [];
|
|
8190
|
+
const recommendedItems = this.recommendedItems ?? [];
|
|
8191
|
+
const showAutocomplete = this.focused &&
|
|
8192
|
+
this.inputValue !== '' &&
|
|
8193
|
+
!this.suppressSuggestions &&
|
|
8194
|
+
(suggestions.length > 0 || this.loadingSuggestions);
|
|
8195
|
+
const showRecommendations = this.focused &&
|
|
8196
|
+
this.inputValue === '' &&
|
|
8197
|
+
!this.suppressRecommendations &&
|
|
8198
|
+
(recommendedItems.length > 0 || this.loadingRecommendedItems);
|
|
8199
|
+
const showDropdown = showAutocomplete || showRecommendations;
|
|
8200
|
+
const activeItems = showAutocomplete ? suggestions : recommendedItems;
|
|
8201
|
+
if (showDropdown) {
|
|
8202
|
+
if (event.key === 'ArrowDown') {
|
|
8203
|
+
event.preventDefault();
|
|
8204
|
+
this.activeSuggestionIndex = Math.min(this.activeSuggestionIndex + 1, activeItems.length - 1);
|
|
8205
|
+
return;
|
|
7964
8206
|
}
|
|
7965
|
-
if (
|
|
7966
|
-
|
|
8207
|
+
if (event.key === 'ArrowUp') {
|
|
8208
|
+
event.preventDefault();
|
|
8209
|
+
this.activeSuggestionIndex = Math.max(this.activeSuggestionIndex - 1, -1);
|
|
8210
|
+
return;
|
|
7967
8211
|
}
|
|
7968
|
-
|
|
7969
|
-
|
|
7970
|
-
|
|
8212
|
+
if (event.key === 'Escape') {
|
|
8213
|
+
if (showAutocomplete)
|
|
8214
|
+
this.suppressSuggestions = true;
|
|
8215
|
+
if (showRecommendations)
|
|
8216
|
+
this.suppressRecommendations = true;
|
|
8217
|
+
this.activeSuggestionIndex = -1;
|
|
8218
|
+
return;
|
|
8219
|
+
}
|
|
8220
|
+
if (event.key === 'Enter' && this.activeSuggestionIndex >= 0) {
|
|
8221
|
+
event.preventDefault();
|
|
8222
|
+
this.addChip(activeItems[this.activeSuggestionIndex]);
|
|
8223
|
+
return;
|
|
8224
|
+
}
|
|
8225
|
+
}
|
|
8226
|
+
if (event.key === 'Enter' && !event.isComposing && input.value.trim() !== '') {
|
|
8227
|
+
if (this.maxCount != null && this.internalValues.length >= this.maxCount)
|
|
8228
|
+
return;
|
|
8229
|
+
event.preventDefault();
|
|
8230
|
+
this.addChip(input.value.trim());
|
|
7971
8231
|
}
|
|
7972
8232
|
else if (event.key === 'Backspace' && input.value === '' && this.internalValues.length > 0) {
|
|
7973
8233
|
if (this.getChipDisabled(this.internalValues.length - 1))
|
|
@@ -7988,16 +8248,35 @@ class SdChipInput {
|
|
|
7988
8248
|
}
|
|
7989
8249
|
};
|
|
7990
8250
|
handleInput = (event) => {
|
|
7991
|
-
|
|
8251
|
+
const value = event.target.value;
|
|
8252
|
+
const wasEmpty = this.inputValue === '';
|
|
8253
|
+
const isEmpty = value === '';
|
|
8254
|
+
if (wasEmpty !== isEmpty) {
|
|
8255
|
+
this.activeSuggestionIndex = -1;
|
|
8256
|
+
if (isEmpty) {
|
|
8257
|
+
this.suppressRecommendations = false;
|
|
8258
|
+
}
|
|
8259
|
+
}
|
|
8260
|
+
this.inputValue = value;
|
|
8261
|
+
this.suppressSuggestions = false;
|
|
8262
|
+
this.inputEvent.emit(value);
|
|
7992
8263
|
};
|
|
7993
8264
|
handleFocus = () => {
|
|
7994
8265
|
this.focused = true;
|
|
8266
|
+
this.suppressRecommendations = false;
|
|
7995
8267
|
this.focusEvent.emit();
|
|
7996
8268
|
};
|
|
7997
8269
|
handleBlur = () => {
|
|
7998
8270
|
this.focused = false;
|
|
8271
|
+
this.activeSuggestionIndex = -1;
|
|
7999
8272
|
this.blurEvent.emit();
|
|
8000
8273
|
};
|
|
8274
|
+
closeSuggestions = () => {
|
|
8275
|
+
this.focused = false;
|
|
8276
|
+
this.activeSuggestionIndex = -1;
|
|
8277
|
+
this.suppressSuggestions = true;
|
|
8278
|
+
this.suppressRecommendations = true;
|
|
8279
|
+
};
|
|
8001
8280
|
handleContainerClick = () => {
|
|
8002
8281
|
if (!this.disabled) {
|
|
8003
8282
|
this.inputEl?.focus();
|
|
@@ -8027,6 +8306,18 @@ class SdChipInput {
|
|
|
8027
8306
|
this.update.emit(next);
|
|
8028
8307
|
this.inputEl?.focus();
|
|
8029
8308
|
};
|
|
8309
|
+
duplicateRule = () => {
|
|
8310
|
+
const seen = new Set();
|
|
8311
|
+
for (const val of this.internalValues) {
|
|
8312
|
+
if (seen.has(val)) {
|
|
8313
|
+
if (this.duplicateLabel != null && this.duplicateLabel !== '')
|
|
8314
|
+
return `이미 입력된 ${this.duplicateLabel}입니다.`;
|
|
8315
|
+
return '중복된 값이 존재합니다.';
|
|
8316
|
+
}
|
|
8317
|
+
seen.add(val);
|
|
8318
|
+
}
|
|
8319
|
+
return true;
|
|
8320
|
+
};
|
|
8030
8321
|
render() {
|
|
8031
8322
|
const sizeTokens = CHIP_INPUT_SIZE_MAP[this.size] ?? CHIP_INPUT_SIZE_MAP.sm;
|
|
8032
8323
|
const cssVars = {
|
|
@@ -8054,8 +8345,84 @@ class SdChipInput {
|
|
|
8054
8345
|
'--sd-chip-input-field-font-weight': CHIP_TYPOGRAPHY.focus.fontWeight,
|
|
8055
8346
|
'--sd-chip-input-field-line-height': CHIP_TYPOGRAPHY.focus.lineHeight,
|
|
8056
8347
|
'--sd-chip-input-field-font-family': CHIP_TYPOGRAPHY.focus.fontFamily,
|
|
8348
|
+
'--sd-chip-input-max-count-font-size': CHIP_INPUT_MAX_COUNT.fontSize,
|
|
8349
|
+
'--sd-chip-input-max-count-font-weight': CHIP_INPUT_MAX_COUNT.fontWeight,
|
|
8350
|
+
'--sd-chip-input-max-count-color': CHIP_INPUT_MAX_COUNT.color,
|
|
8351
|
+
'--sd-chip-input-suggestions-radius': CHIP_INPUT_SUGGESTIONS.radius,
|
|
8352
|
+
'--sd-chip-input-suggestions-max-height': CHIP_INPUT_SUGGESTIONS.maxHeight,
|
|
8353
|
+
'--sd-chip-input-suggestion-padding-y': CHIP_INPUT_SUGGESTIONS.itemPaddingY,
|
|
8354
|
+
'--sd-chip-input-suggestion-padding-x': CHIP_INPUT_SUGGESTIONS.itemPaddingX,
|
|
8355
|
+
'--sd-chip-input-suggestion-padding-right': CHIP_INPUT_SUGGESTIONS.itemPaddingRight,
|
|
8356
|
+
'--sd-chip-input-suggestion-gap': CHIP_INPUT_SUGGESTIONS.itemGap,
|
|
8357
|
+
'--sd-chip-input-suggestion-font-size': CHIP_INPUT_SUGGESTIONS.itemFontSize,
|
|
8358
|
+
'--sd-chip-input-suggestion-font-weight': CHIP_INPUT_SUGGESTIONS.itemFontWeight,
|
|
8359
|
+
'--sd-chip-input-suggestion-font-weight-selected': CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
|
|
8360
|
+
'--sd-chip-input-suggestion-line-height': CHIP_INPUT_SUGGESTIONS.itemLineHeight,
|
|
8361
|
+
'--sd-chip-input-suggestion-font-family': CHIP_INPUT_SUGGESTIONS.itemFontFamily,
|
|
8362
|
+
'--sd-chip-input-suggestion-color': CHIP_INPUT_SUGGESTIONS.itemColor,
|
|
8363
|
+
'--sd-chip-input-suggestion-color-hover': CHIP_INPUT_SUGGESTIONS.itemColorHover,
|
|
8364
|
+
'--sd-chip-input-suggestion-bg-hover': CHIP_INPUT_SUGGESTIONS.itemBgHover,
|
|
8365
|
+
'--sd-chip-input-suggestions-empty-color': CHIP_INPUT_SUGGESTIONS.emptyColor,
|
|
8366
|
+
'--sd-chip-input-suggestions-empty-font-size': CHIP_INPUT_SUGGESTIONS.emptyFontSize,
|
|
8367
|
+
'--sd-chip-input-suggestions-empty-line-height': CHIP_INPUT_SUGGESTIONS.emptyLineHeight,
|
|
8368
|
+
};
|
|
8369
|
+
const isMaxReached = this.maxCount != null && this.internalValues.length >= this.maxCount;
|
|
8370
|
+
const showResetArea = (this.useReset && this.internalValues.length > 0) || this.maxCount != null;
|
|
8371
|
+
const suggestions = this.suggestions ?? [];
|
|
8372
|
+
const recommendedItems = this.recommendedItems ?? [];
|
|
8373
|
+
const showAutocomplete = this.focused &&
|
|
8374
|
+
this.inputValue !== '' &&
|
|
8375
|
+
!this.suppressSuggestions &&
|
|
8376
|
+
(suggestions.length > 0 || this.loadingSuggestions);
|
|
8377
|
+
const showRecommendations = this.focused &&
|
|
8378
|
+
this.inputValue === '' &&
|
|
8379
|
+
!this.suppressRecommendations &&
|
|
8380
|
+
(recommendedItems.length > 0 || this.loadingRecommendedItems);
|
|
8381
|
+
const showDropdown = showAutocomplete || showRecommendations;
|
|
8382
|
+
const dropdownItems = showAutocomplete ? suggestions : recommendedItems;
|
|
8383
|
+
const isDropdownLoading = showAutocomplete
|
|
8384
|
+
? this.loadingSuggestions && suggestions.length === 0
|
|
8385
|
+
: this.loadingRecommendedItems && recommendedItems.length === 0;
|
|
8386
|
+
const suggestionBoxStyle = {
|
|
8387
|
+
width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
|
|
8388
|
+
display: 'flex',
|
|
8389
|
+
flexDirection: 'column',
|
|
8390
|
+
boxSizing: 'border-box',
|
|
8391
|
+
background: '#FFFFFF',
|
|
8392
|
+
borderRadius: CHIP_INPUT_SUGGESTIONS.radius,
|
|
8393
|
+
boxShadow: '2px 2px 12px 2px rgba(0, 0, 0, 0.1)',
|
|
8394
|
+
maxHeight: CHIP_INPUT_SUGGESTIONS.maxHeight,
|
|
8395
|
+
minHeight: '0',
|
|
8396
|
+
overflowY: 'auto',
|
|
8397
|
+
overflowX: 'hidden',
|
|
8398
|
+
outline: 'none',
|
|
8057
8399
|
};
|
|
8058
|
-
|
|
8400
|
+
const suggestionItemStyle = {
|
|
8401
|
+
display: 'flex',
|
|
8402
|
+
alignItems: 'center',
|
|
8403
|
+
gap: CHIP_INPUT_SUGGESTIONS.itemGap,
|
|
8404
|
+
padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
|
|
8405
|
+
`${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingX}`,
|
|
8406
|
+
fontSize: CHIP_INPUT_SUGGESTIONS.itemFontSize,
|
|
8407
|
+
lineHeight: CHIP_INPUT_SUGGESTIONS.itemLineHeight,
|
|
8408
|
+
fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeight,
|
|
8409
|
+
fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
|
|
8410
|
+
color: CHIP_INPUT_SUGGESTIONS.itemColor,
|
|
8411
|
+
cursor: 'pointer',
|
|
8412
|
+
userSelect: 'none',
|
|
8413
|
+
whiteSpace: 'nowrap',
|
|
8414
|
+
overflow: 'hidden',
|
|
8415
|
+
textOverflow: 'ellipsis',
|
|
8416
|
+
};
|
|
8417
|
+
const suggestionEmptyStyle = {
|
|
8418
|
+
padding: '12px',
|
|
8419
|
+
textAlign: 'center',
|
|
8420
|
+
fontSize: CHIP_INPUT_SUGGESTIONS.emptyFontSize,
|
|
8421
|
+
lineHeight: CHIP_INPUT_SUGGESTIONS.emptyLineHeight,
|
|
8422
|
+
fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
|
|
8423
|
+
color: CHIP_INPUT_SUGGESTIONS.emptyColor,
|
|
8424
|
+
};
|
|
8425
|
+
return (hAsync("sd-field", { key: '33ae95b159edcb8ee407cf8d311428f419f26e95', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '4f7cd96e4cda06239a7498b8af5f1f3169362028', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: 'dab7b1c520923fdb8cb026141727d8d008b83663', class: {
|
|
8059
8426
|
'sd-chip-input__field': true,
|
|
8060
8427
|
'sd-chip-input__field--filled': this.inputValue !== '',
|
|
8061
8428
|
'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
|
|
@@ -8063,7 +8430,20 @@ class SdChipInput {
|
|
|
8063
8430
|
? this.inputValue
|
|
8064
8431
|
: this.internalValues.length === 0
|
|
8065
8432
|
? this.placeholder
|
|
8066
|
-
: '' }, hAsync("input", { key: '
|
|
8433
|
+
: '' }, hAsync("input", { key: '0aee2d0f30c5af7fccfc2e35e5cee17912712ce9', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (hAsync("div", { key: 'b0b508db62d31f6427d5a2def435fec7fc552e92', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: '30ce147f3bc8070192d95f381fa7f75ad37aab9b', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: '8c43a2920e55a36ff0c0ab952a52ab3df8d3c98d', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '543316c12760fe16449e2b89a9afb8c43344eab5', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (hAsync("sd-portal", { key: 'c402b8336f7d62213f2b803f80f7a2ffabce2c9d', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '4ade4acb535b2db7011699a449afd8c17fe5696d', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: 'e07a447f7c9a9d376680ddb3af6daf58e0d39167', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (hAsync("div", { key: item, class: {
|
|
8434
|
+
'sd-chip-input__suggestion-item': true,
|
|
8435
|
+
'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
|
|
8436
|
+
}, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
|
|
8437
|
+
? {
|
|
8438
|
+
...suggestionItemStyle,
|
|
8439
|
+
background: CHIP_INPUT_SUGGESTIONS.itemBgHover,
|
|
8440
|
+
color: CHIP_INPUT_SUGGESTIONS.itemColorHover,
|
|
8441
|
+
fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
|
|
8442
|
+
}
|
|
8443
|
+
: suggestionItemStyle, onMouseDown: e => {
|
|
8444
|
+
e.preventDefault();
|
|
8445
|
+
this.addChip(item);
|
|
8446
|
+
} }, item)))))))));
|
|
8067
8447
|
}
|
|
8068
8448
|
static get watchers() { return {
|
|
8069
8449
|
"values": [{
|
|
@@ -8071,6 +8451,15 @@ class SdChipInput {
|
|
|
8071
8451
|
}],
|
|
8072
8452
|
"errors": [{
|
|
8073
8453
|
"errorsChanged": 0
|
|
8454
|
+
}],
|
|
8455
|
+
"internalValues": [{
|
|
8456
|
+
"internalValuesChanged_validate": 0
|
|
8457
|
+
}],
|
|
8458
|
+
"suggestions": [{
|
|
8459
|
+
"suggestionsChanged": 0
|
|
8460
|
+
}],
|
|
8461
|
+
"recommendedItems": [{
|
|
8462
|
+
"recommendedItemsChanged": 0
|
|
8074
8463
|
}]
|
|
8075
8464
|
}; }
|
|
8076
8465
|
static get style() { return sdChipInputCss(); }
|
|
@@ -8088,6 +8477,12 @@ class SdChipInput {
|
|
|
8088
8477
|
"rules": [16],
|
|
8089
8478
|
"error": [1028],
|
|
8090
8479
|
"useReset": [4, "use-reset"],
|
|
8480
|
+
"maxCount": [2, "max-count"],
|
|
8481
|
+
"duplicateLabel": [1, "duplicate-label"],
|
|
8482
|
+
"suggestions": [1040],
|
|
8483
|
+
"loadingSuggestions": [4, "loading-suggestions"],
|
|
8484
|
+
"recommendedItems": [1040],
|
|
8485
|
+
"loadingRecommendedItems": [4, "loading-recommended-items"],
|
|
8091
8486
|
"label": [1],
|
|
8092
8487
|
"labelWidth": [8, "label-width"],
|
|
8093
8488
|
"hint": [1],
|
|
@@ -8102,6 +8497,9 @@ class SdChipInput {
|
|
|
8102
8497
|
"focused": [32],
|
|
8103
8498
|
"hovered": [32],
|
|
8104
8499
|
"inputValue": [32],
|
|
8500
|
+
"activeSuggestionIndex": [32],
|
|
8501
|
+
"suppressSuggestions": [32],
|
|
8502
|
+
"suppressRecommendations": [32],
|
|
8105
8503
|
"sdValidate": [64],
|
|
8106
8504
|
"sdReset": [64],
|
|
8107
8505
|
"sdResetValidate": [64],
|
|
@@ -8145,42 +8543,6 @@ var progressTokens = {
|
|
|
8145
8543
|
progress: progress
|
|
8146
8544
|
};
|
|
8147
8545
|
|
|
8148
|
-
const color = {
|
|
8149
|
-
bg: {
|
|
8150
|
-
frame: "#FFFFFF",
|
|
8151
|
-
accent: {
|
|
8152
|
-
"default": "#0075FF"}},
|
|
8153
|
-
fg: {
|
|
8154
|
-
primary: "#222222",
|
|
8155
|
-
secondary: "#555555",
|
|
8156
|
-
tertiary: "#888888",
|
|
8157
|
-
success: "#00973C",
|
|
8158
|
-
accent: "#0075FF",
|
|
8159
|
-
inverse: "#FFFFFF"
|
|
8160
|
-
},
|
|
8161
|
-
divider: {
|
|
8162
|
-
"default": "#E1E1E1"
|
|
8163
|
-
},
|
|
8164
|
-
blue: {
|
|
8165
|
-
strong: "#0075FF"},
|
|
8166
|
-
darkblue: {
|
|
8167
|
-
strong: "#006AC1"},
|
|
8168
|
-
grey: {
|
|
8169
|
-
strong: "#737373"}};
|
|
8170
|
-
const shadow = {
|
|
8171
|
-
spread: {
|
|
8172
|
-
md: {
|
|
8173
|
-
x: "0",
|
|
8174
|
-
y: "0",
|
|
8175
|
-
blur: "24",
|
|
8176
|
-
spread: "0",
|
|
8177
|
-
color: "rgba(34,34,34,0.2)"}
|
|
8178
|
-
}};
|
|
8179
|
-
var systemTokens = {
|
|
8180
|
-
color: color,
|
|
8181
|
-
shadow: shadow
|
|
8182
|
-
};
|
|
8183
|
-
|
|
8184
8546
|
const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
|
|
8185
8547
|
const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.fg.tertiary;
|
|
8186
8548
|
// TODO: error/complete 색상 및 inverse 흰색은 토큰 반영 후 교체
|
|
@@ -8239,7 +8601,7 @@ class SdCircleProgress {
|
|
|
8239
8601
|
}
|
|
8240
8602
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
8241
8603
|
const showPercent = !this.indeterminate;
|
|
8242
|
-
return (hAsync(Host, { key: '
|
|
8604
|
+
return (hAsync(Host, { key: '35b4dc433f5e2bbd02dc3422b286da179472082f', style: hostStyle }, hAsync("svg", { key: 'de1d3e44eccf421491a1107ba234e1562917945b', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: 'b0a54a2e155222a416a6bdcb75f4fe54d9de8270', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '6bc314b3fce758d41a3499e9d87b7158b15777a5', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '16ec46b178d5f2f2f5ad245703c2f4362b8df261', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'c199799d2466c75f91f1bc1f20fdb7e71c64ba0e', class: "sd-circle-progress__label" }, this.label)));
|
|
8243
8605
|
}
|
|
8244
8606
|
static get style() { return sdCircleProgressCss(); }
|
|
8245
8607
|
static get cmpMeta() { return {
|
|
@@ -8355,9 +8717,9 @@ class SdConfirmModal {
|
|
|
8355
8717
|
const type = this.resolvedType;
|
|
8356
8718
|
const iconName = CONFIRM_MODAL_ICON_MAP[type];
|
|
8357
8719
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
|
|
8358
|
-
return (hAsync("div", { key: '
|
|
8720
|
+
return (hAsync("div", { key: '51fb051b436cc511aeac2f578832a267e12ef3c4', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'dd9605e312eac8b0602ec558ad5439ea3daa7aa7', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '5027ec2d03731338a9197f7b5b910d2adbf83f0e', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '8456707355cc779c169b56abc16b0949909b829e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'd11cb38e749f54ce5767ba9b5cca0129df742aca', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'de653458605a9591d7c66d644a143d0f33738b28', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (hAsync("div", { key: '0517e400485551ab21f0f5452af764b5ede7a76d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
8359
8721
|
this.customContentRef = el;
|
|
8360
|
-
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '
|
|
8722
|
+
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'd542a08caee30ed7eb1d22ed85a51be6e1f6855e', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '02d012e899969ee55cba43c11d9caeaaff65a348', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'fd50d151e515646e5bef5658a1b05b2e26b21461', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '0c2092edf0866a8b1f4f432b176d78eedd9655d6', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
|
|
8361
8723
|
}
|
|
8362
8724
|
static get style() { return sdConfirmModalCss(); }
|
|
8363
8725
|
static get cmpMeta() { return {
|
|
@@ -8644,9 +9006,9 @@ class SdDatePicker {
|
|
|
8644
9006
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
8645
9007
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
8646
9008
|
};
|
|
8647
|
-
return (hAsync("sd-field", { key: '
|
|
9009
|
+
return (hAsync("sd-field", { key: '9e1e5cb7419027db803248a657d0d134be049637', 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 }, hAsync("div", { key: 'fbd9adeaa08d19cac34b045aba2b3fbb8d4adc8c', class: "sd-date-picker", ref: el => {
|
|
8648
9010
|
this.triggerRef = el;
|
|
8649
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9011
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'd51161c4b1eedcfd90832c9b6d049559ff5df08b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'd6588d3991eff39eb717d4211b38d68f093aace5', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '0dc6a8074fcfa63630aab7f0b126caa9f4c7b234', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
8650
9012
|
}
|
|
8651
9013
|
static get watchers() { return {
|
|
8652
9014
|
"isOpen": [{
|
|
@@ -8729,7 +9091,7 @@ class SdDatePickerTrigger {
|
|
|
8729
9091
|
? DATEPICKER_COLORS.icon.disabled
|
|
8730
9092
|
: DATEPICKER_COLORS.icon.default,
|
|
8731
9093
|
};
|
|
8732
|
-
return (hAsync("div", { key: '
|
|
9094
|
+
return (hAsync("div", { key: '8ce4e5a7f355e15ad6662efc5d1a697c2f78d455', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
8733
9095
|
'sd-date-picker-trigger': true,
|
|
8734
9096
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
8735
9097
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -8737,7 +9099,7 @@ class SdDatePickerTrigger {
|
|
|
8737
9099
|
e.preventDefault();
|
|
8738
9100
|
this.handleClick();
|
|
8739
9101
|
}
|
|
8740
|
-
} }, hAsync("sd-icon", { key: '
|
|
9102
|
+
} }, hAsync("sd-icon", { key: '31d360adaf1a8a0d613d3809be7c724be9d7a29a', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: 'cf17fb4d5fdaadd99847ec9ce5440214c10a5797', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
8741
9103
|
}
|
|
8742
9104
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
8743
9105
|
static get cmpMeta() { return {
|
|
@@ -9157,7 +9519,7 @@ class SdDateRangePickerCalendar {
|
|
|
9157
9519
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
9158
9520
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
9159
9521
|
};
|
|
9160
|
-
return (hAsync(Fragment, { key: '
|
|
9522
|
+
return (hAsync(Fragment, { key: '71f25effececd0b83d9b33201230dc615ba87a30' }, hAsync("div", { key: 'f075474fb0be9f8e8562a013532b3cdbaadee069', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '4dfa1d65b971f7d80f0799482c8ce41522200a94', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '20149f97a5115115cc49894383ca7f989ba2b904', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
9161
9523
|
}
|
|
9162
9524
|
static get watchers() { return {
|
|
9163
9525
|
"value": [{
|
|
@@ -9200,7 +9562,7 @@ class SdDivider {
|
|
|
9200
9562
|
const hostStyle = {
|
|
9201
9563
|
'--sd-divider-color': DIVIDER_COLORS.default,
|
|
9202
9564
|
};
|
|
9203
|
-
return (hAsync(Host, { key: '
|
|
9565
|
+
return (hAsync(Host, { key: '886ca68599a925678d7c598daeff3bf653db513d', style: hostStyle }, hAsync("hr", { key: 'e213413f041cda5d18a74f8c0225c840d92f7dac', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
|
|
9204
9566
|
}
|
|
9205
9567
|
static get style() { return sdDividerCss(); }
|
|
9206
9568
|
static get cmpMeta() { return {
|
|
@@ -9353,6 +9715,13 @@ const DROPDOWN_CHEVRON_ICON_SIZE = {
|
|
|
9353
9715
|
sm: 12,
|
|
9354
9716
|
md: 16,
|
|
9355
9717
|
};
|
|
9718
|
+
// 버튼 자체의 min-width (px). split 여부에 따라 chevron 버튼이 추가되므로 별도 값을 지정.
|
|
9719
|
+
// TODO: 디자인 토큰으로 관리될 때 대체 예정
|
|
9720
|
+
const DROPDOWN_BUTTON_MIN_WIDTH = {
|
|
9721
|
+
xs: { default: 44, split: 60 },
|
|
9722
|
+
sm: { default: 70, split: 76 },
|
|
9723
|
+
md: { default: 100, split: 106 },
|
|
9724
|
+
};
|
|
9356
9725
|
const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;
|
|
9357
9726
|
const DROPDOWN_DISABLED_TEXT = buttonTokens.button.text.disabled;
|
|
9358
9727
|
const DROPDOWN_DISABLED_ICON = buttonTokens.button.icon.disabled;
|
|
@@ -9381,6 +9750,7 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9381
9750
|
isAnimatingOut = false;
|
|
9382
9751
|
itemIndex = -1;
|
|
9383
9752
|
triggerRef;
|
|
9753
|
+
splitContainerRef;
|
|
9384
9754
|
menuRef;
|
|
9385
9755
|
closeAnimationTimer;
|
|
9386
9756
|
click;
|
|
@@ -9559,10 +9929,11 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9559
9929
|
return classes.join(' ');
|
|
9560
9930
|
}
|
|
9561
9931
|
renderDropdown(preset) {
|
|
9562
|
-
|
|
9932
|
+
const anchorRef = this.split ? this.splitContainerRef : this.triggerRef;
|
|
9933
|
+
if ((!this.isOpen && !this.isAnimatingOut) || !anchorRef)
|
|
9563
9934
|
return null;
|
|
9564
|
-
return (hAsync("sd-portal", { open: this.isOpen, parentRef:
|
|
9565
|
-
'--sd-dropdown-button-menu-min-width': `${
|
|
9935
|
+
return (hAsync("sd-portal", { open: this.isOpen, parentRef: anchorRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
|
|
9936
|
+
'--sd-dropdown-button-menu-min-width': `${anchorRef.offsetWidth}px`,
|
|
9566
9937
|
'--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
|
|
9567
9938
|
'--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
|
|
9568
9939
|
'--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
|
|
@@ -9576,7 +9947,7 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9576
9947
|
this.itemIndex = index;
|
|
9577
9948
|
}
|
|
9578
9949
|
} }, item.icon && (hAsync("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), hAsync("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: sanitizeInlineHtml(item.label) })));
|
|
9579
|
-
}))))
|
|
9950
|
+
}))));
|
|
9580
9951
|
}
|
|
9581
9952
|
renderChevron(size) {
|
|
9582
9953
|
const iconName = this.split ? 'etc' : 'caretDown';
|
|
@@ -9588,10 +9959,11 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9588
9959
|
render() {
|
|
9589
9960
|
const { config, preset } = this.resolvedConfig;
|
|
9590
9961
|
const triggerStyle = this.getTriggerStyle(config, preset);
|
|
9962
|
+
const minWidth = DROPDOWN_BUTTON_MIN_WIDTH[config.size];
|
|
9591
9963
|
if (this.split) {
|
|
9592
|
-
return (hAsync("div", { class: "sd-dropdown-button sd-dropdown-button--split" }, hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, hAsync("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
|
|
9964
|
+
return (hAsync("div", { class: "sd-dropdown-button sd-dropdown-button--split", ref: el => (this.splitContainerRef = el), style: { minWidth: `${minWidth.split}px` } }, hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, hAsync("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
|
|
9593
9965
|
}
|
|
9594
|
-
return (hAsync("div", { class: "sd-dropdown-button" }, hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, hAsync("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
|
|
9966
|
+
return (hAsync("div", { class: "sd-dropdown-button" }, hAsync("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: { ...triggerStyle, minWidth: `${minWidth.default}px` } }, hAsync("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
|
|
9595
9967
|
}
|
|
9596
9968
|
static get watchers() { return {
|
|
9597
9969
|
"isOpen": [{
|
|
@@ -9832,21 +10204,21 @@ class SdField {
|
|
|
9832
10204
|
: {}),
|
|
9833
10205
|
}
|
|
9834
10206
|
: {};
|
|
9835
|
-
return (hAsync("div", { key: '
|
|
10207
|
+
return (hAsync("div", { key: '9edafceb24a4fcde7cfb966f421bfb73f1b07617', class: {
|
|
9836
10208
|
'sd-field': true,
|
|
9837
10209
|
'sd-field--has-label': this.label !== '',
|
|
9838
10210
|
'sd-field--has-addon': addon !== '',
|
|
9839
10211
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
9840
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '
|
|
10212
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: 'e5c4a8aad05afb40f3eccc492135b2b968ffc646', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'e88d62a979eaab9f6794c851813e5f56c3c5c4ac', class: "sd-field__main", style: this.width !== '' && this.width !== 0
|
|
9841
10213
|
? {
|
|
9842
10214
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
9843
10215
|
flex: 'none',
|
|
9844
10216
|
}
|
|
9845
|
-
: {} }, hAsync("div", { key: '
|
|
10217
|
+
: {} }, hAsync("div", { key: 'be69d7e48d90dda0872ffc43c2a1b4044e99ac00', class: {
|
|
9846
10218
|
'sd-field__control': true,
|
|
9847
10219
|
'sd-field__control--has-addon': addon !== '',
|
|
9848
|
-
} }, addon && (hAsync("div", { key: '
|
|
9849
|
-
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)), hAsync("slot", { key: '
|
|
10220
|
+
} }, addon && (hAsync("div", { key: '2c631ac0f8b9001cf6344908cf8cbcdf182cc1a7', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '34a49839ee200cd59c3ff5b84caf5ded2c50f7b0', name: this.icon.name, size: this.icon.size ??
|
|
10221
|
+
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)), hAsync("slot", { key: '693f20c529e5f2ea84d381e59327392edb7b4c15' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
|
|
9850
10222
|
}
|
|
9851
10223
|
renderLabel(label) {
|
|
9852
10224
|
if (label == null || label === '')
|
|
@@ -10359,7 +10731,7 @@ class SdFloatingPopover {
|
|
|
10359
10731
|
}
|
|
10360
10732
|
}
|
|
10361
10733
|
render() {
|
|
10362
|
-
return hAsync("slot", { key: '
|
|
10734
|
+
return hAsync("slot", { key: 'f20806555ad198c33a62ec938ea7b77200fa1585' });
|
|
10363
10735
|
}
|
|
10364
10736
|
static get style() { return sdFloatingPortalCss(); }
|
|
10365
10737
|
static get cmpMeta() { return {
|
|
@@ -11356,12 +11728,12 @@ class SdInput {
|
|
|
11356
11728
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
11357
11729
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
11358
11730
|
};
|
|
11359
|
-
return (hAsync("sd-field", { key: '
|
|
11731
|
+
return (hAsync("sd-field", { key: '64e7a3ba5e223341336248ba31e621b4416987fd', 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 }, hAsync("label", { key: 'b66e286c35cc14c1eb02badcaaff24b38ff0a7b3', class: "sd-input__content" }, hAsync("slot", { key: 'dc8b900eb2b38c18b85663bc930e810be77bdbd7', name: "prefix" }), hAsync("input", { key: '36d35464338838aaaeff6f728020241d33a493ec', 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 }), hAsync("slot", { key: '4f30d4a59794c0692f367d41af4311e191c5427b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '247da41512f20d8e562f345b08bd5bc13486734b', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
11360
11732
|
if (this.disabled || this.readonly)
|
|
11361
11733
|
return;
|
|
11362
11734
|
this.internalValue = '';
|
|
11363
11735
|
await this.formField?.sdValidate();
|
|
11364
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
11736
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '70c596ef0072bf369bd59e2c58d0a6f8c6fd1b11', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
|
|
11365
11737
|
if (this.disabled || this.readonly)
|
|
11366
11738
|
return;
|
|
11367
11739
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -11500,8 +11872,8 @@ const KEY_VALUE_TABLE_LAYOUT = {
|
|
|
11500
11872
|
rowHeight: Number(t.keyValue.height),
|
|
11501
11873
|
thWidth: 120,
|
|
11502
11874
|
borderRadius: Number(t.radius),
|
|
11503
|
-
|
|
11504
|
-
|
|
11875
|
+
thPaddingX: Number(t.header.paddingX),
|
|
11876
|
+
padding: Number(t.keyValue.body.padding),
|
|
11505
11877
|
helpIconSize: 16,
|
|
11506
11878
|
requiredIconSize: 12,
|
|
11507
11879
|
gap: Number(t.header.gap),
|
|
@@ -11522,7 +11894,7 @@ const KEY_VALUE_TABLE_COLORS = {
|
|
|
11522
11894
|
const KEY_VALUE_TABLE_TYPOGRAPHY = {
|
|
11523
11895
|
labelFontFamily: t.header.typography.fontFamily,
|
|
11524
11896
|
labelFontSize: Number(t.header.typography.fontSize),
|
|
11525
|
-
labelFontWeight:
|
|
11897
|
+
labelFontWeight: 700,
|
|
11526
11898
|
labelLineHeight: Number(t.header.typography.lineHeight),
|
|
11527
11899
|
tdFontFamily: t.body.typography.fontFamily,
|
|
11528
11900
|
tdFontSize: Number(t.body.typography.fontSize),
|
|
@@ -11530,7 +11902,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
|
|
|
11530
11902
|
tdLineHeight: Number(t.body.typography.lineHeight),
|
|
11531
11903
|
};
|
|
11532
11904
|
|
|
11533
|
-
const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--
|
|
11905
|
+
const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
|
|
11534
11906
|
|
|
11535
11907
|
class SdKeyValueTable {
|
|
11536
11908
|
constructor(hostRef) {
|
|
@@ -11548,10 +11920,12 @@ class SdKeyValueTable {
|
|
|
11548
11920
|
*/
|
|
11549
11921
|
search = false;
|
|
11550
11922
|
/**
|
|
11551
|
-
*
|
|
11552
|
-
*
|
|
11923
|
+
* 테이블 border-radius 제어.
|
|
11924
|
+
* - 'default': 전체 radius 적용
|
|
11925
|
+
* - 'usetop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
|
|
11926
|
+
* - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
|
|
11553
11927
|
*/
|
|
11554
|
-
|
|
11928
|
+
radius = 'default';
|
|
11555
11929
|
change;
|
|
11556
11930
|
searchEvent;
|
|
11557
11931
|
emit = (name, value) => {
|
|
@@ -11638,6 +12012,28 @@ class SdKeyValueTable {
|
|
|
11638
12012
|
});
|
|
11639
12013
|
return max;
|
|
11640
12014
|
}
|
|
12015
|
+
/**
|
|
12016
|
+
* thStyle의 CSS 속성 값을 해당 CSS 변수로도 반영.
|
|
12017
|
+
* label span이 var()로 스타일을 참조하기 때문에, 인라인 스타일만으로는 상속이 되지 않음.
|
|
12018
|
+
*/
|
|
12019
|
+
buildThStyle(thStyle) {
|
|
12020
|
+
const s = { ...thStyle };
|
|
12021
|
+
if (thStyle.color != null)
|
|
12022
|
+
s['--sd-kvt-th-color'] = thStyle.color;
|
|
12023
|
+
if (thStyle.background != null)
|
|
12024
|
+
s['--sd-kvt-th-bg'] = thStyle.background;
|
|
12025
|
+
if (thStyle.backgroundColor != null)
|
|
12026
|
+
s['--sd-kvt-th-bg'] = thStyle.backgroundColor;
|
|
12027
|
+
if (thStyle.fontFamily != null)
|
|
12028
|
+
s['--sd-kvt-label-font-family'] = thStyle.fontFamily;
|
|
12029
|
+
if (thStyle.fontSize != null)
|
|
12030
|
+
s['--sd-kvt-label-font-size'] = thStyle.fontSize;
|
|
12031
|
+
if (thStyle.fontWeight != null)
|
|
12032
|
+
s['--sd-kvt-label-font-weight'] = thStyle.fontWeight;
|
|
12033
|
+
if (thStyle.lineHeight != null)
|
|
12034
|
+
s['--sd-kvt-label-line-height'] = thStyle.lineHeight;
|
|
12035
|
+
return s;
|
|
12036
|
+
}
|
|
11641
12037
|
renderTh(field, r, c) {
|
|
11642
12038
|
const thRowSpan = field.thRowSpan != null && field.thRowSpan > 1 ? field.thRowSpan : undefined;
|
|
11643
12039
|
const thColSpan = field.thColSpan != null && field.thColSpan > 1 ? field.thColSpan : undefined;
|
|
@@ -11648,7 +12044,8 @@ class SdKeyValueTable {
|
|
|
11648
12044
|
else if (Array.isArray(field.thClass)) {
|
|
11649
12045
|
field.thClass.forEach(cls => (classObj[cls] = true));
|
|
11650
12046
|
}
|
|
11651
|
-
|
|
12047
|
+
const thStyle = field.thStyle != null ? this.buildThStyle(field.thStyle) : undefined;
|
|
12048
|
+
return (hAsync("th", { key: `th-${r}-${c}`, class: classObj, style: thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, hAsync("div", { class: "sd-key-value-table__th-inner" }, hAsync("span", { class: "sd-key-value-table__label" }, field.label, field.required && (hAsync("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
|
|
11652
12049
|
}
|
|
11653
12050
|
renderTd(field, r, c) {
|
|
11654
12051
|
const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
|
|
@@ -11676,8 +12073,8 @@ class SdKeyValueTable {
|
|
|
11676
12073
|
'--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
|
|
11677
12074
|
'--sd-kvt-th-width': `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`,
|
|
11678
12075
|
'--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
|
|
11679
|
-
'--sd-kvt-padding-x': `${KEY_VALUE_TABLE_LAYOUT.
|
|
11680
|
-
'--sd-kvt-padding
|
|
12076
|
+
'--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
|
|
12077
|
+
'--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
|
|
11681
12078
|
'--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
|
|
11682
12079
|
'--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
|
|
11683
12080
|
'--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
|
|
@@ -11703,7 +12100,8 @@ class SdKeyValueTable {
|
|
|
11703
12100
|
const maxCols = this.computeMaxCols(autoSkip);
|
|
11704
12101
|
const tableEl = (hAsync("table", { class: {
|
|
11705
12102
|
'sd-key-value-table': true,
|
|
11706
|
-
'sd-key-value-table--
|
|
12103
|
+
'sd-key-value-table--radius-usetop': this.radius === 'usetop',
|
|
12104
|
+
'sd-key-value-table--radius-full': this.radius === 'full',
|
|
11707
12105
|
}, style: cssVars }, hAsync("colgroup", null, Array.from({ length: maxCols }, (_, i) => {
|
|
11708
12106
|
if (i % 2 !== 0)
|
|
11709
12107
|
return hAsync("col", { key: `col-${i}` });
|
|
@@ -11727,7 +12125,8 @@ class SdKeyValueTable {
|
|
|
11727
12125
|
return tableEl;
|
|
11728
12126
|
return (hAsync("div", { class: {
|
|
11729
12127
|
'sd-key-value-table__wrapper': true,
|
|
11730
|
-
'sd-key-value-table__wrapper--
|
|
12128
|
+
'sd-key-value-table__wrapper--radius-usetop': this.radius === 'usetop',
|
|
12129
|
+
'sd-key-value-table__wrapper--radius-full': this.radius === 'full',
|
|
11731
12130
|
}, style: cssVars }, tableEl, hAsync("div", { class: "sd-key-value-table__search-panel" }, hAsync("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
|
|
11732
12131
|
}
|
|
11733
12132
|
static get style() { return sdKeyValueTableCss(); }
|
|
@@ -11737,7 +12136,7 @@ class SdKeyValueTable {
|
|
|
11737
12136
|
"$members$": {
|
|
11738
12137
|
"fields": [16],
|
|
11739
12138
|
"search": [4],
|
|
11740
|
-
"
|
|
12139
|
+
"radius": [1]
|
|
11741
12140
|
},
|
|
11742
12141
|
"$listeners$": undefined,
|
|
11743
12142
|
"$lazyBundleId$": "-",
|
|
@@ -11790,7 +12189,7 @@ class SdLinearProgress {
|
|
|
11790
12189
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
11791
12190
|
};
|
|
11792
12191
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
11793
|
-
return (hAsync(Host, { key: '
|
|
12192
|
+
return (hAsync(Host, { key: '26b1e15732e289a9a37a6d3dbea24aec1ab60ffd', style: hostStyle }, hAsync("div", { key: '5162d60390656286b56f6a96fd4b3932f399412a', class: 'sd-linear-progress__track' }, hAsync("div", { key: 'a46b815f935b243e4b7f8988af65167e3f87b554', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'bc91914addd5addb84c7684a1f862033950905fc', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: 'c62cdc59464823286ff42fc7e97a7a255a2beeb4', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '4c7c280885c8411329f99c3fe04f5ede8b1f0708', class: 'sd-linear-progress__label' }, this.label)));
|
|
11794
12193
|
}
|
|
11795
12194
|
static get style() { return sdLinearProgressCss(); }
|
|
11796
12195
|
static get cmpMeta() { return {
|
|
@@ -11824,10 +12223,10 @@ class SdLoadingContainer {
|
|
|
11824
12223
|
this.visible = false;
|
|
11825
12224
|
}
|
|
11826
12225
|
render() {
|
|
11827
|
-
return (hAsync("div", { key: '
|
|
12226
|
+
return (hAsync("div", { key: '2ad17acec76cfb7ceba0629f055600a7240a67e8', class: {
|
|
11828
12227
|
'sd-loading-container': true,
|
|
11829
12228
|
'sd-loading-container--visible': this.visible,
|
|
11830
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
12229
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '1e842f21f2990b22820974147b22d859be010683', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '4a48bafd9882a22c210dd1b2ca45efc43cc0c8da', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '8eb7377230f0e8c9c482dfc9ca1313f323895d14', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: 'af2fc52b0740ee1d2cea55b688e5b4b77e80c7e3', class: "sd-loading-container__message" }, this.message)))));
|
|
11831
12230
|
}
|
|
11832
12231
|
static get style() { return sdLoadingContainerCss(); }
|
|
11833
12232
|
static get cmpMeta() { return {
|
|
@@ -11924,7 +12323,7 @@ class SdLoadingModal {
|
|
|
11924
12323
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
11925
12324
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
11926
12325
|
};
|
|
11927
|
-
return (hAsync(Host, { key: '
|
|
12326
|
+
return (hAsync(Host, { key: 'f40dcf4fa7e2ee7b4023be11be2b9361ec167610', style: hostStyle }, hAsync("div", { key: '02bab8da4e09156340e8e9badef25755b57193d5', class: "sd-loading-modal" }, hAsync("div", { key: '776833f7f85a5587dda59fe75e36ebb4b9109c3e', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '4bb9e434a4a2d6be6dbbe2ed4e89563bf7278c65', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '5da761513fdc38e5e646f72f75072e25d5313384', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '2bf9beb84ab4a6c1e6793db453e04b947c432d13', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
11928
12327
|
}
|
|
11929
12328
|
static get style() { return sdLoadingModalCss(); }
|
|
11930
12329
|
static get cmpMeta() { return {
|
|
@@ -12157,7 +12556,14 @@ class SdModalContainer {
|
|
|
12157
12556
|
});
|
|
12158
12557
|
}
|
|
12159
12558
|
attachModalEventListeners(id, modalEl) {
|
|
12160
|
-
modalEl.addEventListener('sdOk', () =>
|
|
12559
|
+
modalEl.addEventListener('sdOk', () => {
|
|
12560
|
+
const entry = this.entries.find(e => e.id === id);
|
|
12561
|
+
if (entry?.modalRef._hasSubmit?.()) {
|
|
12562
|
+
entry.modalRef._triggerSubmit?.();
|
|
12563
|
+
return;
|
|
12564
|
+
}
|
|
12565
|
+
this.requestDismiss(id, 'confirm');
|
|
12566
|
+
});
|
|
12161
12567
|
modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
|
|
12162
12568
|
modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
|
|
12163
12569
|
}
|
|
@@ -12707,15 +13113,15 @@ class SdNumberInput {
|
|
|
12707
13113
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
12708
13114
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
12709
13115
|
};
|
|
12710
|
-
return (hAsync("sd-field", { key: '
|
|
13116
|
+
return (hAsync("sd-field", { key: 'ad212dcbaf8e19cac070e6bdfa292ca614480fbc', 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 }, hAsync("div", { key: 'b9c403df166e2f05f815ebf3851b6517b8afbd2a', class: {
|
|
12711
13117
|
'sd-number-input__content': true,
|
|
12712
13118
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
12713
|
-
} }, this.useButton && (hAsync("button", { key: '
|
|
13119
|
+
} }, this.useButton && (hAsync("button", { key: '206f45b19bf8dd56b65ff55fb65d760e36d80ba7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'd39cadc9a83cf7a0170144b8734a90f71d7aa9d1', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
12714
13120
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
12715
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '
|
|
13121
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '0c97309540467d56ee3415001df7a027ba581a3d', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '9462f0c7ac028c038894ad184c7cf052e366e48c', 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: {
|
|
12716
13122
|
textAlign: this.useButton ? 'center' : 'right',
|
|
12717
13123
|
...this.inputStyle,
|
|
12718
|
-
} }), this.inputSuffix && hAsync("span", { key: '
|
|
13124
|
+
} }), this.inputSuffix && hAsync("span", { key: 'fdd4f4e680fe5de55cb68c848615ec6b00f00430', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '8cdfcc46a010fb0f503b48c34290fd096403524a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'ec8826370cd9d8c6054ca6ab216de6baa62d90db', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
12719
13125
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
12720
13126
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
12721
13127
|
}
|
|
@@ -12925,13 +13331,13 @@ class SdPagination {
|
|
|
12925
13331
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
12926
13332
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
12927
13333
|
};
|
|
12928
|
-
return (hAsync("div", { key: '
|
|
13334
|
+
return (hAsync("div", { key: 'c1925f0f312cf5c18f08f158efb599e5b6f0d503', class: {
|
|
12929
13335
|
'sd-pagination': true,
|
|
12930
13336
|
'sd-pagination--simple': this.simple,
|
|
12931
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
13337
|
+
}, style: cssVars }, hAsync("div", { key: '1f22be76697820bf455cea5476efa84a09d03c44', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
12932
13338
|
'sd-pagination__item': true,
|
|
12933
13339
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
12934
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
13340
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'b85b00b637152d5071db0652b6682541fbfd6ab5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
12935
13341
|
}
|
|
12936
13342
|
static get style() { return sdPaginationCss(); }
|
|
12937
13343
|
static get cmpMeta() { return {
|
|
@@ -13157,7 +13563,7 @@ class SdPopup {
|
|
|
13157
13563
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
13158
13564
|
...this.submitButtonProps,
|
|
13159
13565
|
};
|
|
13160
|
-
return (hAsync("div", { key: '
|
|
13566
|
+
return (hAsync("div", { key: 'a978706454e3964818cc96b3a583880b952c2533', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '1164fc29d4040d51b74ebc45fedc4fd19038e900', class: "sd-popup__header" }, hAsync("h2", { key: '6ac1ea61e52f952f3bea4c4149222b4ff43b61db', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'fe8cebfc5ea513ae07e3a2987a8c7d9b36ed26e9', class: "sd-popup__body" }, hAsync("slot", { key: 'f7ce06ae60cc8af6dbae2b24db4fd6b00e13d365' })), this.useFooter && (hAsync("footer", { key: '84251ae1e48522fcf47d0081c9c0689e5fb236a6', class: "sd-popup__footer" }, hAsync("div", { key: 'c7d4a8546bd185c812a98569cc3b2a818cbb2963', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '474e09481472b96ff4eacc66502aa06987b463b8', name: "footer-left" })), hAsync("sd-button", { key: '2b23204ffad997f022dd06b772433ceb69950d04', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
13161
13567
|
}
|
|
13162
13568
|
static get style() { return sdPopupCss(); }
|
|
13163
13569
|
static get cmpMeta() { return {
|
|
@@ -13228,7 +13634,7 @@ class SdPortal {
|
|
|
13228
13634
|
createWrapper() {
|
|
13229
13635
|
this.wrapper = document.createElement('div');
|
|
13230
13636
|
Object.assign(this.wrapper.style, {
|
|
13231
|
-
position: '
|
|
13637
|
+
position: 'fixed',
|
|
13232
13638
|
top: '0',
|
|
13233
13639
|
left: '0',
|
|
13234
13640
|
zIndex: (this.zIndex ?? 998).toString(),
|
|
@@ -13302,13 +13708,13 @@ class SdPortal {
|
|
|
13302
13708
|
const wrapperRect = this.wrapper.getBoundingClientRect();
|
|
13303
13709
|
const availableBelow = viewport.height - parentRect.bottom - offset[1] - viewportPadding;
|
|
13304
13710
|
const availableAbove = parentRect.top - offset[1] - viewportPadding;
|
|
13305
|
-
let top = parentRect.bottom +
|
|
13306
|
-
let left = parentRect.left +
|
|
13711
|
+
let top = parentRect.bottom + offset[1];
|
|
13712
|
+
let left = parentRect.left + offset[0];
|
|
13307
13713
|
if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
|
|
13308
|
-
top = parentRect.top
|
|
13714
|
+
top = parentRect.top - wrapperRect.height - offset[1];
|
|
13309
13715
|
}
|
|
13310
|
-
const minTop =
|
|
13311
|
-
const maxTop =
|
|
13716
|
+
const minTop = viewportPadding;
|
|
13717
|
+
const maxTop = viewport.height - viewportPadding - wrapperRect.height;
|
|
13312
13718
|
if (maxTop < minTop) {
|
|
13313
13719
|
top = minTop;
|
|
13314
13720
|
}
|
|
@@ -13316,10 +13722,10 @@ class SdPortal {
|
|
|
13316
13722
|
top = Math.min(Math.max(top, minTop), maxTop);
|
|
13317
13723
|
}
|
|
13318
13724
|
if (parentRect.left + wrapperRect.width + offset[0] > viewport.width - viewportPadding) {
|
|
13319
|
-
left = parentRect.right
|
|
13725
|
+
left = parentRect.right - wrapperRect.width - offset[0];
|
|
13320
13726
|
}
|
|
13321
|
-
const minLeft =
|
|
13322
|
-
const maxLeft =
|
|
13727
|
+
const minLeft = viewportPadding;
|
|
13728
|
+
const maxLeft = viewport.width - viewportPadding - wrapperRect.width;
|
|
13323
13729
|
if (maxLeft < minLeft) {
|
|
13324
13730
|
left = minLeft;
|
|
13325
13731
|
}
|
|
@@ -13386,21 +13792,25 @@ class SdPortal {
|
|
|
13386
13792
|
}
|
|
13387
13793
|
return scrollParents;
|
|
13388
13794
|
}
|
|
13795
|
+
isInsideTarget(target) {
|
|
13796
|
+
return !!((this.wrapper?.contains(target)) ||
|
|
13797
|
+
(this.parentRef?.contains(target)));
|
|
13798
|
+
}
|
|
13389
13799
|
// 외부 클릭 감지
|
|
13390
13800
|
handleMouseDown(e) {
|
|
13391
|
-
this.isInsideClick =
|
|
13801
|
+
this.isInsideClick = this.isInsideTarget(e.target);
|
|
13392
13802
|
}
|
|
13393
13803
|
handleWindowClick(e) {
|
|
13394
13804
|
if (this.isInsideClick) {
|
|
13395
13805
|
this.isInsideClick = false;
|
|
13396
13806
|
return;
|
|
13397
13807
|
}
|
|
13398
|
-
if (this.
|
|
13808
|
+
if (this.isInsideTarget(e.target))
|
|
13399
13809
|
return;
|
|
13400
13810
|
this.close.emit();
|
|
13401
13811
|
}
|
|
13402
13812
|
render() {
|
|
13403
|
-
return hAsync("slot", { key: '
|
|
13813
|
+
return hAsync("slot", { key: '22e09896836d017f33a9c6b92772a00fc85f8997' });
|
|
13404
13814
|
}
|
|
13405
13815
|
static get watchers() { return {
|
|
13406
13816
|
"open": [{
|
|
@@ -14090,15 +14500,15 @@ class SdSelect {
|
|
|
14090
14500
|
this.closeDropdown();
|
|
14091
14501
|
},
|
|
14092
14502
|
};
|
|
14093
|
-
return (hAsync("sd-field", { key: '
|
|
14503
|
+
return (hAsync("sd-field", { key: 'fced3680a535c60d5750908acf1226426e12182b', 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: () => {
|
|
14094
14504
|
this.hovered = true;
|
|
14095
14505
|
}, onMouseLeave: () => {
|
|
14096
14506
|
this.hovered = false;
|
|
14097
|
-
} }, hAsync("div", { key: '
|
|
14507
|
+
} }, hAsync("div", { key: '38d53e92c022affd40bfc7951bbcdf7e02071446', class: "sd-select", ref: el => {
|
|
14098
14508
|
this.triggerRef = el;
|
|
14099
|
-
} }, hAsync("sd-select-trigger", { key: '
|
|
14509
|
+
} }, hAsync("sd-select-trigger", { key: '9cd9bdb89db37204f9a5c312d26277da772b1209', ref: el => {
|
|
14100
14510
|
this.triggerComponentRef = el;
|
|
14101
|
-
}, 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) && (hAsync("sd-portal", { key: '
|
|
14511
|
+
}, 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) && (hAsync("sd-portal", { key: '8666dc885f3dcbae13011fd312eb72b7e6c906d9', ...portalProps }, hAsync("sd-select-listbox", { key: '04e6dba3d2837cbef68ded80bd2f89c5bbe9dc01', 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) })))));
|
|
14102
14512
|
}
|
|
14103
14513
|
static get watchers() { return {
|
|
14104
14514
|
"isOpen": [{
|
|
@@ -14172,54 +14582,6 @@ var selectTokens = {
|
|
|
14172
14582
|
select: select
|
|
14173
14583
|
};
|
|
14174
14584
|
|
|
14175
|
-
const listItem = {
|
|
14176
|
-
paddingY: "4",
|
|
14177
|
-
paddingRight: "12",
|
|
14178
|
-
gap: "8",
|
|
14179
|
-
paddingLeft: {
|
|
14180
|
-
depth1: "12",
|
|
14181
|
-
depth2: "20",
|
|
14182
|
-
depth3: "28"
|
|
14183
|
-
},
|
|
14184
|
-
typography: {
|
|
14185
|
-
"default": {
|
|
14186
|
-
fontWeight: "400",
|
|
14187
|
-
fontSize: "12",
|
|
14188
|
-
lineHeight: "20"},
|
|
14189
|
-
selected: {
|
|
14190
|
-
fontWeight: "700"}
|
|
14191
|
-
},
|
|
14192
|
-
bg: {
|
|
14193
|
-
"default": "#FFFFFF",
|
|
14194
|
-
hover: "#0075FF"
|
|
14195
|
-
},
|
|
14196
|
-
content: {
|
|
14197
|
-
"default": "#222222",
|
|
14198
|
-
hover: "#FFFFFF",
|
|
14199
|
-
disabled: "#888888",
|
|
14200
|
-
selected: "#0075FF"
|
|
14201
|
-
},
|
|
14202
|
-
depth1: {
|
|
14203
|
-
bg: {
|
|
14204
|
-
"default": "#EFF6FF"},
|
|
14205
|
-
border: {
|
|
14206
|
-
color: "#E1E1E1",
|
|
14207
|
-
width: "1"
|
|
14208
|
-
}},
|
|
14209
|
-
depth2: {
|
|
14210
|
-
middle: {
|
|
14211
|
-
bg: "#F6F6F6"}
|
|
14212
|
-
}};
|
|
14213
|
-
var listItemTokens = {
|
|
14214
|
-
listItem: listItem
|
|
14215
|
-
};
|
|
14216
|
-
|
|
14217
|
-
const listBox = {
|
|
14218
|
-
radius: "4"};
|
|
14219
|
-
var listBoxTokens = {
|
|
14220
|
-
listBox: listBox
|
|
14221
|
-
};
|
|
14222
|
-
|
|
14223
14585
|
// ── Select Trigger Tokens ──
|
|
14224
14586
|
const SELECT_LAYOUT = {
|
|
14225
14587
|
paddingX: selectTokens.select.sm.paddingX,
|
|
@@ -14299,10 +14661,10 @@ function countLeaves(options) {
|
|
|
14299
14661
|
}, 0);
|
|
14300
14662
|
}
|
|
14301
14663
|
function filterTree(options, keyword) {
|
|
14302
|
-
const lowerKeyword = keyword.toLowerCase();
|
|
14664
|
+
const lowerKeyword = (keyword ?? '').toLowerCase();
|
|
14303
14665
|
return options.reduce((acc, option) => {
|
|
14304
14666
|
const labelText = isHtmlLabel(option.label) ? extractText(option.label) : option.label;
|
|
14305
|
-
const selfMatch = labelText.toLowerCase().includes(lowerKeyword);
|
|
14667
|
+
const selfMatch = labelText != null && labelText.toLowerCase().includes(lowerKeyword);
|
|
14306
14668
|
if (option.children) {
|
|
14307
14669
|
// 그룹: 자식은 항상 추가로 필터링한다.
|
|
14308
14670
|
// - 자식 중 일치하는 게 있으면 그 자식들만 노출
|
|
@@ -14400,7 +14762,7 @@ class SdSelectListItem {
|
|
|
14400
14762
|
return (
|
|
14401
14763
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
14402
14764
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
14403
|
-
hAsync("div", { key: '
|
|
14765
|
+
hAsync("div", { key: 'c964b0cf5b064c74a7e063be21350bca8124d77d', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
14404
14766
|
'sd-select-list-item': true,
|
|
14405
14767
|
'sd-select-list-item--group': isGroup,
|
|
14406
14768
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -14410,7 +14772,7 @@ class SdSelectListItem {
|
|
|
14410
14772
|
'sd-select-list-item--focused': this.isFocused,
|
|
14411
14773
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
14412
14774
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
14413
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
14775
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '981e055f47aa512d18d61ae938b41942197f3088', 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) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: 'ac34372d921afcb3eba0a51bed3dd70b4e8f1d0f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
14414
14776
|
}
|
|
14415
14777
|
static get style() { return sdSelectListItemCss(); }
|
|
14416
14778
|
static get cmpMeta() { return {
|
|
@@ -14478,15 +14840,15 @@ class SdSelectListItemSearch {
|
|
|
14478
14840
|
clearTimeout(this.debounceTimer);
|
|
14479
14841
|
}
|
|
14480
14842
|
render() {
|
|
14481
|
-
return (hAsync("div", { key: '
|
|
14843
|
+
return (hAsync("div", { key: '6250cee5611a36f6c5fb317d7d24abeae1ed142f', class: {
|
|
14482
14844
|
'sd-select-list-item-search': true,
|
|
14483
14845
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
14484
|
-
} }, hAsync("div", { key: '
|
|
14846
|
+
} }, hAsync("div", { key: 'fa48adb1406c8922b61083a19cc270f02ddab100', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '868519f09dc11fc4e9bde7a1148ce5ce666dd851', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: 'ff946fa2f360cd21eb785d13cb91e23f18abe05c', ref: el => {
|
|
14485
14847
|
this.inputEl = el;
|
|
14486
|
-
}, 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() }), hAsync("button", { key: '
|
|
14848
|
+
}, 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() }), hAsync("button", { key: 'e70e4c0af6e11f89d2893ae5bb28887a0ed8a5ee', type: "button", class: {
|
|
14487
14849
|
'sd-select-list-item-search__clear': true,
|
|
14488
14850
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
14489
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
14851
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '57b4af6446a565b6e1e95153e8553b1c3c363a33', name: "close", size: 12, color: "#888888" })))));
|
|
14490
14852
|
}
|
|
14491
14853
|
static get style() { return sdSelectListItemSearchCss(); }
|
|
14492
14854
|
static get cmpMeta() { return {
|
|
@@ -14571,14 +14933,14 @@ class SdSelectListbox {
|
|
|
14571
14933
|
return count >= SEARCH_THRESHOLD;
|
|
14572
14934
|
}
|
|
14573
14935
|
get filteredOptions() {
|
|
14574
|
-
if (this.searchKeyword === '')
|
|
14936
|
+
if (this.searchKeyword == null || this.searchKeyword === '')
|
|
14575
14937
|
return this.options;
|
|
14576
14938
|
if (this.isDepth)
|
|
14577
14939
|
return filterTree(this.options, this.searchKeyword);
|
|
14578
14940
|
const keyword = this.searchKeyword.toLowerCase();
|
|
14579
14941
|
return this.options.filter(o => {
|
|
14580
14942
|
const labelText = isHtmlLabel(o.label) ? extractText(o.label) : o.label;
|
|
14581
|
-
return labelText.toLowerCase().includes(keyword);
|
|
14943
|
+
return labelText != null && labelText.toLowerCase().includes(keyword);
|
|
14582
14944
|
});
|
|
14583
14945
|
}
|
|
14584
14946
|
get isEmpty() {
|
|
@@ -14860,9 +15222,9 @@ class SdSelectListbox {
|
|
|
14860
15222
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
14861
15223
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
14862
15224
|
};
|
|
14863
|
-
return (hAsync("div", { key: '
|
|
15225
|
+
return (hAsync("div", { key: 'fe30af2954ea5669f2071698e6ef9e2b26244d9b', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: 'aa7ce87d8c0c7163921445325121562603edd960', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'e8b5b3f73653ddc5096101f7109d427de1efa93a', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
14864
15226
|
this.listEl = el;
|
|
14865
|
-
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '
|
|
15227
|
+
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '7fbde730eca0b8234475b714ea38a4393425410e', 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 ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("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) })))))));
|
|
14866
15228
|
}
|
|
14867
15229
|
static get watchers() { return {
|
|
14868
15230
|
"searchKeyword": [{
|
|
@@ -14943,7 +15305,7 @@ class SdSelectTrigger {
|
|
|
14943
15305
|
? SELECT_COLORS.icon.disabled
|
|
14944
15306
|
: SELECT_COLORS.icon.default,
|
|
14945
15307
|
};
|
|
14946
|
-
return (hAsync("div", { key: '
|
|
15308
|
+
return (hAsync("div", { key: '0a929b8c0d68e25a64c352b5ea93b2e9c5f52611', ref: el => {
|
|
14947
15309
|
this.triggerEl = el;
|
|
14948
15310
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
14949
15311
|
'sd-select-trigger': true,
|
|
@@ -14954,7 +15316,7 @@ class SdSelectTrigger {
|
|
|
14954
15316
|
e.preventDefault();
|
|
14955
15317
|
this.handleClick();
|
|
14956
15318
|
}
|
|
14957
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '
|
|
15319
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'd8c91e392604c462aa9228147eb18c0b2ac13851', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: '1afdcb944b30b675d4d2b31d6aeaa2ce41045d36', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
14958
15320
|
'sd-select-trigger__icon': true,
|
|
14959
15321
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
14960
15322
|
} }))));
|
|
@@ -15079,7 +15441,7 @@ class SdSwitch {
|
|
|
15079
15441
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
15080
15442
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
15081
15443
|
};
|
|
15082
|
-
return (hAsync("label", { key: '
|
|
15444
|
+
return (hAsync("label", { key: '8038810bfcf78ddea9ef73706689e19fdfe0b57f', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'ee4c60f379f20f56af01bafb0533e6b64bb3054a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '8ce56df6d631b742331466ded340298a888576c7', class: "sd-switch__track" }, hAsync("div", { key: 'e02c48a7af9e005524b5d3ba8689e99dd42555f2', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'c1533c489ef8d0a2b8374d2eaeeb0ac743a9c507', class: "sd-switch__label" }, this.label)));
|
|
15083
15445
|
}
|
|
15084
15446
|
static get style() { return sdSwitchCss(); }
|
|
15085
15447
|
static get cmpMeta() { return {
|
|
@@ -15189,7 +15551,7 @@ const ICON_DEFAULT_COLOR = {
|
|
|
15189
15551
|
const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
|
|
15190
15552
|
const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
|
|
15191
15553
|
|
|
15192
|
-
const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--
|
|
15554
|
+
const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-usetop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
|
|
15193
15555
|
|
|
15194
15556
|
class SdTable {
|
|
15195
15557
|
constructor(hostRef) {
|
|
@@ -15214,7 +15576,7 @@ class SdTable {
|
|
|
15214
15576
|
height;
|
|
15215
15577
|
stickyHeader = false;
|
|
15216
15578
|
stickyColumn = { left: 0, right: 0 };
|
|
15217
|
-
|
|
15579
|
+
radius = 'default';
|
|
15218
15580
|
noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
15219
15581
|
resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
15220
15582
|
isLoading = false;
|
|
@@ -16012,24 +16374,25 @@ class SdTable {
|
|
|
16012
16374
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
16013
16375
|
'--table-host-height': hostHeight,
|
|
16014
16376
|
};
|
|
16015
|
-
return (hAsync(Host, { key: '
|
|
16377
|
+
return (hAsync(Host, { key: '87170da602bd45011a4f03e0bb7c1ce35ac4b771', style: hostStyle }, hAsync("div", { key: '899ad5a375b30565141fc50063620975a1c87b95', class: "sd-table__container", style: {
|
|
16016
16378
|
'--table-width': this.width,
|
|
16017
16379
|
'--pagination-height': `${paginationHeight}px`,
|
|
16018
|
-
} }, hAsync("div", { key: '
|
|
16380
|
+
} }, hAsync("div", { key: '73db070c9018b814e9c55f605c22a13f81fefc5d', class: {
|
|
16019
16381
|
'sd-table__wrapper': true,
|
|
16020
|
-
'sd-table__wrapper--
|
|
16021
|
-
|
|
16382
|
+
'sd-table__wrapper--radius-usetop': this.radius === 'usetop',
|
|
16383
|
+
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
16384
|
+
} }, hAsync("div", { key: 'f52d585b54a29a6e44c3d9f5ec3a8f20f0e62e8c', class: {
|
|
16022
16385
|
'sd-table__scroll-container': true,
|
|
16023
16386
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
16024
16387
|
'sd-table__scroll-container--no-data': isNoData,
|
|
16025
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
16388
|
+
} }, this.isLoading && (hAsync("div", { key: 'cd9ee8de1d3a4f7abe553372342da1d3ee38b6fe', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'b239353973c8e6959ff9b5c3308696b4c743dbf0', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '7f219801def31f4f19f6042e85e02d9e2b366c90', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '2dcb2227ea402c4fcc176e3e493b88d37843f8ed', class: "sd-table__no-data" }, hAsync("div", { key: '47b8e69f4518200cd87c79d50bfc0d505310aff9', class: "sd-table__no-data-content", ref: el => {
|
|
16026
16389
|
this.noDataContentEl = el;
|
|
16027
16390
|
if (el)
|
|
16028
16391
|
this.syncNoDataContentObserver();
|
|
16029
|
-
} }, hAsync("slot", { key: '
|
|
16392
|
+
} }, hAsync("slot", { key: '3cdbaa3552166b915d0bd30a2e19324679615da4', name: "no-data" }, hAsync("span", { key: 'dd14af39eb6658f3a1d876745f80fcbe13529846' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'f11b8e0e7bb53f3ceda805ecc2b0911ea83cb79f', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
16030
16393
|
this.pagination.rowsPerPage > 0 &&
|
|
16031
16394
|
this.rowCount > 0 &&
|
|
16032
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
16395
|
+
!this.useVirtualScroll && (hAsync("div", { key: 'ac990f82d327f1dbfd5fc8e395b348b228c7b724', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '724c0b1f72efdaae442dde22391e0035c9ddf8f9', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'b5fcde2f53f9d5b497e5da3b4099f9d56f67c245', value: this.useInternalPagination
|
|
16033
16396
|
? this.innerRowsPerPage
|
|
16034
16397
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
16035
16398
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -16097,7 +16460,7 @@ class SdTable {
|
|
|
16097
16460
|
"height": [1],
|
|
16098
16461
|
"stickyHeader": [4, "sticky-header"],
|
|
16099
16462
|
"stickyColumn": [16],
|
|
16100
|
-
"
|
|
16463
|
+
"radius": [1],
|
|
16101
16464
|
"noDataLabel": [1, "no-data-label"],
|
|
16102
16465
|
"isLoading": [4, "is-loading"],
|
|
16103
16466
|
"pagination": [16],
|
|
@@ -16334,7 +16697,7 @@ class SdTabs {
|
|
|
16334
16697
|
};
|
|
16335
16698
|
}
|
|
16336
16699
|
render() {
|
|
16337
|
-
return (hAsync("div", { key: '
|
|
16700
|
+
return (hAsync("div", { key: 'fd65e555621e8b9f9c8e93578f41f1c24a8cbeda', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
16338
16701
|
const badgeName = this.getBadgeName(tab);
|
|
16339
16702
|
return (hAsync("div", { key: `tab-${index}`, 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 => {
|
|
16340
16703
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -16573,7 +16936,7 @@ class SdTag {
|
|
|
16573
16936
|
render() {
|
|
16574
16937
|
const config = this.resolvedConfig;
|
|
16575
16938
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
16576
|
-
return (hAsync("span", { key: '
|
|
16939
|
+
return (hAsync("span", { key: 'b4d86dee7290a74d73fd27a9a4133c5c0ef9b750', class: "sd-tag", style: {
|
|
16577
16940
|
'--sd-tag-background': config.background,
|
|
16578
16941
|
'--sd-tag-content': config.content,
|
|
16579
16942
|
'--sd-tag-height': config.height,
|
|
@@ -16583,7 +16946,7 @@ class SdTag {
|
|
|
16583
16946
|
'--sd-tag-font-weight': config.fontWeight,
|
|
16584
16947
|
'--sd-tag-line-height': config.lineHeight,
|
|
16585
16948
|
'--sd-tag-radius': config.radius,
|
|
16586
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
16949
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '490c703ca9ce3d0516b1da89fec18045a750d715', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
16587
16950
|
}
|
|
16588
16951
|
static get style() { return sdTagCss(); }
|
|
16589
16952
|
static get cmpMeta() { return {
|
|
@@ -16651,9 +17014,9 @@ class SdTbody {
|
|
|
16651
17014
|
}
|
|
16652
17015
|
}
|
|
16653
17016
|
render() {
|
|
16654
|
-
return (hAsync(Host, { key: '
|
|
17017
|
+
return (hAsync(Host, { key: '1f9dba3a06233de0457c6fe7d2df39e0e406fb30', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '758d795512ff546ec23863a1b9a0940f5d0f445a', class: { tbody: true } }, [
|
|
16655
17018
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
16656
|
-
hAsync("slot", { key: '
|
|
17019
|
+
hAsync("slot", { key: 'cd9755c4f082478b1e75a6efcf9b4e7a9a9767b4' }),
|
|
16657
17020
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
16658
17021
|
])));
|
|
16659
17022
|
}
|
|
@@ -16828,7 +17191,7 @@ class SdTd {
|
|
|
16828
17191
|
}
|
|
16829
17192
|
}
|
|
16830
17193
|
render() {
|
|
16831
|
-
return (hAsync(Host, { key: '
|
|
17194
|
+
return (hAsync(Host, { key: '02464050ab6179a4d19bc5885aff8c2690cc3dd6', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'a4cde26644aea2e1a99690c407b7020b20bd3981' })));
|
|
16832
17195
|
}
|
|
16833
17196
|
static get watchers() { return {
|
|
16834
17197
|
"field": [{
|
|
@@ -17008,7 +17371,7 @@ class SdTextLink {
|
|
|
17008
17371
|
this.click.emit();
|
|
17009
17372
|
};
|
|
17010
17373
|
render() {
|
|
17011
|
-
const sizeConfig = TEXT_LINK_SIZE_CONFIG[this.size];
|
|
17374
|
+
const sizeConfig = TEXT_LINK_SIZE_CONFIG[this.size] ?? TEXT_LINK_SIZE_CONFIG.sm;
|
|
17012
17375
|
const typo = this.underline ? sizeConfig.typography.underline : sizeConfig.typography.default;
|
|
17013
17376
|
const labelClassName = ['sd-text-link__label', this.labelClass].filter(Boolean).join(' ');
|
|
17014
17377
|
const iconColor = this.disabled
|
|
@@ -17022,7 +17385,7 @@ class SdTextLink {
|
|
|
17022
17385
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
17023
17386
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
17024
17387
|
};
|
|
17025
|
-
return (hAsync("span", { key: '
|
|
17388
|
+
return (hAsync("span", { key: '74e9dd05f3efa3ecfec4edca1b74c29bb7207894', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
17026
17389
|
'sd-text-link': true,
|
|
17027
17390
|
'sd-text-link--disabled': this.disabled,
|
|
17028
17391
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -17030,13 +17393,13 @@ class SdTextLink {
|
|
|
17030
17393
|
e.preventDefault();
|
|
17031
17394
|
this.handleClick();
|
|
17032
17395
|
}
|
|
17033
|
-
} }, this.icon && (hAsync("sd-icon", { key: '
|
|
17396
|
+
} }, this.icon && (hAsync("sd-icon", { key: 'e60be0764adf889af988fd887582776d44239e07', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '17996ef0620948fe1660945e68c9bb55e62fc982', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: 'b9cfc03d4295beb9956f661032ea3fd1d9acfbe9', class: "sd-text-link__arrow", style: {
|
|
17034
17397
|
width: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17035
17398
|
height: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17036
17399
|
display: 'inline-flex',
|
|
17037
17400
|
alignItems: 'center',
|
|
17038
17401
|
justifyContent: 'center',
|
|
17039
|
-
} }, hAsync("sd-icon", { key: '
|
|
17402
|
+
} }, hAsync("sd-icon", { key: '6c2e4640a767acd5e66089e7e78f27c0fb8a0955', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
|
|
17040
17403
|
}
|
|
17041
17404
|
static get style() { return sdTextLinkCss(); }
|
|
17042
17405
|
static get cmpMeta() { return {
|
|
@@ -17184,7 +17547,7 @@ class SdTextarea {
|
|
|
17184
17547
|
'--sd-system-size-field-sm-height': 'auto',
|
|
17185
17548
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
17186
17549
|
};
|
|
17187
|
-
return (hAsync("sd-field", { key: '
|
|
17550
|
+
return (hAsync("sd-field", { key: '526fc1a73f13e5170125a570c5a1c8459931aa25', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'e3c52fccc564a2488eb9e0d9399437b76e919c6a', class: "sd-textarea__content" }, hAsync("textarea", { key: '3253873da3b9591e64a6dfd170c8d9ccb4861599', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
|
|
17188
17551
|
}
|
|
17189
17552
|
static get watchers() { return {
|
|
17190
17553
|
"value": [{
|
|
@@ -17401,16 +17764,16 @@ class SdThead {
|
|
|
17401
17764
|
'--table-border-color': TABLE_BORDER.color,
|
|
17402
17765
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
17403
17766
|
};
|
|
17404
|
-
return (hAsync(Host, { key: '
|
|
17767
|
+
return (hAsync(Host, { key: '1e352d3996dc6cd60acd20c22c8c426edabaa9ea', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'd76dbdd5b03096197fe09d69c198ab3a5892106c', class: {
|
|
17405
17768
|
'thead': true,
|
|
17406
17769
|
'thead--sticky': this._stickyHeader,
|
|
17407
|
-
} }, hAsync("tr", { key: '
|
|
17770
|
+
} }, hAsync("tr", { key: 'fb0c1f8ff93ddb8682b07e9b4f55eaf56b1be41a', class: "tr" }, this._selectable && (hAsync("th", { key: 'a53b9771dbec3ef7f3888bf9fc9393c683356c50', class: {
|
|
17408
17771
|
'th': true,
|
|
17409
17772
|
'th--selected': true,
|
|
17410
17773
|
'sticky-left': true,
|
|
17411
17774
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
17412
17775
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
17413
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
17776
|
+
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '8dc233b34b68a5daca91a60364ec8faffeb4b21d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: 'bfc496c2468f3f81c1db4ffe70584a9229bd3512', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
|
|
17414
17777
|
'th': true,
|
|
17415
17778
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
17416
17779
|
'sticky-left': true,
|
|
@@ -17561,12 +17924,12 @@ class SdToast {
|
|
|
17561
17924
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
17562
17925
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
17563
17926
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
17564
|
-
return (hAsync("div", { key: '
|
|
17927
|
+
return (hAsync("div", { key: '656bf6231262cc7d974adbe5f0ce0053d03aca84', style: {
|
|
17565
17928
|
'--sd-toast-bg': typeConfig.bg,
|
|
17566
17929
|
'--sd-toast-text': typeConfig.content,
|
|
17567
17930
|
'--sd-toast-icon': iconColor,
|
|
17568
17931
|
'--sd-toast-link': linkColor,
|
|
17569
|
-
} }, hAsync("div", { key: '
|
|
17932
|
+
} }, hAsync("div", { key: '1e15e50c926ce65cea86db069dd1e79a642da01c', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '692277c23c4530d9fa0c5e26ea9d3b9759024dea', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '0a15993313f3a9d1f27d6ae727c2c248c3390701', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '9c1af0c9cedbb772b9b59ae80a0ff861066aa0de', class: "sd-toast__content" }, hAsync("span", { key: '2aacd89fe1cf31f271da027459a6cfaece3dbdbf', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '094a68e843d9ab50cea46a506d6ccdc1ebf375d7', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '7dabe182870a01cf285ee7441dfe39b07e943751', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '2a893c6ace888d8f21ce16c9dbf2a35b23bc9372', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
17570
17933
|
}
|
|
17571
17934
|
static get style() { return sdToastCss(); }
|
|
17572
17935
|
static get cmpMeta() { return {
|
|
@@ -17819,7 +18182,7 @@ class SdToastContainer {
|
|
|
17819
18182
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
17820
18183
|
const indexMap = new Map();
|
|
17821
18184
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
17822
|
-
return (hAsync("div", { key: '
|
|
18185
|
+
return (hAsync("div", { key: '44b4f34b231186fd00ef9c1a65bd68a83fced6da', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
17823
18186
|
this.expanded = true;
|
|
17824
18187
|
this.pauseTimers();
|
|
17825
18188
|
}, onMouseLeave: () => {
|
|
@@ -17977,7 +18340,7 @@ class SdToggle {
|
|
|
17977
18340
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
17978
18341
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
17979
18342
|
};
|
|
17980
|
-
return (hAsync("label", { key: '
|
|
18343
|
+
return (hAsync("label", { key: '5657698c379c71e770b18006b5f5c69c122a06a7', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '8f72307d4efd029df200243cf670377aea2cff02', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
17981
18344
|
}
|
|
17982
18345
|
static get style() { return sdToggleCss(); }
|
|
17983
18346
|
static get cmpMeta() { return {
|
|
@@ -18151,7 +18514,7 @@ class SdTooltip {
|
|
|
18151
18514
|
const bodyHTML = this.message && this.message.length > 0
|
|
18152
18515
|
? this.message.map(line => `<div>${line}</div>`).join('')
|
|
18153
18516
|
: this.slotContentHTML;
|
|
18154
|
-
return (hAsync(Fragment, { key: '
|
|
18517
|
+
return (hAsync(Fragment, { key: 'c0d000057ed61fe7b6b4d92bc0df5e0c6d42d714' }, hAsync("div", { key: '4ae084008ddec50e912fa81efbe3adbe0428d7ea', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: 'd5a8718b4e4556b989e5439b89296a259d99c636', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: 'e81f2704ddbc90a19c1e8dd0c4660c4b057ca895', ref: el => (this.menuEl = el), class: {
|
|
18155
18518
|
'sd-floating-menu': true,
|
|
18156
18519
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
18157
18520
|
[`sd-floating-menu--${placement}`]: true,
|
|
@@ -18159,7 +18522,7 @@ class SdTooltip {
|
|
|
18159
18522
|
}, style: {
|
|
18160
18523
|
'--sd-floating-bg': typeConfig.bg,
|
|
18161
18524
|
'--sd-floating-content': typeConfig.content,
|
|
18162
|
-
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '
|
|
18525
|
+
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '735cfb9956644542afb3b9f65aea127c37d756b2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '53bac0c98b652b580b53b206d3da77deac0eea77' })), hAsync("div", { key: '50c55e606002225363364ca6b5238a55a25374ba', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '7ab15f030aef1ecda2a3be0c08af2c7ab4992f1c', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
|
|
18163
18526
|
}
|
|
18164
18527
|
static get style() { return sdTooltipCss(); }
|
|
18165
18528
|
static get cmpMeta() { return {
|