@sellmate/design-system 0.0.31 → 0.0.32
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.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-button_13.cjs.entry.js +2 -2
- package/dist/cjs/sd-progress.cjs.entry.js +1 -1
- package/dist/cjs/sd-progress.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-select-multiple-group.cjs.entry.js +30 -9
- package/dist/cjs/sd-select-multiple-group.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-select-option-group.cjs.entry.js +1 -1
- package/dist/cjs/sd-select-option-group.entry.cjs.js.map +1 -1
- package/dist/collection/components/sd-progress/sd-progress.css +1 -1
- package/dist/collection/components/sd-select/sd-select.js +2 -2
- package/dist/collection/components/sd-select/sd-select.js.map +1 -1
- package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.js +51 -10
- 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.css +7 -4
- package/dist/components/{p-T0Fd7Ziu.js → p-B5RhRjFk.js} +4 -4
- package/dist/components/p-B5RhRjFk.js.map +1 -0
- package/dist/components/{p-B18yJb2O.js → p-CDNsy2Lv.js} +3 -3
- package/dist/components/p-CDNsy2Lv.js.map +1 -0
- package/dist/components/sd-progress.js +1 -1
- package/dist/components/sd-progress.js.map +1 -1
- package/dist/components/sd-select-multiple-group.js +33 -11
- package/dist/components/sd-select-multiple-group.js.map +1 -1
- package/dist/components/sd-select-option-group.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-56b88d9b.entry.js +2 -0
- package/dist/design-system/{p-1b6b3344.entry.js.map → p-56b88d9b.entry.js.map} +1 -1
- package/dist/design-system/{p-760dafe5.entry.js → p-7a9028ae.entry.js} +2 -2
- package/dist/design-system/p-93569289.entry.js +2 -0
- package/dist/design-system/p-93569289.entry.js.map +1 -0
- package/dist/design-system/{p-6d1c2089.entry.js → p-ac7dbf3c.entry.js} +2 -2
- package/dist/design-system/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -1
- package/dist/design-system/sd-progress.entry.esm.js.map +1 -1
- package/dist/design-system/sd-select-multiple-group.entry.esm.js.map +1 -1
- package/dist/design-system/sd-select-option-group.entry.esm.js.map +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button.sd-checkbox.sd-guide.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table.sd-tooltip.sd-tooltip-portal.entry.js.map +1 -1
- package/dist/esm/sd-button_13.entry.js +2 -2
- package/dist/esm/sd-progress.entry.js +1 -1
- package/dist/esm/sd-progress.entry.js.map +1 -1
- package/dist/esm/sd-select-multiple-group.entry.js +31 -10
- package/dist/esm/sd-select-multiple-group.entry.js.map +1 -1
- package/dist/esm/sd-select-option-group.entry.js +1 -1
- package/dist/esm/sd-select-option-group.entry.js.map +1 -1
- package/dist/types/components/sd-select/sd-select.d.ts +1 -1
- package/dist/types/components/sd-select-multiple-group/sd-select-multiple-group.d.ts +10 -1
- package/dist/types/components.d.ts +8 -0
- package/hydrate/index.js +35 -13
- package/hydrate/index.mjs +35 -13
- package/package.json +2 -2
- package/dist/components/p-B18yJb2O.js.map +0 -1
- package/dist/components/p-T0Fd7Ziu.js.map +0 -1
- package/dist/design-system/p-1b6b3344.entry.js +0 -2
- package/dist/design-system/p-5e0ac5e6.entry.js +0 -2
- package/dist/design-system/p-5e0ac5e6.entry.js.map +0 -1
- /package/dist/design-system/{p-760dafe5.entry.js.map → p-7a9028ae.entry.js.map} +0 -0
- /package/dist/design-system/{p-6d1c2089.entry.js.map → p-ac7dbf3c.entry.js.map} +0 -0
|
@@ -1318,11 +1318,11 @@ const SdSelect = class extends selectKeyboardNavigation.BaseDropdownEvent {
|
|
|
1318
1318
|
'--select-width': this.width || '200px',
|
|
1319
1319
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
1320
1320
|
};
|
|
1321
|
-
return (index.h(index.Host, { key: '
|
|
1321
|
+
return (index.h(index.Host, { key: '51133eafc1c4b8cb79845c3b36abeb933d92bd9d', style: style }, index.h("div", { key: 'cdd8fb1798088a7ea4e44ce921dcc652a455cc39', class: {
|
|
1322
1322
|
'sd-select': true,
|
|
1323
1323
|
'sd-select--open': this.isOpen,
|
|
1324
1324
|
'sd-select--disabled': this.disabled,
|
|
1325
|
-
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '
|
|
1325
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '6e09cfbbb0807cbeff40a7dfe0a9d037a31e58bf', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
1326
1326
|
}
|
|
1327
1327
|
renderLabel(label) {
|
|
1328
1328
|
if (!label)
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DXo1Fhkn.js');
|
|
4
4
|
|
|
5
|
-
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:
|
|
5
|
+
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:8px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
|
|
6
6
|
|
|
7
7
|
const SdProgress = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-progress.entry.cjs.js","sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\n\nsd-progress {\n display: block;\n\n .sd-progress__bar {\n position: relative;\n width: 360px;\n height: 20px;\n overflow: hidden;\n border-radius: 4px;\n background-color: $grey_20;\n text-align: center;\n\n &__percent {\n width: var(--progress-percentage);\n height: 100%;\n border-radius: 4px;\n background-color: var(--progress-color, $brilliantblue_75);\n transition: all 0.5s;\n &.proceed {\n border-top-right-radius: 50%;\n }\n }\n &__indicator {\n position: absolute;\n left: 0;\n top: 0;\n height: 20px;\n width: 100%;\n background-color: $grey_20;\n line-height: 21px;\n z-index: 1;\n }\n\n &__indicator--left {\n color: var(--progress-color, $brilliantblue_75);\n clip-path: inset(0 0 0 var(--progress-percentage));\n }\n\n &__indicator--right {\n color: white;\n background-color: var(--progress-color, $brilliantblue_75);\n clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\n }\n }\n\n .sd-progress__spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n svg {\n transform: rotate(-90deg);\n }\n\n &__label {\n margin-top:
|
|
1
|
+
{"version":3,"file":"sd-progress.entry.cjs.js","sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\n\nsd-progress {\n display: block;\n\n .sd-progress__bar {\n position: relative;\n width: 360px;\n height: 20px;\n overflow: hidden;\n border-radius: 4px;\n background-color: $grey_20;\n text-align: center;\n\n &__percent {\n width: var(--progress-percentage);\n height: 100%;\n border-radius: 4px;\n background-color: var(--progress-color, $brilliantblue_75);\n transition: all 0.5s;\n &.proceed {\n border-top-right-radius: 50%;\n }\n }\n &__indicator {\n position: absolute;\n left: 0;\n top: 0;\n height: 20px;\n width: 100%;\n background-color: $grey_20;\n line-height: 21px;\n z-index: 1;\n }\n\n &__indicator--left {\n color: var(--progress-color, $brilliantblue_75);\n clip-path: inset(0 0 0 var(--progress-percentage));\n }\n\n &__indicator--right {\n color: white;\n background-color: var(--progress-color, $brilliantblue_75);\n clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\n }\n }\n\n .sd-progress__spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n svg {\n transform: rotate(-90deg);\n }\n\n &__label {\n margin-top: 8px;\n font-size: 16px;\n color: var(--progress-color, $brilliantblue_75);\n }\n }\n\n .sd-progress__label {\n margin-top: 4px;\n font-size: 12px;\n color: $grey_95;\n text-align: center;\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-progress',\n styleUrl: 'sd-progress.scss',\n})\nexport class SdProgress {\n @Prop() type: 'bar' | 'spinner' = 'bar';\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\n @Prop() percentage: number = 0;\n @Prop() size: number = 80;\n @Prop() strokeWidth: number = 12;\n @Prop() label?: string;\n\n private statusColor = {\n default: '#aaaaaa',\n progress: '#0075ff',\n complete: '#12B553',\n error: '#FB4444',\n };\n\n render() {\n return (\n <Host\n style={{\n '--progress-color': this.statusColor[this.status],\n '--progress-percentage': `${this.percentage}%`,\n }}\n >\n {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\n {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\n </Host>\n );\n }\n\n renderBarProgress() {\n return (\n <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\n <div\n class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\n ></div>\n <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\n {this.percentage}%\n </div>\n <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\n {this.percentage}%\n </div>\n </div>\n );\n }\n\n renderSpinnerProgress() {\n const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\n const circumference = 2 * Math.PI * radius; // 원의 둘레\n const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\n const progressBgSize = `${this.size}px`;\n const progressSize = `${this.size / 2}px`;\n\n return (\n <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\n <svg width={progressBgSize} height={progressBgSize}>\n <circle\n cx={progressSize}\n cy={progressSize}\n r={radius}\n stroke=\"#EEEEEE\"\n stroke-width={this.strokeWidth}\n fill=\"transparent\"\n />\n <circle\n cx={progressSize}\n cy={progressSize}\n r={radius}\n stroke={this.statusColor[this.status]}\n stroke-width={this.strokeWidth}\n fill=\"transparent\"\n stroke-dasharray={circumference}\n stroke-dashoffset={offset}\n stroke-linecap=\"round\"\n class=\"transition-all duration-500\"\n />\n </svg>\n <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\n </div>\n );\n }\n}\n\n// <sd-progress id=\"sd-progress-1\"></sd-progress>\n// <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\n// <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\n// <script>\n// document.addEventListener('DOMContentLoaded', event => {\n// progress = document.getElementById('sd-progress-1');\n// progress2 = document.getElementById('sd-progress-2');\n// progress3 = document.getElementById('sd-progress-3');\n// progress2.label = 'test label...';\n// progress3.percentage = 50;\n// progress3.status = 'error';\n// let percentage = 0;\n// const interval = setInterval(() => {\n// if (percentage >= 100) {\n// clearInterval(interval);\n// progress.status = 'complete';\n// progress2.status = 'complete';\n// return;\n// }\n// percentage += 10;\n// progress.status = 'progress';\n// progress.percentage = percentage;\n// progress2.status = 'progress';\n// progress2.percentage = percentage;\n// }, 500);\n// });\n// </script>\n"],"names":["h","Host"],"mappings":"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"}
|
|
@@ -25,6 +25,7 @@ const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdow
|
|
|
25
25
|
clearable = false;
|
|
26
26
|
searchable = false;
|
|
27
27
|
useCheckbox = false;
|
|
28
|
+
useAll = false;
|
|
28
29
|
// props - custom styles
|
|
29
30
|
containerStyle = {};
|
|
30
31
|
triggerStyle = {};
|
|
@@ -150,6 +151,16 @@ const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdow
|
|
|
150
151
|
this.dropDownShow?.emit({ isOpen: this.isOpen });
|
|
151
152
|
}
|
|
152
153
|
};
|
|
154
|
+
handleAllOptionClick = (detail) => {
|
|
155
|
+
if (detail.isSelected) {
|
|
156
|
+
// 이미 선택된 옵션인 경우, 선택 해제
|
|
157
|
+
this.value = [];
|
|
158
|
+
}
|
|
159
|
+
else {
|
|
160
|
+
// 새로운 옵션 선택
|
|
161
|
+
this.value = [...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled)];
|
|
162
|
+
}
|
|
163
|
+
};
|
|
153
164
|
handleOptionClick = (detail) => {
|
|
154
165
|
const { option, event } = detail;
|
|
155
166
|
event.stopPropagation();
|
|
@@ -288,6 +299,19 @@ const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdow
|
|
|
288
299
|
totalCount: children.length,
|
|
289
300
|
};
|
|
290
301
|
}
|
|
302
|
+
isAllOptionsSelected() {
|
|
303
|
+
const selectedOption = this.getSelectedOption();
|
|
304
|
+
return (selectedOption.length === this.options.filter(opt => !opt.disabled && opt.type === 'item').length);
|
|
305
|
+
}
|
|
306
|
+
getTriggerLabel() {
|
|
307
|
+
const selectedOption = this.getSelectedOption();
|
|
308
|
+
if (!selectedOption)
|
|
309
|
+
return '선택';
|
|
310
|
+
if (selectedOption.length === 0)
|
|
311
|
+
return this.placeholder;
|
|
312
|
+
const isAllChecked = this.isAllOptionsSelected();
|
|
313
|
+
return isAllChecked ? '전체' : selectedOption.map(option => option.label).join(', ');
|
|
314
|
+
}
|
|
291
315
|
closeDropdown() {
|
|
292
316
|
this.isOpen = false;
|
|
293
317
|
}
|
|
@@ -315,11 +339,11 @@ const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdow
|
|
|
315
339
|
'--select-width': this.width || '200px',
|
|
316
340
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
317
341
|
};
|
|
318
|
-
return (index.h(index.Host, { key: '
|
|
342
|
+
return (index.h(index.Host, { key: '825a5e69af88a908c41c0c82bfb5fed4afeb9f5f', style: style }, index.h("div", { key: '81827e04db3de7194162594db4d918b37e7bd3a2', class: {
|
|
319
343
|
'sd-select-multiple-group': true,
|
|
320
344
|
'sd-select-multiple-group--open': this.isOpen,
|
|
321
345
|
'sd-select-multiple-group--disabled': this.disabled,
|
|
322
|
-
}, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), index.h("div", { key: '
|
|
346
|
+
}, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), index.h("div", { key: '23be24a0f971270b3e449cad4f56699f65716fb0', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
323
347
|
}
|
|
324
348
|
renderLabel(label, labelStyle) {
|
|
325
349
|
if (!label)
|
|
@@ -328,11 +352,7 @@ const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdow
|
|
|
328
352
|
}
|
|
329
353
|
renderTrigger() {
|
|
330
354
|
const selectedOption = this.getSelectedOption();
|
|
331
|
-
return (index.h("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, index.h("span", { class: "sd-select-multiple-group__value" }, !
|
|
332
|
-
? '선택'
|
|
333
|
-
: selectedOption.length
|
|
334
|
-
? selectedOption.map(option => option.label).join(', ')
|
|
335
|
-
: this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (index.h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
|
|
355
|
+
return (index.h("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, index.h("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (index.h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
|
|
336
356
|
event.stopPropagation();
|
|
337
357
|
this.value = null;
|
|
338
358
|
} })), index.h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
|
|
@@ -357,14 +377,15 @@ const SdSelectMultipleGroup = class extends selectKeyboardNavigation.BaseDropdow
|
|
|
357
377
|
}, onKeyDown: e => {
|
|
358
378
|
if (e.code === 'Enter')
|
|
359
379
|
e.stopPropagation();
|
|
360
|
-
} }, index.h("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (
|
|
380
|
+
} }, index.h("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (index.h(index.Fragment, null, this.useAll && (index.h("sd-select-option-group", { option: { label: '전체 선택', value: 'all', type: 'all' }, index: 0, isSelected: this.value?.length ===
|
|
381
|
+
this.options.filter(opt => !opt.disabled && opt.type === 'item').length, isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option-group", { option: option, index: index$1, isSelected: option.type === 'item'
|
|
361
382
|
? this.value?.some(selected => selected.value === option.value)
|
|
362
383
|
: this.isAllChildrenSelected(option), isFocused: index$1 === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => {
|
|
363
384
|
if (option.type !== 'item' && !this.useCheckbox) {
|
|
364
385
|
return;
|
|
365
386
|
}
|
|
366
387
|
this.handleOptionClick(detail);
|
|
367
|
-
}, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
|
|
388
|
+
}, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
|
|
368
389
|
}
|
|
369
390
|
static get watchers() { return {
|
|
370
391
|
"value": ["valueChanged"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-select-multiple-group.entry.cjs.js","sources":["src/components/sd-select-multiple-group/sd-select-multiple-group.scss?tag=sd-select-multiple-group","src/components/sd-select-multiple-group/sd-select-multiple-group.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select-multiple-group {\n display: inline-block;\n height: fit-content;\n .sd-select-multiple-group {\n display: flex;\n flex-wrap: nowrap;\n width: var(--select-width, 200px);\n cursor: pointer;\n user-select: none;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: white;\n color: $grey_90;\n\n &:hover:not(.sd-select-multiple-group--disabled) {\n background: $grey_10;\n }\n\n &.sd-select-multiple-group--disabled {\n cursor: not-allowed;\n background-color: $grey_20;\n border-color: $grey_45;\n\n .sd-select-multiple-group__label {\n border-right: 1px solid $grey_45;\n }\n\n .sd-select-multiple-group__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 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 }\n\n &__container {\n position: relative;\n width: 100%;\n display: flex;\n\n .sd-select-multiple-group__trigger {\n padding: 4px 20px 4px 12px;\n display: flex;\n width: 100%;\n align-items: center;\n\n .sd-select-multiple-group__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 }\n\n .sd-select-multiple-group__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-multiple-group__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\n.sd-select-multiple-group__dropdown {\n @extend %scrollBar;\n width: var(--select-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\n .sd-select-multiple-group__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 sd-input {\n width: 100%;\n }\n\n &--scrolled {\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n }\n }\n\n .sd-select-multiple-group__option-placeholder {\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectMultipleEvents, SelectOption, SelectStyleProps } from '../sd-select/sd-select';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: 'group' | 'subgroup' | 'item';\n parent?: string;\n}\n\n@Component({\n tag: 'sd-select-multiple-group',\n styleUrl: 'sd-select-multiple-group.scss',\n})\nexport class SdSelectMultipleGroup extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: SelectOptionGroup[] | null = null;\n @Prop() label: string = '';\n @Prop({ mutable: true }) options: SelectOptionGroup[] = [];\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 @Prop() useCheckbox: boolean = false;\n\n // props - custom styles\n @Prop() containerStyle: SelectStyleProps['containerStyle'] = {};\n @Prop() triggerStyle: SelectStyleProps['triggerStyle'] = {};\n @Prop() dropdownStyle: SelectStyleProps['dropdownStyle'] = {};\n @Prop() optionStyle: SelectStyleProps['optionStyle'] = {};\n @Prop() labelStyle: SelectStyleProps['labelStyle'] = {};\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<SelectMultipleEvents['sdChange']>;\n @Event() dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private searchRef?: HTMLSdInputElement;\n private optionRef?: HTMLSdSelectOptionGroupElement;\n private dropdownRef?: HTMLElement;\n\n @Watch('value')\n valueChanged() {\n this.sdChange?.emit(this.value);\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 = Array.from(\n this.dropdownRef?.querySelectorAll(\n '.sd-select-multiple-group__dropdown sd-select-option-group',\n ) || [],\n );\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem || !this.isOpen) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionGroupElement;\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 @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 = -1;\n } else {\n this.itemIndex = this.options.indexOf(selectedOption[0]);\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 = Array.from(\n this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || [],\n );\n const currentItem = optionElements?.[this.itemIndex];\n\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 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 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.handleOptionSelection(selectedOption);\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\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: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n event: MouseEvent;\n }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (option.type === 'group') this.handleGroupOptionClick(detail);\n if (option.type === 'subgroup') this.handleSubGroupOptionClick(detail);\n if (option.type === 'item') this.handleOptionSelection(option);\n };\n\n handleGroupOptionClick = (detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n }) => {\n const { option, isSelected } = detail;\n const childOptions = this.filteredOptions.filter(\n opt => opt.parent === option.value && !opt.disabled,\n );\n\n childOptions.forEach(subgroup => {\n this.handleSubGroupOptionClick({\n option: subgroup,\n isSelected: isSelected || isSelected === null,\n });\n });\n };\n\n handleSubGroupOptionClick = (detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n }) => {\n const { option, isSelected } = detail;\n\n const childOptions = this.filteredOptions.filter(\n opt => opt.parent === option.value && !opt.disabled,\n );\n\n if (isSelected || isSelected === null) {\n // 모든 자식 옵션이 선택된 경우, 모두 선택 해제\n this.value =\n this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||\n null;\n } else {\n // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택\n const newSelections = childOptions.filter(\n child => !this.value?.some(selected => selected.value === child.value),\n );\n this.value = [...(this.value || []), ...newSelections];\n }\n };\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n return;\n }\n\n const searchTerm = this.searchText.toLowerCase();\n const matchedOptions = new Set<SelectOptionGroup>();\n\n // 1. 직접 매칭되는 옵션들 찾기\n this.options.forEach(option => {\n if (option.label.toLowerCase().includes(searchTerm)) {\n matchedOptions.add(option);\n\n // 매칭된 옵션의 상위 그룹들도 포함\n this.addParentGroups(option, matchedOptions);\n }\n });\n\n // 2. Set을 배열로 변환하고 원본 순서 유지\n this.filteredOptions = this.options.filter(option => matchedOptions.has(option));\n }\n\n private addParentGroups(option: SelectOptionGroup, matchedSet: Set<SelectOptionGroup>) {\n if (!option.parent) return;\n\n const parentOption = this.options.find(opt => opt.value === option.parent);\n if (parentOption && !matchedSet.has(parentOption)) {\n matchedSet.add(parentOption);\n // 재귀적으로 상위 그룹들도 추가\n this.addParentGroups(parentOption, matchedSet);\n }\n }\n\n private getSelectedOption(): SelectOptionGroup[] {\n return this.options.filter(option => this.value?.includes(option));\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 handleOptionSelection = (option: SelectOptionGroup) => {\n if (!option || option.disabled) return;\n\n const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\n if (isAlreadySelected) {\n // 이미 선택된 옵션인 경우, 선택 해제\n this.value = this.value?.filter(opt => opt.value !== option.value) || null;\n } else {\n // 새로운 옵션 선택\n this.value = [...(this.value || []), option];\n }\n };\n\n private getAllItemsUnderOption(parentOption: SelectOptionGroup): SelectOptionGroup[] {\n const childOptions = this.filteredOptions.filter(\n option => option.parent === parentOption.value && !option.disabled,\n );\n\n if (parentOption.type === 'group') {\n // Group - 모든 하위 item들을 수집\n const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');\n const allItemsUnderGroup: SelectOptionGroup[] = [];\n\n // subgroup 하위의 모든 item\n subgroupOptions.forEach(subgroup => {\n const itemsUnderSubgroup = this.filteredOptions.filter(\n option => option.parent === subgroup.value && option.type === 'item' && !option.disabled,\n );\n allItemsUnderGroup.push(...itemsUnderSubgroup);\n });\n\n // Group 바로 하위 item\n const directItems = childOptions.filter(option => option.type === 'item');\n allItemsUnderGroup.push(...directItems);\n\n return allItemsUnderGroup;\n }\n\n return childOptions.filter(option => option.type === 'item');\n }\n\n private isAllChildrenSelected(groupOption: SelectOptionGroup): boolean | null {\n const allItems = this.getAllItemsUnderOption(groupOption);\n\n if (allItems.length === 0) return false;\n\n const selectedItems = allItems.filter(item =>\n this.value?.some(selected => selected.value === item.value),\n );\n\n if (selectedItems.length === allItems.length) return true;\n if (selectedItems.length > 0) return null;\n return false;\n }\n\n private getChildrenOptions(parentOption: SelectOptionGroup) {\n if (parentOption.type === 'group') {\n const allItems = this.getAllItemsUnderOption(parentOption);\n const selectedItems = allItems.filter(item =>\n this.value?.some(selected => selected.value === item.value),\n );\n\n return {\n selectedCount: selectedItems.length,\n totalCount: allItems.length,\n };\n }\n\n // Subgroup의 경우\n const children = this.filteredOptions.filter(option => option.parent === parentOption.value);\n return {\n selectedCount: children.filter(child => this.value?.some(val => val.value === child.value))\n .length,\n totalCount: children.length,\n };\n }\n\n closeDropdown() {\n this.isOpen = false;\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() {\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-multiple-group': true,\n 'sd-select-multiple-group--open': this.isOpen,\n 'sd-select-multiple-group--disabled': this.disabled,\n }}\n style={this.containerStyle}\n ref={el => (this.selectRef = el)}\n >\n {this.renderLabel(this.label, this.labelStyle)}\n <div class=\"sd-select-multiple-group__container\">\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </div>\n </Host>\n );\n }\n\n private renderLabel(label?: string, labelStyle?: { [key: string]: string }) {\n if (!label) return null;\n\n return (\n <label class=\"sd-select-multiple-group__label\" style={labelStyle}>\n {label}\n </label>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select-multiple-group__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n style={this.triggerStyle}\n >\n <span class=\"sd-select-multiple-group__value\">\n {!selectedOption\n ? '선택'\n : selectedOption.length\n ? selectedOption.map(option => option.label).join(', ')\n : this.placeholder}\n </span>\n {this.clearable && selectedOption?.length > 0 && !this.disabled && (\n <sd-icon\n key=\"close-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select-multiple-group__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={{\n 'sd-select-multiple-group__arrow': true,\n 'sd-select-multiple-group__arrow--open': this.isOpen,\n }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n const style = {\n '--select-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\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-multiple-group__dropdown\"\n style={{ ...style, ...this.dropdownStyle }}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <div\n class={{\n 'sd-select-multiple-group__search-container': true,\n 'sd-select-multiple-group__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 onKeyDown={e => {\n if (e.code === 'Enter') e.stopPropagation();\n }}\n >\n <sd-icon name=\"search\" size={16} color=\"#737373\" slot=\"prefix\"></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-group\n option={option}\n index={index}\n isSelected={\n option.type === 'item'\n ? this.value?.some(selected => selected.value === option.value)\n : this.isAllChildrenSelected(option)\n }\n isFocused={index === this.itemIndex}\n optionStyle={this.optionStyle}\n onOptionClick={({\n detail,\n }: {\n detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n event: MouseEvent;\n };\n }) => {\n if (option.type !== 'item' && !this.useCheckbox) {\n return;\n }\n\n this.handleOptionClick(detail);\n }}\n useCheckbox={this.useCheckbox}\n {...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) })}\n ></sd-select-option-group>\n </slot>\n ))\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select-multiple-group__option-placeholder'} style={this.optionStyle}>\n {this.optionPlaceholder}\n </div>\n </slot>\n )}\n </div>\n </sd-portal>\n );\n }\n}\n"],"names":["BaseDropdownEvent","SelectKeyboardNavigation","h","Host","index"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sd-select-multiple-group.entry.cjs.js","sources":["src/components/sd-select-multiple-group/sd-select-multiple-group.scss?tag=sd-select-multiple-group","src/components/sd-select-multiple-group/sd-select-multiple-group.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\nsd-select-multiple-group {\n display: inline-block;\n height: fit-content;\n .sd-select-multiple-group {\n display: flex;\n flex-wrap: nowrap;\n width: var(--select-width, 200px);\n cursor: pointer;\n user-select: none;\n border: 1px solid $grey_55;\n border-radius: 4px;\n background-color: white;\n color: $grey_90;\n\n &:hover:not(.sd-select-multiple-group--disabled) {\n background: $grey_10;\n }\n\n &.sd-select-multiple-group--disabled {\n cursor: not-allowed;\n background-color: $grey_20;\n border-color: $grey_45;\n\n .sd-select-multiple-group__label {\n border-right: 1px solid $grey_45;\n }\n\n .sd-select-multiple-group__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 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 }\n\n &__container {\n position: relative;\n width: 100%;\n display: flex;\n\n .sd-select-multiple-group__trigger {\n padding: 4px 20px 4px 12px;\n display: flex;\n width: 100%;\n align-items: center;\n\n .sd-select-multiple-group__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 }\n\n .sd-select-multiple-group__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-multiple-group__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\n.sd-select-multiple-group__dropdown {\n @extend %scrollBar;\n width: var(--select-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\n .sd-select-multiple-group__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 sd-input {\n width: 100%;\n }\n\n &--scrolled {\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n }\n }\n\n .sd-select-multiple-group__option-placeholder {\n padding: 4px 12px;\n font-size: 12px;\n line-height: 20px;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\nimport { SelectMultipleEvents, SelectOption, SelectStyleProps } from '../sd-select/sd-select';\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\n\nexport interface SelectOptionGroup extends SelectOption {\n type: 'group' | 'subgroup' | 'item' | 'all';\n parent?: string;\n}\n\n@Component({\n tag: 'sd-select-multiple-group',\n styleUrl: 'sd-select-multiple-group.scss',\n})\nexport class SdSelectMultipleGroup extends BaseDropdownEvent {\n @Element() el!: HTMLElement;\n\n // props\n @Prop({ mutable: true }) value: SelectOptionGroup[] | null = null;\n @Prop() label: string = '';\n @Prop({ mutable: true }) options: SelectOptionGroup[] = [];\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 @Prop() useCheckbox: boolean = false;\n @Prop() useAll: boolean = false;\n\n // props - custom styles\n @Prop() containerStyle: SelectStyleProps['containerStyle'] = {};\n @Prop() triggerStyle: SelectStyleProps['triggerStyle'] = {};\n @Prop() dropdownStyle: SelectStyleProps['dropdownStyle'] = {};\n @Prop() optionStyle: SelectStyleProps['optionStyle'] = {};\n @Prop() labelStyle: SelectStyleProps['labelStyle'] = {};\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<SelectMultipleEvents['sdChange']>;\n @Event() dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;\n\n private selectRef?: HTMLElement;\n private searchRef?: HTMLSdInputElement;\n private optionRef?: HTMLSdSelectOptionGroupElement;\n private dropdownRef?: HTMLElement;\n\n @Watch('value')\n valueChanged() {\n this.sdChange?.emit(this.value);\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 = Array.from(\n this.dropdownRef?.querySelectorAll(\n '.sd-select-multiple-group__dropdown sd-select-option-group',\n ) || [],\n );\n const currentItem = optionElements?.[this.itemIndex];\n\n if (!currentItem || !this.isOpen) return;\n\n this.optionRef = currentItem as HTMLSdSelectOptionGroupElement;\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 @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 = -1;\n } else {\n this.itemIndex = this.options.indexOf(selectedOption[0]);\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 = Array.from(\n this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || [],\n );\n const currentItem = optionElements?.[this.itemIndex];\n\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 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 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.handleOptionSelection(selectedOption);\n }\n break;\n case 'Escape':\n this.isOpen = false;\n break;\n }\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 handleAllOptionClick = (detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n event: MouseEvent;\n }) => {\n if (detail.isSelected) {\n // 이미 선택된 옵션인 경우, 선택 해제\n this.value = [];\n } else {\n // 새로운 옵션 선택\n this.value = [...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled)];\n }\n };\n\n handleOptionClick = (detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n event: MouseEvent;\n }) => {\n const { option, event } = detail;\n event.stopPropagation();\n\n if (option.type === 'group') this.handleGroupOptionClick(detail);\n if (option.type === 'subgroup') this.handleSubGroupOptionClick(detail);\n if (option.type === 'item') this.handleOptionSelection(option);\n };\n\n handleGroupOptionClick = (detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n }) => {\n const { option, isSelected } = detail;\n const childOptions = this.filteredOptions.filter(\n opt => opt.parent === option.value && !opt.disabled,\n );\n\n childOptions.forEach(subgroup => {\n this.handleSubGroupOptionClick({\n option: subgroup,\n isSelected: isSelected || isSelected === null,\n });\n });\n };\n\n handleSubGroupOptionClick = (detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n }) => {\n const { option, isSelected } = detail;\n\n const childOptions = this.filteredOptions.filter(\n opt => opt.parent === option.value && !opt.disabled,\n );\n\n if (isSelected || isSelected === null) {\n // 모든 자식 옵션이 선택된 경우, 모두 선택 해제\n this.value =\n this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||\n null;\n } else {\n // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택\n const newSelections = childOptions.filter(\n child => !this.value?.some(selected => selected.value === child.value),\n );\n this.value = [...(this.value || []), ...newSelections];\n }\n };\n\n private filterOptions() {\n if (!this.searchText || this.searchText.trim() === '') {\n // 검색어가 없으면 전체 옵션 표시\n this.filteredOptions = this.options;\n return;\n }\n\n const searchTerm = this.searchText.toLowerCase();\n const matchedOptions = new Set<SelectOptionGroup>();\n\n // 1. 직접 매칭되는 옵션들 찾기\n this.options.forEach(option => {\n if (option.label.toLowerCase().includes(searchTerm)) {\n matchedOptions.add(option);\n\n // 매칭된 옵션의 상위 그룹들도 포함\n this.addParentGroups(option, matchedOptions);\n }\n });\n\n // 2. Set을 배열로 변환하고 원본 순서 유지\n this.filteredOptions = this.options.filter(option => matchedOptions.has(option));\n }\n\n private addParentGroups(option: SelectOptionGroup, matchedSet: Set<SelectOptionGroup>) {\n if (!option.parent) return;\n\n const parentOption = this.options.find(opt => opt.value === option.parent);\n if (parentOption && !matchedSet.has(parentOption)) {\n matchedSet.add(parentOption);\n // 재귀적으로 상위 그룹들도 추가\n this.addParentGroups(parentOption, matchedSet);\n }\n }\n\n private getSelectedOption(): SelectOptionGroup[] {\n return this.options.filter(option => this.value?.includes(option));\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 handleOptionSelection = (option: SelectOptionGroup) => {\n if (!option || option.disabled) return;\n\n const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\n if (isAlreadySelected) {\n // 이미 선택된 옵션인 경우, 선택 해제\n this.value = this.value?.filter(opt => opt.value !== option.value) || null;\n } else {\n // 새로운 옵션 선택\n this.value = [...(this.value || []), option];\n }\n };\n\n private getAllItemsUnderOption(parentOption: SelectOptionGroup): SelectOptionGroup[] {\n const childOptions = this.filteredOptions.filter(\n option => option.parent === parentOption.value && !option.disabled,\n );\n\n if (parentOption.type === 'group') {\n // Group - 모든 하위 item들을 수집\n const subgroupOptions = childOptions.filter(option => option.type === 'subgroup');\n const allItemsUnderGroup: SelectOptionGroup[] = [];\n\n // subgroup 하위의 모든 item\n subgroupOptions.forEach(subgroup => {\n const itemsUnderSubgroup = this.filteredOptions.filter(\n option => option.parent === subgroup.value && option.type === 'item' && !option.disabled,\n );\n allItemsUnderGroup.push(...itemsUnderSubgroup);\n });\n\n // Group 바로 하위 item\n const directItems = childOptions.filter(option => option.type === 'item');\n allItemsUnderGroup.push(...directItems);\n\n return allItemsUnderGroup;\n }\n\n return childOptions.filter(option => option.type === 'item');\n }\n\n private isAllChildrenSelected(groupOption: SelectOptionGroup): boolean | null {\n const allItems = this.getAllItemsUnderOption(groupOption);\n\n if (allItems.length === 0) return false;\n\n const selectedItems = allItems.filter(item =>\n this.value?.some(selected => selected.value === item.value),\n );\n\n if (selectedItems.length === allItems.length) return true;\n if (selectedItems.length > 0) return null;\n return false;\n }\n\n private getChildrenOptions(parentOption: SelectOptionGroup) {\n if (parentOption.type === 'group') {\n const allItems = this.getAllItemsUnderOption(parentOption);\n const selectedItems = allItems.filter(item =>\n this.value?.some(selected => selected.value === item.value),\n );\n\n return {\n selectedCount: selectedItems.length,\n totalCount: allItems.length,\n };\n }\n\n // Subgroup의 경우\n const children = this.filteredOptions.filter(option => option.parent === parentOption.value);\n return {\n selectedCount: children.filter(child => this.value?.some(val => val.value === child.value))\n .length,\n totalCount: children.length,\n };\n }\n\n private isAllOptionsSelected() {\n const selectedOption = this.getSelectedOption();\n return (\n selectedOption.length === this.options.filter(opt => !opt.disabled && opt.type === 'item').length\n );\n }\n\n private getTriggerLabel() {\n const selectedOption = this.getSelectedOption();\n if (!selectedOption) return '선택';\n\n if (selectedOption.length === 0) return this.placeholder;\n\n const isAllChecked = this.isAllOptionsSelected();\n\n return isAllChecked ? '전체' : selectedOption.map(option => option.label).join(', ');\n }\n\n closeDropdown() {\n this.isOpen = false;\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() {\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-multiple-group': true,\n 'sd-select-multiple-group--open': this.isOpen,\n 'sd-select-multiple-group--disabled': this.disabled,\n }}\n style={this.containerStyle}\n ref={el => (this.selectRef = el)}\n >\n {this.renderLabel(this.label, this.labelStyle)}\n <div class=\"sd-select-multiple-group__container\">\n {this.renderTrigger()}\n {this.renderDropdown()}\n </div>\n </div>\n </Host>\n );\n }\n\n private renderLabel(label?: string, labelStyle?: { [key: string]: string }) {\n if (!label) return null;\n\n return (\n <label class=\"sd-select-multiple-group__label\" style={labelStyle}>\n {label}\n </label>\n );\n }\n\n private renderTrigger() {\n const selectedOption = this.getSelectedOption();\n return (\n <div\n class=\"sd-select-multiple-group__trigger\"\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleTriggerClick}\n style={this.triggerStyle}\n >\n <span class=\"sd-select-multiple-group__value\">{this.getTriggerLabel()}</span>\n {this.clearable && selectedOption?.length > 0 && !this.disabled && (\n <sd-icon\n key=\"close-icon\"\n name=\"close\"\n size={10}\n color=\"#888\"\n class=\"sd-select-multiple-group__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={{\n 'sd-select-multiple-group__arrow': true,\n 'sd-select-multiple-group__arrow--open': this.isOpen,\n }}\n ></sd-icon>\n </div>\n );\n }\n\n private renderDropdown() {\n const style = {\n '--select-width': this.width || '200px',\n '--select-dropdown-height': this.dropdownHeight || '260px',\n };\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-multiple-group__dropdown\"\n style={{ ...style, ...this.dropdownStyle }}\n onScroll={this.handleDropdownScroll}\n ref={el => (this.dropdownRef = el)}\n >\n {this.searchable && (\n <div\n class={{\n 'sd-select-multiple-group__search-container': true,\n 'sd-select-multiple-group__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 onKeyDown={e => {\n if (e.code === 'Enter') e.stopPropagation();\n }}\n >\n <sd-icon name=\"search\" size={16} color=\"#737373\" slot=\"prefix\"></sd-icon>\n </sd-input>\n </div>\n )}\n\n {this.filteredOptions.length > 0 ? (\n <Fragment>\n {this.useAll && (\n <sd-select-option-group\n option={{ label: '전체 선택', value: 'all', type: 'all' }}\n index={0}\n isSelected={\n this.value?.length ===\n this.options.filter(opt => !opt.disabled && opt.type === 'item').length\n }\n isFocused={this.itemIndex === 0}\n optionStyle={this.optionStyle}\n onOptionClick={({\n detail,\n }: {\n detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n event: MouseEvent;\n };\n }) => this.handleAllOptionClick(detail)}\n useCheckbox={this.useCheckbox}\n useIndicator={false}\n ></sd-select-option-group>\n )}\n {this.filteredOptions.map((option, index) => (\n <slot name={`option-${option.value}`}>\n <sd-select-option-group\n option={option}\n index={index}\n isSelected={\n option.type === 'item'\n ? this.value?.some(selected => selected.value === option.value)\n : this.isAllChildrenSelected(option)\n }\n isFocused={index === this.itemIndex}\n optionStyle={this.optionStyle}\n onOptionClick={({\n detail,\n }: {\n detail: {\n option: SelectOptionGroup;\n isSelected: boolean | null;\n index: number;\n event: MouseEvent;\n };\n }) => {\n if (option.type !== 'item' && !this.useCheckbox) {\n return;\n }\n\n this.handleOptionClick(detail);\n }}\n useCheckbox={this.useCheckbox}\n {...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) })}\n ></sd-select-option-group>\n </slot>\n ))}\n </Fragment>\n ) : (\n <slot name=\"option-placeholder\">\n <div class={'sd-select-multiple-group__option-placeholder'} style={this.optionStyle}>\n {this.optionPlaceholder}\n </div>\n </slot>\n )}\n </div>\n </sd-portal>\n );\n }\n}\n"],"names":["BaseDropdownEvent","SelectKeyboardNavigation","h","Host","Fragment","index"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DXo1Fhkn.js');
|
|
4
4
|
|
|
5
|
-
const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:
|
|
5
|
+
const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}";
|
|
6
6
|
|
|
7
7
|
const SdSelectOptionGroup = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-select-option-group.entry.cjs.js","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:
|
|
1
|
+
{"version":3,"file":"sd-select-option-group.entry.cjs.js","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: 12px;\n font-size: 12px;\n line-height: 20px;\n cursor: pointer;\n\n &.sd-select__option-group--group,\n &.sd-select__option-group--subgroup {\n &:not(.sd-select__option-group--use-checkbox) {\n cursor: default !important;\n }\n }\n\n &.sd-select__option-group--group {\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-select__option-group--item {\n padding-left: 28px;\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 {\n &:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) {\n sd-checkbox {\n .sd-checkbox__bg {\n border-color: white !important;\n }\n }\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"],"names":["h"],"mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,m5EAAm5E;;MCOr6E,mBAAmB,GAAA,MAAA;;;;;;AAGvB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAmB,KAAK;IAClC,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAC5B,YAAY,GAAa,IAAI;AAC7B,IAAA,SAAS,GAAmD;AACnE,QAAA,aAAa,EAAE,CAAC;AAChB,QAAA,UAAU,EAAE,CAAC;KACb;IAEQ,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;;AAGxF,IAAA,WAAW;IAOZ,WAAW,GAAG,CACrB,MAAyB,EACzB,UAA0B,EAC1B,KAAiB,KACd;QACH,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;AAC1D,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;YACF;;AAGD,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,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACCA,OACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACtD,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAC3D,kCAAkC,EAAE,IAAI,CAAC,SAAS;gBAClD,uCAAuC,EAAE,IAAI,CAAC,WAAW;AACzD,gBAAA,gCAAgC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO;AAC9D,gBAAA,mCAAmC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;AACpE,gBAAA,+BAA+B,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;aAC5D,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,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,EAAA,EAEvEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wCAAwC,EAAA,EACjD,IAAI,CAAC,WAAW,KAChBA,0EACC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AAClD,aAAC,GACa,CACf,EACDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,EACrE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,KAChDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0CAA0C,EAAA,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,aAAa,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,CAAQ,CAClI,CACI,CACD;;;;;;;"}
|
|
@@ -200,11 +200,11 @@ export class SdSelect extends BaseDropdownEvent {
|
|
|
200
200
|
'--select-width': this.width || '200px',
|
|
201
201
|
'--select-dropdown-height': this.dropdownHeight || '260px',
|
|
202
202
|
};
|
|
203
|
-
return (h(Host, { key: '
|
|
203
|
+
return (h(Host, { key: '51133eafc1c4b8cb79845c3b36abeb933d92bd9d', style: style }, h("div", { key: 'cdd8fb1798088a7ea4e44ce921dcc652a455cc39', class: {
|
|
204
204
|
'sd-select': true,
|
|
205
205
|
'sd-select--open': this.isOpen,
|
|
206
206
|
'sd-select--disabled': this.disabled,
|
|
207
|
-
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '
|
|
207
|
+
}, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '6e09cfbbb0807cbeff40a7dfe0a9d037a31e58bf', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
|
|
208
208
|
}
|
|
209
209
|
renderLabel(label) {
|
|
210
210
|
if (!label)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-select.js","sourceRoot":"","sources":["../../../src/components/sd-select/sd-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
1
|
+
{"version":3,"file":"sd-select.js","sourceRoot":"","sources":["../../../src/components/sd-select/sd-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,CAAC,EACD,OAAO,EACP,KAAK,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAuClF,MAAM,OAAO,QAAS,SAAQ,iBAAiB;;;;IACnC,EAAE,CAAe;IAE5B,QAAQ;IACiB,KAAK,GAA2B,IAAI,CAAC;IACtD,KAAK,GAAW,EAAE,CAAC;IACF,OAAO,GAAmB,EAAE,CAAC;IAC9C,WAAW,GAAW,IAAI,CAAC;IAC3B,iBAAiB,GAAW,WAAW,CAAC;IACxC,KAAK,GAAW,OAAO,CAAC;IACxB,cAAc,GAAW,OAAO,CAAC;IACjC,QAAQ,GAAY,KAAK,CAAC;IAC1B,SAAS,GAAY,KAAK,CAAC;IAC3B,UAAU,GAAY,KAAK,CAAC;IAEpC,uBAAuB;IACf,cAAc,CAAqE;IAE3F,SAAS;IACA,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;IAC/B,MAAM,GAAY,KAAK,CAAC;IACxB,UAAU,GAAkB,IAAI,CAAC;IACjC,SAAS,GAAW,CAAC,CAAC,CAAC;IACvB,UAAU,GAAY,KAAK,CAAC;IAErC,SAAS;IACA,QAAQ,CAA0C;IAClD,YAAY,CAA8C;IAE3D,SAAS,CAAe;IACxB,SAAS,CAAsB;IAC/B,SAAS,CAA6B;IACtC,WAAW,CAAe;IAGlC,YAAY;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAChD,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,IAAI,EAAE,MAAM,EAAE,cAAc,IAAI,IAAI,EAAE,CAAC,CAAC;IAC/F,CAAC;IAGD,cAAc;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAGD,iBAAiB;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;QACxD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACvD,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC;gBAC3B,WAAW,EAAE,KAAK,EAAE,CAAC;gBACrB,OAAO;YACR,CAAC;iBAAM,IAAI,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC3C,WAAW,EAAE,IAAI,EAAE,CAAC;YACrB,CAAC;QACF,CAAC;QAED,MAAM,cAAc,GACnB,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,uCAAuC,CAAC,IAAI,EAAE,CAAC;QACnF,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAErD,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEzC,IAAI,CAAC,SAAS,GAAG,WAAwC,CAAC;QAC1D,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;QAE3D,IAAI,gBAAgB,EAAE,CAAC;YACtB,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAC1D,OAAO;QACR,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,WAA0B,CAAC,CAAC;IACjD,CAAC;IAED,iBAAiB;QAChB,iDAAiD;QACjD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,4CAA4C;IACrE,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,wCAAwC;IAC9D,CAAC;IAGD,KAAK,CAAC,aAAa;QAClB,gDAAgD;QAChD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEnC,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAChD,IAAI,CAAC,cAAc,EAAE,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACxD,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAEjD,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;YAAE,OAAO;QAElC,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;QAEtD,MAAM,cAAc,GACnB,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,uCAAuC,CAAC,IAAI,EAAE,CAAC;QAEnF,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAErD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACvD,WAAW,EAAE,KAAK,EAAE,CAAC;QACtB,CAAC;QAED,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;QACtD,IAAI,CAAC,cAAc,CAAC,WAA0B,CAAC,CAAC;IACjD,CAAC;IAES,mBAAmB,CAAC,KAAY;QACzC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACrB,CAAC;IACF,CAAC;IAES,qBAAqB,CAAC,aAA4B;QAC3D,aAAa,CAAC,eAAe,EAAE,CAAC;QAChC,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC9D,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;YAAE,OAAO;QAEnD,aAAa,CAAC,cAAc,EAAE,CAAC;QAC/B,QAAQ,aAAa,CAAC,GAAG,EAAE,CAAC;YAC3B,KAAK,WAAW,CAAC;YACjB,KAAK,SAAS;gBACb,MAAM,kBAAkB,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;gBAC/F,MAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;gBACrF,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;gBAC3B,MAAM;YACP,KAAK,OAAO;gBACX,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBAC5D,IAAI,cAAc,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;oBAChD,IAAI,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;oBAClC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;oBACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACrB,CAAC;gBACD,MAAM;YACP,KAAK,QAAQ;gBACZ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,MAAM;QACR,CAAC;IACF,CAAC;IAED,uCAAuC;IACvC,aAAa;QACZ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,iBAAiB;IACjB,kBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC3B,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAClD,CAAC;IACF,CAAC,CAAC;IAEF,iBAAiB,GAAG,CAAC,MAA8C,EAAE,EAAE;QACtE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;QACjC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACtB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACrB,CAAC;IACF,CAAC,CAAC;IAEM,aAAa;QACpB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YACvD,oBAAoB;YACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACrC,CAAC;aAAM,CAAC;YACP,eAAe;YACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CACnD,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAW,CAAC,WAAW,EAAE,CAAC,CACnE,CAAC;QACH,CAAC;IACF,CAAC;IAEO,iBAAiB;QACxB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IACjE,CAAC;IAEO,oBAAoB,GAAG,CAAC,KAAY,EAAE,EAAE;QAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QAEnC,uBAAuB;QACvB,IAAI,CAAC,UAAU,GAAG,SAAS,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IAEM,KAAK,CAAC,qBAAqB;QAClC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;QAC1C,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC;IAEO,cAAc,CAAC,aAA0B;QAChD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,aAAa;YAAE,OAAO;QAEhD,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;QAClC,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC;QAC1C,MAAM,YAAY,GAAG,aAAa,CAAC,YAAY,CAAC;QAChD,MAAM,iBAAiB,GAAG,QAAQ,CAAC,SAAS,CAAC;QAC7C,MAAM,cAAc,GAAG,QAAQ,CAAC,YAAY,CAAC;QAE7C,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC;QAC/E,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAE,eAA+B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;QAEzF,MAAM,UAAU,GAAG,iBAAiB,GAAG,YAAY,CAAC;QACpD,MAAM,aAAa,GAAG,iBAAiB,GAAG,cAAc,CAAC;QAEzD,IAAI,SAAS,GAAG,UAAU,EAAE,CAAC;YAC5B,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;QAC/C,CAAC;aAAM,IAAI,SAAS,GAAG,YAAY,GAAG,aAAa,EAAE,CAAC;YACrD,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;QAC/E,CAAC;IACF,CAAC;IAED,gBAAgB;IAChB,MAAM;QACL,MAAM,KAAK,GAAG;YACb,gBAAgB,EAAE,IAAI,CAAC,KAAK,IAAI,OAAO;YACvC,0BAA0B,EAAE,IAAI,CAAC,cAAc,IAAI,OAAO;SAC1D,CAAC;QAEF,OAAO,CACN,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YACjB,4DACC,KAAK,EAAE;oBACN,WAAW,EAAE,IAAI;oBACjB,iBAAiB,EAAE,IAAI,CAAC,MAAM;oBAC9B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;iBACpC,EACD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBAE/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;gBAC7B,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,IAAI,CAAC,aAAa,EAAE;oBACpB,IAAI,CAAC,cAAc,EAAE,CACjB,CACD,CACA,CACP,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,KAAc;QACjC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAExB,OAAO,aAAO,KAAK,EAAC,kBAAkB,IAAE,KAAK,CAAS,CAAC;IACxD,CAAC;IAEO,aAAa;QACpB,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAChD,OAAO,CACN,WACC,KAAK,EAAC,oBAAoB,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,kBAAkB;YAEhC,YAAM,KAAK,EAAC,kBAAkB,IAAE,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAQ;YAC/F,IAAI,CAAC,SAAS,IAAI,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CACtD,eACC,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAE,KAAK,CAAC,EAAE;oBAChB,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;gBACnB,CAAC,GACS,CACX;YAED,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,GAChE,CACN,CACN,CAAC;IACH,CAAC;IAEO,cAAc;QACrB,MAAM,KAAK,GAAG;YACb,yBAAyB,EAAE,IAAI,CAAC,KAAK,IAAI,OAAO;YAChD,0BAA0B,EAAE,IAAI,CAAC,cAAc,IAAI,OAAO;SAC1D,CAAC;QACF,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;YAAE,OAAO,IAAI,CAAC;QAEvC,OAAO,CACN,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa;YACrF,WACC,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;gBAEjC,IAAI,CAAC,UAAU,IAAI,CACnB,WACC,KAAK,EAAE;wBACN,6BAA6B,EAAE,IAAI;wBACnC,uCAAuC,EAAE,IAAI,CAAC,UAAU;qBACxD,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;oBAEzC,gBACC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,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,QACT,SAAS,EAAE,KAAK,CAAC,EAAE;4BAClB,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;wBACzC,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;4BACf,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;wBACrB,CAAC;wBAED,eACC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,GACH,CACD,CACN,CACN;gBACA,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,YAAM,IAAI,EAAE,UAAU,MAAM,CAAC,KAAK,EAAE;oBACnC,wBACC,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,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GAC1C,CACd,CACP,CAAC,CACF,CAAC,CAAC,CAAC,CACH,YAAM,IAAI,EAAC,oBAAoB;oBAC9B,WAAK,KAAK,EAAE,+BAA+B,IAAG,IAAI,CAAC,iBAAiB,CAAO,CACrE,CACP,CACI,CACK,CACZ,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AAED,CAAC;IACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiDE;AACH,CAAC","sourcesContent":["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' | 'all';\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"]}
|