@sellmate/design-system 0.0.52 → 0.0.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +5 -3
- package/dist/cjs/design-system.cjs.js.map +1 -1
- package/dist/cjs/{index-Bxead0A0.js → index-B7tkxTye.js} +11 -5
- package/dist/cjs/index-B7tkxTye.js.map +1 -0
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/loader.cjs.js +4 -2
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +4 -4
- package/dist/cjs/{sd-button_15.cjs.entry.js → sd-button_23.cjs.entry.js} +1199 -94
- package/dist/cjs/sd-card.cjs.entry.js +4 -4
- package/dist/cjs/sd-date-box.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-picker.cjs.entry.js +4 -4
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +5 -5
- package/dist/cjs/sd-modal-card.cjs.entry.js +3 -3
- package/dist/cjs/sd-popover.cjs.entry.js +6 -6
- package/dist/cjs/sd-progress.cjs.entry.js +5 -5
- package/dist/cjs/sd-radio-button-group.cjs.entry.js +71 -0
- package/dist/cjs/sd-select-multiple.cjs.entry.js +8 -5
- package/dist/cjs/sd-table.cjs.entry.js +6 -6
- package/dist/cjs/sd-tbody_3.cjs.entry.js +10 -10
- package/dist/cjs/sd-td.cjs.entry.js +5 -5
- package/dist/cjs/{tooltipArrow-C7cIAuTo.js → tooltipArrow-8I9A3AOE.js} +3 -3
- package/dist/cjs/{tooltipArrow-C7cIAuTo.js.map → tooltipArrow-8I9A3AOE.js.map} +1 -1
- package/dist/collection/collection-manifest.json +8 -2
- package/dist/collection/components/sd-badge/sd-badge.js +1 -1
- package/dist/collection/components/sd-card/sd-card.js +1 -1
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +1 -1
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
- package/dist/collection/components/sd-file-picker/sd-file-picker.css +95 -0
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +299 -0
- package/dist/collection/components/sd-file-picker/sd-file-picker.js.map +1 -0
- package/dist/collection/components/sd-guide/sd-guide.js +3 -3
- package/dist/collection/components/sd-icon/sd-icon.css +1 -4
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.css +1 -4
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js +1 -1
- package/dist/collection/components/sd-number-input/sd-number-input.css +128 -0
- package/dist/collection/components/sd-number-input/sd-number-input.js +744 -0
- package/dist/collection/components/sd-number-input/sd-number-input.js.map +1 -0
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.css +71 -0
- package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.js +214 -0
- package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.js.map +1 -0
- package/dist/collection/components/sd-radio-group/sd-radio-group.js +1 -1
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select/sd-select.js +28 -4
- package/dist/collection/components/sd-select/sd-select.js.map +1 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +26 -2
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js.map +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +5 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +92 -43
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js.map +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- package/dist/collection/components/sd-table/sd-table.js +3 -3
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
- package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
- package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
- package/dist/collection/components/sd-table-backup/sd-table-backup.js +4 -4
- package/dist/collection/components/sd-tabs/sd-tabs.css +83 -0
- package/dist/collection/components/sd-tabs/sd-tabs.js +180 -0
- package/dist/collection/components/sd-tabs/sd-tabs.js.map +1 -0
- package/dist/collection/components/sd-tag/sd-tag.js +1 -1
- package/dist/collection/components/sd-toast-message/sd-toast-message.css +66 -0
- package/dist/collection/components/sd-toast-message/sd-toast-message.js +248 -0
- package/dist/collection/components/sd-toast-message/sd-toast-message.js.map +1 -0
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-toggle-button/sd-toggle-button.css +46 -0
- package/dist/collection/components/sd-toggle-button/sd-toggle-button.js +136 -0
- package/dist/collection/components/sd-toggle-button/sd-toggle-button.js.map +1 -0
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -4
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-DiehM5Y0.js → p-B05GJor3.js} +9 -9
- package/dist/components/p-B05GJor3.js.map +1 -0
- package/dist/components/{p-BpNH68jy.js → p-B3H_uLbl.js} +3 -3
- package/dist/components/{p-BpNH68jy.js.map → p-B3H_uLbl.js.map} +1 -1
- package/dist/components/{p-Dgxczhd0.js → p-BBNolp5g.js} +6 -6
- package/dist/components/{p-Dgxczhd0.js.map → p-BBNolp5g.js.map} +1 -1
- package/dist/components/{p-gnOKrd57.js → p-BDkKpeVz.js} +3 -3
- package/dist/components/{p-gnOKrd57.js.map → p-BDkKpeVz.js.map} +1 -1
- package/dist/components/p-BH3t01Im.js +109 -0
- package/dist/{design-system/sd-select-option-group.entry.esm.js.map → components/p-BH3t01Im.js.map} +1 -1
- package/dist/components/{p-S7M--xNH.js → p-BqxmCDlz.js} +18 -18
- package/dist/components/p-BqxmCDlz.js.map +1 -0
- package/dist/components/{p-DY6t0qQj.js → p-BwSVYr5L.js} +7 -7
- package/dist/components/p-BwSVYr5L.js.map +1 -0
- package/dist/components/{p-9kN1E6Ra.js → p-C5T02a4h.js} +27 -23
- package/dist/components/p-C5T02a4h.js.map +1 -0
- package/dist/components/{p-CkKxyn_K.js → p-C7kMNSz9.js} +9 -9
- package/dist/components/p-C7kMNSz9.js.map +1 -0
- package/dist/components/{p-BSUHSOXX.js → p-CEDtmtIo.js} +8 -8
- package/dist/components/p-CEDtmtIo.js.map +1 -0
- package/dist/components/p-CLMeZVRV.js +34 -0
- package/dist/components/p-CLMeZVRV.js.map +1 -0
- package/dist/components/p-CLNPwi8e.js +81 -0
- package/dist/components/p-CLNPwi8e.js.map +1 -0
- package/dist/components/{p-TFWJruz2.js → p-CQBrru3e.js} +11 -5
- package/dist/components/p-CQBrru3e.js.map +1 -0
- package/dist/components/{p-BsyfatBe.js → p-CV5tKC24.js} +8 -8
- package/dist/components/p-CV5tKC24.js.map +1 -0
- package/dist/components/{p-CJ0qTKU7.js → p-Cx3euWvk.js} +6 -6
- package/dist/components/{p-CJ0qTKU7.js.map → p-Cx3euWvk.js.map} +1 -1
- package/dist/components/{p-C6tAa8Q4.js → p-DY9yCaP9.js} +11 -11
- package/dist/components/p-DY9yCaP9.js.map +1 -0
- package/dist/components/{p-C171iavd.js → p-DdeknsBE.js} +8 -8
- package/dist/components/p-DdeknsBE.js.map +1 -0
- package/dist/components/{p-DyGUXuvD.js → p-GHGGjwP3.js} +12 -12
- package/dist/components/p-GHGGjwP3.js.map +1 -0
- package/dist/components/{p-1SxxSEqq.js → p-XAhTfI7Q.js} +11 -11
- package/dist/components/p-XAhTfI7Q.js.map +1 -0
- package/dist/components/p-at_j60O8.js +34 -0
- package/dist/components/p-at_j60O8.js.map +1 -0
- package/dist/components/sd-badge.js +6 -6
- package/dist/components/sd-badge.js.map +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.js +6 -6
- package/dist/components/sd-card.js.map +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-box.js +1 -1
- package/dist/components/sd-date-picker.js +14 -14
- package/dist/components/sd-date-picker.js.map +1 -1
- package/dist/components/sd-date-range-picker.js +15 -15
- package/dist/components/sd-date-range-picker.js.map +1 -1
- package/dist/components/sd-file-picker.d.ts +11 -0
- package/dist/components/sd-file-picker.js +159 -0
- package/dist/components/sd-file-picker.js.map +1 -0
- package/dist/components/sd-guide.js +14 -14
- 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-loading-spinner.js +1 -1
- package/dist/components/sd-modal-card.js +9 -9
- package/dist/components/sd-modal-card.js.map +1 -1
- package/dist/components/sd-number-input.d.ts +11 -0
- package/dist/components/sd-number-input.js +335 -0
- package/dist/components/sd-number-input.js.map +1 -0
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +14 -14
- package/dist/components/sd-popover.js.map +1 -1
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-progress.js +7 -7
- package/dist/components/sd-progress.js.map +1 -1
- package/dist/components/sd-radio-button-group.d.ts +11 -0
- package/dist/components/sd-radio-button-group.js +99 -0
- package/dist/components/sd-radio-button-group.js.map +1 -0
- package/dist/components/sd-radio-group.js +6 -6
- package/dist/components/sd-radio-group.js.map +1 -1
- package/dist/components/sd-select-multiple-group.js +88 -59
- package/dist/components/sd-select-multiple-group.js.map +1 -1
- package/dist/components/sd-select-multiple.js +23 -19
- package/dist/components/sd-select-multiple.js.map +1 -1
- package/dist/components/sd-select-option-group.js +1 -1
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table-backup.js +31 -31
- package/dist/components/sd-table-backup.js.map +1 -1
- package/dist/components/sd-table.js +34 -34
- package/dist/components/sd-table.js.map +1 -1
- package/dist/components/sd-tabs.d.ts +11 -0
- package/dist/components/sd-tabs.js +101 -0
- package/dist/components/sd-tabs.js.map +1 -0
- package/dist/components/sd-tag.js +1 -76
- package/dist/components/sd-tag.js.map +1 -1
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +7 -7
- package/dist/components/sd-td.js.map +1 -1
- package/dist/components/sd-th.js +1 -1
- package/dist/components/sd-toast-message.d.ts +11 -0
- package/dist/components/sd-toast-message.js +101 -0
- package/dist/components/sd-toast-message.js.map +1 -0
- package/dist/components/sd-toggle-button.d.ts +11 -0
- package/dist/components/sd-toggle-button.js +74 -0
- package/dist/components/sd-toggle-button.js.map +1 -0
- package/dist/components/sd-toggle.js +6 -6
- package/dist/components/sd-toggle.js.map +1 -1
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/design-system.esm.js.map +1 -1
- package/dist/design-system/p-1fbc8e14.entry.js +2 -0
- package/dist/design-system/p-1fbc8e14.entry.js.map +1 -0
- package/dist/design-system/p-26266f8c.entry.js +2 -0
- package/dist/design-system/p-26266f8c.entry.js.map +1 -0
- package/dist/design-system/p-2df41cc3.entry.js +2 -0
- package/dist/design-system/p-2df41cc3.entry.js.map +1 -0
- package/dist/design-system/p-3cc7957d.entry.js +2 -0
- package/dist/design-system/p-3cc7957d.entry.js.map +1 -0
- package/dist/design-system/p-6b3c33c3.entry.js +2 -0
- package/dist/design-system/p-6b3c33c3.entry.js.map +1 -0
- package/dist/design-system/p-6ce950da.entry.js +2 -0
- package/dist/design-system/p-6ce950da.entry.js.map +1 -0
- package/dist/design-system/{p-ClyGLKUd.js → p-7X2nzJWz.js} +2 -2
- package/dist/design-system/p-7X2nzJWz.js.map +1 -0
- package/dist/design-system/{p-DXZjHQmQ.js → p-CdbtuKYR.js} +2 -2
- package/dist/design-system/{p-DXZjHQmQ.js.map → p-CdbtuKYR.js.map} +1 -1
- package/dist/design-system/p-a18c202d.entry.js +2 -0
- package/dist/design-system/p-a18c202d.entry.js.map +1 -0
- package/dist/design-system/p-b0668ce9.entry.js +2 -0
- package/dist/design-system/p-b0668ce9.entry.js.map +1 -0
- package/dist/design-system/p-be9c40a3.entry.js +2 -0
- package/dist/design-system/p-be9c40a3.entry.js.map +1 -0
- package/dist/design-system/p-db603dcb.entry.js +2 -0
- package/dist/design-system/p-db603dcb.entry.js.map +1 -0
- package/dist/design-system/p-ddb5a2f4.entry.js +2 -0
- package/dist/design-system/p-ddb5a2f4.entry.js.map +1 -0
- package/dist/design-system/p-e31182ad.entry.js +2 -0
- package/dist/design-system/p-e31182ad.entry.js.map +1 -0
- package/dist/design-system/p-f9e04bf9.entry.js +2 -0
- package/dist/design-system/p-f9e04bf9.entry.js.map +1 -0
- package/dist/design-system/p-fe8721b5.entry.js +2 -0
- package/dist/design-system/p-fe8721b5.entry.js.map +1 -0
- package/dist/esm/design-system.js +6 -4
- package/dist/esm/design-system.js.map +1 -1
- package/dist/esm/{index-ClyGLKUd.js → index-7X2nzJWz.js} +11 -5
- package/dist/esm/index-7X2nzJWz.js.map +1 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/loader.js +5 -3
- package/dist/esm/sd-badge.entry.js +4 -4
- package/dist/esm/sd-badge.entry.js.map +1 -1
- package/dist/esm/{sd-button_15.entry.js → sd-button_23.entry.js} +1192 -95
- package/dist/esm/sd-card.entry.js +4 -4
- package/dist/esm/sd-card.entry.js.map +1 -1
- package/dist/esm/sd-date-box.entry.js +3 -3
- package/dist/esm/sd-date-box.entry.js.map +1 -1
- package/dist/esm/sd-date-picker.entry.js +4 -4
- package/dist/esm/sd-date-picker.entry.js.map +1 -1
- package/dist/esm/sd-date-range-picker.entry.js +5 -5
- package/dist/esm/sd-date-range-picker.entry.js.map +1 -1
- package/dist/esm/sd-modal-card.entry.js +3 -3
- package/dist/esm/sd-modal-card.entry.js.map +1 -1
- package/dist/esm/sd-popover.entry.js +6 -6
- package/dist/esm/sd-popover.entry.js.map +1 -1
- package/dist/esm/sd-progress.entry.js +5 -5
- package/dist/esm/sd-progress.entry.js.map +1 -1
- package/dist/esm/sd-radio-button-group.entry.js +69 -0
- package/dist/esm/sd-radio-button-group.entry.js.map +1 -0
- package/dist/esm/sd-select-multiple.entry.js +8 -5
- package/dist/esm/sd-select-multiple.entry.js.map +1 -1
- package/dist/esm/sd-table.entry.js +6 -6
- package/dist/esm/sd-table.entry.js.map +1 -1
- package/dist/esm/sd-tbody_3.entry.js +10 -10
- package/dist/esm/sd-td.entry.js +5 -5
- package/dist/esm/sd-td.entry.js.map +1 -1
- package/dist/esm/{tooltipArrow-BwO7_hdW.js → tooltipArrow-DFRZWz6D.js} +3 -3
- package/dist/esm/{tooltipArrow-BwO7_hdW.js.map → tooltipArrow-DFRZWz6D.js.map} +1 -1
- package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +29 -0
- package/dist/types/components/sd-number-input/sd-number-input.d.ts +58 -0
- package/dist/types/components/sd-radio-button-group/sd-radio-button-group.d.ts +24 -0
- package/dist/types/components/sd-select/sd-select.d.ts +1 -0
- package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts +1 -0
- package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +2 -0
- package/dist/types/components/sd-tabs/sd-tabs.d.ts +22 -0
- package/dist/types/components/sd-toast-message/sd-toast-message.d.ts +19 -0
- package/dist/types/components/sd-toggle-button/sd-toggle-button.d.ts +14 -0
- package/dist/types/components.d.ts +456 -8
- package/dist/types/stencil-public-runtime.d.ts +43 -0
- package/hydrate/index.d.ts +12 -0
- package/hydrate/index.js +2637 -1823
- package/hydrate/index.mjs +2636 -1824
- package/package.json +2 -2
- package/dist/cjs/index-Bxead0A0.js.map +0 -1
- package/dist/cjs/sd-badge.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-card.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-date-box.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-date-picker.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-date-range-picker.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-modal-card.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-popover.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-progress.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +0 -406
- package/dist/cjs/sd-select-multiple-group.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-select-multiple.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-select-option-group.cjs.entry.js +0 -69
- package/dist/cjs/sd-select-option-group.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-table.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-tag.cjs.entry.js +0 -57
- package/dist/cjs/sd-tag.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-tbody.sd-th.sd-tr.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-td.entry.cjs.js.map +0 -1
- package/dist/components/p-1SxxSEqq.js.map +0 -1
- package/dist/components/p-9kN1E6Ra.js.map +0 -1
- package/dist/components/p-BSUHSOXX.js.map +0 -1
- package/dist/components/p-BsyfatBe.js.map +0 -1
- package/dist/components/p-C171iavd.js.map +0 -1
- package/dist/components/p-C6tAa8Q4.js.map +0 -1
- package/dist/components/p-C9fSCxHc.js +0 -109
- package/dist/components/p-C9fSCxHc.js.map +0 -1
- package/dist/components/p-CkKxyn_K.js.map +0 -1
- package/dist/components/p-D8f0ASS6.js +0 -34
- package/dist/components/p-D8f0ASS6.js.map +0 -1
- package/dist/components/p-DY6t0qQj.js.map +0 -1
- package/dist/components/p-DiehM5Y0.js.map +0 -1
- package/dist/components/p-DyGUXuvD.js.map +0 -1
- package/dist/components/p-S7M--xNH.js.map +0 -1
- package/dist/components/p-TFWJruz2.js.map +0 -1
- package/dist/components/p-wQDv-v0B.js +0 -34
- package/dist/components/p-wQDv-v0B.js.map +0 -1
- package/dist/design-system/p-1ad40ed0.entry.js +0 -2
- package/dist/design-system/p-1ad40ed0.entry.js.map +0 -1
- package/dist/design-system/p-1b6aec43.entry.js +0 -2
- package/dist/design-system/p-1b6aec43.entry.js.map +0 -1
- package/dist/design-system/p-1e175d35.entry.js +0 -2
- package/dist/design-system/p-1e175d35.entry.js.map +0 -1
- package/dist/design-system/p-1efccd9d.entry.js +0 -2
- package/dist/design-system/p-1efccd9d.entry.js.map +0 -1
- package/dist/design-system/p-3d78a7c7.entry.js +0 -2
- package/dist/design-system/p-3d78a7c7.entry.js.map +0 -1
- package/dist/design-system/p-4828e65b.entry.js +0 -2
- package/dist/design-system/p-4828e65b.entry.js.map +0 -1
- package/dist/design-system/p-4e7bc094.entry.js +0 -2
- package/dist/design-system/p-4e7bc094.entry.js.map +0 -1
- package/dist/design-system/p-6d81e6f8.entry.js +0 -2
- package/dist/design-system/p-6d81e6f8.entry.js.map +0 -1
- package/dist/design-system/p-717a736c.entry.js +0 -2
- package/dist/design-system/p-717a736c.entry.js.map +0 -1
- package/dist/design-system/p-74f12ea0.entry.js +0 -2
- package/dist/design-system/p-74f12ea0.entry.js.map +0 -1
- package/dist/design-system/p-7d14540d.entry.js +0 -2
- package/dist/design-system/p-7d14540d.entry.js.map +0 -1
- package/dist/design-system/p-8d6d225d.entry.js +0 -2
- package/dist/design-system/p-8d6d225d.entry.js.map +0 -1
- package/dist/design-system/p-ClyGLKUd.js.map +0 -1
- package/dist/design-system/p-b892a722.entry.js +0 -2
- package/dist/design-system/p-b892a722.entry.js.map +0 -1
- package/dist/design-system/p-bc905ded.entry.js +0 -2
- package/dist/design-system/p-bc905ded.entry.js.map +0 -1
- package/dist/design-system/p-c7e8a2c0.entry.js +0 -2
- package/dist/design-system/p-c7e8a2c0.entry.js.map +0 -1
- package/dist/design-system/p-c9b70553.entry.js +0 -2
- package/dist/design-system/p-c9b70553.entry.js.map +0 -1
- package/dist/design-system/sd-badge.entry.esm.js.map +0 -1
- package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +0 -1
- package/dist/design-system/sd-card.entry.esm.js.map +0 -1
- package/dist/design-system/sd-date-box.entry.esm.js.map +0 -1
- package/dist/design-system/sd-date-picker.entry.esm.js.map +0 -1
- package/dist/design-system/sd-date-range-picker.entry.esm.js.map +0 -1
- package/dist/design-system/sd-modal-card.entry.esm.js.map +0 -1
- package/dist/design-system/sd-popover.entry.esm.js.map +0 -1
- package/dist/design-system/sd-progress.entry.esm.js.map +0 -1
- package/dist/design-system/sd-select-multiple-group.entry.esm.js.map +0 -1
- package/dist/design-system/sd-select-multiple.entry.esm.js.map +0 -1
- package/dist/design-system/sd-table.entry.esm.js.map +0 -1
- package/dist/design-system/sd-tag.entry.esm.js.map +0 -1
- package/dist/design-system/sd-tbody.sd-th.sd-tr.entry.esm.js.map +0 -1
- package/dist/design-system/sd-td.entry.esm.js.map +0 -1
- package/dist/esm/index-ClyGLKUd.js.map +0 -1
- package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio-group.sd-select.sd-select-option.sd-table-backup.sd-toggle.sd-tooltip.sd-tooltip-portal.entry.js.map +0 -1
- package/dist/esm/sd-select-multiple-group.entry.js +0 -404
- package/dist/esm/sd-select-multiple-group.entry.js.map +0 -1
- package/dist/esm/sd-select-option-group.entry.js +0 -67
- package/dist/esm/sd-select-option-group.entry.js.map +0 -1
- package/dist/esm/sd-tag.entry.js +0 -55
- package/dist/esm/sd-tag.entry.js.map +0 -1
- package/dist/esm/sd-tbody.sd-th.sd-tr.entry.js.map +0 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
|
|
2
2
|
import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
|
|
3
|
-
import { d as defineCustomElement$5 } from './p-
|
|
4
|
-
import { d as defineCustomElement$4 } from './p-
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$5 } from './p-BwSVYr5L.js';
|
|
4
|
+
import { d as defineCustomElement$4 } from './p-CV5tKC24.js';
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-DY9yCaP9.js';
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-BBNolp5g.js';
|
|
7
7
|
|
|
8
|
-
const sdDatePickerCss =
|
|
8
|
+
const sdDatePickerCss = () => `.sd-date-picker.sc-sd-date-picker-h{width:160px;display:inline-block}.sd-date-picker__menu.sc-sd-date-picker{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav.sc-sd-date-picker button.sc-sd-date-picker,.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav.sc-sd-date-picker button.sc-sd-date-picker{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .year-nav__current.sc-sd-date-picker{width:40px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__header.sc-sd-date-picker .month-nav__current.sc-sd-date-picker{width:100px;text-align:center}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__days.sc-sd-date-picker .day.sc-sd-date-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu.sc-sd-date-picker .sd-date-picker__body.sc-sd-date-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}`;
|
|
9
9
|
|
|
10
10
|
const SdDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDatePicker extends H {
|
|
11
11
|
constructor(registerHost) {
|
|
@@ -87,7 +87,7 @@ const SdDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDatePicker exten
|
|
|
87
87
|
this.isOpen = false;
|
|
88
88
|
};
|
|
89
89
|
render() {
|
|
90
|
-
return (h(Host, { key: '
|
|
90
|
+
return (h(Host, { key: 'b60ea48c6ea76b984c48040b32c83358ab7776df', class: "sd-date-picker" }, h("sd-input", { key: 'a55a5d6b0e752081e919fa317761a9529b58b75c', ref: el => (this.inputEl = el), value: this.date, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, inputClass: "text-center", onClick: () => this.openMenu() }, h("sd-icon", { key: '707f8c0a38a72651581228d1ac887bd38fbb33b0', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '4fb84ae1246c05546dc063abfce4d89e2440c8ff', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'c8dae2a875b66cb90a2de898fb5588e4429e01a2', class: "sd-date-picker__menu" }, h("div", { key: '35d9d132bb2e68156c12019cb9ca20eaef7cd5dc', class: "sd-date-picker__header" }, h("div", { key: '327bb3fe00fb31c4ec9fde79bc6984fe176462c9', class: "year-nav" }, h("button", { key: '4e67fe3d237cb864e9d5cbf3d4ace942ac8f02cc', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'd97729c331c93fe122b51ee2dee4f4b9ddf70ad8', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '8c75d30528776992327504b05688cacbcab513d3', class: "year-nav__current" }, this.currentYear), h("button", { key: '5f4c36b216ab1230719998e0d8a00bba59fd49bd', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '79b2a3efdbac3f4fe32105ddaf77e023bdb7ac43', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'b8d141899f9ad45f4b16e376d78e181f710e28df', class: "month-nav" }, h("button", { key: '07b81a1875dab96062d32129a58efcf50c11b660', type: "button", name: "prev-month", title: "Previous ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'b5447e3e134cda07140c1d6e2708a97cc87e2b32', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '4161405b68aa5166423974167a455fa411891272', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '3fd84295b94f92ff0fbb8347ffb03c4d5d20423c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'c9879eb2a25d727cc76f538b974588ca19a3f85e', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '3030bd477ec7b4f4aae9e36b33962dad48492c9a', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'e384b514d1fe0cca98935d0e5ad272291421eb34', class: "sd-date-picker__body" }, [
|
|
91
91
|
...this.calendar.prevMonthDays,
|
|
92
92
|
...this.calendar.days,
|
|
93
93
|
...this.calendar.afterMonthDays,
|
|
@@ -98,7 +98,7 @@ const SdDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDatePicker exten
|
|
|
98
98
|
: undefined }));
|
|
99
99
|
})))))));
|
|
100
100
|
}
|
|
101
|
-
static get style() { return sdDatePickerCss; }
|
|
101
|
+
static get style() { return sdDatePickerCss(); }
|
|
102
102
|
}, [770, "sd-date-picker", {
|
|
103
103
|
"date": [1],
|
|
104
104
|
"label": [1],
|
|
@@ -116,27 +116,27 @@ function defineCustomElement$1() {
|
|
|
116
116
|
const components = ["sd-date-picker", "sd-date-box", "sd-icon", "sd-input", "sd-portal"];
|
|
117
117
|
components.forEach(tagName => { switch (tagName) {
|
|
118
118
|
case "sd-date-picker":
|
|
119
|
-
if (!customElements.get(tagName)) {
|
|
120
|
-
customElements.define(tagName, SdDatePicker$1);
|
|
119
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
120
|
+
customElements.define(transformTag(tagName), SdDatePicker$1);
|
|
121
121
|
}
|
|
122
122
|
break;
|
|
123
123
|
case "sd-date-box":
|
|
124
|
-
if (!customElements.get(tagName)) {
|
|
124
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
125
125
|
defineCustomElement$5();
|
|
126
126
|
}
|
|
127
127
|
break;
|
|
128
128
|
case "sd-icon":
|
|
129
|
-
if (!customElements.get(tagName)) {
|
|
129
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
130
130
|
defineCustomElement$4();
|
|
131
131
|
}
|
|
132
132
|
break;
|
|
133
133
|
case "sd-input":
|
|
134
|
-
if (!customElements.get(tagName)) {
|
|
134
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
135
135
|
defineCustomElement$3();
|
|
136
136
|
}
|
|
137
137
|
break;
|
|
138
138
|
case "sd-portal":
|
|
139
|
-
if (!customElements.get(tagName)) {
|
|
139
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
140
140
|
defineCustomElement$2();
|
|
141
141
|
}
|
|
142
142
|
break;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"sd-date-picker.js","mappings":"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","names":["SdDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host {\r\n &.sd-date-picker {\r\n width: 160px;\r\n display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-picker__menu {\r\n width: 304px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-picker__header {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 20px;\r\n font-size: 14px;\r\n padding: 0 5px;\r\n height: 24px;\r\n line-height: 24px;\r\n\r\n .year-nav,\r\n .month-nav {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 12px;\r\n\r\n button {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n }\r\n\r\n .year-nav {\r\n &__current {\r\n width: 40px;\r\n text-align: center;\r\n }\r\n }\r\n\r\n .month-nav {\r\n &__current {\r\n width: 100px;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .sd-date-picker__days {\r\n margin-top: 8px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n column-gap: 10px;\r\n padding: 0 5px;\r\n\r\n .day {\r\n width: 28px;\r\n height: 20px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: center;\r\n color: $grey_65;\r\n }\r\n }\r\n .sd-date-picker__body {\r\n margin-top: 12px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string | null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string | null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string | null>;\r\n\r\n componentWillLoad() {\r\n this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n const base = this.date || today;\r\n const [year, month] = base.split('-').map(Number);\r\n this.currentYear = year;\r\n this.currentMonth = month;\r\n this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n if (this.disabled) return;\r\n\r\n this.setCalendar();\r\n this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string | null) {\r\n this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' | 'next') {\r\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n this.currentYear,\r\n this.currentMonth,\r\n type,\r\n );\r\n this.setCurrentYear(newYear);\r\n this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n if (!day) return;\r\n\r\n const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n this.setCurrentDate(date);\r\n this.isOpen = false;\r\n this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n if (!this.selectable) return false;\r\n\r\n const [startSelectable, endSelectable] = this.selectable;\r\n\r\n if (startSelectable && endSelectable) {\r\n return date < startSelectable || date > endSelectable;\r\n }\r\n\r\n if (startSelectable) {\r\n return date < startSelectable;\r\n }\r\n\r\n if (endSelectable) {\r\n return date > endSelectable;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private handleClose = () => {\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class=\"sd-date-picker\">\r\n <sd-input\r\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n value={this.date}\r\n label={this.label}\r\n inside-label\r\n readonly\r\n disabled={this.disabled}\r\n inputClass=\"text-center\"\r\n onClick={() => this.openMenu()}\r\n >\r\n <sd-icon\r\n slot=\"prefix\"\r\n name=\"date\"\r\n size=\"16\"\r\n color=\"#737373\"\r\n class=\"date-icon\"\r\n onClick={() => this.openMenu()}\r\n ></sd-icon>\r\n </sd-input>\r\n\r\n {this.isOpen && (\r\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n <div class=\"sd-date-picker__menu\">\r\n <div class=\"sd-date-picker__header\">\r\n {/* Year Navigation */}\r\n <div class=\"year-nav\">\r\n <button\r\n type=\"button\"\r\n name=\"prev-year\"\r\n title=\"Previous Year\"\r\n onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n <span class=\"year-nav__current\">{this.currentYear}</span>\r\n <button\r\n type=\"button\"\r\n name=\"next-year\"\r\n title=\"Next Year\"\r\n onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n\r\n {/* Month Navigation */}\r\n <div class=\"month-nav\">\r\n <button\r\n type=\"button\"\r\n name=\"prev-month\"\r\n title=\"Previous \"\r\n onClick={() => this.handleUpdateMonth('prev')}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n <button\r\n type=\"button\"\r\n name=\"next-month\"\r\n title=\"Next Month\"\r\n onClick={() => this.handleUpdateMonth('next')}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sd-date-picker__days\">\r\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n <div key={day} class=\"day\">\r\n {day}\r\n </div>\r\n ))}\r\n </div>\r\n\r\n <div class=\"sd-date-picker__body\">\r\n {[\r\n ...this.calendar.prevMonthDays,\r\n ...this.calendar.days,\r\n ...this.calendar.afterMonthDays,\r\n ].map((day, idx) => {\r\n const formattedDate = this.dateUtil.formatDate(\r\n this.currentYear,\r\n this.currentMonth,\r\n Number(day),\r\n );\r\n\r\n return (\r\n <sd-date-box\r\n key={`${day}_${idx}`}\r\n date={!day ? '' : Number(day)}\r\n selected={this.currentDate === formattedDate}\r\n isToday={today === formattedDate}\r\n disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n onClick={\r\n !this.isDisabledDate(formattedDate) && day\r\n ? () => this.handleDateClick(Number(day))\r\n : undefined\r\n }\r\n />\r\n );\r\n })}\r\n </div>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"sd-date-picker.js","mappings":"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","names":["SdDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-date-picker/sd-date-picker.scss?tag=sd-date-picker&encapsulation=scoped","src/components/sd-date-picker/sd-date-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n:host {\r\n &.sd-date-picker {\r\n width: 160px;\r\n display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-picker__menu {\r\n width: 304px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-picker__header {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 20px;\r\n font-size: 14px;\r\n padding: 0 5px;\r\n height: 24px;\r\n line-height: 24px;\r\n\r\n .year-nav,\r\n .month-nav {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n gap: 12px;\r\n\r\n button {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n }\r\n\r\n .year-nav {\r\n &__current {\r\n width: 40px;\r\n text-align: center;\r\n }\r\n }\r\n\r\n .month-nav {\r\n &__current {\r\n width: 100px;\r\n text-align: center;\r\n }\r\n }\r\n }\r\n .sd-date-picker__days {\r\n margin-top: 8px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n column-gap: 10px;\r\n padding: 0 5px;\r\n\r\n .day {\r\n width: 28px;\r\n height: 20px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: center;\r\n color: $grey_65;\r\n }\r\n }\r\n .sd-date-picker__body {\r\n margin-top: 12px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n","import { Component, Element, Prop, State, Event, h, EventEmitter, Host } from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { today } from '../../utils/date';\r\n\r\n@Component({\r\n tag: 'sd-date-picker',\r\n styleUrl: 'sd-date-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDatePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: string | null = null;\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() currentDate: string | null = null;\r\n @State() currentYear!: number;\r\n @State() currentMonth!: number;\r\n\r\n @Event() sdChange!: EventEmitter<string | null>;\r\n\r\n componentWillLoad() {\r\n this.setCalendar();\r\n }\r\n\r\n private dateUtil = useDatePicker();\r\n private inputEl?: HTMLElement;\r\n\r\n private setCalendar() {\r\n const base = this.date || today;\r\n const [year, month] = base.split('-').map(Number);\r\n this.currentYear = year;\r\n this.currentMonth = month;\r\n this.currentDate = this.date;\r\n }\r\n\r\n private openMenu() {\r\n if (this.disabled) return;\r\n\r\n this.setCalendar();\r\n this.isOpen = true;\r\n }\r\n\r\n private get calendar() {\r\n return this.dateUtil.createCalendar(this.currentYear, this.currentMonth);\r\n }\r\n\r\n private setCurrentYear(year: number) {\r\n this.currentYear = year;\r\n }\r\n\r\n private setCurrentMonth(month: number) {\r\n this.currentMonth = month;\r\n }\r\n\r\n private setCurrentDate(date: string | null) {\r\n this.currentDate = date;\r\n }\r\n\r\n private handleUpdateMonth(type: 'prev' | 'next') {\r\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n this.currentYear,\r\n this.currentMonth,\r\n type,\r\n );\r\n this.setCurrentYear(newYear);\r\n this.setCurrentMonth(newMonth);\r\n }\r\n\r\n private handleDateClick(day: number) {\r\n if (!day) return;\r\n\r\n const date = this.dateUtil.formatDate(this.currentYear, this.currentMonth, day);\r\n this.setCurrentDate(date);\r\n this.isOpen = false;\r\n this.sdChange.emit?.(date);\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n if (!this.selectable) return false;\r\n\r\n const [startSelectable, endSelectable] = this.selectable;\r\n\r\n if (startSelectable && endSelectable) {\r\n return date < startSelectable || date > endSelectable;\r\n }\r\n\r\n if (startSelectable) {\r\n return date < startSelectable;\r\n }\r\n\r\n if (endSelectable) {\r\n return date > endSelectable;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private handleClose = () => {\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class=\"sd-date-picker\">\r\n <sd-input\r\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n value={this.date}\r\n label={this.label}\r\n inside-label\r\n readonly\r\n disabled={this.disabled}\r\n inputClass=\"text-center\"\r\n onClick={() => this.openMenu()}\r\n >\r\n <sd-icon\r\n slot=\"prefix\"\r\n name=\"date\"\r\n size=\"16\"\r\n color=\"#737373\"\r\n class=\"date-icon\"\r\n onClick={() => this.openMenu()}\r\n ></sd-icon>\r\n </sd-input>\r\n\r\n {this.isOpen && (\r\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n <div class=\"sd-date-picker__menu\">\r\n <div class=\"sd-date-picker__header\">\r\n {/* Year Navigation */}\r\n <div class=\"year-nav\">\r\n <button\r\n type=\"button\"\r\n name=\"prev-year\"\r\n title=\"Previous Year\"\r\n onClick={() => this.setCurrentYear(this.currentYear - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n <span class=\"year-nav__current\">{this.currentYear}</span>\r\n <button\r\n type=\"button\"\r\n name=\"next-year\"\r\n title=\"Next Year\"\r\n onClick={() => this.setCurrentYear(this.currentYear + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n\r\n {/* Month Navigation */}\r\n <div class=\"month-nav\">\r\n <button\r\n type=\"button\"\r\n name=\"prev-month\"\r\n title=\"Previous \"\r\n onClick={() => this.handleUpdateMonth('prev')}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n <span class=\"month-nav__current\">{this.currentMonth}월</span>\r\n <button\r\n type=\"button\"\r\n name=\"next-month\"\r\n title=\"Next Month\"\r\n onClick={() => this.handleUpdateMonth('next')}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sd-date-picker__days\">\r\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n <div key={day} class=\"day\">\r\n {day}\r\n </div>\r\n ))}\r\n </div>\r\n\r\n <div class=\"sd-date-picker__body\">\r\n {[\r\n ...this.calendar.prevMonthDays,\r\n ...this.calendar.days,\r\n ...this.calendar.afterMonthDays,\r\n ].map((day, idx) => {\r\n const formattedDate = this.dateUtil.formatDate(\r\n this.currentYear,\r\n this.currentMonth,\r\n Number(day),\r\n );\r\n\r\n return (\r\n <sd-date-box\r\n key={`${day}_${idx}`}\r\n date={!day ? '' : Number(day)}\r\n selected={this.currentDate === formattedDate}\r\n isToday={today === formattedDate}\r\n disabled={!day ? true : this.isDisabledDate(formattedDate)}\r\n onClick={\r\n !this.isDisabledDate(formattedDate) && day\r\n ? () => this.handleDateClick(Number(day))\r\n : undefined\r\n }\r\n />\r\n );\r\n })}\r\n </div>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host } from './p-
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, c as Host, t as transformTag } from './p-CQBrru3e.js';
|
|
2
2
|
import { u as useDatePicker, t as today } from './p-QZbqqKSO.js';
|
|
3
|
-
import { d as defineCustomElement$5 } from './p-
|
|
4
|
-
import { d as defineCustomElement$4 } from './p-
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$5 } from './p-BwSVYr5L.js';
|
|
4
|
+
import { d as defineCustomElement$4 } from './p-CV5tKC24.js';
|
|
5
|
+
import { d as defineCustomElement$3 } from './p-DY9yCaP9.js';
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-BBNolp5g.js';
|
|
7
7
|
|
|
8
8
|
const addDays = (inputDate, days) => {
|
|
9
9
|
const [year, month, day] = inputDate.split('-').map(Number);
|
|
@@ -17,7 +17,7 @@ const addDays = (inputDate, days) => {
|
|
|
17
17
|
return `${resultYear}-${resultMonth}-${resultDay}`;
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const sdDateRangePickerCss =
|
|
20
|
+
const sdDateRangePickerCss = () => `.sd-date-range-picker.sc-sd-date-range-picker-h{width:210px;display:inline-block}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#d8d8d8}`;
|
|
21
21
|
|
|
22
22
|
const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePicker extends H {
|
|
23
23
|
constructor(registerHost) {
|
|
@@ -162,9 +162,9 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
|
|
|
162
162
|
this.isOpen = false;
|
|
163
163
|
};
|
|
164
164
|
render() {
|
|
165
|
-
return (h(Host, { key: '
|
|
165
|
+
return (h(Host, { key: 'a6053b18e510d72345d3fc8622a34e2e916ae09a', class: "sd-date-range-picker" }, h("sd-input", { key: '32a1c3e8c6f56a8c88ea5731d7aba8612918a412', 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: {
|
|
166
166
|
margin: '0 0 0 8px',
|
|
167
|
-
}, onClick: () => this.openMenu() }, h("sd-icon", { key: '
|
|
167
|
+
}, onClick: () => this.openMenu() }, h("sd-icon", { key: 'c1e7d9c3a3becc4f8cd09a4a1034788d75b71b43', slot: "prefix", name: "date", size: "16", color: "#737373", class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'ac35b85f5ec3fdf6f89929e1d0ce16c61de5a24d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'f9ede52633306262d3d1f53fe98c0ed71d2760c3', class: "sd-date-range-picker__menu" }, h("div", { key: '46b75bb25b1c11b2a5c9d95998a6b8a909d271e2', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'f194f5c67019c933934526591834305cf2a33587', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '43e8213a6bee3dcd9f2045f7ebb404da8a904a8a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '2b585ec3a4d0f2ed2e1ae4f3a49a4b511f076ba9', class: "header-label" }, this.prevYear), h("button", { key: 'c97c6694b39f0a8979e90dbbca49615efcdde694', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: 'b64856f508e653a676a6bc3c7dfc4d1ecb87149a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'd983671d652eca108580817d3c1181676985bec7', 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
|
|
168
168
|
? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
|
|
169
169
|
: `${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 ===
|
|
170
170
|
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 ===
|
|
@@ -172,7 +172,7 @@ const SdDateRangePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdDateRangePi
|
|
|
172
172
|
? true
|
|
173
173
|
: this.isDisabledDate(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), inRange: this.isDateInRange(this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, Number(day))), onClick: () => this.handleDateClick(index === 0 ? 'prev' : 'next', Number(day)), onMouseOver: () => this.handleDateHover(index === 0 ? 'prev' : 'next', Number(day)) }))))))))))))));
|
|
174
174
|
}
|
|
175
|
-
static get style() { return sdDateRangePickerCss; }
|
|
175
|
+
static get style() { return sdDateRangePickerCss(); }
|
|
176
176
|
}, [770, "sd-date-range-picker", {
|
|
177
177
|
"date": [16],
|
|
178
178
|
"label": [1],
|
|
@@ -192,27 +192,27 @@ function defineCustomElement$1() {
|
|
|
192
192
|
const components = ["sd-date-range-picker", "sd-date-box", "sd-icon", "sd-input", "sd-portal"];
|
|
193
193
|
components.forEach(tagName => { switch (tagName) {
|
|
194
194
|
case "sd-date-range-picker":
|
|
195
|
-
if (!customElements.get(tagName)) {
|
|
196
|
-
customElements.define(tagName, SdDateRangePicker$1);
|
|
195
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
196
|
+
customElements.define(transformTag(tagName), SdDateRangePicker$1);
|
|
197
197
|
}
|
|
198
198
|
break;
|
|
199
199
|
case "sd-date-box":
|
|
200
|
-
if (!customElements.get(tagName)) {
|
|
200
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
201
201
|
defineCustomElement$5();
|
|
202
202
|
}
|
|
203
203
|
break;
|
|
204
204
|
case "sd-icon":
|
|
205
|
-
if (!customElements.get(tagName)) {
|
|
205
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
206
206
|
defineCustomElement$4();
|
|
207
207
|
}
|
|
208
208
|
break;
|
|
209
209
|
case "sd-input":
|
|
210
|
-
if (!customElements.get(tagName)) {
|
|
210
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
211
211
|
defineCustomElement$3();
|
|
212
212
|
}
|
|
213
213
|
break;
|
|
214
214
|
case "sd-portal":
|
|
215
|
-
if (!customElements.get(tagName)) {
|
|
215
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
216
216
|
defineCustomElement$2();
|
|
217
217
|
}
|
|
218
218
|
break;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"sd-date-range-picker.js","mappings":"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","names":["SdDateRangePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/date/addDays.ts","src/components/sd-date-range-picker/sd-date-range-picker.scss?tag=sd-date-range-picker&encapsulation=scoped","src/components/sd-date-range-picker/sd-date-range-picker.tsx"],"sourcesContent":["export const addDays = (inputDate: string, days: number) => {\r\n const [year, month, day] = inputDate.split('-').map(Number);\r\n const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1\r\n\r\n // 날짜 계산\r\n date.setDate(date.getDate() + days);\r\n\r\n // yyyy-mm-dd 형식으로 변환\r\n const resultYear = date.getFullYear();\r\n const resultMonth = String(date.getMonth() + 1).padStart(2, '0');\r\n const resultDay = String(date.getDate()).padStart(2, '0');\r\n\r\n return `${resultYear}-${resultMonth}-${resultDay}`;\r\n};\r\n","@import 'variables';\r\n\r\n:host {\r\n &.sd-date-range-picker {\r\n width: 210px;\r\n display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-range-picker__menu {\r\n width: 609px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-range-picker__header {\r\n margin-bottom: 16px;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .header-label {\r\n margin: 0 12px;\r\n width: 40px;\r\n text-align: center;\r\n font-size: 14px;\r\n line-height: 24px;\r\n }\r\n }\r\n .sd-date-range-picker__body {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: stretch;\r\n gap: 19px;\r\n .calendar-container {\r\n width: 266px;\r\n\r\n .calendar-header {\r\n width: 100%;\r\n height: 24px;\r\n line-height: 24px;\r\n font-size: 14px;\r\n text-align: center;\r\n position: relative;\r\n padding: 0 5px;\r\n\r\n button {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n\r\n &.header-button-prev {\r\n left: 5px;\r\n }\r\n\r\n &.header-button-next {\r\n right: 5px;\r\n left: auto;\r\n }\r\n }\r\n }\r\n\r\n .calendar-days {\r\n padding: 0 5px;\r\n margin-top: 8px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n column-gap: 10px;\r\n\r\n .day {\r\n width: 28px;\r\n height: 20px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: center;\r\n color: $grey_65;\r\n }\r\n }\r\n\r\n .calendar-body {\r\n margin-top: 12px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n }\r\n .separator {\r\n width: 1px;\r\n background-color: $grey_35;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n h,\r\n EventEmitter,\r\n Host,\r\n Fragment,\r\n} from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { addDays, today } from '../../utils/date';\r\nimport { Type } from '../sd-date-box/sd-date-box';\r\n\r\n@Component({\r\n tag: 'sd-date-range-picker',\r\n styleUrl: 'sd-date-range-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDateRangePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: [string, string] = ['', ''];\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() maxRange?: number;\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() dateRange: [string, string] = this.date;\r\n @State() hoverDate: string = '';\r\n @State() prevYear: number = Number(this.dateRange[0].split('-')[0]);\r\n @State() prevMonth: number = Number(this.dateRange[0].split('-')[1]);\r\n\r\n @Event() sdChange!: EventEmitter<[string, string]>;\r\n\r\n private inputEl?: HTMLElement;\r\n private dateUtil = useDatePicker();\r\n private tempDateRange: [string, string] = ['', ''];\r\n\r\n componentWillLoad() {\r\n this.resetCalendarByDateRange();\r\n }\r\n\r\n private resetCalendarByDateRange() {\r\n this.dateRange = this.date;\r\n\r\n const start = this.dateRange[0] || today;\r\n const end = this.dateRange[1] || start;\r\n\r\n const [startYear, startMonth] = start.split('-').map(Number);\r\n const [todayYear, todayMonth] = today.split('-').map(Number);\r\n\r\n if (end <= today) {\r\n // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월\r\n this.prevYear = startYear;\r\n this.prevMonth = startMonth;\r\n } else if (start < today && end > today) {\r\n // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달\r\n this.prevYear = todayYear;\r\n this.prevMonth = todayMonth;\r\n } else {\r\n // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월\r\n this.prevYear = startYear;\r\n this.prevMonth = startMonth;\r\n }\r\n }\r\n\r\n private openMenu() {\r\n if (this.disabled) return;\r\n\r\n this.tempDateRange = [...this.dateRange];\r\n this.resetCalendarByDateRange();\r\n this.isOpen = true;\r\n }\r\n\r\n private get nextYear(): number {\r\n return this.prevMonth + 1 === 13 ? this.prevYear + 1 : this.prevYear;\r\n }\r\n\r\n private get nextMonth(): number {\r\n return this.prevMonth + 1 === 13 ? 1 : this.prevMonth + 1;\r\n }\r\n\r\n private get prevCalendar() {\r\n return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);\r\n }\r\n\r\n private get nextCalendar() {\r\n return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);\r\n }\r\n\r\n private getDateBoxType(date: string): Type {\r\n if (date === this.dateRange[0])\r\n return this.dateRange[1] ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';\r\n if (date === this.dateRange[1]) return 'end';\r\n return '';\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n if (this.maxRange && this.dateRange[0] && !this.dateRange[1]) {\r\n const minDate = addDays(this.dateRange[0], -this.maxRange);\r\n const maxDate = addDays(this.dateRange[0], this.maxRange);\r\n return !(minDate <= date && date <= maxDate);\r\n }\r\n\r\n if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {\r\n return false;\r\n }\r\n return !(date >= this.selectable[0] && date <= this.selectable[1]);\r\n }\r\n\r\n private isDateInRange(date: string): boolean {\r\n // 1. 날짜 범위가 완전히 선택된 경우\r\n if (this.dateRange[0] && this.dateRange[1]) {\r\n return date >= this.dateRange[0] && date <= this.dateRange[1];\r\n }\r\n\r\n // 2. hover 상태의 날짜 범위를 확인\r\n if (!this.hoverDate || !this.dateRange[0] || this.dateRange[1]) {\r\n return false;\r\n }\r\n\r\n // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산\r\n const [start, end] =\r\n this.dateRange[0] <= this.hoverDate\r\n ? [this.dateRange[0], this.hoverDate]\r\n : [this.hoverDate, this.dateRange[0]];\r\n\r\n return date >= start && date <= end;\r\n }\r\n\r\n private setPrevYear(year: number) {\r\n this.prevYear = year;\r\n }\r\n\r\n private setPrevMonth(month: number) {\r\n this.prevMonth = month;\r\n }\r\n\r\n private updateYearMonth(type: 'prev' | 'next') {\r\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n this.prevYear,\r\n this.prevMonth,\r\n type,\r\n );\r\n\r\n this.setPrevYear(newYear);\r\n this.setPrevMonth(newMonth);\r\n }\r\n\r\n private setHoverDate(date: string) {\r\n this.hoverDate = date;\r\n }\r\n\r\n private setDateRange(dateRange: [string, string]) {\r\n this.dateRange = dateRange;\r\n }\r\n\r\n private handleDateClick(type: 'prev' | 'next', day: number) {\r\n this.setHoverDate('');\r\n\r\n const selectedDate =\r\n type === 'prev'\r\n ? this.dateUtil.formatDate(this.prevYear, this.prevMonth, day)\r\n : this.dateUtil.formatDate(this.nextYear, this.nextMonth, day);\r\n\r\n if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {\r\n this.setDateRange([selectedDate, '']);\r\n return; // 아직 완료 아님\r\n }\r\n\r\n const newRange: [string, string] = [this.dateRange[0], selectedDate];\r\n this.setDateRange(newRange);\r\n this.sdChange.emit?.(newRange);\r\n }\r\n\r\n private handleDateHover(type: 'prev' | 'next', day: number) {\r\n const hoverDate =\r\n type === 'prev'\r\n ? this.dateUtil.formatDate(this.prevYear, this.prevMonth, day)\r\n : this.dateUtil.formatDate(this.nextYear, this.nextMonth, day);\r\n this.setHoverDate(hoverDate);\r\n }\r\n\r\n private handleClose = () => {\r\n if (!this.dateRange[0] || !this.dateRange[1]) {\r\n this.dateRange = [...this.tempDateRange];\r\n }\r\n\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class=\"sd-date-range-picker\">\r\n <sd-input\r\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n value={`${this.dateRange[0]} ~ ${this.dateRange[1]}`}\r\n label={this.label}\r\n inside-label\r\n readonly\r\n disabled={this.disabled}\r\n inputClass=\"text-center\"\r\n inputStyle={{\r\n margin: '0 0 0 8px',\r\n }}\r\n onClick={() => this.openMenu()}\r\n >\r\n <sd-icon\r\n slot=\"prefix\"\r\n name=\"date\"\r\n size=\"16\"\r\n color=\"#737373\"\r\n class=\"date-icon\"\r\n onClick={() => this.openMenu()}\r\n ></sd-icon>\r\n </sd-input>\r\n\r\n {this.isOpen && (\r\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n <div class=\"sd-date-range-picker__menu\">\r\n <div class=\"sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center\">\r\n <button\r\n type=\"button\"\r\n name=\"prev\"\r\n title=\"Previous\"\r\n onClick={() => this.setPrevYear(this.prevYear - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n\r\n <div class=\"header-label\">{this.prevYear}</div>\r\n\r\n <button\r\n type=\"button\"\r\n name=\"next\"\r\n title=\"Next\"\r\n onClick={() => this.setPrevYear(this.prevYear + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n\r\n <div class=\"sd-date-range-picker__body\">\r\n {[this.prevCalendar, this.nextCalendar].map((calendar, index) => (\r\n <Fragment>\r\n {index === 1 && <div class=\"separator\"></div>}\r\n\r\n <div key={index} class=\"calendar-container\">\r\n <div class=\"calendar-header\">\r\n <button\r\n type=\"button\"\r\n name=\"month\"\r\n title=\"Month\"\r\n class={index === 0 ? 'header-button-prev' : 'header-button-next'}\r\n onClick={() => this.updateYearMonth(index === 0 ? 'prev' : 'next')}\r\n >\r\n <sd-icon name={index === 0 ? 'arrowLeft' : 'arrowRight'} size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n {index === 0\r\n ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`\r\n : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`}\r\n </div>\r\n\r\n <div class=\"calendar-days\">\r\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n <sd-date-box key={day} date={day} disabled class=\"day\" />\r\n ))}\r\n </div>\r\n\r\n <div class=\"calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr\">\r\n {[...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map(\r\n (day, idx) => (\r\n <sd-date-box\r\n key={`prev${day}_${idx}`}\r\n date={!day ? '' : Number(day)}\r\n selected={this.dateRange.some(\r\n date =>\r\n date ===\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n type={this.getDateBoxType(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n isToday={\r\n today ===\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n )\r\n }\r\n disabled={\r\n !day\r\n ? true\r\n : this.isDisabledDate(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )\r\n }\r\n inRange={this.isDateInRange(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n onClick={() => this.handleDateClick(index === 0 ? 'prev' : 'next', Number(day))}\r\n onMouseOver={() => this.handleDateHover(index === 0 ? 'prev' : 'next', Number(day))}\r\n />\r\n ),\r\n )}\r\n </div>\r\n </div>\r\n </Fragment>\r\n ))}\r\n </div>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"sd-date-range-picker.js","mappings":"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","names":["SdDateRangePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/date/addDays.ts","src/components/sd-date-range-picker/sd-date-range-picker.scss?tag=sd-date-range-picker&encapsulation=scoped","src/components/sd-date-range-picker/sd-date-range-picker.tsx"],"sourcesContent":["export const addDays = (inputDate: string, days: number) => {\r\n const [year, month, day] = inputDate.split('-').map(Number);\r\n const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1\r\n\r\n // 날짜 계산\r\n date.setDate(date.getDate() + days);\r\n\r\n // yyyy-mm-dd 형식으로 변환\r\n const resultYear = date.getFullYear();\r\n const resultMonth = String(date.getMonth() + 1).padStart(2, '0');\r\n const resultDay = String(date.getDate()).padStart(2, '0');\r\n\r\n return `${resultYear}-${resultMonth}-${resultDay}`;\r\n};\r\n","@import 'variables';\r\n\r\n:host {\r\n &.sd-date-range-picker {\r\n width: 210px;\r\n display: inline-block;\r\n }\r\n}\r\n\r\n.sd-date-range-picker__menu {\r\n width: 609px;\r\n box-sizing: border-box;\r\n border-radius: 8px;\r\n padding: 24px 19px;\r\n box-shadow: 2px 2px 12px 2px #00000033;\r\n background: white;\r\n\r\n .sd-date-range-picker__header {\r\n margin-bottom: 16px;\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .header-label {\r\n margin: 0 12px;\r\n width: 40px;\r\n text-align: center;\r\n font-size: 14px;\r\n line-height: 24px;\r\n }\r\n }\r\n .sd-date-range-picker__body {\r\n display: flex;\r\n flex-flow: row nowrap;\r\n align-items: stretch;\r\n gap: 19px;\r\n .calendar-container {\r\n width: 266px;\r\n\r\n .calendar-header {\r\n width: 100%;\r\n height: 24px;\r\n line-height: 24px;\r\n font-size: 14px;\r\n text-align: center;\r\n position: relative;\r\n padding: 0 5px;\r\n\r\n button {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n\r\n &.header-button-prev {\r\n left: 5px;\r\n }\r\n\r\n &.header-button-next {\r\n right: 5px;\r\n left: auto;\r\n }\r\n }\r\n }\r\n\r\n .calendar-days {\r\n padding: 0 5px;\r\n margin-top: 8px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n column-gap: 10px;\r\n\r\n .day {\r\n width: 28px;\r\n height: 20px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: center;\r\n color: $grey_65;\r\n }\r\n }\r\n\r\n .calendar-body {\r\n margin-top: 12px;\r\n display: grid;\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n }\r\n .separator {\r\n width: 1px;\r\n background-color: $grey_35;\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n h,\r\n EventEmitter,\r\n Host,\r\n Fragment,\r\n} from '@stencil/core';\r\nimport { useDatePicker } from '../../modules/useDatePicker';\r\nimport { addDays, today } from '../../utils/date';\r\nimport { Type } from '../sd-date-box/sd-date-box';\r\n\r\n@Component({\r\n tag: 'sd-date-range-picker',\r\n styleUrl: 'sd-date-range-picker.scss',\r\n scoped: true,\r\n})\r\nexport class SdDateRangePicker {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() date: [string, string] = ['', ''];\r\n @Prop() label?: string;\r\n @Prop() selectable?: [string, string];\r\n @Prop() maxRange?: number;\r\n @Prop() disabled: boolean = false;\r\n\r\n @State() isOpen: boolean = false;\r\n @State() dateRange: [string, string] = this.date;\r\n @State() hoverDate: string = '';\r\n @State() prevYear: number = Number(this.dateRange[0].split('-')[0]);\r\n @State() prevMonth: number = Number(this.dateRange[0].split('-')[1]);\r\n\r\n @Event() sdChange!: EventEmitter<[string, string]>;\r\n\r\n private inputEl?: HTMLElement;\r\n private dateUtil = useDatePicker();\r\n private tempDateRange: [string, string] = ['', ''];\r\n\r\n componentWillLoad() {\r\n this.resetCalendarByDateRange();\r\n }\r\n\r\n private resetCalendarByDateRange() {\r\n this.dateRange = this.date;\r\n\r\n const start = this.dateRange[0] || today;\r\n const end = this.dateRange[1] || start;\r\n\r\n const [startYear, startMonth] = start.split('-').map(Number);\r\n const [todayYear, todayMonth] = today.split('-').map(Number);\r\n\r\n if (end <= today) {\r\n // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월\r\n this.prevYear = startYear;\r\n this.prevMonth = startMonth;\r\n } else if (start < today && end > today) {\r\n // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달\r\n this.prevYear = todayYear;\r\n this.prevMonth = todayMonth;\r\n } else {\r\n // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월\r\n this.prevYear = startYear;\r\n this.prevMonth = startMonth;\r\n }\r\n }\r\n\r\n private openMenu() {\r\n if (this.disabled) return;\r\n\r\n this.tempDateRange = [...this.dateRange];\r\n this.resetCalendarByDateRange();\r\n this.isOpen = true;\r\n }\r\n\r\n private get nextYear(): number {\r\n return this.prevMonth + 1 === 13 ? this.prevYear + 1 : this.prevYear;\r\n }\r\n\r\n private get nextMonth(): number {\r\n return this.prevMonth + 1 === 13 ? 1 : this.prevMonth + 1;\r\n }\r\n\r\n private get prevCalendar() {\r\n return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);\r\n }\r\n\r\n private get nextCalendar() {\r\n return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);\r\n }\r\n\r\n private getDateBoxType(date: string): Type {\r\n if (date === this.dateRange[0])\r\n return this.dateRange[1] ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';\r\n if (date === this.dateRange[1]) return 'end';\r\n return '';\r\n }\r\n\r\n private isDisabledDate(date: string): boolean {\r\n if (this.maxRange && this.dateRange[0] && !this.dateRange[1]) {\r\n const minDate = addDays(this.dateRange[0], -this.maxRange);\r\n const maxDate = addDays(this.dateRange[0], this.maxRange);\r\n return !(minDate <= date && date <= maxDate);\r\n }\r\n\r\n if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {\r\n return false;\r\n }\r\n return !(date >= this.selectable[0] && date <= this.selectable[1]);\r\n }\r\n\r\n private isDateInRange(date: string): boolean {\r\n // 1. 날짜 범위가 완전히 선택된 경우\r\n if (this.dateRange[0] && this.dateRange[1]) {\r\n return date >= this.dateRange[0] && date <= this.dateRange[1];\r\n }\r\n\r\n // 2. hover 상태의 날짜 범위를 확인\r\n if (!this.hoverDate || !this.dateRange[0] || this.dateRange[1]) {\r\n return false;\r\n }\r\n\r\n // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산\r\n const [start, end] =\r\n this.dateRange[0] <= this.hoverDate\r\n ? [this.dateRange[0], this.hoverDate]\r\n : [this.hoverDate, this.dateRange[0]];\r\n\r\n return date >= start && date <= end;\r\n }\r\n\r\n private setPrevYear(year: number) {\r\n this.prevYear = year;\r\n }\r\n\r\n private setPrevMonth(month: number) {\r\n this.prevMonth = month;\r\n }\r\n\r\n private updateYearMonth(type: 'prev' | 'next') {\r\n const { newYear, newMonth } = this.dateUtil.calculateYearMonth(\r\n this.prevYear,\r\n this.prevMonth,\r\n type,\r\n );\r\n\r\n this.setPrevYear(newYear);\r\n this.setPrevMonth(newMonth);\r\n }\r\n\r\n private setHoverDate(date: string) {\r\n this.hoverDate = date;\r\n }\r\n\r\n private setDateRange(dateRange: [string, string]) {\r\n this.dateRange = dateRange;\r\n }\r\n\r\n private handleDateClick(type: 'prev' | 'next', day: number) {\r\n this.setHoverDate('');\r\n\r\n const selectedDate =\r\n type === 'prev'\r\n ? this.dateUtil.formatDate(this.prevYear, this.prevMonth, day)\r\n : this.dateUtil.formatDate(this.nextYear, this.nextMonth, day);\r\n\r\n if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {\r\n this.setDateRange([selectedDate, '']);\r\n return; // 아직 완료 아님\r\n }\r\n\r\n const newRange: [string, string] = [this.dateRange[0], selectedDate];\r\n this.setDateRange(newRange);\r\n this.sdChange.emit?.(newRange);\r\n }\r\n\r\n private handleDateHover(type: 'prev' | 'next', day: number) {\r\n const hoverDate =\r\n type === 'prev'\r\n ? this.dateUtil.formatDate(this.prevYear, this.prevMonth, day)\r\n : this.dateUtil.formatDate(this.nextYear, this.nextMonth, day);\r\n this.setHoverDate(hoverDate);\r\n }\r\n\r\n private handleClose = () => {\r\n if (!this.dateRange[0] || !this.dateRange[1]) {\r\n this.dateRange = [...this.tempDateRange];\r\n }\r\n\r\n this.isOpen = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class=\"sd-date-range-picker\">\r\n <sd-input\r\n ref={el => (this.inputEl = el as unknown as HTMLElement)}\r\n value={`${this.dateRange[0]} ~ ${this.dateRange[1]}`}\r\n label={this.label}\r\n inside-label\r\n readonly\r\n disabled={this.disabled}\r\n inputClass=\"text-center\"\r\n inputStyle={{\r\n margin: '0 0 0 8px',\r\n }}\r\n onClick={() => this.openMenu()}\r\n >\r\n <sd-icon\r\n slot=\"prefix\"\r\n name=\"date\"\r\n size=\"16\"\r\n color=\"#737373\"\r\n class=\"date-icon\"\r\n onClick={() => this.openMenu()}\r\n ></sd-icon>\r\n </sd-input>\r\n\r\n {this.isOpen && (\r\n <sd-portal open={this.isOpen} parentRef={this.inputEl} onSdClose={this.handleClose}>\r\n <div class=\"sd-date-range-picker__menu\">\r\n <div class=\"sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center\">\r\n <button\r\n type=\"button\"\r\n name=\"prev\"\r\n title=\"Previous\"\r\n onClick={() => this.setPrevYear(this.prevYear - 1)}\r\n >\r\n <sd-icon name=\"arrowLeft\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n\r\n <div class=\"header-label\">{this.prevYear}</div>\r\n\r\n <button\r\n type=\"button\"\r\n name=\"next\"\r\n title=\"Next\"\r\n onClick={() => this.setPrevYear(this.prevYear + 1)}\r\n >\r\n <sd-icon name=\"arrowRight\" size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n </div>\r\n\r\n <div class=\"sd-date-range-picker__body\">\r\n {[this.prevCalendar, this.nextCalendar].map((calendar, index) => (\r\n <Fragment>\r\n {index === 1 && <div class=\"separator\"></div>}\r\n\r\n <div key={index} class=\"calendar-container\">\r\n <div class=\"calendar-header\">\r\n <button\r\n type=\"button\"\r\n name=\"month\"\r\n title=\"Month\"\r\n class={index === 0 ? 'header-button-prev' : 'header-button-next'}\r\n onClick={() => this.updateYearMonth(index === 0 ? 'prev' : 'next')}\r\n >\r\n <sd-icon name={index === 0 ? 'arrowLeft' : 'arrowRight'} size=\"12\" color=\"#CCCCCC\" />\r\n </button>\r\n {index === 0\r\n ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`\r\n : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`}\r\n </div>\r\n\r\n <div class=\"calendar-days\">\r\n {['일', '월', '화', '수', '목', '금', '토'].map(day => (\r\n <sd-date-box key={day} date={day} disabled class=\"day\" />\r\n ))}\r\n </div>\r\n\r\n <div class=\"calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr\">\r\n {[...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map(\r\n (day, idx) => (\r\n <sd-date-box\r\n key={`prev${day}_${idx}`}\r\n date={!day ? '' : Number(day)}\r\n selected={this.dateRange.some(\r\n date =>\r\n date ===\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n type={this.getDateBoxType(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n isToday={\r\n today ===\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n )\r\n }\r\n disabled={\r\n !day\r\n ? true\r\n : this.isDisabledDate(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )\r\n }\r\n inRange={this.isDateInRange(\r\n this.dateUtil.formatDate(\r\n index === 0 ? this.prevYear : this.nextYear,\r\n index === 0 ? this.prevMonth : this.nextMonth,\r\n Number(day),\r\n ),\r\n )}\r\n onClick={() => this.handleDateClick(index === 0 ? 'prev' : 'next', Number(day))}\r\n onMouseOver={() => this.handleDateHover(index === 0 ? 'prev' : 'next', Number(day))}\r\n />\r\n ),\r\n )}\r\n </div>\r\n </div>\r\n </Fragment>\r\n ))}\r\n </div>\r\n </div>\r\n </sd-portal>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface SdFilePicker extends Components.SdFilePicker, HTMLElement {}
|
|
4
|
+
export const SdFilePicker: {
|
|
5
|
+
prototype: SdFilePicker;
|
|
6
|
+
new (): SdFilePicker;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
|
|
2
|
+
import { d as defineCustomElement$2 } from './p-CV5tKC24.js';
|
|
3
|
+
|
|
4
|
+
const sdFilePickerCss = () => `.sd-file-picker{display:inline-flex;align-items:center;max-width:var(--picker-width, 100%);height:28px;gap:8px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;background-color:#ffffff;cursor:pointer;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;font-size:12px;line-height:20px;color:#aaaaaa}.sd-file-picker__text--active{color:#222222}.sd-file-picker__text--placeholder{color:#aaaaaa}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#f6f6f6}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled){background-color:#ffffff}.sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text{color:#222222}.sd-file-picker--disabled:not(.sd-file-picker--inline){background-color:#eeeeee;border-color:#cccccc}.sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text{color:#888888}.sd-file-picker--inline{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:#aaaaaa}.sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text{color:#737373}.sd-file-picker--inline.sd-file-picker--active:not(.sd-file-picker--disabled) .sd-file-picker__text--active{color:#222222}.sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text{color:#cccccc}`;
|
|
5
|
+
|
|
6
|
+
const SdFilePicker$1 = /*@__PURE__*/ proxyCustomElement(class SdFilePicker extends H {
|
|
7
|
+
constructor(registerHost) {
|
|
8
|
+
super();
|
|
9
|
+
if (registerHost !== false) {
|
|
10
|
+
this.__registerHost();
|
|
11
|
+
}
|
|
12
|
+
this.sdChange = createEvent(this, "sdChange");
|
|
13
|
+
}
|
|
14
|
+
get el() { return this; }
|
|
15
|
+
value = null;
|
|
16
|
+
placeholder = 'Click to upload';
|
|
17
|
+
disabled = false;
|
|
18
|
+
inline = false;
|
|
19
|
+
multiple = false;
|
|
20
|
+
accept;
|
|
21
|
+
width;
|
|
22
|
+
internalValue = null;
|
|
23
|
+
hovered = false;
|
|
24
|
+
showTooltip = false;
|
|
25
|
+
fileInputRef;
|
|
26
|
+
fileNamesRef;
|
|
27
|
+
sdChange;
|
|
28
|
+
valueChanged(newValue) {
|
|
29
|
+
this.internalValue = newValue;
|
|
30
|
+
}
|
|
31
|
+
componentDidLoad() {
|
|
32
|
+
this.checkOverflow();
|
|
33
|
+
}
|
|
34
|
+
componentDidUpdate() {
|
|
35
|
+
this.checkOverflow();
|
|
36
|
+
}
|
|
37
|
+
handleFileChange = (event) => {
|
|
38
|
+
const input = event.target;
|
|
39
|
+
const files = input.files;
|
|
40
|
+
if (!files || files.length === 0) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
const fileArray = Array.from(files);
|
|
44
|
+
if (this.multiple) {
|
|
45
|
+
this.internalValue = fileArray;
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
this.internalValue = fileArray[0];
|
|
49
|
+
}
|
|
50
|
+
this.value = this.internalValue;
|
|
51
|
+
this.sdChange?.emit(this.value);
|
|
52
|
+
};
|
|
53
|
+
handleClear = (event) => {
|
|
54
|
+
event.stopPropagation();
|
|
55
|
+
const clearedValue = this.multiple ? [] : null;
|
|
56
|
+
this.value = clearedValue;
|
|
57
|
+
this.internalValue = clearedValue;
|
|
58
|
+
this.sdChange?.emit(clearedValue);
|
|
59
|
+
if (this.fileInputRef) {
|
|
60
|
+
this.fileInputRef.value = '';
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
handleClick = () => {
|
|
64
|
+
if (this.disabled)
|
|
65
|
+
return;
|
|
66
|
+
this.fileInputRef?.click();
|
|
67
|
+
};
|
|
68
|
+
getStatusClass() {
|
|
69
|
+
if (this.disabled)
|
|
70
|
+
return 'sd-file-picker--disabled';
|
|
71
|
+
if (this.hasFiles())
|
|
72
|
+
return 'sd-file-picker--active';
|
|
73
|
+
return '';
|
|
74
|
+
}
|
|
75
|
+
hasFiles() {
|
|
76
|
+
if (!this.internalValue)
|
|
77
|
+
return false;
|
|
78
|
+
if (Array.isArray(this.internalValue)) {
|
|
79
|
+
return this.internalValue.length > 0;
|
|
80
|
+
}
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
getDisplayText() {
|
|
84
|
+
if (!this.hasFiles())
|
|
85
|
+
return this.placeholder;
|
|
86
|
+
if (Array.isArray(this.internalValue)) {
|
|
87
|
+
return this.internalValue.map(f => f.name).join(', ');
|
|
88
|
+
}
|
|
89
|
+
return this.internalValue?.name || this.placeholder;
|
|
90
|
+
}
|
|
91
|
+
checkOverflow() {
|
|
92
|
+
if (!this.fileNamesRef)
|
|
93
|
+
return;
|
|
94
|
+
const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;
|
|
95
|
+
this.showTooltip = isOverflowing;
|
|
96
|
+
}
|
|
97
|
+
getIconColor() {
|
|
98
|
+
if (this.disabled) {
|
|
99
|
+
return this.inline ? 'grey_45' : 'grey_55';
|
|
100
|
+
}
|
|
101
|
+
return 'grey_70';
|
|
102
|
+
}
|
|
103
|
+
render() {
|
|
104
|
+
const hasFiles = this.hasFiles();
|
|
105
|
+
const displayText = this.getDisplayText();
|
|
106
|
+
return (h("div", { key: 'bfa4054517dcf1ef728a2354927bc40c177274ce', class: {
|
|
107
|
+
'sd-file-picker': true,
|
|
108
|
+
[this.getStatusClass()]: true,
|
|
109
|
+
'sd-file-picker--inline': this.inline,
|
|
110
|
+
}, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: 'b2f2e730b30c58641615d1216633ee20a67ee6c1', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange }), h("sd-icon", { key: '08b4bbcc3bb757a7a8e3dee3a416b202c7e86f66', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'cba9e6fb17a6a9c5de479e0ccdc6a3de7c23a615', ref: el => (this.fileNamesRef = el), class: {
|
|
111
|
+
'sd-file-picker__text': true,
|
|
112
|
+
'sd-file-picker__text--placeholder': !hasFiles,
|
|
113
|
+
'sd-file-picker__text--active': hasFiles,
|
|
114
|
+
} }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'eb3c02cb001168d82eac1a3e2855e1cfcc6b960e', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '8f09fe54f7f77453eac07f60942401d83955fc0b', class: "sd-file-picker__tooltip" }, displayText))));
|
|
115
|
+
}
|
|
116
|
+
static get watchers() { return {
|
|
117
|
+
"value": ["valueChanged"]
|
|
118
|
+
}; }
|
|
119
|
+
static get style() { return sdFilePickerCss(); }
|
|
120
|
+
}, [768, "sd-file-picker", {
|
|
121
|
+
"value": [1040],
|
|
122
|
+
"placeholder": [1],
|
|
123
|
+
"disabled": [4],
|
|
124
|
+
"inline": [4],
|
|
125
|
+
"multiple": [4],
|
|
126
|
+
"accept": [1],
|
|
127
|
+
"width": [8],
|
|
128
|
+
"internalValue": [32],
|
|
129
|
+
"hovered": [32],
|
|
130
|
+
"showTooltip": [32]
|
|
131
|
+
}, undefined, {
|
|
132
|
+
"value": ["valueChanged"]
|
|
133
|
+
}]);
|
|
134
|
+
function defineCustomElement$1() {
|
|
135
|
+
if (typeof customElements === "undefined") {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
const components = ["sd-file-picker", "sd-icon"];
|
|
139
|
+
components.forEach(tagName => { switch (tagName) {
|
|
140
|
+
case "sd-file-picker":
|
|
141
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
142
|
+
customElements.define(transformTag(tagName), SdFilePicker$1);
|
|
143
|
+
}
|
|
144
|
+
break;
|
|
145
|
+
case "sd-icon":
|
|
146
|
+
if (!customElements.get(transformTag(tagName))) {
|
|
147
|
+
defineCustomElement$2();
|
|
148
|
+
}
|
|
149
|
+
break;
|
|
150
|
+
} });
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
const SdFilePicker = SdFilePicker$1;
|
|
154
|
+
const defineCustomElement = defineCustomElement$1;
|
|
155
|
+
|
|
156
|
+
export { SdFilePicker, defineCustomElement };
|
|
157
|
+
//# sourceMappingURL=sd-file-picker.js.map
|
|
158
|
+
|
|
159
|
+
//# sourceMappingURL=sd-file-picker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"sd-file-picker.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,46DAA46D,CAAC;;MCgB/7DA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAGC,KAAK,GAA0B,IAAI;IACpD,WAAW,GAAW,iBAAiB;IACvC,QAAQ,GAAY,KAAK;IACzB,MAAM,GAAY,KAAK;IACvB,QAAQ,GAAY,KAAK;AACzB,IAAA,MAAM;AACN,IAAA,KAAK;IAEI,aAAa,GAAyB,IAAI;IAC1C,OAAO,GAAY,KAAK;IACxB,WAAW,GAAY,KAAK;AAErC,IAAA,YAAY;AACZ,IAAA,YAAY;AAEX,IAAA,QAAQ;AAGjB,IAAA,YAAY,CAAC,QAA8B,EAAA;AAC1C,QAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;IAG9B,gBAAgB,GAAA;QACf,IAAI,CAAC,aAAa,EAAE;;IAGrB,kBAAkB,GAAA;QACjB,IAAI,CAAC,aAAa,EAAE;;AAGb,IAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC3C,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK;QAEzB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YACjC;;QAGD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AAEnC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,aAAa,GAAG,SAAS;;aACxB;AACN,YAAA,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC;;AAElC,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa;QAC/B,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,KAAY,KAAI;QACtC,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,IAAI;AAC9C,QAAA,IAAI,CAAC,KAAK,GAAG,YAAY;AACzB,QAAA,IAAI,CAAC,aAAa,GAAG,YAAY;AACjC,QAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;AAEjC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE;;AAE9B,KAAC;IAEO,WAAW,GAAG,MAAK;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE;AAC3B,KAAC;IAEO,cAAc,GAAA;QACrB,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,0BAA0B;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,OAAO,wBAAwB;AACpD,QAAA,OAAO,EAAE;;IAGF,QAAQ,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,KAAK;QACrC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;AACtC,YAAA,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;;AAErC,QAAA,OAAO,IAAI;;IAGJ,cAAc,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO,IAAI,CAAC,WAAW;QAE7C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;AACtC,YAAA,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;QAGtD,OAAO,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,IAAI,CAAC,WAAW;;IAG5C,aAAa,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE;AACxB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW;AACnF,QAAA,IAAI,CAAC,WAAW,GAAG,aAAa;;IAGzB,YAAY,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS;;AAE3C,QAAA,OAAO,SAAS;;IAGjB,MAAM,GAAA;AACL,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;AAChC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE;QAEzC,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI;gBAC7B,wBAAwB,EAAE,IAAI,CAAC,MAAM;AACrC,aAAA,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,YAAY,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACzC,YAAY,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EAAA,EAE1C,CACC,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACvD,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC7B,CAAA,EAEF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,KAAK,EAAC,sBAAsB,EAAG,CAAA,EAEhG,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAiB,CAAC,EAClD,KAAK,EAAE;AACN,gBAAA,sBAAsB,EAAE,IAAI;gBAC5B,mCAAmC,EAAE,CAAC,QAAQ;AAC9C,gBAAA,8BAA8B,EAAE,QAAQ;AACxC,aAAA,EAAA,EAEA,WAAW,CACP,EAEL,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAC1B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,GACxB,CACF,EAEA,IAAI,CAAC,WAAW,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,KAC5C,4DAAK,KAAK,EAAC,yBAAyB,EAAE,EAAA,WAAW,CAAO,CACxD,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdFilePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-file-picker/sd-file-picker.scss?tag=sd-file-picker","src/components/sd-file-picker/sd-file-picker.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-file-picker {\r\n display: inline-flex;\r\n align-items: center;\r\n max-width: var(--picker-width, 100%);\r\n height: 28px;\r\n gap: 8px;\r\n padding: 4px 8px;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: $white;\r\n cursor: pointer;\r\n user-select: none;\r\n position: relative;\r\n vertical-align: middle;\r\n\r\n &__text {\r\n flex: 1;\r\n min-width: 0;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n font-weight: 400;\r\n font-size: 12px;\r\n line-height: 20px;\r\n color: $grey_55;\r\n\r\n &--active {\r\n color: $grey_95;\r\n }\r\n\r\n &--placeholder {\r\n color: $grey_55;\r\n }\r\n }\r\n\r\n &__icon {\r\n flex-shrink: 0;\r\n }\r\n\r\n &__clear-icon {\r\n flex-shrink: 0;\r\n cursor: pointer;\r\n transition: opacity 0.2s ease;\r\n\r\n &:hover {\r\n opacity: 0.7;\r\n }\r\n }\r\n\r\n &__input {\r\n display: none;\r\n }\r\n\r\n &__tooltip {\r\n position: absolute;\r\n top: calc(100% - 4px);\r\n left: 50%;\r\n transform: translate(-50%);\r\n z-index: 1000;\r\n white-space: nowrap;\r\n padding: 8px 12px;\r\n background: rgba(0, 0, 0, 0.8);\r\n color: white;\r\n font-size: 12px;\r\n line-height: 18px;\r\n border-radius: 4px;\r\n pointer-events: none;\r\n }\r\n\r\n &:hover:not(&--inline):not(&--disabled) {\r\n background-color: $grey_10;\r\n }\r\n\r\n &--active:not(&--inline):not(&--disabled) {\r\n background-color: $white;\r\n\r\n .sd-file-picker__text {\r\n color: $grey_95;\r\n }\r\n }\r\n\r\n &--disabled:not(&--inline) {\r\n background-color: $grey_20;\r\n border-color: $grey_45;\r\n\r\n .sd-file-picker__text {\r\n color: $grey_65;\r\n }\r\n }\r\n\r\n &--inline {\r\n border: none;\r\n background-color: transparent;\r\n padding: 0;\r\n height: auto;\r\n\r\n .sd-file-picker__text {\r\n color: $grey_55;\r\n }\r\n\r\n &:hover:not(.sd-file-picker--disabled) {\r\n .sd-file-picker__text {\r\n color: $grey_70;\r\n }\r\n }\r\n\r\n &.sd-file-picker--active:not(.sd-file-picker--disabled) {\r\n .sd-file-picker__text--active {\r\n color: $grey_95;\r\n }\r\n }\r\n\r\n &.sd-file-picker--disabled {\r\n\r\n .sd-file-picker__text {\r\n color: $grey_45;\r\n }\r\n\r\n }\r\n }\r\n}","import {\r\n ComponentInterface,\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n EventEmitter,\r\n Watch,\r\n h,\r\n} from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-file-picker',\r\n styleUrl: 'sd-file-picker.scss',\r\n})\r\nexport class SdFilePicker implements ComponentInterface {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop({ mutable: true }) value?: File[] | File | null = null;\r\n @Prop() placeholder: string = 'Click to upload';\r\n @Prop() disabled: boolean = false;\r\n @Prop() inline: boolean = false;\r\n @Prop() multiple: boolean = false;\r\n @Prop() accept?: string;\r\n @Prop() width?: number | string;\r\n\r\n @State() private internalValue: File[] | File | null = null;\r\n @State() private hovered: boolean = false;\r\n @State() private showTooltip: boolean = false;\r\n\r\n private fileInputRef?: HTMLInputElement;\r\n private fileNamesRef?: HTMLElement;\r\n\r\n @Event() sdChange!: EventEmitter<File[] | File | null>;\r\n\r\n @Watch('value')\r\n valueChanged(newValue: File[] | File | null) {\r\n this.internalValue = newValue;\r\n }\r\n\r\n componentDidLoad() {\r\n this.checkOverflow();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.checkOverflow();\r\n }\r\n\r\n private handleFileChange = (event: Event) => {\r\n const input = event.target as HTMLInputElement;\r\n const files = input.files;\r\n\r\n if (!files || files.length === 0) {\r\n return;\r\n }\r\n\r\n const fileArray = Array.from(files);\r\n\r\n if (this.multiple) {\r\n this.internalValue = fileArray;\r\n } else {\r\n this.internalValue = fileArray[0];\r\n }\r\n this.value = this.internalValue;\r\n this.sdChange?.emit(this.value);\r\n };\r\n\r\n private handleClear = (event: Event) => {\r\n event.stopPropagation();\r\n const clearedValue = this.multiple ? [] : null;\r\n this.value = clearedValue;\r\n this.internalValue = clearedValue\r\n this.sdChange?.emit(clearedValue);\r\n\r\n if (this.fileInputRef) {\r\n this.fileInputRef.value = '';\r\n }\r\n };\r\n\r\n private handleClick = () => {\r\n if (this.disabled) return;\r\n this.fileInputRef?.click();\r\n };\r\n\r\n private getStatusClass(): string {\r\n if (this.disabled) return 'sd-file-picker--disabled';\r\n if (this.hasFiles()) return 'sd-file-picker--active';\r\n return '';\r\n }\r\n\r\n private hasFiles(): boolean {\r\n if (!this.internalValue) return false;\r\n if (Array.isArray(this.internalValue)) {\r\n return this.internalValue.length > 0;\r\n }\r\n return true;\r\n }\r\n\r\n private getDisplayText(): string {\r\n if (!this.hasFiles()) return this.placeholder;\r\n\r\n if (Array.isArray(this.internalValue)) {\r\n return this.internalValue.map(f => f.name).join(', ');\r\n }\r\n\r\n return this.internalValue?.name || this.placeholder;\r\n }\r\n\r\n private checkOverflow() {\r\n if (!this.fileNamesRef) return;\r\n const isOverflowing = this.fileNamesRef.scrollWidth > this.fileNamesRef.clientWidth;\r\n this.showTooltip = isOverflowing;\r\n }\r\n\r\n private getIconColor(): string {\r\n if (this.disabled) {\r\n return this.inline ? 'grey_45' : 'grey_55';\r\n }\r\n return 'grey_70';\r\n }\r\n\r\n render() {\r\n const hasFiles = this.hasFiles();\r\n const displayText = this.getDisplayText();\r\n\r\n return (\r\n <div\r\n class={{\r\n 'sd-file-picker': true,\r\n [this.getStatusClass()]: true,\r\n 'sd-file-picker--inline': this.inline,\r\n }}\r\n onClick={this.handleClick}\r\n onMouseEnter={() => (this.hovered = true)}\r\n onMouseLeave={() => (this.hovered = false)}\r\n >\r\n <input\r\n ref={el => (this.fileInputRef = el as HTMLInputElement)}\r\n type=\"file\"\r\n class=\"sd-file-picker__input\"\r\n disabled={this.disabled}\r\n multiple={this.multiple}\r\n accept={this.accept}\r\n onInput={this.handleFileChange}\r\n />\r\n\r\n <sd-icon name=\"attachFile\" size={16} color={this.getIconColor()} class=\"sd-file-picker__icon\" />\r\n\r\n <div\r\n ref={el => (this.fileNamesRef = el as HTMLElement)}\r\n class={{\r\n 'sd-file-picker__text': true,\r\n 'sd-file-picker__text--placeholder': !hasFiles,\r\n 'sd-file-picker__text--active': hasFiles,\r\n }}\r\n >\r\n {displayText}\r\n </div>\r\n\r\n {!this.disabled && hasFiles && (\r\n <sd-icon\r\n name=\"close\"\r\n size={12}\r\n color=\"#888888\"\r\n class=\"sd-file-picker__clear-icon\"\r\n onClick={this.handleClear}\r\n />\r\n )}\r\n\r\n {this.showTooltip && hasFiles && this.hovered && (\r\n <div class=\"sd-file-picker__tooltip\">{displayText}</div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|