@sellmate/design-system 0.0.12 → 0.0.15
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/{esm/resolveColor-BYf-ybt2.js → cjs/color-Oz29vj7L.js} +6 -14
- package/dist/cjs/color-Oz29vj7L.js.map +1 -0
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/resolveColor-CauSLF0s.js +18 -0
- package/dist/{esm/resolveColor-BYf-ybt2.js.map → cjs/resolveColor-CauSLF0s.js.map} +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +3 -2
- package/dist/cjs/sd-badge.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-button.sd-tooltip-portal.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-button_2.cjs.entry.js +223 -0
- package/dist/cjs/sd-card.cjs.entry.js +20 -0
- package/dist/cjs/sd-card.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-checkbox_9.cjs.entry.js +1677 -0
- package/dist/cjs/{sd-date-box_2.cjs.entry.js → sd-date-box.cjs.entry.js} +3 -121
- package/dist/cjs/sd-date-box.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +2 -2
- package/dist/cjs/sd-guide.cjs.entry.js +121 -0
- package/dist/cjs/sd-guide.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-pagination_2.cjs.entry.js +4 -4
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-table.cjs.entry.js +4 -4
- package/dist/cjs/sd-table.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-tag.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +5 -1
- package/dist/collection/components/assets/index.js +2 -0
- package/dist/collection/components/assets/index.js.map +1 -1
- package/dist/collection/components/assets/minus/Minus12.js +3 -0
- package/dist/collection/components/assets/minus/Minus12.js.map +1 -0
- package/dist/collection/components/assets/minus/index.js +5 -0
- package/dist/collection/components/assets/minus/index.js.map +1 -0
- package/dist/collection/components/event-management.js +20 -0
- package/dist/collection/components/event-management.js.map +1 -0
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-button/sd-button.css +1 -1
- package/dist/collection/components/sd-button/sd-button.js +14 -39
- package/dist/collection/components/sd-button/sd-button.js.map +1 -1
- package/dist/collection/components/sd-card/sd-card.css +1372 -0
- package/dist/collection/components/sd-card/sd-card.js +64 -0
- package/dist/collection/components/sd-card/sd-card.js.map +1 -0
- package/dist/collection/components/sd-checkbox/sd-checkbox.css +1372 -7
- package/dist/collection/components/sd-checkbox/sd-checkbox.js +35 -40
- package/dist/collection/components/sd-checkbox/sd-checkbox.js.map +1 -1
- package/dist/collection/components/sd-date-box/sd-date-box.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.js +2 -2
- package/dist/collection/components/sd-guide/sd-guide.css +8 -0
- package/dist/collection/components/sd-guide/sd-guide.js +66 -54
- package/dist/collection/components/sd-guide/sd-guide.js.map +1 -1
- package/dist/collection/components/sd-icon/sd-icon.js +2 -2
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +3 -3
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css +7 -0
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +12 -9
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js.map +1 -1
- package/dist/collection/components/sd-select/sd-select.css +2 -0
- package/dist/collection/components/sd-select/sd-select.js +7 -136
- package/dist/collection/components/sd-select/sd-select.js.map +1 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +1504 -0
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +585 -0
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js.map +1 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +1499 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +754 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js.map +1 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css +1412 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +269 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js.map +1 -0
- package/dist/collection/components/sd-table/sd-table.js +8 -10
- package/dist/collection/components/sd-table/sd-table.js.map +1 -1
- package/dist/collection/components/sd-tag/sd-tag.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +3 -3
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/p-1jmdnu3I.js +118 -0
- package/dist/components/p-1jmdnu3I.js.map +1 -0
- package/dist/components/{p-BO6LLSyN.js → p-7xizrxZ5.js} +9 -9
- package/dist/components/p-7xizrxZ5.js.map +1 -0
- package/dist/components/{p-CiTGsdkP.js → p-B1kMis4e.js} +7 -7
- package/dist/components/{p-CiTGsdkP.js.map → p-B1kMis4e.js.map} +1 -1
- package/dist/components/{p-CI-1-u3u.js → p-BOsnXzkr.js} +15 -3
- package/dist/components/p-BOsnXzkr.js.map +1 -0
- package/dist/components/{p-BVMP8_7g.js → p-BTSN9ENi.js} +5 -5
- package/dist/components/{p-BVMP8_7g.js.map → p-BTSN9ENi.js.map} +1 -1
- package/dist/components/{p-CwnpMbLt.js → p-B_s4RQWY.js} +18 -15
- package/dist/components/p-B_s4RQWY.js.map +1 -0
- package/dist/components/{p-BQR8GTeD.js → p-D_m-rDEx.js} +4 -4
- package/dist/components/{p-BQR8GTeD.js.map → p-D_m-rDEx.js.map} +1 -1
- package/dist/components/p-UtZuVoJ9.js +110 -0
- package/dist/components/p-UtZuVoJ9.js.map +1 -0
- package/dist/components/{p-D7VWdAch.js → p-az-fZTqo.js} +3 -3
- package/dist/components/{p-D7VWdAch.js.map → p-az-fZTqo.js.map} +1 -1
- package/dist/components/p-sQ8mybM7.js +115 -0
- package/dist/components/p-sQ8mybM7.js.map +1 -0
- package/dist/components/{p-BbUf81Wx.js → p-x0iTdFk8.js} +5 -5
- package/dist/components/{p-BbUf81Wx.js.map → p-x0iTdFk8.js.map} +1 -1
- package/dist/components/{p-exVR_ekC.js → p-yJmTynI0.js} +3 -3
- package/dist/components/{p-exVR_ekC.js.map → p-yJmTynI0.js.map} +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.d.ts +11 -0
- package/dist/components/sd-card.js +42 -0
- package/dist/components/sd-card.js.map +1 -0
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-box.js +1 -1
- package/dist/components/sd-date-picker.js +6 -6
- package/dist/components/sd-date-range-picker.js +6 -6
- package/dist/components/sd-guide.js +69 -57
- package/dist/components/sd-guide.js.map +1 -1
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +5 -5
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-select-multiple-group.d.ts +11 -0
- package/dist/components/sd-select-multiple-group.js +389 -0
- package/dist/components/sd-select-multiple-group.js.map +1 -0
- package/dist/components/sd-select-multiple.d.ts +11 -0
- package/dist/components/sd-select-multiple.js +335 -0
- package/dist/components/sd-select-multiple.js.map +1 -0
- package/dist/components/sd-select-option-group.d.ts +11 -0
- package/dist/components/sd-select-option-group.js +9 -0
- package/dist/components/sd-select-option-group.js.map +1 -0
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select.js +15 -137
- package/dist/components/sd-select.js.map +1 -1
- package/dist/components/sd-table.js +10 -10
- package/dist/components/sd-table.js.map +1 -1
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-7dcff5f4.entry.js → p-240de5df.entry.js} +2 -2
- package/dist/design-system/p-2e519819.entry.js +2 -0
- package/dist/design-system/p-2e519819.entry.js.map +1 -0
- package/dist/design-system/{p-5af93f6e.entry.js → p-4eaf6262.entry.js} +2 -2
- package/dist/design-system/p-5f6c69ed.entry.js +2 -0
- package/dist/design-system/p-5f6c69ed.entry.js.map +1 -0
- package/dist/design-system/p-62c12ab7.entry.js +2 -0
- package/dist/design-system/p-62c12ab7.entry.js.map +1 -0
- package/dist/design-system/{p-c89d383a.entry.js → p-71716c18.entry.js} +2 -2
- package/dist/design-system/p-87da8d28.entry.js +2 -0
- package/dist/design-system/p-87da8d28.entry.js.map +1 -0
- package/dist/design-system/p-BoLmB6pG.js +2 -0
- package/dist/design-system/{p-BYf-ybt2.js.map → p-BoLmB6pG.js.map} +1 -1
- package/dist/design-system/{p-BYf-ybt2.js → p-CgyTlXBV.js} +2 -2
- package/dist/design-system/p-CgyTlXBV.js.map +1 -0
- package/dist/design-system/{p-585f1e0c.entry.js → p-ac9a20b4.entry.js} +2 -2
- package/dist/design-system/p-ac9a20b4.entry.js.map +1 -0
- package/dist/design-system/{p-fe6d6d27.entry.js → p-b037ea76.entry.js} +2 -2
- package/dist/design-system/p-b4e3145a.entry.js +2 -0
- package/dist/design-system/p-b4e3145a.entry.js.map +1 -0
- package/dist/design-system/{p-4cd267c5.entry.js → p-bd9e799c.entry.js} +2 -2
- package/dist/design-system/p-d185bd2e.entry.js +2 -0
- package/dist/design-system/p-d185bd2e.entry.js.map +1 -0
- package/dist/design-system/sd-badge.entry.esm.js.map +1 -1
- package/dist/design-system/sd-button.sd-tooltip-portal.entry.esm.js.map +1 -0
- package/dist/design-system/sd-card.entry.esm.js.map +1 -0
- package/dist/design-system/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.esm.js.map +1 -0
- package/dist/design-system/sd-date-box.entry.esm.js.map +1 -0
- package/dist/design-system/sd-guide.entry.esm.js.map +1 -0
- package/dist/design-system/sd-table.entry.esm.js.map +1 -1
- package/dist/{cjs/resolveColor-DxvExwgo.js → esm/color-CgyTlXBV.js} +4 -17
- package/dist/esm/color-CgyTlXBV.js.map +1 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/resolveColor-CswQ9y2Q.js +16 -0
- package/dist/{cjs/resolveColor-DxvExwgo.js.map → esm/resolveColor-CswQ9y2Q.js.map} +1 -1
- package/dist/esm/sd-badge.entry.js +3 -2
- package/dist/esm/sd-badge.entry.js.map +1 -1
- package/dist/esm/sd-button.sd-tooltip-portal.entry.js.map +1 -0
- package/dist/esm/sd-button_2.entry.js +220 -0
- package/dist/esm/sd-card.entry.js +18 -0
- package/dist/esm/sd-card.entry.js.map +1 -0
- package/dist/esm/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.js.map +1 -0
- package/dist/esm/sd-checkbox_9.entry.js +1667 -0
- package/dist/esm/{sd-date-box_2.entry.js → sd-date-box.entry.js} +5 -122
- package/dist/esm/sd-date-box.entry.js.map +1 -0
- package/dist/esm/sd-date-picker.entry.js +2 -2
- package/dist/esm/sd-date-range-picker.entry.js +2 -2
- package/dist/esm/sd-guide.entry.js +119 -0
- package/dist/esm/sd-guide.entry.js.map +1 -0
- package/dist/esm/sd-pagination_2.entry.js +4 -4
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-table.entry.js +4 -4
- package/dist/esm/sd-table.entry.js.map +1 -1
- package/dist/esm/sd-tag.entry.js +1 -1
- package/dist/types/components/assets/index.d.ts +3 -0
- package/dist/types/components/assets/minus/Minus12.d.ts +1 -0
- package/dist/types/components/assets/minus/index.d.ts +3 -0
- package/dist/types/components/event-management.d.ts +6 -0
- package/dist/types/components/sd-button/sd-button.d.ts +1 -2
- package/dist/types/components/sd-card/sd-card.d.ts +5 -0
- package/dist/types/components/sd-checkbox/sd-checkbox.d.ts +6 -5
- package/dist/types/components/sd-guide/sd-guide.d.ts +2 -11
- package/dist/types/components/sd-select/sd-select.d.ts +0 -6
- package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts +54 -0
- package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +75 -0
- package/dist/types/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.d.ts +24 -0
- package/dist/types/components.d.ts +379 -54
- package/hydrate/index.js +904 -153
- package/hydrate/index.mjs +904 -153
- package/package.json +2 -2
- package/dist/cjs/sd-button.sd-guide.sd-icon.sd-portal.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-button_4.cjs.entry.js +0 -587
- package/dist/cjs/sd-checkbox.cjs.entry.js +0 -81
- package/dist/cjs/sd-checkbox.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-date-box.sd-input.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-select-option.cjs.entry.js +0 -55
- package/dist/cjs/sd-select-option.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-select.cjs.entry.js +0 -371
- package/dist/cjs/sd-select.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-tooltip-portal.cjs.entry.js +0 -158
- package/dist/cjs/sd-tooltip-portal.entry.cjs.js.map +0 -1
- package/dist/components/p-BO6LLSyN.js.map +0 -1
- package/dist/components/p-CI-1-u3u.js.map +0 -1
- package/dist/components/p-CwnpMbLt.js.map +0 -1
- package/dist/components/p-hwVfUtSx.js +0 -112
- package/dist/components/p-hwVfUtSx.js.map +0 -1
- package/dist/design-system/p-3824f9a6.entry.js +0 -2
- package/dist/design-system/p-3824f9a6.entry.js.map +0 -1
- package/dist/design-system/p-585f1e0c.entry.js.map +0 -1
- package/dist/design-system/p-71ac64b0.entry.js +0 -2
- package/dist/design-system/p-71ac64b0.entry.js.map +0 -1
- package/dist/design-system/p-9f6aa159.entry.js +0 -2
- package/dist/design-system/p-9f6aa159.entry.js.map +0 -1
- package/dist/design-system/p-bfd17f46.entry.js +0 -2
- package/dist/design-system/p-bfd17f46.entry.js.map +0 -1
- package/dist/design-system/p-c7b6d94d.entry.js +0 -2
- package/dist/design-system/p-c7b6d94d.entry.js.map +0 -1
- package/dist/design-system/p-ca8e64cf.entry.js +0 -2
- package/dist/design-system/p-ca8e64cf.entry.js.map +0 -1
- package/dist/design-system/p-d4395043.entry.js +0 -2
- package/dist/design-system/p-d4395043.entry.js.map +0 -1
- package/dist/design-system/sd-button.sd-guide.sd-icon.sd-portal.entry.esm.js.map +0 -1
- package/dist/design-system/sd-checkbox.entry.esm.js.map +0 -1
- package/dist/design-system/sd-date-box.sd-input.entry.esm.js.map +0 -1
- package/dist/design-system/sd-select-option.entry.esm.js.map +0 -1
- package/dist/design-system/sd-select.entry.esm.js.map +0 -1
- package/dist/design-system/sd-tooltip-portal.entry.esm.js.map +0 -1
- package/dist/esm/sd-button.sd-guide.sd-icon.sd-portal.entry.js.map +0 -1
- package/dist/esm/sd-button_4.entry.js +0 -582
- package/dist/esm/sd-checkbox.entry.js +0 -79
- package/dist/esm/sd-checkbox.entry.js.map +0 -1
- package/dist/esm/sd-date-box.sd-input.entry.js.map +0 -1
- package/dist/esm/sd-select-option.entry.js +0 -53
- package/dist/esm/sd-select-option.entry.js.map +0 -1
- package/dist/esm/sd-select.entry.js +0 -369
- package/dist/esm/sd-select.entry.js.map +0 -1
- package/dist/esm/sd-tooltip-portal.entry.js +0 -156
- package/dist/esm/sd-tooltip-portal.entry.js.map +0 -1
- /package/dist/design-system/{p-7dcff5f4.entry.js.map → p-240de5df.entry.js.map} +0 -0
- /package/dist/design-system/{p-5af93f6e.entry.js.map → p-4eaf6262.entry.js.map} +0 -0
- /package/dist/design-system/{p-c89d383a.entry.js.map → p-71716c18.entry.js.map} +0 -0
- /package/dist/design-system/{p-fe6d6d27.entry.js.map → p-b037ea76.entry.js.map} +0 -0
- /package/dist/design-system/{p-4cd267c5.entry.js.map → p-bd9e799c.entry.js.map} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-DON0UcbL.js';
|
|
2
2
|
|
|
3
3
|
const sdDateBoxCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\")}.sc-sd-date-box:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html.sc-sd-date-box{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary.sc-sd-date-box{background-color:var(--color-primary, #051d36)}.bg-secondary.sc-sd-date-box{background-color:var(--color-secondary, #555555)}.bg-accent.sc-sd-date-box{background-color:var(--color-accent, #9c27b0)}.bg-positive.sc-sd-date-box{background-color:var(--color-positive, #0075ff)}.bg-negative.sc-sd-date-box{background-color:var(--color-negative, #e30000)}.bg-info.sc-sd-date-box{background-color:var(--color-info, #00cd52)}.bg-warning.sc-sd-date-box{background-color:var(--color-warning, #f2c037)}.bg-red_99.sc-sd-date-box{background-color:var(--color-red_99, #220000)}.bg-red_95.sc-sd-date-box{background-color:var(--color-red_95, #440000)}.bg-red_90.sc-sd-date-box{background-color:var(--color-red_90, #5E0000)}.bg-red_85.sc-sd-date-box{background-color:var(--color-red_85, #820000)}.bg-red_80.sc-sd-date-box{background-color:var(--color-red_80, #AD0000)}.bg-red_75.sc-sd-date-box{background-color:var(--color-red_75, #E30000)}.bg-red_70.sc-sd-date-box{background-color:var(--color-red_70, #FB4444)}.bg-red_60.sc-sd-date-box{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45.sc-sd-date-box{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30.sc-sd-date-box{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20.sc-sd-date-box{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15.sc-sd-date-box{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg.sc-sd-date-box{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon.sc-sd-date-box{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99.sc-sd-date-box{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95.sc-sd-date-box{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90.sc-sd-date-box{background-color:var(--color-orange_90, #752A00)}.bg-orange_85.sc-sd-date-box{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75.sc-sd-date-box{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65.sc-sd-date-box{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60.sc-sd-date-box{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55.sc-sd-date-box{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45.sc-sd-date-box{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35.sc-sd-date-box{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20.sc-sd-date-box{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10.sc-sd-date-box{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert.sc-sd-date-box{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95.sc-sd-date-box{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90.sc-sd-date-box{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80.sc-sd-date-box{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70.sc-sd-date-box{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60.sc-sd-date-box{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50.sc-sd-date-box{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45.sc-sd-date-box{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40.sc-sd-date-box{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30.sc-sd-date-box{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25.sc-sd-date-box{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20.sc-sd-date-box{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10.sc-sd-date-box{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95.sc-sd-date-box{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90.sc-sd-date-box{background-color:var(--color-olive_90, #454500)}.bg-olive_80.sc-sd-date-box{background-color:var(--color-olive_80, #636300)}.bg-olive_70.sc-sd-date-box{background-color:var(--color-olive_70, #838300)}.bg-olive_65.sc-sd-date-box{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55.sc-sd-date-box{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45.sc-sd-date-box{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30.sc-sd-date-box{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20.sc-sd-date-box{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15.sc-sd-date-box{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10.sc-sd-date-box{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05.sc-sd-date-box{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99.sc-sd-date-box{background-color:var(--color-green_99, #001D0B)}.bg-green_95.sc-sd-date-box{background-color:var(--color-green_95, #003013)}.bg-green_90.sc-sd-date-box{background-color:var(--color-green_90, #00461C)}.bg-green_85.sc-sd-date-box{background-color:var(--color-green_85, #006629)}.bg-green_80.sc-sd-date-box{background-color:var(--color-green_80, #007B31)}.bg-green_75.sc-sd-date-box{background-color:var(--color-green_75, #00973C)}.bg-green_70.sc-sd-date-box{background-color:var(--color-green_70, #12B553)}.bg-green_65.sc-sd-date-box{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55.sc-sd-date-box{background-color:var(--color-green_55, #6DE39C)}.bg-green_45.sc-sd-date-box{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25.sc-sd-date-box{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15.sc-sd-date-box{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99.sc-sd-date-box{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95.sc-sd-date-box{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90.sc-sd-date-box{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85.sc-sd-date-box{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80.sc-sd-date-box{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75.sc-sd-date-box{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70.sc-sd-date-box{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65.sc-sd-date-box{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60.sc-sd-date-box{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45.sc-sd-date-box{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25.sc-sd-date-box{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10.sc-sd-date-box{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99.sc-sd-date-box{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95.sc-sd-date-box{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90.sc-sd-date-box{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85.sc-sd-date-box{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80.sc-sd-date-box{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75.sc-sd-date-box{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70.sc-sd-date-box{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65.sc-sd-date-box{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60.sc-sd-date-box{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50.sc-sd-date-box{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25.sc-sd-date-box{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15.sc-sd-date-box{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99.sc-sd-date-box{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95.sc-sd-date-box{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90.sc-sd-date-box{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85.sc-sd-date-box{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80.sc-sd-date-box{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75.sc-sd-date-box{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70.sc-sd-date-box{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60.sc-sd-date-box{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50.sc-sd-date-box{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40.sc-sd-date-box{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25.sc-sd-date-box{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20.sc-sd-date-box{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10.sc-sd-date-box{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05.sc-sd-date-box{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95.sc-sd-date-box{background-color:var(--color-grey_95, #222222)}.bg-grey_90.sc-sd-date-box{background-color:var(--color-grey_90, #333333)}.bg-grey_85.sc-sd-date-box{background-color:var(--color-grey_85, #444444)}.bg-grey_80.sc-sd-date-box{background-color:var(--color-grey_80, #555555)}.bg-grey_70.sc-sd-date-box{background-color:var(--color-grey_70, #737373)}.bg-grey_65.sc-sd-date-box{background-color:var(--color-grey_65, #888888)}.bg-grey_60.sc-sd-date-box{background-color:var(--color-grey_60, #999999)}.bg-grey_55.sc-sd-date-box{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50.sc-sd-date-box{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45.sc-sd-date-box{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35.sc-sd-date-box{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30.sc-sd-date-box{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25.sc-sd-date-box{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20.sc-sd-date-box{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10.sc-sd-date-box{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05.sc-sd-date-box{background-color:var(--color-grey_05, #f9f9f9)}.bg-white.sc-sd-date-box{background-color:var(--color-white, #ffffff)}.bg-black.sc-sd-date-box{background-color:var(--color-black, #000000)}.text-primary.sc-sd-date-box{color:var(--color-primary, #051d36)}.text-secondary.sc-sd-date-box{color:var(--color-secondary, #555555)}.text-accent.sc-sd-date-box{color:var(--color-accent, #9c27b0)}.text-positive.sc-sd-date-box{color:var(--color-positive, #0075ff)}.text-negative.sc-sd-date-box{color:var(--color-negative, #e30000)}.text-info.sc-sd-date-box{color:var(--color-info, #00cd52)}.text-warning.sc-sd-date-box{color:var(--color-warning, #f2c037)}.text-red_99.sc-sd-date-box{color:var(--color-red_99, #220000)}.text-red_95.sc-sd-date-box{color:var(--color-red_95, #440000)}.text-red_90.sc-sd-date-box{color:var(--color-red_90, #5E0000)}.text-red_85.sc-sd-date-box{color:var(--color-red_85, #820000)}.text-red_80.sc-sd-date-box{color:var(--color-red_80, #AD0000)}.text-red_75.sc-sd-date-box{color:var(--color-red_75, #E30000)}.text-red_70.sc-sd-date-box{color:var(--color-red_70, #FB4444)}.text-red_60.sc-sd-date-box{color:var(--color-red_60, #FF7C7C)}.text-red_45.sc-sd-date-box{color:var(--color-red_45, #FFB5B5)}.text-red_30.sc-sd-date-box{color:var(--color-red_30, #FFD3D3)}.text-red_20.sc-sd-date-box{color:var(--color-red_20, #FCE6E6)}.text-red_15.sc-sd-date-box{color:var(--color-red_15, #FCEFEF)}.text-caution_bg.sc-sd-date-box{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon.sc-sd-date-box{color:var(--color-caution_icon, #fd9595)}.text-orange_99.sc-sd-date-box{color:var(--color-orange_99, #2F1100)}.text-orange_95.sc-sd-date-box{color:var(--color-orange_95, #4D1B00)}.text-orange_90.sc-sd-date-box{color:var(--color-orange_90, #752A00)}.text-orange_85.sc-sd-date-box{color:var(--color-orange_85, #9B3700)}.text-orange_75.sc-sd-date-box{color:var(--color-orange_75, #CE4900)}.text-orange_65.sc-sd-date-box{color:var(--color-orange_65, #FF6B00)}.text-orange_60.sc-sd-date-box{color:var(--color-orange_60, #FF7F22)}.text-orange_55.sc-sd-date-box{color:var(--color-orange_55, #FFA452)}.text-orange_45.sc-sd-date-box{color:var(--color-orange_45, #FFBC81)}.text-orange_35.sc-sd-date-box{color:var(--color-orange_35, #FFD5AF)}.text-orange_20.sc-sd-date-box{color:var(--color-orange_20, #FFEAD7)}.text-orange_10.sc-sd-date-box{color:var(--color-orange_10, #FEF1EA)}.text-header_alert.sc-sd-date-box{color:var(--color-header_alert, #FF7A00)}.text-yellow_95.sc-sd-date-box{color:var(--color-yellow_95, #322700)}.text-yellow_90.sc-sd-date-box{color:var(--color-yellow_90, #453702)}.text-yellow_80.sc-sd-date-box{color:var(--color-yellow_80, #6C5602)}.text-yellow_70.sc-sd-date-box{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60.sc-sd-date-box{color:var(--color-yellow_60, #C49900)}.text-yellow_50.sc-sd-date-box{color:var(--color-yellow_50, #EBB800)}.text-yellow_45.sc-sd-date-box{color:var(--color-yellow_45, #FFC700)}.text-yellow_40.sc-sd-date-box{color:var(--color-yellow_40, #FFD643)}.text-yellow_30.sc-sd-date-box{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25.sc-sd-date-box{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20.sc-sd-date-box{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10.sc-sd-date-box{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95.sc-sd-date-box{color:var(--color-olive_95, #2C2C00)}.text-olive_90.sc-sd-date-box{color:var(--color-olive_90, #454500)}.text-olive_80.sc-sd-date-box{color:var(--color-olive_80, #636300)}.text-olive_70.sc-sd-date-box{color:var(--color-olive_70, #838300)}.text-olive_65.sc-sd-date-box{color:var(--color-olive_65, #A5A500)}.text-olive_55.sc-sd-date-box{color:var(--color-olive_55, #C7C700)}.text-olive_45.sc-sd-date-box{color:var(--color-olive_45, #DDDD12)}.text-olive_30.sc-sd-date-box{color:var(--color-olive_30, #EEEE37)}.text-olive_20.sc-sd-date-box{color:var(--color-olive_20, #F6F65F)}.text-olive_15.sc-sd-date-box{color:var(--color-olive_15, #FAFAA1)}.text-olive_10.sc-sd-date-box{color:var(--color-olive_10, #FBFBBF)}.text-olive_05.sc-sd-date-box{color:var(--color-olive_05, #FEFED9)}.text-green_99.sc-sd-date-box{color:var(--color-green_99, #001D0B)}.text-green_95.sc-sd-date-box{color:var(--color-green_95, #003013)}.text-green_90.sc-sd-date-box{color:var(--color-green_90, #00461C)}.text-green_85.sc-sd-date-box{color:var(--color-green_85, #006629)}.text-green_80.sc-sd-date-box{color:var(--color-green_80, #007B31)}.text-green_75.sc-sd-date-box{color:var(--color-green_75, #00973C)}.text-green_70.sc-sd-date-box{color:var(--color-green_70, #12B553)}.text-green_65.sc-sd-date-box{color:var(--color-green_65, #2BCE6C)}.text-green_55.sc-sd-date-box{color:var(--color-green_55, #6DE39C)}.text-green_45.sc-sd-date-box{color:var(--color-green_45, #ACF4C9)}.text-green_25.sc-sd-date-box{color:var(--color-green_25, #D4FAE3)}.text-green_15.sc-sd-date-box{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99.sc-sd-date-box{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95.sc-sd-date-box{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90.sc-sd-date-box{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85.sc-sd-date-box{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80.sc-sd-date-box{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75.sc-sd-date-box{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70.sc-sd-date-box{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65.sc-sd-date-box{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60.sc-sd-date-box{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45.sc-sd-date-box{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25.sc-sd-date-box{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10.sc-sd-date-box{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99.sc-sd-date-box{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95.sc-sd-date-box{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90.sc-sd-date-box{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85.sc-sd-date-box{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80.sc-sd-date-box{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75.sc-sd-date-box{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70.sc-sd-date-box{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65.sc-sd-date-box{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60.sc-sd-date-box{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50.sc-sd-date-box{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25.sc-sd-date-box{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15.sc-sd-date-box{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99.sc-sd-date-box{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95.sc-sd-date-box{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90.sc-sd-date-box{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85.sc-sd-date-box{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80.sc-sd-date-box{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75.sc-sd-date-box{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70.sc-sd-date-box{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60.sc-sd-date-box{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50.sc-sd-date-box{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40.sc-sd-date-box{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25.sc-sd-date-box{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20.sc-sd-date-box{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10.sc-sd-date-box{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05.sc-sd-date-box{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95.sc-sd-date-box{color:var(--color-grey_95, #222222)}.text-grey_90.sc-sd-date-box{color:var(--color-grey_90, #333333)}.text-grey_85.sc-sd-date-box{color:var(--color-grey_85, #444444)}.text-grey_80.sc-sd-date-box{color:var(--color-grey_80, #555555)}.text-grey_70.sc-sd-date-box{color:var(--color-grey_70, #737373)}.text-grey_65.sc-sd-date-box{color:var(--color-grey_65, #888888)}.text-grey_60.sc-sd-date-box{color:var(--color-grey_60, #999999)}.text-grey_55.sc-sd-date-box{color:var(--color-grey_55, #aaaaaa)}.text-grey_50.sc-sd-date-box{color:var(--color-grey_50, #bbbbbb)}.text-grey_45.sc-sd-date-box{color:var(--color-grey_45, #cccccc)}.text-grey_35.sc-sd-date-box{color:var(--color-grey_35, #D8D8D8)}.text-grey_30.sc-sd-date-box{color:var(--color-grey_30, #e1e1e1)}.text-grey_25.sc-sd-date-box{color:var(--color-grey_25, #E5E5E5)}.text-grey_20.sc-sd-date-box{color:var(--color-grey_20, #eeeeee)}.text-grey_10.sc-sd-date-box{color:var(--color-grey_10, #f6f6f6)}.text-grey_05.sc-sd-date-box{color:var(--color-grey_05, #f9f9f9)}.text-white.sc-sd-date-box{color:var(--color-white, #ffffff)}.text-black.sc-sd-date-box{color:var(--color-black, #000000)}*.sc-sd-date-box,*.sc-sd-date-box::before,*.sc-sd-date-box::after{box-sizing:border-box}html.sc-sd-date-box{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body.sc-sd-date-box,h1.sc-sd-date-box,h2.sc-sd-date-box,h3.sc-sd-date-box,h4.sc-sd-date-box,p.sc-sd-date-box,figure.sc-sd-date-box,blockquote.sc-sd-date-box,dl.sc-sd-date-box,dd.sc-sd-date-box{margin-block-end:0}ul[role=list].sc-sd-date-box,ol[role=list].sc-sd-date-box{list-style:none}body.sc-sd-date-box{min-height:100vh;line-height:1.5}h1.sc-sd-date-box,h2.sc-sd-date-box,h3.sc-sd-date-box,h4.sc-sd-date-box,button.sc-sd-date-box,input.sc-sd-date-box,label.sc-sd-date-box{line-height:1}h1.sc-sd-date-box,h2.sc-sd-date-box,h3.sc-sd-date-box,h4.sc-sd-date-box{text-wrap:balance}a.sc-sd-date-box:not([class]){text-decoration-skip-ink:auto;color:currentColor}img.sc-sd-date-box,picture.sc-sd-date-box{max-width:100%;display:block}input.sc-sd-date-box,button.sc-sd-date-box,textarea.sc-sd-date-box,select.sc-sd-date-box{font-size:inherit}.sc-sd-date-box:target{scroll-margin-block:5ex}button.sc-sd-date-box{background:none;border:none;cursor:pointer;padding:0;outline:0}button.sc-sd-date-box:focus{outline:0 !important}.sc-sd-date-box-h{display:inline-block;height:fit-content;line-height:0}.text-center.sc-sd-date-box{text-align:center}.text-right.sc-sd-date-box{text-align:right}.text-left.sc-sd-date-box{text-align:left}input[type=text].sc-sd-date-box,input[type=number].sc-sd-date-box,input[type=password].sc-sd-date-box,input[type=email].sc-sd-date-box,input[type=tel].sc-sd-date-box,textarea.sc-sd-date-box{padding-block:0px;padding-inline:0px}.sd-hoverable.sc-sd-date-box:hover>.sd-focus-helper.sc-sd-date-box{background:currentColor;opacity:0.15}.sd-hoverable.sc-sd-date-box:hover>.sd-focus-helper.sc-sd-date-box:before{opacity:0.1}.sd-hoverable.sc-sd-date-box:hover>.sd-focus-helper.sc-sd-date-box:after{opacity:0.4}.sd-focus-helper.sc-sd-date-box{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper.sc-sd-date-box:before,.sd-focus-helper.sc-sd-date-box:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper.sc-sd-date-box:before{background:#000000}.sd-focus-helper.sc-sd-date-box:after{background:#ffffff}.sd-tooltip-menu.sc-sd-date-box{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close.sc-sd-date-box{padding-right:12px !important}.sd-tooltip-menu__arrow.sc-sd-date-box{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow.sc-sd-date-box svg.sc-sd-date-box{width:100%;height:100%}.sd-tooltip-menu__arrow--top.sc-sd-date-box{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom.sc-sd-date-box{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left.sc-sd-date-box{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right.sc-sd-date-box{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content.sc-sd-date-box{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button.sc-sd-date-box{padding-top:4px;display:flex}.sd-tooltip-menu__close-button.sc-sd-date-box button.sc-sd-date-box{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu.sc-sd-date-box{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow.sc-sd-date-box{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow.sc-sd-date-box svg.sc-sd-date-box{width:100%;height:100%}.sd-popover-menu__arrow--top.sc-sd-date-box{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom.sc-sd-date-box{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left.sc-sd-date-box{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right.sc-sd-date-box{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content.sc-sd-date-box{font-size:12px;line-height:20px}.sd-popover-menu__content.sc-sd-date-box .sd-popover-menu__title.sc-sd-date-box{font-weight:700;margin-bottom:4px}.sd-popover-menu__content.sc-sd-date-box .sd-popover-menu__messages.sc-sd-date-box{font-weight:500}.sd-popover-menu__content.sc-sd-date-box .sd-popover-menu__buttons.sc-sd-date-box{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content.sc-sd-date-box .sd-popover-menu__buttons--1.sc-sd-date-box{justify-content:flex-end}.sd-popover-menu__content.sc-sd-date-box .sd-popover-menu__buttons--2.sc-sd-date-box{justify-content:space-between}.sd-popover-menu__close-button.sc-sd-date-box{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-date-box.sc-sd-date-box-h{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box-h{color:#cccccc;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box-h:not(.sd-date-box--disabled){cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box-h:hover .sd-date-box__content.sc-sd-date-box{background:#d9eaff}.sd-date-box.sd-date-box--in-range.sc-sd-date-box-h:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:\"\";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#d9eaff}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box::after{content:\"\";position:absolute;inset:0;background:#0075ff;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box-h .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--today.sc-sd-date-box-h:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:\"\";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #e1e1e1 !important;border-radius:14px}";
|
|
4
4
|
|
|
@@ -31,7 +31,7 @@ const SdDateBox = class {
|
|
|
31
31
|
this.sdMouseOver?.emit(this.date);
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: 'ace5d023959d41d2a2255e70ad9d5bad9df4f9fe', role: "button", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
35
35
|
'sd-date-box': true,
|
|
36
36
|
'sd-hoverable': !this.disabled || !this.selected || this.type === '',
|
|
37
37
|
'sd-date-box--disabled': this.disabled,
|
|
@@ -42,127 +42,10 @@ const SdDateBox = class {
|
|
|
42
42
|
'sd-date-box--in-range': this.inRange,
|
|
43
43
|
'sd-date-box--type-start': this.type === 'start',
|
|
44
44
|
'sd-date-box--type-end': this.type === 'end',
|
|
45
|
-
}, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: '
|
|
45
|
+
}, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: '2fdeea79f2eeb28da3b9999f7326996531cb6c88', class: "sd-date-box__content" }, h("div", { key: '0f7839e75905b04f99a23603326099953f5e2990', class: "sd-date-box__label" }, this.date))));
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
SdDateBox.style = sdDateBoxCss;
|
|
49
49
|
|
|
50
|
-
const sdInputCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-input{display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white}.sd-input--hovered,.sd-input--focused{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-input.sd-input--error{border-color:#fb4444}.sd-input.sd-input--pass{border-color:#2bce6c}.sd-input.sd-input--barcode:not(.sd-input--disabled){background-color:#fafaa1}.sd-input.sd-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-input.sd-input--disabled .sd-input__native_element{color:#888888 !important}.sd-input .sd-input__native_element{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0}.sd-input .sd-input__native_element::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}";
|
|
51
|
-
|
|
52
|
-
const SdInput = class {
|
|
53
|
-
constructor(hostRef) {
|
|
54
|
-
registerInstance(this, hostRef);
|
|
55
|
-
this.sdClick = createEvent(this, "sdClick");
|
|
56
|
-
this.sdInput = createEvent(this, "sdInput");
|
|
57
|
-
this.sdChange = createEvent(this, "sdChange");
|
|
58
|
-
this.sdFocus = createEvent(this, "sdFocus");
|
|
59
|
-
this.sdBlur = createEvent(this, "sdBlur");
|
|
60
|
-
}
|
|
61
|
-
get el() { return getElement(this); }
|
|
62
|
-
value = null;
|
|
63
|
-
label;
|
|
64
|
-
placeholder = '입력해 주세요.';
|
|
65
|
-
disabled = false;
|
|
66
|
-
clearable = false;
|
|
67
|
-
width;
|
|
68
|
-
barcode = false;
|
|
69
|
-
rules;
|
|
70
|
-
autoFocus = false;
|
|
71
|
-
status;
|
|
72
|
-
inputClass = '';
|
|
73
|
-
readonly = false;
|
|
74
|
-
// props - custom styles
|
|
75
|
-
inputStyle = {};
|
|
76
|
-
internalValue = null;
|
|
77
|
-
error = false;
|
|
78
|
-
focused = false;
|
|
79
|
-
hovered = false;
|
|
80
|
-
nativeEl = undefined;
|
|
81
|
-
sdClick;
|
|
82
|
-
sdInput;
|
|
83
|
-
sdChange;
|
|
84
|
-
sdFocus;
|
|
85
|
-
sdBlur;
|
|
86
|
-
valueChanged(newValue) {
|
|
87
|
-
this.internalValue = newValue;
|
|
88
|
-
}
|
|
89
|
-
internalValueChanged(newValue) {
|
|
90
|
-
if (newValue !== this.value) {
|
|
91
|
-
this.value = newValue;
|
|
92
|
-
this.sdInput?.emit(this.value);
|
|
93
|
-
}
|
|
94
|
-
if (!this.rules || this.rules.length === 0)
|
|
95
|
-
return;
|
|
96
|
-
this.error = false;
|
|
97
|
-
for (const rule of this.rules) {
|
|
98
|
-
const result = rule(newValue);
|
|
99
|
-
if (result !== true) {
|
|
100
|
-
this.error = true;
|
|
101
|
-
break;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
async getNativeElement() {
|
|
106
|
-
return this.nativeEl || null;
|
|
107
|
-
}
|
|
108
|
-
componentWillLoad() {
|
|
109
|
-
if (this.value) {
|
|
110
|
-
this.internalValue = this.value;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
handleInput = (event) => {
|
|
114
|
-
const target = event.target;
|
|
115
|
-
this.internalValue = target.value;
|
|
116
|
-
this.sdInput?.emit(this.internalValue);
|
|
117
|
-
};
|
|
118
|
-
handleChange = (event) => {
|
|
119
|
-
const target = event.target;
|
|
120
|
-
this.internalValue = target.value;
|
|
121
|
-
this.sdChange?.emit(this.internalValue);
|
|
122
|
-
};
|
|
123
|
-
handleFocus = (type, event) => {
|
|
124
|
-
this.focused = type === 'focus';
|
|
125
|
-
if (type === 'blur')
|
|
126
|
-
this.sdBlur?.emit(event);
|
|
127
|
-
else
|
|
128
|
-
this.sdFocus?.emit(event);
|
|
129
|
-
};
|
|
130
|
-
getInputStatus() {
|
|
131
|
-
// input 상태 우선순위: hovered > focused > status(상태 주입) > error(rules 검사)
|
|
132
|
-
if (this.disabled)
|
|
133
|
-
return 'sd-input--disabled';
|
|
134
|
-
if (this.hovered)
|
|
135
|
-
return 'sd-input--hovered';
|
|
136
|
-
if (this.focused)
|
|
137
|
-
return 'sd-input--focused';
|
|
138
|
-
if (this.status)
|
|
139
|
-
return `sd-input--${this.status}`;
|
|
140
|
-
if (this.error)
|
|
141
|
-
return 'sd-input--error';
|
|
142
|
-
return '';
|
|
143
|
-
}
|
|
144
|
-
render() {
|
|
145
|
-
const inputWidth = this.width
|
|
146
|
-
? {
|
|
147
|
-
'--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
148
|
-
}
|
|
149
|
-
: {};
|
|
150
|
-
return (h(Host, { key: '7dc06031ab0de29582234116e81c97e5049f255f', style: inputWidth }, this.label && h("div", { key: '7e6e83718e8677781a25fd4626d04b9308251e31', class: "sd-input__label" }, this.label), h("label", { key: '2218eaa7cd1f9374dcf371ff73bac367f372ae71', class: {
|
|
151
|
-
'sd-input': true,
|
|
152
|
-
[this.getInputStatus()]: true,
|
|
153
|
-
'sd-input--barcode': !!this.barcode,
|
|
154
|
-
}, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("slot", { key: 'ca4e0dd0cad6044451c4a0c44a52a714f56e79d7', name: "prefix" }), h("input", { key: '8431e475f8271b0b3aa901092a9a0c4801bf89ed', ref: el => (this.nativeEl = el), class: `sd-input__native_element ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onChange: this.handleChange, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) }), h("slot", { key: '514b0cae863501f5446ab6dc6318014f4aaf3f7c', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '5b09019f6186bb2a00601a2827d7e30fbf5e7594', name: "close", color: "#888", style: { marginRight: '-4px', marginLeft: '8px', cursor: 'pointer' }, onClick: () => {
|
|
155
|
-
this.internalValue = '';
|
|
156
|
-
this.sdChange?.emit(this.internalValue);
|
|
157
|
-
this.sdInput?.emit(this.internalValue);
|
|
158
|
-
} })))));
|
|
159
|
-
}
|
|
160
|
-
static get watchers() { return {
|
|
161
|
-
"value": ["valueChanged"],
|
|
162
|
-
"internalValue": ["internalValueChanged"]
|
|
163
|
-
}; }
|
|
164
|
-
};
|
|
165
|
-
SdInput.style = sdInputCss;
|
|
166
|
-
|
|
167
|
-
export { SdDateBox as sd_date_box, SdInput as sd_input };
|
|
168
|
-
//# sourceMappingURL=sd-date-box.sd-input.entry.js.map
|
|
50
|
+
export { SdDateBox as sd_date_box };
|
|
51
|
+
//# sourceMappingURL=sd-date-box.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sd-date-box.entry.js","sources":["src/components/sd-date-box/sd-date-box.scss?tag=sd-date-box&encapsulation=scoped","src/components/sd-date-box/sd-date-box.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n:host(.sd-date-box) {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 38px;\r\n height: 36px;\r\n font-size: 14px;\r\n position: relative;\r\n box-sizing: border-box;\r\n text-align: center;\r\n transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n border-radius: 14px;\r\n\r\n .sd-date-box__content {\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 14px;\r\n position: relative;\r\n .sd-date-box__label {\r\n position: relative;\r\n z-index: 2;\r\n user-select: none;\r\n line-height: 28px;\r\n }\r\n }\r\n\r\n &.sd-date-box--disabled {\r\n color: $grey_45;\r\n cursor: default !important;\r\n pointer-events: none;\r\n }\r\n\r\n &:not(.sd-date-box--disabled) {\r\n cursor: pointer;\r\n }\r\n\r\n &.sd-hoverable {\r\n &:hover {\r\n .sd-date-box__content {\r\n background: $brilliantblue_25;\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--in-range {\r\n &:not(.sd-date-box--disabled) {\r\n .sd-date-box__content {\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -5px;\r\n width: calc(100% + 10px);\r\n height: 100%;\r\n background: $brilliantblue_25;\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--type-start {\r\n .sd-date-box__content {\r\n &::before {\r\n left: auto !important;\r\n width: 19px !important;\r\n right: -5px;\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--type-end {\r\n .sd-date-box__content {\r\n &::before {\r\n width: 19px !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--selected,\r\n &.sd-date-box--type-start,\r\n &.sd-date-box--type-end {\r\n .sd-date-box__content {\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: $brilliantblue_75;\r\n border-radius: 14px;\r\n z-index: 1;\r\n }\r\n\r\n .sd-date-box__label {\r\n color: white;\r\n font-weight: 700;\r\n }\r\n }\r\n }\r\n\r\n &.sd-date-box--today:not(.sd-date-box--selected) {\r\n .sd-date-box__content {\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 28px;\r\n height: 28px;\r\n border: 1px solid $grey_30 !important;\r\n border-radius: 14px;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\r\n\r\nexport type Type = 'start' | 'end' | '';\r\n\r\n@Component({\r\n tag: 'sd-date-box',\r\n styleUrl: 'sd-date-box.scss',\r\n scoped: true,\r\n})\r\nexport class SdDateBox {\r\n @Prop() date: number | string | null = null;\r\n @Prop() disabled: boolean = false;\r\n @Prop() selected: boolean = false;\r\n @Prop() isStartDate: boolean = false;\r\n @Prop() isEndDate: boolean = false;\r\n @Prop() isToday: boolean = false;\r\n @Prop() inRange: boolean = false;\r\n @Prop() type: Type = '';\r\n\r\n @Event() sdClick?: EventEmitter<number | string | null>;\r\n @Event() sdMouseOver?: EventEmitter<number | string | null>;\r\n\r\n private handleClickDate() {\r\n if (this.disabled) return;\r\n if (typeof this.date === 'string') return;\r\n\r\n this.sdClick?.emit(this.date);\r\n }\r\n\r\n private handleHoverDate() {\r\n if (typeof this.date === 'string') return;\r\n\r\n this.sdMouseOver?.emit(this.date);\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n role=\"button\"\r\n aria-disabled={this.disabled ? 'true' : 'false'}\r\n tabindex={this.disabled ? -1 : 0}\r\n class={{\r\n 'sd-date-box': true,\r\n 'sd-hoverable': !this.disabled || !this.selected || this.type === '',\r\n 'sd-date-box--disabled': this.disabled,\r\n 'sd-date-box--selected': this.selected,\r\n 'sd-date-box--today': this.isToday,\r\n 'sd-date-box--start-date': this.isStartDate,\r\n 'sd-date-box--end-date': this.isEndDate,\r\n 'sd-date-box--in-range': this.inRange,\r\n 'sd-date-box--type-start': this.type === 'start',\r\n 'sd-date-box--type-end': this.type === 'end',\r\n }}\r\n onClick={() => this.handleClickDate()}\r\n onMouseOver={() => this.handleHoverDate()}\r\n >\r\n <div class=\"sd-date-box__content\">\r\n <div class=\"sd-date-box__label\">{this.date}</div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,s+2BAAs+2B;;MCS9+2B,SAAS,GAAA,MAAA;;;;;;IACb,IAAI,GAA2B,IAAI;IACnC,QAAQ,GAAY,KAAK;IACzB,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAC5B,SAAS,GAAY,KAAK;IAC1B,OAAO,GAAY,KAAK;IACxB,OAAO,GAAY,KAAK;IACxB,IAAI,GAAS,EAAE;AAEd,IAAA,OAAO;AACP,IAAA,WAAW;IAEZ,eAAe,GAAA;QACtB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE;QAEnC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGtB,eAAe,GAAA;AACtB,QAAA,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE;QAEnC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,MAAM,GAAA;QACL,QACC,CAAC,CAAA,IAAI,EACJ,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,KAAK,EAAE;AACN,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;gBACpE,uBAAuB,EAAE,IAAI,CAAC,QAAQ;gBACtC,uBAAuB,EAAE,IAAI,CAAC,QAAQ;gBACtC,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,yBAAyB,EAAE,IAAI,CAAC,WAAW;gBAC3C,uBAAuB,EAAE,IAAI,CAAC,SAAS;gBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;AACrC,gBAAA,yBAAyB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAChD,gBAAA,uBAAuB,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAC5C,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACrC,WAAW,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,CAC5C,CACA;;;;;;;"}
|
|
@@ -80,9 +80,9 @@ const SdDatePicker = class {
|
|
|
80
80
|
this.isOpen = false;
|
|
81
81
|
};
|
|
82
82
|
render() {
|
|
83
|
-
return (h(Host, { key: '
|
|
83
|
+
return (h(Host, { key: 'f445a752123f1a1a7f8d28ca7472a8ffabda9441', class: "sd-date-picker" }, h("sd-input", { key: '85662ea61b192562311af23f67c1a1ad05636813', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
84
84
|
margin: '0 0 0 8px',
|
|
85
|
-
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '
|
|
85
|
+
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '41634f9170073fbde5e44c55b5985da90763f819', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ce630583ef81cd72ad1b8fdaab7cab2d1df278cb', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '55d4c73a3e17991ebf68495d7bed96399857de1e', class: "sd-date-picker__menu" }, h("div", { key: '0800e3a37eec27bb8a8c59a2ebd8ffdbf4e813a7', class: "sd-date-picker__header" }, h("div", { key: '1518b578ad87a0f5875d980d1c974492f32714e3', class: "year-nav" }, h("button", { key: 'e70f1d4e73650c7bccb1629b679ca366717e5506', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'f679a54b76e304d08c132d6784575831a5d5d61b', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '634dcbfe81d328cbc0460958208dc17aaf218158', class: "year-nav__current" }, this.currentYear), h("button", { key: '7e7cef51d7b47b7280cfff4234b88394708ea01a', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '8a6fc4a40f567d2d1ffef5dbc08de5148203970c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '8fad6e92b899a0cb38398ec2f4036b959377d99b', class: "month-nav" }, h("button", { key: '3180c35ad42239a6a97480a4db860182b98724f3', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '6ccef0b13fde4124e0e14959687f60dab753ae51', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: 'db7db67a1a77f02451bc0a7c97e87e3cd6c9d453', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '5df06269331e9f7ee1cb4801bfd713d433f00af4', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '65b0f49b205e9aa38a46cbe672665b31c9ffe542', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '68f3c05f2ffb57b7fc032209dd709e5eaa6fcbdd', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '452c22746ace6b3923acf4912edba2509a56b369', class: "sd-date-picker__body" }, [
|
|
86
86
|
...this.calendar.prevMonthDays,
|
|
87
87
|
...this.calendar.days,
|
|
88
88
|
...this.calendar.afterMonthDays,
|
|
@@ -155,9 +155,9 @@ const SdDateRangePicker = class {
|
|
|
155
155
|
this.isOpen = false;
|
|
156
156
|
};
|
|
157
157
|
render() {
|
|
158
|
-
return (h(Host, { key: '
|
|
158
|
+
return (h(Host, { key: '3d95128a2a654e38ceae60e6b89482a454488286', class: "sd-date-range-picker" }, h("sd-input", { key: '4f170abfe6214ffa1044020b2cd59a9219f3ef09', ref: el => (this.inputEl = el), value: `${this.dateRange[0]} ~ ${this.dateRange[1]}`, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", inputStyle: {
|
|
159
159
|
margin: '0 0 0 8px',
|
|
160
|
-
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '
|
|
160
|
+
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '7c12c7e3331638f333efdea4bcd3d452eb032561', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '7312ab4a79877de6d6be3edaa404e0b9c52e28d8', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '20a485d128de2b2d0a8043cb5fe0de990364bbd8', class: "sd-date-range-picker__menu" }, h("div", { key: '19a0489246b5dccc183f3d3a040086a6a2c565f3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '1f9c5f1188234e2306c033e8e67f9a106b3b39bc', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '52805839d2092886fe4f07c9f95a2e948b00c917', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9f323504223ccfbc4b5703346a310e58d1621c3', class: "header-label" }, this.prevYear), h("button", { key: '810c6fb9eaa16291550455ac1099c15da7b80ed6', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '44cf361ed854292f90c954522c356e17d5a45d29', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '4cc859482a2c010261b64b8ce15f5c754a2234fd', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
|
|
161
161
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
162
162
|
: `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date ===
|
|
163
163
|
this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), type: this.getDateBoxType(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), isToday: today ===
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { r as registerInstance, a as getElement, h, H as Host } from './index-DON0UcbL.js';
|
|
2
|
+
import { c as colors } from './color-CgyTlXBV.js';
|
|
3
|
+
|
|
4
|
+
const sdGuideCss = "@charset \"UTF-8\";@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\")}.sc-sd-guide:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html.sc-sd-guide{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary.sc-sd-guide{background-color:var(--color-primary, #051d36)}.bg-secondary.sc-sd-guide{background-color:var(--color-secondary, #555555)}.bg-accent.sc-sd-guide{background-color:var(--color-accent, #9c27b0)}.bg-positive.sc-sd-guide{background-color:var(--color-positive, #0075ff)}.bg-negative.sc-sd-guide{background-color:var(--color-negative, #e30000)}.bg-info.sc-sd-guide{background-color:var(--color-info, #00cd52)}.bg-warning.sc-sd-guide{background-color:var(--color-warning, #f2c037)}.bg-red_99.sc-sd-guide{background-color:var(--color-red_99, #220000)}.bg-red_95.sc-sd-guide{background-color:var(--color-red_95, #440000)}.bg-red_90.sc-sd-guide{background-color:var(--color-red_90, #5E0000)}.bg-red_85.sc-sd-guide{background-color:var(--color-red_85, #820000)}.bg-red_80.sc-sd-guide{background-color:var(--color-red_80, #AD0000)}.bg-red_75.sc-sd-guide{background-color:var(--color-red_75, #E30000)}.bg-red_70.sc-sd-guide{background-color:var(--color-red_70, #FB4444)}.bg-red_60.sc-sd-guide{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45.sc-sd-guide{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30.sc-sd-guide{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20.sc-sd-guide{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15.sc-sd-guide{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg.sc-sd-guide{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon.sc-sd-guide{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99.sc-sd-guide{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95.sc-sd-guide{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90.sc-sd-guide{background-color:var(--color-orange_90, #752A00)}.bg-orange_85.sc-sd-guide{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75.sc-sd-guide{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65.sc-sd-guide{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60.sc-sd-guide{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55.sc-sd-guide{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45.sc-sd-guide{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35.sc-sd-guide{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20.sc-sd-guide{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10.sc-sd-guide{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert.sc-sd-guide{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95.sc-sd-guide{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90.sc-sd-guide{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80.sc-sd-guide{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70.sc-sd-guide{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60.sc-sd-guide{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50.sc-sd-guide{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45.sc-sd-guide{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40.sc-sd-guide{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30.sc-sd-guide{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25.sc-sd-guide{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20.sc-sd-guide{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10.sc-sd-guide{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95.sc-sd-guide{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90.sc-sd-guide{background-color:var(--color-olive_90, #454500)}.bg-olive_80.sc-sd-guide{background-color:var(--color-olive_80, #636300)}.bg-olive_70.sc-sd-guide{background-color:var(--color-olive_70, #838300)}.bg-olive_65.sc-sd-guide{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55.sc-sd-guide{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45.sc-sd-guide{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30.sc-sd-guide{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20.sc-sd-guide{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15.sc-sd-guide{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10.sc-sd-guide{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05.sc-sd-guide{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99.sc-sd-guide{background-color:var(--color-green_99, #001D0B)}.bg-green_95.sc-sd-guide{background-color:var(--color-green_95, #003013)}.bg-green_90.sc-sd-guide{background-color:var(--color-green_90, #00461C)}.bg-green_85.sc-sd-guide{background-color:var(--color-green_85, #006629)}.bg-green_80.sc-sd-guide{background-color:var(--color-green_80, #007B31)}.bg-green_75.sc-sd-guide{background-color:var(--color-green_75, #00973C)}.bg-green_70.sc-sd-guide{background-color:var(--color-green_70, #12B553)}.bg-green_65.sc-sd-guide{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55.sc-sd-guide{background-color:var(--color-green_55, #6DE39C)}.bg-green_45.sc-sd-guide{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25.sc-sd-guide{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15.sc-sd-guide{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99.sc-sd-guide{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95.sc-sd-guide{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90.sc-sd-guide{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85.sc-sd-guide{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80.sc-sd-guide{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75.sc-sd-guide{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70.sc-sd-guide{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65.sc-sd-guide{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60.sc-sd-guide{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45.sc-sd-guide{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25.sc-sd-guide{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10.sc-sd-guide{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99.sc-sd-guide{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95.sc-sd-guide{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90.sc-sd-guide{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85.sc-sd-guide{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80.sc-sd-guide{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75.sc-sd-guide{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70.sc-sd-guide{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65.sc-sd-guide{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60.sc-sd-guide{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50.sc-sd-guide{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25.sc-sd-guide{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15.sc-sd-guide{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99.sc-sd-guide{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95.sc-sd-guide{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90.sc-sd-guide{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85.sc-sd-guide{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80.sc-sd-guide{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75.sc-sd-guide{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70.sc-sd-guide{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60.sc-sd-guide{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50.sc-sd-guide{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40.sc-sd-guide{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25.sc-sd-guide{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20.sc-sd-guide{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10.sc-sd-guide{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05.sc-sd-guide{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95.sc-sd-guide{background-color:var(--color-grey_95, #222222)}.bg-grey_90.sc-sd-guide{background-color:var(--color-grey_90, #333333)}.bg-grey_85.sc-sd-guide{background-color:var(--color-grey_85, #444444)}.bg-grey_80.sc-sd-guide{background-color:var(--color-grey_80, #555555)}.bg-grey_70.sc-sd-guide{background-color:var(--color-grey_70, #737373)}.bg-grey_65.sc-sd-guide{background-color:var(--color-grey_65, #888888)}.bg-grey_60.sc-sd-guide{background-color:var(--color-grey_60, #999999)}.bg-grey_55.sc-sd-guide{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50.sc-sd-guide{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45.sc-sd-guide{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35.sc-sd-guide{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30.sc-sd-guide{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25.sc-sd-guide{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20.sc-sd-guide{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10.sc-sd-guide{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05.sc-sd-guide{background-color:var(--color-grey_05, #f9f9f9)}.bg-white.sc-sd-guide{background-color:var(--color-white, #ffffff)}.bg-black.sc-sd-guide{background-color:var(--color-black, #000000)}.text-primary.sc-sd-guide{color:var(--color-primary, #051d36)}.text-secondary.sc-sd-guide{color:var(--color-secondary, #555555)}.text-accent.sc-sd-guide{color:var(--color-accent, #9c27b0)}.text-positive.sc-sd-guide{color:var(--color-positive, #0075ff)}.text-negative.sc-sd-guide{color:var(--color-negative, #e30000)}.text-info.sc-sd-guide{color:var(--color-info, #00cd52)}.text-warning.sc-sd-guide{color:var(--color-warning, #f2c037)}.text-red_99.sc-sd-guide{color:var(--color-red_99, #220000)}.text-red_95.sc-sd-guide{color:var(--color-red_95, #440000)}.text-red_90.sc-sd-guide{color:var(--color-red_90, #5E0000)}.text-red_85.sc-sd-guide{color:var(--color-red_85, #820000)}.text-red_80.sc-sd-guide{color:var(--color-red_80, #AD0000)}.text-red_75.sc-sd-guide{color:var(--color-red_75, #E30000)}.text-red_70.sc-sd-guide{color:var(--color-red_70, #FB4444)}.text-red_60.sc-sd-guide{color:var(--color-red_60, #FF7C7C)}.text-red_45.sc-sd-guide{color:var(--color-red_45, #FFB5B5)}.text-red_30.sc-sd-guide{color:var(--color-red_30, #FFD3D3)}.text-red_20.sc-sd-guide{color:var(--color-red_20, #FCE6E6)}.text-red_15.sc-sd-guide{color:var(--color-red_15, #FCEFEF)}.text-caution_bg.sc-sd-guide{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon.sc-sd-guide{color:var(--color-caution_icon, #fd9595)}.text-orange_99.sc-sd-guide{color:var(--color-orange_99, #2F1100)}.text-orange_95.sc-sd-guide{color:var(--color-orange_95, #4D1B00)}.text-orange_90.sc-sd-guide{color:var(--color-orange_90, #752A00)}.text-orange_85.sc-sd-guide{color:var(--color-orange_85, #9B3700)}.text-orange_75.sc-sd-guide{color:var(--color-orange_75, #CE4900)}.text-orange_65.sc-sd-guide{color:var(--color-orange_65, #FF6B00)}.text-orange_60.sc-sd-guide{color:var(--color-orange_60, #FF7F22)}.text-orange_55.sc-sd-guide{color:var(--color-orange_55, #FFA452)}.text-orange_45.sc-sd-guide{color:var(--color-orange_45, #FFBC81)}.text-orange_35.sc-sd-guide{color:var(--color-orange_35, #FFD5AF)}.text-orange_20.sc-sd-guide{color:var(--color-orange_20, #FFEAD7)}.text-orange_10.sc-sd-guide{color:var(--color-orange_10, #FEF1EA)}.text-header_alert.sc-sd-guide{color:var(--color-header_alert, #FF7A00)}.text-yellow_95.sc-sd-guide{color:var(--color-yellow_95, #322700)}.text-yellow_90.sc-sd-guide{color:var(--color-yellow_90, #453702)}.text-yellow_80.sc-sd-guide{color:var(--color-yellow_80, #6C5602)}.text-yellow_70.sc-sd-guide{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60.sc-sd-guide{color:var(--color-yellow_60, #C49900)}.text-yellow_50.sc-sd-guide{color:var(--color-yellow_50, #EBB800)}.text-yellow_45.sc-sd-guide{color:var(--color-yellow_45, #FFC700)}.text-yellow_40.sc-sd-guide{color:var(--color-yellow_40, #FFD643)}.text-yellow_30.sc-sd-guide{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25.sc-sd-guide{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20.sc-sd-guide{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10.sc-sd-guide{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95.sc-sd-guide{color:var(--color-olive_95, #2C2C00)}.text-olive_90.sc-sd-guide{color:var(--color-olive_90, #454500)}.text-olive_80.sc-sd-guide{color:var(--color-olive_80, #636300)}.text-olive_70.sc-sd-guide{color:var(--color-olive_70, #838300)}.text-olive_65.sc-sd-guide{color:var(--color-olive_65, #A5A500)}.text-olive_55.sc-sd-guide{color:var(--color-olive_55, #C7C700)}.text-olive_45.sc-sd-guide{color:var(--color-olive_45, #DDDD12)}.text-olive_30.sc-sd-guide{color:var(--color-olive_30, #EEEE37)}.text-olive_20.sc-sd-guide{color:var(--color-olive_20, #F6F65F)}.text-olive_15.sc-sd-guide{color:var(--color-olive_15, #FAFAA1)}.text-olive_10.sc-sd-guide{color:var(--color-olive_10, #FBFBBF)}.text-olive_05.sc-sd-guide{color:var(--color-olive_05, #FEFED9)}.text-green_99.sc-sd-guide{color:var(--color-green_99, #001D0B)}.text-green_95.sc-sd-guide{color:var(--color-green_95, #003013)}.text-green_90.sc-sd-guide{color:var(--color-green_90, #00461C)}.text-green_85.sc-sd-guide{color:var(--color-green_85, #006629)}.text-green_80.sc-sd-guide{color:var(--color-green_80, #007B31)}.text-green_75.sc-sd-guide{color:var(--color-green_75, #00973C)}.text-green_70.sc-sd-guide{color:var(--color-green_70, #12B553)}.text-green_65.sc-sd-guide{color:var(--color-green_65, #2BCE6C)}.text-green_55.sc-sd-guide{color:var(--color-green_55, #6DE39C)}.text-green_45.sc-sd-guide{color:var(--color-green_45, #ACF4C9)}.text-green_25.sc-sd-guide{color:var(--color-green_25, #D4FAE3)}.text-green_15.sc-sd-guide{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99.sc-sd-guide{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95.sc-sd-guide{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90.sc-sd-guide{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85.sc-sd-guide{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80.sc-sd-guide{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75.sc-sd-guide{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70.sc-sd-guide{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65.sc-sd-guide{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60.sc-sd-guide{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45.sc-sd-guide{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25.sc-sd-guide{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10.sc-sd-guide{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99.sc-sd-guide{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95.sc-sd-guide{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90.sc-sd-guide{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85.sc-sd-guide{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80.sc-sd-guide{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75.sc-sd-guide{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70.sc-sd-guide{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65.sc-sd-guide{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60.sc-sd-guide{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50.sc-sd-guide{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25.sc-sd-guide{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15.sc-sd-guide{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99.sc-sd-guide{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95.sc-sd-guide{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90.sc-sd-guide{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85.sc-sd-guide{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80.sc-sd-guide{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75.sc-sd-guide{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70.sc-sd-guide{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60.sc-sd-guide{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50.sc-sd-guide{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40.sc-sd-guide{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25.sc-sd-guide{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20.sc-sd-guide{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10.sc-sd-guide{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05.sc-sd-guide{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95.sc-sd-guide{color:var(--color-grey_95, #222222)}.text-grey_90.sc-sd-guide{color:var(--color-grey_90, #333333)}.text-grey_85.sc-sd-guide{color:var(--color-grey_85, #444444)}.text-grey_80.sc-sd-guide{color:var(--color-grey_80, #555555)}.text-grey_70.sc-sd-guide{color:var(--color-grey_70, #737373)}.text-grey_65.sc-sd-guide{color:var(--color-grey_65, #888888)}.text-grey_60.sc-sd-guide{color:var(--color-grey_60, #999999)}.text-grey_55.sc-sd-guide{color:var(--color-grey_55, #aaaaaa)}.text-grey_50.sc-sd-guide{color:var(--color-grey_50, #bbbbbb)}.text-grey_45.sc-sd-guide{color:var(--color-grey_45, #cccccc)}.text-grey_35.sc-sd-guide{color:var(--color-grey_35, #D8D8D8)}.text-grey_30.sc-sd-guide{color:var(--color-grey_30, #e1e1e1)}.text-grey_25.sc-sd-guide{color:var(--color-grey_25, #E5E5E5)}.text-grey_20.sc-sd-guide{color:var(--color-grey_20, #eeeeee)}.text-grey_10.sc-sd-guide{color:var(--color-grey_10, #f6f6f6)}.text-grey_05.sc-sd-guide{color:var(--color-grey_05, #f9f9f9)}.text-white.sc-sd-guide{color:var(--color-white, #ffffff)}.text-black.sc-sd-guide{color:var(--color-black, #000000)}*.sc-sd-guide,*.sc-sd-guide::before,*.sc-sd-guide::after{box-sizing:border-box}html.sc-sd-guide{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body.sc-sd-guide,h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide,p.sc-sd-guide,figure.sc-sd-guide,blockquote.sc-sd-guide,dl.sc-sd-guide,dd.sc-sd-guide{margin-block-end:0}ul[role=list].sc-sd-guide,ol[role=list].sc-sd-guide{list-style:none}body.sc-sd-guide{min-height:100vh;line-height:1.5}h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide,button.sc-sd-guide,input.sc-sd-guide,label.sc-sd-guide{line-height:1}h1.sc-sd-guide,h2.sc-sd-guide,h3.sc-sd-guide,h4.sc-sd-guide{text-wrap:balance}a.sc-sd-guide:not([class]){text-decoration-skip-ink:auto;color:currentColor}img.sc-sd-guide,picture.sc-sd-guide{max-width:100%;display:block}input.sc-sd-guide,button.sc-sd-guide,textarea.sc-sd-guide,select.sc-sd-guide{font-size:inherit}.sc-sd-guide:target{scroll-margin-block:5ex}button.sc-sd-guide{background:none;border:none;cursor:pointer;padding:0;outline:0}button.sc-sd-guide:focus{outline:0 !important}.sc-sd-guide-h{display:inline-block;height:fit-content;line-height:0}.text-center.sc-sd-guide{text-align:center}.text-right.sc-sd-guide{text-align:right}.text-left.sc-sd-guide{text-align:left}input[type=text].sc-sd-guide,input[type=number].sc-sd-guide,input[type=password].sc-sd-guide,input[type=email].sc-sd-guide,input[type=tel].sc-sd-guide,textarea.sc-sd-guide{padding-block:0px;padding-inline:0px}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide{background:currentColor;opacity:0.15}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide:before{opacity:0.1}.sd-hoverable.sc-sd-guide:hover>.sd-focus-helper.sc-sd-guide:after{opacity:0.4}.sd-focus-helper.sc-sd-guide{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper.sc-sd-guide:before,.sd-focus-helper.sc-sd-guide:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper.sc-sd-guide:before{background:#000000}.sd-focus-helper.sc-sd-guide:after{background:#ffffff}.sd-tooltip-menu.sc-sd-guide{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close.sc-sd-guide{padding-right:12px !important}.sd-tooltip-menu__arrow.sc-sd-guide{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow.sc-sd-guide svg.sc-sd-guide{width:100%;height:100%}.sd-tooltip-menu__arrow--top.sc-sd-guide{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom.sc-sd-guide{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left.sc-sd-guide{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right.sc-sd-guide{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content.sc-sd-guide{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button.sc-sd-guide{padding-top:4px;display:flex}.sd-tooltip-menu__close-button.sc-sd-guide button.sc-sd-guide{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu.sc-sd-guide{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow.sc-sd-guide{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow.sc-sd-guide svg.sc-sd-guide{width:100%;height:100%}.sd-popover-menu__arrow--top.sc-sd-guide{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom.sc-sd-guide{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left.sc-sd-guide{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right.sc-sd-guide{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content.sc-sd-guide{font-size:12px;line-height:20px}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__title.sc-sd-guide{font-weight:700;margin-bottom:4px}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__messages.sc-sd-guide{font-weight:500}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons.sc-sd-guide{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons--1.sc-sd-guide{justify-content:flex-end}.sd-popover-menu__content.sc-sd-guide .sd-popover-menu__buttons--2.sc-sd-guide{justify-content:space-between}.sd-popover-menu__close-button.sc-sd-guide{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-guide.sc-sd-guide .sc-sd-guide:deep(.sd-button){padding:0 16px 0 12px;border-radius:16px}.sd-guide.sc-sd-guide .sc-sd-guide:deep(.sd-button) .sd-button__content.sc-sd-guide .sd-button__label.sc-sd-guide{color:#333333}.sd-guide__popup.sc-sd-guide{position:relative;padding:20px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup__close.sc-sd-guide{position:absolute;top:12px;right:12px}.sd-guide__popup__header.sc-sd-guide{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sd-guide__popup__header.sc-sd-guide .sd-guide__popup__title.sc-sd-guide{margin-top:0;font-size:16px;font-weight:700;line-height:26px;color:#333333}.sd-guide__popup__list.sc-sd-guide{width:100%;padding:0;margin:0}.sd-guide__popup__list__item.sc-sd-guide{display:flex;width:100%;align-items:start;list-style:none;color:#333333;font-size:12px;font-weight:400}.sd-guide__popup__list__item.sc-sd-guide p.sc-sd-guide{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item.sc-sd-guide::before{display:block;content:\"-\";width:6px;color:#333333;font-size:12px;font-weight:400;margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2.sc-sd-guide::before{content:\"•\"}.sd-guide__popup__list__item--depth-2.sc-sd-guide{padding-left:26px}";
|
|
5
|
+
|
|
6
|
+
const GUIDE_LABEL = {
|
|
7
|
+
help: '활용 TIP',
|
|
8
|
+
pdf: 'PDF Guide',
|
|
9
|
+
youtube: 'Video Guide',
|
|
10
|
+
notion: '사용 가이드',
|
|
11
|
+
event: 'Event Button',
|
|
12
|
+
};
|
|
13
|
+
const GUIDE_ICON = {
|
|
14
|
+
help: {
|
|
15
|
+
name: 'helpOutline',
|
|
16
|
+
size: 20,
|
|
17
|
+
color: colors.green_65,
|
|
18
|
+
},
|
|
19
|
+
pdf: { name: 'pdf', size: 20, color: colors.red_75 },
|
|
20
|
+
youtube: { name: 'youtube', size: 20, color: colors.red_75 },
|
|
21
|
+
notion: { name: 'notion', size: 16, color: colors.black },
|
|
22
|
+
event: { name: 'event', size: 16, color: colors.brilliantblue_70 },
|
|
23
|
+
};
|
|
24
|
+
const SdGuide = class {
|
|
25
|
+
constructor(hostRef) {
|
|
26
|
+
registerInstance(this, hostRef);
|
|
27
|
+
}
|
|
28
|
+
get el() { return getElement(this); }
|
|
29
|
+
type = 'help';
|
|
30
|
+
label = '';
|
|
31
|
+
message = '';
|
|
32
|
+
guideUrl = '';
|
|
33
|
+
popupWidth;
|
|
34
|
+
popupShow = false;
|
|
35
|
+
guideRef;
|
|
36
|
+
handleClickGuide = () => {
|
|
37
|
+
if (this.type === 'help') {
|
|
38
|
+
this.popupShow = !this.popupShow;
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
if (this.guideUrl) {
|
|
42
|
+
window.open(this.guideUrl, '_blank');
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
get guideClass() {
|
|
46
|
+
const classes = ['sd-guide', `sd-guide--${this.type}`];
|
|
47
|
+
if (this.popupShow)
|
|
48
|
+
classes.push('sd-guide--active');
|
|
49
|
+
return classes.join(' ');
|
|
50
|
+
}
|
|
51
|
+
// private getGuideStyle(): StyleProps {
|
|
52
|
+
// const styles: StyleProps = {};
|
|
53
|
+
// if (this.type === 'help') {
|
|
54
|
+
// styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;
|
|
55
|
+
// styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;
|
|
56
|
+
// styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;
|
|
57
|
+
// } else {
|
|
58
|
+
// styles['--guide-border'] = colors.grey_45;
|
|
59
|
+
// styles['--guide-color'] = colors.grey_90;
|
|
60
|
+
// styles['--guide-background'] = colors.white;
|
|
61
|
+
// }
|
|
62
|
+
// return styles;
|
|
63
|
+
// }
|
|
64
|
+
// private getGuidIcon(): { name: IconName; size: number; color: string } {
|
|
65
|
+
// if (this.type === 'pdf') {
|
|
66
|
+
// return { name: 'pdf', size: 20, color: colors.red_75 };
|
|
67
|
+
// } else if (this.type === 'youtube') {
|
|
68
|
+
// return { name: 'youtube', size: 20, color: colors.red_75 };
|
|
69
|
+
// } else if (this.type === 'notion') {
|
|
70
|
+
// return { name: 'notion', size: 16, color: colors.black };
|
|
71
|
+
// } else if (this.type === 'event') {
|
|
72
|
+
// return { name: 'event', size: 16, color: colors.brilliantblue_70 };
|
|
73
|
+
// }
|
|
74
|
+
// return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };
|
|
75
|
+
// }
|
|
76
|
+
closeDropdown = () => {
|
|
77
|
+
this.popupShow = false;
|
|
78
|
+
};
|
|
79
|
+
render() {
|
|
80
|
+
// const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();
|
|
81
|
+
const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
|
|
82
|
+
return (h(Host, { key: '9f8b8af98d5bbcbde8544d0e8e337068e8e5778d' }, h("sd-button", { key: '13cd8b97e2c017f5e31344cb9ded45015bfe8364', ref: el => (this.guideRef = el), class: this.guideClass, variant: "outline", label: GUIDE_LABEL[this.type], size: "sm", color: "grey_45", icon: iconName, iconColor: iconColor, iconSize: iconSize,
|
|
83
|
+
// iconStyle={{ marginRight: '4px' }}
|
|
84
|
+
// buttonStyle={{
|
|
85
|
+
// height: '28px',
|
|
86
|
+
// minHeight: '28px',
|
|
87
|
+
// padding: '4px 12px',
|
|
88
|
+
// borderRadius: '16px',
|
|
89
|
+
// borderColor: 'var(--guide-border)',
|
|
90
|
+
// color: 'var(--guide-color)',
|
|
91
|
+
// fontSize: '12px',
|
|
92
|
+
// fontWeight: '400',
|
|
93
|
+
// backgroundColor: 'var(--guide-background)',
|
|
94
|
+
// }}
|
|
95
|
+
onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '5e199a2c2d5bc42fa87c651ef4d07fa0ab091558', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '625d746fedfc57df447f754ae477d89058152ead', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'ac0f7809af22910f677df3a3ec48dd370dac0f9e', class: "sd-guide__popup__close", icon: "close", color: colors.grey_65, size: "md", variant: "ghost", noHover: true,
|
|
96
|
+
// buttonStyle={{ padding: '0px', minHeight: '0px' }}
|
|
97
|
+
onSdClick: this.closeDropdown }), h("div", { key: '747244da8b2cd0c6b59bdaa2bc7967017dcc1a6b', class: "sd-guide__popup__header" }, h("sd-icon", { key: '7899329aed456415febc12184d7fb276eeb011fd', name: "helpOutline", size: 24, color: colors.green_65 }), h("h3", { key: '9cbbe86aa294d9831e1f7a3a6a0aece5b74b6171', class: "sd-guide__popup__title" }, this.label || GUIDE_LABEL[this.type])), h("ul", { key: '1a2cc3226c080db952adcf458511a5efec61e797', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
98
|
+
}
|
|
99
|
+
// 현재 2depth까지만 스타일 적용
|
|
100
|
+
renderListItem(message, depth = 0) {
|
|
101
|
+
const listItems = [];
|
|
102
|
+
if (Array.isArray(message)) {
|
|
103
|
+
const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));
|
|
104
|
+
listItems.push(...depthMsg.flat());
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
listItems.push(this.renderLi(message, depth));
|
|
108
|
+
}
|
|
109
|
+
return listItems;
|
|
110
|
+
}
|
|
111
|
+
renderLi = (message, depth) => {
|
|
112
|
+
const listContent = message.replace(/ /gi, ' ');
|
|
113
|
+
return (h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, h("p", { innerHTML: listContent })));
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
SdGuide.style = sdGuideCss;
|
|
117
|
+
|
|
118
|
+
export { SdGuide as sd_guide };
|
|
119
|
+
//# sourceMappingURL=sd-guide.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sd-guide.entry.js","sources":["src/components/sd-guide/sd-guide.scss?tag=sd-guide&encapsulation=scoped","src/components/sd-guide/sd-guide.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n.sd-guide {\r\n // &--active {\r\n // .ad-button {\r\n // }\r\n // }\r\n :deep(.sd-button) {\r\n padding: 0 16px 0 12px;\r\n border-radius: 16px;\r\n\r\n .sd-button__content {\r\n .sd-button__label {\r\n color: $grey_90;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-guide__popup {\r\n position: relative;\r\n padding: 20px 32px;\r\n border-radius: 8px;\r\n box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);\r\n background: white;\r\n\r\n &__close {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n }\r\n\r\n &__header {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 12px;\r\n\r\n .sd-guide__popup__title {\r\n margin-top: 0;\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 26px;\r\n color: $grey_90;\r\n }\r\n }\r\n\r\n &__list {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &__item {\r\n display: flex;\r\n width: 100%;\r\n align-items: start;\r\n list-style: none;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n\r\n p {\r\n width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n white-space: normal;\r\n overflow-wrap: break-word;\r\n min-width: 0;\r\n }\r\n\r\n &::before {\r\n display: block;\r\n content: '-';\r\n width: 6px;\r\n color: $grey_90;\r\n font-size: 12px;\r\n font-weight: 400;\r\n margin-left: 10px;\r\n margin-right: 12px;\r\n flex-shrink: 0;\r\n }\r\n\r\n &--depth-2 {\r\n &::before {\r\n content: '•';\r\n }\r\n padding-left: 26px;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\r\nimport colors from '../../styles/color.json';\r\n\r\ntype GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';\r\n\r\nconst GUIDE_LABEL = {\r\n help: '활용 TIP',\r\n pdf: 'PDF Guide',\r\n youtube: 'Video Guide',\r\n notion: '사용 가이드',\r\n event: 'Event Button',\r\n};\r\n\r\nconst GUIDE_ICON = {\r\n help: {\r\n name: 'helpOutline',\r\n size: 20,\r\n color: colors.green_65,\r\n },\r\n pdf: { name: 'pdf', size: 20, color: colors.red_75 },\r\n youtube: { name: 'youtube', size: 20, color: colors.red_75 },\r\n notion: { name: 'notion', size: 16, color: colors.black },\r\n event: { name: 'event', size: 16, color: colors.brilliantblue_70 },\r\n} as const;\r\n\r\n@Component({\r\n tag: 'sd-guide',\r\n styleUrl: 'sd-guide.scss',\r\n scoped: true,\r\n})\r\nexport class SdGuide {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() type: GuideType = 'help';\r\n @Prop() label: string = '';\r\n @Prop() message: string | string[] = '';\r\n @Prop() guideUrl: string = '';\r\n @Prop() popupWidth?: number;\r\n\r\n @State() popupShow: boolean = false;\r\n\r\n private guideRef?: HTMLElement;\r\n\r\n private handleClickGuide = () => {\r\n if (this.type === 'help') {\r\n this.popupShow = !this.popupShow;\r\n return;\r\n }\r\n\r\n if (this.guideUrl) {\r\n window.open(this.guideUrl, '_blank');\r\n }\r\n };\r\n\r\n private get guideClass(): string {\r\n const classes = ['sd-guide', `sd-guide--${this.type}`];\r\n\r\n if (this.popupShow) classes.push('sd-guide--active');\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n // private getGuideStyle(): StyleProps {\r\n // const styles: StyleProps = {};\r\n\r\n // if (this.type === 'help') {\r\n // styles['--guide-border'] = this.popupShow ? colors.green_65 : colors.grey_45;\r\n // styles['--guide-color'] = this.popupShow ? colors.white : colors.grey_90;\r\n // styles['--guide-background'] = this.popupShow ? colors.green_65 : colors.white;\r\n // } else {\r\n // styles['--guide-border'] = colors.grey_45;\r\n // styles['--guide-color'] = colors.grey_90;\r\n // styles['--guide-background'] = colors.white;\r\n // }\r\n\r\n // return styles;\r\n // }\r\n\r\n // private getGuidIcon(): { name: IconName; size: number; color: string } {\r\n // if (this.type === 'pdf') {\r\n // return { name: 'pdf', size: 20, color: colors.red_75 };\r\n // } else if (this.type === 'youtube') {\r\n // return { name: 'youtube', size: 20, color: colors.red_75 };\r\n // } else if (this.type === 'notion') {\r\n // return { name: 'notion', size: 16, color: colors.black };\r\n // } else if (this.type === 'event') {\r\n // return { name: 'event', size: 16, color: colors.brilliantblue_70 };\r\n // }\r\n\r\n // return { name: 'helpOutline', size: 20, color: this.popupShow ? colors.white : colors.green_65 };\r\n // }\r\n\r\n closeDropdown = () => {\r\n this.popupShow = false;\r\n };\r\n\r\n render() {\r\n // const { name: iconName, size: iconSize, color: iconColor } = this.getGuidIcon();\r\n const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];\r\n\r\n return (\r\n <Host>\r\n <sd-button\r\n ref={el => (this.guideRef = el as unknown as HTMLElement)}\r\n class={this.guideClass}\r\n variant=\"outline\"\r\n label={GUIDE_LABEL[this.type]}\r\n size=\"sm\"\r\n color=\"grey_45\"\r\n icon={iconName}\r\n iconColor={iconColor}\r\n iconSize={iconSize}\r\n // iconStyle={{ marginRight: '4px' }}\r\n // buttonStyle={{\r\n // height: '28px',\r\n // minHeight: '28px',\r\n // padding: '4px 12px',\r\n // borderRadius: '16px',\r\n // borderColor: 'var(--guide-border)',\r\n // color: 'var(--guide-color)',\r\n // fontSize: '12px',\r\n // fontWeight: '400',\r\n // backgroundColor: 'var(--guide-background)',\r\n // }}\r\n onSdClick={this.handleClickGuide}\r\n />\r\n {this.type === 'help' && this.popupShow && (\r\n <sd-portal\r\n open={this.popupShow}\r\n parentRef={this.guideRef}\r\n onSdClose={this.closeDropdown}\r\n offset={[0, 4]}\r\n >\r\n <div\r\n class=\"sd-guide__popup\"\r\n style={{ width: this.popupWidth ? this.popupWidth + 'px' : '426px' } as any}\r\n >\r\n <sd-button\r\n class=\"sd-guide__popup__close\"\r\n icon=\"close\"\r\n color={colors.grey_65}\r\n size=\"md\"\r\n variant=\"ghost\"\r\n noHover\r\n // buttonStyle={{ padding: '0px', minHeight: '0px' }}\r\n onSdClick={this.closeDropdown}\r\n />\r\n <div class=\"sd-guide__popup__header\">\r\n <sd-icon name=\"helpOutline\" size={24} color={colors.green_65} />\r\n <h3 class=\"sd-guide__popup__title\">{this.label || GUIDE_LABEL[this.type]}</h3>\r\n </div>\r\n <ul class=\"sd-guide__popup__list\">{this.renderListItem(this.message)}</ul>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n\r\n // 현재 2depth까지만 스타일 적용\r\n renderListItem(message: string | string[], depth: number = 0): HTMLElement[] {\r\n const listItems: HTMLElement[] = [];\r\n\r\n if (Array.isArray(message)) {\r\n const depthMsg = message.map(msg => this.renderListItem(msg, depth + 1));\r\n listItems.push(...depthMsg.flat());\r\n } else {\r\n listItems.push(this.renderLi(message, depth));\r\n }\r\n\r\n return listItems;\r\n }\r\n\r\n renderLi = (message: string, depth: number) => {\r\n const listContent = message.replace(/ /gi, ' ');\r\n return (\r\n <li class={`sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}`}>\r\n <p innerHTML={listContent}></p>\r\n </li>\r\n );\r\n };\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,69yBAA69yB;;ACKh/yB,MAAM,WAAW,GAAG;AACnB,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,GAAG,EAAE,WAAW;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,cAAc;CACrB;AAED,MAAM,UAAU,GAAG;AAClB,IAAA,IAAI,EAAE;AACL,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,MAAM,CAAC,QAAQ;AACtB,KAAA;AACD,IAAA,GAAG,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACpD,IAAA,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AAC5D,IAAA,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE;AACzD,IAAA,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,gBAAgB,EAAE;CACzD;MAOG,OAAO,GAAA,MAAA;;;;;IAGX,IAAI,GAAc,MAAM;IACxB,KAAK,GAAW,EAAE;IAClB,OAAO,GAAsB,EAAE;IAC/B,QAAQ,GAAW,EAAE;AACrB,IAAA,UAAU;IAET,SAAS,GAAY,KAAK;AAE3B,IAAA,QAAQ;IAER,gBAAgB,GAAG,MAAK;AAC/B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS;YAChC;;AAGD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;;AAEtC,KAAC;AAED,IAAA,IAAY,UAAU,GAAA;QACrB,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,CAAa,UAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,CAAC;QAEtD,IAAI,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC;AAEpD,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiCzB,aAAa,GAAG,MAAK;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACvB,KAAC;IAED,MAAM,GAAA;;QAEL,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;AAElF,QAAA,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CACC,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7B,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;;;;;;;;;;;;;YAalB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAC/B,CAAA,EACD,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,SAAS,KACtC,CACC,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAA,EAEd,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,OAAO,EAAS,EAAA,EAE3E,CACC,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,OAAO,EACrB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,OAAO,EAAA,IAAA;;YAEP,SAAS,EAAE,IAAI,CAAC,aAAa,EAC5B,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAI,CAAA,EAChE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,wBAAwB,EAAA,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAM,CACzE,EACN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAM,CACrE,CACK,CACZ,CACK;;;AAKT,IAAA,cAAc,CAAC,OAA0B,EAAE,KAAA,GAAgB,CAAC,EAAA;QAC3D,MAAM,SAAS,GAAkB,EAAE;AAEnC,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;YACxE,SAAS,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;;aAC5B;AACN,YAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;;AAG9C,QAAA,OAAO,SAAS;;AAGjB,IAAA,QAAQ,GAAG,CAAC,OAAe,EAAE,KAAa,KAAI;QAC7C,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC;QACpD,QACC,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,CAAkE,+DAAA,EAAA,KAAK,CAAE,CAAA,EAAA,EACnF,CAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,WAAW,EAAM,CAAA,CAC3B;AAEP,KAAC;;;;;;"}
|
|
@@ -81,12 +81,12 @@ const SdPagination = class {
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
render() {
|
|
84
|
-
return (h("div", { key: '
|
|
84
|
+
return (h("div", { key: 'ae962ed1dfbcb79c23c402d52d0a83822b54d4b3', class: this.paginationClasses }, h("div", { key: 'efa0dfbcc8d71d2b9ff5b02334a3d1e119a7f469', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
85
85
|
'pagination-btn': true,
|
|
86
86
|
'pagination-btn--selected': this.currentPage === n,
|
|
87
87
|
}, disabled: this.currentPage === n, style: {
|
|
88
88
|
'--pagination-btn-width': `${this.buttonWidth}px`,
|
|
89
|
-
}, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '
|
|
89
|
+
}, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'f0bd3b291453696e22a34f182a852a2a092874f2', class: "append-btns" }, this.renderNextButtons())));
|
|
90
90
|
}
|
|
91
91
|
static get watchers() { return {
|
|
92
92
|
"currentPage": ["onPropChange"],
|
|
@@ -127,11 +127,11 @@ const SdTooltip = class {
|
|
|
127
127
|
: {
|
|
128
128
|
onClick: () => (console.log('click tooltip'), (this.showTooltip = !this.showTooltip)),
|
|
129
129
|
};
|
|
130
|
-
return (h(Fragment, { key: '
|
|
130
|
+
return (h(Fragment, { key: 'db5f9498990b6cc3941a1f276dc7b437f00ae3b1' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '19e133936ac7d7efc95292c0053a6eace81e7ccb', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '2d0fed8f8f2f3e6dfe860c78f4c1af99f595e4d4', class: {
|
|
131
131
|
'sd-tooltip-menu': true,
|
|
132
132
|
[`sd-tooltip-menu--${this.placement}`]: true,
|
|
133
133
|
'sd-tooltip-menu--with-close': this.useClose,
|
|
134
|
-
} }, h("i", { key: '
|
|
134
|
+
} }, h("i", { key: '6ec7ba058e541d65eae3b5100ca8eb741a04d814', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '550d0629d949f9da13117c3c569e886b44e8b9bd' })), h("div", { key: '4a1fc247b84457ee8c962804ca91bd93b4de8948', class: "sd-tooltip-menu__content" }, h("slot", { key: '444c621343b3eeba8f89e85f06b9b66e39b626b1' }, this.el.textContent)), this.useClose && (h("div", { key: '570364c37b97299922b4c52192d52d1e0e20228d', class: "sd-tooltip-menu__close-button" }, h("button", { key: '0e126ad1ed0238e8adbf7a82132e28c90bffa1a5', onClick: () => this.handleClose() }, h("sd-icon", { key: '796643e7a212b7a65f81671c46e2b992fe1ae0d1', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
135
135
|
}
|
|
136
136
|
};
|
|
137
137
|
SdTooltip.style = sdTooltipCss;
|
|
@@ -37,11 +37,11 @@ const SdPopover = class {
|
|
|
37
37
|
this.showPopover = false;
|
|
38
38
|
};
|
|
39
39
|
render() {
|
|
40
|
-
return (h(Fragment, { key: '
|
|
40
|
+
return (h(Fragment, { key: 'fb877e8d016d13fb33b49a1a4dbfed9fc01b1336' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: '02208721da61cb84086a57c823f8e31775fdbd5e', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '3f3c4fc690dac5061bda08af37121e2b98374979', class: {
|
|
41
41
|
'sd-popover-menu': true,
|
|
42
42
|
[`sd-popover-menu--${this.placement}`]: true,
|
|
43
43
|
[this.menuClass]: !!this.menuClass,
|
|
44
|
-
} }, h("i", { key: '
|
|
44
|
+
} }, h("i", { key: '6f0df95bafc2cbf564fd0e5a133c89f03c3a924b', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '535acee0be86db4ed58d6cc1631732541f1e475e' })), h("div", { key: 'd4366800a8cbd5a1f9630344a5ca4241b0eaa8dd', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '1cd9de3129988c5d26be0ded5b03520ab591cb9a', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5aae57948bd5e0fd98e73a8ae504b77ce6cdbe07', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '814ac9ba0b2cf4367bb4cd5e688fa5433fee7126', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'a21ad0a5e28f8609b2f9d9accd0be5d81ed9de5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '10738ec0926ea5fbc0b30b5c8c08b6cc37bf47d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
|
|
45
45
|
}
|
|
46
46
|
static get watchers() { return {
|
|
47
47
|
"show": ["watchShowHandler"]
|