@sellmate/design-system 0.0.24 → 0.0.26
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 +2 -2
- package/dist/cjs/{index-BjPOPvqs.js → index-DXo1Fhkn.js} +3 -3
- package/dist/cjs/index-DXo1Fhkn.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/{esm/color-CgyTlXBV.js → cjs/resolveColor-DxvExwgo.js} +17 -4
- package/dist/{esm/resolveColor-CswQ9y2Q.js.map → cjs/resolveColor-DxvExwgo.js.map} +1 -1
- package/dist/cjs/sd-badge.cjs.entry.js +3 -4
- package/dist/cjs/sd-badge.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -0
- package/dist/cjs/{sd-checkbox_9.cjs.entry.js → sd-button_12.cjs.entry.js} +739 -817
- package/dist/cjs/sd-card.cjs.entry.js +2 -2
- package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
- package/dist/cjs/sd-date-picker.cjs.entry.js +3 -3
- package/dist/cjs/sd-date-range-picker.cjs.entry.js +3 -3
- package/dist/cjs/sd-popover.cjs.entry.js +4 -4
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +380 -0
- package/dist/cjs/sd-select-multiple-group.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-select-multiple.cjs.entry.js +263 -0
- package/dist/cjs/sd-select-multiple.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-select-option-group.cjs.entry.js +69 -0
- package/dist/cjs/sd-select-option-group.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-tag.cjs.entry.js +2 -2
- package/dist/cjs/select-keyboard-navigation-6fO_V4En.js +119 -0
- package/dist/cjs/select-keyboard-navigation-6fO_V4En.js.map +1 -0
- package/dist/cjs/{tooltipArrow-qwvq153k.js → tooltipArrow-DNiGFQNW.js} +3 -3
- package/dist/cjs/{tooltipArrow-qwvq153k.js.map → tooltipArrow-DNiGFQNW.js.map} +1 -1
- 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 +2 -2
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +2 -2
- package/dist/collection/components/sd-guide/sd-guide.css +6 -1
- package/dist/collection/components/sd-guide/sd-guide.js +4 -4
- package/dist/collection/components/sd-guide/sd-guide.js.map +1 -1
- package/dist/collection/components/sd-icon/sd-icon.js +1 -1
- package/dist/collection/components/sd-input/sd-input.js +2 -2
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -3
- package/dist/collection/components/sd-pagination/sd-pagination.js.map +1 -1
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +25 -4
- package/dist/collection/components/sd-portal/sd-portal.js.map +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.css +0 -6
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.css +0 -6
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css +0 -6
- 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.css +7 -1316
- package/dist/collection/components/sd-table/sd-table.js +70 -5
- package/dist/collection/components/sd-table/sd-table.js.map +1 -1
- package/dist/collection/components/sd-tag/sd-tag.js +1 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.css +67 -1
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +4 -5
- package/dist/collection/components/sd-tooltip/sd-tooltip.js.map +1 -1
- package/dist/collection/components/sd-tooltip-portal/sd-tooltip-portal.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-Bl-wgv-z.js → p-B9QE7fbR.js} +6 -6
- package/dist/components/{p-Bl-wgv-z.js.map → p-B9QE7fbR.js.map} +1 -1
- package/dist/components/{p-CZG8wDBH.js → p-BWF8FOjZ.js} +4 -4
- package/dist/components/{p-CZG8wDBH.js.map → p-BWF8FOjZ.js.map} +1 -1
- package/dist/components/{p-Cxrr7vOk.js → p-BhRUodRD.js} +13 -14
- package/dist/components/p-BhRUodRD.js.map +1 -0
- package/dist/components/{p-nehvpX7w.js → p-BtS3tSh2.js} +4 -4
- package/dist/components/{p-nehvpX7w.js.map → p-BtS3tSh2.js.map} +1 -1
- package/dist/components/{p-DpiRZxT1.js → p-BttJlXkp.js} +6 -6
- package/dist/components/{p-DpiRZxT1.js.map → p-BttJlXkp.js.map} +1 -1
- package/dist/components/{p-Bfro0I6y.js → p-BvuTaRpn.js} +3 -3
- package/dist/components/{p-Bfro0I6y.js.map → p-BvuTaRpn.js.map} +1 -1
- package/dist/components/{p-DNUN6dGL.js → p-CMFEznYN.js} +7 -8
- package/dist/components/p-CMFEznYN.js.map +1 -0
- package/dist/components/{p-e74imoE0.js → p-Cafw-qR4.js} +3 -3
- package/dist/components/{p-e74imoE0.js.map → p-Cafw-qR4.js.map} +1 -1
- package/dist/components/{p-DzRr3BEe.js → p-CbnL1UUF.js} +3 -3
- package/dist/components/p-CbnL1UUF.js.map +1 -0
- package/dist/components/p-CkHD07WH.js +323 -0
- package/dist/components/p-CkHD07WH.js.map +1 -0
- package/dist/components/{p-BqIcTSCQ.js → p-Cs1Kf3Tx.js} +4 -4
- package/dist/components/{p-BqIcTSCQ.js.map → p-Cs1Kf3Tx.js.map} +1 -1
- package/dist/components/{p-aU8C4Pcb.js → p-DWYqZdbI.js} +8 -8
- package/dist/components/{p-aU8C4Pcb.js.map → p-DWYqZdbI.js.map} +1 -1
- package/dist/components/{p-CbTvFUCY.js → p-DtOWZESA.js} +28 -7
- package/dist/components/p-DtOWZESA.js.map +1 -0
- package/dist/components/{p-QBJzxOWs.js → p-hf6YF2Mx.js} +4 -4
- package/dist/components/{p-QBJzxOWs.js.map → p-hf6YF2Mx.js.map} +1 -1
- package/dist/components/{p-BvOGkIDI.js → p-wA4KCOG0.js} +3 -3
- package/dist/components/{p-BvOGkIDI.js.map → p-wA4KCOG0.js.map} +1 -1
- package/dist/components/sd-badge.js +2 -2
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-card.js +2 -2
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-date-box.js +1 -1
- package/dist/components/sd-date-picker.js +7 -7
- package/dist/components/sd-date-range-picker.js +7 -7
- package/dist/components/sd-guide.js +9 -9
- package/dist/components/sd-guide.js.map +1 -1
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +7 -7
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-select-multiple-group.js +8 -8
- package/dist/components/sd-select-multiple-group.js.map +1 -1
- package/dist/components/sd-select-multiple.js +10 -10
- 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 -318
- package/dist/components/sd-select.js.map +1 -1
- package/dist/components/sd-table.js +64 -17
- package/dist/components/sd-table.js.map +1 -1
- package/dist/components/sd-tag.js +2 -2
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.css +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-054ae376.entry.js +2 -0
- package/dist/design-system/p-054ae376.entry.js.map +1 -0
- package/dist/design-system/{p-b537f724.entry.js → p-12134716.entry.js} +2 -2
- package/dist/design-system/p-12b6c1a5.entry.js +2 -0
- package/dist/design-system/p-12b6c1a5.entry.js.map +1 -0
- package/dist/design-system/p-3d9fccae.entry.js +2 -0
- package/dist/design-system/p-3d9fccae.entry.js.map +1 -0
- package/dist/design-system/{p-691dc436.entry.js → p-871c8d66.entry.js} +2 -2
- package/dist/design-system/p-9975f6f3.entry.js +2 -0
- package/dist/design-system/p-9975f6f3.entry.js.map +1 -0
- package/dist/design-system/{p-CqOU6L62.js → p-B2T3tS5r.js} +3 -3
- package/dist/design-system/p-B2T3tS5r.js.map +1 -0
- package/dist/design-system/p-BE6EMCXm.js +2 -0
- package/dist/design-system/{p-BUzABVug.js.map → p-BE6EMCXm.js.map} +1 -1
- package/dist/design-system/{p-CgyTlXBV.js → p-BYf-ybt2.js} +2 -2
- package/dist/design-system/{p-BoLmB6pG.js.map → p-BYf-ybt2.js.map} +1 -1
- package/dist/design-system/p-C2JaR3A6.js +2 -0
- package/dist/design-system/p-C2JaR3A6.js.map +1 -0
- package/dist/design-system/{p-2aef624e.entry.js → p-a7ab1b43.entry.js} +2 -2
- package/dist/design-system/p-af3a1dbb.entry.js +2 -0
- package/dist/design-system/p-d1aa75e7.entry.js +2 -0
- package/dist/design-system/p-e061c4f8.entry.js +2 -0
- package/dist/design-system/p-e061c4f8.entry.js.map +1 -0
- package/dist/design-system/{p-c4f5ed94.entry.js → p-e25d96e4.entry.js} +2 -2
- package/dist/design-system/sd-badge.entry.esm.js.map +1 -1
- package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -0
- package/dist/design-system/sd-select-multiple-group.entry.esm.js.map +1 -0
- package/dist/design-system/sd-select-multiple.entry.esm.js.map +1 -0
- package/dist/design-system/sd-select-option-group.entry.esm.js.map +1 -0
- package/dist/esm/design-system.js +3 -3
- package/dist/esm/{index-CqOU6L62.js → index-B2T3tS5r.js} +3 -3
- package/dist/esm/index-B2T3tS5r.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/{cjs/color-Oz29vj7L.js → esm/resolveColor-BYf-ybt2.js} +14 -6
- package/dist/{cjs/resolveColor-CauSLF0s.js.map → esm/resolveColor-BYf-ybt2.js.map} +1 -1
- package/dist/esm/sd-badge.entry.js +3 -4
- package/dist/esm/sd-badge.entry.js.map +1 -1
- package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.js.map +1 -0
- package/dist/esm/{sd-checkbox_9.entry.js → sd-button_12.entry.js} +732 -813
- package/dist/esm/sd-card.entry.js +2 -2
- package/dist/esm/sd-date-box.entry.js +1 -1
- package/dist/esm/sd-date-picker.entry.js +3 -3
- package/dist/esm/sd-date-range-picker.entry.js +3 -3
- package/dist/esm/sd-popover.entry.js +4 -4
- package/dist/esm/sd-select-multiple-group.entry.js +378 -0
- package/dist/esm/sd-select-multiple-group.entry.js.map +1 -0
- package/dist/esm/sd-select-multiple.entry.js +261 -0
- package/dist/esm/sd-select-multiple.entry.js.map +1 -0
- package/dist/esm/sd-select-option-group.entry.js +67 -0
- package/dist/esm/sd-select-option-group.entry.js.map +1 -0
- package/dist/esm/sd-tag.entry.js +2 -2
- package/dist/esm/select-keyboard-navigation-C2JaR3A6.js +116 -0
- package/dist/esm/select-keyboard-navigation-C2JaR3A6.js.map +1 -0
- package/dist/esm/{tooltipArrow-hOEWkZyH.js → tooltipArrow-Pa2XQhpp.js} +3 -3
- package/dist/esm/{tooltipArrow-hOEWkZyH.js.map → tooltipArrow-Pa2XQhpp.js.map} +1 -1
- package/dist/types/components/sd-table/sd-table.d.ts +3 -0
- package/dist/types/components.d.ts +16 -0
- package/hydrate/index.js +90 -46
- package/hydrate/index.mjs +90 -46
- package/package.json +2 -2
- package/dist/cjs/color-Oz29vj7L.js.map +0 -1
- package/dist/cjs/index-BjPOPvqs.js.map +0 -1
- package/dist/cjs/resolveColor-CauSLF0s.js +0 -18
- package/dist/cjs/sd-button.sd-tooltip-portal.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-button_2.cjs.entry.js +0 -221
- package/dist/cjs/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-guide.cjs.entry.js +0 -84
- package/dist/cjs/sd-guide.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-pagination.sd-tooltip.entry.cjs.js.map +0 -1
- package/dist/cjs/sd-pagination_2.cjs.entry.js +0 -168
- package/dist/cjs/sd-table.cjs.entry.js +0 -237
- package/dist/cjs/sd-table.entry.cjs.js.map +0 -1
- package/dist/components/p-CbTvFUCY.js.map +0 -1
- package/dist/components/p-Cxrr7vOk.js.map +0 -1
- package/dist/components/p-DNUN6dGL.js.map +0 -1
- package/dist/components/p-DzRr3BEe.js.map +0 -1
- package/dist/design-system/p-158f9392.entry.js +0 -2
- package/dist/design-system/p-158f9392.entry.js.map +0 -1
- package/dist/design-system/p-37042d15.entry.js +0 -2
- package/dist/design-system/p-37042d15.entry.js.map +0 -1
- package/dist/design-system/p-949de8eb.entry.js +0 -2
- package/dist/design-system/p-949de8eb.entry.js.map +0 -1
- package/dist/design-system/p-9f5eed30.entry.js +0 -2
- package/dist/design-system/p-BUzABVug.js +0 -2
- package/dist/design-system/p-BoLmB6pG.js +0 -2
- package/dist/design-system/p-CgyTlXBV.js.map +0 -1
- package/dist/design-system/p-CqOU6L62.js.map +0 -1
- package/dist/design-system/p-adee3154.entry.js +0 -2
- package/dist/design-system/p-adee3154.entry.js.map +0 -1
- package/dist/design-system/p-bda05b6f.entry.js +0 -2
- package/dist/design-system/p-bda05b6f.entry.js.map +0 -1
- package/dist/design-system/p-f015c024.entry.js +0 -2
- package/dist/design-system/p-f6a1ff99.entry.js +0 -2
- package/dist/design-system/p-f6a1ff99.entry.js.map +0 -1
- package/dist/design-system/sd-button.sd-tooltip-portal.entry.esm.js.map +0 -1
- package/dist/design-system/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.esm.js.map +0 -1
- package/dist/design-system/sd-guide.entry.esm.js.map +0 -1
- package/dist/design-system/sd-pagination.sd-tooltip.entry.esm.js.map +0 -1
- package/dist/design-system/sd-table.entry.esm.js.map +0 -1
- package/dist/esm/color-CgyTlXBV.js.map +0 -1
- package/dist/esm/index-CqOU6L62.js.map +0 -1
- package/dist/esm/resolveColor-CswQ9y2Q.js +0 -16
- package/dist/esm/sd-button.sd-tooltip-portal.entry.js.map +0 -1
- package/dist/esm/sd-button_2.entry.js +0 -218
- package/dist/esm/sd-checkbox.sd-icon.sd-input.sd-portal.sd-select.sd-select-multiple.sd-select-multiple-group.sd-select-option.sd-select-option-group.entry.js.map +0 -1
- package/dist/esm/sd-guide.entry.js +0 -82
- package/dist/esm/sd-guide.entry.js.map +0 -1
- package/dist/esm/sd-pagination.sd-tooltip.entry.js.map +0 -1
- package/dist/esm/sd-pagination_2.entry.js +0 -165
- package/dist/esm/sd-table.entry.js +0 -235
- package/dist/esm/sd-table.entry.js.map +0 -1
- /package/dist/design-system/{p-b537f724.entry.js.map → p-12134716.entry.js.map} +0 -0
- /package/dist/design-system/{p-691dc436.entry.js.map → p-871c8d66.entry.js.map} +0 -0
- /package/dist/design-system/{p-2aef624e.entry.js.map → p-a7ab1b43.entry.js.map} +0 -0
- /package/dist/design-system/{p-f015c024.entry.js.map → p-af3a1dbb.entry.js.map} +0 -0
- /package/dist/design-system/{p-9f5eed30.entry.js.map → p-d1aa75e7.entry.js.map} +0 -0
- /package/dist/design-system/{p-c4f5ed94.entry.js.map → p-e25d96e4.entry.js.map} +0 -0
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var color = require('./color-Oz29vj7L.js');
|
|
4
|
-
|
|
5
|
-
const colors = color.colors;
|
|
6
|
-
// 주어진 문자열이 color.json의 키이면 매핑된 HEX를 반환하고,
|
|
7
|
-
// 아닐 경우 원문 그대로를 반환합니다. 값이 falsy면 기본 색상으로 대체합니다.
|
|
8
|
-
function resolveColor(input, fallback = '#025497') {
|
|
9
|
-
if (!input)
|
|
10
|
-
return fallback;
|
|
11
|
-
const mapped = colors[input];
|
|
12
|
-
return mapped || input;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
exports.resolveColor = resolveColor;
|
|
16
|
-
//# sourceMappingURL=resolveColor-CauSLF0s.js.map
|
|
17
|
-
|
|
18
|
-
//# sourceMappingURL=resolveColor-CauSLF0s.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sd-button.sd-tooltip-portal.entry.cjs.js","sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx","src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["@import 'variables';\r\n\r\n.sd-button {\r\n text-decoration: none;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n position: relative;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n box-sizing: border-box;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n &--xs {\r\n padding: 0 8px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n min-height: 24px;\r\n }\r\n &--sm {\r\n padding: 0 12px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n min-height: 28px;\r\n }\r\n &--md {\r\n padding: 0 20px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 26px;\r\n min-height: 34px;\r\n }\r\n &--lg {\r\n padding: 0 28px;\r\n font-size: 18px;\r\n font-weight: 500;\r\n line-height: 30px;\r\n min-height: 62px;\r\n }\r\n &--primary {\r\n background-color: var(--button-color);\r\n color: white;\r\n transition: filter 0.2s ease;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: #000000;\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.25;\r\n }\r\n }\r\n\r\n &--outline {\r\n background: white;\r\n border: 1px solid var(--button-color);\r\n color: var(--button-color);\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--button-color);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.15;\r\n }\r\n\r\n .sd-button__content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n }\r\n &--ghost {\r\n background-color: transparent;\r\n color: var(--button-color);\r\n border-color: transparent;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--button-color);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n z-index: 0;\r\n }\r\n\r\n &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\r\n opacity: 0.15;\r\n }\r\n\r\n .sd-button__content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n }\r\n &--disabled {\r\n border: 1px solid $grey_45;\r\n background: $grey_30;\r\n color: $grey_65;\r\n cursor: not-allowed !important;\r\n }\r\n &--icon-only {\r\n padding: 0;\r\n width: fit-content;\r\n height: fit-content;\r\n aspect-ratio: 1 / 1;\r\n }\r\n &--no-hover {\r\n &:hover::before {\r\n opacity: 0 !important;\r\n }\r\n }\r\n\r\n .sd-button__content {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n\r\n z-index: 1;\r\n font-weight: 500;\r\n }\r\n}\r\n\r\n// /* Focus styles */\r\n// .sd-button:focus-visible {\r\n// outline: 2px solid $primary;\r\n// outline-offset: 2px;\r\n// }\r\n\r\n// /* High contrast mode support */\r\n// @media (prefers-contrast: high) {\r\n// .sd-button {\r\n// border-width: 2px;\r\n// }\r\n// }\r\n","import { Component, Prop, h, Element, Event, EventEmitter, Host } from '@stencil/core';\r\nimport { resolveColor } from '../../utils/color';\r\n\r\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\r\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\r\n\r\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\r\n xs: 12,\r\n sm: 16,\r\n md: 20,\r\n lg: 24,\r\n};\r\n\r\n@Component({\r\n tag: 'sd-button',\r\n styleUrl: 'sd-button.scss',\r\n})\r\nexport class SdButton {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() variant?: ButtonVariant = 'primary';\r\n @Prop() size: ButtonSize = 'sm';\r\n @Prop() color: string = '#025497';\r\n @Prop() label: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n @Prop() icon?: IconName;\r\n @Prop() iconColor?: string;\r\n @Prop() iconSize?: number;\r\n @Prop() iconRight?: IconName;\r\n @Prop() noHover: boolean = false;\r\n @Prop() class: string = '';\r\n @Event() sdClick!: EventEmitter<MouseEvent>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n return;\r\n }\r\n this.sdClick.emit(event);\r\n };\r\n\r\n private getButtonClasses(): string {\r\n const classes = ['sd-button'];\r\n\r\n classes.push(`sd-button--${this.variant}`);\r\n classes.push(`sd-button--${this.size}`);\r\n classes.push(`sd-button--color-${this.color}`);\r\n\r\n if (this.disabled) {\r\n classes.push('sd-button--disabled');\r\n }\r\n\r\n if (!this.label && (this.icon || this.iconRight)) {\r\n classes.push('sd-button--icon-only');\r\n }\r\n\r\n if (this.noHover) {\r\n classes.push('sd-button--no-hover');\r\n }\r\n\r\n return classes.join(' ');\r\n }\r\n\r\n render() {\r\n const buttonClasses = this.getButtonClasses();\r\n // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\r\n const resolvedColor = resolveColor(this.color);\r\n\r\n return (\r\n <Host style={{ '--button-color': resolvedColor }}>\r\n <button\r\n class={`${buttonClasses} ${this.class}`}\r\n type={this.type}\r\n disabled={this.disabled}\r\n onClick={this.handleClick}\r\n >\r\n <div class=\"sd-button__content\">\r\n {this.icon && (\r\n <sd-icon\r\n class=\"sd-button__icon sd-button__icon--left\"\r\n name={this.icon}\r\n size={this.iconSize ? this.iconSize : ICON_SIZES[this.size!]}\r\n color={\r\n this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor\r\n }\r\n ></sd-icon>\r\n )}\r\n\r\n {this.label && <div class=\"sd-button__label\">{this.label}</div>}\r\n\r\n {this.iconRight && (\r\n <sd-icon\r\n class=\"sd-button__icon sd-button__icon--right\"\r\n name={this.iconRight}\r\n size={ICON_SIZES[this.size!]}\r\n color={this.variant === 'primary' ? '#fff' : resolvedColor}\r\n ></sd-icon>\r\n )}\r\n </div>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tooltip-portal',\r\n shadow: true,\r\n})\r\nexport class SdTooltipPortal {\r\n @Element() el!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 0];\r\n @Prop() zIndex: number = 9999;\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\r\n @Prop() open: boolean = false;\r\n\r\n @Event() sdClose!: EventEmitter<void>;\r\n\r\n private container?: HTMLElement;\r\n private wrapper?: HTMLElement;\r\n private rafId?: number;\r\n private isInsideClick = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n private mutationObserver?: MutationObserver;\r\n\r\n private static readonly ARROW_SIZE = 11.2;\r\n\r\n componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n\r\n // DOM이 완전히 렌더링된 후 위치 계산\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\r\n }\r\n });\r\n\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n\r\n // this.wrapper.style.display = this.open ? 'block' : 'none';\r\n // if (this.open) this.updatePosition();\r\n\r\n if (this.open) {\r\n this.wrapper.style.display = 'block';\r\n // RAF를 사용해서 다음 프레임에 위치 업데이트\r\n requestAnimationFrame(() => {\r\n this.updatePosition();\r\n if (this.wrapper) {\r\n this.wrapper.style.visibility = 'visible';\r\n }\r\n });\r\n } else {\r\n this.wrapper.style.display = 'none';\r\n this.wrapper.style.visibility = 'hidden';\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n this.unobserveParent();\r\n this.wrapper?.remove();\r\n }\r\n\r\n private resolveContainer(): HTMLElement {\r\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\r\n return el instanceof HTMLElement ? el : document.body;\r\n }\r\n\r\n private createWrapper() {\r\n this.wrapper = document.createElement('div');\r\n Object.assign(this.wrapper.style, {\r\n position: 'absolute',\r\n zIndex: this.zIndex.toString(),\r\n transition: 'opacity 0.4s',\r\n top: '-9999px',\r\n left: '-9999px',\r\n });\r\n this.container!.appendChild(this.wrapper);\r\n }\r\n\r\n private moveSlotContent() {\r\n if (!this.wrapper) return;\r\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\r\n nodes.forEach(n => this.wrapper!.appendChild(n));\r\n }\r\n\r\n // 위치 갱신 (scroll / resize)\r\n @Listen('scroll', { target: 'window' })\r\n @Listen('resize', { target: 'window' })\r\n updatePosition() {\r\n if (this.rafId) cancelAnimationFrame(this.rafId);\r\n\r\n this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const rect = this.parentRef.getBoundingClientRect();\r\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\r\n\r\n const [offsetX, offsetY] = this.offset;\r\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\r\n\r\n let top = 0;\r\n let left = 0;\r\n\r\n switch (this.placement) {\r\n case 'top':\r\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'bottom':\r\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\r\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\r\n break;\r\n\r\n case 'left':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\r\n break;\r\n\r\n case 'right':\r\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\r\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\r\n break;\r\n }\r\n\r\n Object.assign(this.wrapper!.style, {\r\n top: `${top}px`,\r\n left: `${left}px`,\r\n });\r\n });\r\n }\r\n\r\n // parentRef의 이동 / 크기변경 감지\r\n private observeParent() {\r\n if (!this.parentRef) return;\r\n\r\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\r\n this.resizeObserver.observe(this.parentRef);\r\n\r\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\r\n this.mutationObserver.observe(document.body, {\r\n childList: true,\r\n subtree: true,\r\n });\r\n }\r\n\r\n private unobserveParent() {\r\n this.resizeObserver?.disconnect();\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n // 외부 클릭 감지\r\n @Listen('mousedown', { target: 'window' })\r\n handleMouseDown(e: MouseEvent) {\r\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleWindowClick(e: MouseEvent) {\r\n if (this.isInsideClick) {\r\n this.isInsideClick = false;\r\n return;\r\n }\r\n if (this.wrapper?.contains(e.target as Node)) return;\r\n this.sdClose.emit();\r\n }\r\n\r\n render() {\r\n return <slot></slot>;\r\n }\r\n}\r\n"],"names":["resolveColor","h","Host"],"mappings":"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"}
|
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var index = require('./index-BjPOPvqs.js');
|
|
4
|
-
var resolveColor = require('./resolveColor-CauSLF0s.js');
|
|
5
|
-
require('./color-Oz29vj7L.js');
|
|
6
|
-
|
|
7
|
-
const sdButtonCss = ".sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:\"\";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:\"\";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}";
|
|
8
|
-
|
|
9
|
-
const ICON_SIZES = {
|
|
10
|
-
xs: 12,
|
|
11
|
-
sm: 16,
|
|
12
|
-
md: 20,
|
|
13
|
-
lg: 24,
|
|
14
|
-
};
|
|
15
|
-
const SdButton = class {
|
|
16
|
-
constructor(hostRef) {
|
|
17
|
-
index.registerInstance(this, hostRef);
|
|
18
|
-
this.sdClick = index.createEvent(this, "sdClick");
|
|
19
|
-
}
|
|
20
|
-
get el() { return index.getElement(this); }
|
|
21
|
-
variant = 'primary';
|
|
22
|
-
size = 'sm';
|
|
23
|
-
color = '#025497';
|
|
24
|
-
label = '';
|
|
25
|
-
disabled = false;
|
|
26
|
-
type = 'button';
|
|
27
|
-
icon;
|
|
28
|
-
iconColor;
|
|
29
|
-
iconSize;
|
|
30
|
-
iconRight;
|
|
31
|
-
noHover = false;
|
|
32
|
-
class = '';
|
|
33
|
-
sdClick;
|
|
34
|
-
handleClick = (event) => {
|
|
35
|
-
if (this.disabled) {
|
|
36
|
-
event.preventDefault();
|
|
37
|
-
event.stopPropagation();
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
this.sdClick.emit(event);
|
|
41
|
-
};
|
|
42
|
-
getButtonClasses() {
|
|
43
|
-
const classes = ['sd-button'];
|
|
44
|
-
classes.push(`sd-button--${this.variant}`);
|
|
45
|
-
classes.push(`sd-button--${this.size}`);
|
|
46
|
-
classes.push(`sd-button--color-${this.color}`);
|
|
47
|
-
if (this.disabled) {
|
|
48
|
-
classes.push('sd-button--disabled');
|
|
49
|
-
}
|
|
50
|
-
if (!this.label && (this.icon || this.iconRight)) {
|
|
51
|
-
classes.push('sd-button--icon-only');
|
|
52
|
-
}
|
|
53
|
-
if (this.noHover) {
|
|
54
|
-
classes.push('sd-button--no-hover');
|
|
55
|
-
}
|
|
56
|
-
return classes.join(' ');
|
|
57
|
-
}
|
|
58
|
-
render() {
|
|
59
|
-
const buttonClasses = this.getButtonClasses();
|
|
60
|
-
// 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
|
|
61
|
-
const resolvedColor = resolveColor.resolveColor(this.color);
|
|
62
|
-
return (index.h(index.Host, { key: 'b30c8006e2f187fb971bcd47f8ce4a91d1dc47a6', style: { '--button-color': resolvedColor } }, index.h("button", { key: 'f494c93fc0b9d55537b468f5c6458569df962633', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, onClick: this.handleClick }, index.h("div", { key: '7d64a6526baeac8569cccc60d9befacef3e3777d', class: "sd-button__content" }, this.icon && (index.h("sd-icon", { key: '9439e9456783aa5b057d383252a6b0c45a44b588', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ? this.iconSize : ICON_SIZES[this.size], color: this.iconColor ? this.iconColor : this.variant === 'primary' ? '#fff' : resolvedColor })), this.label && index.h("div", { key: '324371a6f8864c444cda39e7b349b4c9ec19b7f6', class: "sd-button__label" }, this.label), this.iconRight && (index.h("sd-icon", { key: '733790ceda6e1822c71911b17e66f527936b15a2', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor }))))));
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
SdButton.style = sdButtonCss;
|
|
66
|
-
|
|
67
|
-
const SdTooltipPortal = class {
|
|
68
|
-
constructor(hostRef) {
|
|
69
|
-
index.registerInstance(this, hostRef);
|
|
70
|
-
this.sdClose = index.createEvent(this, "sdClose");
|
|
71
|
-
}
|
|
72
|
-
get el() { return index.getElement(this); }
|
|
73
|
-
to = 'body';
|
|
74
|
-
parentRef = null;
|
|
75
|
-
offset = [0, 0];
|
|
76
|
-
zIndex = 9999;
|
|
77
|
-
placement = 'bottom';
|
|
78
|
-
open = false;
|
|
79
|
-
sdClose;
|
|
80
|
-
container;
|
|
81
|
-
wrapper;
|
|
82
|
-
rafId;
|
|
83
|
-
isInsideClick = false;
|
|
84
|
-
resizeObserver;
|
|
85
|
-
mutationObserver;
|
|
86
|
-
static ARROW_SIZE = 11.2;
|
|
87
|
-
componentDidLoad() {
|
|
88
|
-
this.container = this.resolveContainer();
|
|
89
|
-
this.createWrapper();
|
|
90
|
-
this.moveSlotContent();
|
|
91
|
-
// DOM이 완전히 렌더링된 후 위치 계산
|
|
92
|
-
requestAnimationFrame(() => {
|
|
93
|
-
this.updatePosition();
|
|
94
|
-
if (this.wrapper) {
|
|
95
|
-
this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
this.observeParent();
|
|
99
|
-
}
|
|
100
|
-
componentDidRender() {
|
|
101
|
-
if (!this.wrapper)
|
|
102
|
-
return;
|
|
103
|
-
// this.wrapper.style.display = this.open ? 'block' : 'none';
|
|
104
|
-
// if (this.open) this.updatePosition();
|
|
105
|
-
if (this.open) {
|
|
106
|
-
this.wrapper.style.display = 'block';
|
|
107
|
-
// RAF를 사용해서 다음 프레임에 위치 업데이트
|
|
108
|
-
requestAnimationFrame(() => {
|
|
109
|
-
this.updatePosition();
|
|
110
|
-
if (this.wrapper) {
|
|
111
|
-
this.wrapper.style.visibility = 'visible';
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
else {
|
|
116
|
-
this.wrapper.style.display = 'none';
|
|
117
|
-
this.wrapper.style.visibility = 'hidden';
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
disconnectedCallback() {
|
|
121
|
-
if (this.rafId)
|
|
122
|
-
cancelAnimationFrame(this.rafId);
|
|
123
|
-
this.unobserveParent();
|
|
124
|
-
this.wrapper?.remove();
|
|
125
|
-
}
|
|
126
|
-
resolveContainer() {
|
|
127
|
-
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
128
|
-
return el instanceof HTMLElement ? el : document.body;
|
|
129
|
-
}
|
|
130
|
-
createWrapper() {
|
|
131
|
-
this.wrapper = document.createElement('div');
|
|
132
|
-
Object.assign(this.wrapper.style, {
|
|
133
|
-
position: 'absolute',
|
|
134
|
-
zIndex: this.zIndex.toString(),
|
|
135
|
-
transition: 'opacity 0.4s',
|
|
136
|
-
top: '-9999px',
|
|
137
|
-
left: '-9999px',
|
|
138
|
-
});
|
|
139
|
-
this.container.appendChild(this.wrapper);
|
|
140
|
-
}
|
|
141
|
-
moveSlotContent() {
|
|
142
|
-
if (!this.wrapper)
|
|
143
|
-
return;
|
|
144
|
-
const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
|
|
145
|
-
nodes.forEach(n => this.wrapper.appendChild(n));
|
|
146
|
-
}
|
|
147
|
-
// 위치 갱신 (scroll / resize)
|
|
148
|
-
updatePosition() {
|
|
149
|
-
if (this.rafId)
|
|
150
|
-
cancelAnimationFrame(this.rafId);
|
|
151
|
-
this.rafId = requestAnimationFrame(() => {
|
|
152
|
-
if (!this.parentRef || !this.wrapper)
|
|
153
|
-
return;
|
|
154
|
-
const rect = this.parentRef.getBoundingClientRect();
|
|
155
|
-
if (!rect.width && !rect.height)
|
|
156
|
-
return; // 요소가 보이지 않는 경우
|
|
157
|
-
const [offsetX, offsetY] = this.offset;
|
|
158
|
-
const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;
|
|
159
|
-
let top = 0;
|
|
160
|
-
let left = 0;
|
|
161
|
-
switch (this.placement) {
|
|
162
|
-
case 'top':
|
|
163
|
-
top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
|
|
164
|
-
left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
|
|
165
|
-
break;
|
|
166
|
-
case 'bottom':
|
|
167
|
-
top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
|
|
168
|
-
left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
|
|
169
|
-
break;
|
|
170
|
-
case 'left':
|
|
171
|
-
top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
|
|
172
|
-
left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
|
|
173
|
-
break;
|
|
174
|
-
case 'right':
|
|
175
|
-
top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
|
|
176
|
-
left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
|
|
177
|
-
break;
|
|
178
|
-
}
|
|
179
|
-
Object.assign(this.wrapper.style, {
|
|
180
|
-
top: `${top}px`,
|
|
181
|
-
left: `${left}px`,
|
|
182
|
-
});
|
|
183
|
-
});
|
|
184
|
-
}
|
|
185
|
-
// parentRef의 이동 / 크기변경 감지
|
|
186
|
-
observeParent() {
|
|
187
|
-
if (!this.parentRef)
|
|
188
|
-
return;
|
|
189
|
-
this.resizeObserver = new ResizeObserver(() => this.updatePosition());
|
|
190
|
-
this.resizeObserver.observe(this.parentRef);
|
|
191
|
-
this.mutationObserver = new MutationObserver(() => this.updatePosition());
|
|
192
|
-
this.mutationObserver.observe(document.body, {
|
|
193
|
-
childList: true,
|
|
194
|
-
subtree: true,
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
unobserveParent() {
|
|
198
|
-
this.resizeObserver?.disconnect();
|
|
199
|
-
this.mutationObserver?.disconnect();
|
|
200
|
-
}
|
|
201
|
-
// 외부 클릭 감지
|
|
202
|
-
handleMouseDown(e) {
|
|
203
|
-
this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
|
|
204
|
-
}
|
|
205
|
-
handleWindowClick(e) {
|
|
206
|
-
if (this.isInsideClick) {
|
|
207
|
-
this.isInsideClick = false;
|
|
208
|
-
return;
|
|
209
|
-
}
|
|
210
|
-
if (this.wrapper?.contains(e.target))
|
|
211
|
-
return;
|
|
212
|
-
this.sdClose.emit();
|
|
213
|
-
}
|
|
214
|
-
render() {
|
|
215
|
-
return index.h("slot", { key: '45ebd398328f0a3d31299b0c4bc1456cda435e4c' });
|
|
216
|
-
}
|
|
217
|
-
};
|
|
218
|
-
|
|
219
|
-
exports.sd_button = SdButton;
|
|
220
|
-
exports.sd_tooltip_portal = SdTooltipPortal;
|
|
221
|
-
//# sourceMappingURL=sd-button.sd-tooltip-portal.entry.cjs.js.map
|