@sellmate/design-system 0.0.30 → 0.0.31
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 +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-button_13.cjs.entry.js +6 -6
- package/dist/cjs/sd-progress.cjs.entry.js +44 -0
- package/dist/cjs/sd-progress.entry.cjs.js.map +1 -0
- package/dist/cjs/sd-select-multiple.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-option-group.cjs.entry.js +3 -3
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/sd-progress/sd-progress.css +61 -0
- package/dist/collection/components/sd-progress/sd-progress.js +194 -0
- package/dist/collection/components/sd-progress/sd-progress.js.map +1 -0
- package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js +1 -1
- package/dist/collection/components/sd-select-multiple/sd-select-multiple.js +2 -2
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- 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/{p-CSxmWyJx.js → p-B18yJb2O.js} +5 -5
- package/dist/components/{p-CSxmWyJx.js.map → p-B18yJb2O.js.map} +1 -1
- package/dist/components/{p-c8NhJgfj.js → p-BLVHOrsi.js} +3 -3
- package/dist/components/{p-c8NhJgfj.js.map → p-BLVHOrsi.js.map} +1 -1
- package/dist/components/{p-B0JdV6r1.js → p-BNY55XpQ.js} +3 -3
- package/dist/components/{p-B0JdV6r1.js.map → p-BNY55XpQ.js.map} +1 -1
- package/dist/components/{p-Mc5Mv8aH.js → p-Dvtwm2UI.js} +7 -7
- package/dist/components/{p-Mc5Mv8aH.js.map → p-Dvtwm2UI.js.map} +1 -1
- package/dist/components/{p-DOUuhGVo.js → p-T0Fd7Ziu.js} +3 -3
- package/dist/components/{p-DOUuhGVo.js.map → p-T0Fd7Ziu.js.map} +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-progress.d.ts +11 -0
- package/dist/components/sd-progress.js +70 -0
- package/dist/components/sd-progress.js.map +1 -0
- package/dist/components/sd-select-multiple-group.js +1 -1
- package/dist/components/sd-select-multiple.js +3 -3
- 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.js +4 -4
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-ff4feeff.entry.js → p-1b6b3344.entry.js} +2 -2
- package/dist/design-system/p-6d1c2089.entry.js +2 -0
- package/dist/design-system/p-6d1c2089.entry.js.map +1 -0
- package/dist/design-system/{p-7a7cdc36.entry.js → p-760dafe5.entry.js} +2 -2
- package/dist/design-system/{p-e2a11135.entry.js → p-e9800353.entry.js} +2 -2
- package/dist/design-system/sd-progress.entry.esm.js.map +1 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button_13.entry.js +6 -6
- package/dist/esm/sd-progress.entry.js +42 -0
- package/dist/esm/sd-progress.entry.js.map +1 -0
- package/dist/esm/sd-select-multiple.entry.js +2 -2
- package/dist/esm/sd-select-option-group.entry.js +3 -3
- package/dist/types/components/sd-progress/sd-progress.d.ts +12 -0
- package/dist/types/components.d.ts +55 -0
- package/hydrate/index.js +65 -11
- package/hydrate/index.mjs +65 -11
- package/package.json +2 -2
- /package/dist/design-system/{p-ff4feeff.entry.js.map → p-1b6b3344.entry.js.map} +0 -0
- /package/dist/design-system/{p-7a7cdc36.entry.js.map → p-760dafe5.entry.js.map} +0 -0
- /package/dist/design-system/{p-e2a11135.entry.js.map → p-e9800353.entry.js.map} +0 -0
|
@@ -43,20 +43,20 @@ export class SdTooltip {
|
|
|
43
43
|
: {
|
|
44
44
|
onClick: () => (this.showTooltip = !this.showTooltip),
|
|
45
45
|
};
|
|
46
|
-
return (h(Fragment, { key: '
|
|
46
|
+
return (h(Fragment, { key: '45dbef1d93b082f8fe42c003f997aa80ad297ee5' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '7357fe6678832a74c567b24e404d14d75a77b13f', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '3add41a611cb55fddaae7733b6db9ec996561723', class: {
|
|
47
47
|
'sd-tooltip-menu': true,
|
|
48
48
|
[`sd-tooltip-menu--${this.type}`]: true,
|
|
49
49
|
[`sd-tooltip-menu--${this.placement}`]: true,
|
|
50
50
|
'sd-tooltip-menu--with-close': this.useClose,
|
|
51
51
|
[`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
52
52
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
|
|
53
|
-
} }, h("i", { key: '
|
|
53
|
+
} }, h("i", { key: 'f62cfc386831412cb958da88a41e0487be40d119', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'daab1b1028832d95fb05456b96981cdeb1e31c4e', class: {
|
|
54
54
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
55
|
-
} })), h("div", { key: '
|
|
55
|
+
} })), h("div", { key: 'ab7ca38aa68cf8279ff0d372651a4e26b217781c', class: "sd-tooltip-menu__content", ref: el => {
|
|
56
56
|
if (el && this.slotContent && !el.hasChildNodes()) {
|
|
57
57
|
el.appendChild(this.slotContent.cloneNode(true));
|
|
58
58
|
}
|
|
59
|
-
} }, !this.slotContent && h("span", { key: '
|
|
59
|
+
} }, !this.slotContent && h("span", { key: 'f5768e8b7e3033f64797aba77a504d57236e51e3' }, this.el.textContent)), this.useClose && (h("div", { key: '94bdf692fabf190912a64d6051957031b2964ae5', class: "sd-tooltip-menu__close-button" }, h("button", { key: '8826745fb1dab139358bc0d430d622abca333e5e', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '863f114251ec302425224a7385dd23292f7f6340', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "sd-tooltip"; }
|
|
62
62
|
static get originalStyleUrls() {
|
|
@@ -143,7 +143,7 @@ export class SdTooltipPortal {
|
|
|
143
143
|
this.sdClose.emit();
|
|
144
144
|
}
|
|
145
145
|
render() {
|
|
146
|
-
return h("slot", { key: '
|
|
146
|
+
return h("slot", { key: '96e22fb7cd79afbef7bcb1a9b055e6a2bf54dd76' });
|
|
147
147
|
}
|
|
148
148
|
static get is() { return "sd-tooltip-portal"; }
|
|
149
149
|
static get encapsulation() { return "shadow"; }
|
|
@@ -51,7 +51,7 @@ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptio
|
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
render() {
|
|
54
|
-
return (h("div", { key: '
|
|
54
|
+
return (h("div", { key: 'ab10e48405e8457f1319518f9790c5dd94d1b5e6', class: {
|
|
55
55
|
'sd-select__option-group': true,
|
|
56
56
|
'sd-select__option-group--selected': !!this.isSelected,
|
|
57
57
|
'sd-select__option-group--disabled': !!this.option.disabled,
|
|
@@ -60,10 +60,10 @@ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptio
|
|
|
60
60
|
'sd-select__option-group--group': this.option.type === 'group',
|
|
61
61
|
'sd-select__option-group--subgroup': this.option.type === 'subgroup',
|
|
62
62
|
'sd-select__option-group--item': this.option.type === 'item',
|
|
63
|
-
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: '
|
|
63
|
+
}, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'e9b0636bc98818aa48b5d486c3e5b4c216b76046', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'b7495da88ddad187588569c64235ccc1697466fe', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
|
|
64
64
|
e.preventDefault();
|
|
65
65
|
this.handleClick(this.option, this.isSelected, e);
|
|
66
|
-
} })), h("span", { key: '
|
|
66
|
+
} })), h("span", { key: 'f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'ee29e4503321462981c6d6fe497d70f271e5f814', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
|
|
67
67
|
}
|
|
68
68
|
static get style() { return sdSelectOptionGroupCss; }
|
|
69
69
|
}, [768, "sd-select-option-group", {
|
|
@@ -104,6 +104,6 @@ function defineCustomElement() {
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
export { SdSelectOptionGroup as S, defineCustomElement as d };
|
|
107
|
-
//# sourceMappingURL=p-
|
|
107
|
+
//# sourceMappingURL=p-B18yJb2O.js.map
|
|
108
108
|
|
|
109
|
-
//# sourceMappingURL=p-
|
|
109
|
+
//# sourceMappingURL=p-B18yJb2O.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-B18yJb2O.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option-group {\n display: block;\n height: fit-content;\n .sd-select__option-group {\n display: flex;\n padding: 4px 12px;\n padding-left: 28px;\n font-size: 12px;\n line-height: 20px;\n\n &.sd-select__option-group--group,\n &.sd-select__option-group--subgroup {\n &:not(.sd-select__option-group--use-checkbox) {\n cursor: default;\n }\n }\n\n &.sd-select__option-group--group {\n padding-left: 12px;\n background-color: $brilliantblue_05 !important;\n color: $grey_90 !important;\n font-weight: 700;\n }\n\n &.sd-select__option-group--subgroup {\n padding-left: 20px;\n background-color: $grey_05 !important;\n color: $grey_90 !important;\n font-weight: 500;\n }\n\n sd-checkbox {\n &__bg {\n border-color: $grey_65;\n }\n }\n\n &__label-wrapper {\n display: flex;\n width: 100%;\n column-gap: 8px;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n sd-checkbox {\n flex-shrink: 0;\n }\n\n .sd-select__option-group-label {\n flex: 0 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .sd-select__option-group__count-indicator {\n width: fit-content;\n flex-shrink: 0;\n font-size: 12px;\n font-weight: 500;\n color: $grey_65;\n }\n }\n\n &--focused {\n background-color: $brilliantblue_20;\n }\n\n &--selected,\n &--focused {\n &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\n color: $brilliantblue_75;\n font-weight: 700;\n }\n }\n\n &--disabled {\n color: $grey_55;\n cursor: not-allowed;\n }\n\n &:hover {\n &:not(.sd-select__option-group--disabled) {\n background-color: $brilliantblue_75;\n color: white;\n }\n\n &.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox {\n .sd-checkbox__bg {\n border-color: white !important;\n }\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\n\n@Component({\n tag: 'sd-select-option-group',\n styleUrl: 'sd-select-option-group.scss',\n})\nexport class SdSelectOptionGroup {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOptionGroup;\n @Prop() index!: number;\n @Prop() isSelected: boolean | null = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n @Prop() useIndicator?: boolean = true;\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\n selectedCount: 0,\n totalCount: 0,\n };\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\n }\n\n @Event() optionClick!: EventEmitter<{\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n event: MouseEvent;\n }>;\n\n private handleClick = (\n option: SelectOptionGroup,\n isSelected: boolean | null,\n event: MouseEvent,\n ) => {\n event.stopPropagation();\n\n if (option.type === 'group' || option.type === 'subgroup') {\n this.optionClick.emit({\n option: this.option,\n isSelected,\n index: this.index,\n event,\n });\n return;\n }\n\n if (!this.option.disabled && !this.disabled) {\n this.optionClick.emit({\n option: this.option,\n isSelected,\n index: this.index,\n event,\n });\n }\n };\n\n render() {\n return (\n <div\n class={{\n 'sd-select__option-group': true,\n 'sd-select__option-group--selected': !!this.isSelected,\n 'sd-select__option-group--disabled': !!this.option.disabled,\n 'sd-select__option-group--focused': this.isFocused,\n 'sd-select__option-group--use-checkbox': this.useCheckbox,\n 'sd-select__option-group--group': this.option.type === 'group',\n 'sd-select__option-group--subgroup': this.option.type === 'subgroup',\n 'sd-select__option-group--item': this.option.type === 'item',\n }}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n style={this.optionStyle}\n data-index={this.index}\n onClick={event => this.handleClick(this.option, this.isSelected, event)}\n >\n <div class=\"sd-select__option-group__label-wrapper\">\n {this.useCheckbox && (\n <sd-checkbox\n checked={this.isSelected}\n disabled={this.option.disabled}\n onClick={e => {\n e.preventDefault();\n this.handleClick(this.option, this.isSelected, e);\n }}\n ></sd-checkbox>\n )}\n <span class=\"sd-select__option-group-label\">{this.option.label}</span>\n {this.useIndicator && this.option.type !== 'item' && (\n <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -152,7 +152,7 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
|
|
|
152
152
|
this.sdClose.emit();
|
|
153
153
|
}
|
|
154
154
|
render() {
|
|
155
|
-
return h("slot", { key: '
|
|
155
|
+
return h("slot", { key: '96e22fb7cd79afbef7bcb1a9b055e6a2bf54dd76' });
|
|
156
156
|
}
|
|
157
157
|
}, [769, "sd-tooltip-portal", {
|
|
158
158
|
"to": [1],
|
|
@@ -177,6 +177,6 @@ function defineCustomElement() {
|
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
export { SdTooltipPortal as S, defineCustomElement as d };
|
|
180
|
-
//# sourceMappingURL=p-
|
|
180
|
+
//# sourceMappingURL=p-BLVHOrsi.js.map
|
|
181
181
|
|
|
182
|
-
//# sourceMappingURL=p-
|
|
182
|
+
//# sourceMappingURL=p-BLVHOrsi.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BLVHOrsi.js","mappings":";;MAMa,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;;;;IAEnB,EAAE,GAAyB,MAAM;IACjC,SAAS,GAAuB,IAAI;AACpC,IAAA,MAAM,GAAqB,CAAC,CAAC,EAAE,CAAC,CAAC;IACjC,MAAM,GAAW,IAAI;IACrB,SAAS,GAAwC,QAAQ;IACzD,IAAI,GAAY,KAAK;AAEpB,IAAA,OAAO;AAER,IAAA,SAAS;AACT,IAAA,OAAO;AACP,IAAA,KAAK;IACL,aAAa,GAAG,KAAK;AAErB,IAAA,cAAc;AACd,IAAA,gBAAgB;AAEhB,IAAA,OAAgB,UAAU,GAAG,IAAI;IAEzC,gBAAgB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE;QACxC,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,eAAe,EAAE;;QAGtB,qBAAqB,CAAC,MAAK;YAC1B,IAAI,CAAC,cAAc,EAAE;AACrB,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gBACjB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;;AAE5C,SAAC,CAAC;QAEF,IAAI,CAAC,aAAa,EAAE;;IAGrB,kBAAkB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;;;AAKnB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO;;YAEpC,qBAAqB,CAAC,MAAK;gBAC1B,IAAI,CAAC,cAAc,EAAE;AACrB,gBAAA,IAAI,IAAI,CAAC,OAAO,EAAE;oBACjB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS;;AAE3C,aAAC,CAAC;;aACI;YACN,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;YACnC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ;;;IAI1C,oBAAoB,GAAA;QACnB,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC;QAChD,IAAI,CAAC,eAAe,EAAE;AACtB,QAAA,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE;;IAGf,gBAAgB,GAAA;QACvB,MAAM,EAAE,GAAG,OAAO,IAAI,CAAC,EAAE,KAAK,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE;AAClF,QAAA,OAAO,EAAE,YAAYA,CAAW,GAAG,EAAE,GAAG,QAAQ,CAAC,IAAI;;IAG9C,aAAa,GAAA;QACpB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QAC5C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;AACjC,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC9B,YAAA,UAAU,EAAE,cAAc;AAC1B,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,IAAI,EAAE,SAAS;AACf,SAAA,CAAC;QACF,IAAI,CAAC,SAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGlC,eAAe,GAAA;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;AAC1F,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,OAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;;IAMjD,cAAc,GAAA;QACb,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEhD,QAAA,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,MAAK;YACvC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE;YAEtC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,gBAAA,OAAO;YAExC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM;AACtC,YAAA,MAAM,UAAU,GAAG,eAAe,CAAC,UAAU;YAE7C,IAAI,GAAG,GAAG,CAAC;YACX,IAAI,IAAI,GAAG,CAAC;AAEZ,YAAA,QAAQ,IAAI,CAAC,SAAS;AACrB,gBAAA,KAAK,KAAK;AACT,oBAAA,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,GAAG,UAAU;oBAClF,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,GAAG,OAAO;oBAC3F;AAED,gBAAA,KAAK,QAAQ;AACZ,oBAAA,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,OAAO,GAAG,UAAU;oBACzD,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,GAAG,OAAO;oBAC3F;AAED,gBAAA,KAAK,MAAM;oBACV,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC,GAAG,OAAO;AAC3F,oBAAA,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,GAAG,UAAU;oBACnF;AAED,gBAAA,KAAK,OAAO;oBACX,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC,GAAG,OAAO;AAC3F,oBAAA,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,GAAG,OAAO,GAAG,UAAU;oBACzD;;YAGF,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAQ,CAAC,KAAK,EAAE;gBAClC,GAAG,EAAE,CAAG,EAAA,GAAG,CAAI,EAAA,CAAA;gBACf,IAAI,EAAE,CAAG,EAAA,IAAI,CAAI,EAAA,CAAA;AACjB,aAAA,CAAC;AACH,SAAC,CAAC;;;IAIK,aAAa,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;AAErB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QACrE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;AAE3C,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QACzE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5C,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,SAAA,CAAC;;IAGK,eAAe,GAAA;AACtB,QAAA,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE;AACjC,QAAA,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE;;;AAKpC,IAAA,eAAe,CAAC,CAAa,EAAA;QAC5B,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,CAAC;;AAIjF,IAAA,iBAAiB,CAAC,CAAa,EAAA;AAC9B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,IAAI,CAAC,aAAa,GAAG,KAAK;YAC1B;;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;YAAE;AAC9C,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;IAGpB,MAAM,GAAA;QACL,OAAO,8DAAa;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip-portal/sd-tooltip-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-tooltip-portal',\n shadow: true,\n})\nexport class SdTooltipPortal {\n @Element() el!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 0];\n @Prop() zIndex: number = 9999;\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop() open: boolean = false;\n\n @Event() sdClose!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n private static readonly ARROW_SIZE = 11.2;\n\n componentDidLoad() {\n this.container = this.resolveContainer();\n this.createWrapper();\n this.moveSlotContent();\n\n // DOM이 완전히 렌더링된 후 위치 계산\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\n }\n });\n\n this.observeParent();\n }\n\n componentDidRender() {\n if (!this.wrapper) return;\n\n // this.wrapper.style.display = this.open ? 'block' : 'none';\n // if (this.open) this.updatePosition();\n\n if (this.open) {\n this.wrapper.style.display = 'block';\n // RAF를 사용해서 다음 프레임에 위치 업데이트\n requestAnimationFrame(() => {\n this.updatePosition();\n if (this.wrapper) {\n this.wrapper.style.visibility = 'visible';\n }\n });\n } else {\n this.wrapper.style.display = 'none';\n this.wrapper.style.visibility = 'hidden';\n }\n }\n\n disconnectedCallback() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\n this.unobserveParent();\n this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n this.wrapper = document.createElement('div');\n Object.assign(this.wrapper.style, {\n position: 'absolute',\n zIndex: this.zIndex.toString(),\n transition: 'opacity 0.4s',\n top: '-9999px',\n left: '-9999px',\n });\n this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n if (!this.wrapper) return;\n const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n if (this.rafId) cancelAnimationFrame(this.rafId);\n\n this.rafId = requestAnimationFrame(() => {\n if (!this.parentRef || !this.wrapper) return;\n\n const rect = this.parentRef.getBoundingClientRect();\n if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\n\n const [offsetX, offsetY] = this.offset;\n const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;\n\n let top = 0;\n let left = 0;\n\n switch (this.placement) {\n case 'top':\n top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'bottom':\n top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\n left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n break;\n\n case 'left':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\n break;\n\n case 'right':\n top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\n break;\n }\n\n Object.assign(this.wrapper!.style, {\n top: `${top}px`,\n left: `${left}px`,\n });\n });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n if (!this.parentRef) return;\n\n this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n this.resizeObserver.observe(this.parentRef);\n\n this.mutationObserver = new MutationObserver(() => this.updatePosition());\n this.mutationObserver.observe(document.body, {\n childList: true,\n subtree: true,\n });\n }\n\n private unobserveParent() {\n this.resizeObserver?.disconnect();\n this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n if (this.isInsideClick) {\n this.isInsideClick = false;\n return;\n }\n if (this.wrapper?.contains(e.target as Node)) return;\n this.sdClose.emit();\n }\n\n render() {\n return <slot></slot>;\n }\n}\n"],"version":3}
|
|
@@ -36,7 +36,7 @@ const SdSelectOption = /*@__PURE__*/ proxyCustomElement(class SdSelectOption ext
|
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
render() {
|
|
39
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: '57acf795fbb642249d9716fc8fa4123f2d939d2b' }, h("div", { key: '6653deafa3142a3bf9b67290dae411c29fc38f41', class: {
|
|
40
40
|
'sd-select__option': true,
|
|
41
41
|
'sd-select__option--selected': this.isSelected,
|
|
42
42
|
'sd-select__option--disabled': !!this.option.disabled,
|
|
@@ -92,6 +92,6 @@ function defineCustomElement() {
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
export { SdSelectOption as S, defineCustomElement as d };
|
|
95
|
-
//# sourceMappingURL=p-
|
|
95
|
+
//# sourceMappingURL=p-BNY55XpQ.js.map
|
|
96
96
|
|
|
97
|
-
//# sourceMappingURL=p-
|
|
97
|
+
//# sourceMappingURL=p-BNY55XpQ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BNY55XpQ.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,g0BAAg0B;;MCiB70B,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGlB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAY,KAAK;IAC3B,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAE3B,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;AACf,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;;AAGrB,IAAA,WAAW;AAMZ,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;QAC3C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,mBAAmB,EAAE,IAAI;gBACzB,6BAA6B,EAAE,IAAI,CAAC,UAAU;AAC9C,gBAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBACrD,4BAA4B,EAAE,IAAI,CAAC,SAAS;gBAC5C,iCAAiC,EAAE,IAAI,CAAC,WAAW;AACnD,aAAA,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EACX,YAAA,EAAA,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,WAAW,EAExB,EAAA,IAAI,CAAC,WAAW,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,qCAAqC,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;;;;;;;;YAQ9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,aAAC,EACa,CAAA,EACf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,CAC3D,KAEN,IAAI,CAAC,MAAM,CAAC,KAAK,CACjB,CACI,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-option/sd-select-option.scss?tag=sd-select-option","src/components/sd-select/sd-select-option/sd-select-option.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option {\n display: block;\n height: fit-content;\n line-height: 0;\n .sd-select__option {\n display: flex;\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n cursor: pointer;\n\n &__checkbox-wrapper {\n display: flex;\n width: 100%;\n column-gap: 8px;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &--focused {\n background-color: $brilliantblue_20;\n }\n\n &--selected,\n &--focused {\n &:not(:hover):not(.sd-select__option--use-checkbox) {\n color: $brilliantblue_75;\n font-weight: 700;\n }\n }\n\n &--disabled {\n color: $grey_55;\n cursor: not-allowed;\n }\n\n &:hover {\n &:not(.sd-select__option--disabled) {\n background-color: $brilliantblue_75;\n color: white;\n }\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport type { SelectOption } from '../../../types/select';\n\n@Component({\n tag: 'sd-select-option',\n styleUrl: 'sd-select-option.scss',\n})\nexport class SdSelectOption {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOption;\n @Prop() index!: number;\n @Prop() isSelected: boolean = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n return !!this.option.disabled;\n }\n\n @Event() optionClick!: EventEmitter<{\n option: SelectOption;\n index: number;\n event: MouseEvent;\n }>;\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (!this.option.disabled && !this.disabled) {\n this.optionClick.emit({\n option: this.option,\n index: this.index,\n event,\n });\n }\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'sd-select__option': true,\n 'sd-select__option--selected': this.isSelected,\n 'sd-select__option--disabled': !!this.option.disabled,\n 'sd-select__option--focused': this.isFocused,\n 'sd-select__option--use-checkbox': this.useCheckbox,\n }}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n style={this.optionStyle}\n data-index={this.index}\n onClick={this.handleClick}\n >\n {this.useCheckbox ? (\n <div class=\"sd-select__option__checkbox-wrapper\">\n <sd-checkbox\n checked={this.isSelected}\n disabled={this.option.disabled}\n // checkboxStyle={\n // !this.isSelected\n // ? { borderColor: '#888' }\n // : this.isHovered\n // ? { borderColor: 'white' }\n // : { borderColor: '#0075ff' }\n // }\n onClick={e => {\n e.preventDefault();\n this.handleClick(e);\n }}\n ></sd-checkbox>\n <span class=\"sd-select__option-label\">{this.option.label}</span>\n </div>\n ) : (\n this.option.label\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
|
|
|
2
2
|
import { T as TooltipArrow } from './p-wA4KCOG0.js';
|
|
3
3
|
import { d as defineCustomElement$3 } from './p-BZjhXFoV.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-X8UHtq2f.js';
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-BLVHOrsi.js';
|
|
6
6
|
|
|
7
7
|
const sdTooltipCss = "sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-block}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__content p{margin:0}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}";
|
|
8
8
|
|
|
@@ -55,20 +55,20 @@ const SdTooltip = /*@__PURE__*/ proxyCustomElement(class SdTooltip extends H {
|
|
|
55
55
|
: {
|
|
56
56
|
onClick: () => (this.showTooltip = !this.showTooltip),
|
|
57
57
|
};
|
|
58
|
-
return (h(Fragment, { key: '
|
|
58
|
+
return (h(Fragment, { key: '45dbef1d93b082f8fe42c003f997aa80ad297ee5' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '7357fe6678832a74c567b24e404d14d75a77b13f', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '3add41a611cb55fddaae7733b6db9ec996561723', class: {
|
|
59
59
|
'sd-tooltip-menu': true,
|
|
60
60
|
[`sd-tooltip-menu--${this.type}`]: true,
|
|
61
61
|
[`sd-tooltip-menu--${this.placement}`]: true,
|
|
62
62
|
'sd-tooltip-menu--with-close': this.useClose,
|
|
63
63
|
[`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
64
64
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
|
|
65
|
-
} }, h("i", { key: '
|
|
65
|
+
} }, h("i", { key: 'f62cfc386831412cb958da88a41e0487be40d119', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'daab1b1028832d95fb05456b96981cdeb1e31c4e', class: {
|
|
66
66
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
67
|
-
} })), h("div", { key: '
|
|
67
|
+
} })), h("div", { key: 'ab7ca38aa68cf8279ff0d372651a4e26b217781c', class: "sd-tooltip-menu__content", ref: el => {
|
|
68
68
|
if (el && this.slotContent && !el.hasChildNodes()) {
|
|
69
69
|
el.appendChild(this.slotContent.cloneNode(true));
|
|
70
70
|
}
|
|
71
|
-
} }, !this.slotContent && h("span", { key: '
|
|
71
|
+
} }, !this.slotContent && h("span", { key: 'f5768e8b7e3033f64797aba77a504d57236e51e3' }, this.el.textContent)), this.useClose && (h("div", { key: '94bdf692fabf190912a64d6051957031b2964ae5', class: "sd-tooltip-menu__close-button" }, h("button", { key: '8826745fb1dab139358bc0d430d622abca333e5e', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '863f114251ec302425224a7385dd23292f7f6340', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
72
72
|
}
|
|
73
73
|
static get style() { return sdTooltipCss; }
|
|
74
74
|
}, [768, "sd-tooltip", {
|
|
@@ -116,6 +116,6 @@ function defineCustomElement() {
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
export { SdTooltip as S, defineCustomElement as d };
|
|
119
|
-
//# sourceMappingURL=p-
|
|
119
|
+
//# sourceMappingURL=p-Dvtwm2UI.js.map
|
|
120
120
|
|
|
121
|
-
//# sourceMappingURL=p-
|
|
121
|
+
//# sourceMappingURL=p-Dvtwm2UI.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-Dvtwm2UI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\n [slot='content'] {\n display: none;\n }\n\n .sd-tooltip {\n position: relative;\n cursor: pointer;\n display: inline-block;\n }\n}\n\n.sd-tooltip-menu {\n width: fit-content;\n padding: 8px 16px;\n border-radius: 4px;\n font-size: 12px;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: start;\n justify-content: center;\n gap: 12px;\n\n &--with-close {\n padding-right: 12px !important;\n }\n\n &__arrow {\n position: absolute;\n display: flex;\n width: 9.6px;\n height: 7.2px;\n svg {\n width: 100%;\n height: 100%;\n }\n &--top {\n bottom: -7.2px;\n left: 50%;\n transform: translateX(-50%);\n }\n &--bottom {\n top: -7.2px;\n left: 50%;\n transform: translateX(-50%) rotate(180deg);\n }\n &--left {\n right: -7.2px;\n top: 50%;\n transform: translateY(-50%) rotate(-90deg);\n }\n &--right {\n left: -7.2px;\n top: 50%;\n transform: translateY(-50%) rotate(90deg);\n }\n }\n\n &__content {\n line-height: 20px;\n font-weight: 500;\n\n p {\n margin: 0;\n }\n }\n\n &__close-button {\n padding-top: 4px;\n display: flex;\n button {\n padding: 0;\n background: none;\n border: none;\n cursor: pointer;\n }\n }\n}\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\n@Component({\n tag: 'sd-tooltip',\n styleUrl: 'sd-tooltip.scss',\n})\nexport class SdTooltip {\n @Element() el!: HTMLElement;\n\n @Prop() trigger: 'hover' | 'click' = 'hover';\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n @Prop() color: string = '#01BB4B';\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\n\n @Prop() icon: IconName = 'helpOutline';\n @Prop() iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop() buttonSize: ButtonSize = 'sm';\n @Prop() buttonVariant: ButtonVariant = 'primary';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showTooltip: boolean = false;\n @State() slotContent: HTMLElement | null = null;\n\n private static readonly COLOR_OF_TYPE = {\n default: { background: 'oceanblue_85', text: 'white' },\n caution: { background: 'red_20', text: 'red_70' },\n notice: { background: 'orange_10', text: 'orange_65' },\n accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\n };\n\n private buttonEl?: HTMLStencilElement;\n\n private handleClose = () => {\n this.showTooltip = false;\n };\n\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\n componentWillLoad() {\n const contentEl = this.el.querySelector('[slot=\"content\"]');\n if (contentEl) {\n this.slotContent = contentEl.cloneNode(true) as HTMLElement;\n }\n }\n\n render() {\n const handleTrigger =\n this.trigger === 'hover'\n ? {\n onMouseEnter: () => (this.showTooltip = true),\n onMouseLeave: () => (this.showTooltip = false),\n }\n : {\n onClick: () => (this.showTooltip = !this.showTooltip),\n };\n\n return (\n <Fragment>\n {this.label ? (\n <sd-button\n ref={el => (this.buttonEl = el)}\n label={this.label}\n icon={this.icon}\n size={this.buttonSize}\n color={this.color}\n variant={this.buttonVariant}\n class=\"sd-tooltip\"\n {...handleTrigger}\n ></sd-button>\n ) : (\n <sd-icon\n ref={el => (this.buttonEl = el)}\n name={this.icon}\n size={this.iconSize}\n color={this.color}\n class=\"sd-tooltip\"\n {...handleTrigger}\n ></sd-icon>\n )}\n\n {this.showTooltip && (\n <sd-tooltip-portal\n parentRef={this.buttonEl}\n onSdClose={() => this.handleClose()}\n placement={this.placement}\n >\n <div\n class={{\n 'sd-tooltip-menu': true,\n [`sd-tooltip-menu--${this.type}`]: true,\n [`sd-tooltip-menu--${this.placement}`]: true,\n 'sd-tooltip-menu--with-close': this.useClose,\n [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\n }}\n >\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\n <TooltipArrow\n class={{\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\n }}\n ></TooltipArrow>\n </i>\n\n <div\n class=\"sd-tooltip-menu__content\"\n ref={el => {\n if (el && this.slotContent && !el.hasChildNodes()) {\n el.appendChild(this.slotContent.cloneNode(true));\n }\n }}\n >\n {!this.slotContent && <span>{this.el.textContent}</span>}\n </div>\n\n {this.useClose && (\n <div class=\"sd-tooltip-menu__close-button\">\n <button\n type=\"button\"\n aria-label=\"Close tooltip\"\n title=\"Close tooltip\"\n onClick={() => this.handleClose()}\n >\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n </button>\n </div>\n )}\n </div>\n </sd-tooltip-portal>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
|
|
@@ -4,7 +4,7 @@ import { d as defineCustomElement$5 } from './p-zEI1HiVv.js';
|
|
|
4
4
|
import { d as defineCustomElement$4 } from './p-X8UHtq2f.js';
|
|
5
5
|
import { d as defineCustomElement$3 } from './p-RnzZWR4A.js';
|
|
6
6
|
import { d as defineCustomElement$2 } from './p-DXyjyA0e.js';
|
|
7
|
-
import { d as defineCustomElement$1 } from './p-
|
|
7
|
+
import { d as defineCustomElement$1 } from './p-BNY55XpQ.js';
|
|
8
8
|
|
|
9
9
|
const sdSelectCss = ".sd-select__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select{display:flex;width:var(--select-width, 200px);height:28px;position:relative;color:#333333;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select:hover:not(.sd-select--disabled){background:#f6f6f6}.sd-select.sd-select--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select.sd-select--disabled .sd-select__label{border-right:1px solid #cccccc}.sd-select.sd-select--disabled .sd-select__trigger{color:#888888}.sd-select.sd-select--disabled .sd-select__trigger:focus,.sd-select.sd-select--disabled .sd-select__trigger:focus-visible,.sd-select.sd-select--disabled .sd-select__trigger:focus-within{outline:none !important}.sd-select__label{font-size:12px;line-height:20px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6;display:inline-block;white-space:nowrap}.sd-select__container{position:relative;width:100%;display:flex}.sd-select__container .sd-select__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select__container .sd-select__trigger .sd-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}.sd-select__container .sd-select__trigger .sd-select__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select__container .sd-select__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select__container .sd-select__arrow--open{transform:rotate(180deg)}.sd-select__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column}.sd-select__dropdown .sd-select__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select__dropdown .sd-select__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select__dropdown .sd-select__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
|
|
10
10
|
|
|
@@ -318,6 +318,6 @@ function defineCustomElement() {
|
|
|
318
318
|
}
|
|
319
319
|
|
|
320
320
|
export { SdSelect as S, defineCustomElement as d };
|
|
321
|
-
//# sourceMappingURL=p-
|
|
321
|
+
//# sourceMappingURL=p-T0Fd7Ziu.js.map
|
|
322
322
|
|
|
323
|
-
//# sourceMappingURL=p-
|
|
323
|
+
//# sourceMappingURL=p-T0Fd7Ziu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-DOUuhGVo.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select {\n display: flex;\n width: var(--select-width, 200px);\n height: 28px;\n position: relative;\n color: $grey_90;\n cursor: pointer;\n user-select: none;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: white;\n\n &:hover:not(.sd-select--disabled) {\n background: $grey_10;\n }\n\n &.sd-select--disabled {\n cursor: not-allowed;\n background-color: $grey_20;\n border-color: $grey_45;\n\n .sd-select__label {\n border-right: 1px solid $grey_45;\n }\n\n .sd-select__trigger {\n color: $grey_65;\n &:focus,\n &:focus-visible,\n &:focus-within {\n outline: none !important;\n }\n }\n }\n\n &__label {\n font-size: 12px;\n line-height: 20px;\n font-weight: 500;\n color: $grey_90;\n padding: 4px 12px;\n border-right: 1px solid $grey_45;\n border-radius: 4px 0 0 4px;\n background-color: $grey_10;\n display: inline-block;\n white-space: nowrap;\n }\n\n &__container {\n position: relative;\n width: 100%;\n display: flex;\n\n .sd-select__trigger {\n padding: 4px 20px 4px 12px;\n display: flex;\n width: 100%;\n align-items: center;\n\n .sd-select__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n font-size: 12px;\n font-weight: 400;\n text-align: left;\n }\n\n .sd-select__clear {\n margin: 0 4px;\n width: 8px;\n height: 8px;\n background-color: transparent;\n outline: none;\n border: none;\n }\n }\n\n .sd-select__arrow {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n color: $grey_65;\n transition: transform 0.3s ease;\n\n &--open {\n transform: rotate(180deg);\n }\n }\n }\n}\n\n.sd-select__dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n\n .sd-select__search-container {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n padding: 4px 8px;\n\n &--scrolled {\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n }\n }\n\n .sd-select__option-placeholder {\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n text-align: left;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdChange: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdChange: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop() label: string = '';\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() filteredOptions = this.options;\n @State() isOpen: boolean = false;\n @State() searchText: string | null = null;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private searchRef?: HTMLSdInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n private dropdownRef?: HTMLElement;\n\n @Watch('value')\n valueChanged() {\n const selectedOption = this.getSelectedOption();\n this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('options')\n optionsChanged() {\n this.filteredOptions = this.options;\n this.filterOptions();\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus();\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem || !this.isOpen) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.isDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\n this.filteredOptions = this.options;\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n\n const selectedOption = this.getSelectedOption();\n if (!selectedOption) {\n this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;\n } else {\n this.itemIndex = this.options.indexOf(selectedOption);\n }\n\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) return;\n\n await new Promise(resolve => setTimeout(resolve, 10));\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n\n const currentItem = optionElements?.[this.itemIndex];\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n searchInput?.focus();\n }\n\n if (!currentItem) return;\n\n await new Promise(resolve => setTimeout(resolve, 10));\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.searchText = null;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\n closeDropdown() {\n this.isOpen = false;\n }\n\n // event handlers\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n }\n };\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.getNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement) {\n if (!this.dropdownRef || !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTop = optionTop - searchOffset;\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\n }\n }\n\n // render method\n render() {\n const style = {\n '--select-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n\n return (\n <Host style={style}>\n <div\n class={{\n 'sd-select': true,\n 'sd-select--open': this.isOpen,\n 'sd-select--disabled': this.disabled,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderLabel(this.label)}\n <div class=\"sd-select__container\">\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </div>\n </Host>\n );\n }\n\n private renderLabel(label?: string) {\n if (!label) return null;\n\n return <label class=\"sd-select__label\">{label}</label>;\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={event => {\n event.stopPropagation();\n this.value = null;\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n const style = {\n '--select-dropdown-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n if (this.isOpen === false) return null;\n\n return (\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\n <div\n class=\"sd-select__dropdown\"\n style={style}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <div\n class={{\n 'sd-select__search-container': true,\n 'sd-select__search-container--scrolled': this.isScrolled,\n }}\n onClick={event => event.stopPropagation()}\n >\n <sd-input\n ref={el => (this.searchRef = el)}\n value={this.searchText}\n placeholder=\"검색\"\n clearable\n inputStyle={{ 'padding-left': '8px' }}\n autofocus\n onSdInput={event => {\n this.searchText = String(event?.detail);\n }}\n onSdFocus={() => {\n this.itemIndex = -1;\n }}\n >\n <sd-icon\n name=\"search\"\n size={16}\n color=\"#737373\"\n style={{ marginRight: '4px' }}\n slot=\"prefix\"\n ></sd-icon>\n </sd-input>\n </div>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={option.value === this.value}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </sd-portal>\n );\n }\n}\n\n{\n /*\n <sd-select id=\"select-1\">\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\n </sd-select>\n <sd-select id=\"select-2\"> </sd-select>\n <sd-select id=\"select-3\" searchable clearable>\n <div slot=\"option-3\">test</div>\n </sd-select>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const select1 = document.getElementById('select-1');\n const select2 = document.getElementById('select-2');\n const select3 = document.getElementById('select-3');\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\n select1.optionPlaceholder = 'No options available';\n\n const options = [\n { label: 'Option 1', value: '1' },\n { label: 'Option 2', value: '2' },\n { label: 'Option 3', value: '3', disabled: true },\n { label: 'Option 4', value: '4' },\n { label: 'Option 5', value: '5' },\n { label: 'Option 6', value: '6' },\n { label: 'Option 7', value: '7', disabled: true },\n { label: 'Option 8', value: '8' },\n { label: 'Option 9', value: '9' },\n { label: 'Option 10', value: '10' },\n { label: 'Option 11', value: '11', disabled: true },\n { label: 'Option 12', value: '12' },\n { label: 'Option 13', value: '13' },\n { label: 'Option 14', value: '14' },\n { label: 'Option 15', value: '15', disabled: true },\n { label: 'Option 16', value: '16' },\n { label: 'Option 17', value: '17' },\n { label: 'Option 18', value: '18' },\n { label: 'Option 19', value: '19', disabled: true },\n { label: 'Option 20', value: '20' },\n { label: 'Option 21', value: '21' },\n { label: 'Option 22', value: '22' },\n { label: 'Option 23', value: '23', disabled: true },\n { label: 'Option 24', value: '24' },\n ];\n\n select2.options = options;\n select3.options = options;\n });\n </script>\n\n */\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-T0Fd7Ziu.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,4sFAA4sF;;MCmDntF,QAAS,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAQ,iBAAiB,CAAA;;;;;;;;;;;IAIrB,KAAK,GAA2B,IAAI;IACrD,KAAK,GAAW,EAAE;IACD,OAAO,GAAmB,EAAE;IAC7C,WAAW,GAAW,IAAI;IAC1B,iBAAiB,GAAW,WAAW;IACvC,KAAK,GAAW,OAAO;IACvB,cAAc,GAAW,OAAO;IAChC,QAAQ,GAAY,KAAK;IACzB,SAAS,GAAY,KAAK;IAC1B,UAAU,GAAY,KAAK;;AAG3B,IAAA,cAAc;;AAGb,IAAA,eAAe,GAAG,IAAI,CAAC,OAAO;IAC9B,MAAM,GAAY,KAAK;IACvB,UAAU,GAAkB,IAAI;IAChC,SAAS,GAAW,EAAE;IACtB,UAAU,GAAY,KAAK;;AAG3B,IAAA,QAAQ;AACR,IAAA,YAAY;AAEb,IAAA,SAAS;AACT,IAAA,SAAS;AACT,IAAA,SAAS;AACT,IAAA,WAAW;IAGnB,YAAY,GAAA;AACX,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;QAC/C,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,IAAI,EAAE,MAAM,EAAE,cAAc,IAAI,IAAI,EAAE,CAAC;;IAI9F,cAAc,GAAA;AACb,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;QACnC,IAAI,CAAC,aAAa,EAAE;;IAIrB,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;AAIrB,IAAA,MAAM,gBAAgB,CAAC,QAAgB,EAAE,QAAgB,EAAA;AACxD,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACpB,YAAA,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE;AACtD,YAAA,IAAI,IAAI,CAAC,SAAS,KAAK,EAAE,EAAE;gBAC1B,WAAW,EAAE,KAAK,EAAE;gBACpB;;AACM,iBAAA,IAAI,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC1C,WAAW,EAAE,IAAI,EAAE;;;AAIrB,QAAA,MAAM,cAAc,GACnB,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,uCAAuC,CAAC,IAAI,EAAE;QAClF,MAAM,WAAW,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;AAEpD,QAAA,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE;AAElC,QAAA,IAAI,CAAC,SAAS,GAAG,WAAwC;QACzD,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE;QAE1D,IAAI,gBAAgB,EAAE;AACrB,YAAA,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE;YACzD;;AAGD,QAAA,IAAI,CAAC,cAAc,CAAC,WAA0B,CAAC;;IAGhD,iBAAiB,GAAA;;AAEhB,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;AACnC,QAAA,IAAI,CAAC,eAAe,EAAE,CAAC;;IAGxB,oBAAoB,GAAA;AACnB,QAAA,IAAI,CAAC,YAAY,EAAE,CAAC;;AAIrB,IAAA,MAAM,aAAa,GAAA;;AAElB,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC;AAElC,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;QAC/C,IAAI,CAAC,cAAc,EAAE;YACpB,IAAI,CAAC,SAAS,4BAA4B,EAAE;;aACtC;YACN,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC;;AAGtD,QAAA,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhD,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;YAAE;AAE3B,QAAA,MAAM,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAErD,QAAA,MAAM,cAAc,GACnB,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,uCAAuC,CAAC,IAAI,EAAE;QAElF,MAAM,WAAW,GAAG,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;AAEpD,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACpB,YAAA,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE;YACtD,WAAW,EAAE,KAAK,EAAE;;AAGrB,QAAA,IAAI,CAAC,WAAW;YAAE;AAElB,QAAA,MAAM,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACrD,QAAA,IAAI,CAAC,cAAc,CAAC,WAA0B,CAAC;;AAGtC,IAAA,mBAAmB,CAAC,KAAY,EAAA;AACzC,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;AACpD,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;;AAIX,IAAA,qBAAqB,CAAC,aAA4B,EAAA;QAC3D,aAAa,CAAC,eAAe,EAAE;QAC/B,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC;QAC7D,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;YAAE;QAE5C,aAAa,CAAC,cAAc,EAAE;AAC9B,QAAA,QAAQ,aAAa,CAAC,GAAG;AACxB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,SAAS;AACb,gBAAA,MAAM,kBAAkB,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9F,gBAAA,MAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC;AACpF,gBAAA,IAAI,CAAC,SAAS,GAAG,SAAS;gBAC1B;AACD,YAAA,KAAK,OAAO;gBACX,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3D,gBAAA,IAAI,cAAc,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE;AAC/C,oBAAA,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK;AACjC,oBAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,oBAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;gBAEpB;AACD,YAAA,KAAK,QAAQ;AACZ,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK;gBACnB;;;;IAKH,aAAa,GAAA;AACZ,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;;AAIpB,IAAA,kBAAkB,GAAG,CAAC,KAAY,KAAI;QACrC,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;;AAElD,KAAC;AAED,IAAA,iBAAiB,GAAG,CAAC,MAA8C,KAAI;AACtE,QAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM;QAChC,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AACrB,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AACzB,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;;AAErB,KAAC;IAEO,aAAa,GAAA;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;AAEtD,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;;aAC7B;;AAEN,YAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAChD,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAW,CAAC,WAAW,EAAE,CAAC,CACnE;;;IAIK,iBAAiB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;;AAGxD,IAAA,oBAAoB,GAAG,CAAC,KAAY,KAAI;AAC/C,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,QAAA,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS;;AAGlC,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,GAAG,CAAC;AAChC,KAAC;AAEO,IAAA,MAAM,qBAAqB,GAAA;AAClC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE;;AAEzC,QAAA,OAAO,IAAI;;AAGJ,IAAA,cAAc,CAAC,aAA0B,EAAA;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,aAAa;YAAE;AAEzC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW;AACjC,QAAA,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS;AACzC,QAAA,MAAM,YAAY,GAAG,aAAa,CAAC,YAAY;AAC/C,QAAA,MAAM,iBAAiB,GAAG,QAAQ,CAAC,SAAS;AAC5C,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,YAAY;QAE5C,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC;AAC9E,QAAA,MAAM,YAAY,GAAG,eAAe,GAAI,eAA+B,CAAC,YAAY,GAAG,CAAC;AAExF,QAAA,MAAM,UAAU,GAAG,iBAAiB,GAAG,YAAY;AACnD,QAAA,MAAM,aAAa,GAAG,iBAAiB,GAAG,cAAc;AAExD,QAAA,IAAI,SAAS,GAAG,UAAU,EAAE;AAC3B,YAAA,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,YAAY;;AACvC,aAAA,IAAI,SAAS,GAAG,YAAY,GAAG,aAAa,EAAE;YACpD,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY;;;;IAK/E,MAAM,GAAA;AACL,QAAA,MAAM,KAAK,GAAG;AACb,YAAA,gBAAgB,EAAE,IAAI,CAAC,KAAK,IAAI,OAAO;AACvC,YAAA,0BAA0B,EAAE,IAAI,CAAC,cAAc,IAAI,OAAO;SAC1D;QAED,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,WAAW,EAAE,IAAI;gBACjB,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACpC,EACD,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAA,EAE/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,cAAc,EAAE,CACjB,CACD,CACA;;AAID,IAAA,WAAW,CAAC,KAAc,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,IAAI;AAEvB,QAAA,OAAO,aAAO,KAAK,EAAC,kBAAkB,EAAE,EAAA,KAAK,CAAS;;IAG/C,aAAa,GAAA;AACpB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;QAC/C,QACC,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,EAEhC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,kBAAkB,EAAE,EAAA,cAAc,GAAG,cAAc,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAQ,EAC/F,IAAI,CAAC,SAAS,IAAI,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,KAClD,CACC,CAAA,SAAA,EAAA,EAAA,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,KAAK,IAAG;gBAChB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AAClB,aAAC,GACS,CACX,EAED,CAAA,CAAA,SAAA,EAAA,EACC,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,CAChE,CACN;;IAIA,cAAc,GAAA;AACrB,QAAA,MAAM,KAAK,GAAG;AACb,YAAA,yBAAyB,EAAE,IAAI,CAAC,KAAK,IAAI,OAAO;AAChD,YAAA,0BAA0B,EAAE,IAAI,CAAC,cAAc,IAAI,OAAO;SAC1D;AACD,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;AAAE,YAAA,OAAO,IAAI;AAEtC,QAAA,QACC,CAAW,CAAA,WAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EACrF,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAA,EAEjC,IAAI,CAAC,UAAU,KACf,CAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE;AACN,gBAAA,6BAA6B,EAAE,IAAI;gBACnC,uCAAuC,EAAE,IAAI,CAAC,UAAU;AACxD,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,cAAI,EAChB,SAAS,QACT,UAAU,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EACrC,SAAS,EAAA,IAAA,EACT,SAAS,EAAE,KAAK,IAAG;gBAClB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;AACxC,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,SAAS,GAAG,EAAE;AACpB,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EAAA,CACH,CACD,CACN,CACN,EACA,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAC/B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MACtC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAE,CAAA,OAAA,EAAU,MAAM,CAAC,KAAK,CAAE,CAAA,EAAA,EACnC,CACC,CAAA,kBAAA,EAAA,EAAA,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EACvC,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,SAAS,EACnC,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAC1C,CAAA,CACd,CACP,CAAC,KAEF,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,oBAAoB,EAAA,EAC9B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,+BAA+B,EAAA,EAAG,IAAI,CAAC,iBAAiB,CAAO,CACrE,CACP,CACI,CACK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/sd-select/sd-select.scss?tag=sd-select","src/components/sd-select/sd-select.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select {\n display: flex;\n width: var(--select-width, 200px);\n height: 28px;\n position: relative;\n color: $grey_90;\n cursor: pointer;\n user-select: none;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: white;\n\n &:hover:not(.sd-select--disabled) {\n background: $grey_10;\n }\n\n &.sd-select--disabled {\n cursor: not-allowed;\n background-color: $grey_20;\n border-color: $grey_45;\n\n .sd-select__label {\n border-right: 1px solid $grey_45;\n }\n\n .sd-select__trigger {\n color: $grey_65;\n &:focus,\n &:focus-visible,\n &:focus-within {\n outline: none !important;\n }\n }\n }\n\n &__label {\n font-size: 12px;\n line-height: 20px;\n font-weight: 500;\n color: $grey_90;\n padding: 4px 12px;\n border-right: 1px solid $grey_45;\n border-radius: 4px 0 0 4px;\n background-color: $grey_10;\n display: inline-block;\n white-space: nowrap;\n }\n\n &__container {\n position: relative;\n width: 100%;\n display: flex;\n\n .sd-select__trigger {\n padding: 4px 20px 4px 12px;\n display: flex;\n width: 100%;\n align-items: center;\n\n .sd-select__value {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 20px;\n font-size: 12px;\n font-weight: 400;\n text-align: left;\n }\n\n .sd-select__clear {\n margin: 0 4px;\n width: 8px;\n height: 8px;\n background-color: transparent;\n outline: none;\n border: none;\n }\n }\n\n .sd-select__arrow {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n color: $grey_65;\n transition: transform 0.3s ease;\n\n &--open {\n transform: rotate(180deg);\n }\n }\n }\n}\n\n.sd-select__dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n\n .sd-select__search-container {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n padding: 4px 8px;\n\n &--scrolled {\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n }\n }\n\n .sd-select__option-placeholder {\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n text-align: left;\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n h,\n Element,\n Watch,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\n\nexport interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: SelectGroupOptionType;\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdChange: {\n value: string | number | null;\n option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdChange: SelectOption[] | null;\n}\n\n@Component({\n tag: 'sd-select',\n styleUrl: 'sd-select.scss',\n})\nexport class SdSelect extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: string | number | null = null;\n @Prop() label: string = '';\n @Prop({ mutable: true }) options: SelectOption[] = [];\n @Prop() placeholder: string = '선택';\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\n @Prop() width: string = '200px';\n @Prop() dropdownHeight: string = '260px';\n @Prop() disabled: boolean = false;\n @Prop() clearable: boolean = false;\n @Prop() searchable: boolean = false;\n\n // props - custom slots\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\n\n // states\n @State() filteredOptions = this.options;\n @State() isOpen: boolean = false;\n @State() searchText: string | null = null;\n @State() itemIndex: number = -1;\n @State() isScrolled: boolean = false;\n\n // events\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private searchRef?: HTMLSdInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n private dropdownRef?: HTMLElement;\n\n @Watch('value')\n valueChanged() {\n const selectedOption = this.getSelectedOption();\n this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\n }\n\n @Watch('options')\n optionsChanged() {\n this.filteredOptions = this.options;\n this.filterOptions();\n }\n\n @Watch('searchText')\n searchTextChanged() {\n this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n if (this.itemIndex === -1) {\n searchInput?.focus();\n return;\n } else if (searchInput?.matches(':focus')) {\n searchInput?.blur();\n }\n }\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem || !this.isOpen) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\n const isOptionDisabled = await this.optionRef.isDisabled();\n\n if (isOptionDisabled) {\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n return;\n }\n\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\n this.filteredOptions = this.options;\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\n }\n\n disconnectedCallback() {\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\n }\n\n @Watch('isOpen')\n async isOpenChanged() {\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\n this.onDropdownToggle(this.isOpen);\n\n const selectedOption = this.getSelectedOption();\n if (!selectedOption) {\n this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;\n } else {\n this.itemIndex = this.options.indexOf(selectedOption);\n }\n\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n\n if (this.isOpen === false) return;\n\n await new Promise(resolve => setTimeout(resolve, 10));\n\n const optionElements =\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\n\n const currentItem = optionElements?.[this.itemIndex];\n\n if (this.searchable) {\n const searchInput = await this.getNativeInputElement();\n searchInput?.focus();\n }\n\n if (!currentItem) return;\n\n await new Promise(resolve => setTimeout(resolve, 10));\n this.scrollToOption(currentItem as HTMLElement);\n }\n\n protected handleDocumentClick(event: Event): void {\n if (!this.selectRef?.contains(event.target as Node)) {\n this.isOpen = false;\n }\n }\n\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\n keyboardEvent.stopPropagation();\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\n if (!targetKey.includes(keyboardEvent.key)) return;\n\n keyboardEvent.preventDefault();\n switch (keyboardEvent.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\n this.itemIndex = nextIndex;\n break;\n case 'Enter':\n const selectedOption = this.filteredOptions[this.itemIndex];\n if (selectedOption && !selectedOption.disabled) {\n this.value = selectedOption.value;\n this.searchText = null;\n this.isOpen = false;\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\n }\n\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\n closeDropdown() {\n this.isOpen = false;\n }\n\n // event handlers\n handleTriggerClick = (event: Event) => {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.isOpen = !this.isOpen;\n this.dropDownShow?.emit({ isOpen: this.isOpen });\n }\n };\n\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (!option.disabled) {\n this.value = option.value;\n this.isOpen = false;\n }\n };\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n } else {\n // 검색어가 있으면 필터링\n this.filteredOptions = this.options.filter(option =>\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n );\n }\n }\n\n private getSelectedOption(): SelectOption | undefined {\n return this.options.find(option => option.value === this.value);\n }\n\n private handleDropdownScroll = (event: Event) => {\n const target = event.target as HTMLElement;\n const scrollTop = target.scrollTop;\n\n // 스크롤이 조금이라도 되면 그림자 표시\n this.isScrolled = scrollTop > 0;\n };\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n if (this.searchRef) {\n return this.searchRef.getNativeElement();\n }\n return null;\n }\n\n private scrollToOption(optionElement: HTMLElement) {\n if (!this.dropdownRef || !optionElement) return;\n\n const dropdown = this.dropdownRef;\n const optionTop = optionElement.offsetTop;\n const optionHeight = optionElement.offsetHeight;\n const dropdownScrollTop = dropdown.scrollTop;\n const dropdownHeight = dropdown.clientHeight;\n\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n const visibleTop = dropdownScrollTop + searchOffset;\n const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n if (optionTop < visibleTop) {\n dropdown.scrollTop = optionTop - searchOffset;\n } else if (optionTop + optionHeight > visibleBottom) {\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\n }\n }\n\n // render method\n render() {\n const style = {\n '--select-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n\n return (\n <Host style={style}>\n <div\n class={{\n 'sd-select': true,\n 'sd-select--open': this.isOpen,\n 'sd-select--disabled': this.disabled,\n }}\n ref={el => (this.selectRef = el)}\n >\n {this.renderLabel(this.label)}\n <div class=\"sd-select__container\">\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </div>\n </Host>\n );\n }\n\n private renderLabel(label?: string) {\n if (!label) return null;\n\n return <label class=\"sd-select__label\">{label}</label>;\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n >\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\n {this.clearable && selectedOption && !this.disabled && (\n <sd-icon\n key=\"clear-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select__clear\"\n onClick={event => {\n event.stopPropagation();\n this.value = null;\n }}\n ></sd-icon>\n )}\n\n <sd-icon\n key=\"arrow-icon\"\n name=\"arrowDown\"\n color=\"#888\"\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n const style = {\n '--select-dropdown-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\n if (this.isOpen === false) return null;\n\n return (\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\n <div\n class=\"sd-select__dropdown\"\n style={style}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <div\n class={{\n 'sd-select__search-container': true,\n 'sd-select__search-container--scrolled': this.isScrolled,\n }}\n onClick={event => event.stopPropagation()}\n >\n <sd-input\n ref={el => (this.searchRef = el)}\n value={this.searchText}\n placeholder=\"검색\"\n clearable\n inputStyle={{ 'padding-left': '8px' }}\n autofocus\n onSdInput={event => {\n this.searchText = String(event?.detail);\n }}\n onSdFocus={() => {\n this.itemIndex = -1;\n }}\n >\n <sd-icon\n name=\"search\"\n size={16}\n color=\"#737373\"\n style={{ marginRight: '4px' }}\n slot=\"prefix\"\n ></sd-icon>\n </sd-input>\n </div>\n )}\n {this.filteredOptions.length > 0 ? (\n this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option\n option={option}\n index={index}\n isSelected={option.value === this.value}\n isFocused={index === this.itemIndex}\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\n ></sd-select-option>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\n </slot>\n )}\n </div>\n </sd-portal>\n );\n }\n}\n\n{\n /*\n <sd-select id=\"select-1\">\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\n </sd-select>\n <sd-select id=\"select-2\"> </sd-select>\n <sd-select id=\"select-3\" searchable clearable>\n <div slot=\"option-3\">test</div>\n </sd-select>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const select1 = document.getElementById('select-1');\n const select2 = document.getElementById('select-2');\n const select3 = document.getElementById('select-3');\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\n select1.optionPlaceholder = 'No options available';\n\n const options = [\n { label: 'Option 1', value: '1' },\n { label: 'Option 2', value: '2' },\n { label: 'Option 3', value: '3', disabled: true },\n { label: 'Option 4', value: '4' },\n { label: 'Option 5', value: '5' },\n { label: 'Option 6', value: '6' },\n { label: 'Option 7', value: '7', disabled: true },\n { label: 'Option 8', value: '8' },\n { label: 'Option 9', value: '9' },\n { label: 'Option 10', value: '10' },\n { label: 'Option 11', value: '11', disabled: true },\n { label: 'Option 12', value: '12' },\n { label: 'Option 13', value: '13' },\n { label: 'Option 14', value: '14' },\n { label: 'Option 15', value: '15', disabled: true },\n { label: 'Option 16', value: '16' },\n { label: 'Option 17', value: '17' },\n { label: 'Option 18', value: '18' },\n { label: 'Option 19', value: '19', disabled: true },\n { label: 'Option 20', value: '20' },\n { label: 'Option 21', value: '21' },\n { label: 'Option 22', value: '22' },\n { label: 'Option 23', value: '23', disabled: true },\n { label: 'Option 24', value: '24' },\n ];\n\n select2.options = options;\n select3.options = options;\n });\n </script>\n\n */\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, F as Fragment } from './p-CbnL1UUF.js';
|
|
|
2
2
|
import { T as TooltipArrow } from './p-wA4KCOG0.js';
|
|
3
3
|
import { d as defineCustomElement$4 } from './p-BZjhXFoV.js';
|
|
4
4
|
import { d as defineCustomElement$3 } from './p-X8UHtq2f.js';
|
|
5
|
-
import { d as defineCustomElement$2 } from './p-
|
|
5
|
+
import { d as defineCustomElement$2 } from './p-BLVHOrsi.js';
|
|
6
6
|
|
|
7
7
|
const sdPopoverCss = ".sd-popover{position:relative;cursor:pointer;display:inline-block}";
|
|
8
8
|
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface SdProgress extends Components.SdProgress, HTMLElement {}
|
|
4
|
+
export const SdProgress: {
|
|
5
|
+
prototype: SdProgress;
|
|
6
|
+
new (): SdProgress;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, h, c as Host } from './p-CbnL1UUF.js';
|
|
2
|
+
|
|
3
|
+
const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:4px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
|
|
4
|
+
|
|
5
|
+
const SdProgress$1 = /*@__PURE__*/ proxyCustomElement(class SdProgress extends H {
|
|
6
|
+
constructor(registerHost) {
|
|
7
|
+
super();
|
|
8
|
+
if (registerHost !== false) {
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
type = 'bar';
|
|
13
|
+
status = 'default';
|
|
14
|
+
percentage = 0;
|
|
15
|
+
size = 80;
|
|
16
|
+
strokeWidth = 12;
|
|
17
|
+
label;
|
|
18
|
+
statusColor = {
|
|
19
|
+
default: '#aaaaaa',
|
|
20
|
+
progress: '#0075ff',
|
|
21
|
+
complete: '#12B553',
|
|
22
|
+
error: '#FB4444',
|
|
23
|
+
};
|
|
24
|
+
render() {
|
|
25
|
+
return (h(Host, { key: '2e2f7cf77bbc63dfb15910a3bc50ac45601020cd', style: {
|
|
26
|
+
'--progress-color': this.statusColor[this.status],
|
|
27
|
+
'--progress-percentage': `${this.percentage}%`,
|
|
28
|
+
} }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '3e72a490e148886c59345e5ac3161f760e0f4e85', class: "sd-progress__label" }, this.label)));
|
|
29
|
+
}
|
|
30
|
+
renderBarProgress() {
|
|
31
|
+
return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
|
|
32
|
+
}
|
|
33
|
+
renderSpinnerProgress() {
|
|
34
|
+
const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
|
|
35
|
+
const circumference = 2 * Math.PI * radius; // 원의 둘레
|
|
36
|
+
const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset
|
|
37
|
+
const progressBgSize = `${this.size}px`;
|
|
38
|
+
const progressSize = `${this.size / 2}px`;
|
|
39
|
+
return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
|
|
40
|
+
}
|
|
41
|
+
static get style() { return sdProgressCss; }
|
|
42
|
+
}, [768, "sd-progress", {
|
|
43
|
+
"type": [1],
|
|
44
|
+
"status": [1],
|
|
45
|
+
"percentage": [2],
|
|
46
|
+
"size": [2],
|
|
47
|
+
"strokeWidth": [2, "stroke-width"],
|
|
48
|
+
"label": [1]
|
|
49
|
+
}]);
|
|
50
|
+
function defineCustomElement$1() {
|
|
51
|
+
if (typeof customElements === "undefined") {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
const components = ["sd-progress"];
|
|
55
|
+
components.forEach(tagName => { switch (tagName) {
|
|
56
|
+
case "sd-progress":
|
|
57
|
+
if (!customElements.get(tagName)) {
|
|
58
|
+
customElements.define(tagName, SdProgress$1);
|
|
59
|
+
}
|
|
60
|
+
break;
|
|
61
|
+
} });
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const SdProgress = SdProgress$1;
|
|
65
|
+
const defineCustomElement = defineCustomElement$1;
|
|
66
|
+
|
|
67
|
+
export { SdProgress, defineCustomElement };
|
|
68
|
+
//# sourceMappingURL=sd-progress.js.map
|
|
69
|
+
|
|
70
|
+
//# sourceMappingURL=sd-progress.js.map
|