@sellmate/design-system 1.3.0 → 1.5.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.table-CMqGfEui.js → component.table-qOFez3z3.js} +3 -0
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sanitize-inline-html-BZCCwH_U.js +65 -0
- package/dist/cjs/sd-calendar_2.cjs.entry.js +9 -7
- package/dist/cjs/sd-callout.cjs.entry.js +152 -0
- package/dist/cjs/sd-card.cjs.entry.js +1 -1
- package/dist/cjs/sd-checkbox.cjs.entry.js +9 -4
- package/dist/cjs/sd-chip.cjs.entry.js +1 -1
- package/dist/cjs/sd-circle-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +4 -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-dropdown-button.cjs.entry.js +6 -5
- package/dist/cjs/sd-field_3.cjs.entry.js +7 -7
- package/dist/cjs/sd-guide.cjs.entry.js +5 -4
- package/dist/cjs/sd-key-value-table.cjs.entry.js +2 -2
- 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-pagination_4.cjs.entry.js +28 -37
- package/dist/cjs/sd-popup.cjs.entry.js +6 -5
- package/dist/cjs/sd-portal.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-list-item_2.cjs.entry.js +6 -6
- package/dist/cjs/sd-select_3.cjs.entry.js +8 -8
- package/dist/cjs/sd-switch.cjs.entry.js +1 -1
- package/dist/cjs/sd-table.cjs.entry.js +37 -36
- package/dist/cjs/{sd-table.config-BIpldZtw.js → sd-table.config-DqgNOdXO.js} +5 -3
- package/dist/cjs/sd-tabs.cjs.entry.js +1 -1
- package/dist/cjs/sd-tag.cjs.entry.js +4 -2
- package/dist/cjs/sd-td.cjs.entry.js +18 -9
- 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-VmZRYp6V.js → system-wrt-tcOq.js} +12 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/sd-calendar/sd-calendar.css +5 -1
- package/dist/collection/components/sd-calendar/sd-calendar.js +26 -4
- package/dist/collection/components/sd-callout/sd-callout.config.js +45 -0
- package/dist/collection/components/sd-callout/sd-callout.css +87 -0
- package/dist/collection/components/sd-callout/sd-callout.js +114 -0
- package/dist/collection/components/sd-card/sd-card.js +1 -1
- package/dist/collection/components/sd-checkbox/sd-checkbox.js +9 -4
- package/dist/collection/components/sd-chip/sd-chip.js +1 -1
- package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +3 -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-dropdown-button/sd-dropdown-button.js +5 -4
- package/dist/collection/components/sd-field/sd-field.js +4 -4
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
- package/dist/collection/components/sd-guide/sd-guide.js +4 -3
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
- package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
- package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
- package/dist/collection/components/sd-modal-container/sd-modal-container.js +8 -0
- package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
- package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
- package/dist/collection/components/sd-popup/sd-popup.config.js +3 -4
- package/dist/collection/components/sd-popup/sd-popup.js +4 -2
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +2 -2
- package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +4 -4
- package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +2 -2
- package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
- package/dist/collection/components/sd-select/sd-select.js +4 -4
- package/dist/collection/components/sd-switch/sd-switch.js +1 -1
- package/dist/collection/components/sd-table/sd-table.js +35 -34
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +2 -2
- package/dist/collection/components/sd-table/sd-td/sd-td.js +18 -9
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +3 -3
- package/dist/collection/components/sd-table/sd-tr/sd-tr.css +6 -2
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +16 -25
- package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
- package/dist/collection/components/sd-tag/sd-tag.js +4 -2
- package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
- package/dist/collection/components/sd-toast/sd-toast.js +2 -2
- package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
- package/dist/collection/utils/html/sanitize-inline-html.js +61 -0
- package/dist/collection/utils/modal.js +2 -2
- package/dist/components/index.js +1 -1
- package/dist/components/{p-Da5i_Sa6.js → p-AO2RGdjH.js} +1 -1
- package/dist/components/{p-X-8I-A3g.js → p-B3sb3aIX.js} +1 -1
- package/dist/components/{p-CIUE4qr7.js → p-BGb86o0p.js} +1 -1
- package/dist/components/{p-C3fqSH7A.js → p-BLhu2So8.js} +1 -1
- package/dist/components/{p-INdVvadB.js → p-BSQsJHnV.js} +1 -1
- package/dist/components/{p-xX3QT-8K.js → p-BZCvsLRf.js} +1 -1
- package/dist/components/{p-BFC3Etk2.js → p-BqrZA_Nl.js} +1 -1
- package/dist/components/{p-DS7Ypvt5.js → p-C54v30vB.js} +1 -1
- package/dist/components/{p-DlREBZ-C.js → p-CJ-QHG0F.js} +1 -1
- package/dist/components/{p-kSfaCwf1.js → p-CbXb6ylI.js} +1 -1
- package/dist/components/{p-BRxXhFqt.js → p-CgYjGJEh.js} +1 -1
- package/dist/components/{p-CLxVZFEG.js → p-Co3H5873.js} +1 -1
- package/dist/components/{p-BRk9YZBe.js → p-Cvk-Luhs.js} +1 -1
- package/dist/components/{p-BeBiPTbd.js → p-D5inekTL.js} +1 -1
- package/dist/components/{p-Bs1Z5QtN.js → p-DChOBMCc.js} +1 -1
- package/dist/components/p-DGlmvjGc.js +1 -0
- package/dist/components/p-DQFHAKL_.js +1 -0
- package/dist/components/{p-CPuyhF6g.js → p-DUcbofDO.js} +1 -1
- package/dist/components/p-DZbc1mgp.js +1 -0
- package/dist/components/{p-t161LJqb.js → p-DeK3og10.js} +1 -1
- package/dist/components/{p-BjpbUGud.js → p-DmaopssQ.js} +1 -1
- package/dist/components/p-DopVneZA.js +1 -0
- package/dist/components/p-DrrsZftV.js +1 -0
- package/dist/components/{p-CpgTSxf0.js → p-DyZNk1VT.js} +1 -1
- package/dist/components/{p-oyZgWRnC.js → p-HK6Bwtz8.js} +1 -1
- package/dist/components/{p-Z5Vk33zf.js → p-IThoLpLs.js} +1 -1
- package/dist/components/{p-JlZdKw4C.js → p-J3eT660D.js} +1 -1
- package/dist/components/p-fpzgqVv1.js +1 -0
- package/dist/components/p-iCuIUhaK.js +1 -0
- package/dist/components/p-m_OtjUs1.js +1 -0
- package/dist/components/{p-BwPmM1Pm.js → p-uHITnW_J.js} +1 -1
- package/dist/components/{p-Cx_d5vsS.js → p-yH47DvUh.js} +1 -1
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-calendar.js +1 -1
- package/dist/components/sd-callout.d.ts +11 -0
- package/dist/components/sd-callout.js +1 -0
- package/dist/components/sd-card.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-chip.js +1 -1
- package/dist/components/sd-circle-progress.js +1 -1
- package/dist/components/sd-confirm-modal.js +1 -1
- package/dist/components/sd-date-picker-trigger.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker-calendar.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-dropdown-button.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-key-value-table.js +1 -1
- package/dist/components/sd-linear-progress.js +1 -1
- package/dist/components/sd-loading-container.js +1 -1
- package/dist/components/sd-loading-modal.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-popup.js +1 -1
- package/dist/components/sd-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-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-74bf0ed9.entry.js → p-06a6798d.entry.js} +1 -1
- package/dist/design-system/{p-e611dcd4.entry.js → p-0894c492.entry.js} +1 -1
- package/dist/design-system/p-14e30f67.entry.js +1 -0
- package/dist/design-system/{p-9b9bf9db.entry.js → p-1e530c87.entry.js} +1 -1
- package/dist/design-system/{p-84a94775.entry.js → p-2bdceecb.entry.js} +1 -1
- package/dist/design-system/{p-a98f9a29.entry.js → p-339cb954.entry.js} +1 -1
- package/dist/design-system/{p-a7ea1cf0.entry.js → p-352c68ae.entry.js} +1 -1
- package/dist/design-system/p-3d61e68f.entry.js +1 -0
- package/dist/design-system/{p-fe3ae346.entry.js → p-3f4a281f.entry.js} +1 -1
- package/dist/design-system/p-40bdbe5a.entry.js +1 -0
- package/dist/design-system/{p-481e6934.entry.js → p-435ae69e.entry.js} +1 -1
- package/dist/design-system/p-4473c051.entry.js +1 -0
- package/dist/design-system/p-61f4238b.entry.js +1 -0
- package/dist/design-system/p-786c72e9.entry.js +1 -0
- package/dist/design-system/{p-00854a0a.entry.js → p-78de36f2.entry.js} +1 -1
- package/dist/design-system/p-795bae4c.entry.js +1 -0
- package/dist/design-system/p-819e28fe.entry.js +1 -0
- package/dist/design-system/{p-32e2d71e.entry.js → p-843d4b16.entry.js} +1 -1
- package/dist/design-system/{p-cc97f4b4.entry.js → p-8ee990bd.entry.js} +1 -1
- package/dist/design-system/{p-fe0a5368.entry.js → p-9404ab06.entry.js} +1 -1
- package/dist/design-system/p-DGlmvjGc.js +1 -0
- package/dist/design-system/p-DQFHAKL_.js +1 -0
- package/dist/design-system/p-DZbc1mgp.js +1 -0
- package/dist/design-system/p-DopVneZA.js +1 -0
- package/dist/design-system/{p-e8e64511.entry.js → p-aac84d22.entry.js} +1 -1
- package/dist/design-system/{p-f7074386.entry.js → p-b868d747.entry.js} +1 -1
- package/dist/design-system/{p-3b8954d9.entry.js → p-b8e34533.entry.js} +1 -1
- package/dist/design-system/p-c3e4853c.entry.js +1 -0
- package/dist/design-system/{p-11b904a3.entry.js → p-d226bd61.entry.js} +1 -1
- package/dist/design-system/{p-dbeaeb31.entry.js → p-d3cc8538.entry.js} +1 -1
- package/dist/design-system/{p-ae117afa.entry.js → p-eae21a79.entry.js} +1 -1
- package/dist/design-system/{p-e23dac79.entry.js → p-fa670cc4.entry.js} +1 -1
- package/dist/esm/{component.table-BnfUIhUj.js → component.table-DQFHAKL_.js} +3 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sanitize-inline-html-DopVneZA.js +63 -0
- package/dist/esm/sd-calendar_2.entry.js +9 -7
- package/dist/esm/sd-callout.entry.js +150 -0
- package/dist/esm/sd-card.entry.js +1 -1
- package/dist/esm/sd-checkbox.entry.js +9 -4
- package/dist/esm/sd-chip.entry.js +1 -1
- package/dist/esm/sd-circle-progress.entry.js +2 -2
- package/dist/esm/sd-confirm-modal_2.entry.js +4 -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-dropdown-button.entry.js +6 -5
- package/dist/esm/sd-field_3.entry.js +7 -7
- package/dist/esm/sd-guide.entry.js +5 -4
- package/dist/esm/sd-key-value-table.entry.js +2 -2
- package/dist/esm/sd-linear-progress.entry.js +2 -2
- package/dist/esm/sd-loading-container.entry.js +2 -2
- package/dist/esm/sd-pagination_4.entry.js +28 -37
- package/dist/esm/sd-popup.entry.js +6 -5
- package/dist/esm/sd-portal.entry.js +1 -1
- package/dist/esm/sd-select-list-item_2.entry.js +6 -6
- package/dist/esm/sd-select_3.entry.js +8 -8
- package/dist/esm/sd-switch.entry.js +1 -1
- package/dist/esm/{sd-table.config-B-VgXXT7.js → sd-table.config-CFHtQ8LX.js} +5 -3
- package/dist/esm/sd-table.entry.js +37 -36
- package/dist/esm/sd-tabs.entry.js +1 -1
- package/dist/esm/sd-tag.entry.js +4 -2
- package/dist/esm/sd-td.entry.js +18 -9
- 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-GBlVDmy4.js → system-DGlmvjGc.js} +12 -1
- package/dist/types/components/sd-calendar/sd-calendar.d.ts +1 -0
- package/dist/types/components/sd-callout/sd-callout.config.d.ts +34 -0
- package/dist/types/components/sd-callout/sd-callout.d.ts +11 -0
- package/dist/types/components/sd-table/sd-table.d.ts +1 -1
- package/dist/types/components/sd-table/sd-td/sd-td.d.ts +2 -2
- package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +1 -2
- package/dist/types/components.d.ts +43 -0
- package/dist/types/utils/html/sanitize-inline-html.d.ts +1 -0
- package/hydrate/index.js +397 -150
- package/hydrate/index.mjs +397 -150
- package/package.json +1 -1
- package/dist/components/p-B8o25hOw.js +0 -1
- package/dist/components/p-BkWaPXXj.js +0 -1
- package/dist/components/p-BnfUIhUj.js +0 -1
- package/dist/components/p-CyObYB-g.js +0 -1
- package/dist/components/p-GBlVDmy4.js +0 -1
- package/dist/components/p-WAsath62.js +0 -1
- package/dist/components/p-mmdt-WnS.js +0 -1
- package/dist/design-system/p-563b6fc2.entry.js +0 -1
- package/dist/design-system/p-8f4ccae4.entry.js +0 -1
- package/dist/design-system/p-9f7f1b8b.entry.js +0 -1
- package/dist/design-system/p-BnfUIhUj.js +0 -1
- package/dist/design-system/p-GBlVDmy4.js +0 -1
- package/dist/design-system/p-a640e509.entry.js +0 -1
- package/dist/design-system/p-a97033a2.entry.js +0 -1
- package/dist/design-system/p-f721a6c6.entry.js +0 -1
- package/dist/design-system/p-fc5c4f85.entry.js +0 -1
- package/dist/design-system/p-ffaa4b5d.entry.js +0 -1
- package/dist/design-system/p-mmdt-WnS.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -6716,7 +6716,7 @@ const CALENDAR_LAYOUT = {
|
|
|
6716
6716
|
};
|
|
6717
6717
|
const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
|
|
6718
6718
|
|
|
6719
|
-
const sdCalendarCss = () => `sd-calendar{display:block}sd-calendar .sd-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);width:328px;min-height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)
|
|
6719
|
+
const sdCalendarCss = () => `sd-calendar{display:block}sd-calendar .sd-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);width:328px;min-height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);user-select:none}sd-calendar .sd-calendar--elevated{box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}sd-calendar .sd-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-calendar .sd-calendar__nav-group-month{width:100%}sd-calendar .sd-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-calendar .sd-calendar__label-month{width:100%}sd-calendar .sd-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-calendar .sd-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-calendar .sd-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-calendar .sd-calendar__day{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:var(--calendar-day-size);min-height:var(--calendar-day-circle-size);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-calendar .sd-calendar__day:not(:disabled):hover .sd-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-calendar .sd-calendar__day--today .sd-calendar__day-circle{font-weight:700}sd-calendar .sd-calendar__day--selected .sd-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--selected:not(:disabled):hover .sd-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-calendar .sd-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-calendar .sd-calendar__day--empty{visibility:hidden;pointer-events:none}sd-calendar .sd-calendar__dot-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--calendar-day-dot-gap);box-sizing:border-box;width:100%;min-height:14px;padding-top:var(--calendar-day-dot-padding-y);padding-bottom:var(--calendar-day-dot-padding-y)}sd-calendar .sd-calendar__dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%}sd-calendar .sd-calendar__divider-bottom{display:block;width:100%;height:1px;background:var(--calendar-header-divider)}sd-calendar .sd-calendar__legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:var(--calendar-legend-group-gap);row-gap:4px;font-size:var(--calendar-legend-font-size);line-height:var(--calendar-legend-line-height);font-weight:var(--calendar-legend-font-weight);color:var(--calendar-day-text)}sd-calendar .sd-calendar__legend-item{display:inline-flex;align-items:center;gap:var(--calendar-legend-gap)}sd-calendar .sd-calendar__legend-dot{display:inline-block;width:var(--calendar-day-dot-size);height:var(--calendar-day-dot-size);border-radius:50%;flex-shrink:0}sd-calendar .sd-calendar__legend-label{display:inline-block}`;
|
|
6720
6720
|
|
|
6721
6721
|
class SdCalendar {
|
|
6722
6722
|
constructor(hostRef) {
|
|
@@ -6727,6 +6727,7 @@ class SdCalendar {
|
|
|
6727
6727
|
value = null;
|
|
6728
6728
|
selectable;
|
|
6729
6729
|
events;
|
|
6730
|
+
elevated = false;
|
|
6730
6731
|
currentYear;
|
|
6731
6732
|
currentMonth;
|
|
6732
6733
|
update;
|
|
@@ -6892,7 +6893,8 @@ class SdCalendar {
|
|
|
6892
6893
|
};
|
|
6893
6894
|
const eventMap = this.eventMap;
|
|
6894
6895
|
const legend = this.legendItems;
|
|
6895
|
-
|
|
6896
|
+
const hasEvents = (this.events?.length ?? 0) > 0;
|
|
6897
|
+
return (hAsync("div", { key: '0ed0317b3cecffea4015de8688888e0ab2a38586', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, hAsync("div", { key: 'b915f275a31617711d06d98c8a4d9369ddd36af5', class: "sd-calendar__header" }, hAsync("div", { key: 'cd3b625e4e26af4b11f6af8b22c02099e8ab68a5', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: 'e0ebfed48a7fdb61fd082371e7247176c02a8fb1', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '6bfebc94dce54ca472ad5b3e03a7630e32676c3f', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '2e42ad52cd7d1b5d3502d578347c997910f3efc3', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '95be4ab5e03d7378e82006221f190ffd55659cf1', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'edce7cf91a873cdaeed68e50372bdfa20af7507d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '9ba274e9db32177d30d8c218303384855b7a3f60', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: 'bc113063e769fe12c2a39732cd82060752b7d9eb', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '52cfde203e06334c5eee85abc9d82d6889bf511c', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: '9ae80aee03a4e6392a1d9a4ef28e565db20faea3', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '7c47907311ea24f1af030931b8efd11955e55436', class: "sd-calendar__grid" }, this.cells.map(cell => {
|
|
6896
6898
|
const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
|
|
6897
6899
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
6898
6900
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -6903,10 +6905,10 @@ class SdCalendar {
|
|
|
6903
6905
|
'sd-calendar__day--today': isToday,
|
|
6904
6906
|
'sd-calendar__day--selected': isSelected,
|
|
6905
6907
|
'sd-calendar__day--disabled': isDisabled,
|
|
6906
|
-
}, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''),
|
|
6908
|
+
}, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
|
|
6907
6909
|
})), legend.length > 0 && [
|
|
6908
|
-
hAsync("span", { key: '
|
|
6909
|
-
hAsync("div", { key: '
|
|
6910
|
+
hAsync("span", { key: '4ba064cad3188db8342f51ca017e4bf5af8aa460', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
|
|
6911
|
+
hAsync("div", { key: 'ac132a1f1f948e618ee75d4c01a1c99a0dfc2c0a', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
|
|
6910
6912
|
]));
|
|
6911
6913
|
}
|
|
6912
6914
|
static get watchers() { return {
|
|
@@ -6922,6 +6924,7 @@ class SdCalendar {
|
|
|
6922
6924
|
"value": [1025],
|
|
6923
6925
|
"selectable": [16],
|
|
6924
6926
|
"events": [16],
|
|
6927
|
+
"elevated": [4],
|
|
6925
6928
|
"currentYear": [32],
|
|
6926
6929
|
"currentMonth": [32]
|
|
6927
6930
|
},
|
|
@@ -6931,6 +6934,225 @@ class SdCalendar {
|
|
|
6931
6934
|
}; }
|
|
6932
6935
|
}
|
|
6933
6936
|
|
|
6937
|
+
const callout$1 = {
|
|
6938
|
+
radius: "8",
|
|
6939
|
+
border: {
|
|
6940
|
+
width: "1"
|
|
6941
|
+
},
|
|
6942
|
+
body: {
|
|
6943
|
+
gap: "2",
|
|
6944
|
+
typography: {
|
|
6945
|
+
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",
|
|
6946
|
+
fontSize: "12",
|
|
6947
|
+
fontWeight: "400",
|
|
6948
|
+
lineHeight: "20"},
|
|
6949
|
+
paddingX: "12",
|
|
6950
|
+
paddingY: "8"
|
|
6951
|
+
},
|
|
6952
|
+
"default": {
|
|
6953
|
+
bg: "#F9F9F9",
|
|
6954
|
+
border: "#E1E1E1",
|
|
6955
|
+
content: "#555555"
|
|
6956
|
+
},
|
|
6957
|
+
danger: {
|
|
6958
|
+
bg: "#FCEFEF",
|
|
6959
|
+
border: "#FFB5B5",
|
|
6960
|
+
content: "#222222",
|
|
6961
|
+
title: {
|
|
6962
|
+
bg: "#FB4444",
|
|
6963
|
+
paddingX: "24",
|
|
6964
|
+
gap: "2",
|
|
6965
|
+
typography: {
|
|
6966
|
+
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",
|
|
6967
|
+
fontWeight: "700",
|
|
6968
|
+
fontSize: "16",
|
|
6969
|
+
lineHeight: "26"
|
|
6970
|
+
},
|
|
6971
|
+
color: "#FFFFFF",
|
|
6972
|
+
icon: "24"
|
|
6973
|
+
}
|
|
6974
|
+
}
|
|
6975
|
+
};
|
|
6976
|
+
var calloutTokens = {
|
|
6977
|
+
callout: callout$1
|
|
6978
|
+
};
|
|
6979
|
+
|
|
6980
|
+
const { callout } = calloutTokens;
|
|
6981
|
+
const CALLOUT_LAYOUT = {
|
|
6982
|
+
radius: `${callout.radius}px`,
|
|
6983
|
+
borderWidth: `${callout.border.width}px`,
|
|
6984
|
+
bodyPaddingX: `${callout.body.paddingX}px`,
|
|
6985
|
+
bodyPaddingY: `${callout.body.paddingY}px`,
|
|
6986
|
+
bodyGap: `${callout.body.gap}px`,
|
|
6987
|
+
titlePaddingX: `${callout.danger.title.paddingX}px`,
|
|
6988
|
+
titleGap: `${callout.danger.title.gap}px`,
|
|
6989
|
+
titleIconSize: Number(callout.danger.title.icon),
|
|
6990
|
+
};
|
|
6991
|
+
const CALLOUT_TYPOGRAPHY = {
|
|
6992
|
+
body: {
|
|
6993
|
+
fontFamily: callout.body.typography.fontFamily,
|
|
6994
|
+
fontSize: `${callout.body.typography.fontSize}px`,
|
|
6995
|
+
fontWeight: callout.body.typography.fontWeight,
|
|
6996
|
+
lineHeight: `${callout.body.typography.lineHeight}px`,
|
|
6997
|
+
},
|
|
6998
|
+
title: {
|
|
6999
|
+
fontFamily: callout.danger.title.typography.fontFamily,
|
|
7000
|
+
fontSize: `${callout.danger.title.typography.fontSize}px`,
|
|
7001
|
+
fontWeight: callout.danger.title.typography.fontWeight,
|
|
7002
|
+
lineHeight: `${callout.danger.title.typography.lineHeight}px`,
|
|
7003
|
+
},
|
|
7004
|
+
};
|
|
7005
|
+
const CALLOUT_TYPE_CONFIG = {
|
|
7006
|
+
default: {
|
|
7007
|
+
bg: callout.default.bg,
|
|
7008
|
+
border: callout.default.border,
|
|
7009
|
+
content: callout.default.content,
|
|
7010
|
+
},
|
|
7011
|
+
danger: {
|
|
7012
|
+
bg: callout.danger.bg,
|
|
7013
|
+
border: callout.danger.border,
|
|
7014
|
+
content: callout.danger.content,
|
|
7015
|
+
titleBg: callout.danger.title.bg,
|
|
7016
|
+
titleColor: callout.danger.title.color,
|
|
7017
|
+
},
|
|
7018
|
+
};
|
|
7019
|
+
const DANGER_TITLE_LABEL = '주의사항';
|
|
7020
|
+
const TYPE_ICON = {
|
|
7021
|
+
default: undefined,
|
|
7022
|
+
danger: 'warningFill',
|
|
7023
|
+
};
|
|
7024
|
+
|
|
7025
|
+
const ALLOWED_INLINE_TAGS = new Set(['B', 'STRONG', 'I', 'EM', 'BR', 'SPAN']);
|
|
7026
|
+
const DROP_CONTENT_TAGS = new Set([
|
|
7027
|
+
'SCRIPT',
|
|
7028
|
+
'STYLE',
|
|
7029
|
+
'IFRAME',
|
|
7030
|
+
'OBJECT',
|
|
7031
|
+
'EMBED',
|
|
7032
|
+
'META',
|
|
7033
|
+
'LINK',
|
|
7034
|
+
'BASE',
|
|
7035
|
+
'NOSCRIPT',
|
|
7036
|
+
]);
|
|
7037
|
+
const escapeHtml = (value) => value
|
|
7038
|
+
.replaceAll('&', '&')
|
|
7039
|
+
.replaceAll('<', '<')
|
|
7040
|
+
.replaceAll('>', '>')
|
|
7041
|
+
.replaceAll('"', '"')
|
|
7042
|
+
.replaceAll("'", ''');
|
|
7043
|
+
const createSanitizerTemplate = () => {
|
|
7044
|
+
if (typeof document === 'undefined') {
|
|
7045
|
+
return null;
|
|
7046
|
+
}
|
|
7047
|
+
return document.createElement('template');
|
|
7048
|
+
};
|
|
7049
|
+
const sanitizeNode = (node, doc) => {
|
|
7050
|
+
if (node.nodeType === Node.COMMENT_NODE) {
|
|
7051
|
+
node.remove();
|
|
7052
|
+
return;
|
|
7053
|
+
}
|
|
7054
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
7055
|
+
return;
|
|
7056
|
+
}
|
|
7057
|
+
const element = node;
|
|
7058
|
+
const tagName = element.tagName;
|
|
7059
|
+
if (DROP_CONTENT_TAGS.has(tagName)) {
|
|
7060
|
+
element.remove();
|
|
7061
|
+
return;
|
|
7062
|
+
}
|
|
7063
|
+
Array.from(element.childNodes).forEach(child => sanitizeNode(child));
|
|
7064
|
+
Array.from(element.attributes).forEach(attr => element.removeAttribute(attr.name));
|
|
7065
|
+
if (ALLOWED_INLINE_TAGS.has(tagName)) {
|
|
7066
|
+
return;
|
|
7067
|
+
}
|
|
7068
|
+
const parent = element.parentNode;
|
|
7069
|
+
if (parent == null) {
|
|
7070
|
+
return;
|
|
7071
|
+
}
|
|
7072
|
+
while (element.firstChild) {
|
|
7073
|
+
parent.insertBefore(element.firstChild, element);
|
|
7074
|
+
}
|
|
7075
|
+
parent.removeChild(element);
|
|
7076
|
+
};
|
|
7077
|
+
const sanitizeInlineHtml = (value) => {
|
|
7078
|
+
const template = createSanitizerTemplate();
|
|
7079
|
+
if (template == null) {
|
|
7080
|
+
return escapeHtml(value);
|
|
7081
|
+
}
|
|
7082
|
+
template.innerHTML = value;
|
|
7083
|
+
Array.from(template.content.childNodes).forEach(child => sanitizeNode(child));
|
|
7084
|
+
return template.innerHTML;
|
|
7085
|
+
};
|
|
7086
|
+
|
|
7087
|
+
const sdCalloutCss = () => `@charset "UTF-8";sd-callout{display:block;width:fit-content}sd-callout .sd-callout{display:inline-flex;align-items:stretch;width:fit-content;border:var(--sd-callout-border-width) solid var(--sd-callout-border);border-radius:var(--sd-callout-radius);background-color:var(--sd-callout-bg);color:var(--sd-callout-content);overflow:hidden}sd-callout .sd-callout__title{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--sd-callout-title-gap);padding:8px var(--sd-callout-title-padding-x);background-color:var(--sd-callout-title-bg);color:var(--sd-callout-title-color);font-family:var(--sd-callout-title-font-family);font-size:var(--sd-callout-title-font-size);font-weight:var(--sd-callout-title-font-weight);line-height:var(--sd-callout-title-line-height);flex-shrink:0}sd-callout .sd-callout__title-text{white-space:nowrap}sd-callout .sd-callout__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap);padding:var(--sd-callout-body-padding-y) var(--sd-callout-body-padding-x);font-family:var(--sd-callout-body-font-family);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:var(--sd-callout-body-gap)}sd-callout .sd-callout__list__item{display:flex;align-items:flex-start;color:var(--sd-callout-content)}sd-callout .sd-callout__list__item p{margin:0;padding:0;flex:1;min-width:0;word-break:break-word}sd-callout .sd-callout__list__item::before{display:block;flex-shrink:0;text-align:center;color:var(--sd-callout-content);font-size:var(--sd-callout-body-font-size);font-weight:var(--sd-callout-body-font-weight);line-height:var(--sd-callout-body-line-height)}sd-callout .sd-callout__list__item--depth-1::before{content:"-";width:24px}sd-callout .sd-callout__list__item--depth-2{padding-left:32px}sd-callout .sd-callout__list__item--depth-2::before{content:"•";width:24px}`;
|
|
7088
|
+
|
|
7089
|
+
class SdCallout {
|
|
7090
|
+
constructor(hostRef) {
|
|
7091
|
+
registerInstance(this, hostRef);
|
|
7092
|
+
}
|
|
7093
|
+
type = 'default';
|
|
7094
|
+
message = [];
|
|
7095
|
+
get calloutStyle() {
|
|
7096
|
+
const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
|
|
7097
|
+
return {
|
|
7098
|
+
'--sd-callout-bg': typeConfig.bg,
|
|
7099
|
+
'--sd-callout-border': typeConfig.border,
|
|
7100
|
+
'--sd-callout-border-width': CALLOUT_LAYOUT.borderWidth,
|
|
7101
|
+
'--sd-callout-content': typeConfig.content,
|
|
7102
|
+
'--sd-callout-radius': CALLOUT_LAYOUT.radius,
|
|
7103
|
+
'--sd-callout-body-padding-x': CALLOUT_LAYOUT.bodyPaddingX,
|
|
7104
|
+
'--sd-callout-body-padding-y': CALLOUT_LAYOUT.bodyPaddingY,
|
|
7105
|
+
'--sd-callout-body-gap': CALLOUT_LAYOUT.bodyGap,
|
|
7106
|
+
'--sd-callout-body-font-family': CALLOUT_TYPOGRAPHY.body.fontFamily,
|
|
7107
|
+
'--sd-callout-body-font-size': CALLOUT_TYPOGRAPHY.body.fontSize,
|
|
7108
|
+
'--sd-callout-body-font-weight': CALLOUT_TYPOGRAPHY.body.fontWeight,
|
|
7109
|
+
'--sd-callout-body-line-height': CALLOUT_TYPOGRAPHY.body.lineHeight,
|
|
7110
|
+
'--sd-callout-title-bg': typeConfig.titleBg ?? 'transparent',
|
|
7111
|
+
'--sd-callout-title-color': typeConfig.titleColor ?? 'inherit',
|
|
7112
|
+
'--sd-callout-title-padding-x': CALLOUT_LAYOUT.titlePaddingX,
|
|
7113
|
+
'--sd-callout-title-gap': CALLOUT_LAYOUT.titleGap,
|
|
7114
|
+
'--sd-callout-title-font-family': CALLOUT_TYPOGRAPHY.title.fontFamily,
|
|
7115
|
+
'--sd-callout-title-font-size': CALLOUT_TYPOGRAPHY.title.fontSize,
|
|
7116
|
+
'--sd-callout-title-font-weight': CALLOUT_TYPOGRAPHY.title.fontWeight,
|
|
7117
|
+
'--sd-callout-title-line-height': CALLOUT_TYPOGRAPHY.title.lineHeight,
|
|
7118
|
+
};
|
|
7119
|
+
}
|
|
7120
|
+
renderListItem(msg, depth = 0) {
|
|
7121
|
+
if (Array.isArray(msg)) {
|
|
7122
|
+
return msg.flatMap(m => this.renderListItem(m, depth + 1));
|
|
7123
|
+
}
|
|
7124
|
+
return [this.renderLi(msg, depth)];
|
|
7125
|
+
}
|
|
7126
|
+
renderLi = (msg, depth) => {
|
|
7127
|
+
const safeDepth = Math.min(Math.max(depth, 1), 2);
|
|
7128
|
+
return (hAsync("li", { class: `sd-callout__list__item sd-callout__list__item--depth-${safeDepth}` }, hAsync("p", { innerHTML: sanitizeInlineHtml(msg) })));
|
|
7129
|
+
};
|
|
7130
|
+
renderBody() {
|
|
7131
|
+
return hAsync("ul", { class: "sd-callout__list" }, this.renderListItem(this.message));
|
|
7132
|
+
}
|
|
7133
|
+
renderTitle() {
|
|
7134
|
+
const iconName = TYPE_ICON[this.type];
|
|
7135
|
+
const titleColor = CALLOUT_TYPE_CONFIG[this.type].titleColor;
|
|
7136
|
+
return (hAsync("div", { class: "sd-callout__title" }, iconName && (hAsync("sd-icon", { name: iconName, size: CALLOUT_LAYOUT.titleIconSize, color: titleColor })), hAsync("span", { class: "sd-callout__title-text" }, DANGER_TITLE_LABEL)));
|
|
7137
|
+
}
|
|
7138
|
+
render() {
|
|
7139
|
+
const showTitle = this.type === 'danger';
|
|
7140
|
+
return (hAsync("div", { key: 'ce91120e7c71907e6c07728554e340ad552d6e34', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), hAsync("div", { key: '56b55c2fed40e59023856029b8c86c35b29d26e5', class: "sd-callout__body" }, this.renderBody())));
|
|
7141
|
+
}
|
|
7142
|
+
static get style() { return sdCalloutCss(); }
|
|
7143
|
+
static get cmpMeta() { return {
|
|
7144
|
+
"$flags$": 512,
|
|
7145
|
+
"$tagName$": "sd-callout",
|
|
7146
|
+
"$members$": {
|
|
7147
|
+
"type": [513],
|
|
7148
|
+
"message": [16]
|
|
7149
|
+
},
|
|
7150
|
+
"$listeners$": undefined,
|
|
7151
|
+
"$lazyBundleId$": "-",
|
|
7152
|
+
"$attrsToReflect$": [["type", "type"]]
|
|
7153
|
+
}; }
|
|
7154
|
+
}
|
|
7155
|
+
|
|
6934
7156
|
const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
|
|
6935
7157
|
|
|
6936
7158
|
class SdCard {
|
|
@@ -6940,7 +7162,7 @@ class SdCard {
|
|
|
6940
7162
|
bordered = false;
|
|
6941
7163
|
sdClass = '';
|
|
6942
7164
|
render() {
|
|
6943
|
-
return (hAsync(Fragment, { key: '
|
|
7165
|
+
return (hAsync(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, hAsync("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
|
|
6944
7166
|
}
|
|
6945
7167
|
static get style() { return sdCardCss(); }
|
|
6946
7168
|
static get cmpMeta() { return {
|
|
@@ -7111,7 +7333,12 @@ class SdCheckbox {
|
|
|
7111
7333
|
this.hasWarnedMissingVal = true;
|
|
7112
7334
|
}
|
|
7113
7335
|
const valueSet = new Set(this.value);
|
|
7114
|
-
valueSet.has(this.val)
|
|
7336
|
+
if (valueSet.has(this.val)) {
|
|
7337
|
+
valueSet.delete(this.val);
|
|
7338
|
+
}
|
|
7339
|
+
else {
|
|
7340
|
+
valueSet.add(this.val);
|
|
7341
|
+
}
|
|
7115
7342
|
newValue = Array.from(valueSet);
|
|
7116
7343
|
}
|
|
7117
7344
|
else if (this.value === null) {
|
|
@@ -7144,13 +7371,13 @@ class SdCheckbox {
|
|
|
7144
7371
|
'--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
|
|
7145
7372
|
'--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
|
|
7146
7373
|
};
|
|
7147
|
-
return (hAsync("label", { key: '
|
|
7374
|
+
return (hAsync("label", { key: '1e1ba8ab22e34327cfdfb8d236aba0e1ff2806f6', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '82b852e0fb3ca94c460b7181ae1c575b361ddd4d', type: "checkbox", ref: el => {
|
|
7148
7375
|
this.inputEl = el;
|
|
7149
|
-
}, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '
|
|
7376
|
+
}, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: 'e7a32ccbb915c857d188fecde0b388e15edebdfb', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
|
|
7150
7377
|
? CHECKBOX_COLORS.checked.iconDisabled
|
|
7151
7378
|
: this.inverse
|
|
7152
7379
|
? CHECKBOX_COLORS.checked.iconInverse
|
|
7153
|
-
: CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '
|
|
7380
|
+
: CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '396b7aa27a10428e5d9d24a3f523c3a384d4e463', class: "sd-checkbox__label" }, this.label)));
|
|
7154
7381
|
}
|
|
7155
7382
|
static get watchers() { return {
|
|
7156
7383
|
"value": [{
|
|
@@ -7464,7 +7691,7 @@ class SdChip {
|
|
|
7464
7691
|
'--sd-chip-font-weight': typography.fontWeight,
|
|
7465
7692
|
'--sd-chip-line-height': typography.lineHeight,
|
|
7466
7693
|
};
|
|
7467
|
-
return (hAsync("span", { key: '
|
|
7694
|
+
return (hAsync("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
|
|
7468
7695
|
'sd-chip': true,
|
|
7469
7696
|
[`sd-chip--${state}`]: true,
|
|
7470
7697
|
'sd-chip--disabled': this.disabled,
|
|
@@ -7556,8 +7783,19 @@ const color = {
|
|
|
7556
7783
|
strong: "#006AC1"},
|
|
7557
7784
|
grey: {
|
|
7558
7785
|
strong: "#737373"}};
|
|
7786
|
+
const shadow = {
|
|
7787
|
+
spread: {
|
|
7788
|
+
md: {
|
|
7789
|
+
x: "0",
|
|
7790
|
+
y: "0",
|
|
7791
|
+
blur: "24",
|
|
7792
|
+
spread: "0",
|
|
7793
|
+
color: "rgba(34,34,34,0.2)"}
|
|
7794
|
+
}};
|
|
7559
7795
|
var systemTokens = {
|
|
7560
|
-
color: color
|
|
7796
|
+
color: color,
|
|
7797
|
+
shadow: shadow
|
|
7798
|
+
};
|
|
7561
7799
|
|
|
7562
7800
|
const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
|
|
7563
7801
|
const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.fg.tertiary;
|
|
@@ -7617,7 +7855,7 @@ class SdCircleProgress {
|
|
|
7617
7855
|
}
|
|
7618
7856
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
7619
7857
|
const showPercent = !this.indeterminate;
|
|
7620
|
-
return (hAsync(Host, { key: '
|
|
7858
|
+
return (hAsync(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, hAsync("svg", { key: '669fa503cc6007f48f35474b08e4359de695026d', 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: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: 'e409da4a5c34adcd8744f16040ae9d5d6019a415', 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: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
|
|
7621
7859
|
}
|
|
7622
7860
|
static get style() { return sdCircleProgressCss(); }
|
|
7623
7861
|
static get cmpMeta() { return {
|
|
@@ -7733,9 +7971,9 @@ class SdConfirmModal {
|
|
|
7733
7971
|
const type = this.resolvedType;
|
|
7734
7972
|
const iconName = CONFIRM_MODAL_ICON_MAP[type];
|
|
7735
7973
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
|
|
7736
|
-
return (hAsync("div", { key: '
|
|
7974
|
+
return (hAsync("div", { key: 'f9a1d63c1cd047969c72d0e71ccd3b1cf30bac15', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '8f1e4ec22a12ad9347c8c8c843f6dbb91591b289', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '8adada47e2dc0a6677cdf004ca8cad8794123d03', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'ddc0636d2cd8333aa0d5a3f242dbf2d57759fc5b', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: '66d4c779f4269824937306ca34a0b51e6208d03f', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '87634b26cba0fb24115f0cd59fcc7956f9fde53c', 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: '0b495d1393cf029e8b07f9041c51e344ff7cb5da', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
7737
7975
|
this.customContentRef = el;
|
|
7738
|
-
} })) : (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: '
|
|
7976
|
+
} })) : (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: '09d34f47a466e4277f1bb2215a3b087bc78e240d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '2a62193311791f84b6eca22a49cff8a0fc65d5a7', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '4c800376dec7ca035b2aaaaac00738851829108d', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: 'dcb473b7b6ce29983d89df6c288526071962ac01', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
|
|
7739
7977
|
}
|
|
7740
7978
|
static get style() { return sdConfirmModalCss(); }
|
|
7741
7979
|
static get cmpMeta() { return {
|
|
@@ -7961,9 +8199,9 @@ class SdDatePicker {
|
|
|
7961
8199
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
7962
8200
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
7963
8201
|
};
|
|
7964
|
-
return (hAsync("sd-field", { key: '
|
|
8202
|
+
return (hAsync("sd-field", { key: '35d821e9a21a09e4b2dc0d47f9a95d895c4f9dc4', 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: '21fe3c0ab5dff10265139111de741216fb06e4e4', class: "sd-date-picker", ref: el => {
|
|
7965
8203
|
this.triggerRef = el;
|
|
7966
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
8204
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'b9fd9b90afa512aefdd4b227c66d0b4660b69318', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'b6e439d2b507922cc2e345fe1fba856d77441cbc', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'ae09060fec5542b9e30d051133f4bca3c772f5d9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
7967
8205
|
}
|
|
7968
8206
|
static get watchers() { return {
|
|
7969
8207
|
"isOpen": [{
|
|
@@ -8046,7 +8284,7 @@ class SdDatePickerTrigger {
|
|
|
8046
8284
|
? DATEPICKER_COLORS.icon.disabled
|
|
8047
8285
|
: DATEPICKER_COLORS.icon.default,
|
|
8048
8286
|
};
|
|
8049
|
-
return (hAsync("div", { key: '
|
|
8287
|
+
return (hAsync("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
8050
8288
|
'sd-date-picker-trigger': true,
|
|
8051
8289
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
8052
8290
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -8054,7 +8292,7 @@ class SdDatePickerTrigger {
|
|
|
8054
8292
|
e.preventDefault();
|
|
8055
8293
|
this.handleClick();
|
|
8056
8294
|
}
|
|
8057
|
-
} }, hAsync("sd-icon", { key: '
|
|
8295
|
+
} }, hAsync("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
8058
8296
|
}
|
|
8059
8297
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
8060
8298
|
static get cmpMeta() { return {
|
|
@@ -8474,7 +8712,7 @@ class SdDateRangePickerCalendar {
|
|
|
8474
8712
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
8475
8713
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
8476
8714
|
};
|
|
8477
|
-
return (hAsync(Fragment, { key: '
|
|
8715
|
+
return (hAsync(Fragment, { key: 'b4082936889d6bed77917d9b06aafa3c80d413a7' }, hAsync("div", { key: 'baf10fa376bf32982816258f950edf65d5622a99', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'bacc88f756b64f4382b1c8c648269bb2c233dc54', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'dcebf3cd120e2e606784c365c309d4c48296a5ae', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
8478
8716
|
}
|
|
8479
8717
|
static get watchers() { return {
|
|
8480
8718
|
"value": [{
|
|
@@ -8830,12 +9068,12 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8830
9068
|
if (!item.disabled) {
|
|
8831
9069
|
this.itemIndex = index;
|
|
8832
9070
|
}
|
|
8833
|
-
} }, 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: item.label })));
|
|
9071
|
+
} }, 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) })));
|
|
8834
9072
|
})))));
|
|
8835
9073
|
}
|
|
8836
9074
|
render() {
|
|
8837
9075
|
const { config, preset } = this.resolvedConfig;
|
|
8838
|
-
return (hAsync("div", { key: '
|
|
9076
|
+
return (hAsync("div", { key: '69cc705c92386162bfe3eaaec92d60c5daedd673', class: "sd-dropdown-button" }, hAsync("button", { key: 'c054cd7f979a5b5d7e6266fc098722b13f6419f6', 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: {
|
|
8839
9077
|
'--sd-dropdown-button-bg': config.color,
|
|
8840
9078
|
'--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
|
|
8841
9079
|
'--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
|
|
@@ -8845,10 +9083,10 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8845
9083
|
'--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
|
|
8846
9084
|
'--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
|
|
8847
9085
|
'--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
|
|
8848
|
-
} }, hAsync("span", { key: '
|
|
9086
|
+
} }, hAsync("span", { key: 'de889d149ece2a5856dc37940cc8f8cc612546d7', class: "sd-dropdown-button__trigger-label" }, this.label), hAsync("span", { key: '8ae62fe45e6f292f4269da090adda28c6fd47854', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), hAsync("span", { key: 'c2bc641416469fc2a375f07cb68f36e1c782ba48', class: {
|
|
8849
9087
|
'sd-dropdown-button__trigger-icon': true,
|
|
8850
9088
|
'sd-dropdown-button__trigger-icon--open': this.isOpen,
|
|
8851
|
-
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: '
|
|
9089
|
+
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: '46111923f6a95fdd789aa9493a6941218e1fe0f5', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
|
|
8852
9090
|
}
|
|
8853
9091
|
static get watchers() { return {
|
|
8854
9092
|
"isOpen": [{
|
|
@@ -9121,20 +9359,20 @@ class SdField {
|
|
|
9121
9359
|
: {}),
|
|
9122
9360
|
}
|
|
9123
9361
|
: {};
|
|
9124
|
-
return (hAsync("div", { key: '
|
|
9362
|
+
return (hAsync("div", { key: '1cc135c77708546f23b699bf337c018f6c4d315e', class: {
|
|
9125
9363
|
'sd-field': true,
|
|
9126
9364
|
'sd-field--has-label': this.label !== '',
|
|
9127
9365
|
'sd-field--has-addon': addon !== '',
|
|
9128
9366
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
9129
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '
|
|
9367
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '506ace23aa27ad50a8ad60dcf6c71a0bdf04d7af', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '41b77a52c21eef8c38127362423378f1b9a6cb77', class: "sd-field__main", style: this.width !== '' && this.width !== 0
|
|
9130
9368
|
? {
|
|
9131
9369
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
9132
9370
|
flex: 'none',
|
|
9133
9371
|
}
|
|
9134
|
-
: {} }, hAsync("div", { key: '
|
|
9372
|
+
: {} }, hAsync("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
|
|
9135
9373
|
'sd-field__control': true,
|
|
9136
9374
|
'sd-field__control--has-addon': addon !== '',
|
|
9137
|
-
} }, addon && hAsync("div", { key: '
|
|
9375
|
+
} }, addon && hAsync("div", { key: '39a28adaa959b89d3724672910157662e50b35ed', class: "sd-field__addon" }, addon), hAsync("slot", { key: '0c9360e8644df658c389554c13a04bc22985e84d' })), 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))))));
|
|
9138
9376
|
}
|
|
9139
9377
|
renderLabel(label) {
|
|
9140
9378
|
if (label == null || label === '')
|
|
@@ -9620,7 +9858,7 @@ class SdFloatingPopover {
|
|
|
9620
9858
|
}
|
|
9621
9859
|
}
|
|
9622
9860
|
render() {
|
|
9623
|
-
return hAsync("slot", { key: '
|
|
9861
|
+
return hAsync("slot", { key: '5b469964bfbbdf1d40c6d7c88a266d655fe3e029' });
|
|
9624
9862
|
}
|
|
9625
9863
|
static get style() { return sdFloatingPortalCss(); }
|
|
9626
9864
|
static get cmpMeta() { return {
|
|
@@ -10107,10 +10345,10 @@ class SdGuide {
|
|
|
10107
10345
|
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
10108
10346
|
if (isActive)
|
|
10109
10347
|
buttonClasses.push('sd-guide__button--active');
|
|
10110
|
-
return (hAsync("div", { key: '
|
|
10348
|
+
return (hAsync("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '2a803402b120509ef8b6de361f360a7b5b96e9db', style: { position: 'absolute', width: '0px', height: '0px' } }, hAsync("div", { key: '3e591b85ac24ea1db37bdaaf130f983d70ef2f36', class: "sd-guide__popup", style: {
|
|
10111
10349
|
...this.guideStyle,
|
|
10112
10350
|
width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
|
|
10113
|
-
} }, hAsync("sd-ghost-button", { key: '
|
|
10351
|
+
} }, hAsync("sd-ghost-button", { key: '1aa20f7bd3a1ba45c4932a67a8c1e67d6e068702', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: 'e48378d1731e0b9fcd5990cb908ae3af236d0346', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'c8c71c7c2f0fdb25e3741415c1f1fae1a8d4d3d2', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: '4996225c27fbeae4fd9b4d68d6e493d87225d427', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: 'edb2d35594b47f19f2e847ba546fac0fc19b21b4', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
|
|
10114
10352
|
}
|
|
10115
10353
|
// 현재 2depth까지만 스타일 적용
|
|
10116
10354
|
renderListItem(message, depth = 0) {
|
|
@@ -10125,7 +10363,7 @@ class SdGuide {
|
|
|
10125
10363
|
return listItems;
|
|
10126
10364
|
}
|
|
10127
10365
|
renderLi = (message, depth) => {
|
|
10128
|
-
return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
|
|
10366
|
+
return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: sanitizeInlineHtml(message) })));
|
|
10129
10367
|
};
|
|
10130
10368
|
static get style() { return sdGuideCss(); }
|
|
10131
10369
|
static get cmpMeta() { return {
|
|
@@ -10611,12 +10849,12 @@ class SdInput {
|
|
|
10611
10849
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
10612
10850
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
10613
10851
|
};
|
|
10614
|
-
return (hAsync("sd-field", { key: '
|
|
10852
|
+
return (hAsync("sd-field", { key: 'e6e58ebc18e458f1d52a3f8afcd0892bfd8ffa45', 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: '9bdcdf6e515a57e9cd72e263bcd8d2c59aac22c9', class: "sd-input__content" }, hAsync("slot", { key: '0273119e456386ba23c361ef1e826b4d2d9bf1be', name: "prefix" }), hAsync("input", { key: 'ad61c8ff1372f6163f2e742cf31884363e8fd31f', 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: 'e68578946f23fff0e4abc3f9919d12b3d624b5f8', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '3c64ce859d71dbd57800a4a34b6a09696f90ff60', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
10615
10853
|
if (this.disabled || this.readonly)
|
|
10616
10854
|
return;
|
|
10617
10855
|
this.internalValue = '';
|
|
10618
10856
|
await this.formField?.sdValidate();
|
|
10619
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
10857
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'db4c66f0b3e91d780262ec7320fc15ffc32e622d', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
|
|
10620
10858
|
if (this.disabled || this.readonly)
|
|
10621
10859
|
return;
|
|
10622
10860
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -10709,6 +10947,9 @@ const table = {
|
|
|
10709
10947
|
paddingY: "6"
|
|
10710
10948
|
},
|
|
10711
10949
|
paddingX: "16",
|
|
10950
|
+
frame: {
|
|
10951
|
+
padding: "8"
|
|
10952
|
+
},
|
|
10712
10953
|
typography: {
|
|
10713
10954
|
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",
|
|
10714
10955
|
fontWeight: "400",
|
|
@@ -11024,7 +11265,7 @@ class SdLinearProgress {
|
|
|
11024
11265
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
11025
11266
|
};
|
|
11026
11267
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
11027
|
-
return (hAsync(Host, { key: '
|
|
11268
|
+
return (hAsync(Host, { key: 'ae56f969b9d4cd6e6e4d697d919ad122e2e4dad7', style: hostStyle }, hAsync("div", { key: '86af10d7d1e6e343700a1c161745599ec863b3d7', class: 'sd-linear-progress__track' }, hAsync("div", { key: '46d5dfe06e82facc5dc83977584bc93970b7fd28', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'd1ae1220a482c50bc770a22ccbc45ccb66ebfc27', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (hAsync("span", { key: '39bc3af718e0797c5e06cda62ee8a6047f303a34', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '944ca6d50f6588894e97265a8ef0484f3e676981', class: 'sd-linear-progress__label' }, this.label)));
|
|
11028
11269
|
}
|
|
11029
11270
|
static get style() { return sdLinearProgressCss(); }
|
|
11030
11271
|
static get cmpMeta() { return {
|
|
@@ -11058,10 +11299,10 @@ class SdLoadingContainer {
|
|
|
11058
11299
|
this.visible = false;
|
|
11059
11300
|
}
|
|
11060
11301
|
render() {
|
|
11061
|
-
return (hAsync("div", { key: '
|
|
11302
|
+
return (hAsync("div", { key: '0b6c91593d615ac39f8a4fc30df8466969ae4d9b', class: {
|
|
11062
11303
|
'sd-loading-container': true,
|
|
11063
11304
|
'sd-loading-container--visible': this.visible,
|
|
11064
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
11305
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: 'de41bd4fe1c824c9517d000b91abb817ea58e90c', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '4de64a1540a0af9c955bbea5d4c83c129e6846ea', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'ae2955bc1d40123f06e7c9e107afe4b46c3b0175', indeterminate: true, type: "inverse" }), this.message && (hAsync("p", { key: '6c58c3fd4074edd48cdd0d21eef15c49c94626db', class: "sd-loading-container__message" }, this.message)))));
|
|
11065
11306
|
}
|
|
11066
11307
|
static get style() { return sdLoadingContainerCss(); }
|
|
11067
11308
|
static get cmpMeta() { return {
|
|
@@ -11157,7 +11398,7 @@ class SdLoadingModal {
|
|
|
11157
11398
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
11158
11399
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
11159
11400
|
};
|
|
11160
|
-
return (hAsync(Host, { key: '
|
|
11401
|
+
return (hAsync(Host, { key: 'e4b95f8fcd666e0b616d193c40f7b57313527a78', style: hostStyle }, hAsync("div", { key: '397f63795ab8523cb41a989c7fc0e2187ceb3d18', class: "sd-loading-modal" }, hAsync("div", { key: '1c2f6f16dbc8fe3b76db29707602b3df6de1380e', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (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: '439302e28cd4843f86f2060c66fe3e5c358ec379', 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: 'a6facf71c52d242ff521adbf7f9161c51431cf9d', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '26d66b9ccf569bbf7bd9d3819fb0380eced791a2', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
11161
11402
|
}
|
|
11162
11403
|
static get style() { return sdLoadingModalCss(); }
|
|
11163
11404
|
static get cmpMeta() { return {
|
|
@@ -11948,15 +12189,15 @@ class SdNumberInput {
|
|
|
11948
12189
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
11949
12190
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
11950
12191
|
};
|
|
11951
|
-
return (hAsync("sd-field", { key: '
|
|
12192
|
+
return (hAsync("sd-field", { key: 'b32943cd55dad7d6bb4fc1a18812360c2ab01a83', 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '050395b8ab3bd77ff5f786b3de182b7a35b8b01f', class: {
|
|
11952
12193
|
'sd-number-input__content': true,
|
|
11953
12194
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
11954
|
-
} }, this.useButton && (hAsync("button", { key: '
|
|
12195
|
+
} }, this.useButton && (hAsync("button", { key: 'e76188a1f1f76450227328854ee3048d7b2b9e85', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '544e5a41790302df564ca0a3e83e2f9052c3f290', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
11955
12196
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11956
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '
|
|
12197
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '34e8c9af864332b8614e3c9a5d2cf94310a2555d', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '07e0484ad473e010d9ba8f971875bd463585ca47', 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: {
|
|
11957
12198
|
textAlign: this.useButton ? 'center' : 'right',
|
|
11958
12199
|
...this.inputStyle,
|
|
11959
|
-
} }), this.inputSuffix && hAsync("span", { key: '
|
|
12200
|
+
} }), this.inputSuffix && hAsync("span", { key: '990a3e1dc5cfeaa8e1823391e0bb0218ce4cfb02', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: 'd2496ab718cf44fd658c871086d8e67c66380668', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'fcab0109e01a1c683bf09349cb699534eaa1a8d1', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
11960
12201
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11961
12202
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
11962
12203
|
}
|
|
@@ -12163,13 +12404,13 @@ class SdPagination {
|
|
|
12163
12404
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
12164
12405
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
12165
12406
|
};
|
|
12166
|
-
return (hAsync("div", { key: '
|
|
12407
|
+
return (hAsync("div", { key: 'b16a4c0ff75913e80fdb9a539d8afb714931a531', class: {
|
|
12167
12408
|
'sd-pagination': true,
|
|
12168
12409
|
'sd-pagination--simple': this.simple,
|
|
12169
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
12410
|
+
}, style: cssVars }, hAsync("div", { key: '42d019164c409d09d13b94845c9ee99ece41a8f3', 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: {
|
|
12170
12411
|
'sd-pagination__item': true,
|
|
12171
12412
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
12172
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
12413
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '9695ce3aaede66529547151800fede0f5413e7d8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
12173
12414
|
}
|
|
12174
12415
|
static get style() { return sdPaginationCss(); }
|
|
12175
12416
|
static get cmpMeta() { return {
|
|
@@ -12320,6 +12561,7 @@ var popupTokens = {
|
|
|
12320
12561
|
};
|
|
12321
12562
|
|
|
12322
12563
|
const { popup } = popupTokens;
|
|
12564
|
+
const shadowSpreadMd = systemTokens.shadow.spread.md;
|
|
12323
12565
|
const POPUP_LAYOUT = {
|
|
12324
12566
|
bodyBg: popup.bg,
|
|
12325
12567
|
};
|
|
@@ -12336,7 +12578,6 @@ const POPUP_HEADER = {
|
|
|
12336
12578
|
fontWeight: popup.header.typography.fontWeight,
|
|
12337
12579
|
fontSize: Number(popup.header.typography.fontSize),
|
|
12338
12580
|
lineHeight: Number(popup.header.typography.lineHeight),
|
|
12339
|
-
// TODO: 토큰 반영 후 교체
|
|
12340
12581
|
height: 50,
|
|
12341
12582
|
paddingX: 16,
|
|
12342
12583
|
paddingY: 10,
|
|
@@ -12346,11 +12587,9 @@ const POPUP_FOOTER = {
|
|
|
12346
12587
|
paddingX: Number(popup.footer.paddingX),
|
|
12347
12588
|
paddingY: Number(popup.footer.paddingY),
|
|
12348
12589
|
gap: Number(popup.footer.gap),
|
|
12349
|
-
// TODO: 토큰 반영 후 교체
|
|
12350
12590
|
height: 52,
|
|
12351
12591
|
slotHeight: 36,
|
|
12352
|
-
|
|
12353
|
-
shadow: '0 -2px 8px 0 rgba(0, 0, 0, 0.08)',
|
|
12592
|
+
shadow: `${shadowSpreadMd.x}px ${shadowSpreadMd.y}px ${shadowSpreadMd.blur}px ${shadowSpreadMd.spread}px ${shadowSpreadMd.color}`,
|
|
12354
12593
|
};
|
|
12355
12594
|
|
|
12356
12595
|
const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
|
|
@@ -12366,6 +12605,8 @@ class SdPopup {
|
|
|
12366
12605
|
}
|
|
12367
12606
|
popupTitle = '';
|
|
12368
12607
|
type = 'default';
|
|
12608
|
+
// 기본 footer 표시가 자연스러운 UX. prop 이름 변경(hideFooter 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
12609
|
+
// eslint-disable-next-line stencil/ban-default-true
|
|
12369
12610
|
useFooter = true;
|
|
12370
12611
|
submitButtonProps;
|
|
12371
12612
|
submit;
|
|
@@ -12393,7 +12634,7 @@ class SdPopup {
|
|
|
12393
12634
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
12394
12635
|
...this.submitButtonProps,
|
|
12395
12636
|
};
|
|
12396
|
-
return (hAsync("div", { key: '
|
|
12637
|
+
return (hAsync("div", { key: 'fe8ca033482913b9c8c7a62963d81d8c5c86c724', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: 'b27afc04689384abc8cdd45e67e4765c3fef82e9', class: "sd-popup__header" }, hAsync("h2", { key: '15d6cf170e483bfdea861aa7a218df8379d83be2', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'daf70c8196ad95b214c978166f547a2a2fa56814', class: "sd-popup__body" }, hAsync("slot", { key: 'f8f4a9f93b88404993e2c8f7155abe4756f9bdba' })), this.useFooter && (hAsync("footer", { key: '38ff051abd11378ad0a83b2d634985d689e0dc27', class: "sd-popup__footer" }, hAsync("div", { key: '149a3de3d7ab0703d9cec41b35af23a6eebd67de', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '2507cece435fa3e00ea698bebf6c980fea081521', name: "footer-left" })), hAsync("sd-button", { key: '5ae38a07e39437d6f3b8aa111258d60aa044152d', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
12397
12638
|
}
|
|
12398
12639
|
static get style() { return sdPopupCss(); }
|
|
12399
12640
|
static get cmpMeta() { return {
|
|
@@ -12636,7 +12877,7 @@ class SdPortal {
|
|
|
12636
12877
|
this.close.emit();
|
|
12637
12878
|
}
|
|
12638
12879
|
render() {
|
|
12639
|
-
return hAsync("slot", { key: '
|
|
12880
|
+
return hAsync("slot", { key: 'a227fa8a0639de7fd3a014762998692151284f87' });
|
|
12640
12881
|
}
|
|
12641
12882
|
static get watchers() { return {
|
|
12642
12883
|
"open": [{
|
|
@@ -13314,15 +13555,15 @@ class SdSelect {
|
|
|
13314
13555
|
this.closeDropdown();
|
|
13315
13556
|
},
|
|
13316
13557
|
};
|
|
13317
|
-
return (hAsync("sd-field", { key: '
|
|
13558
|
+
return (hAsync("sd-field", { key: '21849c194994f51c36b2fa5eafd606230b21e365', 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: () => {
|
|
13318
13559
|
this.hovered = true;
|
|
13319
13560
|
}, onMouseLeave: () => {
|
|
13320
13561
|
this.hovered = false;
|
|
13321
|
-
} }, hAsync("div", { key: '
|
|
13562
|
+
} }, hAsync("div", { key: 'bcba54ed8d325a540d14af14c9b3bf332f631ce8', class: "sd-select", ref: el => {
|
|
13322
13563
|
this.triggerRef = el;
|
|
13323
|
-
} }, hAsync("sd-select-trigger", { key: '
|
|
13564
|
+
} }, hAsync("sd-select-trigger", { key: '72e361ca6e162eee56b82398902e89226e980d3d', ref: el => {
|
|
13324
13565
|
this.triggerComponentRef = el;
|
|
13325
|
-
}, 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: '
|
|
13566
|
+
}, 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: '0ff55857cbc146db57caa53d560752d0fae8413b', ...portalProps }, hAsync("sd-select-listbox", { key: '20c103309dc7f2eaf4bee6abae271606b64ace8b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
13326
13567
|
}
|
|
13327
13568
|
static get watchers() { return {
|
|
13328
13569
|
"isOpen": [{
|
|
@@ -13614,7 +13855,7 @@ class SdSelectListItem {
|
|
|
13614
13855
|
return (
|
|
13615
13856
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
13616
13857
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
13617
|
-
hAsync("div", { key: '
|
|
13858
|
+
hAsync("div", { key: '37189acb2854061fd120d662050fddddb396170c', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
13618
13859
|
'sd-select-list-item': true,
|
|
13619
13860
|
'sd-select-list-item--group': isGroup,
|
|
13620
13861
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -13624,7 +13865,7 @@ class SdSelectListItem {
|
|
|
13624
13865
|
'sd-select-list-item--focused': this.isFocused,
|
|
13625
13866
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
13626
13867
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
13627
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
13868
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '7cc43ed0a1c4a2019be3a7f6f60de1c7f03a6148', 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 })), hAsync("span", { key: '331c7d1ded82834521f3292dc739612f24d7209e', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (hAsync("span", { key: '80b34cd1a6e67719d50c62afedf23c0903259c78', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
13628
13869
|
}
|
|
13629
13870
|
static get style() { return sdSelectListItemCss(); }
|
|
13630
13871
|
static get cmpMeta() { return {
|
|
@@ -13692,15 +13933,15 @@ class SdSelectListItemSearch {
|
|
|
13692
13933
|
clearTimeout(this.debounceTimer);
|
|
13693
13934
|
}
|
|
13694
13935
|
render() {
|
|
13695
|
-
return (hAsync("div", { key: '
|
|
13936
|
+
return (hAsync("div", { key: 'a8b62b61ec6a0afd69de50b8df02e57de2a04c8c', class: {
|
|
13696
13937
|
'sd-select-list-item-search': true,
|
|
13697
13938
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
13698
|
-
} }, hAsync("div", { key: '
|
|
13939
|
+
} }, hAsync("div", { key: '2b04a677a8b4e3212eff83c07609a4b7d89799c1', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: 'c0c51d4b0150fee7151c7e2bcc5aaf8428d31043', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '85d2309cbb037851053c34baeca5f59c690c0881', ref: el => {
|
|
13699
13940
|
this.inputEl = el;
|
|
13700
|
-
}, 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: '
|
|
13941
|
+
}, 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: '564b6ae6dbab1fa5f4f6d977fa9fd52bb9114873', type: "button", class: {
|
|
13701
13942
|
'sd-select-list-item-search__clear': true,
|
|
13702
13943
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
13703
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
13944
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '8ae0f92f8762681cc4c2a6fc11340498b8b01c98', name: "close", size: 12, color: "#888888" })))));
|
|
13704
13945
|
}
|
|
13705
13946
|
static get style() { return sdSelectListItemSearchCss(); }
|
|
13706
13947
|
static get cmpMeta() { return {
|
|
@@ -14071,9 +14312,9 @@ class SdSelectListbox {
|
|
|
14071
14312
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
14072
14313
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
14073
14314
|
};
|
|
14074
|
-
return (hAsync("div", { key: '
|
|
14315
|
+
return (hAsync("div", { key: '1834dbfee219988e78ad47d3640ebafb9983298c', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '28fbfce57184f2a8c090d628c5b33cecf9337c3c', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'b7430d72cdb26cad59b226af8cf98d796645390c', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
14075
14316
|
this.listEl = el;
|
|
14076
|
-
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '
|
|
14317
|
+
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '8f159cdef838c0f39bb7aad1717a88c04c75dbda', 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) })))))));
|
|
14077
14318
|
}
|
|
14078
14319
|
static get watchers() { return {
|
|
14079
14320
|
"searchKeyword": [{
|
|
@@ -14154,7 +14395,7 @@ class SdSelectTrigger {
|
|
|
14154
14395
|
? SELECT_COLORS.icon.disabled
|
|
14155
14396
|
: SELECT_COLORS.icon.default,
|
|
14156
14397
|
};
|
|
14157
|
-
return (hAsync("div", { key: '
|
|
14398
|
+
return (hAsync("div", { key: '645d8e7ff5065664a3510b127628cb54d97fb613', ref: el => {
|
|
14158
14399
|
this.triggerEl = el;
|
|
14159
14400
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
14160
14401
|
'sd-select-trigger': true,
|
|
@@ -14165,7 +14406,7 @@ class SdSelectTrigger {
|
|
|
14165
14406
|
e.preventDefault();
|
|
14166
14407
|
this.handleClick();
|
|
14167
14408
|
}
|
|
14168
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '
|
|
14409
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '515dda6d98ad09b0854e0ef0e04f0bf8c9592d1a', class: "sd-select-trigger__content" }, hAsync("span", { key: '9d92577675d0c7e6ba32174ae0cdd754788dbccb', class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택')), hAsync("sd-icon", { key: '347532a73d9ff2929d9f716fb8d2e314af7d7069', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
14169
14410
|
'sd-select-trigger__icon': true,
|
|
14170
14411
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
14171
14412
|
} }))));
|
|
@@ -14287,7 +14528,7 @@ class SdSwitch {
|
|
|
14287
14528
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
14288
14529
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
14289
14530
|
};
|
|
14290
|
-
return (hAsync("label", { key: '
|
|
14531
|
+
return (hAsync("label", { key: '3d9449733d73dcbd2d7a95505b6afd930a43a114', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: 'f8d35ea743b5f85697d9d4de8fe915ce2d8f7b56', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: 'b62a6bfa60c488270184698610337926b688baff', class: "sd-switch__track" }, hAsync("div", { key: 'da7764fe4a4202366fe0a922de687ece121eb73f', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '924c2939f0cb2196ff69be560e1c7f113590c73b', class: "sd-switch__label" }, this.label)));
|
|
14291
14532
|
}
|
|
14292
14533
|
static get style() { return sdSwitchCss(); }
|
|
14293
14534
|
static get cmpMeta() { return {
|
|
@@ -14362,7 +14603,9 @@ const TABLE_BODY_LAYOUT = {
|
|
|
14362
14603
|
height: tableTokens.table.body.dense.height,
|
|
14363
14604
|
paddingY: tableTokens.table.body.dense.paddingY,
|
|
14364
14605
|
},
|
|
14365
|
-
paddingX: tableTokens.table.body.paddingX
|
|
14606
|
+
paddingX: tableTokens.table.body.paddingX,
|
|
14607
|
+
framePadding: tableTokens.table.body.frame.padding,
|
|
14608
|
+
};
|
|
14366
14609
|
const TABLE_BODY_TYPOGRAPHY = {
|
|
14367
14610
|
fontFamily: tableTokens.table.body.typography.fontFamily,
|
|
14368
14611
|
fontWeight: tableTokens.table.body.typography.fontWeight,
|
|
@@ -14431,7 +14674,9 @@ class SdTable {
|
|
|
14431
14674
|
get effectiveRowHeight() {
|
|
14432
14675
|
if (this.rowHeight != null)
|
|
14433
14676
|
return this.rowHeight;
|
|
14434
|
-
return this.dense
|
|
14677
|
+
return this.dense
|
|
14678
|
+
? Number(TABLE_BODY_LAYOUT.dense.height)
|
|
14679
|
+
: Number(TABLE_BODY_LAYOUT.default.height);
|
|
14435
14680
|
}
|
|
14436
14681
|
virtualBuffer = 5;
|
|
14437
14682
|
virtualEndThreshold = 10;
|
|
@@ -14607,6 +14852,10 @@ class SdTable {
|
|
|
14607
14852
|
if (this.pagination?.rowsPerPage != null) {
|
|
14608
14853
|
this.innerRowsPerPage = this.pagination.rowsPerPage;
|
|
14609
14854
|
}
|
|
14855
|
+
// host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
|
|
14856
|
+
// 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
|
|
14857
|
+
// 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
|
|
14858
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14610
14859
|
const el = this.el;
|
|
14611
14860
|
el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
|
|
14612
14861
|
el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
|
|
@@ -14625,7 +14874,6 @@ class SdTable {
|
|
|
14625
14874
|
el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
|
|
14626
14875
|
el.getSpanSync = this.getSpanSync.bind(this);
|
|
14627
14876
|
el.isCoveredSync = this.isCoveredSync.bind(this);
|
|
14628
|
-
el.isVisualLastRowSync = this.isVisualLastRowSync.bind(this);
|
|
14629
14877
|
el.registerSeparatorSync = this.registerSeparatorSync.bind(this);
|
|
14630
14878
|
el.unregisterSeparatorSync = this.unregisterSeparatorSync.bind(this);
|
|
14631
14879
|
el.isVisualLastRowBeforeSeparatorSync = this.isVisualLastRowBeforeSeparatorSync.bind(this);
|
|
@@ -14636,6 +14884,7 @@ class SdTable {
|
|
|
14636
14884
|
el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
|
|
14637
14885
|
el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
|
|
14638
14886
|
el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
|
|
14887
|
+
el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
|
|
14639
14888
|
if (Array.isArray(this.rows)) {
|
|
14640
14889
|
this.rowCount = this.rows.length;
|
|
14641
14890
|
this.pushRowsToChildren(this.rows);
|
|
@@ -14713,10 +14962,16 @@ class SdTable {
|
|
|
14713
14962
|
}
|
|
14714
14963
|
});
|
|
14715
14964
|
this.noDataContentResizeObserver.observe(target);
|
|
14716
|
-
|
|
14717
|
-
|
|
14965
|
+
readTask(() => {
|
|
14966
|
+
if (!this.noDataContentEl)
|
|
14967
|
+
return;
|
|
14968
|
+
const measured = Math.ceil(this.noDataContentEl.scrollHeight);
|
|
14969
|
+
const next = Math.max(60, measured);
|
|
14970
|
+
if (next !== this.noDataBodyHeight) {
|
|
14971
|
+
this.noDataBodyHeight = next;
|
|
14972
|
+
}
|
|
14973
|
+
});
|
|
14718
14974
|
}
|
|
14719
|
-
// light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
|
|
14720
14975
|
queryChildEl(selector) {
|
|
14721
14976
|
return (this.el.querySelector(selector) ??
|
|
14722
14977
|
this.el.shadowRoot?.querySelector(selector) ??
|
|
@@ -14744,12 +14999,12 @@ class SdTable {
|
|
|
14744
14999
|
refreshChildrenSelection() {
|
|
14745
15000
|
const thead = this.queryChildEl('sd-thead');
|
|
14746
15001
|
thead?.refreshSelection?.();
|
|
14747
|
-
this.queryAllTr().forEach(tr => tr
|
|
15002
|
+
this.queryAllTr().forEach(tr => tr.refreshSelection?.());
|
|
14748
15003
|
}
|
|
14749
15004
|
refreshChildrenConfig() {
|
|
14750
15005
|
const thead = this.queryChildEl('sd-thead');
|
|
14751
15006
|
thead?.refreshConfig?.();
|
|
14752
|
-
this.queryAllTr().forEach(tr => tr
|
|
15007
|
+
this.queryAllTr().forEach(tr => tr.refreshConfig?.());
|
|
14753
15008
|
}
|
|
14754
15009
|
maybeEmitVirtualReachEnd(start, end) {
|
|
14755
15010
|
const threshold = Math.max(1, this.virtualEndThreshold);
|
|
@@ -14781,6 +15036,7 @@ class SdTable {
|
|
|
14781
15036
|
this.vsEnd = end;
|
|
14782
15037
|
const topHeight = start * this.effectiveRowHeight;
|
|
14783
15038
|
const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
|
|
15039
|
+
// setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
|
|
14784
15040
|
const tbody = this.queryChildEl('sd-tbody');
|
|
14785
15041
|
tbody?.setSpacersSync?.(topHeight, bottomHeight);
|
|
14786
15042
|
if (rangeChanged) {
|
|
@@ -14838,6 +15094,9 @@ class SdTable {
|
|
|
14838
15094
|
const fields = this.useFrameRegistry.get(rowKey);
|
|
14839
15095
|
return fields != null && fields.size > 0;
|
|
14840
15096
|
}
|
|
15097
|
+
isCellUseFrameSync(rowKey, field) {
|
|
15098
|
+
return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
|
|
15099
|
+
}
|
|
14841
15100
|
isRowSelectedSync(row) {
|
|
14842
15101
|
return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
|
|
14843
15102
|
}
|
|
@@ -14898,7 +15157,7 @@ class SdTable {
|
|
|
14898
15157
|
this.updateRowsVisibility();
|
|
14899
15158
|
}
|
|
14900
15159
|
updateRowsVisibility() {
|
|
14901
|
-
this.queryAllTr().forEach(tr => tr
|
|
15160
|
+
this.queryAllTr().forEach(tr => tr.updateVisibility?.());
|
|
14902
15161
|
}
|
|
14903
15162
|
changeRowsPerPage(perPage) {
|
|
14904
15163
|
const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
|
|
@@ -14937,7 +15196,7 @@ class SdTable {
|
|
|
14937
15196
|
this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
|
|
14938
15197
|
const thead = this.queryChildEl('sd-thead');
|
|
14939
15198
|
thead?.setColumnWidths?.(this.columnWidths);
|
|
14940
|
-
this.queryAllTr().forEach(tr => tr
|
|
15199
|
+
this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
|
|
14941
15200
|
const stickyRightCount = this.stickyColumn?.right || 0;
|
|
14942
15201
|
const visibleColCount = this.columns.filter(c => c.visible !== false).length;
|
|
14943
15202
|
const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
|
|
@@ -14992,9 +15251,8 @@ class SdTable {
|
|
|
14992
15251
|
// 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
|
|
14993
15252
|
requestAllTrUpdate() {
|
|
14994
15253
|
this.queryAllTr().forEach(tr => {
|
|
14995
|
-
|
|
14996
|
-
|
|
14997
|
-
trAny.bumpSpansVersion();
|
|
15254
|
+
if (typeof tr.bumpSpansVersion === 'function') {
|
|
15255
|
+
tr.bumpSpansVersion();
|
|
14998
15256
|
}
|
|
14999
15257
|
});
|
|
15000
15258
|
}
|
|
@@ -15106,7 +15364,7 @@ class SdTable {
|
|
|
15106
15364
|
return false;
|
|
15107
15365
|
}
|
|
15108
15366
|
// rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
|
|
15109
|
-
//
|
|
15367
|
+
// isVisualLastRowBeforeSeparatorSync 헬퍼.
|
|
15110
15368
|
resolveVisualBottom(rowKey, field) {
|
|
15111
15369
|
const myRowIdx = this.resolveRowIndex(rowKey);
|
|
15112
15370
|
if (myRowIdx == null)
|
|
@@ -15115,20 +15373,6 @@ class SdTable {
|
|
|
15115
15373
|
const rs = Math.max(1, span?.rowspan ?? 1);
|
|
15116
15374
|
return myRowIdx + rs - 1;
|
|
15117
15375
|
}
|
|
15118
|
-
// 셀의 시각적 하단이 테이블(또는 현재 페이지)의 마지막 행인지 판정.
|
|
15119
|
-
// 마지막 행에 border-bottom: none을 적용하기 위함.
|
|
15120
|
-
isVisualLastRowSync(rowKey, field) {
|
|
15121
|
-
if (this.rowCount <= 0)
|
|
15122
|
-
return false;
|
|
15123
|
-
const visualBottom = this.resolveVisualBottom(rowKey, field);
|
|
15124
|
-
if (visualBottom == null)
|
|
15125
|
-
return false;
|
|
15126
|
-
const pageInfo = this.getPaginationInfoSync();
|
|
15127
|
-
const lastVisibleIdx = pageInfo
|
|
15128
|
-
? Math.min(pageInfo.endIndex - 1, this.rowCount - 1)
|
|
15129
|
-
: this.rowCount - 1;
|
|
15130
|
-
return visualBottom === lastVisibleIdx;
|
|
15131
|
-
}
|
|
15132
15376
|
registerSeparatorSync(prevRowKey) {
|
|
15133
15377
|
const idx = this.resolveRowIndex(prevRowKey);
|
|
15134
15378
|
if (idx != null)
|
|
@@ -15245,25 +15489,25 @@ class SdTable {
|
|
|
15245
15489
|
'--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
|
|
15246
15490
|
'--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
|
|
15247
15491
|
};
|
|
15248
|
-
return (hAsync(Host, { key: '
|
|
15492
|
+
return (hAsync(Host, { key: '9ee5b528b330f9edf406ff40ec089136c0807653', style: hostStyle }, hAsync("div", { key: '9ac6cbba84b7ef7d0897474168748811fb15af92', class: "sd-table__container", style: {
|
|
15249
15493
|
'--table-width': this.width,
|
|
15250
15494
|
'--table-height': effectiveTableHeight,
|
|
15251
15495
|
'--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
|
|
15252
|
-
} }, hAsync("div", { key: '
|
|
15496
|
+
} }, hAsync("div", { key: '11f916debfd443e1d243bfa2335dbb0a3cb094bc', class: {
|
|
15253
15497
|
'sd-table__wrapper': true,
|
|
15254
15498
|
'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
|
|
15255
|
-
} }, hAsync("div", { key: '
|
|
15499
|
+
} }, hAsync("div", { key: '3cad3d86f731a3edc0d2b5a680bcaf6ad6be7399', class: {
|
|
15256
15500
|
'sd-table__scroll-container': true,
|
|
15257
15501
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
15258
15502
|
'sd-table__scroll-container--no-data': isNoData,
|
|
15259
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
15503
|
+
} }, this.isLoading && (hAsync("div", { key: '6f0aac84dcb3d9ca721ed82cd45214b3956d3f94', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '8bb6b8025fceee6ef856efd9cafefe925fc95272', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '69e6e22b68261832a299de470c8ca7f5a16205dd', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'c797a2d41c752698bed1f034beefddc4bf8b951d', class: "sd-table__no-data" }, hAsync("div", { key: '0f0306bc89b5d9046de2aec935822eab0c3ca36c', class: "sd-table__no-data-content", ref: el => {
|
|
15260
15504
|
this.noDataContentEl = el;
|
|
15261
15505
|
if (el)
|
|
15262
15506
|
this.syncNoDataContentObserver();
|
|
15263
|
-
} }, hAsync("slot", { key: '
|
|
15507
|
+
} }, hAsync("slot", { key: '042671d4c65c4031a756da386ed010146c17f736', name: "no-data" }, hAsync("span", { key: '5994f656dbea3fd1dea69c105907b188658f8c41' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '16bb3a7c6b32e5312eda79015cd7d90bef37bdff', 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 &&
|
|
15264
15508
|
this.pagination.rowsPerPage > 0 &&
|
|
15265
15509
|
this.rowCount > 0 &&
|
|
15266
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
15510
|
+
!this.useVirtualScroll && (hAsync("div", { key: '6c3ee5d93fb395154c4c42c914669af535c1a5bc', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '46053012374e1255037706a8fa4d068dbc60f2d9', 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: 'df04b19e857e823be8237148d84456d492575ce3', value: this.useInternalPagination
|
|
15267
15511
|
? this.innerRowsPerPage
|
|
15268
15512
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
15269
15513
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -15555,7 +15799,7 @@ class SdTabs {
|
|
|
15555
15799
|
};
|
|
15556
15800
|
}
|
|
15557
15801
|
render() {
|
|
15558
|
-
return (hAsync("div", { key: '
|
|
15802
|
+
return (hAsync("div", { key: '181916a72512a6802a06dc56fca418a806d18a0e', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
15559
15803
|
const badgeName = this.getBadgeName(tab);
|
|
15560
15804
|
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 => {
|
|
15561
15805
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -15770,6 +16014,8 @@ class SdTag {
|
|
|
15770
16014
|
name = 'square_sm_grey';
|
|
15771
16015
|
label = '';
|
|
15772
16016
|
icon;
|
|
16017
|
+
// 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
16018
|
+
// eslint-disable-next-line stencil/ban-default-true
|
|
15773
16019
|
isLeft = true;
|
|
15774
16020
|
componentWillLoad() {
|
|
15775
16021
|
this.name = this.name ?? 'square_sm_grey';
|
|
@@ -15791,7 +16037,7 @@ class SdTag {
|
|
|
15791
16037
|
render() {
|
|
15792
16038
|
const config = this.resolvedConfig;
|
|
15793
16039
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
15794
|
-
return (hAsync("span", { key: '
|
|
16040
|
+
return (hAsync("span", { key: 'c8b8b88e2c83401bb9d3e05004b0517d7e4a3a6a', class: "sd-tag", style: {
|
|
15795
16041
|
'--sd-tag-background': config.background,
|
|
15796
16042
|
'--sd-tag-content': config.content,
|
|
15797
16043
|
'--sd-tag-height': config.height,
|
|
@@ -15801,7 +16047,7 @@ class SdTag {
|
|
|
15801
16047
|
'--sd-tag-font-weight': config.fontWeight,
|
|
15802
16048
|
'--sd-tag-line-height': config.lineHeight,
|
|
15803
16049
|
'--sd-tag-radius': config.radius,
|
|
15804
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
16050
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '67094b09ab1d7b7e865c9f6b8017f8c5c3f8274a', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
15805
16051
|
}
|
|
15806
16052
|
static get style() { return sdTagCss(); }
|
|
15807
16053
|
static get cmpMeta() { return {
|
|
@@ -15869,9 +16115,9 @@ class SdTbody {
|
|
|
15869
16115
|
}
|
|
15870
16116
|
}
|
|
15871
16117
|
render() {
|
|
15872
|
-
return (hAsync(Host, { key: '
|
|
16118
|
+
return (hAsync(Host, { key: 'a3d0ee1c1820474e97e430ba91f48e12ee0e252d', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'bbd5b9acf02150b146c9b25d07f2e7a9dd347921', class: { tbody: true } }, [
|
|
15873
16119
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
15874
|
-
hAsync("slot", { key: '
|
|
16120
|
+
hAsync("slot", { key: 'f0ec0aa4d7e7190fc93d96afe5591004174fff63' }),
|
|
15875
16121
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
15876
16122
|
])));
|
|
15877
16123
|
}
|
|
@@ -15920,11 +16166,13 @@ class SdTd {
|
|
|
15920
16166
|
this.syncSlotName();
|
|
15921
16167
|
this.syncSpanRegistration();
|
|
15922
16168
|
this.syncCellClassRegistration(oldField);
|
|
16169
|
+
this.syncUseFrameRegistration(oldField);
|
|
15923
16170
|
}
|
|
15924
16171
|
handleRowKeyChange(_newKey, oldKey) {
|
|
15925
16172
|
this.syncSlotName();
|
|
15926
16173
|
this.syncSpanRegistration();
|
|
15927
16174
|
this.syncCellClassRegistration(undefined, oldKey);
|
|
16175
|
+
this.syncUseFrameRegistration(undefined, oldKey);
|
|
15928
16176
|
}
|
|
15929
16177
|
handleSpanChange() {
|
|
15930
16178
|
this.syncSpanRegistration();
|
|
@@ -15935,15 +16183,15 @@ class SdTd {
|
|
|
15935
16183
|
handleDividerChange() {
|
|
15936
16184
|
this.syncCellClassRegistration();
|
|
15937
16185
|
}
|
|
15938
|
-
|
|
15939
|
-
this.
|
|
16186
|
+
handleUseFrameChange() {
|
|
16187
|
+
this.syncUseFrameRegistration();
|
|
15940
16188
|
this.requestParentTrUpdate();
|
|
15941
16189
|
}
|
|
15942
16190
|
componentWillLoad() {
|
|
15943
16191
|
this.syncSlotName();
|
|
15944
16192
|
this.syncSpanRegistration();
|
|
15945
16193
|
this.syncCellClassRegistration();
|
|
15946
|
-
this.
|
|
16194
|
+
this.syncUseFrameRegistration();
|
|
15947
16195
|
// slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
|
|
15948
16196
|
const parentTr = this.el.parentElement;
|
|
15949
16197
|
if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
|
|
@@ -15952,7 +16200,7 @@ class SdTd {
|
|
|
15952
16200
|
this.syncSlotName();
|
|
15953
16201
|
this.syncSpanRegistration();
|
|
15954
16202
|
this.syncCellClassRegistration();
|
|
15955
|
-
this.
|
|
16203
|
+
this.syncUseFrameRegistration();
|
|
15956
16204
|
}
|
|
15957
16205
|
// React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
|
|
15958
16206
|
// 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
|
|
@@ -15960,7 +16208,7 @@ class SdTd {
|
|
|
15960
16208
|
connectedCallback() {
|
|
15961
16209
|
this.syncSpanRegistration();
|
|
15962
16210
|
this.syncCellClassRegistration();
|
|
15963
|
-
this.
|
|
16211
|
+
this.syncUseFrameRegistration();
|
|
15964
16212
|
}
|
|
15965
16213
|
disconnectedCallback() {
|
|
15966
16214
|
const table = this.findTable();
|
|
@@ -16014,9 +16262,16 @@ class SdTd {
|
|
|
16014
16262
|
table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
|
|
16015
16263
|
this.requestParentTrUpdate();
|
|
16016
16264
|
}
|
|
16017
|
-
|
|
16265
|
+
syncUseFrameRegistration(prevField, prevRowKey) {
|
|
16018
16266
|
const table = this.findTable();
|
|
16019
|
-
if (!table
|
|
16267
|
+
if (!table)
|
|
16268
|
+
return;
|
|
16269
|
+
const oldField = prevField ?? this.field;
|
|
16270
|
+
const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
|
|
16271
|
+
if (oldField !== '' && oldRowKey != null) {
|
|
16272
|
+
table.unregisterUseFrameSync?.(oldRowKey, oldField);
|
|
16273
|
+
}
|
|
16274
|
+
if (this.field === '' || this.rowKey == null)
|
|
16020
16275
|
return;
|
|
16021
16276
|
if (this.useFrame) {
|
|
16022
16277
|
table.registerUseFrameSync?.(String(this.rowKey), this.field);
|
|
@@ -16037,7 +16292,7 @@ class SdTd {
|
|
|
16037
16292
|
}
|
|
16038
16293
|
}
|
|
16039
16294
|
render() {
|
|
16040
|
-
return (hAsync(Host, { key: '
|
|
16295
|
+
return (hAsync(Host, { key: '91c033a0c4c3a6c3c9b29c0be99912c5ac1283ee', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'abfbc911c707012bc7d924e328ba07d71b96f9a9' })));
|
|
16041
16296
|
}
|
|
16042
16297
|
static get watchers() { return {
|
|
16043
16298
|
"field": [{
|
|
@@ -16062,7 +16317,7 @@ class SdTd {
|
|
|
16062
16317
|
"handleDividerChange": 0
|
|
16063
16318
|
}],
|
|
16064
16319
|
"useFrame": [{
|
|
16065
|
-
"
|
|
16320
|
+
"handleUseFrameChange": 0
|
|
16066
16321
|
}]
|
|
16067
16322
|
}; }
|
|
16068
16323
|
static get style() { return sdTdCss(); }
|
|
@@ -16321,7 +16576,7 @@ class SdTextarea {
|
|
|
16321
16576
|
'--sd-system-size-field-sm-height': 'auto',
|
|
16322
16577
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
16323
16578
|
};
|
|
16324
|
-
return (hAsync("sd-field", { key: '
|
|
16579
|
+
return (hAsync("sd-field", { key: 'd877d2598cad84c2bf495e76e0cc1d087f52cc8e', 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: 'c4e864b958b806d4ecc293bd47375dabe0b9e825', class: "sd-textarea__content" }, hAsync("textarea", { key: '8d12c0178392c07150f0fdde5bab4c0e91534efb', 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 }))));
|
|
16325
16580
|
}
|
|
16326
16581
|
static get watchers() { return {
|
|
16327
16582
|
"value": [{
|
|
@@ -16537,16 +16792,16 @@ class SdThead {
|
|
|
16537
16792
|
'--table-border-color': TABLE_BORDER.color,
|
|
16538
16793
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
16539
16794
|
};
|
|
16540
|
-
return (hAsync(Host, { key: '
|
|
16795
|
+
return (hAsync(Host, { key: '234ca55bb2507aef21df976066e5ce377c2e9e89', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'fecd6b54f72a8643b663c3af1988eed60300d08d', class: {
|
|
16541
16796
|
'thead': true,
|
|
16542
16797
|
'thead--sticky': this._stickyHeader,
|
|
16543
|
-
} }, hAsync("tr", { key: '
|
|
16798
|
+
} }, hAsync("tr", { key: '21d56c50076d3340733b7fa0a8e569fec005e415', class: "tr" }, this._selectable && (hAsync("th", { key: 'ace570ae2157ae63a21ec6ba60d8b8898dd0c33c', class: {
|
|
16544
16799
|
'th': true,
|
|
16545
16800
|
'th--selected': true,
|
|
16546
16801
|
'sticky-left': true,
|
|
16547
16802
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
16548
16803
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
16549
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
16804
|
+
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '4b30536f427b9985355c4e22b6b532a3033306c0', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
|
|
16550
16805
|
'th': true,
|
|
16551
16806
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
16552
16807
|
'sticky-left': true,
|
|
@@ -16697,12 +16952,12 @@ class SdToast {
|
|
|
16697
16952
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
16698
16953
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
16699
16954
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
16700
|
-
return (hAsync("div", { key: '
|
|
16955
|
+
return (hAsync("div", { key: '82579581897d7845b95456ccb5e2a1745c84bcc5', style: {
|
|
16701
16956
|
'--sd-toast-bg': typeConfig.bg,
|
|
16702
16957
|
'--sd-toast-text': typeConfig.content,
|
|
16703
16958
|
'--sd-toast-icon': iconColor,
|
|
16704
16959
|
'--sd-toast-link': linkColor,
|
|
16705
|
-
} }, hAsync("div", { key: '
|
|
16960
|
+
} }, hAsync("div", { key: '5f41392a25dee4e53917255453c97c2203940f21', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '8f38f7c9842ec295510135589a63994011a856f4', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '62ef897ddfc3b47fe7b640d430d0baf95bdb5b51', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'f6db6cb9776cb41400c9a9052cdea94990245298', class: "sd-toast__content" }, hAsync("span", { key: 'fbd7cdd72422e9ad08f99302b4dcd607d058926f', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'f599928ad9d0d7536086d7dd2d1ce65b429fd8f4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '2be68a412c4b6b9dac64dbd89447c4905fa7512f', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '065030362b37383ee7ae31e9b8a771b160427cbe', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
16706
16961
|
}
|
|
16707
16962
|
static get style() { return sdToastCss(); }
|
|
16708
16963
|
static get cmpMeta() { return {
|
|
@@ -16955,7 +17210,7 @@ class SdToastContainer {
|
|
|
16955
17210
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
16956
17211
|
const indexMap = new Map();
|
|
16957
17212
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
16958
|
-
return (hAsync("div", { key: '
|
|
17213
|
+
return (hAsync("div", { key: 'c80d46b63f50591d4d92b810c0625701e4741e3a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
16959
17214
|
this.expanded = true;
|
|
16960
17215
|
this.pauseTimers();
|
|
16961
17216
|
}, onMouseLeave: () => {
|
|
@@ -17113,7 +17368,7 @@ class SdToggle {
|
|
|
17113
17368
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
17114
17369
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
17115
17370
|
};
|
|
17116
|
-
return (hAsync("label", { key: '
|
|
17371
|
+
return (hAsync("label", { key: 'c5c8b9448dabb6619e80fd55b11f94bf78706994', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: 'bd43e7f286da217653461ec3128998c5f5a821d9', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
17117
17372
|
}
|
|
17118
17373
|
static get style() { return sdToggleCss(); }
|
|
17119
17374
|
static get cmpMeta() { return {
|
|
@@ -17243,14 +17498,14 @@ class SdTooltip {
|
|
|
17243
17498
|
const hasLabel = this.label !== undefined && this.label !== '';
|
|
17244
17499
|
const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
|
|
17245
17500
|
const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
|
|
17246
|
-
return (hAsync(Fragment, { key: '
|
|
17501
|
+
return (hAsync(Fragment, { key: 'c7ed53cfd1505b394353a9a37d0fe012cdf29217' }, hAsync("div", { key: 'd31332c8717dd954bb1c79bb9d0fd974f74d6e73', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, 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: 'a63971f2fa15e9ef8a6294a2284284e7d7154a8f', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: 'dc3259612bf303b320fdc849bbb83f224f410737', ref: el => (this.menuEl = el), class: {
|
|
17247
17502
|
'sd-floating-menu': true,
|
|
17248
17503
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
17249
17504
|
[`sd-floating-menu--${placement}`]: true,
|
|
17250
17505
|
}, style: {
|
|
17251
17506
|
'--sd-floating-bg': typeConfig.bg,
|
|
17252
17507
|
'--sd-floating-content': typeConfig.content,
|
|
17253
|
-
}, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '
|
|
17508
|
+
}, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '8b3d132320c27710c9346f5313ee7c173df4275e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '66e90298fa62b7660e3d785abd024e9acae38fe3' })), hAsync("div", { key: '115d0ee83abb2d9ca607759f009c47acd34196e2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
|
|
17254
17509
|
}
|
|
17255
17510
|
static get style() { return sdTooltipCss(); }
|
|
17256
17511
|
static get cmpMeta() { return {
|
|
@@ -17279,7 +17534,7 @@ class SdTooltip {
|
|
|
17279
17534
|
}; }
|
|
17280
17535
|
}
|
|
17281
17536
|
|
|
17282
|
-
const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.td{display:table-cell;height:var(--table-body-height, 44px);padding:var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.td.td
|
|
17537
|
+
const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.tr--separator:hover .td{background-color:var(--table-separator-color, #eeeeee)}.td{display:table-cell;height:var(--table-body-height, 44px);padding:var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.tr--separator:hover .td.sticky-left,.tr--separator:hover .td.sticky-right{background-color:var(--table-separator-color, #eeeeee)}.tr--separator .td--separator{height:var(--table-separator-width, 6px);padding:0;background-color:var(--table-separator-color, #eeeeee);border-bottom:none}.td.td--before-separator{border-bottom:none}.td--divider-left{border-left:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}.td--divider-right{border-right:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}`;
|
|
17283
17538
|
|
|
17284
17539
|
class SdTr {
|
|
17285
17540
|
constructor(hostRef) {
|
|
@@ -17453,6 +17708,13 @@ class SdTr {
|
|
|
17453
17708
|
const fieldName = typeof col.field === 'string' ? col.field : col.name;
|
|
17454
17709
|
return this.tableEl.getCellClassSync(this.rowKey, fieldName);
|
|
17455
17710
|
}
|
|
17711
|
+
getFramePaddingStyle(field) {
|
|
17712
|
+
if (!this._dense)
|
|
17713
|
+
return undefined;
|
|
17714
|
+
if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
|
|
17715
|
+
return undefined;
|
|
17716
|
+
return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
|
|
17717
|
+
}
|
|
17456
17718
|
expandCellClass(classStr) {
|
|
17457
17719
|
if (classStr == null || classStr === '')
|
|
17458
17720
|
return {};
|
|
@@ -17461,20 +17723,6 @@ class SdTr {
|
|
|
17461
17723
|
.filter(Boolean)
|
|
17462
17724
|
.map(c => [c, true]));
|
|
17463
17725
|
}
|
|
17464
|
-
isVisualLastRow(col) {
|
|
17465
|
-
if (!this.tableEl?.isVisualLastRowSync)
|
|
17466
|
-
return false;
|
|
17467
|
-
const fieldName = typeof col.field === 'string' ? col.field : col.name;
|
|
17468
|
-
return this.tableEl.isVisualLastRowSync(this.rowKey, fieldName);
|
|
17469
|
-
}
|
|
17470
|
-
// selectable td는 column 정보가 없으므로 빈 field로 평가한다.
|
|
17471
|
-
// 해당 위치는 rowspan을 등록할 수 없으므로 spanRegistry에 매칭이 없고,
|
|
17472
|
-
// 결과적으로 "내 row 자체가 시각적 마지막인지"가 판정된다.
|
|
17473
|
-
isVisualLastRowForSelfRow() {
|
|
17474
|
-
if (!this.tableEl?.isVisualLastRowSync)
|
|
17475
|
-
return false;
|
|
17476
|
-
return this.tableEl.isVisualLastRowSync(this.rowKey, '');
|
|
17477
|
-
}
|
|
17478
17726
|
isVisualLastRowBeforeSeparator(col) {
|
|
17479
17727
|
if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
|
|
17480
17728
|
return false;
|
|
@@ -17495,12 +17743,13 @@ class SdTr {
|
|
|
17495
17743
|
const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
|
|
17496
17744
|
const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
|
|
17497
17745
|
const effectiveDense = this._dense && !isUseFrameRow;
|
|
17498
|
-
const
|
|
17746
|
+
const rowLayoutY = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
|
|
17747
|
+
const rowPaddingX = this._dense && isUseFrameRow ? TABLE_BODY_LAYOUT.paddingX : TABLE_BODY_LAYOUT.paddingX;
|
|
17499
17748
|
const rowStyle = {
|
|
17500
17749
|
'display': this.isVisible ? '' : 'none',
|
|
17501
|
-
'--table-body-height': `${
|
|
17502
|
-
'--table-body-padding-y': `${
|
|
17503
|
-
'--table-body-padding-x': `${
|
|
17750
|
+
'--table-body-height': `${rowLayoutY.height}px`,
|
|
17751
|
+
'--table-body-padding-y': `${rowLayoutY.paddingY}px`,
|
|
17752
|
+
'--table-body-padding-x': `${rowPaddingX}px`,
|
|
17504
17753
|
'--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
|
|
17505
17754
|
'--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
|
|
17506
17755
|
'--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
|
|
@@ -17518,7 +17767,6 @@ class SdTr {
|
|
|
17518
17767
|
return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { class: {
|
|
17519
17768
|
'td': true,
|
|
17520
17769
|
'td--selected': true,
|
|
17521
|
-
'td--last-row': this.isVisualLastRowForSelfRow(),
|
|
17522
17770
|
'td--before-separator': this.isVisualLastRowBeforeSeparatorForSelfRow(),
|
|
17523
17771
|
'sticky-left': true,
|
|
17524
17772
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
@@ -17526,19 +17774,19 @@ class SdTr {
|
|
|
17526
17774
|
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
|
|
17527
17775
|
if (this.isCovered(idx))
|
|
17528
17776
|
return null;
|
|
17777
|
+
const fieldName = typeof col.field === 'string' ? col.field : col.name;
|
|
17529
17778
|
const span = this.getSpanFor(col);
|
|
17530
17779
|
const sdCellClass = this.getCellClassFor(col);
|
|
17531
17780
|
return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
|
|
17532
17781
|
'td': true,
|
|
17533
17782
|
[`td--${col.align || 'left'}`]: true,
|
|
17534
|
-
'td--last-row': this.isVisualLastRow(col),
|
|
17535
17783
|
'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
|
|
17536
17784
|
'sticky-left': true,
|
|
17537
17785
|
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
17538
17786
|
'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
|
|
17539
17787
|
[`${col.tdClass}`]: Boolean(col.tdClass),
|
|
17540
17788
|
...this.expandCellClass(sdCellClass),
|
|
17541
|
-
}, style: this.getStickyStyle(idx) }, hAsync("slot", { name: `${this.tableId}-${
|
|
17789
|
+
}, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17542
17790
|
}), middleCols.map((col, relativeIdx) => {
|
|
17543
17791
|
const actualColIdx = stickyLeftCount + relativeIdx;
|
|
17544
17792
|
if (this.isCovered(actualColIdx))
|
|
@@ -17549,11 +17797,10 @@ class SdTr {
|
|
|
17549
17797
|
return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
|
|
17550
17798
|
'td': true,
|
|
17551
17799
|
[`td--${col.align || 'left'}`]: true,
|
|
17552
|
-
'td--last-row': this.isVisualLastRow(col),
|
|
17553
17800
|
'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
|
|
17554
17801
|
[`${col.tdClass}`]: Boolean(col.tdClass),
|
|
17555
17802
|
...this.expandCellClass(sdCellClass),
|
|
17556
|
-
}, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17803
|
+
}, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17557
17804
|
}), stickyRightCols.map((col, relativeIdx) => {
|
|
17558
17805
|
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
17559
17806
|
if (this.isCovered(actualColIdx))
|
|
@@ -17564,14 +17811,13 @@ class SdTr {
|
|
|
17564
17811
|
return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
|
|
17565
17812
|
'td': true,
|
|
17566
17813
|
[`td--${col.align || 'left'}`]: true,
|
|
17567
|
-
'td--last-row': this.isVisualLastRow(col),
|
|
17568
17814
|
'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
|
|
17569
17815
|
'sticky-right': true,
|
|
17570
17816
|
'sticky-right-edge': relativeIdx === 0,
|
|
17571
17817
|
'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
|
|
17572
17818
|
[`${col.tdClass}`]: Boolean(col.tdClass),
|
|
17573
17819
|
...this.expandCellClass(sdCellClass),
|
|
17574
|
-
}, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17820
|
+
}, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17575
17821
|
}))));
|
|
17576
17822
|
}
|
|
17577
17823
|
static get style() { return sdTrCss(); }
|
|
@@ -17613,6 +17859,7 @@ registerComponents([
|
|
|
17613
17859
|
SdBarcodeInput,
|
|
17614
17860
|
SdButton,
|
|
17615
17861
|
SdCalendar,
|
|
17862
|
+
SdCallout,
|
|
17616
17863
|
SdCard,
|
|
17617
17864
|
SdCheckbox,
|
|
17618
17865
|
SdChip,
|