@sellmate/design-system 0.0.34 → 0.0.36

package/dist/components/sd-table-backup.js

@@ -0,0 +1,385 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CbnL1UUF.js';
+import { d as defineCustomElement$c } from './p-DNEKh1qk.js';
+import { d as defineCustomElement$b } from './p-DpcL5xdv.js';
+import { d as defineCustomElement$a } from './p-InrZhOLL.js';
+import { d as defineCustomElement$9 } from './p-D7IsBL9J.js';
+import { d as defineCustomElement$8 } from './p-D2x4IHr5.js';
+import { d as defineCustomElement$7 } from './p-0B7EuAJt.js';
+import { d as defineCustomElement$6 } from './p-C075_t2h.js';
+import { d as defineCustomElement$5 } from './p-Ce6LhsfH.js';
+import { d as defineCustomElement$4 } from './p-DTUSoHK4.js';
+import { d as defineCustomElement$3 } from './p-kLlPK7H2.js';
+import { d as defineCustomElement$2 } from './p-BG0UE2wL.js';
+
+const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:auto;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;position:relative;will-change:scroll-position;height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;height:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody{flex-grow:1}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;min-height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__no-data-row td{text-align:center;color:#888888}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr:last-of-type td{border-bottom:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}";
+
+const SdTable = /*@__PURE__*/ proxyCustomElement(class SdTable extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdSelectChange = createEvent(this, "sdSelectChange");
+        this.sdPageChange = createEvent(this, "sdPageChange");
+        this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange");
+    }
+    get el() { return this; }
+    columns;
+    rows;
+    selected = new Set();
+    rowKey = 'id';
+    selectable = false;
+    resizable = false;
+    width;
+    height;
+    stickyHeader = false;
+    stickyColumn = { left: 0, right: 0 };
+    noDataLabel = '데이터가 없습니다.';
+    isLoading = false;
+    pagination;
+    bodyCellRenderer;
+    useInternalPagination = false;
+    useRowsPerPageSelect = false;
+    rowsPerPageOption = [
+        { label: '10개씩 보기', value: 10 },
+        { label: '25개씩 보기', value: 25 },
+        { label: '50개씩 보기', value: 50 },
+        { label: '100개씩 보기', value: 100 },
+    ];
+    sdSelectChange;
+    sdPageChange;
+    sdRowsPerPageChange;
+    currentPage = this.pagination?.page || 1;
+    innerRows = [];
+    innerSelected = new Set();
+    columnWidths = [];
+    scrolledLeft = false;
+    scrolledRight = false;
+    handleColumnsChange(newCols) {
+        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
+    }
+    handleRowsChange(newRows) {
+        this.innerRows = [...newRows];
+    }
+    handleSelectedChange(newSelected) {
+        this.innerSelected = new Set(newSelected);
+    }
+    handlePaginationChange(newVal) {
+        if (newVal?.page && newVal.page !== this.currentPage)
+            this.currentPage = newVal.page;
+    }
+    componentWillLoad() {
+        this.innerRows = [...(this.rows || [])];
+        this.innerSelected = new Set(this.selected);
+        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
+        if (this.pagination?.page) {
+            this.currentPage = this.pagination.page;
+        }
+    }
+    componentDidLoad() {
+        // SSR 환경 체크
+        if (typeof window === 'undefined')
+            return;
+        const middle = this.el.querySelector('.sd-table__middle');
+        if (!middle)
+            return;
+        const onScroll = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = middle;
+            this.scrolledLeft = scrollLeft > 0;
+            this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
+        };
+        middle.addEventListener('scroll', onScroll, { passive: true });
+        onScroll();
+    }
+    // ----- Derived getters -----
+    get visibleColumns() {
+        return this.columns.filter(col => col.visible !== false);
+    }
+    get paginatedRows() {
+        if (!this.pagination || !this.useInternalPagination)
+            return this.innerRows;
+        const { rowsPerPage = this.rows.length } = this.pagination || {};
+        const result = this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
+        return result;
+    }
+    get lastPageNumber() {
+        const { lastPage, rowsPerPage = this.rows.length } = this.pagination || {};
+        return lastPage ?? Math.max(1, Math.ceil(this.rows.length / rowsPerPage));
+    }
+    get sdTableClasses() {
+        return [
+            'sd-table',
+            this.stickyHeader && 'sd-table--sticky-header',
+            this.selectable && 'sd-table--selectable',
+            this.resizable && 'sd-table--resizable',
+            !this.innerRows.length && 'sd-table--no-data',
+            ((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',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    // ----- Selection -----
+    isRowSelected(row) {
+        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+    }
+    updateRowSelect(row) {
+        const selectedArray = Array.from(this.innerSelected);
+        const exists = this.isRowSelected(row);
+        const newSelected = exists
+            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+            : [...selectedArray, row];
+        // 동일 상태면 set하지 않음 → 불필요 렌더 방지
+        if (newSelected.length === selectedArray.length)
+            return;
+        this.innerSelected = new Set(newSelected);
+        this.sdSelectChange.emit(Array.from(this.innerSelected));
+    }
+    toggleSelectAll(checked) {
+        if (checked) {
+            const pageRows = new Set([...this.paginatedRows]);
+            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
+        }
+        else {
+            const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
+            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
+        }
+        this.sdSelectChange.emit(Array.from(this.innerSelected));
+    }
+    get isAllChecked() {
+        const total = this.paginatedRows.length;
+        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
+        if (selectedCount === 0)
+            return false; // 아무것도 안 선택됨
+        if (selectedCount === total)
+            return true; // 전부 선택됨
+        return null; // 일부만 선택됨
+    }
+    // ----- Helpers -----
+    getStickyStyle(colIdx) {
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+    }
+    handleResize(index, event) {
+        // SSR 환경 체크
+        if (typeof document === 'undefined')
+            return;
+        const startX = event.clientX;
+        const startWidth = this.columnWidths[index];
+        const handleMouseMove = (moveEvent) => {
+            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50);
+            this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+    getCellValue(column, row) {
+        const { field, format, name } = column;
+        const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
+        return format ? format(value, row) : value;
+    }
+    // ----- Render -----
+    renderHeader() {
+        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
+                'sd-th': true,
+                'sd-th--selected': true,
+                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), this.visibleColumns.map((col, colIdx) => (h("th", { key: col.name, class: {
+                'sd-th': true,
+                [`${col.thClass}`]: Boolean(col.thClass),
+                'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
+                'sticky-right': Boolean(this.stickyColumn.right && colIdx >= this.visibleColumns.length - this.stickyColumn.right),
+                'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
+                'sticky-right-edge': Boolean(this.stickyColumn.right &&
+                    colIdx === this.visibleColumns.length - this.stickyColumn.right),
+            }, style: this.getStickyStyle(colIdx) }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(colIdx, evt) }))))))));
+    }
+    renderBody() {
+        return (h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }) }, this.isLoading && (h("div", { class: "sd-table__loading" }, h("sd-loading-spinner", null))), !this.paginatedRows.length ? (h("tr", { class: "sd-table__no-data-row" }, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("slot", { name: "no-data" }, this.noDataLabel)))) : (this.paginatedRows.map((row, rowIdx) => (h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6" }, this.selectable && (h("td", { class: {
+                'sd-td': true,
+                'sd-td--selected': true,
+                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+            }, style: {
+                '--sticky-left-offset': '0px',
+            } }, h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), this.visibleColumns.map((column, colIdx) => {
+            const rendered = this.bodyCellRenderer?.(column, row);
+            return (h("td", { key: column.name, part: `td-${column.name}`, class: {
+                    'sd-td': true,
+                    [`sd-td--${column.align || 'left'}`]: true,
+                    'sticky-left': Boolean(this.stickyColumn.left && colIdx < this.stickyColumn.left),
+                    'sticky-right': Boolean(this.stickyColumn.right &&
+                        colIdx >= this.visibleColumns.length - this.stickyColumn.right),
+                    'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
+                    'sticky-right-edge': Boolean(this.stickyColumn.right &&
+                        colIdx === this.visibleColumns.length - this.stickyColumn.right),
+                    [`${column.tdClass}`]: Boolean(column.tdClass),
+                }, style: this.getStickyStyle(colIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+        })))))));
+    }
+    render() {
+        return (h(Host, { key: '06f553b40a89351df1054a07191d3fe9d92dd1a4' }, h("div", { key: 'cfd19ef986b2a839791dfc6dbe0998fa4268bcc8', class: "sd-table__wrapper", style: {
+                '--table-width': this.width,
+                '--table-height': this.height,
+            } }, h("div", { key: 'ee2eb7c178fd4df207c096640f12061994340058', class: "sd-table__container" }, h("div", { key: 'fa2ca46bba403928152d9d087b3ec990615507d4', class: {
+                'sd-table__middle': true,
+                'sd-table__middle--loading': this.isLoading,
+            } }, h("table", { key: 'c5248468da6f986da45233ca86dcf68a53001cd6', part: "table", class: this.sdTableClasses }, this.renderHeader(), this.renderBody())), h("div", { key: 'd959e9785b3eab0a9e9864761c6377d561e6987c', class: "sd-table__bottom" })), this.pagination && this.innerRows.length > 0 && (h("div", { key: 'b592fee0e0747a34b3970e4ff7286afe37e79621', class: "sd-table__pagination" }, h("sd-pagination", { key: '05e7ed73d7beba2c14a4bcf07e8686a4d2cf664e', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
+                if (!this.useInternalPagination) {
+                    this.sdPageChange.emit(e.detail);
+                }
+                else {
+                    this.currentPage = e.detail;
+                    this.sdPageChange.emit(this.currentPage);
+                }
+            } }), this.useRowsPerPageSelect && (h("sd-select", { key: 'f0e4ad4e7ec0f857feac4fc669f5a523401120d6', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
+                const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
+                if (!this.useInternalPagination) {
+                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
+                }
+                else {
+                    const newRowsPerPage = Number(e.detail.value || 0);
+                    let newLastPage = Math.max(1, Math.ceil(this.innerRows.length / newRowsPerPage));
+                    let newCurrentPage = this.currentPage;
+                    if (newCurrentPage > newLastPage) {
+                        newCurrentPage = newLastPage;
+                    }
+                    this.pagination = {
+                        page: newCurrentPage,
+                        rowsPerPage: newRowsPerPage,
+                        lastPage: newLastPage,
+                    };
+                    this.currentPage = newCurrentPage;
+                    this.sdRowsPerPageChange.emit(changedRowsPerPage);
+                }
+            } })))))));
+    }
+    static get watchers() { return {
+        "columns": ["handleColumnsChange"],
+        "rows": ["handleRowsChange"],
+        "selected": ["handleSelectedChange"],
+        "pagination": ["handlePaginationChange"]
+    }; }
+    static get style() { return sdTableBackupCss; }
+}, [772, "sd-table-backup", {
+        "columns": [16],
+        "rows": [1040],
+        "selected": [1040],
+        "rowKey": [1, "row-key"],
+        "selectable": [4],
+        "resizable": [4],
+        "width": [1],
+        "height": [1],
+        "stickyHeader": [4, "sticky-header"],
+        "stickyColumn": [16],
+        "noDataLabel": [1, "no-data-label"],
+        "isLoading": [4, "is-loading"],
+        "pagination": [16],
+        "bodyCellRenderer": [16],
+        "useInternalPagination": [4, "use-internal-pagination"],
+        "useRowsPerPageSelect": [4, "use-rows-per-page-select"],
+        "rowsPerPageOption": [16],
+        "currentPage": [32],
+        "innerRows": [32],
+        "innerSelected": [32],
+        "columnWidths": [32],
+        "scrolledLeft": [32],
+        "scrolledRight": [32]
+    }, undefined, {
+        "columns": ["handleColumnsChange"],
+        "rows": ["handleRowsChange"],
+        "selected": ["handleSelectedChange"],
+        "pagination": ["handlePaginationChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-table-backup", "sd-button", "sd-checkbox", "sd-icon", "sd-input", "sd-loading-spinner", "sd-pagination", "sd-portal", "sd-select", "sd-select-option", "sd-tooltip", "sd-tooltip-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-table-backup":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SdTable);
+            }
+            break;
+        case "sd-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "sd-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "sd-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "sd-loading-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "sd-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "sd-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "sd-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "sd-select-option":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "sd-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-tooltip-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SdTableBackup = SdTable;
+const defineCustomElement = defineCustomElement$1;
+
+export { SdTableBackup, defineCustomElement };
+//# sourceMappingURL=sd-table-backup.js.map
+
+//# sourceMappingURL=sd-table-backup.js.map

package/dist/components/sd-table-backup.js.map

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