@sellmate/design-system 1.28.0 → 1.29.0

package/dist/collection/components/sd-table/sd-thead/sd-thead.js

@@ -1,629 +0,0 @@
-import { h, Host, } from "@stencil/core";
-import { TABLE_ID_ATTR, } from "../constants";
-import { resolveTableIconColor, resolveSortIconName, TABLE_HEADER_LAYOUT, TABLE_HEADER_TYPOGRAPHY, TABLE_HEADER_COLORS, TABLE_HEADER_RESIZING_BAR, TABLE_BORDER, TABLE_SELECTABLE_COLUMN_WIDTH, } from "../sd-table.config";
-export class SdThead {
-    el;
-    /** 테이블 컬럼 목록 */
-    columns;
-    /** 행 선택 기능 사용 여부 */
-    selectable;
-    /** 컬럼 너비 조절 가능 여부 */
-    resizable;
-    /** 고정 컬럼 설정 */
-    stickyColumn;
-    /** 헤더 고정 여부 */
-    stickyHeader;
-    /** 좌측 스크롤 여부 */
-    scrolledLeft;
-    /** 우측 스크롤 여부 */
-    scrolledRight;
-    /** 전체 선택 체크박스용 행 데이터 */
-    rows = [];
-    /** 컬럼 너비 목록 */
-    columnWidths = [];
-    /** 컬럼 정렬 버튼 클릭 시 발생합니다. */
-    sdColumnSort;
-    tableId = '';
-    _columns = [];
-    _selectable = false;
-    _resizable = false;
-    _stickyColumn = { left: 0, right: 0 };
-    _stickyHeader = false;
-    _scrolledLeft = false;
-    _scrolledRight = false;
-    dropdownOpenMap = {};
-    tableEl = null;
-    dropdownRefs = {};
-    dropdownThRefs = {};
-    dropdownPortals = {};
-    handleColumnsChange(newCols) {
-        if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
-        }
-    }
-    disconnectedCallback() {
-        const portals = this.dropdownPortals ?? {};
-        Object.values(portals).forEach(portal => {
-            if (portal?.parentNode != null)
-                portal.parentNode.removeChild(portal);
-        });
-    }
-    componentWillLoad() {
-        this.syncTableContext();
-        this.dropdownOpenMap = this.dropdownOpenMap ?? {};
-        this.dropdownRefs = this.dropdownRefs ?? {};
-        this.dropdownThRefs = this.dropdownThRefs ?? {};
-        this.dropdownPortals = this.dropdownPortals ?? {};
-        this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
-        this.resolveConfig();
-        if ((this.columnWidths ?? []).length === 0) {
-            this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
-        }
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-        this.resolveConfig();
-        this.initDropdownPortals();
-    }
-    // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
-    // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
-    initDropdownPortals() {
-        const cols = this._columns ?? [];
-        const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
-        if (hasDropdownCols.length === 0)
-            return;
-        for (const col of hasDropdownCols) {
-            const colName = col.name;
-            // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
-            if ((this.dropdownPortals ?? {})[colName] != null)
-                continue;
-            const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
-            if (slotContent == null)
-                continue;
-            // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
-            slotContent.removeAttribute('slot');
-            const portal = document.createElement('sd-portal');
-            portal.parentRef = this.dropdownThRefs[colName] ?? null;
-            portal.open = false;
-            // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
-            // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
-            portal.style.display = 'none';
-            portal.addEventListener('sdClose', () => this.closeDropdown(colName));
-            portal.appendChild(slotContent);
-            document.body.appendChild(portal);
-            this.dropdownPortals[colName] = portal;
-        }
-    }
-    syncTableContext() {
-        // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
-        // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
-        const closest = this.el.closest('sd-table');
-        const root = this.el.getRootNode();
-        const fromShadow = root instanceof ShadowRoot ? root.host : null;
-        const table = closest ?? fromShadow;
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    resolveConfig() {
-        const config = this.tableEl?.getConfigSync?.();
-        const resolvedColumns = Array.isArray(this.columns)
-            ? this.columns
-            : Array.isArray(config?.columns)
-                ? config.columns
-                : [];
-        this._columns = resolvedColumns;
-        this._selectable = this.selectable ?? config?.selectable ?? false;
-        this._resizable = this.resizable ?? config?.resizable ?? false;
-        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
-        this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
-        this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
-        this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
-        if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = [...config.columnWidths];
-        }
-        if (!Array.isArray(this.columnWidths)) {
-            this.columnWidths = [];
-        }
-    }
-    /** 테이블 설정을 다시 불러옵니다. */
-    async refreshConfig() {
-        this.resolveConfig();
-        this.initDropdownPortals();
-    }
-    /** 컬럼 너비를 업데이트합니다. */
-    async setColumnWidths(widths) {
-        this.columnWidths = Array.isArray(widths) ? widths : [];
-    }
-    /** 전체 선택 체크박스 상태를 갱신합니다. */
-    async refreshSelection() {
-        const checkbox = this.el.querySelector('sd-checkbox');
-        if (checkbox) {
-            checkbox.value = this.getIsAllChecked();
-        }
-    }
-    get visibleColumns() {
-        return this._columns.filter(col => col.visible !== false);
-    }
-    getStickyStyle(colIdx) {
-        if (this.tableEl?.getStickyStyleSync) {
-            return this.tableEl.getStickyStyleSync(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) +
-            (this._selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        const col = this.visibleColumns[colIdx];
-        const base = {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-        };
-        if (!col?.autoWidth) {
-            base['width'] = `${this.columnWidths[colIdx]}px`;
-            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
-            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
-        }
-        return base;
-    }
-    handleResize(index, event, reversed = false) {
-        if (this.tableEl?.handleResize) {
-            this.tableEl.handleResize(index, event, reversed);
-        }
-    }
-    handleColumnSort = (col) => {
-        this.sdColumnSort.emit({ column: col });
-    };
-    toggleDropdown(name) {
-        const isOpen = this.dropdownOpenMap[name] !== true;
-        const portals = this.dropdownPortals ?? {};
-        const newMap = { ...this.dropdownOpenMap };
-        // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
-        for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
-            const shouldBeOpen = col.name === name ? isOpen : false;
-            newMap[col.name] = shouldBeOpen;
-            const portal = portals[col.name];
-            if (portal != null)
-                portal.open = shouldBeOpen;
-        }
-        this.dropdownOpenMap = newMap;
-    }
-    closeDropdown(name) {
-        if (this.dropdownOpenMap[name] !== true)
-            return;
-        this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
-        const portal = (this.dropdownPortals ?? {})[name];
-        if (portal != null)
-            portal.open = false;
-    }
-    handleSelectAll(checked) {
-        const nextChecked = !!checked;
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        if (this.tableEl?.toggleSelectAllSync) {
-            this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
-        }
-    }
-    getIsAllChecked() {
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
-            return this.tableEl.getIsAllCheckedSync(safeRows);
-        }
-        return false;
-    }
-    render() {
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        const dropdownOpenMap = this.dropdownOpenMap ?? {};
-        const dropdownRefs = this.dropdownRefs ?? {};
-        const stickyLeftCount = this._stickyColumn.left || 0;
-        const stickyRightCount = this._stickyColumn.right || 0;
-        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
-        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        const lastColIdx = this.visibleColumns.length - 1;
-        const headStyle = {
-            '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
-            '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
-            '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
-            '--table-header-bg': TABLE_HEADER_COLORS.bg,
-            '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
-            '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
-            '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
-            '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
-            '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
-            '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
-            '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
-            '--table-border-color': TABLE_BORDER.color,
-            '--table-border-width': `${TABLE_BORDER.width}px`,
-        };
-        return (h(Host, { key: '2f2218c9c0ba02fc59eb026944a3e26fbf741f23', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: '008fc1ef83c882dd85fd9d6b8490a3246183e758', class: {
-                'thead': true,
-                'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'ff679599539ea36d74160d31258bc06c4c6d0fda', class: "tr" }, this._selectable && (h("th", { key: '9fd149c26ec979f3f82eb5b1fad56cf963ee1e7f', class: {
-                'th': true,
-                'th--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': stickyLeftCount === 0,
-                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'feab85e049c99a1a565b250f5b0aa0ed6d986d65', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'bf68afc8990977e607cbd6f25b19f6442b7fbab3', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
-                'th': true,
-                [`${col.thClass}`]: Boolean(col.thClass),
-                'sticky-left': true,
-                'sticky-left-edge': idx === stickyLeftCount - 1,
-                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-                'th--has-dropdown': col.hasDropdown === true,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
-                ? el => {
-                    this.dropdownThRefs[col.name] = el;
-                }
-                : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
-                e.stopPropagation();
-                this.handleColumnSort(col);
-            }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
-                'th__dropdown-trigger': true,
-                'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
-            }, ref: el => {
-                dropdownRefs[col.name] = el;
-            }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
-        // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + relativeIdx;
-            return (h("th", { key: col.name, class: {
-                    'th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'th--has-dropdown': col.hasDropdown === true,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
-                    ? el => {
-                        this.dropdownThRefs[col.name] = el;
-                    }
-                    : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
-                    e.stopPropagation();
-                    this.handleColumnSort(col);
-                }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
-                    'th__dropdown-trigger': true,
-                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
-                }, ref: el => {
-                    this.dropdownRefs[col.name] = el;
-                }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
-            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-            h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            return (h("th", { key: col.name, class: {
-                    'th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                    'th--has-dropdown': col.hasDropdown === true,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
-                    ? el => {
-                        this.dropdownThRefs[col.name] = el;
-                    }
-                    : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
-                    e.stopPropagation();
-                    this.handleColumnSort(col);
-                }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
-                    'th__dropdown-trigger': true,
-                    'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
-                }, ref: el => {
-                    this.dropdownRefs[col.name] = el;
-                }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
-            // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-            h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
-        })))));
-    }
-    static get is() { return "sd-thead"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["sd-thead.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["sd-thead.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "columns": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SdTableColumn[]",
-                    "resolved": "SdTableColumn[] | undefined",
-                    "references": {
-                        "SdTableColumn": {
-                            "location": "import",
-                            "path": "../constants",
-                            "id": "src/components/sd-table/constants.ts::SdTableColumn",
-                            "referenceLocation": "SdTableColumn"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD14C\uC774\uBE14 \uCEEC\uB7FC \uBAA9\uB85D"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "selectable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD589 \uC120\uD0DD \uAE30\uB2A5 \uC0AC\uC6A9 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selectable"
-            },
-            "resizable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uCEEC\uB7FC \uB108\uBE44 \uC870\uC808 \uAC00\uB2A5 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "resizable"
-            },
-            "stickyColumn": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "SdTableStickyColumn",
-                    "resolved": "SdTableStickyColumn | undefined",
-                    "references": {
-                        "SdTableStickyColumn": {
-                            "location": "import",
-                            "path": "../constants",
-                            "id": "src/components/sd-table/constants.ts::SdTableStickyColumn",
-                            "referenceLocation": "SdTableStickyColumn"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uACE0\uC815 \uCEEC\uB7FC \uC124\uC815"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "stickyHeader": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uD5E4\uB354 \uACE0\uC815 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "sticky-header"
-            },
-            "scrolledLeft": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uC88C\uCE21 \uC2A4\uD06C\uB864 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "scrolled-left"
-            },
-            "scrolledRight": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uC6B0\uCE21 \uC2A4\uD06C\uB864 \uC5EC\uBD80"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "scrolled-right"
-            },
-            "rows": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Row[]",
-                    "resolved": "Row[]",
-                    "references": {
-                        "Row": {
-                            "location": "import",
-                            "path": "../constants",
-                            "id": "src/components/sd-table/constants.ts::Row",
-                            "referenceLocation": "Row"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uC804\uCCB4 \uC120\uD0DD \uCCB4\uD06C\uBC15\uC2A4\uC6A9 \uD589 \uB370\uC774\uD130"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "columnWidths": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "number[]",
-                    "resolved": "number[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "\uCEEC\uB7FC \uB108\uBE44 \uBAA9\uB85D"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "tableId": {},
-            "_columns": {},
-            "_selectable": {},
-            "_resizable": {},
-            "_stickyColumn": {},
-            "_stickyHeader": {},
-            "_scrolledLeft": {},
-            "_scrolledRight": {},
-            "dropdownOpenMap": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "sdColumnSort",
-                "name": "sdColumnSort",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "\uCEEC\uB7FC \uC815\uB82C \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
-                },
-                "complexType": {
-                    "original": "{ column: SdTableColumn }",
-                    "resolved": "{ column: SdTableColumn; }",
-                    "references": {
-                        "SdTableColumn": {
-                            "location": "import",
-                            "path": "../constants",
-                            "id": "src/components/sd-table/constants.ts::SdTableColumn",
-                            "referenceLocation": "SdTableColumn"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "refreshConfig": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "\uD14C\uC774\uBE14 \uC124\uC815\uC744 \uB2E4\uC2DC \uBD88\uB7EC\uC635\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            },
-            "setColumnWidths": {
-                "complexType": {
-                    "signature": "(widths: number[]) => Promise<void>",
-                    "parameters": [{
-                            "name": "widths",
-                            "type": "number[]",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "\uCEEC\uB7FC \uB108\uBE44\uB97C \uC5C5\uB370\uC774\uD2B8\uD569\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            },
-            "refreshSelection": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "\uC804\uCCB4 \uC120\uD0DD \uCCB4\uD06C\uBC15\uC2A4 \uC0C1\uD0DC\uB97C \uAC31\uC2E0\uD569\uB2C8\uB2E4.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "columns",
-                "methodName": "handleColumnsChange"
-            }];
-    }
-}