@sellmate/design-system 0.0.53 → 0.0.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{sd-button_21.cjs.entry.js → sd-button_23.cjs.entry.js} +591 -80
- package/dist/cjs/sd-popover.cjs.entry.js +2 -2
- package/dist/cjs/sd-progress.cjs.entry.js +2 -2
- package/dist/cjs/sd-select-multiple.cjs.entry.js +266 -0
- package/dist/cjs/sd-tbody_3.cjs.entry.js +3 -3
- package/dist/cjs/sd-td.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/sd-number-input/sd-number-input.css +128 -0
- package/dist/collection/components/sd-number-input/sd-number-input.js +744 -0
- package/dist/collection/components/sd-number-input/sd-number-input.js.map +1 -0
- package/dist/collection/components/sd-pagination/sd-pagination.js +2 -2
- package/dist/collection/components/sd-popover/sd-popover.js +2 -2
- package/dist/collection/components/sd-portal/sd-portal.js +1 -1
- package/dist/collection/components/sd-progress/sd-progress.js +2 -2
- package/dist/collection/components/sd-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-multiple-group.css +5 -0
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +91 -42
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js.map +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js +3 -3
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +1 -1
- package/dist/collection/components/sd-table/sd-td/sd-td.js +2 -2
- package/dist/collection/components/sd-table/sd-th/sd-th.js +1 -1
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +1 -1
- package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
- package/dist/collection/components/sd-toggle-button/sd-toggle-button.js +1 -1
- 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-CYadUxId.js → p-BBNolp5g.js} +3 -3
- package/dist/components/{p-CYadUxId.js.map → p-BBNolp5g.js.map} +1 -1
- package/dist/components/{p-71Aop19u.js → p-BH3t01Im.js} +5 -5
- package/dist/components/{p-71Aop19u.js.map → p-BH3t01Im.js.map} +1 -1
- package/dist/components/{p-Be8w5kOo.js → p-BqxmCDlz.js} +7 -7
- package/dist/components/{p-Be8w5kOo.js.map → p-BqxmCDlz.js.map} +1 -1
- package/dist/components/{p-B13lOU0D.js → p-C5T02a4h.js} +4 -4
- package/dist/components/{p-B13lOU0D.js.map → p-C5T02a4h.js.map} +1 -1
- package/dist/components/{p-Cf-LyLYk.js → p-CEDtmtIo.js} +3 -3
- package/dist/components/{p-Cf-LyLYk.js.map → p-CEDtmtIo.js.map} +1 -1
- package/dist/components/{p-DP33nj_I.js → p-Cx3euWvk.js} +3 -3
- package/dist/components/{p-DP33nj_I.js.map → p-Cx3euWvk.js.map} +1 -1
- package/dist/components/{p-ChQIkICO.js → p-DdeknsBE.js} +3 -3
- package/dist/components/{p-ChQIkICO.js.map → p-DdeknsBE.js.map} +1 -1
- package/dist/components/{p-j-ZEdgz4.js → p-GHGGjwP3.js} +3 -3
- package/dist/components/{p-j-ZEdgz4.js.map → p-GHGGjwP3.js.map} +1 -1
- package/dist/components/{p-B4wWf5r8.js → p-XAhTfI7Q.js} +4 -4
- package/dist/components/{p-B4wWf5r8.js.map → p-XAhTfI7Q.js.map} +1 -1
- package/dist/components/{p-CVtij2QI.js → p-at_j60O8.js} +3 -3
- package/dist/components/{p-CVtij2QI.js.map → p-at_j60O8.js.map} +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-number-input.d.ts +11 -0
- package/dist/components/sd-number-input.js +335 -0
- package/dist/components/sd-number-input.js.map +1 -0
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +3 -3
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-progress.js +2 -2
- package/dist/components/sd-select-multiple-group.js +74 -45
- package/dist/components/sd-select-multiple-group.js.map +1 -1
- package/dist/components/sd-select-multiple.js +4 -4
- package/dist/components/sd-select-option-group.js +1 -1
- package/dist/components/sd-select-option.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table-backup.js +6 -6
- package/dist/components/sd-table.js +9 -9
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +2 -2
- package/dist/components/sd-th.js +1 -1
- package/dist/components/sd-toggle-button.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip-portal.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-26266f8c.entry.js +2 -0
- package/dist/design-system/p-2df41cc3.entry.js +2 -0
- package/dist/design-system/p-2df41cc3.entry.js.map +1 -0
- package/dist/design-system/p-3cc7957d.entry.js +2 -0
- package/dist/design-system/p-a18c202d.entry.js +2 -0
- package/dist/design-system/{p-0cbdb34f.entry.js → p-b0668ce9.entry.js} +2 -2
- package/dist/design-system/{p-d02b3369.entry.js → p-f9e04bf9.entry.js} +2 -2
- package/dist/design-system/p-f9e04bf9.entry.js.map +1 -0
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{sd-button_21.entry.js → sd-button_23.entry.js} +589 -80
- package/dist/esm/sd-popover.entry.js +2 -2
- package/dist/esm/sd-progress.entry.js +2 -2
- package/dist/esm/sd-select-multiple.entry.js +264 -0
- package/dist/esm/sd-select-multiple.entry.js.map +1 -0
- package/dist/esm/sd-tbody_3.entry.js +3 -3
- package/dist/esm/sd-td.entry.js +2 -2
- package/dist/types/components/sd-number-input/sd-number-input.d.ts +58 -0
- package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +2 -0
- package/dist/types/components.d.ts +145 -0
- package/hydrate/index.js +407 -68
- package/hydrate/index.mjs +407 -68
- package/package.json +1 -1
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +0 -406
- package/dist/cjs/sd-select-option-group.cjs.entry.js +0 -69
- package/dist/design-system/p-1e7a06ef.entry.js +0 -2
- package/dist/design-system/p-761882f5.entry.js +0 -2
- package/dist/design-system/p-790ae9ce.entry.js +0 -2
- package/dist/design-system/p-790ae9ce.entry.js.map +0 -1
- package/dist/design-system/p-a8e8fc17.entry.js +0 -2
- package/dist/design-system/p-d02b3369.entry.js.map +0 -1
- package/dist/design-system/p-e492d625.entry.js +0 -2
- package/dist/design-system/p-e492d625.entry.js.map +0 -1
- package/dist/esm/sd-select-multiple-group.entry.js +0 -404
- package/dist/esm/sd-select-multiple-group.entry.js.map +0 -1
- package/dist/esm/sd-select-option-group.entry.js +0 -67
- package/dist/esm/sd-select-option-group.entry.js.map +0 -1
- /package/dist/design-system/{p-1e7a06ef.entry.js.map → p-26266f8c.entry.js.map} +0 -0
- /package/dist/design-system/{p-761882f5.entry.js.map → p-3cc7957d.entry.js.map} +0 -0
- /package/dist/design-system/{p-a8e8fc17.entry.js.map → p-a18c202d.entry.js.map} +0 -0
- /package/dist/design-system/{p-0cbdb34f.entry.js.map → p-b0668ce9.entry.js.map} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class SdTh {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '8b511af45184973c4daefe8bee11130934ef05be', role: "columnheader" }, h("slot", { key: 'a72bff519a60499357ccce741fa0b90cdf9197b7' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "sd-th"; }
|
|
7
7
|
static get originalStyleUrls() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class SdTr {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '45ae0547de2437e9b815e0ed33226276787805f7', role: "row" }, h("slot", { key: '98dabd2288d0db28bc9305f1b1b3298cb2a905d0' })));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "sd-tr"; }
|
|
7
7
|
static get originalStyleUrls() {
|
|
@@ -29,7 +29,7 @@ export class SdToggle {
|
|
|
29
29
|
this.sdChange.emit(newValue);
|
|
30
30
|
};
|
|
31
31
|
render() {
|
|
32
|
-
return (h("label", { key: '
|
|
32
|
+
return (h("label", { key: 'dda95f842f686a3f595db6ecb651551f717cab18', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'a281a6572b7fca32242ba08ad45984445bd1a009', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'dfae7796e9e421e7d6ebc6e6693e6266b2ff87cd', class: "sd-toggle__label" }, this.label), h("div", { key: 'e4343307f2df5f5c68509a3e9576a811bd9192ff', class: "sd-toggle__track" }, h("div", { key: 'be214081e5ccc21ad306e52ce186ba4dc56c6c3b', class: "sd-toggle__thumb" }))));
|
|
33
33
|
}
|
|
34
34
|
static get is() { return "sd-toggle"; }
|
|
35
35
|
static get originalStyleUrls() {
|
|
@@ -32,7 +32,7 @@ export class SdToggleButton {
|
|
|
32
32
|
this.sdChange.emit(newValue);
|
|
33
33
|
};
|
|
34
34
|
render() {
|
|
35
|
-
return (h("label", { key: '
|
|
35
|
+
return (h("label", { key: '4ac2cac1d4b1da4d707f4ce84a03ffc7a8ec7cb8', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'e9a974d34d7b3803b5ed44dc1b2da1199daf5bef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
36
36
|
}
|
|
37
37
|
static get is() { return "sd-toggle-button"; }
|
|
38
38
|
static get originalStyleUrls() {
|
|
@@ -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: '55a62a0b80b8c10d8c0d8ced1a34178191b8a688' }, 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: '21aaf4460591401ec5eb890d123e3cb381fb76f6', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: 'ee5d301a2fa72f95a0f89242b174f7e21a086a15', 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: '4f7e09f6770fbde0f2e9df81d401ea7cd6739df2', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'd0856082e623129eb56aaab87e54d1b19f33555a', class: {
|
|
54
54
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
55
|
-
} })), h("div", { key: '
|
|
55
|
+
} })), h("div", { key: '40dc2a7d4254ed0e712f22cf19032e2f5ef846b4', 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: 'd897c210bb76de430a89243177f3a436cc684e09' }, this.el.textContent)), this.useClose && (h("div", { key: 'ca41d884070a25443833162e2dc50fcb91a6bd2a', class: "sd-tooltip-menu__close-button" }, h("button", { key: '75c911fa76787dda3346b4f18d6169304966d49b', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '4d737bf6cc2952776016b9bc7f11cf90364cdcdb', name: "close", size: "12", color: "#AAAAAA" })))))))));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "sd-tooltip"; }
|
|
62
62
|
static get originalStyleUrls() {
|
|
@@ -144,7 +144,7 @@ export class SdTooltipPortal {
|
|
|
144
144
|
this.sdClose.emit();
|
|
145
145
|
}
|
|
146
146
|
render() {
|
|
147
|
-
return h("slot", { key: '
|
|
147
|
+
return h("slot", { key: 'c389b848b1dc63a0484f6000ac5443cce752e4ac' });
|
|
148
148
|
}
|
|
149
149
|
static get is() { return "sd-tooltip-portal"; }
|
|
150
150
|
static get encapsulation() { return "shadow"; }
|
|
@@ -121,7 +121,7 @@ const SdPortal = /*@__PURE__*/ proxyCustomElement(class SdPortal extends H {
|
|
|
121
121
|
this.sdClose.emit();
|
|
122
122
|
}
|
|
123
123
|
render() {
|
|
124
|
-
return h("slot", { key: '
|
|
124
|
+
return h("slot", { key: 'd93a68ecf1a281765225bf204cd479bb4b7bfdbf' });
|
|
125
125
|
}
|
|
126
126
|
}, [772, "sd-portal", {
|
|
127
127
|
"to": [1],
|
|
@@ -145,6 +145,6 @@ function defineCustomElement() {
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
export { SdPortal as S, defineCustomElement as d };
|
|
148
|
-
//# sourceMappingURL=p-
|
|
148
|
+
//# sourceMappingURL=p-BBNolp5g.js.map
|
|
149
149
|
|
|
150
|
-
//# sourceMappingURL=p-
|
|
150
|
+
//# sourceMappingURL=p-BBNolp5g.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BBNolp5g.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-portal',\r\n shadow: false,\r\n})\r\nexport class SdPortal {\r\n @Element() hostEl!: HTMLElement;\r\n @Prop() to: HTMLElement | string = 'body';\r\n @Prop() parentRef: HTMLElement | null = null;\r\n @Prop() offset: [number, number] = [0, 4];\r\n @Prop() zIndex: number = 9999;\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 componentDidLoad() {\r\n this.container = this.resolveContainer();\r\n this.createWrapper();\r\n this.moveSlotContent();\r\n this.updatePosition();\r\n this.observeParent();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.wrapper) return;\r\n this.wrapper.style.display = this.open ? 'block' : 'none';\r\n if (this.open) this.updatePosition();\r\n }\r\n\r\n disconnectedCallback() {\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 });\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.hostEl.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 this.rafId = requestAnimationFrame(() => {\r\n if (!this.parentRef || !this.wrapper) return;\r\n\r\n const parentRect = this.parentRef.getBoundingClientRect();\r\n const wrapperRect = this.wrapper.getBoundingClientRect();\r\n const viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n };\r\n\r\n let top = parentRect.bottom + window.scrollY + this.offset[1];\r\n let left = parentRect.left + window.scrollX + this.offset[0];\r\n\r\n // 화면 상하단 넘어갈 시 반전\r\n if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\r\n top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\r\n }\r\n if (top < window.scrollY) {\r\n top = parentRect.bottom + window.scrollY + this.offset[1];\r\n }\r\n\r\n // 화면 좌우측 넘어갈 시 반전\r\n if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\r\n left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\r\n }\r\n if (left < 0) {\r\n left = this.offset[0];\r\n }\r\n\r\n this.wrapper.style.top = `${top}px`;\r\n this.wrapper.style.left = `${left}px`;\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"],"version":3}
|
|
@@ -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: 'd00236bc84a194509b25efa21ef1c53a25923a60', 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: 'c635bb5ce073594dd05926529472db1665d5f86d', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '984289c89fe90f0cd40a3d022a29b9b974321db0', 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: 'b01a4ad8c906d6990dcf5c8eb1affa17f3605452', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '9103fa0bfe93caf8b5c3dea936334cd22727dff0', 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-BH3t01Im.js.map
|
|
108
108
|
|
|
109
|
-
//# sourceMappingURL=p-
|
|
109
|
+
//# sourceMappingURL=p-BH3t01Im.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BH3t01Im.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';\r\n\r\nsd-select-option-group {\r\n display: block;\r\n height: fit-content;\r\n .sd-select__option-group {\r\n display: flex;\r\n padding: 4px 12px;\r\n padding-left: 12px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n cursor: pointer;\r\n\r\n &.sd-select__option-group--group,\r\n &.sd-select__option-group--subgroup {\r\n &:not(.sd-select__option-group--use-checkbox) {\r\n cursor: default !important;\r\n }\r\n }\r\n\r\n &.sd-select__option-group--group {\r\n background-color: $brilliantblue_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 700;\r\n }\r\n\r\n &.sd-select__option-group--subgroup {\r\n padding-left: 20px;\r\n background-color: $grey_05 !important;\r\n color: $grey_90 !important;\r\n font-weight: 500;\r\n }\r\n\r\n &.sd-select__option-group--item {\r\n padding-left: 28px;\r\n }\r\n\r\n sd-checkbox {\r\n &__bg {\r\n border-color: $grey_65;\r\n }\r\n }\r\n\r\n &__label-wrapper {\r\n display: flex;\r\n width: 100%;\r\n column-gap: 8px;\r\n align-items: center;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n\r\n sd-checkbox {\r\n flex-shrink: 0;\r\n }\r\n\r\n .sd-select__option-group-label {\r\n flex: 0 1 auto;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .sd-select__option-group__count-indicator {\r\n width: fit-content;\r\n flex-shrink: 0;\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: $grey_65;\r\n }\r\n }\r\n\r\n &--focused {\r\n background-color: $brilliantblue_20;\r\n }\r\n\r\n &--selected,\r\n &--focused {\r\n &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n color: $brilliantblue_75;\r\n font-weight: 700;\r\n }\r\n }\r\n\r\n &--disabled {\r\n color: $grey_55;\r\n cursor: not-allowed;\r\n }\r\n\r\n &:hover {\r\n &:not(.sd-select__option-group--disabled) {\r\n background-color: $brilliantblue_75;\r\n color: white;\r\n }\r\n\r\n &.sd-select__option-group--selected {\r\n &:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) {\r\n sd-checkbox {\r\n .sd-checkbox__bg {\r\n border-color: white !important;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n @Prop() useIndicator?: boolean = true;\r\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\r\n selectedCount: 0,\r\n totalCount: 0,\r\n };\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n index: number;\r\n event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n option: SelectOptionGroup,\r\n isSelected: boolean | null,\r\n event: MouseEvent,\r\n ) => {\r\n event.stopPropagation();\r\n\r\n if (option.type === 'group' || option.type === 'subgroup') {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n return;\r\n }\r\n\r\n if (!this.option.disabled && !this.disabled) {\r\n this.optionClick.emit({\r\n option: this.option,\r\n isSelected,\r\n index: this.index,\r\n event,\r\n });\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <div\r\n class={{\r\n 'sd-select__option-group': true,\r\n 'sd-select__option-group--selected': !!this.isSelected,\r\n 'sd-select__option-group--disabled': !!this.option.disabled,\r\n 'sd-select__option-group--focused': this.isFocused,\r\n 'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n 'sd-select__option-group--group': this.option.type === 'group',\r\n 'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n 'sd-select__option-group--item': this.option.type === 'item',\r\n }}\r\n onMouseEnter={() => (this.isHovered = true)}\r\n onMouseLeave={() => (this.isHovered = false)}\r\n style={this.optionStyle}\r\n data-index={this.index}\r\n onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n >\r\n <div class=\"sd-select__option-group__label-wrapper\">\r\n {this.useCheckbox && (\r\n <sd-checkbox\r\n checked={this.isSelected}\r\n disabled={this.option.disabled}\r\n onClick={e => {\r\n e.preventDefault();\r\n this.handleClick(this.option, this.isSelected, e);\r\n }}\r\n ></sd-checkbox>\r\n )}\r\n <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n {this.useIndicator && this.option.type !== 'item' && (\r\n <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from
|
|
|
2
2
|
import { T as TooltipArrow } from './p-BDkKpeVz.js';
|
|
3
3
|
import { d as defineCustomElement$3 } from './p-B05GJor3.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-CV5tKC24.js';
|
|
5
|
-
import { d as defineCustomElement$1 } from './p-
|
|
5
|
+
import { d as defineCustomElement$1 } from './p-Cx3euWvk.js';
|
|
6
6
|
|
|
7
7
|
const sdTooltipCss = () => `sd-tooltip [slot=content]{display:none}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.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: '55a62a0b80b8c10d8c0d8ced1a34178191b8a688' }, 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: '21aaf4460591401ec5eb890d123e3cb381fb76f6', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: 'ee5d301a2fa72f95a0f89242b174f7e21a086a15', 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: '4f7e09f6770fbde0f2e9df81d401ea7cd6739df2', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'd0856082e623129eb56aaab87e54d1b19f33555a', class: {
|
|
66
66
|
[`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
|
|
67
|
-
} })), h("div", { key: '
|
|
67
|
+
} })), h("div", { key: '40dc2a7d4254ed0e712f22cf19032e2f5ef846b4', 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: 'd897c210bb76de430a89243177f3a436cc684e09' }, this.el.textContent)), this.useClose && (h("div", { key: 'ca41d884070a25443833162e2dc50fcb91a6bd2a', class: "sd-tooltip-menu__close-button" }, h("button", { key: '75c911fa76787dda3346b4f18d6169304966d49b', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '4d737bf6cc2952776016b9bc7f11cf90364cdcdb', 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-BqxmCDlz.js.map
|
|
120
120
|
|
|
121
|
-
//# sourceMappingURL=p-
|
|
121
|
+
//# sourceMappingURL=p-BqxmCDlz.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-BqxmCDlz.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 {\r\n [slot='content'] {\r\n display: none;\r\n }\r\n\r\n .sd-tooltip {\r\n position: relative;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n}\r\n\r\n.sd-tooltip-menu {\r\n width: fit-content;\r\n padding: 8px 16px;\r\n border-radius: 4px;\r\n font-size: 12px;\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: start;\r\n justify-content: center;\r\n gap: 12px;\r\n\r\n &--with-close {\r\n padding-right: 12px !important;\r\n }\r\n\r\n &__arrow {\r\n position: absolute;\r\n display: flex;\r\n width: 9.6px;\r\n height: 7.2px;\r\n svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n &--top {\r\n bottom: -7.2px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n &--bottom {\r\n top: -7.2px;\r\n left: 50%;\r\n transform: translateX(-50%) rotate(180deg);\r\n }\r\n &--left {\r\n right: -7.2px;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(-90deg);\r\n }\r\n &--right {\r\n left: -7.2px;\r\n top: 50%;\r\n transform: translateY(-50%) rotate(90deg);\r\n }\r\n }\r\n\r\n &__content {\r\n line-height: 20px;\r\n font-weight: 500;\r\n\r\n p {\r\n margin: 0;\r\n }\r\n }\r\n\r\n &__close-button {\r\n padding-top: 4px;\r\n display: flex;\r\n button {\r\n padding: 0;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\r\nimport { HTMLStencilElement } from '@stencil/core/internal';\r\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\r\nimport { TooltipArrow } from '../assets/tooltipArrow';\r\n\r\n@Component({\r\n tag: 'sd-tooltip',\r\n styleUrl: 'sd-tooltip.scss',\r\n})\r\nexport class SdTooltip {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() trigger: 'hover' | 'click' = 'hover';\r\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\r\n @Prop() color: string = '#01BB4B';\r\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\r\n\r\n @Prop() icon: IconName = 'helpOutline';\r\n @Prop() iconSize: number = 12;\r\n\r\n @Prop() label: string = '';\r\n @Prop() buttonSize: ButtonSize = 'sm';\r\n @Prop() buttonVariant: ButtonVariant = 'primary';\r\n\r\n @Prop() noHover: boolean = true;\r\n\r\n @Prop() useClose: boolean = false;\r\n\r\n @State() showTooltip: boolean = false;\r\n @State() slotContent: HTMLElement | null = null;\r\n\r\n private static readonly COLOR_OF_TYPE = {\r\n default: { background: 'oceanblue_85', text: 'white' },\r\n caution: { background: 'red_20', text: 'red_70' },\r\n notice: { background: 'orange_10', text: 'orange_65' },\r\n accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\r\n };\r\n\r\n private buttonEl?: HTMLStencilElement;\r\n\r\n private handleClose = () => {\r\n this.showTooltip = false;\r\n };\r\n\r\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\r\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\r\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\r\n componentWillLoad() {\r\n const contentEl = this.el.querySelector('[slot=\"content\"]');\r\n if (contentEl) {\r\n this.slotContent = contentEl.cloneNode(true) as HTMLElement;\r\n }\r\n }\r\n\r\n render() {\r\n const handleTrigger =\r\n this.trigger === 'hover'\r\n ? {\r\n onMouseEnter: () => (this.showTooltip = true),\r\n onMouseLeave: () => (this.showTooltip = false),\r\n }\r\n : {\r\n onClick: () => (this.showTooltip = !this.showTooltip),\r\n };\r\n\r\n return (\r\n <Fragment>\r\n {this.label ? (\r\n <sd-button\r\n ref={el => (this.buttonEl = el)}\r\n label={this.label}\r\n icon={this.icon}\r\n size={this.buttonSize}\r\n color={this.color}\r\n variant={this.buttonVariant}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-button>\r\n ) : (\r\n <sd-icon\r\n ref={el => (this.buttonEl = el)}\r\n name={this.icon}\r\n size={this.iconSize}\r\n color={this.color}\r\n class=\"sd-tooltip\"\r\n {...handleTrigger}\r\n ></sd-icon>\r\n )}\r\n\r\n {this.showTooltip && (\r\n <sd-tooltip-portal\r\n parentRef={this.buttonEl}\r\n onSdClose={() => this.handleClose()}\r\n placement={this.placement}\r\n >\r\n <div\r\n class={{\r\n 'sd-tooltip-menu': true,\r\n [`sd-tooltip-menu--${this.type}`]: true,\r\n [`sd-tooltip-menu--${this.placement}`]: true,\r\n 'sd-tooltip-menu--with-close': this.useClose,\r\n [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\r\n }}\r\n >\r\n <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\r\n <TooltipArrow\r\n class={{\r\n [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\r\n }}\r\n ></TooltipArrow>\r\n </i>\r\n\r\n <div\r\n class=\"sd-tooltip-menu__content\"\r\n ref={el => {\r\n if (el && this.slotContent && !el.hasChildNodes()) {\r\n el.appendChild(this.slotContent.cloneNode(true));\r\n }\r\n }}\r\n >\r\n {!this.slotContent && <span>{this.el.textContent}</span>}\r\n </div>\r\n\r\n {this.useClose && (\r\n <div class=\"sd-tooltip-menu__close-button\">\r\n <button\r\n type=\"button\"\r\n aria-label=\"Close tooltip\"\r\n title=\"Close tooltip\"\r\n onClick={() => this.handleClose()}\r\n >\r\n <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n </sd-tooltip-portal>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -3,8 +3,8 @@ import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-B3H_u
|
|
|
3
3
|
import { d as defineCustomElement$5 } from './p-C7kMNSz9.js';
|
|
4
4
|
import { d as defineCustomElement$4 } from './p-CV5tKC24.js';
|
|
5
5
|
import { d as defineCustomElement$3 } from './p-DY9yCaP9.js';
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
-
import { d as defineCustomElement$1 } from './p-
|
|
6
|
+
import { d as defineCustomElement$2 } from './p-BBNolp5g.js';
|
|
7
|
+
import { d as defineCustomElement$1 } from './p-GHGGjwP3.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
|
|
|
@@ -322,6 +322,6 @@ function defineCustomElement() {
|
|
|
322
322
|
}
|
|
323
323
|
|
|
324
324
|
export { SdSelect as S, defineCustomElement as d };
|
|
325
|
-
//# sourceMappingURL=p-
|
|
325
|
+
//# sourceMappingURL=p-C5T02a4h.js.map
|
|
326
326
|
|
|
327
|
-
//# sourceMappingURL=p-
|
|
327
|
+
//# sourceMappingURL=p-C5T02a4h.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-B13lOU0D.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';\r\n@import 'extend';\r\n\r\n.sd-select {\r\n display: flex;\r\n width: var(--select-width, 200px);\r\n height: 28px;\r\n position: relative;\r\n color: $grey_90;\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select--disabled) {\r\n background: $grey_10;\r\n }\r\n\r\n &.sd-select--disabled {\r\n cursor: not-allowed;\r\n background-color: $grey_20;\r\n border-color: $grey_45;\r\n\r\n .sd-select__label {\r\n border-right: 1px solid $grey_45;\r\n }\r\n\r\n .sd-select__trigger {\r\n color: $grey_65;\r\n &:focus,\r\n &:focus-visible,\r\n &:focus-within {\r\n outline: none !important;\r\n }\r\n }\r\n }\r\n\r\n &__label {\r\n font-size: 12px;\r\n line-height: 20px;\r\n font-weight: 500;\r\n color: $grey_90;\r\n padding: 4px 12px;\r\n border-right: 1px solid $grey_45;\r\n border-radius: 4px 0 0 4px;\r\n background-color: $grey_10;\r\n display: inline-block;\r\n white-space: nowrap;\r\n }\r\n\r\n &__container {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n\r\n .sd-select__trigger {\r\n padding: 4px 20px 4px 12px;\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n\r\n .sd-select__value {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n line-height: 20px;\r\n font-size: 12px;\r\n font-weight: 400;\r\n text-align: left;\r\n }\r\n\r\n .sd-select__clear {\r\n margin: 0 4px;\r\n width: 8px;\r\n height: 8px;\r\n background-color: transparent;\r\n outline: none;\r\n border: none;\r\n }\r\n }\r\n\r\n .sd-select__arrow {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n width: 12px;\r\n height: 12px;\r\n color: $grey_65;\r\n transition: transform 0.3s ease;\r\n\r\n &--open {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-select__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-dropdown-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n color: $grey_90;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .sd-select__search-container {\r\n position: sticky;\r\n top: 0;\r\n display: flex;\r\n width: 100%;\r\n background-color: white;\r\n align-items: center;\r\n padding: 4px 8px;\r\n\r\n &--scrolled {\r\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n }\r\n\r\n .sd-select__option-placeholder {\r\n padding: 4px 12px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: left;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n Method,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string | number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: SelectGroupOptionType;\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n value: string | number | null;\r\n option: SelectOption | null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\r\n sdChange: SelectOption[] | null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string | number | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Method()\r\n async open() {\r\n this.isOpen = true;\r\n }\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n const selectedOption = this.getSelectedOption();\r\n this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n this.filteredOptions = this.options;\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n if (this.itemIndex === -1) {\r\n searchInput?.focus({ preventScroll: true });\r\n return;\r\n } else if (searchInput?.matches(':focus')) {\r\n searchInput?.blur();\r\n }\r\n }\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (!currentItem || !this.isOpen) return;\r\n\r\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n if (isOptionDisabled) {\r\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n return;\r\n }\r\n\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n this.filteredOptions = this.options;\r\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n this.onDropdownToggle(this.isOpen);\r\n\r\n const selectedOption = this.getSelectedOption();\r\n if (!selectedOption) {\r\n this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;\r\n } else {\r\n this.itemIndex = this.options.indexOf(selectedOption);\r\n }\r\n\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n if (this.isOpen === false) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n searchInput?.focus({ preventScroll: true });\r\n }\r\n\r\n if (!currentItem) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n if (!this.selectRef?.contains(event.target as Node)) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n keyboardEvent.stopPropagation();\r\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n keyboardEvent.preventDefault();\r\n switch (keyboardEvent.key) {\r\n case 'ArrowDown':\r\n case 'ArrowUp':\r\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n this.itemIndex = nextIndex;\r\n break;\r\n case 'Enter':\r\n const selectedOption = this.filteredOptions[this.itemIndex];\r\n if (selectedOption && !selectedOption.disabled) {\r\n this.value = selectedOption.value;\r\n this.searchText = null;\r\n this.isOpen = false;\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.isOpen = !this.isOpen;\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n const { option, event } = detail;\r\n event.stopPropagation();\r\n\r\n if (!option.disabled) {\r\n this.value = option.value;\r\n this.isOpen = false;\r\n }\r\n };\r\n\r\n private filterOptions() {\r\n if (!this.searchText || this.searchText.trim() === '') {\r\n // 검색어가 없으면 전체 옵션 표시\r\n this.filteredOptions = this.options;\r\n } else {\r\n // 검색어가 있으면 필터링\r\n this.filteredOptions = this.options.filter(option =>\r\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n );\r\n }\r\n }\r\n\r\n private getSelectedOption(): SelectOption | undefined {\r\n return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n const target = event.target as HTMLElement;\r\n const scrollTop = target.scrollTop;\r\n\r\n // 스크롤이 조금이라도 되면 그림자 표시\r\n this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n if (this.searchRef) {\r\n return this.searchRef.getNativeElement();\r\n }\r\n return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n if (!this.dropdownRef || !optionElement) return;\r\n\r\n const dropdown = this.dropdownRef;\r\n const optionTop = optionElement.offsetTop;\r\n const optionHeight = optionElement.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n const visibleTop = dropdownScrollTop + searchOffset;\r\n const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n if (optionTop < visibleTop) {\r\n dropdown.scrollTop = optionTop - searchOffset;\r\n } else if (optionTop + optionHeight > visibleBottom) {\r\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n }\r\n }\r\n\r\n // render method\r\n render() {\r\n const style = {\r\n '--select-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n\r\n return (\r\n <Host style={style}>\r\n <div\r\n class={{\r\n 'sd-select': true,\r\n 'sd-select--open': this.isOpen,\r\n 'sd-select--disabled': this.disabled,\r\n }}\r\n ref={el => (this.selectRef = el)}\r\n >\r\n {this.renderLabel(this.label)}\r\n <div class=\"sd-select__container\">\r\n {this.renderTrigger()}\r\n {this.renderDropdown()}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n if (!label) return null;\r\n\r\n return <label class=\"sd-select__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n const selectedOption = this.getSelectedOption();\r\n return (\r\n <div\r\n class=\"sd-select__trigger\"\r\n tabindex={this.disabled ? -1 : 0}\r\n onClick={this.handleTriggerClick}\r\n >\r\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n {this.clearable && selectedOption && !this.disabled && (\r\n <sd-icon\r\n key=\"clear-icon\"\r\n name=\"close\"\r\n size={10}\r\n color=\"#888\"\r\n class=\"sd-select__clear\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n this.value = null;\r\n }}\r\n ></sd-icon>\r\n )}\r\n\r\n <sd-icon\r\n key=\"arrow-icon\"\r\n name=\"arrowDown\"\r\n color=\"#888\"\r\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n ></sd-icon>\r\n </div>\r\n );\r\n }\r\n\r\n private renderDropdown() {\r\n const style = {\r\n '--select-dropdown-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n if (this.isOpen === false) return null;\r\n\r\n return (\r\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n <div\r\n class=\"sd-select__dropdown\"\r\n style={style}\r\n onScroll={this.handleDropdownScroll}\r\n ref={el => (this.dropdownRef = el)}\r\n >\r\n {this.searchable && (\r\n <div\r\n class={{\r\n 'sd-select__search-container': true,\r\n 'sd-select__search-container--scrolled': this.isScrolled,\r\n }}\r\n onClick={event => event.stopPropagation()}\r\n >\r\n <sd-input\r\n ref={el => (this.searchRef = el)}\r\n value={this.searchText}\r\n placeholder=\"검색\"\r\n clearable\r\n inputStyle={{ 'padding-left': '8px' }}\r\n autofocus\r\n onSdInput={event => {\r\n this.searchText = String(event?.detail);\r\n }}\r\n onSdFocus={() => {\r\n this.itemIndex = -1;\r\n }}\r\n >\r\n <sd-icon\r\n name=\"search\"\r\n size={16}\r\n color=\"#737373\"\r\n style={{ marginRight: '4px' }}\r\n slot=\"prefix\"\r\n ></sd-icon>\r\n </sd-input>\r\n </div>\r\n )}\r\n {this.filteredOptions.length > 0 ? (\r\n this.filteredOptions.map((option, index) => (\r\n <slot name={`option-${option.value}`}>\r\n <sd-select-option\r\n option={option}\r\n index={index}\r\n isSelected={option.value === this.value}\r\n isFocused={index === this.itemIndex}\r\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n ></sd-select-option>\r\n </slot>\r\n ))\r\n ) : (\r\n <slot name=\"option-placeholder\">\r\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\r\n </slot>\r\n )}\r\n </div>\r\n </sd-portal>\r\n );\r\n }\r\n}\r\n\r\n{\r\n /*\r\n <sd-select id=\"select-1\">\r\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n </sd-select>\r\n <sd-select id=\"select-2\"> </sd-select>\r\n <sd-select id=\"select-3\" searchable clearable>\r\n <div slot=\"option-3\">test</div>\r\n </sd-select>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const select1 = document.getElementById('select-1');\r\n const select2 = document.getElementById('select-2');\r\n const select3 = document.getElementById('select-3');\r\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n select1.optionPlaceholder = 'No options available';\r\n\r\n const options = [\r\n { label: 'Option 1', value: '1' },\r\n { label: 'Option 2', value: '2' },\r\n { label: 'Option 3', value: '3', disabled: true },\r\n { label: 'Option 4', value: '4' },\r\n { label: 'Option 5', value: '5' },\r\n { label: 'Option 6', value: '6' },\r\n { label: 'Option 7', value: '7', disabled: true },\r\n { label: 'Option 8', value: '8' },\r\n { label: 'Option 9', value: '9' },\r\n { label: 'Option 10', value: '10' },\r\n { label: 'Option 11', value: '11', disabled: true },\r\n { label: 'Option 12', value: '12' },\r\n { label: 'Option 13', value: '13' },\r\n { label: 'Option 14', value: '14' },\r\n { label: 'Option 15', value: '15', disabled: true },\r\n { label: 'Option 16', value: '16' },\r\n { label: 'Option 17', value: '17' },\r\n { label: 'Option 18', value: '18' },\r\n { label: 'Option 19', value: '19', disabled: true },\r\n { label: 'Option 20', value: '20' },\r\n { label: 'Option 21', value: '21' },\r\n { label: 'Option 22', value: '22' },\r\n { label: 'Option 23', value: '23', disabled: true },\r\n { label: 'Option 24', value: '24' },\r\n ];\r\n\r\n select2.options = options;\r\n select3.options = options;\r\n });\r\n </script>\r\n\r\n */\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"p-C5T02a4h.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';\r\n@import 'extend';\r\n\r\n.sd-select {\r\n display: flex;\r\n width: var(--select-width, 200px);\r\n height: 28px;\r\n position: relative;\r\n color: $grey_90;\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select--disabled) {\r\n background: $grey_10;\r\n }\r\n\r\n &.sd-select--disabled {\r\n cursor: not-allowed;\r\n background-color: $grey_20;\r\n border-color: $grey_45;\r\n\r\n .sd-select__label {\r\n border-right: 1px solid $grey_45;\r\n }\r\n\r\n .sd-select__trigger {\r\n color: $grey_65;\r\n &:focus,\r\n &:focus-visible,\r\n &:focus-within {\r\n outline: none !important;\r\n }\r\n }\r\n }\r\n\r\n &__label {\r\n font-size: 12px;\r\n line-height: 20px;\r\n font-weight: 500;\r\n color: $grey_90;\r\n padding: 4px 12px;\r\n border-right: 1px solid $grey_45;\r\n border-radius: 4px 0 0 4px;\r\n background-color: $grey_10;\r\n display: inline-block;\r\n white-space: nowrap;\r\n }\r\n\r\n &__container {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n\r\n .sd-select__trigger {\r\n padding: 4px 20px 4px 12px;\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n\r\n .sd-select__value {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n line-height: 20px;\r\n font-size: 12px;\r\n font-weight: 400;\r\n text-align: left;\r\n }\r\n\r\n .sd-select__clear {\r\n margin: 0 4px;\r\n width: 8px;\r\n height: 8px;\r\n background-color: transparent;\r\n outline: none;\r\n border: none;\r\n }\r\n }\r\n\r\n .sd-select__arrow {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n width: 12px;\r\n height: 12px;\r\n color: $grey_65;\r\n transition: transform 0.3s ease;\r\n\r\n &--open {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-select__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-dropdown-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n color: $grey_90;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n .sd-select__search-container {\r\n position: sticky;\r\n top: 0;\r\n display: flex;\r\n width: 100%;\r\n background-color: white;\r\n align-items: center;\r\n padding: 4px 8px;\r\n\r\n &--scrolled {\r\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n }\r\n\r\n .sd-select__option-placeholder {\r\n padding: 4px 12px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n text-align: left;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n h,\r\n Element,\r\n Watch,\r\n Method,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOption {\r\n value: string | number;\r\n label: string;\r\n disabled?: boolean;\r\n}\r\n\r\nexport type SelectGroupOptionType = 'group' | 'subgroup' | 'item' | 'all';\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: SelectGroupOptionType;\r\n parent?: string;\r\n}\r\n\r\nexport interface SelectStyleProps {\r\n containerStyle?: { [key: string]: string };\r\n triggerStyle?: { [key: string]: string };\r\n dropdownStyle?: { [key: string]: string };\r\n optionStyle?: { [key: string]: string };\r\n labelStyle?: { [key: string]: string };\r\n}\r\n\r\nexport interface SelectEvents {\r\n sdChange: {\r\n value: string | number | null;\r\n option: SelectOption | null;\r\n };\r\n dropDownShow: { isOpen: boolean };\r\n}\r\n\r\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\r\n sdChange: SelectOption[] | null;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select',\r\n styleUrl: 'sd-select.scss',\r\n})\r\nexport class SdSelect extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: string | number | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Method()\r\n async open() {\r\n this.isOpen = true;\r\n }\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n const selectedOption = this.getSelectedOption();\r\n this.sdChange?.emit({ value: selectedOption?.value || null, option: selectedOption || null });\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n this.filteredOptions = this.options;\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n if (this.itemIndex === -1) {\r\n searchInput?.focus({ preventScroll: true });\r\n return;\r\n } else if (searchInput?.matches(':focus')) {\r\n searchInput?.blur();\r\n }\r\n }\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (!currentItem || !this.isOpen) return;\r\n\r\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n if (isOptionDisabled) {\r\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n return;\r\n }\r\n\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n componentWillLoad() {\r\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n this.filteredOptions = this.options;\r\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n this.onDropdownToggle(this.isOpen);\r\n\r\n const selectedOption = this.getSelectedOption();\r\n if (!selectedOption) {\r\n this.itemIndex = /* this.searchable ? */ -1 /* : 0 */;\r\n } else {\r\n this.itemIndex = this.options.indexOf(selectedOption);\r\n }\r\n\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n if (this.isOpen === false) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n const optionElements =\r\n this.dropdownRef?.querySelectorAll('.sd-select__dropdown sd-select-option') || [];\r\n\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n searchInput?.focus({ preventScroll: true });\r\n }\r\n\r\n if (!currentItem) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n if (!this.selectRef?.contains(event.target as Node)) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n keyboardEvent.stopPropagation();\r\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n keyboardEvent.preventDefault();\r\n switch (keyboardEvent.key) {\r\n case 'ArrowDown':\r\n case 'ArrowUp':\r\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n this.itemIndex = nextIndex;\r\n break;\r\n case 'Enter':\r\n const selectedOption = this.filteredOptions[this.itemIndex];\r\n if (selectedOption && !selectedOption.disabled) {\r\n this.value = selectedOption.value;\r\n this.searchText = null;\r\n this.isOpen = false;\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n // closeDropdown 메서드 구현 (Manager에서 호출됨)\r\n closeDropdown() {\r\n this.isOpen = false;\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.isOpen = !this.isOpen;\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n const { option, event } = detail;\r\n event.stopPropagation();\r\n\r\n if (!option.disabled) {\r\n this.value = option.value;\r\n this.isOpen = false;\r\n }\r\n };\r\n\r\n private filterOptions() {\r\n if (!this.searchText || this.searchText.trim() === '') {\r\n // 검색어가 없으면 전체 옵션 표시\r\n this.filteredOptions = this.options;\r\n } else {\r\n // 검색어가 있으면 필터링\r\n this.filteredOptions = this.options.filter(option =>\r\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n );\r\n }\r\n }\r\n\r\n private getSelectedOption(): SelectOption | undefined {\r\n return this.options.find(option => option.value === this.value);\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n const target = event.target as HTMLElement;\r\n const scrollTop = target.scrollTop;\r\n\r\n // 스크롤이 조금이라도 되면 그림자 표시\r\n this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n if (this.searchRef) {\r\n return this.searchRef.getNativeElement();\r\n }\r\n return null;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n if (!this.dropdownRef || !optionElement) return;\r\n\r\n const dropdown = this.dropdownRef;\r\n const optionTop = optionElement.offsetTop;\r\n const optionHeight = optionElement.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n const visibleTop = dropdownScrollTop + searchOffset;\r\n const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n if (optionTop < visibleTop) {\r\n dropdown.scrollTop = optionTop - searchOffset;\r\n } else if (optionTop + optionHeight > visibleBottom) {\r\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n }\r\n }\r\n\r\n // render method\r\n render() {\r\n const style = {\r\n '--select-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n\r\n return (\r\n <Host style={style}>\r\n <div\r\n class={{\r\n 'sd-select': true,\r\n 'sd-select--open': this.isOpen,\r\n 'sd-select--disabled': this.disabled,\r\n }}\r\n ref={el => (this.selectRef = el)}\r\n >\r\n {this.renderLabel(this.label)}\r\n <div class=\"sd-select__container\">\r\n {this.renderTrigger()}\r\n {this.renderDropdown()}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n if (!label) return null;\r\n\r\n return <label class=\"sd-select__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n const selectedOption = this.getSelectedOption();\r\n return (\r\n <div\r\n class=\"sd-select__trigger\"\r\n tabindex={this.disabled ? -1 : 0}\r\n onClick={this.handleTriggerClick}\r\n >\r\n <span class=\"sd-select__value\">{selectedOption ? selectedOption.label : this.placeholder}</span>\r\n {this.clearable && selectedOption && !this.disabled && (\r\n <sd-icon\r\n key=\"clear-icon\"\r\n name=\"close\"\r\n size={10}\r\n color=\"#888\"\r\n class=\"sd-select__clear\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n this.value = null;\r\n }}\r\n ></sd-icon>\r\n )}\r\n\r\n <sd-icon\r\n key=\"arrow-icon\"\r\n name=\"arrowDown\"\r\n color=\"#888\"\r\n class={{ 'sd-select__arrow': true, 'sd-select__arrow--open': this.isOpen }}\r\n ></sd-icon>\r\n </div>\r\n );\r\n }\r\n\r\n private renderDropdown() {\r\n const style = {\r\n '--select-dropdown-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n if (this.isOpen === false) return null;\r\n\r\n return (\r\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n <div\r\n class=\"sd-select__dropdown\"\r\n style={style}\r\n onScroll={this.handleDropdownScroll}\r\n ref={el => (this.dropdownRef = el)}\r\n >\r\n {this.searchable && (\r\n <div\r\n class={{\r\n 'sd-select__search-container': true,\r\n 'sd-select__search-container--scrolled': this.isScrolled,\r\n }}\r\n onClick={event => event.stopPropagation()}\r\n >\r\n <sd-input\r\n ref={el => (this.searchRef = el)}\r\n value={this.searchText}\r\n placeholder=\"검색\"\r\n clearable\r\n inputStyle={{ 'padding-left': '8px' }}\r\n autofocus\r\n onSdInput={event => {\r\n this.searchText = String(event?.detail);\r\n }}\r\n onSdFocus={() => {\r\n this.itemIndex = -1;\r\n }}\r\n >\r\n <sd-icon\r\n name=\"search\"\r\n size={16}\r\n color=\"#737373\"\r\n style={{ marginRight: '4px' }}\r\n slot=\"prefix\"\r\n ></sd-icon>\r\n </sd-input>\r\n </div>\r\n )}\r\n {this.filteredOptions.length > 0 ? (\r\n this.filteredOptions.map((option, index) => (\r\n <slot name={`option-${option.value}`}>\r\n <sd-select-option\r\n option={option}\r\n index={index}\r\n isSelected={option.value === this.value}\r\n isFocused={index === this.itemIndex}\r\n onOptionClick={({ detail }) => this.handleOptionClick(detail)}\r\n ></sd-select-option>\r\n </slot>\r\n ))\r\n ) : (\r\n <slot name=\"option-placeholder\">\r\n <div class={'sd-select__option-placeholder'}>{this.optionPlaceholder}</div>\r\n </slot>\r\n )}\r\n </div>\r\n </sd-portal>\r\n );\r\n }\r\n}\r\n\r\n{\r\n /*\r\n <sd-select id=\"select-1\">\r\n <!-- <div slot=\"option-placeholder\">옵션이 없습니다.</div> -->\r\n </sd-select>\r\n <sd-select id=\"select-2\"> </sd-select>\r\n <sd-select id=\"select-3\" searchable clearable>\r\n <div slot=\"option-3\">test</div>\r\n </sd-select>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const select1 = document.getElementById('select-1');\r\n const select2 = document.getElementById('select-2');\r\n const select3 = document.getElementById('select-3');\r\n const select = document.querySelector('sd-select slot[name=\"option-3\"]');\r\n select1.optionPlaceholder = 'No options available';\r\n\r\n const options = [\r\n { label: 'Option 1', value: '1' },\r\n { label: 'Option 2', value: '2' },\r\n { label: 'Option 3', value: '3', disabled: true },\r\n { label: 'Option 4', value: '4' },\r\n { label: 'Option 5', value: '5' },\r\n { label: 'Option 6', value: '6' },\r\n { label: 'Option 7', value: '7', disabled: true },\r\n { label: 'Option 8', value: '8' },\r\n { label: 'Option 9', value: '9' },\r\n { label: 'Option 10', value: '10' },\r\n { label: 'Option 11', value: '11', disabled: true },\r\n { label: 'Option 12', value: '12' },\r\n { label: 'Option 13', value: '13' },\r\n { label: 'Option 14', value: '14' },\r\n { label: 'Option 15', value: '15', disabled: true },\r\n { label: 'Option 16', value: '16' },\r\n { label: 'Option 17', value: '17' },\r\n { label: 'Option 18', value: '18' },\r\n { label: 'Option 19', value: '19', disabled: true },\r\n { label: 'Option 20', value: '20' },\r\n { label: 'Option 21', value: '21' },\r\n { label: 'Option 22', value: '22' },\r\n { label: 'Option 23', value: '23', disabled: true },\r\n { label: 'Option 24', value: '24' },\r\n ];\r\n\r\n select2.options = options;\r\n select3.options = options;\r\n });\r\n </script>\r\n\r\n */\r\n}\r\n"],"version":3}
|
|
@@ -10,7 +10,7 @@ const SdTbody = /*@__PURE__*/ proxyCustomElement(class SdTbody extends H {
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '7636f7ff23e8aa3c83ace885c5f2ad3fa1e57a45' }, h("slot", { key: '9cdae57011b78e861dab1c16144642c534aaa9e4' })));
|
|
14
14
|
}
|
|
15
15
|
static get style() { return sdTbodyCss(); }
|
|
16
16
|
}, [260, "sd-tbody"]);
|
|
@@ -29,6 +29,6 @@ function defineCustomElement() {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
export { SdTbody as S, defineCustomElement as d };
|
|
32
|
-
//# sourceMappingURL=p-
|
|
32
|
+
//# sourceMappingURL=p-CEDtmtIo.js.map
|
|
33
33
|
|
|
34
|
-
//# sourceMappingURL=p-
|
|
34
|
+
//# sourceMappingURL=p-CEDtmtIo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-CEDtmtIo.js","mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,iCAAiC,CAAC;;MCM/C,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;IACnB,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACP;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-table/sd-tbody/sd-tbody.scss?tag=sd-tbody","src/components/sd-table/sd-tbody/sd-tbody.tsx"],"sourcesContent":["sd-tbody {\r\n display: table-row-group;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-tbody',\r\n styleUrl: 'sd-tbody.scss',\r\n})\r\nexport class SdTbody {\r\n render() {\r\n return (\r\n <Host>\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -153,7 +153,7 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
|
|
|
153
153
|
this.sdClose.emit();
|
|
154
154
|
}
|
|
155
155
|
render() {
|
|
156
|
-
return h("slot", { key: '
|
|
156
|
+
return h("slot", { key: 'c389b848b1dc63a0484f6000ac5443cce752e4ac' });
|
|
157
157
|
}
|
|
158
158
|
}, [769, "sd-tooltip-portal", {
|
|
159
159
|
"to": [1],
|
|
@@ -178,6 +178,6 @@ function defineCustomElement() {
|
|
|
178
178
|
}
|
|
179
179
|
|
|
180
180
|
export { SdTooltipPortal as S, defineCustomElement as d };
|
|
181
|
-
//# sourceMappingURL=p-
|
|
181
|
+
//# sourceMappingURL=p-Cx3euWvk.js.map
|
|
182
182
|
|
|
183
|
-
//# sourceMappingURL=p-
|
|
183
|
+
//# sourceMappingURL=p-Cx3euWvk.js.map
|