@sellmate/design-system 1.18.0 → 1.19.0

package/hydrate/index.js

@@ -8048,6 +8048,7 @@ class SdChipInput {
     error = false;
     useReset = false;
     maxCount;
+    duplicateLabel;
     suggestions = [];
     loadingSuggestions = false;
     recommendedItems = [];
@@ -8084,6 +8085,11 @@ class SdChipInput {
             this.internalErrors = [...newErrors];
         }
     }
+    internalValuesChanged_validate() {
+        if (typeof this.formField?.sdValidate === 'function') {
+            this.formField.sdValidate();
+        }
+    }
     suggestionsChanged(newVal) {
         if (!Array.isArray(newVal))
             this.suggestions = [];
@@ -8102,7 +8108,13 @@ class SdChipInput {
         }
         this.inputValue = this.inputValue ?? '';
     }
+    isDuplicateChip(index) {
+        const value = this.internalValues[index];
+        return this.internalValues.indexOf(value) !== index;
+    }
     getChipError(index) {
+        if (this.isDuplicateChip(index))
+            return true;
         if (typeof this.errors === 'function') {
             return this.errors(this.internalValues?.[index] ?? '');
         }
@@ -8296,6 +8308,18 @@ class SdChipInput {
         this.update.emit(next);
         this.inputEl?.focus();
     };
+    duplicateRule = () => {
+        const seen = new Set();
+        for (const val of this.internalValues) {
+            if (seen.has(val)) {
+                if (this.duplicateLabel != null && this.duplicateLabel !== '')
+                    return `이미 입력된 ${this.duplicateLabel}입니다.`;
+                return '중복된 값이 존재합니다.';
+            }
+            seen.add(val);
+        }
+        return true;
+    };
     render() {
         const sizeTokens = CHIP_INPUT_SIZE_MAP[this.size] ?? CHIP_INPUT_SIZE_MAP.sm;
         const cssVars = {
@@ -8400,7 +8424,7 @@ class SdChipInput {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (hAsync("sd-field", { key: '6ff0688cd9a076cd81693364bfeb6a98b5bf018e', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '0c6ae92de4dcb44ed4fbcd12f1dddef93cec12db', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: 'df111f3110b444ed296db8c6b7f00d9209f858af', class: {
+        return (hAsync("sd-field", { key: '33ae95b159edcb8ee407cf8d311428f419f26e95', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '4f7cd96e4cda06239a7498b8af5f1f3169362028', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: 'dab7b1c520923fdb8cb026141727d8d008b83663', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -8408,7 +8432,7 @@ class SdChipInput {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, hAsync("input", { key: '8e170c84cedab36edbdd0a84e7e2e1ac0fba9632', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (hAsync("div", { key: '5b30bb4f89c9d3c9b18870acccad22bd97e1d748', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: '6fbf74a5a77b70789a609d28f5c4b6dd2aab57ef', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: 'fbb21a27bdd2aa38870cfd8d16b7e5293769eaf3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '83626145602b13d7a00ef955a6db59f41c152529', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (hAsync("sd-portal", { key: '1682a89b513098f192f776af782aa9ee432574e8', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '3efb484bd5616e411824f7014a759a34a9e93d8b', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: 'b5b1d5e6db03f6fe60864b6c19e9b2c753468447', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (hAsync("div", { key: item, class: {
+                    : '' }, hAsync("input", { key: '0aee2d0f30c5af7fccfc2e35e5cee17912712ce9', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (hAsync("div", { key: 'b0b508db62d31f6427d5a2def435fec7fc552e92', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: '30ce147f3bc8070192d95f381fa7f75ad37aab9b', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: '8c43a2920e55a36ff0c0ab952a52ab3df8d3c98d', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '543316c12760fe16449e2b89a9afb8c43344eab5', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (hAsync("sd-portal", { key: 'c402b8336f7d62213f2b803f80f7a2ffabce2c9d', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '4ade4acb535b2db7011699a449afd8c17fe5696d', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: 'e07a447f7c9a9d376680ddb3af6daf58e0d39167', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (hAsync("div", { key: item, class: {
                 'sd-chip-input__suggestion-item': true,
                 'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
             }, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
@@ -8430,6 +8454,9 @@ class SdChipInput {
         "errors": [{
                 "errorsChanged": 0
             }],
+        "internalValues": [{
+                "internalValuesChanged_validate": 0
+            }],
         "suggestions": [{
                 "suggestionsChanged": 0
             }],
@@ -8453,6 +8480,7 @@ class SdChipInput {
             "error": [1028],
             "useReset": [4, "use-reset"],
             "maxCount": [2, "max-count"],
+            "duplicateLabel": [1, "duplicate-label"],
             "suggestions": [1040],
             "loadingSuggestions": [4, "loading-suggestions"],
             "recommendedItems": [1040],
@@ -11846,6 +11874,7 @@ const KEY_VALUE_TABLE_LAYOUT = {
     rowHeight: Number(t.keyValue.height),
     thWidth: 120,
     borderRadius: Number(t.radius),
+    thPaddingX: Number(t.header.paddingX),
     padding: Number(t.keyValue.body.padding),
     helpIconSize: 16,
     requiredIconSize: 12,
@@ -11875,7 +11904,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
     tdLineHeight: Number(t.body.typography.lineHeight),
 };
 
-const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);padding:var(--sd-kvt-padding);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
 
 class SdKeyValueTable {
     constructor(hostRef) {
@@ -11893,10 +11922,12 @@ class SdKeyValueTable {
      */
     search = false;
     /**
-     * true이면 테이블 상단 border-radius를 0으로 처리.
-     * 다른 요소(헤더, 탭 등) 하단에 붙여 쓸 때 사용.
+     * 테이블 border-radius 제어.
+     * - 'default': 전체 radius 적용
+     * - 'usetop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
+     * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
-    useTop = false;
+    radius = 'default';
     change;
     searchEvent;
     emit = (name, value) => {
@@ -12044,6 +12075,7 @@ class SdKeyValueTable {
             '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
             '--sd-kvt-th-width': `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`,
             '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
+            '--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
             '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
             '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
             '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
@@ -12070,7 +12102,8 @@ class SdKeyValueTable {
         const maxCols = this.computeMaxCols(autoSkip);
         const tableEl = (hAsync("table", { class: {
                 'sd-key-value-table': true,
-                'sd-key-value-table--use-top': this.useTop,
+                'sd-key-value-table--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table--radius-full': this.radius === 'full',
             }, style: cssVars }, hAsync("colgroup", null, Array.from({ length: maxCols }, (_, i) => {
             if (i % 2 !== 0)
                 return hAsync("col", { key: `col-${i}` });
@@ -12094,7 +12127,8 @@ class SdKeyValueTable {
             return tableEl;
         return (hAsync("div", { class: {
                 'sd-key-value-table__wrapper': true,
-                'sd-key-value-table__wrapper--use-top': this.useTop,
+                'sd-key-value-table__wrapper--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table__wrapper--radius-full': this.radius === 'full',
             }, style: cssVars }, tableEl, hAsync("div", { class: "sd-key-value-table__search-panel" }, hAsync("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
     }
     static get style() { return sdKeyValueTableCss(); }
@@ -12104,7 +12138,7 @@ class SdKeyValueTable {
         "$members$": {
             "fields": [16],
             "search": [4],
-            "useTop": [4, "use-top"]
+            "radius": [1]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -15519,7 +15553,7 @@ const ICON_DEFAULT_COLOR = {
 const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
 const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
 
-const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
+const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-usetop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 class SdTable {
     constructor(hostRef) {
@@ -15544,7 +15578,7 @@ class SdTable {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
-    useTop = false;
+    radius = 'default';
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     isLoading = false;
@@ -16342,24 +16376,25 @@ class SdTable {
             '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (hAsync(Host, { key: '337909d6279baf60effec188eb60422ce47c0585', style: hostStyle }, hAsync("div", { key: '46d53ced85e1700da3c6ca082d5752c0bb4a155b', class: "sd-table__container", style: {
+        return (hAsync(Host, { key: '87170da602bd45011a4f03e0bb7c1ce35ac4b771', style: hostStyle }, hAsync("div", { key: '899ad5a375b30565141fc50063620975a1c87b95', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, hAsync("div", { key: '159fad6dec16b3328d0da4ce22ae6bca537046e9', class: {
+            } }, hAsync("div", { key: '73db070c9018b814e9c55f605c22a13f81fefc5d', class: {
                 'sd-table__wrapper': true,
-                'sd-table__wrapper--use-top': this.useTop,
-            } }, hAsync("div", { key: '22acbc7de61e11807b1a8919090286bb04a98bed', class: {
+                'sd-table__wrapper--radius-usetop': this.radius === 'usetop',
+                'sd-table__wrapper--radius-full': this.radius === 'full',
+            } }, hAsync("div", { key: 'f52d585b54a29a6e44c3d9f5ec3a8f20f0e62e8c', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (hAsync("div", { key: '040736d35428396068d5237a17f23f8f70ba2541', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'eae076a71161e315951692f051522b8b5f094271', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'e8bdf5ae38a77988fce0a60ae9309f5d03b34928', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'd6ce4d4479eb927137b1afd5494a91494568b274', class: "sd-table__no-data" }, hAsync("div", { key: 'cfccc6382e7d0cc76d7f50515cd157ccd56cbac8', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (hAsync("div", { key: 'cd9ee8de1d3a4f7abe553372342da1d3ee38b6fe', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'b239353973c8e6959ff9b5c3308696b4c743dbf0', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '7f219801def31f4f19f6042e85e02d9e2b366c90', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '2dcb2227ea402c4fcc176e3e493b88d37843f8ed', class: "sd-table__no-data" }, hAsync("div", { key: '47b8e69f4518200cd87c79d50bfc0d505310aff9', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, hAsync("slot", { key: '45a2df0c0fa234408ca5a5fb76b5a74729cad482', name: "no-data" }, hAsync("span", { key: 'a126d8ce4149ac87e55f5a6acc67bbb3a650cdf4' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'aa4b94ed02700edd1846ca51235f47fe7de570be', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, hAsync("slot", { key: '3cdbaa3552166b915d0bd30a2e19324679615da4', name: "no-data" }, hAsync("span", { key: 'dd14af39eb6658f3a1d876745f80fcbe13529846' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'f11b8e0e7bb53f3ceda805ecc2b0911ea83cb79f', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (hAsync("div", { key: 'f4d357d62af40e3ea8f35c799b4409c7deb2606f', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '6aad139f1f06d1851f30b5c8331899fe9d23ba37', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '85aa19726fca6dce007d8ffcc5550de8115546cb', value: this.useInternalPagination
+            !this.useVirtualScroll && (hAsync("div", { key: 'ac990f82d327f1dbfd5fc8e395b348b228c7b724', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '724c0b1f72efdaae442dde22391e0035c9ddf8f9', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'b5fcde2f53f9d5b497e5da3b4099f9d56f67c245', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -16427,7 +16462,7 @@ class SdTable {
             "height": [1],
             "stickyHeader": [4, "sticky-header"],
             "stickyColumn": [16],
-            "useTop": [4, "use-top"],
+            "radius": [1],
             "noDataLabel": [1, "no-data-label"],
             "isLoading": [4, "is-loading"],
             "pagination": [16],

package/hydrate/index.mjs

@@ -8046,6 +8046,7 @@ class SdChipInput {
     error = false;
     useReset = false;
     maxCount;
+    duplicateLabel;
     suggestions = [];
     loadingSuggestions = false;
     recommendedItems = [];
@@ -8082,6 +8083,11 @@ class SdChipInput {
             this.internalErrors = [...newErrors];
         }
     }
+    internalValuesChanged_validate() {
+        if (typeof this.formField?.sdValidate === 'function') {
+            this.formField.sdValidate();
+        }
+    }
     suggestionsChanged(newVal) {
         if (!Array.isArray(newVal))
             this.suggestions = [];
@@ -8100,7 +8106,13 @@ class SdChipInput {
         }
         this.inputValue = this.inputValue ?? '';
     }
+    isDuplicateChip(index) {
+        const value = this.internalValues[index];
+        return this.internalValues.indexOf(value) !== index;
+    }
     getChipError(index) {
+        if (this.isDuplicateChip(index))
+            return true;
         if (typeof this.errors === 'function') {
             return this.errors(this.internalValues?.[index] ?? '');
         }
@@ -8294,6 +8306,18 @@ class SdChipInput {
         this.update.emit(next);
         this.inputEl?.focus();
     };
+    duplicateRule = () => {
+        const seen = new Set();
+        for (const val of this.internalValues) {
+            if (seen.has(val)) {
+                if (this.duplicateLabel != null && this.duplicateLabel !== '')
+                    return `이미 입력된 ${this.duplicateLabel}입니다.`;
+                return '중복된 값이 존재합니다.';
+            }
+            seen.add(val);
+        }
+        return true;
+    };
     render() {
         const sizeTokens = CHIP_INPUT_SIZE_MAP[this.size] ?? CHIP_INPUT_SIZE_MAP.sm;
         const cssVars = {
@@ -8398,7 +8422,7 @@ class SdChipInput {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (hAsync("sd-field", { key: '6ff0688cd9a076cd81693364bfeb6a98b5bf018e', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '0c6ae92de4dcb44ed4fbcd12f1dddef93cec12db', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: 'df111f3110b444ed296db8c6b7f00d9209f858af', class: {
+        return (hAsync("sd-field", { key: '33ae95b159edcb8ee407cf8d311428f419f26e95', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '4f7cd96e4cda06239a7498b8af5f1f3169362028', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: 'dab7b1c520923fdb8cb026141727d8d008b83663', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -8406,7 +8430,7 @@ class SdChipInput {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, hAsync("input", { key: '8e170c84cedab36edbdd0a84e7e2e1ac0fba9632', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (hAsync("div", { key: '5b30bb4f89c9d3c9b18870acccad22bd97e1d748', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: '6fbf74a5a77b70789a609d28f5c4b6dd2aab57ef', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: 'fbb21a27bdd2aa38870cfd8d16b7e5293769eaf3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '83626145602b13d7a00ef955a6db59f41c152529', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (hAsync("sd-portal", { key: '1682a89b513098f192f776af782aa9ee432574e8', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '3efb484bd5616e411824f7014a759a34a9e93d8b', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: 'b5b1d5e6db03f6fe60864b6c19e9b2c753468447', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (hAsync("div", { key: item, class: {
+                    : '' }, hAsync("input", { key: '0aee2d0f30c5af7fccfc2e35e5cee17912712ce9', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (hAsync("div", { key: 'b0b508db62d31f6427d5a2def435fec7fc552e92', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: '30ce147f3bc8070192d95f381fa7f75ad37aab9b', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: '8c43a2920e55a36ff0c0ab952a52ab3df8d3c98d', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '543316c12760fe16449e2b89a9afb8c43344eab5', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (hAsync("sd-portal", { key: 'c402b8336f7d62213f2b803f80f7a2ffabce2c9d', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '4ade4acb535b2db7011699a449afd8c17fe5696d', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: 'e07a447f7c9a9d376680ddb3af6daf58e0d39167', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (hAsync("div", { key: item, class: {
                 'sd-chip-input__suggestion-item': true,
                 'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
             }, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
@@ -8428,6 +8452,9 @@ class SdChipInput {
         "errors": [{
                 "errorsChanged": 0
             }],
+        "internalValues": [{
+                "internalValuesChanged_validate": 0
+            }],
         "suggestions": [{
                 "suggestionsChanged": 0
             }],
@@ -8451,6 +8478,7 @@ class SdChipInput {
             "error": [1028],
             "useReset": [4, "use-reset"],
             "maxCount": [2, "max-count"],
+            "duplicateLabel": [1, "duplicate-label"],
             "suggestions": [1040],
             "loadingSuggestions": [4, "loading-suggestions"],
             "recommendedItems": [1040],
@@ -11844,6 +11872,7 @@ const KEY_VALUE_TABLE_LAYOUT = {
     rowHeight: Number(t.keyValue.height),
     thWidth: 120,
     borderRadius: Number(t.radius),
+    thPaddingX: Number(t.header.paddingX),
     padding: Number(t.keyValue.body.padding),
     helpIconSize: 16,
     requiredIconSize: 12,
@@ -11873,7 +11902,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
     tdLineHeight: Number(t.body.typography.lineHeight),
 };
 
-const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--use-top{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);padding:var(--sd-kvt-padding);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
 
 class SdKeyValueTable {
     constructor(hostRef) {
@@ -11891,10 +11920,12 @@ class SdKeyValueTable {
      */
     search = false;
     /**
-     * true이면 테이블 상단 border-radius를 0으로 처리.
-     * 다른 요소(헤더, 탭 등) 하단에 붙여 쓸 때 사용.
+     * 테이블 border-radius 제어.
+     * - 'default': 전체 radius 적용
+     * - 'usetop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
+     * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
-    useTop = false;
+    radius = 'default';
     change;
     searchEvent;
     emit = (name, value) => {
@@ -12042,6 +12073,7 @@ class SdKeyValueTable {
             '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,
             '--sd-kvt-th-width': `${KEY_VALUE_TABLE_LAYOUT.thWidth}px`,
             '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
+            '--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
             '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
             '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
             '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
@@ -12068,7 +12100,8 @@ class SdKeyValueTable {
         const maxCols = this.computeMaxCols(autoSkip);
         const tableEl = (hAsync("table", { class: {
                 'sd-key-value-table': true,
-                'sd-key-value-table--use-top': this.useTop,
+                'sd-key-value-table--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table--radius-full': this.radius === 'full',
             }, style: cssVars }, hAsync("colgroup", null, Array.from({ length: maxCols }, (_, i) => {
             if (i % 2 !== 0)
                 return hAsync("col", { key: `col-${i}` });
@@ -12092,7 +12125,8 @@ class SdKeyValueTable {
             return tableEl;
         return (hAsync("div", { class: {
                 'sd-key-value-table__wrapper': true,
-                'sd-key-value-table__wrapper--use-top': this.useTop,
+                'sd-key-value-table__wrapper--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table__wrapper--radius-full': this.radius === 'full',
             }, style: cssVars }, tableEl, hAsync("div", { class: "sd-key-value-table__search-panel" }, hAsync("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
     }
     static get style() { return sdKeyValueTableCss(); }
@@ -12102,7 +12136,7 @@ class SdKeyValueTable {
         "$members$": {
             "fields": [16],
             "search": [4],
-            "useTop": [4, "use-top"]
+            "radius": [1]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -15517,7 +15551,7 @@ const ICON_DEFAULT_COLOR = {
 const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
 const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
 
-const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
+const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-usetop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 class SdTable {
     constructor(hostRef) {
@@ -15542,7 +15576,7 @@ class SdTable {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
-    useTop = false;
+    radius = 'default';
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     isLoading = false;
@@ -16340,24 +16374,25 @@ class SdTable {
             '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (hAsync(Host, { key: '337909d6279baf60effec188eb60422ce47c0585', style: hostStyle }, hAsync("div", { key: '46d53ced85e1700da3c6ca082d5752c0bb4a155b', class: "sd-table__container", style: {
+        return (hAsync(Host, { key: '87170da602bd45011a4f03e0bb7c1ce35ac4b771', style: hostStyle }, hAsync("div", { key: '899ad5a375b30565141fc50063620975a1c87b95', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, hAsync("div", { key: '159fad6dec16b3328d0da4ce22ae6bca537046e9', class: {
+            } }, hAsync("div", { key: '73db070c9018b814e9c55f605c22a13f81fefc5d', class: {
                 'sd-table__wrapper': true,
-                'sd-table__wrapper--use-top': this.useTop,
-            } }, hAsync("div", { key: '22acbc7de61e11807b1a8919090286bb04a98bed', class: {
+                'sd-table__wrapper--radius-usetop': this.radius === 'usetop',
+                'sd-table__wrapper--radius-full': this.radius === 'full',
+            } }, hAsync("div", { key: 'f52d585b54a29a6e44c3d9f5ec3a8f20f0e62e8c', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (hAsync("div", { key: '040736d35428396068d5237a17f23f8f70ba2541', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'eae076a71161e315951692f051522b8b5f094271', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'e8bdf5ae38a77988fce0a60ae9309f5d03b34928', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'd6ce4d4479eb927137b1afd5494a91494568b274', class: "sd-table__no-data" }, hAsync("div", { key: 'cfccc6382e7d0cc76d7f50515cd157ccd56cbac8', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (hAsync("div", { key: 'cd9ee8de1d3a4f7abe553372342da1d3ee38b6fe', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: 'b239353973c8e6959ff9b5c3308696b4c743dbf0', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '7f219801def31f4f19f6042e85e02d9e2b366c90', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '2dcb2227ea402c4fcc176e3e493b88d37843f8ed', class: "sd-table__no-data" }, hAsync("div", { key: '47b8e69f4518200cd87c79d50bfc0d505310aff9', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, hAsync("slot", { key: '45a2df0c0fa234408ca5a5fb76b5a74729cad482', name: "no-data" }, hAsync("span", { key: 'a126d8ce4149ac87e55f5a6acc67bbb3a650cdf4' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'aa4b94ed02700edd1846ca51235f47fe7de570be', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, hAsync("slot", { key: '3cdbaa3552166b915d0bd30a2e19324679615da4', name: "no-data" }, hAsync("span", { key: 'dd14af39eb6658f3a1d876745f80fcbe13529846' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'f11b8e0e7bb53f3ceda805ecc2b0911ea83cb79f', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (hAsync("div", { key: 'f4d357d62af40e3ea8f35c799b4409c7deb2606f', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '6aad139f1f06d1851f30b5c8331899fe9d23ba37', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '85aa19726fca6dce007d8ffcc5550de8115546cb', value: this.useInternalPagination
+            !this.useVirtualScroll && (hAsync("div", { key: 'ac990f82d327f1dbfd5fc8e395b348b228c7b724', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '724c0b1f72efdaae442dde22391e0035c9ddf8f9', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'b5fcde2f53f9d5b497e5da3b4099f9d56f67c245', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))
@@ -16425,7 +16460,7 @@ class SdTable {
             "height": [1],
             "stickyHeader": [4, "sticky-header"],
             "stickyColumn": [16],
-            "useTop": [4, "use-top"],
+            "radius": [1],
             "noDataLabel": [1, "no-data-label"],
             "isLoading": [4, "is-loading"],
             "pagination": [16],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellmate/design-system",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "Sellmate Design System - Web Components Library built with Stencil",
   "keywords": [
     "web-components",
@@ -58,8 +58,8 @@
   "scripts": {
     "build": "stencil build && node ../../scripts/patch-react-ssr-wrappers.mjs",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test:spec": "stencil test --spec",
+    "test": "stencil test --spec --e2e -- --runInBand",
+    "test:spec": "stencil test --spec -- --runInBand",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "test:scenarios": "node ../../scripts/generate-test-scenarios.mjs",
     "generate": "stencil generate",

package/dist/design-system/p-0a772d43.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,a as s,d as i,f as h,h as a,H as n}from"./p-CAxodB5I.js";import{T as r}from"./p-sZMi_32I.js";import{T as l,a as o,b as d,c,d as u}from"./p-Cmg10jpN.js";import"./p-D6GUzecR.js";import"./p-BJfiMC9H.js";let b=(t=21)=>{let e="",s=crypto.getRandomValues(new Uint8Array(t|=0));for(;t--;)e+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[63&s[t]];return e};const g=class{constructor(s){t(this,s),this.sdSelectChange=e(this,"sdSelectChange",7),this.sdPageChange=e(this,"sdPageChange",7),this.sdRowsPerPageChange=e(this,"sdRowsPerPageChange",7),this.sdVirtualUpdate=e(this,"sdVirtualUpdate",7),this.sdVirtualReachEnd=e(this,"sdVirtualReachEnd",7)}static DEFAULT_NO_DATA_LABEL="데이터가 없습니다.";get el(){return s(this)}tableId=b(8);fallbackTableId=b(8);columns=[];rows;selected=[];rowKey="id";selectable=!1;resizable=!1;width;height;stickyHeader=!1;stickyColumn={left:0,right:0};useTop=!1;noDataLabel=g.DEFAULT_NO_DATA_LABEL;resolvedNoDataLabel=g.DEFAULT_NO_DATA_LABEL;isLoading=!1;pagination;useInternalPagination=!1;useRowsPerPageSelect=!1;dense=!1;useVirtualScroll=!1;rowHeight;get effectiveRowHeight(){return null!=this.rowHeight?this.rowHeight:Number(this.dense?l.dense.height:l.default.height)}virtualBuffer=5;virtualEndThreshold=10;rowsPerPageOption=[{label:"10개씩 보기",value:10},{label:"25개씩 보기",value:25},{label:"50개씩 보기",value:50},{label:"100개씩 보기",value:100}];sdSelectChange;sdPageChange;sdRowsPerPageChange;sdVirtualUpdate;sdVirtualReachEnd;currentPage=1;innerRowsPerPage=10;innerSelected=new Set;columnWidths=[];scrolledLeft=!1;scrolledRight=!1;rowCount=0;loadingScrollTop=0;noDataBodyHeight=60;autoThead=!1;autoTbody=!1;vsStart=0;vsEnd=0;lastReachEndNotifiedRowCount=-1;scrollContainer=null;noDataContentEl=null;noDataContentResizeObserver;onScroll;spanRegistry=new Map;useFrameRegistry=new Map;cellClassRegistry=new Map;rowIndexMap=new Map;rebuildRowIndexMap(){if(this.rowIndexMap.clear(),!Array.isArray(this.rows))return;const t=this.rowKey;this.rows.forEach(((e,s)=>{const i=e?.[t];null!=i&&this.rowIndexMap.set(String(i),s)}))}resolveRowIndex(t){const e=this.rowIndexMap.get(t);if(void 0!==e)return e;const s=Number(t);return Number.isFinite(s)?s:null}toFiniteNumber(t,e){const s="number"==typeof t?t:Number(t);return Number.isFinite(s)?s:e}isRowsPerPageValue(t){return null===t||"string"==typeof t||"number"==typeof t}isValidTableId(t){return"string"==typeof t&&t.trim().length>0&&"undefined"!==t&&"null"!==t}getResolvedTableId(){if(this.isValidTableId(this.tableId))return this.tableId;const t=this.el?.getAttribute(r);return this.isValidTableId(t)?t:this.fallbackTableId}syncTableIdAttribute(){const t=this.getResolvedTableId();this.el?.getAttribute(r)!==t&&this.el.setAttribute(r,t)}handleIsLoadingChange(t){t&&(this.loadingScrollTop=this.scrollContainer?.scrollTop??0),this.syncNoDataContentObserver()}handleUseVirtualScrollChange(t){t&&i((()=>this.propagateVirtualUpdate()))}handleColumnsChange(t){this.columnWidths=t.map((t=>t.autoWidth?0:parseInt(t.width||"120",10))),this.refreshChildrenConfig()}handleRowsChange(t){Array.isArray(t)&&(this.rowCount=t.length,this.rebuildRowIndexMap(),this.useVirtualScroll&&this.propagateVirtualUpdate(!0),this.pushRowsToChildren(t),this.syncNoDataContentObserver())}handleRowKeyChange(){this.rebuildRowIndexMap()}handleTableIdChange(){this.syncTableIdAttribute()}handleNoDataLabelChange(t){this.resolvedNoDataLabel="string"==typeof t&&t.trim().length>0&&"undefined"!==t&&"null"!==t?t:g.DEFAULT_NO_DATA_LABEL}handleConfigChange(){this.refreshChildrenConfig()}handleSelectedChange(t){this.innerSelected=new Set(t)}handlePaginationChange(t){null!=t?.page&&t.page!==this.currentPage&&(this.currentPage=t.page),null!=t?.rowsPerPage&&t.rowsPerPage!==this.innerRowsPerPage&&(this.innerRowsPerPage=t.rowsPerPage)}detectChildren(){const t=!!this.el.querySelector(":scope > sd-thead"),e=!!this.el.querySelector(":scope > sd-tbody");this.autoThead=!t,this.autoTbody=!e}componentWillLoad(){this.syncTableIdAttribute(),this.handleNoDataLabelChange(this.noDataLabel),this.detectChildren(),this.innerSelected=new Set(this.selected||[]),this.columnWidths=(this.columns||[]).map((t=>t.autoWidth?0:parseInt(t.width||"120",10))),this.rebuildRowIndexMap(),null!=this.pagination?.page&&(this.currentPage=this.pagination.page),null!=this.pagination?.rowsPerPage&&(this.innerRowsPerPage=this.pagination.rowsPerPage);const t=this.el;t.isRowSelectedSync=this.isRowSelectedSync.bind(this),t.updateRowSelectSync=this.updateRowSelectSync.bind(this),t.toggleSelectAllSync=this.toggleSelectAllSync.bind(this),t.getIsAllCheckedSync=this.getIsAllCheckedSync.bind(this),t.getStickyStyleSync=this.getStickyStyleSync.bind(this),t.setRowCountSync=this.setRowCountSync.bind(this),t.handleResize=this.handleResize.bind(this),t.getPaginationInfoSync=this.getPaginationInfoSync.bind(this),t.getVirtualScrollRangeSync=this.getVirtualScrollRangeSync.bind(this),t.getConfigSync=this.getConfigSync.bind(this),t.getTableIdSync=()=>this.getResolvedTableId(),t.getVirtualScrollConfigSync=this.getVirtualScrollConfigSync.bind(this),t.calculateVisibleRange=this.calculateVisibleRange.bind(this),t.registerSpanSync=this.registerSpanSync.bind(this),t.unregisterSpanSync=this.unregisterSpanSync.bind(this),t.getSpanSync=this.getSpanSync.bind(this),t.isCoveredSync=this.isCoveredSync.bind(this),t.hasRowspanSync=this.hasRowspanSync.bind(this),t.registerCellClassSync=this.registerCellClassSync.bind(this),t.unregisterCellClassSync=this.unregisterCellClassSync.bind(this),t.getCellClassSync=this.getCellClassSync.bind(this),t.registerUseFrameSync=this.registerUseFrameSync.bind(this),t.unregisterUseFrameSync=this.unregisterUseFrameSync.bind(this),t.hasUseFrameInRowSync=this.hasUseFrameInRowSync.bind(this),t.isCellUseFrameSync=this.isCellUseFrameSync.bind(this),Array.isArray(this.rows)&&(this.rowCount=this.rows.length,this.pushRowsToChildren(this.rows))}componentDidLoad(){Array.isArray(this.rows)&&this.pushRowsToChildren(this.rows),i((()=>{const t=this.el.shadowRoot?.querySelector(".sd-table__scroll-container");if(!t)return;let e=!1;this.onScroll=()=>{const s=t.scrollLeft,i=s>0,h=s+t.clientWidth<t.scrollWidth;this.scrolledLeft===i&&this.scrolledRight===h||(this.scrolledLeft=i,this.scrolledRight=h,this.refreshChildrenConfig()),this.useVirtualScroll&&!e&&(e=!0,requestAnimationFrame((()=>{e=!1,this.propagateVirtualUpdate()})))},this.scrollContainer=t,t.addEventListener("scroll",this.onScroll,{passive:!0}),this.onScroll(),this.useVirtualScroll&&this.propagateVirtualUpdate()})),this.syncNoDataContentObserver()}disconnectedCallback(){this.scrollContainer&&this.onScroll&&this.scrollContainer.removeEventListener("scroll",this.onScroll),this.noDataContentResizeObserver?.disconnect(),this.noDataContentResizeObserver=void 0}syncNoDataContentObserver(){if(0!==this.rowCount||this.isLoading)return this.noDataContentResizeObserver?.disconnect(),this.noDataContentResizeObserver=void 0,void(this.noDataBodyHeight=60);this.observeNoDataContentHeight()}observeNoDataContentHeight(){if("undefined"==typeof ResizeObserver)return;const t=this.noDataContentEl;t&&(this.noDataContentResizeObserver?.disconnect(),this.noDataContentResizeObserver=new ResizeObserver((()=>{const e=Math.ceil(t.scrollHeight),s=Math.max(60,e);s!==this.noDataBodyHeight&&(this.noDataBodyHeight=s)})),this.noDataContentResizeObserver.observe(t),i((()=>{if(!this.noDataContentEl)return;const t=Math.ceil(this.noDataContentEl.scrollHeight),e=Math.max(60,t);e!==this.noDataBodyHeight&&(this.noDataBodyHeight=e)})))}queryChildEl(t){return this.el.querySelector(t)??this.el.shadowRoot?.querySelector(t)??null}queryAllTr(){return[...Array.from(this.el.querySelectorAll("sd-tr")),...Array.from(this.el.shadowRoot?.querySelectorAll("sd-tr")??[])]}pushRowsToChildren(t){const e=this.queryChildEl("sd-tbody");e&&(e.rows=t);const s=this.queryChildEl("sd-thead");s&&(s.rows=t)}handleStructureSlotChange=()=>{Array.isArray(this.rows)&&this.pushRowsToChildren(this.rows),this.refreshChildrenConfig()};refreshChildrenSelection(){const t=this.queryChildEl("sd-thead");t?.refreshSelection?.(),this.queryAllTr().forEach((t=>t.refreshSelection?.()))}refreshChildrenConfig(){const t=this.queryChildEl("sd-thead");t?.refreshConfig?.(),this.queryAllTr().forEach((t=>t.refreshConfig?.()))}maybeEmitVirtualReachEnd(t,e){const s=Math.max(1,this.virtualEndThreshold);e>=Math.max(0,this.rowCount-s)&&this.lastReachEndNotifiedRowCount!==this.rowCount&&(this.lastReachEndNotifiedRowCount=this.rowCount,this.sdVirtualReachEnd.emit({from:t,to:e,rowCount:this.rowCount,threshold:s}))}propagateVirtualUpdate(t=!1){if(!this.scrollContainer||!this.useVirtualScroll)return;const e=this.toFiniteNumber(this.scrollContainer.scrollTop,0),s=this.toFiniteNumber(this.scrollContainer.clientHeight,0),{start:i,end:h}=this.calculateVisibleRange(e,s);if(!Number.isFinite(i)||!Number.isFinite(h))return;const a=this.vsStart!==i||this.vsEnd!==h;if(!a&&!t)return;this.vsStart=i,this.vsEnd=h;const n=i*this.effectiveRowHeight,r=Math.max(0,(this.rowCount-h)*this.effectiveRowHeight),l=this.queryChildEl("sd-tbody");l?.setSpacersSync?.(n,r),a&&this.sdVirtualUpdate.emit({from:i,to:h}),this.maybeEmitVirtualReachEnd(i,h)}getVirtualScrollConfigSync(){return{useVirtualScroll:this.useVirtualScroll,rowHeight:this.effectiveRowHeight,virtualBuffer:this.virtualBuffer,vsStart:this.vsStart,vsEnd:this.vsEnd,rowCount:this.rowCount}}getConfigSync(){return{columns:this.columns,selectable:this.selectable,resizable:this.resizable,stickyColumn:this.stickyColumn,stickyHeader:this.stickyHeader,scrolledLeft:this.scrolledLeft,scrolledRight:this.scrolledRight,columnWidths:this.columnWidths,dense:this.dense}}registerUseFrameSync(t,e){if(null==t||""===e)return;let s=this.useFrameRegistry.get(t);s||(s=new Set,this.useFrameRegistry.set(t,s)),s.add(e)}unregisterUseFrameSync(t,e){if(null==t||""===e)return;const s=this.useFrameRegistry.get(t);s&&(s.delete(e),0===s.size&&this.useFrameRegistry.delete(t))}hasUseFrameInRowSync(t){const e=this.useFrameRegistry.get(t);return null!=e&&e.size>0}isCellUseFrameSync(t,e){return this.useFrameRegistry.get(t)?.has(e)??!1}isRowSelectedSync(t){return Array.from(this.innerSelected).some((e=>e[this.rowKey??"id"]===t[this.rowKey??"id"]))}async isRowSelected(t){return this.isRowSelectedSync(t)}updateRowSelectSync(t){const e=Array.from(this.innerSelected),s=this.isRowSelectedSync(t)?e.filter((e=>e[this.rowKey??"id"]!==t[this.rowKey??"id"])):[...e,t];s.length!==e.length&&(this.innerSelected=new Set(s),this.selected=Array.from(this.innerSelected),this.sdSelectChange.emit(Array.from(this.innerSelected)),this.refreshChildrenSelection())}async updateRowSelect(t){this.updateRowSelectSync(t)}toggleSelectAllSync(t,e){if(t){const t=new Set([...e]);this.innerSelected=new Set([...this.innerSelected,...t])}else{const t=e.map((t=>t[this.rowKey??"id"]));this.innerSelected=new Set([...this.innerSelected].filter((e=>!t.includes(e[this.rowKey??"id"]))))}this.selected=Array.from(this.innerSelected),this.sdSelectChange.emit(Array.from(this.innerSelected)),this.refreshChildrenSelection()}async toggleSelectAll(t,e){this.toggleSelectAllSync(t,e)}getIsAllCheckedSync(t){const e=t.length,s=t.filter((t=>Array.from(this.innerSelected).some((e=>e[this.rowKey??"id"]===t[this.rowKey??"id"])))).length;return 0!==s&&(s===e||null)}async getIsAllChecked(t){return this.getIsAllCheckedSync(t)}changePage(t){this.useInternalPagination?(this.currentPage=t,this.sdPageChange.emit(this.currentPage),this.updateRowsVisibility()):this.sdPageChange.emit(t)}updateRowsVisibility(){this.queryAllTr().forEach((t=>t.updateVisibility?.()))}changeRowsPerPage(t){const e=null!=t&&""!==t?Number(t):0;if(!this.useInternalPagination)return void this.sdRowsPerPageChange.emit(e);this.innerRowsPerPage=e;const s=Math.max(1,Math.ceil(this.rowCount/e));this.currentPage>s&&(this.currentPage=s),this.sdRowsPerPageChange.emit(e),this.updateRowsVisibility()}get lastPageNumber(){if(this.useInternalPagination)return Math.max(1,Math.ceil(this.rowCount/this.innerRowsPerPage));const{lastPage:t,rowsPerPage:e=10}=this.pagination||{};return t??Math.max(1,Math.ceil(this.rowCount/e))}handleResize(t,e,s=!1){if("undefined"==typeof document)return;const i=e.clientX,h=this.columnWidths[t],a=e=>{const a=this.columns[t];if(null==a)return;const n=a.maxWidth||9999,r=e.clientX-i,l=Math.min(Math.max(h+(s?-r:r),a.minWidth||50),n);this.columnWidths=this.columnWidths.map(((e,s)=>s===t?l:e));const o=this.queryChildEl("sd-thead");o?.setColumnWidths?.(this.columnWidths),this.queryAllTr().forEach((t=>t.setColumnWidths?.(this.columnWidths)));const d=this.stickyColumn?.right||0,c=this.columns.filter((t=>!1!==t.visible)).length;d>0&&t===c-d&&requestAnimationFrame((()=>{this.onScroll?.()}))},n=()=>{document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",n)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",n)}getStickyStyleSync(t){const e=this.columnWidths.slice(0,t).reduce(((t,e)=>t+e),this.selectable?o:0),s=this.columnWidths.filter(((e,s)=>s>=this.columns.filter((t=>!1!==t.visible)).length-(this.stickyColumn?.right||0)&&s>t)).reduce(((t,e)=>t+e),0),i=this.columns.filter((t=>!1!==t.visible))[t],h={"--sticky-left-offset":`${e}px`,"--sticky-right-offset":`${s}px`};return i?.autoWidth||(h.width=`${this.columnWidths[t]}px`,h.minWidth=`${this.columnWidths[t]}px`,h.maxWidth=`${this.columnWidths[t]}px`),h}async getStickyStyle(t){return this.getStickyStyleSync(t)}spanKey(t,e){return`${t}::${e}`}requestAllTrUpdate(){this.queryAllTr().forEach((t=>{"function"==typeof t.bumpSpansVersion?t.bumpSpansVersion():h(t)}))}registerSpanSync(t,e,s,i){if(null==t||""===e)return;const h=Math.max(1,Math.floor(s||1)),a=Math.max(1,Math.floor(i||1)),n=this.spanKey(t,e),r=this.spanRegistry.get(n);if(1===h&&1===a){if(!r)return;return this.spanRegistry.delete(n),void this.requestAllTrUpdate()}r&&r.rowspan===h&&r.colspan===a||(this.spanRegistry.set(n,{rowspan:h,colspan:a}),this.requestAllTrUpdate())}unregisterSpanSync(t,e){if(null==t||""===e)return;const s=this.spanKey(t,e);this.spanRegistry.has(s)&&(this.spanRegistry.delete(s),this.requestAllTrUpdate())}getSpanSync(t,e){return this.spanRegistry.get(this.spanKey(t,e))}registerCellClassSync(t,e,s){if(null==t||""===e)return;const i=this.spanKey(t,e),h=(s??"").trim();""!==h?this.cellClassRegistry.set(i,h):this.cellClassRegistry.delete(i)}unregisterCellClassSync(t,e){null!=t&&""!==e&&this.cellClassRegistry.delete(this.spanKey(t,e))}getCellClassSync(t,e){return this.cellClassRegistry.get(this.spanKey(t,e))}hasRowspanSync(){for(const t of this.spanRegistry.values())if(t.rowspan>1)return!0;return!1}isCoveredSync(t,e,s){if(0===this.spanRegistry.size)return!1;const i=s.filter((t=>!1!==t.visible));for(let s=0;s<e;s++){const h=i[s];if(null==h)continue;const a=this.spanRegistry.get(this.spanKey(t,"string"==typeof h.field?h.field:h.name));if(a&&s+a.colspan>e)return!0}const h=this.resolveRowIndex(t);if(null==h)return!1;for(const[t,s]of this.spanRegistry){if(s.rowspan<=1)continue;const a=t.indexOf("::");if(a<0)continue;const n=t.slice(0,a),r=t.slice(a+2),l=this.resolveRowIndex(n);if(null==l)continue;if(l>=h)continue;if(l+s.rowspan<=h)continue;const o=i.findIndex((t=>("string"==typeof t.field?t.field:t.name)===r));if(!(o<0)&&o<=e&&o+s.colspan>e)return!0}return!1}setRowCountSync(t){const e=Math.max(0,Math.floor(this.toFiniteNumber(t,0)));e!==this.rowCount&&(this.lastReachEndNotifiedRowCount=-1),this.rowCount=e,this.useVirtualScroll&&this.propagateVirtualUpdate(!0)}async setRowCount(t){this.setRowCountSync(t)}calculateVisibleRange(t,e){const s=Math.max(1,this.toFiniteNumber(this.effectiveRowHeight,40)),i=Math.max(0,Math.floor(this.toFiniteNumber(this.virtualBuffer,5))),h=Math.max(0,this.toFiniteNumber(t,0)),a=Math.max(0,this.toFiniteNumber(e,0)),n=Math.max(0,Math.floor(this.toFiniteNumber(this.rowCount,0))),r=Math.floor(h/s),l=Math.ceil(a/s);return{start:Math.max(0,r-i),end:Math.min(n,r+l+i)}}getPaginationInfoSync(){if(!this.useInternalPagination||!this.pagination)return null;const t=(this.currentPage-1)*this.innerRowsPerPage;return{startIndex:t,endIndex:t+this.innerRowsPerPage,currentPage:this.currentPage,rowsPerPage:this.innerRowsPerPage}}async getPaginationInfo(){return this.getPaginationInfoSync()}getVirtualScrollRangeSync(){return this.useVirtualScroll&&this.vsEnd>0?{from:this.vsStart,to:this.vsEnd}:null}renderAutoRows(){if(this.useVirtualScroll)return null;const t=this.rows??[],e=this.getPaginationInfoSync(),s=e?.startIndex??0;return(e?t.slice(e.startIndex,e.endIndex):t).map(((t,e)=>{const i=s+e;return a("sd-tr",{key:i,"row-key":String(i),row:t})}))}get tableClasses(){return["sd-table",this.stickyHeader&&"sd-table--sticky-header",this.selectable&&"sd-table--selectable",this.resizable&&"sd-table--resizable",(this.selectable||(this.stickyColumn?.left??0)>0||(this.stickyColumn?.right??0)>0)&&"sd-table--sticky-column",this.scrolledLeft&&"sd-table--scrolled-left",this.scrolledRight&&"sd-table--scrolled-right",0===this.rowCount&&!this.isLoading&&"sd-table--no-data"].filter(Boolean).join(" ")}render(){const t=this.getResolvedTableId(),e=0===this.rowCount&&!this.isLoading,s=36+this.noDataBodyHeight;return a(n,{key:"337909d6279baf60effec188eb60422ce47c0585",style:{"--table-radius":`${u}px`,"--table-border-color":c.color,"--table-border-width":`${c.width}px`,"--table-body-font-family":d.fontFamily,"--table-body-font-weight":d.fontWeight,"--table-body-font-size":`${d.fontSize}px`,"--table-body-line-height":`${d.lineHeight}px`,"--table-body-text-decoration":d.textDecoration,"--table-selectable-width":`${o}px`,"--table-host-height":e?void 0!==this.height?`max(${this.height}, ${s}px)`:`max(${s}px, 100%)`:this.height??"100%"}},a("div",{key:"46d53ced85e1700da3c6ca082d5752c0bb4a155b",class:"sd-table__container",style:{"--table-width":this.width,"--pagination-height":(this.pagination&&this.rowCount>0&&!this.useVirtualScroll?48:0)+"px"}},a("div",{key:"159fad6dec16b3328d0da4ce22ae6bca537046e9",class:{"sd-table__wrapper":!0,"sd-table__wrapper--use-top":this.useTop}},a("div",{key:"22acbc7de61e11807b1a8919090286bb04a98bed",class:{"sd-table__scroll-container":!0,"sd-table__scroll-container--loading":this.isLoading,"sd-table__scroll-container--no-data":e}},this.isLoading&&a("div",{key:"040736d35428396068d5237a17f23f8f70ba2541",class:"sd-table__loading",style:{top:`${this.loadingScrollTop}px`}},a("sd-circle-progress",{key:"eae076a71161e315951692f051522b8b5f094271",indeterminate:!0})),e&&a(a.Fragment,null,a("div",{key:"e8bdf5ae38a77988fce0a60ae9309f5d03b34928",class:"sd-table__no-data-header-overlay"}),a("div",{key:"d6ce4d4479eb927137b1afd5494a91494568b274",class:"sd-table__no-data"},a("div",{key:"cfccc6382e7d0cc76d7f50515cd157ccd56cbac8",class:"sd-table__no-data-content",ref:t=>{this.noDataContentEl=t,t&&this.syncNoDataContentObserver()}},a("slot",{key:"45a2df0c0fa234408ca5a5fb76b5a74729cad482",name:"no-data"},a("span",{key:"a126d8ce4149ac87e55f5a6acc67bbb3a650cdf4"},this.resolvedNoDataLabel))))),a("table",{key:"aa4b94ed02700edd1846ca51235f47fe7de570be",class:this.tableClasses},this.autoThead?a("slot",{name:`${t}-head`,onSlotchange:this.handleStructureSlotChange},a("sd-thead",{rows:this.rows??[]})):a("slot",{name:`${t}-head`,onSlotchange:this.handleStructureSlotChange}),this.autoTbody?a("slot",{name:`${t}-body`,onSlotchange:this.handleStructureSlotChange},a("sd-tbody",{rows:this.rows??[]},this.renderAutoRows())):a("slot",{name:`${t}-body`,onSlotchange:this.handleStructureSlotChange})))),this.pagination&&this.pagination.rowsPerPage>0&&this.rowCount>0&&!this.useVirtualScroll&&a("div",{key:"f4d357d62af40e3ea8f35c799b4409c7deb2606f",class:"sd-table__pagination"},a("sd-pagination",{key:"6aad139f1f06d1851f30b5c8331899fe9d23ba37",currentPage:this.useInternalPagination?this.currentPage:this.pagination.page,lastPage:this.useInternalPagination?this.lastPageNumber:this.pagination.lastPage,onSdPageChange:t=>this.changePage(t.detail)}),this.useRowsPerPageSelect&&a("sd-select",{key:"85aa19726fca6dce007d8ffcc5550de8115546cb",value:this.useInternalPagination?this.innerRowsPerPage:this.pagination.rowsPerPage,options:this.rowsPerPageOption,width:"128px",emitValue:!0,onSdUpdate:t=>{this.isRowsPerPageValue(t.detail)&&this.changeRowsPerPage(t.detail)}}))))}static get watchers(){return{isLoading:[{handleIsLoadingChange:0}],useVirtualScroll:[{handleUseVirtualScrollChange:0}],columns:[{handleColumnsChange:0}],rows:[{handleRowsChange:0}],rowKey:[{handleRowKeyChange:0}],tableId:[{handleTableIdChange:0}],noDataLabel:[{handleNoDataLabelChange:0}],selectable:[{handleConfigChange:0}],resizable:[{handleConfigChange:0}],stickyColumn:[{handleConfigChange:0}],stickyHeader:[{handleConfigChange:0}],dense:[{handleConfigChange:0}],selected:[{handleSelectedChange:0}],pagination:[{handlePaginationChange:0}]}}};g.style="sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";export{g as sd_table}