@sellmate/design-system 0.0.52 → 0.0.54

package/dist/esm/sd-progress.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-ClyGLKUd.js';
+import { r as registerInstance, h, H as Host } from './index-7X2nzJWz.js';
 
-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}";
+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}`;
 
 const SdProgress = class {
     constructor(hostRef) {
@@ -19,10 +19,10 @@ const SdProgress = class {
         error: '#FB4444',
     };
     render() {
-        return (h(Host, { key: 'd491ac2f5e734f653a991afa1c9e25ceb9947335', style: {
+        return (h(Host, { key: '351f3fda014f276d22b02b09f92ed7895a43ea85', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '0741e3f5492c4f870cc9657e27d3d1a1d73bee10', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '3b41b3fdb26fdf283792172de45fbcff37e1c90e', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
@@ -36,7 +36,7 @@ const SdProgress = class {
         return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
     }
 };
-SdProgress.style = sdProgressCss;
+SdProgress.style = sdProgressCss();
 
 export { SdProgress as sd_progress };
 //# sourceMappingURL=sd-progress.entry.js.map

package/dist/esm/sd-progress.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-progress.entry.js","sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-progress {\r\n display: block;\r\n\r\n .sd-progress__bar {\r\n  position: relative;\r\n  width: 360px;\r\n  height: 20px;\r\n  overflow: hidden;\r\n  border-radius: 4px;\r\n  background-color: $grey_20;\r\n  text-align: center;\r\n\r\n  &__percent {\r\n   width: var(--progress-percentage);\r\n   height: 100%;\r\n   border-radius: 4px;\r\n   background-color: var(--progress-color, $brilliantblue_75);\r\n   transition: all 0.5s;\r\n   &.proceed {\r\n    border-top-right-radius: 50%;\r\n   }\r\n  }\r\n  &__indicator {\r\n   position: absolute;\r\n   left: 0;\r\n   top: 0;\r\n   height: 20px;\r\n   width: 100%;\r\n   background-color: $grey_20;\r\n   line-height: 21px;\r\n   z-index: 1;\r\n  }\r\n\r\n  &__indicator--left {\r\n   color: var(--progress-color, $brilliantblue_75);\r\n   clip-path: inset(0 0 0 var(--progress-percentage));\r\n  }\r\n\r\n  &__indicator--right {\r\n   color: white;\r\n   background-color: var(--progress-color, $brilliantblue_75);\r\n   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\r\n  }\r\n }\r\n\r\n .sd-progress__spinner {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  svg {\r\n   transform: rotate(-90deg);\r\n  }\r\n\r\n  &__label {\r\n   margin-top: 8px;\r\n   font-size: 16px;\r\n   color: var(--progress-color, $brilliantblue_75);\r\n  }\r\n }\r\n\r\n .sd-progress__label {\r\n  margin-top: 4px;\r\n  font-size: 12px;\r\n  color: $grey_95;\r\n  text-align: center;\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-progress',\r\n styleUrl: 'sd-progress.scss',\r\n})\r\nexport class SdProgress {\r\n @Prop() type: 'bar' | 'spinner' = 'bar';\r\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\r\n @Prop() percentage: number = 0;\r\n @Prop() size: number = 80;\r\n @Prop() strokeWidth: number = 12;\r\n @Prop() label?: string;\r\n\r\n private statusColor = {\r\n  default: '#aaaaaa',\r\n  progress: '#0075ff',\r\n  complete: '#12B553',\r\n  error: '#FB4444',\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--progress-color': this.statusColor[this.status],\r\n     '--progress-percentage': `${this.percentage}%`,\r\n    }}\r\n   >\r\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\r\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\r\n   </Host>\r\n  );\r\n }\r\n\r\n renderBarProgress() {\r\n  return (\r\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\r\n    <div\r\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\r\n    ></div>\r\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\r\n     {this.percentage}%\r\n    </div>\r\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\r\n     {this.percentage}%\r\n    </div>\r\n   </div>\r\n  );\r\n }\r\n\r\n renderSpinnerProgress() {\r\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\r\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\r\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\r\n  const progressBgSize = `${this.size}px`;\r\n  const progressSize = `${this.size / 2}px`;\r\n\r\n  return (\r\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\r\n    <svg width={progressBgSize} height={progressBgSize}>\r\n     <circle\r\n      cx={progressSize}\r\n      cy={progressSize}\r\n      r={radius}\r\n      stroke=\"#EEEEEE\"\r\n      stroke-width={this.strokeWidth}\r\n      fill=\"transparent\"\r\n     />\r\n     <circle\r\n      cx={progressSize}\r\n      cy={progressSize}\r\n      r={radius}\r\n      stroke={this.statusColor[this.status]}\r\n      stroke-width={this.strokeWidth}\r\n      fill=\"transparent\"\r\n      stroke-dasharray={circumference}\r\n      stroke-dashoffset={offset}\r\n      stroke-linecap=\"round\"\r\n      class=\"transition-all duration-500\"\r\n     />\r\n    </svg>\r\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\r\n   </div>\r\n  );\r\n }\r\n}\r\n\r\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\r\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\r\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\r\n// <script>\r\n//  document.addEventListener('DOMContentLoaded', event => {\r\n//   progress = document.getElementById('sd-progress-1');\r\n//   progress2 = document.getElementById('sd-progress-2');\r\n//   progress3 = document.getElementById('sd-progress-3');\r\n//   progress2.label = 'test label...';\r\n//   progress3.percentage = 50;\r\n//   progress3.status = 'error';\r\n//   let percentage = 0;\r\n//   const interval = setInterval(() => {\r\n//    if (percentage >= 100) {\r\n//     clearInterval(interval);\r\n//     progress.status = 'complete';\r\n//     progress2.status = 'complete';\r\n//     return;\r\n//    }\r\n//    percentage += 10;\r\n//    progress.status = 'progress';\r\n//    progress.percentage = percentage;\r\n//    progress2.status = 'progress';\r\n//    progress2.percentage = percentage;\r\n//   }, 500);\r\n//  });\r\n// </script>\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-progress.entry.js","sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-progress {\r\n display: block;\r\n\r\n .sd-progress__bar {\r\n  position: relative;\r\n  width: 360px;\r\n  height: 20px;\r\n  overflow: hidden;\r\n  border-radius: 4px;\r\n  background-color: $grey_20;\r\n  text-align: center;\r\n\r\n  &__percent {\r\n   width: var(--progress-percentage);\r\n   height: 100%;\r\n   border-radius: 4px;\r\n   background-color: var(--progress-color, $brilliantblue_75);\r\n   transition: all 0.5s;\r\n   &.proceed {\r\n    border-top-right-radius: 50%;\r\n   }\r\n  }\r\n  &__indicator {\r\n   position: absolute;\r\n   left: 0;\r\n   top: 0;\r\n   height: 20px;\r\n   width: 100%;\r\n   background-color: $grey_20;\r\n   line-height: 21px;\r\n   z-index: 1;\r\n  }\r\n\r\n  &__indicator--left {\r\n   color: var(--progress-color, $brilliantblue_75);\r\n   clip-path: inset(0 0 0 var(--progress-percentage));\r\n  }\r\n\r\n  &__indicator--right {\r\n   color: white;\r\n   background-color: var(--progress-color, $brilliantblue_75);\r\n   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\r\n  }\r\n }\r\n\r\n .sd-progress__spinner {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  svg {\r\n   transform: rotate(-90deg);\r\n  }\r\n\r\n  &__label {\r\n   margin-top: 8px;\r\n   font-size: 16px;\r\n   color: var(--progress-color, $brilliantblue_75);\r\n  }\r\n }\r\n\r\n .sd-progress__label {\r\n  margin-top: 4px;\r\n  font-size: 12px;\r\n  color: $grey_95;\r\n  text-align: center;\r\n }\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'sd-progress',\r\n styleUrl: 'sd-progress.scss',\r\n})\r\nexport class SdProgress {\r\n @Prop() type: 'bar' | 'spinner' = 'bar';\r\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\r\n @Prop() percentage: number = 0;\r\n @Prop() size: number = 80;\r\n @Prop() strokeWidth: number = 12;\r\n @Prop() label?: string;\r\n\r\n private statusColor = {\r\n  default: '#aaaaaa',\r\n  progress: '#0075ff',\r\n  complete: '#12B553',\r\n  error: '#FB4444',\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host\r\n    style={{\r\n     '--progress-color': this.statusColor[this.status],\r\n     '--progress-percentage': `${this.percentage}%`,\r\n    }}\r\n   >\r\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\r\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\r\n   </Host>\r\n  );\r\n }\r\n\r\n renderBarProgress() {\r\n  return (\r\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\r\n    <div\r\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\r\n    ></div>\r\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\r\n     {this.percentage}%\r\n    </div>\r\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\r\n     {this.percentage}%\r\n    </div>\r\n   </div>\r\n  );\r\n }\r\n\r\n renderSpinnerProgress() {\r\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\r\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\r\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\r\n  const progressBgSize = `${this.size}px`;\r\n  const progressSize = `${this.size / 2}px`;\r\n\r\n  return (\r\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\r\n    <svg width={progressBgSize} height={progressBgSize}>\r\n     <circle\r\n      cx={progressSize}\r\n      cy={progressSize}\r\n      r={radius}\r\n      stroke=\"#EEEEEE\"\r\n      stroke-width={this.strokeWidth}\r\n      fill=\"transparent\"\r\n     />\r\n     <circle\r\n      cx={progressSize}\r\n      cy={progressSize}\r\n      r={radius}\r\n      stroke={this.statusColor[this.status]}\r\n      stroke-width={this.strokeWidth}\r\n      fill=\"transparent\"\r\n      stroke-dasharray={circumference}\r\n      stroke-dashoffset={offset}\r\n      stroke-linecap=\"round\"\r\n      class=\"transition-all duration-500\"\r\n     />\r\n    </svg>\r\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\r\n   </div>\r\n  );\r\n }\r\n}\r\n\r\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\r\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\r\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\r\n// <script>\r\n//  document.addEventListener('DOMContentLoaded', event => {\r\n//   progress = document.getElementById('sd-progress-1');\r\n//   progress2 = document.getElementById('sd-progress-2');\r\n//   progress3 = document.getElementById('sd-progress-3');\r\n//   progress2.label = 'test label...';\r\n//   progress3.percentage = 50;\r\n//   progress3.status = 'error';\r\n//   let percentage = 0;\r\n//   const interval = setInterval(() => {\r\n//    if (percentage >= 100) {\r\n//     clearInterval(interval);\r\n//     progress.status = 'complete';\r\n//     progress2.status = 'complete';\r\n//     return;\r\n//    }\r\n//    percentage += 10;\r\n//    progress.status = 'progress';\r\n//    progress.percentage = percentage;\r\n//    progress2.status = 'progress';\r\n//    progress2.percentage = percentage;\r\n//   }, 500);\r\n//  });\r\n// </script>\r\n"],"names":[],"mappings":"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"}

package/dist/esm/sd-radio-button-group.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, c as createEvent, h } from './index-7X2nzJWz.js';
+
+const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-block}sd-radio-button-group .sd-radio-button-group{display:flex;flex-direction:row;gap:0}sd-radio-button-group .sd-radio-button-group__option{display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #cccccc;background-color:white;color:#333333;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-radio-button-group .sd-radio-button-group__option input{display:none}sd-radio-button-group .sd-radio-button-group__option:not(:first-child){margin-left:-1px}sd-radio-button-group .sd-radio-button-group__option:first-child{border-radius:4px 0 0 4px}sd-radio-button-group .sd-radio-button-group__option:last-child{border-radius:0 4px 4px 0}sd-radio-button-group .sd-radio-button-group__option:only-child{border-radius:4px}sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group__option--selected):hover{background-color:#0075ff;color:white;font-weight:500;border-color:#0075ff;z-index:2}sd-radio-button-group .sd-radio-button-group__option--selected{border-color:#0075ff;color:#0075ff;background-color:white;z-index:1}sd-radio-button-group .sd-radio-button-group__option--disabled{background-color:#e1e1e1;border-color:#cccccc;color:#888888;cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__option:has(input:disabled){cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__label{user-select:none}sd-radio-button-group .sd-radio-button-group--sm .sd-radio-button-group__option{padding:4px 12px;font-size:12px;line-height:20px}sd-radio-button-group .sd-radio-button-group--md .sd-radio-button-group__option{padding:4px 20px;font-size:16px;line-height:26px}`;
+
+const SdRadioButtonGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdChange = createEvent(this, "sdChange");
+    }
+    value;
+    radioOptions = [];
+    size = 'md';
+    disabled = false;
+    name;
+    selectedValue;
+    sdChange;
+    componentWillLoad() {
+        if (this.value !== undefined && this.value !== null) {
+            this.selectedValue = this.value;
+        }
+    }
+    valueChanged(newValue) {
+        this.selectedValue = newValue;
+    }
+    handleRadioChange = (optionValue, optionDisabled) => {
+        if (this.disabled || optionDisabled)
+            return;
+        this.selectedValue = optionValue;
+        this.value = optionValue;
+        this.sdChange.emit(optionValue);
+    };
+    isOptionSelected(option) {
+        return this.selectedValue === option.value;
+    }
+    isOptionDisabled(option) {
+        return this.disabled || !!option.disabled;
+    }
+    getButtonClasses(option) {
+        const classes = [
+            'sd-radio-button-group__option',
+            this.isOptionSelected(option)
+                ? 'sd-radio-button-group__option--selected'
+                : 'sd-radio-button-group__option--unselected',
+        ];
+        if (this.isOptionDisabled(option)) {
+            classes.push('sd-radio-button-group__option--disabled');
+        }
+        return classes.join(' ');
+    }
+    getGroupClasses() {
+        const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];
+        return classes.join(' ');
+    }
+    render() {
+        const groupName = this.name || `sd-radio-button-group-${Math.random().toString(36).substring(2, 11)}`;
+        return (h("div", { key: '11b2fa2d7c019ea5d1c535e8f36ac488169e11e9', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+            const isSelected = this.isOptionSelected(option);
+            const isDisabled = this.isOptionDisabled(option);
+            return (h("label", { key: `radio-${index}`, class: this.getButtonClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));
+        })));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+};
+SdRadioButtonGroup.style = sdRadioButtonGroupCss();
+
+export { SdRadioButtonGroup as sd_radio_button_group };
+//# sourceMappingURL=sd-radio-button-group.entry.js.map

package/dist/esm/sd-radio-button-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-radio-button-group.entry.js","sources":["src/components/sd-radio-button-group/sd-radio-button-group.scss?tag=sd-radio-button-group","src/components/sd-radio-button-group/sd-radio-button-group.tsx"],"sourcesContent":["@import 'variables';\r\n\r\nsd-radio-button-group {\r\n  display: inline-block;\r\n\r\n  .sd-radio-button-group {\r\n    display: flex;\r\n    flex-direction: row;\r\n    gap: 0; // No gaps between buttons\r\n\r\n    &__option {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      cursor: pointer;\r\n      border: 1px solid $grey_45;\r\n      background-color: white;\r\n      color: $grey_90;\r\n      font-weight: 400;\r\n      transition: all 0.2s ease;\r\n      position: relative;\r\n      user-select: none;\r\n\r\n      // Hide the native radio input\r\n      input {\r\n        display: none;\r\n      }\r\n\r\n      // Border collapse: overlap adjacent borders\r\n      &:not(:first-child) {\r\n        margin-left: -1px;\r\n      }\r\n\r\n      // First button: left border-radius only\r\n      &:first-child {\r\n        border-radius: 4px 0 0 4px;\r\n      }\r\n\r\n      // Last button: right border-radius only\r\n      &:last-child {\r\n        border-radius: 0 4px 4px 0;\r\n      }\r\n\r\n      // Single button: all corners rounded\r\n      &:only-child {\r\n        border-radius: 4px;\r\n      }\r\n\r\n      // Hover state (non-disabled, non-selected)\r\n      &:not(&--disabled):not(&--selected):hover {\r\n        background-color: $brilliantblue_75;\r\n        color: white;\r\n        font-weight: 500;\r\n        border-color: $brilliantblue_75;\r\n        z-index: 2; // Bring to front to show full border\r\n      }\r\n\r\n      // Selected/Active state\r\n      &--selected {\r\n        border-color: $brilliantblue_75;\r\n        color: $brilliantblue_75;\r\n        background-color: white;\r\n        z-index: 1; // Above non-selected, below hover\r\n      }\r\n\r\n      // Disabled state\r\n      &--disabled {\r\n        background-color: $grey_30;\r\n        border-color: $grey_45;\r\n        color: $grey_65;\r\n        cursor: not-allowed;\r\n      }\r\n\r\n      &:has(input:disabled) {\r\n        cursor: not-allowed;\r\n      }\r\n    }\r\n\r\n    &__label {\r\n      user-select: none;\r\n    }\r\n\r\n    // Size: Small\r\n    &--sm {\r\n      .sd-radio-button-group__option {\r\n        padding: 4px 12px;\r\n        font-size: 12px;\r\n        line-height: 20px;\r\n      }\r\n    }\r\n\r\n    // Size: Medium\r\n    &--md {\r\n      .sd-radio-button-group__option {\r\n        padding: 4px 20px;\r\n        font-size: 16px;\r\n        line-height: 26px;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\r\n\r\nexport type RadioValue = string | number | boolean;\r\nexport type RadioOption = {\r\n  label: string;\r\n  value: RadioValue;\r\n  disabled?: boolean;\r\n};\r\n\r\n@Component({\r\n  tag: 'sd-radio-button-group',\r\n  styleUrl: 'sd-radio-button-group.scss',\r\n})\r\nexport class SdRadioButtonGroup {\r\n  @Prop({ mutable: true, reflect: true }) value!: RadioValue;\r\n\r\n  @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\r\n\r\n  @Prop() size: 'sm' | 'md' = 'md';\r\n\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @Prop() name?: string;\r\n\r\n  @State() private selectedValue!: RadioValue;\r\n\r\n  @Event()\r\n  sdChange!: EventEmitter<RadioValue>;\r\n\r\n  componentWillLoad() {\r\n    if (this.value !== undefined && this.value !== null) {\r\n      this.selectedValue = this.value;\r\n    }\r\n  }\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: RadioValue) {\r\n    this.selectedValue = newValue;\r\n  }\r\n\r\n  private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\r\n    if (this.disabled || optionDisabled) return;\r\n    this.selectedValue = optionValue;\r\n    this.value = optionValue;\r\n    this.sdChange.emit(optionValue);\r\n  };\r\n\r\n  private isOptionSelected(option: RadioOption): boolean {\r\n    return this.selectedValue === option.value;\r\n  }\r\n\r\n  private isOptionDisabled(option: RadioOption): boolean {\r\n    return this.disabled || !!option.disabled;\r\n  }\r\n\r\n  private getButtonClasses(option: RadioOption): string {\r\n    const classes = [\r\n      'sd-radio-button-group__option',\r\n      this.isOptionSelected(option)\r\n        ? 'sd-radio-button-group__option--selected'\r\n        : 'sd-radio-button-group__option--unselected',\r\n    ];\r\n\r\n    if (this.isOptionDisabled(option)) {\r\n      classes.push('sd-radio-button-group__option--disabled');\r\n    }\r\n\r\n    return classes.join(' ');\r\n  }\r\n\r\n  private getGroupClasses(): string {\r\n    const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];\r\n    return classes.join(' ');\r\n  }\r\n\r\n  render() {\r\n    const groupName = this.name || `sd-radio-button-group-${Math.random().toString(36).substring(2, 11)}`;\r\n\r\n    return (\r\n      <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\r\n        {this.radioOptions.map((option, index) => {\r\n          const isSelected = this.isOptionSelected(option);\r\n          const isDisabled = this.isOptionDisabled(option);\r\n\r\n          return (\r\n            <label\r\n              key={`radio-${index}`}\r\n              class={this.getButtonClasses(option)}\r\n              role=\"radio\"\r\n              aria-checked={isSelected.toString()}\r\n              aria-disabled={isDisabled.toString()}\r\n              aria-label={option.label || 'radio option'}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                name={groupName}\r\n                value={option.value.toString()}\r\n                checked={isSelected}\r\n                disabled={isDisabled}\r\n                onInput={() => this.handleRadioChange(option.value, option.disabled)}\r\n              />\r\n              {option.label && <span class=\"sd-radio-button-group__label\">{option.label}</span>}\r\n            </label>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/sd-select-multiple.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ClyGLKUd.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-7X2nzJWz.js';
 import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './select-keyboard-navigation-C2JaR3A6.js';
 
-const sdSelectMultipleCss = ".sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";
+const sdSelectMultipleCss = () => `.sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}`;
 
 const SdSelectMultiple = class extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -38,6 +38,9 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
     searchRef;
     optionRef;
     dropdownRef;
+    async open() {
+        this.isOpen = true;
+    }
     valueChanged() {
         this.sdChange?.emit(this.value);
     }
@@ -213,11 +216,11 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '356e513b8d7e856ed22d5358027b163463d55c1d', style: style }, h("div", { key: '3a75650badea618ed89899de57fbd25c020df6d0', class: {
+        return (h(Host, { key: 'b80f1d57e87db4e921436b726cfeac4618a13d6b', style: style }, h("div", { key: '43ae0ae2ec83cef2cad1ae59764b5463bb66eda0', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'e42235a132e3c13e9a996206ab7f58698ab97fe1', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: '8802336bea4e78aa6ccf1a567d238005ff58c29b', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -255,7 +258,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         "isOpen": ["isOpenChanged"]
     }; }
 };
-SdSelectMultiple.style = sdSelectMultipleCss;
+SdSelectMultiple.style = sdSelectMultipleCss();
 
 export { SdSelectMultiple as sd_select_multiple };
 //# sourceMappingURL=sd-select-multiple.entry.js.map

package/dist/esm/sd-select-multiple.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-select-multiple.entry.js","sources":["src/components/sd-select-multiple/sd-select-multiple.scss?tag=sd-select-multiple","src/components/sd-select-multiple/sd-select-multiple.tsx"],"sourcesContent":["@import 'variables';\r\n@import 'extend';\r\n\r\n:host {\r\n display: inline-block;\r\n height: fit-content;\r\n position: relative;\r\n}\r\n\r\n.sd-select-multiple {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n width: var(--select-width, 200px);\r\n height: 28px;\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select-multiple--disabled) {\r\n  background: $grey_10;\r\n }\r\n\r\n &.sd-select-multiple--disabled {\r\n  cursor: not-allowed;\r\n  background-color: $grey_20;\r\n  border-color: $grey_45;\r\n\r\n  .sd-select-multiple__label {\r\n   border-right: 1px solid $grey_45;\r\n  }\r\n\r\n  .sd-select-multiple__trigger {\r\n   color: $grey_65;\r\n   &:focus,\r\n   &:focus-visible,\r\n   &:focus-within {\r\n    outline: none !important;\r\n   }\r\n  }\r\n }\r\n\r\n &__label {\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  color: $grey_90;\r\n  padding: 4px 12px;\r\n  border-right: 1px solid $grey_45;\r\n  border-radius: 4px 0 0 4px;\r\n  background-color: $grey_10;\r\n }\r\n\r\n &__container {\r\n  position: relative;\r\n  width: 100%;\r\n  display: flex;\r\n\r\n  .sd-select-multiple__trigger {\r\n   padding: 4px 20px 4px 12px;\r\n   display: flex;\r\n   width: 100%;\r\n   align-items: center;\r\n\r\n   .sd-select-multiple__value {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n    line-height: 20px;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n   }\r\n\r\n   .sd-select-multiple__clear {\r\n    margin: 0 4px;\r\n    width: 8px;\r\n    height: 8px;\r\n    background-color: transparent;\r\n    outline: none;\r\n    border: none;\r\n   }\r\n  }\r\n\r\n  .sd-select-multiple__arrow {\r\n   position: absolute;\r\n   top: 8px;\r\n   right: 8px;\r\n   width: 12px;\r\n   height: 12px;\r\n   color: $grey_65;\r\n   transition: transform 0.3s ease;\r\n\r\n   &--open {\r\n    transform: rotate(180deg);\r\n   }\r\n  }\r\n }\r\n}\r\n\r\n.sd-select-multiple__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-dropdown-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n color: $grey_90;\r\n\r\n .sd-select-multiple__search-container {\r\n  position: sticky;\r\n  top: 0;\r\n  display: flex;\r\n  width: 100%;\r\n  background-color: white;\r\n  align-items: center;\r\n  padding: 4px 8px;\r\n  z-index: 1;\r\n\r\n  &--scrolled {\r\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n  }\r\n }\r\n\r\n .sd-select-multiple__option-placeholder {\r\n  padding: 4px 12px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  text-align: left;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from '@stencil/core';\r\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\n\r\n@Component({\r\n tag: 'sd-select-multiple',\r\n styleUrl: 'sd-select-multiple.scss',\r\n})\r\nexport class SdSelectMultiple extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: SelectOption[] | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n  this.sdChange?.emit(this.value);\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n  this.filteredOptions = this.options;\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   if (this.itemIndex === -1) {\r\n    searchInput?.focus();\r\n    return;\r\n   } else if (searchInput?.matches(':focus')) {\r\n    searchInput?.blur();\r\n   }\r\n  }\r\n\r\n  const optionElements = Array.from(\r\n   this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || [],\r\n  );\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (!currentItem || !this.isOpen) return;\r\n\r\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n  const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n  if (isOptionDisabled) {\r\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n   return;\r\n  }\r\n\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n  this.onDropdownToggle(this.isOpen);\r\n\r\n  const selectedOption = this.getSelectedOption();\r\n  if (!selectedOption) {\r\n   this.itemIndex = -1;\r\n  } else {\r\n   this.itemIndex = this.options.indexOf(selectedOption[0]);\r\n  }\r\n\r\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n  if (this.isOpen === false) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n  const optionElements = Array.from(\r\n   this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || [],\r\n  );\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  // 드롭다운이 열릴 때 검색 입력에 포커스\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   searchInput?.focus();\r\n  }\r\n\r\n  if (!currentItem) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n connectedCallback() {\r\n  // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n  this.filteredOptions = this.options;\r\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n  if (!this.selectRef?.contains(event.target as Node)) {\r\n   this.isOpen = false;\r\n  }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n  keyboardEvent.stopPropagation();\r\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n  if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n  keyboardEvent.preventDefault();\r\n  switch (keyboardEvent.key) {\r\n   case 'ArrowDown':\r\n   case 'ArrowUp':\r\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n    this.itemIndex = nextIndex;\r\n    break;\r\n   case 'Enter':\r\n    const selectedOption = this.filteredOptions[this.itemIndex];\r\n    if (selectedOption && !selectedOption.disabled) {\r\n     this.handleOptionSelection(selectedOption);\r\n    }\r\n    break;\r\n   case 'Escape':\r\n    this.isOpen = false;\r\n    break;\r\n  }\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.disabled) {\r\n   this.isOpen = !this.isOpen;\r\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n  }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n  const { option, event } = detail;\r\n  event.stopPropagation();\r\n\r\n  this.handleOptionSelection(option);\r\n };\r\n\r\n private filterOptions() {\r\n  if (!this.searchText || this.searchText.trim() === '') {\r\n   // 검색어가 없으면 전체 옵션 표시\r\n   this.filteredOptions = this.options;\r\n  } else {\r\n   // 검색어가 있으면 필터링\r\n   this.filteredOptions = this.options.filter(option =>\r\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n   );\r\n  }\r\n }\r\n\r\n private getSelectedOption(): SelectOption[] {\r\n  return this.options.filter(option => this.value?.includes(option));\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n  const target = event.target as HTMLElement;\r\n  const scrollTop = target.scrollTop;\r\n\r\n  // 스크롤이 조금이라도 되면 그림자 표시\r\n  this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n  if (this.searchRef) {\r\n   return this.searchRef.getNativeElement();\r\n  }\r\n  return null;\r\n }\r\n\r\n private handleOptionSelection = (option: SelectOption) => {\r\n  if (!option || option.disabled) return;\r\n\r\n  const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\r\n  if (isAlreadySelected) {\r\n   // 이미 선택된 옵션인 경우, 선택 해제\r\n   this.value = this.value?.filter(opt => opt.value !== option.value) || null;\r\n  } else {\r\n   // 새로운 옵션 선택\r\n   this.value = [...(this.value || []), option];\r\n  }\r\n };\r\n\r\n closeDropdown() {\r\n  this.isOpen = false;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n  if (!this.dropdownRef || !optionElement) return;\r\n\r\n  const dropdown = this.dropdownRef;\r\n  const optionTop = optionElement.offsetTop;\r\n  const optionHeight = optionElement.offsetHeight;\r\n  const dropdownScrollTop = dropdown.scrollTop;\r\n  const dropdownHeight = dropdown.clientHeight;\r\n\r\n  const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n  const visibleTop = dropdownScrollTop + searchOffset;\r\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n  if (optionTop < visibleTop) {\r\n   dropdown.scrollTop = optionTop - searchOffset;\r\n  } else if (optionTop + optionHeight > visibleBottom) {\r\n   dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n  }\r\n }\r\n\r\n // render method\r\n render() {\r\n  const style = {\r\n   '--select-width': this.width || '200px',\r\n   '--select-dropdown-height': this.dropdownHeight || '260px',\r\n  };\r\n\r\n  return (\r\n   <Host style={style}>\r\n    <div\r\n     class={{\r\n      'sd-select-multiple': true,\r\n      'sd-select-multiple--open': this.isOpen,\r\n      'sd-select-multiple--disabled': this.disabled,\r\n     }}\r\n     ref={el => (this.selectRef = el)}\r\n    >\r\n     {this.renderLabel(this.label)}\r\n     <div class=\"sd-select-multiple__container\">\r\n      {this.renderTrigger()}\r\n      {this.renderDropdown()}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n  if (!label) return null;\r\n\r\n  return <label class=\"sd-select-multiple__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n  const selectedOption = this.getSelectedOption();\r\n  return (\r\n   <div\r\n    class=\"sd-select-multiple__trigger\"\r\n    tabindex={this.disabled ? -1 : 0}\r\n    onClick={this.handleTriggerClick}\r\n   >\r\n    <span class=\"sd-select-multiple__value\">\r\n     {!selectedOption\r\n      ? '선택'\r\n      : selectedOption.length\r\n        ? selectedOption.map(option => option.label).join(', ')\r\n        : this.placeholder}\r\n    </span>\r\n    {this.clearable && selectedOption?.length > 0 && !this.disabled && (\r\n     <sd-icon\r\n      key=\"close-icon\"\r\n      name=\"close\"\r\n      size={10}\r\n      color=\"#888\"\r\n      class=\"sd-select-multiple__clear\"\r\n      onClick={event => {\r\n       event.stopPropagation();\r\n       this.value = null;\r\n      }}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    <sd-icon\r\n     key=\"arrow-icon\"\r\n     name=\"arrowDown\"\r\n     color=\"#888\"\r\n     class={{ 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\r\n    ></sd-icon>\r\n   </div>\r\n  );\r\n }\r\n\r\n private renderDropdown() {\r\n  if (this.isOpen === false) return null;\r\n  return (\r\n   <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n    <div\r\n     class=\"sd-select-multiple__dropdown\"\r\n     onScroll={this.handleDropdownScroll}\r\n     ref={el => (this.dropdownRef = el)}\r\n    >\r\n     {this.searchable && (\r\n      <div\r\n       class={{\r\n        'sd-select-multiple__search-container': true,\r\n        'sd-select-multiple__search-container--scrolled': this.isScrolled,\r\n       }}\r\n       onClick={event => event.stopPropagation()}\r\n      >\r\n       <sd-input\r\n        ref={el => (this.searchRef = el)}\r\n        value={this.searchText}\r\n        placeholder=\"검색\"\r\n        clearable\r\n        inputStyle={{ 'padding-left': '8px' }}\r\n        autofocus\r\n        onSdInput={event => {\r\n         this.searchText = String(event?.detail);\r\n        }}\r\n        onSdFocus={() => {\r\n         this.itemIndex = -1;\r\n        }}\r\n       >\r\n        <sd-icon\r\n         name=\"search\"\r\n         size={16}\r\n         color=\"#737373\"\r\n         style={{ marginRight: '4px' }}\r\n         slot=\"prefix\"\r\n        ></sd-icon>\r\n       </sd-input>\r\n      </div>\r\n     )}\r\n     {this.filteredOptions.length > 0 ? (\r\n      this.filteredOptions.map((option, index) => (\r\n       <slot name={`option-${option.value}`}>\r\n        <sd-select-option\r\n         option={option}\r\n         index={index}\r\n         isSelected={this.value?.some(selected => selected.value === option.value)}\r\n         isFocused={index === this.itemIndex}\r\n         onOptionClick={({ detail }: { detail: { option: SelectOption; event: Event } }) =>\r\n          this.handleOptionClick(detail)\r\n         }\r\n         useCheckbox={this.useCheckbox}\r\n        ></sd-select-option>\r\n       </slot>\r\n      ))\r\n     ) : (\r\n      <slot name=\"option-placeholder\">\r\n       <div class={'sd-select-multiple__option-placeholder'}>{this.optionPlaceholder}</div>\r\n      </slot>\r\n     )}\r\n    </div>\r\n   </sd-portal>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-select-multiple.entry.js","sources":["src/components/sd-select-multiple/sd-select-multiple.scss?tag=sd-select-multiple","src/components/sd-select-multiple/sd-select-multiple.tsx"],"sourcesContent":["@import 'variables';\r\n@import 'extend';\r\n\r\n:host {\r\n display: inline-block;\r\n height: fit-content;\r\n position: relative;\r\n}\r\n\r\n.sd-select-multiple {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n width: var(--select-width, 200px);\r\n height: 28px;\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select-multiple--disabled) {\r\n  background: $grey_10;\r\n }\r\n\r\n &.sd-select-multiple--disabled {\r\n  cursor: not-allowed;\r\n  background-color: $grey_20;\r\n  border-color: $grey_45;\r\n\r\n  .sd-select-multiple__label {\r\n   border-right: 1px solid $grey_45;\r\n  }\r\n\r\n  .sd-select-multiple__trigger {\r\n   color: $grey_65;\r\n   &:focus,\r\n   &:focus-visible,\r\n   &:focus-within {\r\n    outline: none !important;\r\n   }\r\n  }\r\n }\r\n\r\n &__label {\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  color: $grey_90;\r\n  padding: 4px 12px;\r\n  border-right: 1px solid $grey_45;\r\n  border-radius: 4px 0 0 4px;\r\n  background-color: $grey_10;\r\n }\r\n\r\n &__container {\r\n  position: relative;\r\n  width: 100%;\r\n  display: flex;\r\n\r\n  .sd-select-multiple__trigger {\r\n   padding: 4px 20px 4px 12px;\r\n   display: flex;\r\n   width: 100%;\r\n   align-items: center;\r\n\r\n   .sd-select-multiple__value {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n    line-height: 20px;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n   }\r\n\r\n   .sd-select-multiple__clear {\r\n    margin: 0 4px;\r\n    width: 8px;\r\n    height: 8px;\r\n    background-color: transparent;\r\n    outline: none;\r\n    border: none;\r\n   }\r\n  }\r\n\r\n  .sd-select-multiple__arrow {\r\n   position: absolute;\r\n   top: 8px;\r\n   right: 8px;\r\n   width: 12px;\r\n   height: 12px;\r\n   color: $grey_65;\r\n   transition: transform 0.3s ease;\r\n\r\n   &--open {\r\n    transform: rotate(180deg);\r\n   }\r\n  }\r\n }\r\n}\r\n\r\n.sd-select-multiple__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-dropdown-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n color: $grey_90;\r\n\r\n .sd-select-multiple__search-container {\r\n  position: sticky;\r\n  top: 0;\r\n  display: flex;\r\n  width: 100%;\r\n  background-color: white;\r\n  align-items: center;\r\n  padding: 4px 8px;\r\n  z-index: 1;\r\n\r\n  &--scrolled {\r\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n  }\r\n }\r\n\r\n .sd-select-multiple__option-placeholder {\r\n  padding: 4px 12px;\r\n  font-size: 12px;\r\n  line-height: 20px;\r\n  text-align: left;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from '@stencil/core';\r\nimport type { SelectOption, SelectMultipleEvents } from '../../types/select';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\n\r\n@Component({\r\n tag: 'sd-select-multiple',\r\n styleUrl: 'sd-select-multiple.scss',\r\n})\r\nexport class SdSelectMultiple extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: SelectOption[] | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOption[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Method()\r\n async open() {\r\n  this.isOpen = true;\r\n }\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n  this.sdChange?.emit(this.value);\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n  this.filteredOptions = this.options;\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n  this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   if (this.itemIndex === -1) {\r\n    searchInput?.focus();\r\n    return;\r\n   } else if (searchInput?.matches(':focus')) {\r\n    searchInput?.blur();\r\n   }\r\n  }\r\n\r\n  const optionElements = Array.from(\r\n   this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || [],\r\n  );\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  if (!currentItem || !this.isOpen) return;\r\n\r\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n  const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n  if (isOptionDisabled) {\r\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n   return;\r\n  }\r\n\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n  // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n  this.onDropdownToggle(this.isOpen);\r\n\r\n  const selectedOption = this.getSelectedOption();\r\n  if (!selectedOption) {\r\n   this.itemIndex = -1;\r\n  } else {\r\n   this.itemIndex = this.options.indexOf(selectedOption[0]);\r\n  }\r\n\r\n  this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n  if (this.isOpen === false) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n  const optionElements = Array.from(\r\n   this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || [],\r\n  );\r\n  const currentItem = optionElements?.[this.itemIndex];\r\n\r\n  // 드롭다운이 열릴 때 검색 입력에 포커스\r\n  if (this.searchable) {\r\n   const searchInput = await this.getNativeInputElement();\r\n   searchInput?.focus();\r\n  }\r\n\r\n  if (!currentItem) return;\r\n\r\n  await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이\r\n  this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n connectedCallback() {\r\n  // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n  this.filteredOptions = this.options;\r\n  this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n  this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n  if (!this.selectRef?.contains(event.target as Node)) {\r\n   this.isOpen = false;\r\n  }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n  keyboardEvent.stopPropagation();\r\n  const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n  if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n  keyboardEvent.preventDefault();\r\n  switch (keyboardEvent.key) {\r\n   case 'ArrowDown':\r\n   case 'ArrowUp':\r\n    const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n    const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n    this.itemIndex = nextIndex;\r\n    break;\r\n   case 'Enter':\r\n    const selectedOption = this.filteredOptions[this.itemIndex];\r\n    if (selectedOption && !selectedOption.disabled) {\r\n     this.handleOptionSelection(selectedOption);\r\n    }\r\n    break;\r\n   case 'Escape':\r\n    this.isOpen = false;\r\n    break;\r\n  }\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n  event.stopPropagation();\r\n\r\n  if (!this.disabled) {\r\n   this.isOpen = !this.isOpen;\r\n   this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n  }\r\n };\r\n\r\n handleOptionClick = (detail: { option: SelectOption; event: Event }) => {\r\n  const { option, event } = detail;\r\n  event.stopPropagation();\r\n\r\n  this.handleOptionSelection(option);\r\n };\r\n\r\n private filterOptions() {\r\n  if (!this.searchText || this.searchText.trim() === '') {\r\n   // 검색어가 없으면 전체 옵션 표시\r\n   this.filteredOptions = this.options;\r\n  } else {\r\n   // 검색어가 있으면 필터링\r\n   this.filteredOptions = this.options.filter(option =>\r\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n   );\r\n  }\r\n }\r\n\r\n private getSelectedOption(): SelectOption[] {\r\n  return this.options.filter(option => this.value?.includes(option));\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n  const target = event.target as HTMLElement;\r\n  const scrollTop = target.scrollTop;\r\n\r\n  // 스크롤이 조금이라도 되면 그림자 표시\r\n  this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n  if (this.searchRef) {\r\n   return this.searchRef.getNativeElement();\r\n  }\r\n  return null;\r\n }\r\n\r\n private handleOptionSelection = (option: SelectOption) => {\r\n  if (!option || option.disabled) return;\r\n\r\n  const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\r\n  if (isAlreadySelected) {\r\n   // 이미 선택된 옵션인 경우, 선택 해제\r\n   this.value = this.value?.filter(opt => opt.value !== option.value) || null;\r\n  } else {\r\n   // 새로운 옵션 선택\r\n   this.value = [...(this.value || []), option];\r\n  }\r\n };\r\n\r\n closeDropdown() {\r\n  this.isOpen = false;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n  if (!this.dropdownRef || !optionElement) return;\r\n\r\n  const dropdown = this.dropdownRef;\r\n  const optionTop = optionElement.offsetTop;\r\n  const optionHeight = optionElement.offsetHeight;\r\n  const dropdownScrollTop = dropdown.scrollTop;\r\n  const dropdownHeight = dropdown.clientHeight;\r\n\r\n  const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n  const visibleTop = dropdownScrollTop + searchOffset;\r\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n  if (optionTop < visibleTop) {\r\n   dropdown.scrollTop = optionTop - searchOffset;\r\n  } else if (optionTop + optionHeight > visibleBottom) {\r\n   dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n  }\r\n }\r\n\r\n // render method\r\n render() {\r\n  const style = {\r\n   '--select-width': this.width || '200px',\r\n   '--select-dropdown-height': this.dropdownHeight || '260px',\r\n  };\r\n\r\n  return (\r\n   <Host style={style}>\r\n    <div\r\n     class={{\r\n      'sd-select-multiple': true,\r\n      'sd-select-multiple--open': this.isOpen,\r\n      'sd-select-multiple--disabled': this.disabled,\r\n     }}\r\n     ref={el => (this.selectRef = el)}\r\n    >\r\n     {this.renderLabel(this.label)}\r\n     <div class=\"sd-select-multiple__container\">\r\n      {this.renderTrigger()}\r\n      {this.renderDropdown()}\r\n     </div>\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n\r\n private renderLabel(label?: string) {\r\n  if (!label) return null;\r\n\r\n  return <label class=\"sd-select-multiple__label\">{label}</label>;\r\n }\r\n\r\n private renderTrigger() {\r\n  const selectedOption = this.getSelectedOption();\r\n  return (\r\n   <div\r\n    class=\"sd-select-multiple__trigger\"\r\n    tabindex={this.disabled ? -1 : 0}\r\n    onClick={this.handleTriggerClick}\r\n   >\r\n    <span class=\"sd-select-multiple__value\">\r\n     {!selectedOption\r\n      ? '선택'\r\n      : selectedOption.length\r\n        ? selectedOption.map(option => option.label).join(', ')\r\n        : this.placeholder}\r\n    </span>\r\n    {this.clearable && selectedOption?.length > 0 && !this.disabled && (\r\n     <sd-icon\r\n      key=\"close-icon\"\r\n      name=\"close\"\r\n      size={10}\r\n      color=\"#888\"\r\n      class=\"sd-select-multiple__clear\"\r\n      onClick={event => {\r\n       event.stopPropagation();\r\n       this.value = null;\r\n      }}\r\n     ></sd-icon>\r\n    )}\r\n\r\n    <sd-icon\r\n     key=\"arrow-icon\"\r\n     name=\"arrowDown\"\r\n     color=\"#888\"\r\n     class={{ 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen }}\r\n    ></sd-icon>\r\n   </div>\r\n  );\r\n }\r\n\r\n private renderDropdown() {\r\n  if (this.isOpen === false) return null;\r\n  return (\r\n   <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n    <div\r\n     class=\"sd-select-multiple__dropdown\"\r\n     onScroll={this.handleDropdownScroll}\r\n     ref={el => (this.dropdownRef = el)}\r\n    >\r\n     {this.searchable && (\r\n      <div\r\n       class={{\r\n        'sd-select-multiple__search-container': true,\r\n        'sd-select-multiple__search-container--scrolled': this.isScrolled,\r\n       }}\r\n       onClick={event => event.stopPropagation()}\r\n      >\r\n       <sd-input\r\n        ref={el => (this.searchRef = el)}\r\n        value={this.searchText}\r\n        placeholder=\"검색\"\r\n        clearable\r\n        inputStyle={{ 'padding-left': '8px' }}\r\n        autofocus\r\n        onSdInput={event => {\r\n         this.searchText = String(event?.detail);\r\n        }}\r\n        onSdFocus={() => {\r\n         this.itemIndex = -1;\r\n        }}\r\n       >\r\n        <sd-icon\r\n         name=\"search\"\r\n         size={16}\r\n         color=\"#737373\"\r\n         style={{ marginRight: '4px' }}\r\n         slot=\"prefix\"\r\n        ></sd-icon>\r\n       </sd-input>\r\n      </div>\r\n     )}\r\n     {this.filteredOptions.length > 0 ? (\r\n      this.filteredOptions.map((option, index) => (\r\n       <slot name={`option-${option.value}`}>\r\n        <sd-select-option\r\n         option={option}\r\n         index={index}\r\n         isSelected={this.value?.some(selected => selected.value === option.value)}\r\n         isFocused={index === this.itemIndex}\r\n         onOptionClick={({ detail }: { detail: { option: SelectOption; event: Event } }) =>\r\n          this.handleOptionClick(detail)\r\n         }\r\n         useCheckbox={this.useCheckbox}\r\n        ></sd-select-option>\r\n       </slot>\r\n      ))\r\n     ) : (\r\n      <slot name=\"option-placeholder\">\r\n       <div class={'sd-select-multiple__option-placeholder'}>{this.optionPlaceholder}</div>\r\n      </slot>\r\n     )}\r\n    </div>\r\n   </sd-portal>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/sd-table.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ClyGLKUd.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-7X2nzJWz.js';
 
-const sdTableCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr:last-of-type sd-td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
+const sdTableCss = () => `.sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead sd-tr sd-th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:calc(var(--table-height, auto) - 36px);min-height:calc(100% - 36px);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr:last-of-type sd-td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-tbody sd-tr sd-td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -194,10 +194,10 @@ const SdTable = class {
             }, style: this.getStickyStyle(colIdx) }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
     }
     render() {
-        return (h(Host, { key: 'a1b686469dfc58d9c57cdc975aac423cf9404012' }, h("div", { key: '8707550d614eac9649b0bb7f9842e21ebe032c45', class: "sd-table__wrapper", style: {
+        return (h(Host, { key: 'e87739da29d845e6125f0902d4ed6b5d026a6396' }, h("div", { key: '88cdda9d8ea755451d1d4203e1c99e6299e5976f', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'df9ac71cdf2decd79714a66177ec65524ce35d5a', class: "sd-table__container" }, h("div", { key: 'c4225356f08b883c82038426d923446f85edeb2b', class: "sd-table__middle", role: "table" }, h("div", { key: '3a75336a77e732a5de56d057429f072a2c946042', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: 'c1aa8c874dfb96e411fb0b66134c5ab098629d87' }, h("slot", { key: 'f2e40bf5c0fea78af06e3cc8be3568d21e9c4f8d' })))), h("div", { key: 'a5e9382c17261d4f11e4ab9be2b26e6154677a03', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'f96b29f77f639184d674b3ea3ae7e28e620db1fb', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e21505112e7b31904c1fde0985443f2e43544a2e', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+            } }, h("div", { key: 'd3005abd30787fc1dc9abeb696929431953b41af', class: "sd-table__container" }, h("div", { key: 'df9392e80901fd65f7ac5dbf5062cc7066350801', class: "sd-table__middle", role: "table" }, h("div", { key: 'a0fbd5d6dc678c9dc7a830c42081bb4bbb94ab8c', part: "table", class: this.sdTableClasses }, this.renderHeader(), h("sd-tbody", { key: 'adc08dcd7f7f150437ed15de422e5d2715533171' }, h("slot", { key: '2ceb6debd25a399178fb3e0357e80f568ca20e37' })))), h("div", { key: '281e0bb2159e295dafde37dc7ca393a96e9e7ad4', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: '834780fb066391bca88dba1e2944492c30ccbc22', class: "sd-table__pagination" }, h("sd-pagination", { key: '623576270d271eab4886e99c2f0163aaf41b2904', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
                 if (!this.useInternalPagination) {
                     this.sdPageChange.emit(e.detail);
                 }
@@ -205,7 +205,7 @@ const SdTable = class {
                     this.currentPage = e.detail;
                     this.sdPageChange.emit(this.currentPage);
                 }
-            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '32890039f67ebda027e336a31ab790141ec2c7c2', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: '85ea699d7acb1ad4eccc6c97ca668a60c6f606e7', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
                 const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
                 if (!this.useInternalPagination) {
                     this.sdRowsPerPageChange.emit(changedRowsPerPage);
@@ -234,7 +234,7 @@ const SdTable = class {
         "pagination": ["handlePaginationChange"]
     }; }
 };
-SdTable.style = sdTableCss;
+SdTable.style = sdTableCss();
 
 export { SdTable as sd_table };
 //# sourceMappingURL=sd-table.entry.js.map

package/dist/esm/sd-table.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-table.entry.js","sources":["src/components/sd-table/sd-table.scss?tag=sd-table","src/components/sd-table/sd-table.tsx"],"sourcesContent":["@import 'variables.scss';\r\n@import 'extend.scss';\r\n\r\n.sd-table__wrapper {\r\n height: var(--table-height, auto);\r\n width: var(--table-width, 100%);\r\n color: $grey_95;\r\n\r\n .sd-table__container {\r\n  width: 100%;\r\n  height: auto;\r\n  border: 1px solid $grey_30;\r\n  border-radius: 8px;\r\n  font-size: 12px;\r\n  overflow: hidden;\r\n\r\n  .sd-table__middle {\r\n   overflow: auto;\r\n   will-change: scroll-position;\r\n   height: var(--table-height, auto);\r\n   @extend %scrollBar;\r\n\r\n   .sd-table {\r\n    background-color: white;\r\n    display: table;\r\n    width: 100%;\r\n    border-collapse: separate;\r\n    border-spacing: 0;\r\n    table-layout: fixed;\r\n    position: relative;\r\n\r\n    &--selectable {\r\n     td.sd-td--selected,\r\n     th.sd-th--selected {\r\n      width: 52px !important;\r\n      max-width: 52px !important;\r\n      min-width: 52px !important;\r\n      padding: 0 10px 0 24px;\r\n      text-align: left;\r\n     }\r\n    }\r\n\r\n    &--sticky-header {\r\n     thead {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 120;\r\n     }\r\n    }\r\n\r\n    &--sticky-column {\r\n     th.sticky-left,\r\n     th.sticky-right {\r\n      position: sticky;\r\n      background-color: $th-bg;\r\n      z-index: 110 !important;\r\n     }\r\n     td.sticky-left,\r\n     td.sticky-right {\r\n      position: sticky;\r\n      background-color: white;\r\n      z-index: 100 !important;\r\n     }\r\n\r\n     .sticky-left {\r\n      left: var(--sticky-left-offset, 0);\r\n     }\r\n     .sticky-right {\r\n      right: var(--sticky-right-offset, 0);\r\n     }\r\n\r\n     th.sticky-cell {\r\n      position: sticky;\r\n      z-index: 102;\r\n      background-color: $th-bg;\r\n     }\r\n     td.sticky-cell {\r\n      position: sticky;\r\n      z-index: 101;\r\n      background-color: white;\r\n     }\r\n    }\r\n\r\n    &--scrolled-left {\r\n     th.sticky-left-edge,\r\n     td.sticky-left-edge {\r\n      overflow: visible;\r\n      &:after {\r\n       content: '';\r\n       position: absolute;\r\n       top: 0;\r\n       left: 100%;\r\n       right: -20px;\r\n       width: 20px;\r\n       height: 100%;\r\n       z-index: 101 !important;\r\n       box-shadow: inset 12px 0 20px -25px;\r\n       opacity: 1;\r\n       pointer-events: none;\r\n      }\r\n     }\r\n    }\r\n\r\n    &--scrolled-right {\r\n     th.sticky-right-edge,\r\n     td.sticky-right-edge {\r\n      overflow: visible;\r\n\r\n      &:after {\r\n       content: '';\r\n       position: absolute;\r\n       top: 0;\r\n       left: -20px;\r\n       width: 20px;\r\n       height: 100%;\r\n       z-index: 101 !important;\r\n       box-shadow: inset -12px 0 20px -25px;\r\n       opacity: 1;\r\n       pointer-events: none;\r\n      }\r\n     }\r\n    }\r\n\r\n    &--no-data {\r\n     thead {\r\n      opacity: 0.4;\r\n      tr {\r\n       th {\r\n        &.sd-th {\r\n         border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n\r\n    sd-td,\r\n    sd-th,\r\n    .sd-th__content--label {\r\n     overflow: hidden;\r\n     white-space: nowrap;\r\n     text-overflow: ellipsis;\r\n     word-break: keep-all;\r\n    }\r\n\r\n    thead {\r\n     height: 36px;\r\n\r\n     sd-tr {\r\n      width: 100%;\r\n\r\n      sd-th {\r\n       background: $th-bg;\r\n       height: 36px;\r\n       padding: 0 16px;\r\n       font-weight: 500;\r\n       vertical-align: middle;\r\n       border-bottom: 1px solid $grey_30;\r\n       -webkit-user-select: none;\r\n       user-select: none;\r\n       position: relative;\r\n\r\n       &.sd-th {\r\n        .sd-th__content {\r\n         display: flex;\r\n         flex-flow: row nowrap;\r\n         align-items: center;\r\n         gap: 4px;\r\n\r\n         &--left {\r\n          justify-content: flex-start;\r\n         }\r\n         &--center {\r\n          justify-content: center;\r\n         }\r\n         &--right {\r\n          justify-content: flex-end;\r\n         }\r\n        }\r\n\r\n        .sd-th__resizer {\r\n         position: absolute;\r\n         top: 50%;\r\n         right: 0;\r\n         transform: translateY(-50%);\r\n         width: 4px;\r\n         height: 16px;\r\n         cursor: col-resize;\r\n         z-index: 3;\r\n         border-left: 1px solid $grey_45;\r\n         border-right: 1px solid $grey_45;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n\r\n    sd-tbody {\r\n     .sd-table__loading {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: calc(var(--table-height, auto) - 36px);\r\n      min-height: calc(100% - 36px);\r\n      background: rgba(255, 255, 255, 0.6);\r\n      z-index: 200;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n     }\r\n\r\n     sd-tr {\r\n      &:last-of-type {\r\n       sd-td {\r\n        border-bottom: none;\r\n       }\r\n      }\r\n      sd-td {\r\n       height: 44px;\r\n       padding: 0 16px;\r\n       border-bottom: 1px solid $grey_30;\r\n       background: white;\r\n       vertical-align: middle;\r\n\r\n       &.sd-td {\r\n        &--left {\r\n         text-align: left;\r\n        }\r\n        &--center {\r\n         text-align: center;\r\n        }\r\n        &--right {\r\n         text-align: right;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n  }\r\n\r\n  .sd-table__bottom {\r\n   background: white;\r\n   text-align: center;\r\n  }\r\n }\r\n\r\n .sd-table__pagination {\r\n  position: relative;\r\n  background: $grey_05;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid $grey_30;\r\n  border-top: none;\r\n  border-radius: 8px;\r\n\r\n  sd-select {\r\n   position: absolute;\r\n   right: 10px;\r\n   top: 50%;\r\n   transform: translateY(-50%);\r\n\r\n   .sd-select {\r\n   }\r\n  }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n Watch,\r\n h,\r\n EventEmitter,\r\n Host,\r\n} from '@stencil/core';\r\nimport { CheckedType } from '../sd-checkbox/sd-checkbox';\r\nimport { SelectOption } from '../sd-select/sd-select';\r\nimport { SdSelectCustomEvent } from '../../components';\r\n\r\nexport type SdTableSortDir = 'asc' | 'desc' | 'none';\r\n\r\nexport interface SdTableColumn {\r\n name: string;\r\n label: string;\r\n field: string | ((row: any) => any);\r\n align?: 'left' | 'center' | 'right';\r\n width?: string;\r\n format?: (value: any, row: any) => string;\r\n visible?: boolean;\r\n usePageMoveIcon?: boolean;\r\n tooltip?: string[];\r\n tooltipOptions?: Record<string, any>;\r\n tdClass?: string;\r\n thClass?: string;\r\n}\r\n\r\nexport interface Row {\r\n [key: string]: any;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-table',\r\n styleUrl: 'sd-table.scss',\r\n})\r\nexport class SdTable {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() columns!: SdTableColumn[];\r\n @Prop({ mutable: true }) rows!: Row[];\r\n @Prop({ mutable: true }) selected: Set<Row> = new Set();\r\n @Prop() rowKey: string = 'id';\r\n @Prop() selectable: boolean = false;\r\n @Prop() resizable: boolean = false;\r\n @Prop() width?: string;\r\n @Prop() height?: string;\r\n @Prop() stickyHeader: boolean = false;\r\n @Prop() stickyColumn: { left?: number; right?: number } = { left: 0, right: 0 };\r\n @Prop() noDataLabel: string = '데이터가 없습니다.';\r\n @Prop() isLoading: boolean = false;\r\n @Prop() pagination?: {\r\n  page: number;\r\n  rowsPerPage: number;\r\n  lastPage?: number;\r\n };\r\n @Prop() bodyCellRenderer?: (\r\n  column: SdTableColumn,\r\n  row: Row,\r\n ) => HTMLElement | string | null | undefined;\r\n @Prop() useInternalPagination: boolean = false;\r\n @Prop() useRowsPerPageSelect: boolean = false;\r\n @Prop() rowsPerPageOption: SelectOption[] = [\r\n  { label: '10개씩 보기', value: 10 },\r\n  { label: '25개씩 보기', value: 25 },\r\n  { label: '50개씩 보기', value: 50 },\r\n  { label: '100개씩 보기', value: 100 },\r\n ];\r\n\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: EventEmitter<number>;\r\n @Event() sdRowsPerPageChange!: EventEmitter<number>;\r\n\r\n @State() currentPage: number = this.pagination?.page || 1;\r\n @State() innerRows: Row[] = [];\r\n @State() innerSelected: Set<Row> = new Set();\r\n @State() columnWidths: number[] = [];\r\n @State() scrolledLeft: boolean = false;\r\n @State() scrolledRight: boolean = false;\r\n\r\n @Watch('columns')\r\n handleColumnsChange(newCols: SdTableColumn[]) {\r\n  this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n @Watch('rows')\r\n handleRowsChange(newRows: Row[]) {\r\n  this.innerRows = [...newRows];\r\n }\r\n\r\n @Watch('selected')\r\n handleSelectedChange(newSelected: Set<Row>) {\r\n  this.innerSelected = new Set(newSelected);\r\n }\r\n\r\n @Watch('pagination')\r\n handlePaginationChange(\r\n  newVal?: { page: number; rowsPerPage: number; lastPage?: number } | undefined,\r\n ) {\r\n  if (newVal?.page && newVal.page !== this.currentPage) this.currentPage = newVal.page;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.innerRows = [...(this.rows || [])];\r\n  this.innerSelected = new Set(this.selected);\r\n  this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n componentDidLoad() {\r\n  // SSR 환경 체크\r\n  if (typeof window === 'undefined') return;\r\n\r\n  const middle = this.el.querySelector('.sd-table__middle');\r\n  if (!middle) return;\r\n\r\n  const onScroll = () => {\r\n   const { scrollLeft, scrollWidth, clientWidth } = middle as HTMLElement;\r\n   this.scrolledLeft = scrollLeft > 0;\r\n   this.scrolledRight = scrollLeft + clientWidth < scrollWidth;\r\n  };\r\n  middle.addEventListener('scroll', onScroll, { passive: true });\r\n  onScroll();\r\n }\r\n\r\n // ----- Derived getters -----\r\n private get visibleColumns(): SdTableColumn[] {\r\n  return this.columns.filter(col => col.visible !== false);\r\n }\r\n\r\n private get paginatedRows(): Row[] {\r\n  if (!this.pagination || !this.useInternalPagination) return this.innerRows;\r\n\r\n  const { rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  const result = this.innerRows.slice(\r\n   (this.currentPage - 1) * rowsPerPage,\r\n   this.currentPage * rowsPerPage,\r\n  );\r\n\r\n  return result;\r\n }\r\n\r\n private get lastPageNumber(): number {\r\n  const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));\r\n }\r\n\r\n private get sdTableClasses() {\r\n  return [\r\n   'sd-table',\r\n   this.stickyHeader && 'sd-table--sticky-header',\r\n   this.selectable && 'sd-table--selectable',\r\n   this.resizable && 'sd-table--resizable',\r\n   !this.innerRows.length && 'sd-table--no-data',\r\n   ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&\r\n    'sd-table--sticky-column',\r\n   this.scrolledLeft && 'sd-table--scrolled-left',\r\n   this.scrolledRight && 'sd-table--scrolled-right',\r\n  ]\r\n   .filter(Boolean)\r\n   .join(' ');\r\n }\r\n\r\n // ----- Selection -----\r\n //  private isRowSelected(row: Row): boolean {\r\n //   return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);\r\n //  }\r\n\r\n //  private updateRowSelect(row: Row) {\r\n //   const selectedArray = Array.from(this.innerSelected);\r\n //   const exists = this.isRowSelected(row);\r\n //   const newSelected = exists\r\n //    ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])\r\n //    : [...selectedArray, row];\r\n\r\n //   // 동일 상태면 set하지 않음 → 불필요 렌더 방지\r\n //   if (newSelected.length === selectedArray.length) return;\r\n\r\n //   this.innerSelected = new Set(newSelected);\r\n //   this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n //  }\r\n\r\n private toggleSelectAll(checked: CheckedType) {\r\n  if (checked) {\r\n   const pageRows = new Set([...this.paginatedRows]);\r\n   this.innerSelected = new Set([...this.innerSelected, ...pageRows]);\r\n  } else {\r\n   const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);\r\n   this.innerSelected = new Set(\r\n    [...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])),\r\n   );\r\n  }\r\n\r\n  this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private get isAllChecked(): boolean | null {\r\n  const total = this.paginatedRows.length;\r\n  const selectedCount = this.paginatedRows.filter(row =>\r\n   Array.from(this.innerSelected).some(\r\n    selectedRow => selectedRow[this.rowKey] === row[this.rowKey],\r\n   ),\r\n  ).length;\r\n\r\n  if (selectedCount === 0) return false; // 아무것도 안 선택됨\r\n  if (selectedCount === total) return true; // 전부 선택됨\r\n  return null; // 일부만 선택됨\r\n }\r\n\r\n // ----- Helpers -----\r\n private getStickyStyle(colIdx: number) {\r\n  const leftOffset =\r\n   this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);\r\n  const rightOffset = this.columnWidths\r\n   .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)\r\n   .reduce((a, b) => a + b, 0);\r\n  return {\r\n   '--sticky-left-offset': `${leftOffset}px`,\r\n   '--sticky-right-offset': `${rightOffset}px`,\r\n   'width': `${this.columnWidths[colIdx]}px`,\r\n   'minWidth': `${this.columnWidths[colIdx]}px`,\r\n   'maxWidth': `${this.columnWidths[colIdx]}px`,\r\n  };\r\n }\r\n\r\n private handleResize(index: number, event: MouseEvent) {\r\n  // SSR 환경 체크\r\n  if (typeof document === 'undefined') return;\r\n\r\n  const startX = event.clientX;\r\n  const startWidth = this.columnWidths[index];\r\n\r\n  const handleMouseMove = (moveEvent: MouseEvent) => {\r\n   const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);\r\n\r\n   this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n   document.removeEventListener('mousemove', handleMouseMove);\r\n   document.removeEventListener('mouseup', handleMouseUp);\r\n  };\r\n\r\n  document.addEventListener('mousemove', handleMouseMove);\r\n  document.addEventListener('mouseup', handleMouseUp);\r\n }\r\n\r\n //  private getCellValue(column: SdTableColumn, row: Row) {\r\n //   const { field, format, name } = column;\r\n //   const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];\r\n //   return format ? format(value, row) : value;\r\n //  }\r\n\r\n // ----- Render -----\r\n private renderHeader() {\r\n  return (\r\n   <thead>\r\n    <sd-tr>\r\n     {this.selectable && (\r\n      <sd-th\r\n       class={{\r\n        'sd-th': true,\r\n        'sd-th--selected': true,\r\n        'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),\r\n       }}\r\n       style={{\r\n        '--sticky-left-offset': '0px',\r\n       }}\r\n      >\r\n       <sd-checkbox\r\n        checked={this.isAllChecked}\r\n        disabled={!this.paginatedRows.length}\r\n        onSdChange={(e: CustomEvent<CheckedType>) => this.toggleSelectAll(e.detail)}\r\n       ></sd-checkbox>\r\n      </sd-th>\r\n     )}\r\n     {this.visibleColumns.map((col, colIdx) => (\r\n      <sd-th\r\n       key={col.name}\r\n       class={{\r\n        'sd-th': true,\r\n        [`${col.thClass}`]: Boolean(col.thClass),\r\n        'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n        'sticky-right': Boolean(\r\n         this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right!,\r\n        ),\r\n        'sticky-left-edge': Boolean(\r\n         this.stickyColumn.left && colIdx === this.stickyColumn.left - 1,\r\n        ),\r\n        'sticky-right-edge': Boolean(\r\n         this.stickyColumn.right &&\r\n          colIdx === this.visibleColumns.length - this.stickyColumn.right!,\r\n        ),\r\n       }}\r\n       style={this.getStickyStyle(colIdx)}\r\n      >\r\n       <div class={`sd-th__content sd-th__content--${col.align || 'left'}`}>\r\n        <slot name={`header-cell-${col.name}`}>\r\n         <div class=\"sd-th__content--label\">{col.label}</div>\r\n        </slot>\r\n\r\n        {col.usePageMoveIcon && <sd-icon name=\"pageMove\" size=\"12\" color=\"#006AC1\" />}\r\n\r\n        {col.tooltip && (\r\n         <sd-tooltip {...col.tooltipOptions}>\r\n          <div slot=\"content\">\r\n           {col.tooltip.map(text => (\r\n            <p>{text}</p>\r\n           ))}\r\n          </div>\r\n         </sd-tooltip>\r\n        )}\r\n       </div>\r\n\r\n       {this.resizable && typeof window !== 'undefined' && (\r\n        <div\r\n         class=\"sd-th__resizer\"\r\n         onMouseDown={(evt: MouseEvent) => this.handleResize(colIdx, evt)}\r\n        ></div>\r\n       )}\r\n      </sd-th>\r\n     ))}\r\n    </sd-tr>\r\n   </thead>\r\n  );\r\n }\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <div\r\n     class=\"sd-table__wrapper\"\r\n     style={{\r\n      '--table-width': this.width,\r\n      '--table-height': this.height,\r\n     }}\r\n    >\r\n     <div class=\"sd-table__container\">\r\n      <div class=\"sd-table__middle\" role=\"table\">\r\n       <div part=\"table\" class={this.sdTableClasses}>\r\n        {this.renderHeader()}\r\n        <sd-tbody>\r\n         <slot></slot>\r\n        </sd-tbody>\r\n       </div>\r\n      </div>\r\n\r\n      <div class=\"sd-table__bottom\"></div>\r\n     </div>\r\n     {this.pagination && this.innerRows.length > 0 && (\r\n      <div class=\"sd-table__pagination\">\r\n       <sd-pagination\r\n        currentPage={!this.useInternalPagination ? this.pagination.page : this.currentPage}\r\n        lastPage={!this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber}\r\n        onPageChange={(e: CustomEvent<number>) => {\r\n         if (!this.useInternalPagination) {\r\n          this.sdPageChange.emit(e.detail);\r\n         } else {\r\n          this.currentPage = e.detail;\r\n          this.sdPageChange.emit(this.currentPage);\r\n         }\r\n        }}\r\n       ></sd-pagination>\r\n\r\n       {this.useRowsPerPageSelect && (\r\n        <sd-select\r\n         value={this.pagination.rowsPerPage}\r\n         options={this.rowsPerPageOption}\r\n         width=\"128px\"\r\n         onSdChange={(e: SdSelectCustomEvent<{ value: string | number | null }>) => {\r\n          const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;\r\n          if (!this.useInternalPagination) {\r\n           this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n          } else {\r\n           const newRowsPerPage = Number(e.detail.value || 0);\r\n           let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));\r\n           let newCurrentPage = this.currentPage;\r\n\r\n           if (newCurrentPage > newLastPage) {\r\n            newCurrentPage = newLastPage;\r\n           }\r\n\r\n           this.pagination = {\r\n            page: newCurrentPage,\r\n            rowsPerPage: newRowsPerPage,\r\n            lastPage: newLastPage,\r\n           };\r\n           this.currentPage = newCurrentPage;\r\n           this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n          }\r\n         }}\r\n        ></sd-select>\r\n       )}\r\n      </div>\r\n     )}\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-table.entry.js","sources":["src/components/sd-table/sd-table.scss?tag=sd-table","src/components/sd-table/sd-table.tsx"],"sourcesContent":["@import 'variables.scss';\r\n@import 'extend.scss';\r\n\r\n.sd-table__wrapper {\r\n height: var(--table-height, auto);\r\n width: var(--table-width, 100%);\r\n color: $grey_95;\r\n\r\n .sd-table__container {\r\n  width: 100%;\r\n  height: auto;\r\n  border: 1px solid $grey_30;\r\n  border-radius: 8px;\r\n  font-size: 12px;\r\n  overflow: hidden;\r\n\r\n  .sd-table__middle {\r\n   overflow: auto;\r\n   will-change: scroll-position;\r\n   height: var(--table-height, auto);\r\n   @extend %scrollBar;\r\n\r\n   .sd-table {\r\n    background-color: white;\r\n    display: table;\r\n    width: 100%;\r\n    border-collapse: separate;\r\n    border-spacing: 0;\r\n    table-layout: fixed;\r\n    position: relative;\r\n\r\n    &--selectable {\r\n     td.sd-td--selected,\r\n     th.sd-th--selected {\r\n      width: 52px !important;\r\n      max-width: 52px !important;\r\n      min-width: 52px !important;\r\n      padding: 0 10px 0 24px;\r\n      text-align: left;\r\n     }\r\n    }\r\n\r\n    &--sticky-header {\r\n     thead {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 120;\r\n     }\r\n    }\r\n\r\n    &--sticky-column {\r\n     th.sticky-left,\r\n     th.sticky-right {\r\n      position: sticky;\r\n      background-color: $th-bg;\r\n      z-index: 110 !important;\r\n     }\r\n     td.sticky-left,\r\n     td.sticky-right {\r\n      position: sticky;\r\n      background-color: white;\r\n      z-index: 100 !important;\r\n     }\r\n\r\n     .sticky-left {\r\n      left: var(--sticky-left-offset, 0);\r\n     }\r\n     .sticky-right {\r\n      right: var(--sticky-right-offset, 0);\r\n     }\r\n\r\n     th.sticky-cell {\r\n      position: sticky;\r\n      z-index: 102;\r\n      background-color: $th-bg;\r\n     }\r\n     td.sticky-cell {\r\n      position: sticky;\r\n      z-index: 101;\r\n      background-color: white;\r\n     }\r\n    }\r\n\r\n    &--scrolled-left {\r\n     th.sticky-left-edge,\r\n     td.sticky-left-edge {\r\n      overflow: visible;\r\n      &:after {\r\n       content: '';\r\n       position: absolute;\r\n       top: 0;\r\n       left: 100%;\r\n       right: -20px;\r\n       width: 20px;\r\n       height: 100%;\r\n       z-index: 101 !important;\r\n       box-shadow: inset 12px 0 20px -25px;\r\n       opacity: 1;\r\n       pointer-events: none;\r\n      }\r\n     }\r\n    }\r\n\r\n    &--scrolled-right {\r\n     th.sticky-right-edge,\r\n     td.sticky-right-edge {\r\n      overflow: visible;\r\n\r\n      &:after {\r\n       content: '';\r\n       position: absolute;\r\n       top: 0;\r\n       left: -20px;\r\n       width: 20px;\r\n       height: 100%;\r\n       z-index: 101 !important;\r\n       box-shadow: inset -12px 0 20px -25px;\r\n       opacity: 1;\r\n       pointer-events: none;\r\n      }\r\n     }\r\n    }\r\n\r\n    &--no-data {\r\n     thead {\r\n      opacity: 0.4;\r\n      tr {\r\n       th {\r\n        &.sd-th {\r\n         border-bottom: 1px solid rgba(225, 225, 225, 0.4) !important;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n\r\n    sd-td,\r\n    sd-th,\r\n    .sd-th__content--label {\r\n     overflow: hidden;\r\n     white-space: nowrap;\r\n     text-overflow: ellipsis;\r\n     word-break: keep-all;\r\n    }\r\n\r\n    thead {\r\n     height: 36px;\r\n\r\n     sd-tr {\r\n      width: 100%;\r\n\r\n      sd-th {\r\n       background: $th-bg;\r\n       height: 36px;\r\n       padding: 0 16px;\r\n       font-weight: 500;\r\n       vertical-align: middle;\r\n       border-bottom: 1px solid $grey_30;\r\n       -webkit-user-select: none;\r\n       user-select: none;\r\n       position: relative;\r\n\r\n       &.sd-th {\r\n        .sd-th__content {\r\n         display: flex;\r\n         flex-flow: row nowrap;\r\n         align-items: center;\r\n         gap: 4px;\r\n\r\n         &--left {\r\n          justify-content: flex-start;\r\n         }\r\n         &--center {\r\n          justify-content: center;\r\n         }\r\n         &--right {\r\n          justify-content: flex-end;\r\n         }\r\n        }\r\n\r\n        .sd-th__resizer {\r\n         position: absolute;\r\n         top: 50%;\r\n         right: 0;\r\n         transform: translateY(-50%);\r\n         width: 4px;\r\n         height: 16px;\r\n         cursor: col-resize;\r\n         z-index: 3;\r\n         border-left: 1px solid $grey_45;\r\n         border-right: 1px solid $grey_45;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n\r\n    sd-tbody {\r\n     .sd-table__loading {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: calc(var(--table-height, auto) - 36px);\r\n      min-height: calc(100% - 36px);\r\n      background: rgba(255, 255, 255, 0.6);\r\n      z-index: 200;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n     }\r\n\r\n     sd-tr {\r\n      &:last-of-type {\r\n       sd-td {\r\n        border-bottom: none;\r\n       }\r\n      }\r\n      sd-td {\r\n       height: 44px;\r\n       padding: 0 16px;\r\n       border-bottom: 1px solid $grey_30;\r\n       background: white;\r\n       vertical-align: middle;\r\n\r\n       &.sd-td {\r\n        &--left {\r\n         text-align: left;\r\n        }\r\n        &--center {\r\n         text-align: center;\r\n        }\r\n        &--right {\r\n         text-align: right;\r\n        }\r\n       }\r\n      }\r\n     }\r\n    }\r\n   }\r\n  }\r\n\r\n  .sd-table__bottom {\r\n   background: white;\r\n   text-align: center;\r\n  }\r\n }\r\n\r\n .sd-table__pagination {\r\n  position: relative;\r\n  background: $grey_05;\r\n  height: 48px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: 1px solid $grey_30;\r\n  border-top: none;\r\n  border-radius: 8px;\r\n\r\n  sd-select {\r\n   position: absolute;\r\n   right: 10px;\r\n   top: 50%;\r\n   transform: translateY(-50%);\r\n\r\n   .sd-select {\r\n   }\r\n  }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Prop,\r\n State,\r\n Event,\r\n Watch,\r\n h,\r\n EventEmitter,\r\n Host,\r\n} from '@stencil/core';\r\nimport { CheckedType } from '../sd-checkbox/sd-checkbox';\r\nimport { SelectOption } from '../sd-select/sd-select';\r\nimport { SdSelectCustomEvent } from '../../components';\r\n\r\nexport type SdTableSortDir = 'asc' | 'desc' | 'none';\r\n\r\nexport interface SdTableColumn {\r\n name: string;\r\n label: string;\r\n field: string | ((row: any) => any);\r\n align?: 'left' | 'center' | 'right';\r\n width?: string;\r\n format?: (value: any, row: any) => string;\r\n visible?: boolean;\r\n usePageMoveIcon?: boolean;\r\n tooltip?: string[];\r\n tooltipOptions?: Record<string, any>;\r\n tdClass?: string;\r\n thClass?: string;\r\n}\r\n\r\nexport interface Row {\r\n [key: string]: any;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-table',\r\n styleUrl: 'sd-table.scss',\r\n})\r\nexport class SdTable {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() columns!: SdTableColumn[];\r\n @Prop({ mutable: true }) rows!: Row[];\r\n @Prop({ mutable: true }) selected: Set<Row> = new Set();\r\n @Prop() rowKey: string = 'id';\r\n @Prop() selectable: boolean = false;\r\n @Prop() resizable: boolean = false;\r\n @Prop() width?: string;\r\n @Prop() height?: string;\r\n @Prop() stickyHeader: boolean = false;\r\n @Prop() stickyColumn: { left?: number; right?: number } = { left: 0, right: 0 };\r\n @Prop() noDataLabel: string = '데이터가 없습니다.';\r\n @Prop() isLoading: boolean = false;\r\n @Prop() pagination?: {\r\n  page: number;\r\n  rowsPerPage: number;\r\n  lastPage?: number;\r\n };\r\n @Prop() bodyCellRenderer?: (\r\n  column: SdTableColumn,\r\n  row: Row,\r\n ) => HTMLElement | string | null | undefined;\r\n @Prop() useInternalPagination: boolean = false;\r\n @Prop() useRowsPerPageSelect: boolean = false;\r\n @Prop() rowsPerPageOption: SelectOption[] = [\r\n  { label: '10개씩 보기', value: 10 },\r\n  { label: '25개씩 보기', value: 25 },\r\n  { label: '50개씩 보기', value: 50 },\r\n  { label: '100개씩 보기', value: 100 },\r\n ];\r\n\r\n @Event() sdSelectChange!: EventEmitter<Row[]>;\r\n @Event() sdPageChange!: EventEmitter<number>;\r\n @Event() sdRowsPerPageChange!: EventEmitter<number>;\r\n\r\n @State() currentPage: number = this.pagination?.page || 1;\r\n @State() innerRows: Row[] = [];\r\n @State() innerSelected: Set<Row> = new Set();\r\n @State() columnWidths: number[] = [];\r\n @State() scrolledLeft: boolean = false;\r\n @State() scrolledRight: boolean = false;\r\n\r\n @Watch('columns')\r\n handleColumnsChange(newCols: SdTableColumn[]) {\r\n  this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n @Watch('rows')\r\n handleRowsChange(newRows: Row[]) {\r\n  this.innerRows = [...newRows];\r\n }\r\n\r\n @Watch('selected')\r\n handleSelectedChange(newSelected: Set<Row>) {\r\n  this.innerSelected = new Set(newSelected);\r\n }\r\n\r\n @Watch('pagination')\r\n handlePaginationChange(\r\n  newVal?: { page: number; rowsPerPage: number; lastPage?: number } | undefined,\r\n ) {\r\n  if (newVal?.page && newVal.page !== this.currentPage) this.currentPage = newVal.page;\r\n }\r\n\r\n componentWillLoad() {\r\n  this.innerRows = [...(this.rows || [])];\r\n  this.innerSelected = new Set(this.selected);\r\n  this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));\r\n }\r\n\r\n componentDidLoad() {\r\n  // SSR 환경 체크\r\n  if (typeof window === 'undefined') return;\r\n\r\n  const middle = this.el.querySelector('.sd-table__middle');\r\n  if (!middle) return;\r\n\r\n  const onScroll = () => {\r\n   const { scrollLeft, scrollWidth, clientWidth } = middle as HTMLElement;\r\n   this.scrolledLeft = scrollLeft > 0;\r\n   this.scrolledRight = scrollLeft + clientWidth < scrollWidth;\r\n  };\r\n  middle.addEventListener('scroll', onScroll, { passive: true });\r\n  onScroll();\r\n }\r\n\r\n // ----- Derived getters -----\r\n private get visibleColumns(): SdTableColumn[] {\r\n  return this.columns.filter(col => col.visible !== false);\r\n }\r\n\r\n private get paginatedRows(): Row[] {\r\n  if (!this.pagination || !this.useInternalPagination) return this.innerRows;\r\n\r\n  const { rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  const result = this.innerRows.slice(\r\n   (this.currentPage - 1) * rowsPerPage,\r\n   this.currentPage * rowsPerPage,\r\n  );\r\n\r\n  return result;\r\n }\r\n\r\n private get lastPageNumber(): number {\r\n  const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};\r\n\r\n  return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));\r\n }\r\n\r\n private get sdTableClasses() {\r\n  return [\r\n   'sd-table',\r\n   this.stickyHeader && 'sd-table--sticky-header',\r\n   this.selectable && 'sd-table--selectable',\r\n   this.resizable && 'sd-table--resizable',\r\n   !this.innerRows.length && 'sd-table--no-data',\r\n   ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&\r\n    'sd-table--sticky-column',\r\n   this.scrolledLeft && 'sd-table--scrolled-left',\r\n   this.scrolledRight && 'sd-table--scrolled-right',\r\n  ]\r\n   .filter(Boolean)\r\n   .join(' ');\r\n }\r\n\r\n // ----- Selection -----\r\n //  private isRowSelected(row: Row): boolean {\r\n //   return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);\r\n //  }\r\n\r\n //  private updateRowSelect(row: Row) {\r\n //   const selectedArray = Array.from(this.innerSelected);\r\n //   const exists = this.isRowSelected(row);\r\n //   const newSelected = exists\r\n //    ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])\r\n //    : [...selectedArray, row];\r\n\r\n //   // 동일 상태면 set하지 않음 → 불필요 렌더 방지\r\n //   if (newSelected.length === selectedArray.length) return;\r\n\r\n //   this.innerSelected = new Set(newSelected);\r\n //   this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n //  }\r\n\r\n private toggleSelectAll(checked: CheckedType) {\r\n  if (checked) {\r\n   const pageRows = new Set([...this.paginatedRows]);\r\n   this.innerSelected = new Set([...this.innerSelected, ...pageRows]);\r\n  } else {\r\n   const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);\r\n   this.innerSelected = new Set(\r\n    [...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])),\r\n   );\r\n  }\r\n\r\n  this.sdSelectChange.emit(Array.from(this.innerSelected));\r\n }\r\n\r\n private get isAllChecked(): boolean | null {\r\n  const total = this.paginatedRows.length;\r\n  const selectedCount = this.paginatedRows.filter(row =>\r\n   Array.from(this.innerSelected).some(\r\n    selectedRow => selectedRow[this.rowKey] === row[this.rowKey],\r\n   ),\r\n  ).length;\r\n\r\n  if (selectedCount === 0) return false; // 아무것도 안 선택됨\r\n  if (selectedCount === total) return true; // 전부 선택됨\r\n  return null; // 일부만 선택됨\r\n }\r\n\r\n // ----- Helpers -----\r\n private getStickyStyle(colIdx: number) {\r\n  const leftOffset =\r\n   this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);\r\n  const rightOffset = this.columnWidths\r\n   .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)\r\n   .reduce((a, b) => a + b, 0);\r\n  return {\r\n   '--sticky-left-offset': `${leftOffset}px`,\r\n   '--sticky-right-offset': `${rightOffset}px`,\r\n   'width': `${this.columnWidths[colIdx]}px`,\r\n   'minWidth': `${this.columnWidths[colIdx]}px`,\r\n   'maxWidth': `${this.columnWidths[colIdx]}px`,\r\n  };\r\n }\r\n\r\n private handleResize(index: number, event: MouseEvent) {\r\n  // SSR 환경 체크\r\n  if (typeof document === 'undefined') return;\r\n\r\n  const startX = event.clientX;\r\n  const startWidth = this.columnWidths[index];\r\n\r\n  const handleMouseMove = (moveEvent: MouseEvent) => {\r\n   const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);\r\n\r\n   this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n   document.removeEventListener('mousemove', handleMouseMove);\r\n   document.removeEventListener('mouseup', handleMouseUp);\r\n  };\r\n\r\n  document.addEventListener('mousemove', handleMouseMove);\r\n  document.addEventListener('mouseup', handleMouseUp);\r\n }\r\n\r\n //  private getCellValue(column: SdTableColumn, row: Row) {\r\n //   const { field, format, name } = column;\r\n //   const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];\r\n //   return format ? format(value, row) : value;\r\n //  }\r\n\r\n // ----- Render -----\r\n private renderHeader() {\r\n  return (\r\n   <thead>\r\n    <sd-tr>\r\n     {this.selectable && (\r\n      <sd-th\r\n       class={{\r\n        'sd-th': true,\r\n        'sd-th--selected': true,\r\n        'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),\r\n       }}\r\n       style={{\r\n        '--sticky-left-offset': '0px',\r\n       }}\r\n      >\r\n       <sd-checkbox\r\n        checked={this.isAllChecked}\r\n        disabled={!this.paginatedRows.length}\r\n        onSdChange={(e: CustomEvent<CheckedType>) => this.toggleSelectAll(e.detail)}\r\n       ></sd-checkbox>\r\n      </sd-th>\r\n     )}\r\n     {this.visibleColumns.map((col, colIdx) => (\r\n      <sd-th\r\n       key={col.name}\r\n       class={{\r\n        'sd-th': true,\r\n        [`${col.thClass}`]: Boolean(col.thClass),\r\n        'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),\r\n        'sticky-right': Boolean(\r\n         this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right!,\r\n        ),\r\n        'sticky-left-edge': Boolean(\r\n         this.stickyColumn.left && colIdx === this.stickyColumn.left - 1,\r\n        ),\r\n        'sticky-right-edge': Boolean(\r\n         this.stickyColumn.right &&\r\n          colIdx === this.visibleColumns.length - this.stickyColumn.right!,\r\n        ),\r\n       }}\r\n       style={this.getStickyStyle(colIdx)}\r\n      >\r\n       <div class={`sd-th__content sd-th__content--${col.align || 'left'}`}>\r\n        <slot name={`header-cell-${col.name}`}>\r\n         <div class=\"sd-th__content--label\">{col.label}</div>\r\n        </slot>\r\n\r\n        {col.usePageMoveIcon && <sd-icon name=\"pageMove\" size=\"12\" color=\"#006AC1\" />}\r\n\r\n        {col.tooltip && (\r\n         <sd-tooltip {...col.tooltipOptions}>\r\n          <div slot=\"content\">\r\n           {col.tooltip.map(text => (\r\n            <p>{text}</p>\r\n           ))}\r\n          </div>\r\n         </sd-tooltip>\r\n        )}\r\n       </div>\r\n\r\n       {this.resizable && typeof window !== 'undefined' && (\r\n        <div\r\n         class=\"sd-th__resizer\"\r\n         onMouseDown={(evt: MouseEvent) => this.handleResize(colIdx, evt)}\r\n        ></div>\r\n       )}\r\n      </sd-th>\r\n     ))}\r\n    </sd-tr>\r\n   </thead>\r\n  );\r\n }\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <div\r\n     class=\"sd-table__wrapper\"\r\n     style={{\r\n      '--table-width': this.width,\r\n      '--table-height': this.height,\r\n     }}\r\n    >\r\n     <div class=\"sd-table__container\">\r\n      <div class=\"sd-table__middle\" role=\"table\">\r\n       <div part=\"table\" class={this.sdTableClasses}>\r\n        {this.renderHeader()}\r\n        <sd-tbody>\r\n         <slot></slot>\r\n        </sd-tbody>\r\n       </div>\r\n      </div>\r\n\r\n      <div class=\"sd-table__bottom\"></div>\r\n     </div>\r\n     {this.pagination && this.innerRows.length > 0 && (\r\n      <div class=\"sd-table__pagination\">\r\n       <sd-pagination\r\n        currentPage={!this.useInternalPagination ? this.pagination.page : this.currentPage}\r\n        lastPage={!this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber}\r\n        onPageChange={(e: CustomEvent<number>) => {\r\n         if (!this.useInternalPagination) {\r\n          this.sdPageChange.emit(e.detail);\r\n         } else {\r\n          this.currentPage = e.detail;\r\n          this.sdPageChange.emit(this.currentPage);\r\n         }\r\n        }}\r\n       ></sd-pagination>\r\n\r\n       {this.useRowsPerPageSelect && (\r\n        <sd-select\r\n         value={this.pagination.rowsPerPage}\r\n         options={this.rowsPerPageOption}\r\n         width=\"128px\"\r\n         onSdChange={(e: SdSelectCustomEvent<{ value: string | number | null }>) => {\r\n          const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;\r\n          if (!this.useInternalPagination) {\r\n           this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n          } else {\r\n           const newRowsPerPage = Number(e.detail.value || 0);\r\n           let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));\r\n           let newCurrentPage = this.currentPage;\r\n\r\n           if (newCurrentPage > newLastPage) {\r\n            newCurrentPage = newLastPage;\r\n           }\r\n\r\n           this.pagination = {\r\n            page: newCurrentPage,\r\n            rowsPerPage: newRowsPerPage,\r\n            lastPage: newLastPage,\r\n           };\r\n           this.currentPage = newCurrentPage;\r\n           this.sdRowsPerPageChange.emit(changedRowsPerPage);\r\n          }\r\n         }}\r\n        ></sd-select>\r\n       )}\r\n      </div>\r\n     )}\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,4jOAA4jO,CAAC;;MCwC1kO,OAAO,GAAA,MAAA;;;;;;;;AAGX,IAAA,OAAO;AACU,IAAA,IAAI;AACJ,IAAA,QAAQ,GAAa,IAAI,GAAG,EAAE;IAC/C,MAAM,GAAW,IAAI;IACrB,UAAU,GAAY,KAAK;IAC3B,SAAS,GAAY,KAAK;AAC1B,IAAA,KAAK;AACL,IAAA,MAAM;IACN,YAAY,GAAY,KAAK;IAC7B,YAAY,GAAsC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;IACvE,WAAW,GAAW,YAAY;IAClC,SAAS,GAAY,KAAK;AAC1B,IAAA,UAAU;AAKV,IAAA,gBAAgB;IAIhB,qBAAqB,GAAY,KAAK;IACtC,oBAAoB,GAAY,KAAK;AACrC,IAAA,iBAAiB,GAAmB;AAC3C,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;AAC/B,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;AAC/B,QAAA,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;AAC/B,QAAA,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE;KACjC;AAEQ,IAAA,cAAc;AACd,IAAA,YAAY;AACZ,IAAA,mBAAmB;IAEnB,WAAW,GAAW,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC;IAChD,SAAS,GAAU,EAAE;AACrB,IAAA,aAAa,GAAa,IAAI,GAAG,EAAE;IACnC,YAAY,GAAa,EAAE;IAC3B,YAAY,GAAY,KAAK;IAC7B,aAAa,GAAY,KAAK;AAGvC,IAAA,mBAAmB,CAAC,OAAwB,EAAA;QAC3C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE,CAAC,CAAC;;AAIrE,IAAA,gBAAgB,CAAC,OAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC;;AAI9B,IAAA,oBAAoB,CAAC,WAAqB,EAAA;QACzC,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC;;AAI1C,IAAA,sBAAsB,CACrB,MAA6E,EAAA;QAE7E,IAAI,MAAM,EAAE,IAAI,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW;AAAE,YAAA,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI;;IAGrF,iBAAiB,GAAA;AAChB,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;QACvC,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC3C,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,KAAK,EAAE,EAAE,CAAC,CAAC;;IAGlF,gBAAgB,GAAA;;QAEf,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE;QAEnC,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC;AACzD,QAAA,IAAI,CAAC,MAAM;YAAE;QAEb,MAAM,QAAQ,GAAG,MAAK;YACrB,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,MAAqB;AACtE,YAAA,IAAI,CAAC,YAAY,GAAG,UAAU,GAAG,CAAC;YAClC,IAAI,CAAC,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW;AAC5D,SAAC;AACD,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC9D,QAAA,QAAQ,EAAE;;;AAIX,IAAA,IAAY,cAAc,GAAA;AACzB,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC;;AAGzD,IAAA,IAAY,aAAa,GAAA;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,qBAAqB;YAAE,OAAO,IAAI,CAAC,SAAS;AAE1E,QAAA,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE;QAEhE,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAClC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,WAAW,EACpC,IAAI,CAAC,WAAW,GAAG,WAAW,CAC9B;AAED,QAAA,OAAO,MAAM;;AAGd,IAAA,IAAY,cAAc,GAAA;AACzB,QAAA,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE;QAE1E,OAAO,QAAQ,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;;AAG1E,IAAA,IAAY,cAAc,GAAA;QACzB,OAAO;YACN,UAAU;YACV,IAAI,CAAC,YAAY,IAAI,yBAAyB;YAC9C,IAAI,CAAC,UAAU,IAAI,sBAAsB;YACzC,IAAI,CAAC,SAAS,IAAI,qBAAqB;AACvC,YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,mBAAmB;YAC7C,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;gBACzE,yBAAyB;YAC1B,IAAI,CAAC,YAAY,IAAI,yBAAyB;YAC9C,IAAI,CAAC,aAAa,IAAI,0BAA0B;AAChD;aACC,MAAM,CAAC,OAAO;aACd,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;AAsBJ,IAAA,eAAe,CAAC,OAAoB,EAAA;QAC3C,IAAI,OAAO,EAAE;AACZ,YAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;AACjD,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,QAAQ,CAAC,CAAC;;aAC5D;AACN,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACnE,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,CAC3B,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAC9E;;AAGF,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;AAGzD,IAAA,IAAY,YAAY,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM;QACvC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,IAClD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAClC,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAC5D,CACD,CAAC,MAAM;QAER,IAAI,aAAa,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QACtC,IAAI,aAAa,KAAK,KAAK;YAAE,OAAO,IAAI,CAAC;QACzC,OAAO,IAAI,CAAC;;;AAIL,IAAA,cAAc,CAAC,MAAc,EAAA;AACpC,QAAA,MAAM,UAAU,GACf,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,CAAC,CAAC;AAC3F,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC;AACvB,aAAA,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM;AAC/F,aAAA,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC5B,OAAO;YACN,sBAAsB,EAAE,CAAG,EAAA,UAAU,CAAI,EAAA,CAAA;YACzC,uBAAuB,EAAE,CAAG,EAAA,WAAW,CAAI,EAAA,CAAA;YAC3C,OAAO,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAI,EAAA,CAAA;YACzC,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAI,EAAA,CAAA;YAC5C,UAAU,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAI,EAAA,CAAA;SAC5C;;IAGM,YAAY,CAAC,KAAa,EAAE,KAAiB,EAAA;;QAEpD,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE;AAErC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO;QAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AAE3C,QAAA,MAAM,eAAe,GAAG,CAAC,SAAqB,KAAI;AACjD,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,SAAS,CAAC,OAAO,GAAG,MAAM,EAAE,EAAE,CAAC;AAEtE,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,MAAM,GAAG,KAAK,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC,CAAC;AAC9F,SAAC;QAED,MAAM,aAAa,GAAG,MAAK;AAC1B,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC;AAC1D,YAAA,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AACvD,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC;AACvD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;;;;;;;;IAU5C,YAAY,GAAA;QACnB,QACC,CAAA,CAAA,OAAA,EAAA,IAAA,EACC,CAAA,CAAA,OAAA,EAAA,IAAA,EACE,IAAI,CAAC,UAAU,KACf,CAAA,CAAA,OAAA,EAAA,EACC,KAAK,EAAE;AACN,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC;AAC5E,aAAA,EACD,KAAK,EAAE;AACN,gBAAA,sBAAsB,EAAE,KAAK;AAC7B,aAAA,EAAA,EAED,CAAA,CAAA,aAAA,EAAA,EACC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EACpC,UAAU,EAAE,CAAC,CAA2B,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,EAAA,CAC7D,CACR,CACR,EACA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,MACpC,aACC,GAAG,EAAE,GAAG,CAAC,IAAI,EACb,KAAK,EAAE;AACN,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,CAAC,CAAG,EAAA,GAAG,CAAC,OAAO,CAAE,CAAA,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AACxC,gBAAA,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACjF,cAAc,EAAE,OAAO,CACtB,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CAC1F;AACD,gBAAA,kBAAkB,EAAE,OAAO,CAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAC/D;AACD,gBAAA,mBAAmB,EAAE,OAAO,CAC3B,IAAI,CAAC,YAAY,CAAC,KAAK;AACtB,oBAAA,MAAM,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAM,CACjE;AACD,aAAA,EACD,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAA,EAElC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,kCAAkC,GAAG,CAAC,KAAK,IAAI,MAAM,CAAE,CAAA,EAAA,EAClE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAE,eAAe,GAAG,CAAC,IAAI,CAAE,CAAA,EAAA,EACpC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAAE,GAAG,CAAC,KAAK,CAAO,CAC9C,EAEN,GAAG,CAAC,eAAe,IAAI,CAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAG,CAAA,EAE5E,GAAG,CAAC,OAAO,KACX,CAAgB,CAAA,YAAA,EAAA,EAAA,GAAA,GAAG,CAAC,cAAc,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACjB,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,KACpB,CAAA,CAAA,GAAA,EAAA,IAAA,EAAI,IAAI,CAAK,CACb,CAAC,CACG,CACM,CACb,CACI,EAEL,IAAI,CAAC,SAAS,IAAI,OAAO,MAAM,KAAK,WAAW,KAC/C,CAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAC,gBAAgB,EACtB,WAAW,EAAE,CAAC,GAAe,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,EAAA,CAC1D,CACP,CACM,CACR,CAAC,CACK,CACD;;IAIV,MAAM,GAAA;QACL,QACC,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACJ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE;gBACN,eAAe,EAAE,IAAI,CAAC,KAAK;gBAC3B,gBAAgB,EAAE,IAAI,CAAC,MAAM;AAC7B,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO,EAAA,EACzC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAA,EAC1C,IAAI,CAAC,YAAY,EAAE,EACpB,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH,CACN,CACD,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,CAAO,CAC/B,EACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAC5C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CACC,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAE,CAAC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAClF,QAAQ,EAAE,CAAC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,EACtF,YAAY,EAAE,CAAC,CAAsB,KAAI;AACxC,gBAAA,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;oBAChC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;;qBAC1B;AACN,oBAAA,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM;oBAC3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;;AAE1C,aAAC,EACe,CAAA,EAEhB,IAAI,CAAC,oBAAoB,KACzB,CACC,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,WAAW,EAClC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,CAAC,CAAyD,KAAI;gBACzE,MAAM,kBAAkB,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;AACtE,gBAAA,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;AAChC,oBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,kBAAkB,CAAC;;qBAC3C;AACN,oBAAA,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC;oBAClD,IAAI,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC;AAChF,oBAAA,IAAI,cAAc,GAAG,IAAI,CAAC,WAAW;AAErC,oBAAA,IAAI,cAAc,GAAG,WAAW,EAAE;wBACjC,cAAc,GAAG,WAAW;;oBAG7B,IAAI,CAAC,UAAU,GAAG;AACjB,wBAAA,IAAI,EAAE,cAAc;AACpB,wBAAA,WAAW,EAAE,cAAc;AAC3B,wBAAA,QAAQ,EAAE,WAAW;qBACrB;AACD,oBAAA,IAAI,CAAC,WAAW,GAAG,cAAc;AACjC,oBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,kBAAkB,CAAC;;aAElD,GACW,CACb,CACI,CACN,CACI,CACA;;;;;;;;;;;;;"}