@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.js
CHANGED
|
@@ -6718,7 +6718,7 @@ const CALENDAR_LAYOUT = {
|
|
|
6718
6718
|
};
|
|
6719
6719
|
const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
|
|
6720
6720
|
|
|
6721
|
-
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)
|
|
6721
|
+
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}`;
|
|
6722
6722
|
|
|
6723
6723
|
class SdCalendar {
|
|
6724
6724
|
constructor(hostRef) {
|
|
@@ -6729,6 +6729,7 @@ class SdCalendar {
|
|
|
6729
6729
|
value = null;
|
|
6730
6730
|
selectable;
|
|
6731
6731
|
events;
|
|
6732
|
+
elevated = false;
|
|
6732
6733
|
currentYear;
|
|
6733
6734
|
currentMonth;
|
|
6734
6735
|
update;
|
|
@@ -6894,7 +6895,8 @@ class SdCalendar {
|
|
|
6894
6895
|
};
|
|
6895
6896
|
const eventMap = this.eventMap;
|
|
6896
6897
|
const legend = this.legendItems;
|
|
6897
|
-
|
|
6898
|
+
const hasEvents = (this.events?.length ?? 0) > 0;
|
|
6899
|
+
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 => {
|
|
6898
6900
|
const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
|
|
6899
6901
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
6900
6902
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -6905,10 +6907,10 @@ class SdCalendar {
|
|
|
6905
6907
|
'sd-calendar__day--today': isToday,
|
|
6906
6908
|
'sd-calendar__day--selected': isSelected,
|
|
6907
6909
|
'sd-calendar__day--disabled': isDisabled,
|
|
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 : ''),
|
|
6910
|
+
}, 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 } })))))));
|
|
6909
6911
|
})), legend.length > 0 && [
|
|
6910
|
-
hAsync("span", { key: '
|
|
6911
|
-
hAsync("div", { key: '
|
|
6912
|
+
hAsync("span", { key: '4ba064cad3188db8342f51ca017e4bf5af8aa460', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
|
|
6913
|
+
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))))),
|
|
6912
6914
|
]));
|
|
6913
6915
|
}
|
|
6914
6916
|
static get watchers() { return {
|
|
@@ -6924,6 +6926,7 @@ class SdCalendar {
|
|
|
6924
6926
|
"value": [1025],
|
|
6925
6927
|
"selectable": [16],
|
|
6926
6928
|
"events": [16],
|
|
6929
|
+
"elevated": [4],
|
|
6927
6930
|
"currentYear": [32],
|
|
6928
6931
|
"currentMonth": [32]
|
|
6929
6932
|
},
|
|
@@ -6933,6 +6936,225 @@ class SdCalendar {
|
|
|
6933
6936
|
}; }
|
|
6934
6937
|
}
|
|
6935
6938
|
|
|
6939
|
+
const callout$1 = {
|
|
6940
|
+
radius: "8",
|
|
6941
|
+
border: {
|
|
6942
|
+
width: "1"
|
|
6943
|
+
},
|
|
6944
|
+
body: {
|
|
6945
|
+
gap: "2",
|
|
6946
|
+
typography: {
|
|
6947
|
+
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",
|
|
6948
|
+
fontSize: "12",
|
|
6949
|
+
fontWeight: "400",
|
|
6950
|
+
lineHeight: "20"},
|
|
6951
|
+
paddingX: "12",
|
|
6952
|
+
paddingY: "8"
|
|
6953
|
+
},
|
|
6954
|
+
"default": {
|
|
6955
|
+
bg: "#F9F9F9",
|
|
6956
|
+
border: "#E1E1E1",
|
|
6957
|
+
content: "#555555"
|
|
6958
|
+
},
|
|
6959
|
+
danger: {
|
|
6960
|
+
bg: "#FCEFEF",
|
|
6961
|
+
border: "#FFB5B5",
|
|
6962
|
+
content: "#222222",
|
|
6963
|
+
title: {
|
|
6964
|
+
bg: "#FB4444",
|
|
6965
|
+
paddingX: "24",
|
|
6966
|
+
gap: "2",
|
|
6967
|
+
typography: {
|
|
6968
|
+
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",
|
|
6969
|
+
fontWeight: "700",
|
|
6970
|
+
fontSize: "16",
|
|
6971
|
+
lineHeight: "26"
|
|
6972
|
+
},
|
|
6973
|
+
color: "#FFFFFF",
|
|
6974
|
+
icon: "24"
|
|
6975
|
+
}
|
|
6976
|
+
}
|
|
6977
|
+
};
|
|
6978
|
+
var calloutTokens = {
|
|
6979
|
+
callout: callout$1
|
|
6980
|
+
};
|
|
6981
|
+
|
|
6982
|
+
const { callout } = calloutTokens;
|
|
6983
|
+
const CALLOUT_LAYOUT = {
|
|
6984
|
+
radius: `${callout.radius}px`,
|
|
6985
|
+
borderWidth: `${callout.border.width}px`,
|
|
6986
|
+
bodyPaddingX: `${callout.body.paddingX}px`,
|
|
6987
|
+
bodyPaddingY: `${callout.body.paddingY}px`,
|
|
6988
|
+
bodyGap: `${callout.body.gap}px`,
|
|
6989
|
+
titlePaddingX: `${callout.danger.title.paddingX}px`,
|
|
6990
|
+
titleGap: `${callout.danger.title.gap}px`,
|
|
6991
|
+
titleIconSize: Number(callout.danger.title.icon),
|
|
6992
|
+
};
|
|
6993
|
+
const CALLOUT_TYPOGRAPHY = {
|
|
6994
|
+
body: {
|
|
6995
|
+
fontFamily: callout.body.typography.fontFamily,
|
|
6996
|
+
fontSize: `${callout.body.typography.fontSize}px`,
|
|
6997
|
+
fontWeight: callout.body.typography.fontWeight,
|
|
6998
|
+
lineHeight: `${callout.body.typography.lineHeight}px`,
|
|
6999
|
+
},
|
|
7000
|
+
title: {
|
|
7001
|
+
fontFamily: callout.danger.title.typography.fontFamily,
|
|
7002
|
+
fontSize: `${callout.danger.title.typography.fontSize}px`,
|
|
7003
|
+
fontWeight: callout.danger.title.typography.fontWeight,
|
|
7004
|
+
lineHeight: `${callout.danger.title.typography.lineHeight}px`,
|
|
7005
|
+
},
|
|
7006
|
+
};
|
|
7007
|
+
const CALLOUT_TYPE_CONFIG = {
|
|
7008
|
+
default: {
|
|
7009
|
+
bg: callout.default.bg,
|
|
7010
|
+
border: callout.default.border,
|
|
7011
|
+
content: callout.default.content,
|
|
7012
|
+
},
|
|
7013
|
+
danger: {
|
|
7014
|
+
bg: callout.danger.bg,
|
|
7015
|
+
border: callout.danger.border,
|
|
7016
|
+
content: callout.danger.content,
|
|
7017
|
+
titleBg: callout.danger.title.bg,
|
|
7018
|
+
titleColor: callout.danger.title.color,
|
|
7019
|
+
},
|
|
7020
|
+
};
|
|
7021
|
+
const DANGER_TITLE_LABEL = '주의사항';
|
|
7022
|
+
const TYPE_ICON = {
|
|
7023
|
+
default: undefined,
|
|
7024
|
+
danger: 'warningFill',
|
|
7025
|
+
};
|
|
7026
|
+
|
|
7027
|
+
const ALLOWED_INLINE_TAGS = new Set(['B', 'STRONG', 'I', 'EM', 'BR', 'SPAN']);
|
|
7028
|
+
const DROP_CONTENT_TAGS = new Set([
|
|
7029
|
+
'SCRIPT',
|
|
7030
|
+
'STYLE',
|
|
7031
|
+
'IFRAME',
|
|
7032
|
+
'OBJECT',
|
|
7033
|
+
'EMBED',
|
|
7034
|
+
'META',
|
|
7035
|
+
'LINK',
|
|
7036
|
+
'BASE',
|
|
7037
|
+
'NOSCRIPT',
|
|
7038
|
+
]);
|
|
7039
|
+
const escapeHtml = (value) => value
|
|
7040
|
+
.replaceAll('&', '&')
|
|
7041
|
+
.replaceAll('<', '<')
|
|
7042
|
+
.replaceAll('>', '>')
|
|
7043
|
+
.replaceAll('"', '"')
|
|
7044
|
+
.replaceAll("'", ''');
|
|
7045
|
+
const createSanitizerTemplate = () => {
|
|
7046
|
+
if (typeof document === 'undefined') {
|
|
7047
|
+
return null;
|
|
7048
|
+
}
|
|
7049
|
+
return document.createElement('template');
|
|
7050
|
+
};
|
|
7051
|
+
const sanitizeNode = (node, doc) => {
|
|
7052
|
+
if (node.nodeType === Node.COMMENT_NODE) {
|
|
7053
|
+
node.remove();
|
|
7054
|
+
return;
|
|
7055
|
+
}
|
|
7056
|
+
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
7057
|
+
return;
|
|
7058
|
+
}
|
|
7059
|
+
const element = node;
|
|
7060
|
+
const tagName = element.tagName;
|
|
7061
|
+
if (DROP_CONTENT_TAGS.has(tagName)) {
|
|
7062
|
+
element.remove();
|
|
7063
|
+
return;
|
|
7064
|
+
}
|
|
7065
|
+
Array.from(element.childNodes).forEach(child => sanitizeNode(child));
|
|
7066
|
+
Array.from(element.attributes).forEach(attr => element.removeAttribute(attr.name));
|
|
7067
|
+
if (ALLOWED_INLINE_TAGS.has(tagName)) {
|
|
7068
|
+
return;
|
|
7069
|
+
}
|
|
7070
|
+
const parent = element.parentNode;
|
|
7071
|
+
if (parent == null) {
|
|
7072
|
+
return;
|
|
7073
|
+
}
|
|
7074
|
+
while (element.firstChild) {
|
|
7075
|
+
parent.insertBefore(element.firstChild, element);
|
|
7076
|
+
}
|
|
7077
|
+
parent.removeChild(element);
|
|
7078
|
+
};
|
|
7079
|
+
const sanitizeInlineHtml = (value) => {
|
|
7080
|
+
const template = createSanitizerTemplate();
|
|
7081
|
+
if (template == null) {
|
|
7082
|
+
return escapeHtml(value);
|
|
7083
|
+
}
|
|
7084
|
+
template.innerHTML = value;
|
|
7085
|
+
Array.from(template.content.childNodes).forEach(child => sanitizeNode(child));
|
|
7086
|
+
return template.innerHTML;
|
|
7087
|
+
};
|
|
7088
|
+
|
|
7089
|
+
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}`;
|
|
7090
|
+
|
|
7091
|
+
class SdCallout {
|
|
7092
|
+
constructor(hostRef) {
|
|
7093
|
+
registerInstance(this, hostRef);
|
|
7094
|
+
}
|
|
7095
|
+
type = 'default';
|
|
7096
|
+
message = [];
|
|
7097
|
+
get calloutStyle() {
|
|
7098
|
+
const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
|
|
7099
|
+
return {
|
|
7100
|
+
'--sd-callout-bg': typeConfig.bg,
|
|
7101
|
+
'--sd-callout-border': typeConfig.border,
|
|
7102
|
+
'--sd-callout-border-width': CALLOUT_LAYOUT.borderWidth,
|
|
7103
|
+
'--sd-callout-content': typeConfig.content,
|
|
7104
|
+
'--sd-callout-radius': CALLOUT_LAYOUT.radius,
|
|
7105
|
+
'--sd-callout-body-padding-x': CALLOUT_LAYOUT.bodyPaddingX,
|
|
7106
|
+
'--sd-callout-body-padding-y': CALLOUT_LAYOUT.bodyPaddingY,
|
|
7107
|
+
'--sd-callout-body-gap': CALLOUT_LAYOUT.bodyGap,
|
|
7108
|
+
'--sd-callout-body-font-family': CALLOUT_TYPOGRAPHY.body.fontFamily,
|
|
7109
|
+
'--sd-callout-body-font-size': CALLOUT_TYPOGRAPHY.body.fontSize,
|
|
7110
|
+
'--sd-callout-body-font-weight': CALLOUT_TYPOGRAPHY.body.fontWeight,
|
|
7111
|
+
'--sd-callout-body-line-height': CALLOUT_TYPOGRAPHY.body.lineHeight,
|
|
7112
|
+
'--sd-callout-title-bg': typeConfig.titleBg ?? 'transparent',
|
|
7113
|
+
'--sd-callout-title-color': typeConfig.titleColor ?? 'inherit',
|
|
7114
|
+
'--sd-callout-title-padding-x': CALLOUT_LAYOUT.titlePaddingX,
|
|
7115
|
+
'--sd-callout-title-gap': CALLOUT_LAYOUT.titleGap,
|
|
7116
|
+
'--sd-callout-title-font-family': CALLOUT_TYPOGRAPHY.title.fontFamily,
|
|
7117
|
+
'--sd-callout-title-font-size': CALLOUT_TYPOGRAPHY.title.fontSize,
|
|
7118
|
+
'--sd-callout-title-font-weight': CALLOUT_TYPOGRAPHY.title.fontWeight,
|
|
7119
|
+
'--sd-callout-title-line-height': CALLOUT_TYPOGRAPHY.title.lineHeight,
|
|
7120
|
+
};
|
|
7121
|
+
}
|
|
7122
|
+
renderListItem(msg, depth = 0) {
|
|
7123
|
+
if (Array.isArray(msg)) {
|
|
7124
|
+
return msg.flatMap(m => this.renderListItem(m, depth + 1));
|
|
7125
|
+
}
|
|
7126
|
+
return [this.renderLi(msg, depth)];
|
|
7127
|
+
}
|
|
7128
|
+
renderLi = (msg, depth) => {
|
|
7129
|
+
const safeDepth = Math.min(Math.max(depth, 1), 2);
|
|
7130
|
+
return (hAsync("li", { class: `sd-callout__list__item sd-callout__list__item--depth-${safeDepth}` }, hAsync("p", { innerHTML: sanitizeInlineHtml(msg) })));
|
|
7131
|
+
};
|
|
7132
|
+
renderBody() {
|
|
7133
|
+
return hAsync("ul", { class: "sd-callout__list" }, this.renderListItem(this.message));
|
|
7134
|
+
}
|
|
7135
|
+
renderTitle() {
|
|
7136
|
+
const iconName = TYPE_ICON[this.type];
|
|
7137
|
+
const titleColor = CALLOUT_TYPE_CONFIG[this.type].titleColor;
|
|
7138
|
+
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)));
|
|
7139
|
+
}
|
|
7140
|
+
render() {
|
|
7141
|
+
const showTitle = this.type === 'danger';
|
|
7142
|
+
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())));
|
|
7143
|
+
}
|
|
7144
|
+
static get style() { return sdCalloutCss(); }
|
|
7145
|
+
static get cmpMeta() { return {
|
|
7146
|
+
"$flags$": 512,
|
|
7147
|
+
"$tagName$": "sd-callout",
|
|
7148
|
+
"$members$": {
|
|
7149
|
+
"type": [513],
|
|
7150
|
+
"message": [16]
|
|
7151
|
+
},
|
|
7152
|
+
"$listeners$": undefined,
|
|
7153
|
+
"$lazyBundleId$": "-",
|
|
7154
|
+
"$attrsToReflect$": [["type", "type"]]
|
|
7155
|
+
}; }
|
|
7156
|
+
}
|
|
7157
|
+
|
|
6936
7158
|
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}`;
|
|
6937
7159
|
|
|
6938
7160
|
class SdCard {
|
|
@@ -6942,7 +7164,7 @@ class SdCard {
|
|
|
6942
7164
|
bordered = false;
|
|
6943
7165
|
sdClass = '';
|
|
6944
7166
|
render() {
|
|
6945
|
-
return (hAsync(Fragment, { key: '
|
|
7167
|
+
return (hAsync(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, hAsync("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
|
|
6946
7168
|
}
|
|
6947
7169
|
static get style() { return sdCardCss(); }
|
|
6948
7170
|
static get cmpMeta() { return {
|
|
@@ -7113,7 +7335,12 @@ class SdCheckbox {
|
|
|
7113
7335
|
this.hasWarnedMissingVal = true;
|
|
7114
7336
|
}
|
|
7115
7337
|
const valueSet = new Set(this.value);
|
|
7116
|
-
valueSet.has(this.val)
|
|
7338
|
+
if (valueSet.has(this.val)) {
|
|
7339
|
+
valueSet.delete(this.val);
|
|
7340
|
+
}
|
|
7341
|
+
else {
|
|
7342
|
+
valueSet.add(this.val);
|
|
7343
|
+
}
|
|
7117
7344
|
newValue = Array.from(valueSet);
|
|
7118
7345
|
}
|
|
7119
7346
|
else if (this.value === null) {
|
|
@@ -7146,13 +7373,13 @@ class SdCheckbox {
|
|
|
7146
7373
|
'--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
|
|
7147
7374
|
'--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
|
|
7148
7375
|
};
|
|
7149
|
-
return (hAsync("label", { key: '
|
|
7376
|
+
return (hAsync("label", { key: '1e1ba8ab22e34327cfdfb8d236aba0e1ff2806f6', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '82b852e0fb3ca94c460b7181ae1c575b361ddd4d', type: "checkbox", ref: el => {
|
|
7150
7377
|
this.inputEl = el;
|
|
7151
|
-
}, 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: '
|
|
7378
|
+
}, 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
|
|
7152
7379
|
? CHECKBOX_COLORS.checked.iconDisabled
|
|
7153
7380
|
: this.inverse
|
|
7154
7381
|
? CHECKBOX_COLORS.checked.iconInverse
|
|
7155
|
-
: CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '
|
|
7382
|
+
: CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '396b7aa27a10428e5d9d24a3f523c3a384d4e463', class: "sd-checkbox__label" }, this.label)));
|
|
7156
7383
|
}
|
|
7157
7384
|
static get watchers() { return {
|
|
7158
7385
|
"value": [{
|
|
@@ -7466,7 +7693,7 @@ class SdChip {
|
|
|
7466
7693
|
'--sd-chip-font-weight': typography.fontWeight,
|
|
7467
7694
|
'--sd-chip-line-height': typography.lineHeight,
|
|
7468
7695
|
};
|
|
7469
|
-
return (hAsync("span", { key: '
|
|
7696
|
+
return (hAsync("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
|
|
7470
7697
|
'sd-chip': true,
|
|
7471
7698
|
[`sd-chip--${state}`]: true,
|
|
7472
7699
|
'sd-chip--disabled': this.disabled,
|
|
@@ -7558,8 +7785,19 @@ const color = {
|
|
|
7558
7785
|
strong: "#006AC1"},
|
|
7559
7786
|
grey: {
|
|
7560
7787
|
strong: "#737373"}};
|
|
7788
|
+
const shadow = {
|
|
7789
|
+
spread: {
|
|
7790
|
+
md: {
|
|
7791
|
+
x: "0",
|
|
7792
|
+
y: "0",
|
|
7793
|
+
blur: "24",
|
|
7794
|
+
spread: "0",
|
|
7795
|
+
color: "rgba(34,34,34,0.2)"}
|
|
7796
|
+
}};
|
|
7561
7797
|
var systemTokens = {
|
|
7562
|
-
color: color
|
|
7798
|
+
color: color,
|
|
7799
|
+
shadow: shadow
|
|
7800
|
+
};
|
|
7563
7801
|
|
|
7564
7802
|
const CIRCLE_PROGRESS_LABEL_COLOR = progressTokens.progress.color.label;
|
|
7565
7803
|
const CIRCLE_PROGRESS_PERCENT_ZERO_COLOR = systemTokens.color.fg.tertiary;
|
|
@@ -7619,7 +7857,7 @@ class SdCircleProgress {
|
|
|
7619
7857
|
}
|
|
7620
7858
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
7621
7859
|
const showPercent = !this.indeterminate;
|
|
7622
|
-
return (hAsync(Host, { key: '
|
|
7860
|
+
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)));
|
|
7623
7861
|
}
|
|
7624
7862
|
static get style() { return sdCircleProgressCss(); }
|
|
7625
7863
|
static get cmpMeta() { return {
|
|
@@ -7735,9 +7973,9 @@ class SdConfirmModal {
|
|
|
7735
7973
|
const type = this.resolvedType;
|
|
7736
7974
|
const iconName = CONFIRM_MODAL_ICON_MAP[type];
|
|
7737
7975
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
|
|
7738
|
-
return (hAsync("div", { key: '
|
|
7976
|
+
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 => {
|
|
7739
7977
|
this.customContentRef = el;
|
|
7740
|
-
} })) : (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: '
|
|
7978
|
+
} })) : (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() }))));
|
|
7741
7979
|
}
|
|
7742
7980
|
static get style() { return sdConfirmModalCss(); }
|
|
7743
7981
|
static get cmpMeta() { return {
|
|
@@ -7963,9 +8201,9 @@ class SdDatePicker {
|
|
|
7963
8201
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
7964
8202
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
7965
8203
|
};
|
|
7966
|
-
return (hAsync("sd-field", { key: '
|
|
8204
|
+
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 => {
|
|
7967
8205
|
this.triggerRef = el;
|
|
7968
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
8206
|
+
} }, 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 })))));
|
|
7969
8207
|
}
|
|
7970
8208
|
static get watchers() { return {
|
|
7971
8209
|
"isOpen": [{
|
|
@@ -8048,7 +8286,7 @@ class SdDatePickerTrigger {
|
|
|
8048
8286
|
? DATEPICKER_COLORS.icon.disabled
|
|
8049
8287
|
: DATEPICKER_COLORS.icon.default,
|
|
8050
8288
|
};
|
|
8051
|
-
return (hAsync("div", { key: '
|
|
8289
|
+
return (hAsync("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
8052
8290
|
'sd-date-picker-trigger': true,
|
|
8053
8291
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
8054
8292
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -8056,7 +8294,7 @@ class SdDatePickerTrigger {
|
|
|
8056
8294
|
e.preventDefault();
|
|
8057
8295
|
this.handleClick();
|
|
8058
8296
|
}
|
|
8059
|
-
} }, hAsync("sd-icon", { key: '
|
|
8297
|
+
} }, 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)));
|
|
8060
8298
|
}
|
|
8061
8299
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
8062
8300
|
static get cmpMeta() { return {
|
|
@@ -8476,7 +8714,7 @@ class SdDateRangePickerCalendar {
|
|
|
8476
8714
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
8477
8715
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
8478
8716
|
};
|
|
8479
|
-
return (hAsync(Fragment, { key: '
|
|
8717
|
+
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)))));
|
|
8480
8718
|
}
|
|
8481
8719
|
static get watchers() { return {
|
|
8482
8720
|
"value": [{
|
|
@@ -8832,12 +9070,12 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8832
9070
|
if (!item.disabled) {
|
|
8833
9071
|
this.itemIndex = index;
|
|
8834
9072
|
}
|
|
8835
|
-
} }, 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 })));
|
|
9073
|
+
} }, 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) })));
|
|
8836
9074
|
})))));
|
|
8837
9075
|
}
|
|
8838
9076
|
render() {
|
|
8839
9077
|
const { config, preset } = this.resolvedConfig;
|
|
8840
|
-
return (hAsync("div", { key: '
|
|
9078
|
+
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: {
|
|
8841
9079
|
'--sd-dropdown-button-bg': config.color,
|
|
8842
9080
|
'--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
|
|
8843
9081
|
'--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
|
|
@@ -8847,10 +9085,10 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
8847
9085
|
'--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
|
|
8848
9086
|
'--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
|
|
8849
9087
|
'--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
|
|
8850
|
-
} }, hAsync("span", { key: '
|
|
9088
|
+
} }, 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: {
|
|
8851
9089
|
'sd-dropdown-button__trigger-icon': true,
|
|
8852
9090
|
'sd-dropdown-button__trigger-icon--open': this.isOpen,
|
|
8853
|
-
}, "aria-hidden": "true" }, hAsync("sd-icon", { key: '
|
|
9091
|
+
}, "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)));
|
|
8854
9092
|
}
|
|
8855
9093
|
static get watchers() { return {
|
|
8856
9094
|
"isOpen": [{
|
|
@@ -9123,20 +9361,20 @@ class SdField {
|
|
|
9123
9361
|
: {}),
|
|
9124
9362
|
}
|
|
9125
9363
|
: {};
|
|
9126
|
-
return (hAsync("div", { key: '
|
|
9364
|
+
return (hAsync("div", { key: '1cc135c77708546f23b699bf337c018f6c4d315e', class: {
|
|
9127
9365
|
'sd-field': true,
|
|
9128
9366
|
'sd-field--has-label': this.label !== '',
|
|
9129
9367
|
'sd-field--has-addon': addon !== '',
|
|
9130
9368
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
9131
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, hAsync("div", { key: '
|
|
9369
|
+
}, 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
|
|
9132
9370
|
? {
|
|
9133
9371
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
9134
9372
|
flex: 'none',
|
|
9135
9373
|
}
|
|
9136
|
-
: {} }, hAsync("div", { key: '
|
|
9374
|
+
: {} }, hAsync("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
|
|
9137
9375
|
'sd-field__control': true,
|
|
9138
9376
|
'sd-field__control--has-addon': addon !== '',
|
|
9139
|
-
} }, addon && hAsync("div", { key: '
|
|
9377
|
+
} }, 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))))));
|
|
9140
9378
|
}
|
|
9141
9379
|
renderLabel(label) {
|
|
9142
9380
|
if (label == null || label === '')
|
|
@@ -9622,7 +9860,7 @@ class SdFloatingPopover {
|
|
|
9622
9860
|
}
|
|
9623
9861
|
}
|
|
9624
9862
|
render() {
|
|
9625
|
-
return hAsync("slot", { key: '
|
|
9863
|
+
return hAsync("slot", { key: '5b469964bfbbdf1d40c6d7c88a266d655fe3e029' });
|
|
9626
9864
|
}
|
|
9627
9865
|
static get style() { return sdFloatingPortalCss(); }
|
|
9628
9866
|
static get cmpMeta() { return {
|
|
@@ -10109,10 +10347,10 @@ class SdGuide {
|
|
|
10109
10347
|
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
10110
10348
|
if (isActive)
|
|
10111
10349
|
buttonClasses.push('sd-guide__button--active');
|
|
10112
|
-
return (hAsync("div", { key: '
|
|
10350
|
+
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: {
|
|
10113
10351
|
...this.guideStyle,
|
|
10114
10352
|
width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
|
|
10115
|
-
} }, hAsync("sd-ghost-button", { key: '
|
|
10353
|
+
} }, 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))))))));
|
|
10116
10354
|
}
|
|
10117
10355
|
// 현재 2depth까지만 스타일 적용
|
|
10118
10356
|
renderListItem(message, depth = 0) {
|
|
@@ -10127,7 +10365,7 @@ class SdGuide {
|
|
|
10127
10365
|
return listItems;
|
|
10128
10366
|
}
|
|
10129
10367
|
renderLi = (message, depth) => {
|
|
10130
|
-
return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: message })));
|
|
10368
|
+
return (hAsync("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, hAsync("p", { innerHTML: sanitizeInlineHtml(message) })));
|
|
10131
10369
|
};
|
|
10132
10370
|
static get style() { return sdGuideCss(); }
|
|
10133
10371
|
static get cmpMeta() { return {
|
|
@@ -10613,12 +10851,12 @@ class SdInput {
|
|
|
10613
10851
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
10614
10852
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
10615
10853
|
};
|
|
10616
|
-
return (hAsync("sd-field", { key: '
|
|
10854
|
+
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 () => {
|
|
10617
10855
|
if (this.disabled || this.readonly)
|
|
10618
10856
|
return;
|
|
10619
10857
|
this.internalValue = '';
|
|
10620
10858
|
await this.formField?.sdValidate();
|
|
10621
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
10859
|
+
} })), 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: () => {
|
|
10622
10860
|
if (this.disabled || this.readonly)
|
|
10623
10861
|
return;
|
|
10624
10862
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -10711,6 +10949,9 @@ const table = {
|
|
|
10711
10949
|
paddingY: "6"
|
|
10712
10950
|
},
|
|
10713
10951
|
paddingX: "16",
|
|
10952
|
+
frame: {
|
|
10953
|
+
padding: "8"
|
|
10954
|
+
},
|
|
10714
10955
|
typography: {
|
|
10715
10956
|
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",
|
|
10716
10957
|
fontWeight: "400",
|
|
@@ -11026,7 +11267,7 @@ class SdLinearProgress {
|
|
|
11026
11267
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
11027
11268
|
};
|
|
11028
11269
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
11029
|
-
return (hAsync(Host, { key: '
|
|
11270
|
+
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)));
|
|
11030
11271
|
}
|
|
11031
11272
|
static get style() { return sdLinearProgressCss(); }
|
|
11032
11273
|
static get cmpMeta() { return {
|
|
@@ -11060,10 +11301,10 @@ class SdLoadingContainer {
|
|
|
11060
11301
|
this.visible = false;
|
|
11061
11302
|
}
|
|
11062
11303
|
render() {
|
|
11063
|
-
return (hAsync("div", { key: '
|
|
11304
|
+
return (hAsync("div", { key: '0b6c91593d615ac39f8a4fc30df8466969ae4d9b', class: {
|
|
11064
11305
|
'sd-loading-container': true,
|
|
11065
11306
|
'sd-loading-container--visible': this.visible,
|
|
11066
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
11307
|
+
}, "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)))));
|
|
11067
11308
|
}
|
|
11068
11309
|
static get style() { return sdLoadingContainerCss(); }
|
|
11069
11310
|
static get cmpMeta() { return {
|
|
@@ -11159,7 +11400,7 @@ class SdLoadingModal {
|
|
|
11159
11400
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
11160
11401
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
11161
11402
|
};
|
|
11162
|
-
return (hAsync(Host, { key: '
|
|
11403
|
+
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 }))))));
|
|
11163
11404
|
}
|
|
11164
11405
|
static get style() { return sdLoadingModalCss(); }
|
|
11165
11406
|
static get cmpMeta() { return {
|
|
@@ -11950,15 +12191,15 @@ class SdNumberInput {
|
|
|
11950
12191
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
11951
12192
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
11952
12193
|
};
|
|
11953
|
-
return (hAsync("sd-field", { key: '
|
|
12194
|
+
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: {
|
|
11954
12195
|
'sd-number-input__content': true,
|
|
11955
12196
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
11956
|
-
} }, this.useButton && (hAsync("button", { key: '
|
|
12197
|
+
} }, 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()
|
|
11957
12198
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11958
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '
|
|
12199
|
+
: 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: {
|
|
11959
12200
|
textAlign: this.useButton ? 'center' : 'right',
|
|
11960
12201
|
...this.inputStyle,
|
|
11961
|
-
} }), this.inputSuffix && hAsync("span", { key: '
|
|
12202
|
+
} }), 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()
|
|
11962
12203
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
11963
12204
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
11964
12205
|
}
|
|
@@ -12165,13 +12406,13 @@ class SdPagination {
|
|
|
12165
12406
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
12166
12407
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
12167
12408
|
};
|
|
12168
|
-
return (hAsync("div", { key: '
|
|
12409
|
+
return (hAsync("div", { key: 'b16a4c0ff75913e80fdb9a539d8afb714931a531', class: {
|
|
12169
12410
|
'sd-pagination': true,
|
|
12170
12411
|
'sd-pagination--simple': this.simple,
|
|
12171
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
12412
|
+
}, 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: {
|
|
12172
12413
|
'sd-pagination__item': true,
|
|
12173
12414
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
12174
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
12415
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '9695ce3aaede66529547151800fede0f5413e7d8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
12175
12416
|
}
|
|
12176
12417
|
static get style() { return sdPaginationCss(); }
|
|
12177
12418
|
static get cmpMeta() { return {
|
|
@@ -12322,6 +12563,7 @@ var popupTokens = {
|
|
|
12322
12563
|
};
|
|
12323
12564
|
|
|
12324
12565
|
const { popup } = popupTokens;
|
|
12566
|
+
const shadowSpreadMd = systemTokens.shadow.spread.md;
|
|
12325
12567
|
const POPUP_LAYOUT = {
|
|
12326
12568
|
bodyBg: popup.bg,
|
|
12327
12569
|
};
|
|
@@ -12338,7 +12580,6 @@ const POPUP_HEADER = {
|
|
|
12338
12580
|
fontWeight: popup.header.typography.fontWeight,
|
|
12339
12581
|
fontSize: Number(popup.header.typography.fontSize),
|
|
12340
12582
|
lineHeight: Number(popup.header.typography.lineHeight),
|
|
12341
|
-
// TODO: 토큰 반영 후 교체
|
|
12342
12583
|
height: 50,
|
|
12343
12584
|
paddingX: 16,
|
|
12344
12585
|
paddingY: 10,
|
|
@@ -12348,11 +12589,9 @@ const POPUP_FOOTER = {
|
|
|
12348
12589
|
paddingX: Number(popup.footer.paddingX),
|
|
12349
12590
|
paddingY: Number(popup.footer.paddingY),
|
|
12350
12591
|
gap: Number(popup.footer.gap),
|
|
12351
|
-
// TODO: 토큰 반영 후 교체
|
|
12352
12592
|
height: 52,
|
|
12353
12593
|
slotHeight: 36,
|
|
12354
|
-
|
|
12355
|
-
shadow: '0 -2px 8px 0 rgba(0, 0, 0, 0.08)',
|
|
12594
|
+
shadow: `${shadowSpreadMd.x}px ${shadowSpreadMd.y}px ${shadowSpreadMd.blur}px ${shadowSpreadMd.spread}px ${shadowSpreadMd.color}`,
|
|
12356
12595
|
};
|
|
12357
12596
|
|
|
12358
12597
|
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}`;
|
|
@@ -12368,6 +12607,8 @@ class SdPopup {
|
|
|
12368
12607
|
}
|
|
12369
12608
|
popupTitle = '';
|
|
12370
12609
|
type = 'default';
|
|
12610
|
+
// 기본 footer 표시가 자연스러운 UX. prop 이름 변경(hideFooter 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
12611
|
+
// eslint-disable-next-line stencil/ban-default-true
|
|
12371
12612
|
useFooter = true;
|
|
12372
12613
|
submitButtonProps;
|
|
12373
12614
|
submit;
|
|
@@ -12395,7 +12636,7 @@ class SdPopup {
|
|
|
12395
12636
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
12396
12637
|
...this.submitButtonProps,
|
|
12397
12638
|
};
|
|
12398
|
-
return (hAsync("div", { key: '
|
|
12639
|
+
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() })))));
|
|
12399
12640
|
}
|
|
12400
12641
|
static get style() { return sdPopupCss(); }
|
|
12401
12642
|
static get cmpMeta() { return {
|
|
@@ -12638,7 +12879,7 @@ class SdPortal {
|
|
|
12638
12879
|
this.close.emit();
|
|
12639
12880
|
}
|
|
12640
12881
|
render() {
|
|
12641
|
-
return hAsync("slot", { key: '
|
|
12882
|
+
return hAsync("slot", { key: 'a227fa8a0639de7fd3a014762998692151284f87' });
|
|
12642
12883
|
}
|
|
12643
12884
|
static get watchers() { return {
|
|
12644
12885
|
"open": [{
|
|
@@ -13316,15 +13557,15 @@ class SdSelect {
|
|
|
13316
13557
|
this.closeDropdown();
|
|
13317
13558
|
},
|
|
13318
13559
|
};
|
|
13319
|
-
return (hAsync("sd-field", { key: '
|
|
13560
|
+
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: () => {
|
|
13320
13561
|
this.hovered = true;
|
|
13321
13562
|
}, onMouseLeave: () => {
|
|
13322
13563
|
this.hovered = false;
|
|
13323
|
-
} }, hAsync("div", { key: '
|
|
13564
|
+
} }, hAsync("div", { key: 'bcba54ed8d325a540d14af14c9b3bf332f631ce8', class: "sd-select", ref: el => {
|
|
13324
13565
|
this.triggerRef = el;
|
|
13325
|
-
} }, hAsync("sd-select-trigger", { key: '
|
|
13566
|
+
} }, hAsync("sd-select-trigger", { key: '72e361ca6e162eee56b82398902e89226e980d3d', ref: el => {
|
|
13326
13567
|
this.triggerComponentRef = el;
|
|
13327
|
-
}, 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: '
|
|
13568
|
+
}, 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) })))));
|
|
13328
13569
|
}
|
|
13329
13570
|
static get watchers() { return {
|
|
13330
13571
|
"isOpen": [{
|
|
@@ -13616,7 +13857,7 @@ class SdSelectListItem {
|
|
|
13616
13857
|
return (
|
|
13617
13858
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
13618
13859
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
13619
|
-
hAsync("div", { key: '
|
|
13860
|
+
hAsync("div", { key: '37189acb2854061fd120d662050fddddb396170c', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
13620
13861
|
'sd-select-list-item': true,
|
|
13621
13862
|
'sd-select-list-item--group': isGroup,
|
|
13622
13863
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -13626,7 +13867,7 @@ class SdSelectListItem {
|
|
|
13626
13867
|
'sd-select-list-item--focused': this.isFocused,
|
|
13627
13868
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
13628
13869
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
13629
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
13870
|
+
}, 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, ")"))));
|
|
13630
13871
|
}
|
|
13631
13872
|
static get style() { return sdSelectListItemCss(); }
|
|
13632
13873
|
static get cmpMeta() { return {
|
|
@@ -13694,15 +13935,15 @@ class SdSelectListItemSearch {
|
|
|
13694
13935
|
clearTimeout(this.debounceTimer);
|
|
13695
13936
|
}
|
|
13696
13937
|
render() {
|
|
13697
|
-
return (hAsync("div", { key: '
|
|
13938
|
+
return (hAsync("div", { key: 'a8b62b61ec6a0afd69de50b8df02e57de2a04c8c', class: {
|
|
13698
13939
|
'sd-select-list-item-search': true,
|
|
13699
13940
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
13700
|
-
} }, hAsync("div", { key: '
|
|
13941
|
+
} }, 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 => {
|
|
13701
13942
|
this.inputEl = el;
|
|
13702
|
-
}, 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: '
|
|
13943
|
+
}, 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: {
|
|
13703
13944
|
'sd-select-list-item-search__clear': true,
|
|
13704
13945
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
13705
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
13946
|
+
}, 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" })))));
|
|
13706
13947
|
}
|
|
13707
13948
|
static get style() { return sdSelectListItemSearchCss(); }
|
|
13708
13949
|
static get cmpMeta() { return {
|
|
@@ -14073,9 +14314,9 @@ class SdSelectListbox {
|
|
|
14073
14314
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
14074
14315
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
14075
14316
|
};
|
|
14076
|
-
return (hAsync("div", { key: '
|
|
14317
|
+
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 => {
|
|
14077
14318
|
this.listEl = el;
|
|
14078
|
-
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '
|
|
14319
|
+
} }, 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) })))))));
|
|
14079
14320
|
}
|
|
14080
14321
|
static get watchers() { return {
|
|
14081
14322
|
"searchKeyword": [{
|
|
@@ -14156,7 +14397,7 @@ class SdSelectTrigger {
|
|
|
14156
14397
|
? SELECT_COLORS.icon.disabled
|
|
14157
14398
|
: SELECT_COLORS.icon.default,
|
|
14158
14399
|
};
|
|
14159
|
-
return (hAsync("div", { key: '
|
|
14400
|
+
return (hAsync("div", { key: '645d8e7ff5065664a3510b127628cb54d97fb613', ref: el => {
|
|
14160
14401
|
this.triggerEl = el;
|
|
14161
14402
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
14162
14403
|
'sd-select-trigger': true,
|
|
@@ -14167,7 +14408,7 @@ class SdSelectTrigger {
|
|
|
14167
14408
|
e.preventDefault();
|
|
14168
14409
|
this.handleClick();
|
|
14169
14410
|
}
|
|
14170
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '
|
|
14411
|
+
}, 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: {
|
|
14171
14412
|
'sd-select-trigger__icon': true,
|
|
14172
14413
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
14173
14414
|
} }))));
|
|
@@ -14289,7 +14530,7 @@ class SdSwitch {
|
|
|
14289
14530
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
14290
14531
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
14291
14532
|
};
|
|
14292
|
-
return (hAsync("label", { key: '
|
|
14533
|
+
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)));
|
|
14293
14534
|
}
|
|
14294
14535
|
static get style() { return sdSwitchCss(); }
|
|
14295
14536
|
static get cmpMeta() { return {
|
|
@@ -14364,7 +14605,9 @@ const TABLE_BODY_LAYOUT = {
|
|
|
14364
14605
|
height: tableTokens.table.body.dense.height,
|
|
14365
14606
|
paddingY: tableTokens.table.body.dense.paddingY,
|
|
14366
14607
|
},
|
|
14367
|
-
paddingX: tableTokens.table.body.paddingX
|
|
14608
|
+
paddingX: tableTokens.table.body.paddingX,
|
|
14609
|
+
framePadding: tableTokens.table.body.frame.padding,
|
|
14610
|
+
};
|
|
14368
14611
|
const TABLE_BODY_TYPOGRAPHY = {
|
|
14369
14612
|
fontFamily: tableTokens.table.body.typography.fontFamily,
|
|
14370
14613
|
fontWeight: tableTokens.table.body.typography.fontWeight,
|
|
@@ -14433,7 +14676,9 @@ class SdTable {
|
|
|
14433
14676
|
get effectiveRowHeight() {
|
|
14434
14677
|
if (this.rowHeight != null)
|
|
14435
14678
|
return this.rowHeight;
|
|
14436
|
-
return this.dense
|
|
14679
|
+
return this.dense
|
|
14680
|
+
? Number(TABLE_BODY_LAYOUT.dense.height)
|
|
14681
|
+
: Number(TABLE_BODY_LAYOUT.default.height);
|
|
14437
14682
|
}
|
|
14438
14683
|
virtualBuffer = 5;
|
|
14439
14684
|
virtualEndThreshold = 10;
|
|
@@ -14609,6 +14854,10 @@ class SdTable {
|
|
|
14609
14854
|
if (this.pagination?.rowsPerPage != null) {
|
|
14610
14855
|
this.innerRowsPerPage = this.pagination.rowsPerPage;
|
|
14611
14856
|
}
|
|
14857
|
+
// host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
|
|
14858
|
+
// 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
|
|
14859
|
+
// 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
|
|
14860
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14612
14861
|
const el = this.el;
|
|
14613
14862
|
el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
|
|
14614
14863
|
el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
|
|
@@ -14627,7 +14876,6 @@ class SdTable {
|
|
|
14627
14876
|
el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
|
|
14628
14877
|
el.getSpanSync = this.getSpanSync.bind(this);
|
|
14629
14878
|
el.isCoveredSync = this.isCoveredSync.bind(this);
|
|
14630
|
-
el.isVisualLastRowSync = this.isVisualLastRowSync.bind(this);
|
|
14631
14879
|
el.registerSeparatorSync = this.registerSeparatorSync.bind(this);
|
|
14632
14880
|
el.unregisterSeparatorSync = this.unregisterSeparatorSync.bind(this);
|
|
14633
14881
|
el.isVisualLastRowBeforeSeparatorSync = this.isVisualLastRowBeforeSeparatorSync.bind(this);
|
|
@@ -14638,6 +14886,7 @@ class SdTable {
|
|
|
14638
14886
|
el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
|
|
14639
14887
|
el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
|
|
14640
14888
|
el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
|
|
14889
|
+
el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
|
|
14641
14890
|
if (Array.isArray(this.rows)) {
|
|
14642
14891
|
this.rowCount = this.rows.length;
|
|
14643
14892
|
this.pushRowsToChildren(this.rows);
|
|
@@ -14715,10 +14964,16 @@ class SdTable {
|
|
|
14715
14964
|
}
|
|
14716
14965
|
});
|
|
14717
14966
|
this.noDataContentResizeObserver.observe(target);
|
|
14718
|
-
|
|
14719
|
-
|
|
14967
|
+
readTask(() => {
|
|
14968
|
+
if (!this.noDataContentEl)
|
|
14969
|
+
return;
|
|
14970
|
+
const measured = Math.ceil(this.noDataContentEl.scrollHeight);
|
|
14971
|
+
const next = Math.max(60, measured);
|
|
14972
|
+
if (next !== this.noDataBodyHeight) {
|
|
14973
|
+
this.noDataBodyHeight = next;
|
|
14974
|
+
}
|
|
14975
|
+
});
|
|
14720
14976
|
}
|
|
14721
|
-
// light DOM(manual mode 자식)과 shadow DOM(autoThead/autoTbody fallback) 양쪽 모두에서 자식을 찾는다.
|
|
14722
14977
|
queryChildEl(selector) {
|
|
14723
14978
|
return (this.el.querySelector(selector) ??
|
|
14724
14979
|
this.el.shadowRoot?.querySelector(selector) ??
|
|
@@ -14746,12 +15001,12 @@ class SdTable {
|
|
|
14746
15001
|
refreshChildrenSelection() {
|
|
14747
15002
|
const thead = this.queryChildEl('sd-thead');
|
|
14748
15003
|
thead?.refreshSelection?.();
|
|
14749
|
-
this.queryAllTr().forEach(tr => tr
|
|
15004
|
+
this.queryAllTr().forEach(tr => tr.refreshSelection?.());
|
|
14750
15005
|
}
|
|
14751
15006
|
refreshChildrenConfig() {
|
|
14752
15007
|
const thead = this.queryChildEl('sd-thead');
|
|
14753
15008
|
thead?.refreshConfig?.();
|
|
14754
|
-
this.queryAllTr().forEach(tr => tr
|
|
15009
|
+
this.queryAllTr().forEach(tr => tr.refreshConfig?.());
|
|
14755
15010
|
}
|
|
14756
15011
|
maybeEmitVirtualReachEnd(start, end) {
|
|
14757
15012
|
const threshold = Math.max(1, this.virtualEndThreshold);
|
|
@@ -14783,6 +15038,7 @@ class SdTable {
|
|
|
14783
15038
|
this.vsEnd = end;
|
|
14784
15039
|
const topHeight = start * this.effectiveRowHeight;
|
|
14785
15040
|
const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
|
|
15041
|
+
// setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
|
|
14786
15042
|
const tbody = this.queryChildEl('sd-tbody');
|
|
14787
15043
|
tbody?.setSpacersSync?.(topHeight, bottomHeight);
|
|
14788
15044
|
if (rangeChanged) {
|
|
@@ -14840,6 +15096,9 @@ class SdTable {
|
|
|
14840
15096
|
const fields = this.useFrameRegistry.get(rowKey);
|
|
14841
15097
|
return fields != null && fields.size > 0;
|
|
14842
15098
|
}
|
|
15099
|
+
isCellUseFrameSync(rowKey, field) {
|
|
15100
|
+
return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
|
|
15101
|
+
}
|
|
14843
15102
|
isRowSelectedSync(row) {
|
|
14844
15103
|
return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
|
|
14845
15104
|
}
|
|
@@ -14900,7 +15159,7 @@ class SdTable {
|
|
|
14900
15159
|
this.updateRowsVisibility();
|
|
14901
15160
|
}
|
|
14902
15161
|
updateRowsVisibility() {
|
|
14903
|
-
this.queryAllTr().forEach(tr => tr
|
|
15162
|
+
this.queryAllTr().forEach(tr => tr.updateVisibility?.());
|
|
14904
15163
|
}
|
|
14905
15164
|
changeRowsPerPage(perPage) {
|
|
14906
15165
|
const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
|
|
@@ -14939,7 +15198,7 @@ class SdTable {
|
|
|
14939
15198
|
this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
|
|
14940
15199
|
const thead = this.queryChildEl('sd-thead');
|
|
14941
15200
|
thead?.setColumnWidths?.(this.columnWidths);
|
|
14942
|
-
this.queryAllTr().forEach(tr => tr
|
|
15201
|
+
this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
|
|
14943
15202
|
const stickyRightCount = this.stickyColumn?.right || 0;
|
|
14944
15203
|
const visibleColCount = this.columns.filter(c => c.visible !== false).length;
|
|
14945
15204
|
const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
|
|
@@ -14994,9 +15253,8 @@ class SdTable {
|
|
|
14994
15253
|
// 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
|
|
14995
15254
|
requestAllTrUpdate() {
|
|
14996
15255
|
this.queryAllTr().forEach(tr => {
|
|
14997
|
-
|
|
14998
|
-
|
|
14999
|
-
trAny.bumpSpansVersion();
|
|
15256
|
+
if (typeof tr.bumpSpansVersion === 'function') {
|
|
15257
|
+
tr.bumpSpansVersion();
|
|
15000
15258
|
}
|
|
15001
15259
|
});
|
|
15002
15260
|
}
|
|
@@ -15108,7 +15366,7 @@ class SdTable {
|
|
|
15108
15366
|
return false;
|
|
15109
15367
|
}
|
|
15110
15368
|
// rowspan을 반영한 셀의 시각적 하단 행 인덱스를 반환한다.
|
|
15111
|
-
//
|
|
15369
|
+
// isVisualLastRowBeforeSeparatorSync 헬퍼.
|
|
15112
15370
|
resolveVisualBottom(rowKey, field) {
|
|
15113
15371
|
const myRowIdx = this.resolveRowIndex(rowKey);
|
|
15114
15372
|
if (myRowIdx == null)
|
|
@@ -15117,20 +15375,6 @@ class SdTable {
|
|
|
15117
15375
|
const rs = Math.max(1, span?.rowspan ?? 1);
|
|
15118
15376
|
return myRowIdx + rs - 1;
|
|
15119
15377
|
}
|
|
15120
|
-
// 셀의 시각적 하단이 테이블(또는 현재 페이지)의 마지막 행인지 판정.
|
|
15121
|
-
// 마지막 행에 border-bottom: none을 적용하기 위함.
|
|
15122
|
-
isVisualLastRowSync(rowKey, field) {
|
|
15123
|
-
if (this.rowCount <= 0)
|
|
15124
|
-
return false;
|
|
15125
|
-
const visualBottom = this.resolveVisualBottom(rowKey, field);
|
|
15126
|
-
if (visualBottom == null)
|
|
15127
|
-
return false;
|
|
15128
|
-
const pageInfo = this.getPaginationInfoSync();
|
|
15129
|
-
const lastVisibleIdx = pageInfo
|
|
15130
|
-
? Math.min(pageInfo.endIndex - 1, this.rowCount - 1)
|
|
15131
|
-
: this.rowCount - 1;
|
|
15132
|
-
return visualBottom === lastVisibleIdx;
|
|
15133
|
-
}
|
|
15134
15378
|
registerSeparatorSync(prevRowKey) {
|
|
15135
15379
|
const idx = this.resolveRowIndex(prevRowKey);
|
|
15136
15380
|
if (idx != null)
|
|
@@ -15247,25 +15491,25 @@ class SdTable {
|
|
|
15247
15491
|
'--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
|
|
15248
15492
|
'--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
|
|
15249
15493
|
};
|
|
15250
|
-
return (hAsync(Host, { key: '
|
|
15494
|
+
return (hAsync(Host, { key: '9ee5b528b330f9edf406ff40ec089136c0807653', style: hostStyle }, hAsync("div", { key: '9ac6cbba84b7ef7d0897474168748811fb15af92', class: "sd-table__container", style: {
|
|
15251
15495
|
'--table-width': this.width,
|
|
15252
15496
|
'--table-height': effectiveTableHeight,
|
|
15253
15497
|
'--table-container-height': `calc(${effectiveTableHeight} - ${paginationHeight}px)`,
|
|
15254
|
-
} }, hAsync("div", { key: '
|
|
15498
|
+
} }, hAsync("div", { key: '11f916debfd443e1d243bfa2335dbb0a3cb094bc', class: {
|
|
15255
15499
|
'sd-table__wrapper': true,
|
|
15256
15500
|
'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
|
|
15257
|
-
} }, hAsync("div", { key: '
|
|
15501
|
+
} }, hAsync("div", { key: '3cad3d86f731a3edc0d2b5a680bcaf6ad6be7399', class: {
|
|
15258
15502
|
'sd-table__scroll-container': true,
|
|
15259
15503
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
15260
15504
|
'sd-table__scroll-container--no-data': isNoData,
|
|
15261
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
15505
|
+
} }, 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 => {
|
|
15262
15506
|
this.noDataContentEl = el;
|
|
15263
15507
|
if (el)
|
|
15264
15508
|
this.syncNoDataContentObserver();
|
|
15265
|
-
} }, hAsync("slot", { key: '
|
|
15509
|
+
} }, 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 &&
|
|
15266
15510
|
this.pagination.rowsPerPage > 0 &&
|
|
15267
15511
|
this.rowCount > 0 &&
|
|
15268
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
15512
|
+
!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
|
|
15269
15513
|
? this.innerRowsPerPage
|
|
15270
15514
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
15271
15515
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -15557,7 +15801,7 @@ class SdTabs {
|
|
|
15557
15801
|
};
|
|
15558
15802
|
}
|
|
15559
15803
|
render() {
|
|
15560
|
-
return (hAsync("div", { key: '
|
|
15804
|
+
return (hAsync("div", { key: '181916a72512a6802a06dc56fca418a806d18a0e', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
15561
15805
|
const badgeName = this.getBadgeName(tab);
|
|
15562
15806
|
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 => {
|
|
15563
15807
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -15772,6 +16016,8 @@ class SdTag {
|
|
|
15772
16016
|
name = 'square_sm_grey';
|
|
15773
16017
|
label = '';
|
|
15774
16018
|
icon;
|
|
16019
|
+
// 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
16020
|
+
// eslint-disable-next-line stencil/ban-default-true
|
|
15775
16021
|
isLeft = true;
|
|
15776
16022
|
componentWillLoad() {
|
|
15777
16023
|
this.name = this.name ?? 'square_sm_grey';
|
|
@@ -15793,7 +16039,7 @@ class SdTag {
|
|
|
15793
16039
|
render() {
|
|
15794
16040
|
const config = this.resolvedConfig;
|
|
15795
16041
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
15796
|
-
return (hAsync("span", { key: '
|
|
16042
|
+
return (hAsync("span", { key: 'c8b8b88e2c83401bb9d3e05004b0517d7e4a3a6a', class: "sd-tag", style: {
|
|
15797
16043
|
'--sd-tag-background': config.background,
|
|
15798
16044
|
'--sd-tag-content': config.content,
|
|
15799
16045
|
'--sd-tag-height': config.height,
|
|
@@ -15803,7 +16049,7 @@ class SdTag {
|
|
|
15803
16049
|
'--sd-tag-font-weight': config.fontWeight,
|
|
15804
16050
|
'--sd-tag-line-height': config.lineHeight,
|
|
15805
16051
|
'--sd-tag-radius': config.radius,
|
|
15806
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
16052
|
+
}, "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));
|
|
15807
16053
|
}
|
|
15808
16054
|
static get style() { return sdTagCss(); }
|
|
15809
16055
|
static get cmpMeta() { return {
|
|
@@ -15871,9 +16117,9 @@ class SdTbody {
|
|
|
15871
16117
|
}
|
|
15872
16118
|
}
|
|
15873
16119
|
render() {
|
|
15874
|
-
return (hAsync(Host, { key: '
|
|
16120
|
+
return (hAsync(Host, { key: 'a3d0ee1c1820474e97e430ba91f48e12ee0e252d', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'bbd5b9acf02150b146c9b25d07f2e7a9dd347921', class: { tbody: true } }, [
|
|
15875
16121
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
15876
|
-
hAsync("slot", { key: '
|
|
16122
|
+
hAsync("slot", { key: 'f0ec0aa4d7e7190fc93d96afe5591004174fff63' }),
|
|
15877
16123
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
15878
16124
|
])));
|
|
15879
16125
|
}
|
|
@@ -15922,11 +16168,13 @@ class SdTd {
|
|
|
15922
16168
|
this.syncSlotName();
|
|
15923
16169
|
this.syncSpanRegistration();
|
|
15924
16170
|
this.syncCellClassRegistration(oldField);
|
|
16171
|
+
this.syncUseFrameRegistration(oldField);
|
|
15925
16172
|
}
|
|
15926
16173
|
handleRowKeyChange(_newKey, oldKey) {
|
|
15927
16174
|
this.syncSlotName();
|
|
15928
16175
|
this.syncSpanRegistration();
|
|
15929
16176
|
this.syncCellClassRegistration(undefined, oldKey);
|
|
16177
|
+
this.syncUseFrameRegistration(undefined, oldKey);
|
|
15930
16178
|
}
|
|
15931
16179
|
handleSpanChange() {
|
|
15932
16180
|
this.syncSpanRegistration();
|
|
@@ -15937,15 +16185,15 @@ class SdTd {
|
|
|
15937
16185
|
handleDividerChange() {
|
|
15938
16186
|
this.syncCellClassRegistration();
|
|
15939
16187
|
}
|
|
15940
|
-
|
|
15941
|
-
this.
|
|
16188
|
+
handleUseFrameChange() {
|
|
16189
|
+
this.syncUseFrameRegistration();
|
|
15942
16190
|
this.requestParentTrUpdate();
|
|
15943
16191
|
}
|
|
15944
16192
|
componentWillLoad() {
|
|
15945
16193
|
this.syncSlotName();
|
|
15946
16194
|
this.syncSpanRegistration();
|
|
15947
16195
|
this.syncCellClassRegistration();
|
|
15948
|
-
this.
|
|
16196
|
+
this.syncUseFrameRegistration();
|
|
15949
16197
|
// slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
|
|
15950
16198
|
const parentTr = this.el.parentElement;
|
|
15951
16199
|
if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
|
|
@@ -15954,7 +16202,7 @@ class SdTd {
|
|
|
15954
16202
|
this.syncSlotName();
|
|
15955
16203
|
this.syncSpanRegistration();
|
|
15956
16204
|
this.syncCellClassRegistration();
|
|
15957
|
-
this.
|
|
16205
|
+
this.syncUseFrameRegistration();
|
|
15958
16206
|
}
|
|
15959
16207
|
// React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
|
|
15960
16208
|
// 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
|
|
@@ -15962,7 +16210,7 @@ class SdTd {
|
|
|
15962
16210
|
connectedCallback() {
|
|
15963
16211
|
this.syncSpanRegistration();
|
|
15964
16212
|
this.syncCellClassRegistration();
|
|
15965
|
-
this.
|
|
16213
|
+
this.syncUseFrameRegistration();
|
|
15966
16214
|
}
|
|
15967
16215
|
disconnectedCallback() {
|
|
15968
16216
|
const table = this.findTable();
|
|
@@ -16016,9 +16264,16 @@ class SdTd {
|
|
|
16016
16264
|
table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
|
|
16017
16265
|
this.requestParentTrUpdate();
|
|
16018
16266
|
}
|
|
16019
|
-
|
|
16267
|
+
syncUseFrameRegistration(prevField, prevRowKey) {
|
|
16020
16268
|
const table = this.findTable();
|
|
16021
|
-
if (!table
|
|
16269
|
+
if (!table)
|
|
16270
|
+
return;
|
|
16271
|
+
const oldField = prevField ?? this.field;
|
|
16272
|
+
const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
|
|
16273
|
+
if (oldField !== '' && oldRowKey != null) {
|
|
16274
|
+
table.unregisterUseFrameSync?.(oldRowKey, oldField);
|
|
16275
|
+
}
|
|
16276
|
+
if (this.field === '' || this.rowKey == null)
|
|
16022
16277
|
return;
|
|
16023
16278
|
if (this.useFrame) {
|
|
16024
16279
|
table.registerUseFrameSync?.(String(this.rowKey), this.field);
|
|
@@ -16039,7 +16294,7 @@ class SdTd {
|
|
|
16039
16294
|
}
|
|
16040
16295
|
}
|
|
16041
16296
|
render() {
|
|
16042
|
-
return (hAsync(Host, { key: '
|
|
16297
|
+
return (hAsync(Host, { key: '91c033a0c4c3a6c3c9b29c0be99912c5ac1283ee', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'abfbc911c707012bc7d924e328ba07d71b96f9a9' })));
|
|
16043
16298
|
}
|
|
16044
16299
|
static get watchers() { return {
|
|
16045
16300
|
"field": [{
|
|
@@ -16064,7 +16319,7 @@ class SdTd {
|
|
|
16064
16319
|
"handleDividerChange": 0
|
|
16065
16320
|
}],
|
|
16066
16321
|
"useFrame": [{
|
|
16067
|
-
"
|
|
16322
|
+
"handleUseFrameChange": 0
|
|
16068
16323
|
}]
|
|
16069
16324
|
}; }
|
|
16070
16325
|
static get style() { return sdTdCss(); }
|
|
@@ -16323,7 +16578,7 @@ class SdTextarea {
|
|
|
16323
16578
|
'--sd-system-size-field-sm-height': 'auto',
|
|
16324
16579
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
16325
16580
|
};
|
|
16326
|
-
return (hAsync("sd-field", { key: '
|
|
16581
|
+
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 }))));
|
|
16327
16582
|
}
|
|
16328
16583
|
static get watchers() { return {
|
|
16329
16584
|
"value": [{
|
|
@@ -16539,16 +16794,16 @@ class SdThead {
|
|
|
16539
16794
|
'--table-border-color': TABLE_BORDER.color,
|
|
16540
16795
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
16541
16796
|
};
|
|
16542
|
-
return (hAsync(Host, { key: '
|
|
16797
|
+
return (hAsync(Host, { key: '234ca55bb2507aef21df976066e5ce377c2e9e89', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'fecd6b54f72a8643b663c3af1988eed60300d08d', class: {
|
|
16543
16798
|
'thead': true,
|
|
16544
16799
|
'thead--sticky': this._stickyHeader,
|
|
16545
|
-
} }, hAsync("tr", { key: '
|
|
16800
|
+
} }, hAsync("tr", { key: '21d56c50076d3340733b7fa0a8e569fec005e415', class: "tr" }, this._selectable && (hAsync("th", { key: 'ace570ae2157ae63a21ec6ba60d8b8898dd0c33c', class: {
|
|
16546
16801
|
'th': true,
|
|
16547
16802
|
'th--selected': true,
|
|
16548
16803
|
'sticky-left': true,
|
|
16549
16804
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
16550
16805
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
16551
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
16806
|
+
}, 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: {
|
|
16552
16807
|
'th': true,
|
|
16553
16808
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
16554
16809
|
'sticky-left': true,
|
|
@@ -16699,12 +16954,12 @@ class SdToast {
|
|
|
16699
16954
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
16700
16955
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
16701
16956
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
16702
|
-
return (hAsync("div", { key: '
|
|
16957
|
+
return (hAsync("div", { key: '82579581897d7845b95456ccb5e2a1745c84bcc5', style: {
|
|
16703
16958
|
'--sd-toast-bg': typeConfig.bg,
|
|
16704
16959
|
'--sd-toast-text': typeConfig.content,
|
|
16705
16960
|
'--sd-toast-icon': iconColor,
|
|
16706
16961
|
'--sd-toast-link': linkColor,
|
|
16707
|
-
} }, hAsync("div", { key: '
|
|
16962
|
+
} }, 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() })))));
|
|
16708
16963
|
}
|
|
16709
16964
|
static get style() { return sdToastCss(); }
|
|
16710
16965
|
static get cmpMeta() { return {
|
|
@@ -16957,7 +17212,7 @@ class SdToastContainer {
|
|
|
16957
17212
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
16958
17213
|
const indexMap = new Map();
|
|
16959
17214
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
16960
|
-
return (hAsync("div", { key: '
|
|
17215
|
+
return (hAsync("div", { key: 'c80d46b63f50591d4d92b810c0625701e4741e3a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
16961
17216
|
this.expanded = true;
|
|
16962
17217
|
this.pauseTimers();
|
|
16963
17218
|
}, onMouseLeave: () => {
|
|
@@ -17115,7 +17370,7 @@ class SdToggle {
|
|
|
17115
17370
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
17116
17371
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
17117
17372
|
};
|
|
17118
|
-
return (hAsync("label", { key: '
|
|
17373
|
+
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 })));
|
|
17119
17374
|
}
|
|
17120
17375
|
static get style() { return sdToggleCss(); }
|
|
17121
17376
|
static get cmpMeta() { return {
|
|
@@ -17245,14 +17500,14 @@ class SdTooltip {
|
|
|
17245
17500
|
const hasLabel = this.label !== undefined && this.label !== '';
|
|
17246
17501
|
const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
|
|
17247
17502
|
const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
|
|
17248
|
-
return (hAsync(Fragment, { key: '
|
|
17503
|
+
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: {
|
|
17249
17504
|
'sd-floating-menu': true,
|
|
17250
17505
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
17251
17506
|
[`sd-floating-menu--${placement}`]: true,
|
|
17252
17507
|
}, style: {
|
|
17253
17508
|
'--sd-floating-bg': typeConfig.bg,
|
|
17254
17509
|
'--sd-floating-content': typeConfig.content,
|
|
17255
|
-
}, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '
|
|
17510
|
+
}, 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 }))))));
|
|
17256
17511
|
}
|
|
17257
17512
|
static get style() { return sdTooltipCss(); }
|
|
17258
17513
|
static get cmpMeta() { return {
|
|
@@ -17281,7 +17536,7 @@ class SdTooltip {
|
|
|
17281
17536
|
}; }
|
|
17282
17537
|
}
|
|
17283
17538
|
|
|
17284
|
-
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
|
|
17539
|
+
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)}`;
|
|
17285
17540
|
|
|
17286
17541
|
class SdTr {
|
|
17287
17542
|
constructor(hostRef) {
|
|
@@ -17455,6 +17710,13 @@ class SdTr {
|
|
|
17455
17710
|
const fieldName = typeof col.field === 'string' ? col.field : col.name;
|
|
17456
17711
|
return this.tableEl.getCellClassSync(this.rowKey, fieldName);
|
|
17457
17712
|
}
|
|
17713
|
+
getFramePaddingStyle(field) {
|
|
17714
|
+
if (!this._dense)
|
|
17715
|
+
return undefined;
|
|
17716
|
+
if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
|
|
17717
|
+
return undefined;
|
|
17718
|
+
return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
|
|
17719
|
+
}
|
|
17458
17720
|
expandCellClass(classStr) {
|
|
17459
17721
|
if (classStr == null || classStr === '')
|
|
17460
17722
|
return {};
|
|
@@ -17463,20 +17725,6 @@ class SdTr {
|
|
|
17463
17725
|
.filter(Boolean)
|
|
17464
17726
|
.map(c => [c, true]));
|
|
17465
17727
|
}
|
|
17466
|
-
isVisualLastRow(col) {
|
|
17467
|
-
if (!this.tableEl?.isVisualLastRowSync)
|
|
17468
|
-
return false;
|
|
17469
|
-
const fieldName = typeof col.field === 'string' ? col.field : col.name;
|
|
17470
|
-
return this.tableEl.isVisualLastRowSync(this.rowKey, fieldName);
|
|
17471
|
-
}
|
|
17472
|
-
// selectable td는 column 정보가 없으므로 빈 field로 평가한다.
|
|
17473
|
-
// 해당 위치는 rowspan을 등록할 수 없으므로 spanRegistry에 매칭이 없고,
|
|
17474
|
-
// 결과적으로 "내 row 자체가 시각적 마지막인지"가 판정된다.
|
|
17475
|
-
isVisualLastRowForSelfRow() {
|
|
17476
|
-
if (!this.tableEl?.isVisualLastRowSync)
|
|
17477
|
-
return false;
|
|
17478
|
-
return this.tableEl.isVisualLastRowSync(this.rowKey, '');
|
|
17479
|
-
}
|
|
17480
17728
|
isVisualLastRowBeforeSeparator(col) {
|
|
17481
17729
|
if (!this.tableEl?.isVisualLastRowBeforeSeparatorSync)
|
|
17482
17730
|
return false;
|
|
@@ -17497,12 +17745,13 @@ class SdTr {
|
|
|
17497
17745
|
const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
|
|
17498
17746
|
const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
|
|
17499
17747
|
const effectiveDense = this._dense && !isUseFrameRow;
|
|
17500
|
-
const
|
|
17748
|
+
const rowLayoutY = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
|
|
17749
|
+
const rowPaddingX = this._dense && isUseFrameRow ? TABLE_BODY_LAYOUT.paddingX : TABLE_BODY_LAYOUT.paddingX;
|
|
17501
17750
|
const rowStyle = {
|
|
17502
17751
|
'display': this.isVisible ? '' : 'none',
|
|
17503
|
-
'--table-body-height': `${
|
|
17504
|
-
'--table-body-padding-y': `${
|
|
17505
|
-
'--table-body-padding-x': `${
|
|
17752
|
+
'--table-body-height': `${rowLayoutY.height}px`,
|
|
17753
|
+
'--table-body-padding-y': `${rowLayoutY.paddingY}px`,
|
|
17754
|
+
'--table-body-padding-x': `${rowPaddingX}px`,
|
|
17506
17755
|
'--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
|
|
17507
17756
|
'--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
|
|
17508
17757
|
'--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
|
|
@@ -17520,7 +17769,6 @@ class SdTr {
|
|
|
17520
17769
|
return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { class: {
|
|
17521
17770
|
'td': true,
|
|
17522
17771
|
'td--selected': true,
|
|
17523
|
-
'td--last-row': this.isVisualLastRowForSelfRow(),
|
|
17524
17772
|
'td--before-separator': this.isVisualLastRowBeforeSeparatorForSelfRow(),
|
|
17525
17773
|
'sticky-left': true,
|
|
17526
17774
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
@@ -17528,19 +17776,19 @@ class SdTr {
|
|
|
17528
17776
|
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
|
|
17529
17777
|
if (this.isCovered(idx))
|
|
17530
17778
|
return null;
|
|
17779
|
+
const fieldName = typeof col.field === 'string' ? col.field : col.name;
|
|
17531
17780
|
const span = this.getSpanFor(col);
|
|
17532
17781
|
const sdCellClass = this.getCellClassFor(col);
|
|
17533
17782
|
return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
|
|
17534
17783
|
'td': true,
|
|
17535
17784
|
[`td--${col.align || 'left'}`]: true,
|
|
17536
|
-
'td--last-row': this.isVisualLastRow(col),
|
|
17537
17785
|
'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
|
|
17538
17786
|
'sticky-left': true,
|
|
17539
17787
|
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
17540
17788
|
'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
|
|
17541
17789
|
[`${col.tdClass}`]: Boolean(col.tdClass),
|
|
17542
17790
|
...this.expandCellClass(sdCellClass),
|
|
17543
|
-
}, style: this.getStickyStyle(idx) }, hAsync("slot", { name: `${this.tableId}-${
|
|
17791
|
+
}, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17544
17792
|
}), middleCols.map((col, relativeIdx) => {
|
|
17545
17793
|
const actualColIdx = stickyLeftCount + relativeIdx;
|
|
17546
17794
|
if (this.isCovered(actualColIdx))
|
|
@@ -17551,11 +17799,10 @@ class SdTr {
|
|
|
17551
17799
|
return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
|
|
17552
17800
|
'td': true,
|
|
17553
17801
|
[`td--${col.align || 'left'}`]: true,
|
|
17554
|
-
'td--last-row': this.isVisualLastRow(col),
|
|
17555
17802
|
'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
|
|
17556
17803
|
[`${col.tdClass}`]: Boolean(col.tdClass),
|
|
17557
17804
|
...this.expandCellClass(sdCellClass),
|
|
17558
|
-
}, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17805
|
+
}, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17559
17806
|
}), stickyRightCols.map((col, relativeIdx) => {
|
|
17560
17807
|
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
17561
17808
|
if (this.isCovered(actualColIdx))
|
|
@@ -17566,14 +17813,13 @@ class SdTr {
|
|
|
17566
17813
|
return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
|
|
17567
17814
|
'td': true,
|
|
17568
17815
|
[`td--${col.align || 'left'}`]: true,
|
|
17569
|
-
'td--last-row': this.isVisualLastRow(col),
|
|
17570
17816
|
'td--before-separator': this.isVisualLastRowBeforeSeparator(col),
|
|
17571
17817
|
'sticky-right': true,
|
|
17572
17818
|
'sticky-right-edge': relativeIdx === 0,
|
|
17573
17819
|
'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
|
|
17574
17820
|
[`${col.tdClass}`]: Boolean(col.tdClass),
|
|
17575
17821
|
...this.expandCellClass(sdCellClass),
|
|
17576
|
-
}, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17822
|
+
}, style: { ...this.getStickyStyle(actualColIdx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
|
|
17577
17823
|
}))));
|
|
17578
17824
|
}
|
|
17579
17825
|
static get style() { return sdTrCss(); }
|
|
@@ -17615,6 +17861,7 @@ registerComponents([
|
|
|
17615
17861
|
SdBarcodeInput,
|
|
17616
17862
|
SdButton,
|
|
17617
17863
|
SdCalendar,
|
|
17864
|
+
SdCallout,
|
|
17618
17865
|
SdCard,
|
|
17619
17866
|
SdCheckbox,
|
|
17620
17867
|
SdChip,
|