@sellmate/design-system 1.27.1 → 1.29.0

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

@@ -1,954 +0,0 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-BZg-6aSz.js';
-import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-import { T as TABLE_BODY_LAYOUT, a as TABLE_SELECTABLE_COLUMN_WIDTH, b as TABLE_BODY_TYPOGRAPHY, c as TABLE_BORDER, d as TABLE_RADIUS } from './sd-table.config-BbIWNUE2.js';
-import './component.table-D9tQwTWy.js';
-import './system-BJfiMC9H.js';
-
-let urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
-/* @ts-self-types="./index.d.ts" */
-let nanoid = (size = 21) => {
-  let id = '';
-  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
-  while (size--) {
-    id += urlAlphabet[bytes[size] & 63];
-  }
-  return id
-};
-
-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::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}.sd-table__scroll-container::-webkit-scrollbar:horizontal{height:8px}.sd-table__scroll-container::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}.sd-table__scroll-container::-webkit-scrollbar-track{background-color:#E5E5E5}.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 SdTable = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sdSelectChange = createEvent(this, "sdSelectChange", 7);
-        this.sdPageChange = createEvent(this, "sdPageChange", 7);
-        this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange", 7);
-        this.sdVirtualUpdate = createEvent(this, "sdVirtualUpdate", 7);
-        this.sdVirtualReachEnd = createEvent(this, "sdVirtualReachEnd", 7);
-    }
-    static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
-    get el() { return getElement(this); }
-    /** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
-    tableId = nanoid(8);
-    fallbackTableId = nanoid(8);
-    /** 컬럼 정의 목록 */
-    columns = [];
-    /** 행 데이터 배열 */
-    rows;
-    /** 현재 선택된 행 목록 */
-    selected = [];
-    /** 행 고유 식별 필드명 */
-    rowKey = 'id';
-    /** 행 선택(체크박스) 기능 활성화 여부 */
-    selectable = false;
-    /** 컬럼 너비 조절 기능 활성화 여부 */
-    resizable = false;
-    /** 테이블 너비 */
-    width;
-    /** 테이블 높이 */
-    height;
-    /** 헤더 고정(sticky) 여부 */
-    stickyHeader = false;
-    /** 고정할 좌우 컬럼 수 */
-    stickyColumn = { left: 0, right: 0 };
-    /** border-radius 제어 */
-    radius = 'default';
-    /** 데이터 없을 때 표시할 메시지 */
-    noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
-    resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
-    /** 로딩 스피너 표시 여부 */
-    isLoading = false;
-    /** 페이지네이션 옵션 */
-    pagination;
-    /** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
-    useInternalPagination = false;
-    /** 페이지당 행 수 선택 셀렉트 표시 여부 */
-    useRowsPerPageSelect = false;
-    /** 행 높이를 줄인 조밀 모드 여부 */
-    dense = false;
-    // ─── Virtual Scroll ───────────────────────────────────────────────
-    /** 가상 스크롤 사용 여부 */
-    useVirtualScroll = false;
-    /** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
-    rowHeight;
-    get effectiveRowHeight() {
-        if (this.rowHeight != null)
-            return this.rowHeight;
-        return this.dense
-            ? Number(TABLE_BODY_LAYOUT.dense.height)
-            : Number(TABLE_BODY_LAYOUT.default.height);
-    }
-    /** 가상 스크롤 상하 버퍼 행 수 */
-    virtualBuffer = 5;
-    /** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
-    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 = false;
-    scrolledRight = false;
-    rowCount = 0;
-    loadingScrollTop = 0;
-    noDataBodyHeight = 60;
-    // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
-    // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
-    autoThead = false;
-    autoTbody = false;
-    vsStart = 0;
-    vsEnd = 0;
-    lastReachEndNotifiedRowCount = -1;
-    scrollContainer = null;
-    noDataContentEl = null;
-    noDataContentResizeObserver;
-    onScroll;
-    // 키: `${rowKey}::${field}` → { rowspan, colspan }
-    spanRegistry = new Map();
-    // rowKey → Set<field>: useFrame=true인 sd-td가 있는 행을 추적한다.
-    // 하나라도 등록되면 해당 행은 dense를 무시하고 default 레이아웃으로 렌더된다.
-    useFrameRegistry = new Map();
-    // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
-    // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
-    cellClassRegistry = new Map();
-    // rowKey 문자열 → rows 배열에서의 visual index.
-    // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
-    // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
-    rowIndexMap = new Map();
-    rebuildRowIndexMap() {
-        this.rowIndexMap.clear();
-        if (!Array.isArray(this.rows))
-            return;
-        const field = this.rowKey;
-        this.rows.forEach((r, i) => {
-            const k = r?.[field];
-            if (k == null)
-                return;
-            this.rowIndexMap.set(String(k), i);
-        });
-    }
-    // rowKey의 시각적 행 인덱스를 돌려준다.
-    // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
-    // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
-    // 3) 둘 다 안 되면 null — rowspan 평가 스킵
-    resolveRowIndex(rowKey) {
-        const fromMap = this.rowIndexMap.get(rowKey);
-        if (fromMap !== undefined)
-            return fromMap;
-        const n = Number(rowKey);
-        return Number.isFinite(n) ? n : null;
-    }
-    toFiniteNumber(value, fallback) {
-        const n = typeof value === 'number' ? value : Number(value);
-        return Number.isFinite(n) ? n : fallback;
-    }
-    isRowsPerPageValue(value) {
-        return value === null || typeof value === 'string' || typeof value === 'number';
-    }
-    isValidTableId(value) {
-        return (typeof value === 'string' &&
-            value.trim().length > 0 &&
-            value !== 'undefined' &&
-            value !== 'null');
-    }
-    getResolvedTableId() {
-        if (this.isValidTableId(this.tableId))
-            return this.tableId;
-        const attrId = this.el?.getAttribute(TABLE_ID_ATTR);
-        if (this.isValidTableId(attrId))
-            return attrId;
-        return this.fallbackTableId;
-    }
-    syncTableIdAttribute() {
-        const resolvedTableId = this.getResolvedTableId();
-        if (this.el?.getAttribute(TABLE_ID_ATTR) !== resolvedTableId) {
-            this.el.setAttribute(TABLE_ID_ATTR, resolvedTableId);
-        }
-    }
-    handleIsLoadingChange(newVal) {
-        if (newVal) {
-            this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
-        }
-        this.syncNoDataContentObserver();
-    }
-    handleUseVirtualScrollChange(newVal) {
-        if (newVal) {
-            // DOM이 새 --table-container-height로 업데이트된 후 계산해야 정확함
-            readTask(() => this.propagateVirtualUpdate());
-        }
-    }
-    handleColumnsChange(newCols) {
-        this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
-        this.refreshChildrenConfig();
-    }
-    handleRowsChange(newRows) {
-        if (!Array.isArray(newRows))
-            return;
-        this.rowCount = newRows.length;
-        this.rebuildRowIndexMap();
-        if (this.useVirtualScroll)
-            this.propagateVirtualUpdate(true);
-        this.pushRowsToChildren(newRows);
-        this.syncNoDataContentObserver();
-    }
-    handleRowKeyChange() {
-        this.rebuildRowIndexMap();
-    }
-    handleTableIdChange() {
-        this.syncTableIdAttribute();
-    }
-    handleNoDataLabelChange(newLabel) {
-        if (typeof newLabel === 'string' &&
-            newLabel.trim().length > 0 &&
-            newLabel !== 'undefined' &&
-            newLabel !== 'null') {
-            this.resolvedNoDataLabel = newLabel;
-        }
-        else {
-            this.resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
-        }
-    }
-    handleConfigChange() {
-        this.refreshChildrenConfig();
-    }
-    handleSelectedChange(newSelected) {
-        this.innerSelected = new Set(newSelected);
-    }
-    handlePaginationChange(newVal) {
-        if (newVal?.page != null && newVal.page !== this.currentPage) {
-            this.currentPage = newVal.page;
-        }
-        if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
-            this.innerRowsPerPage = newVal.rowsPerPage;
-        }
-    }
-    detectChildren() {
-        const hasThead = !!this.el.querySelector(':scope > sd-thead');
-        const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
-        this.autoThead = !hasThead;
-        this.autoTbody = !hasTbody;
-    }
-    componentWillLoad() {
-        this.syncTableIdAttribute();
-        this.handleNoDataLabelChange(this.noDataLabel);
-        this.detectChildren();
-        this.innerSelected = new Set(this.selected || []);
-        this.columnWidths = (this.columns || []).map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
-        this.rebuildRowIndexMap();
-        if (this.pagination?.page != null) {
-            this.currentPage = this.pagination.page;
-        }
-        if (this.pagination?.rowsPerPage != null) {
-            this.innerRowsPerPage = this.pagination.rowsPerPage;
-        }
-        // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
-        // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
-        // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const el = this.el;
-        el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
-        el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
-        el.toggleSelectAllSync = this.toggleSelectAllSync.bind(this);
-        el.getIsAllCheckedSync = this.getIsAllCheckedSync.bind(this);
-        el.getStickyStyleSync = this.getStickyStyleSync.bind(this);
-        el.setRowCountSync = this.setRowCountSync.bind(this);
-        el.handleResize = this.handleResize.bind(this);
-        el.getPaginationInfoSync = this.getPaginationInfoSync.bind(this);
-        el.getVirtualScrollRangeSync = this.getVirtualScrollRangeSync.bind(this);
-        el.getConfigSync = this.getConfigSync.bind(this);
-        el.getTableIdSync = () => this.getResolvedTableId();
-        el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
-        el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
-        el.registerSpanSync = this.registerSpanSync.bind(this);
-        el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
-        el.getSpanSync = this.getSpanSync.bind(this);
-        el.isCoveredSync = this.isCoveredSync.bind(this);
-        el.hasRowspanSync = this.hasRowspanSync.bind(this);
-        el.registerCellClassSync = this.registerCellClassSync.bind(this);
-        el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
-        el.getCellClassSync = this.getCellClassSync.bind(this);
-        el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
-        el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
-        el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
-        el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
-        if (Array.isArray(this.rows)) {
-            this.rowCount = this.rows.length;
-            this.pushRowsToChildren(this.rows);
-        }
-    }
-    componentDidLoad() {
-        if (Array.isArray(this.rows)) {
-            this.pushRowsToChildren(this.rows);
-        }
-        readTask(() => {
-            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
-            if (!wrapper)
-                return;
-            let rafPending = false;
-            this.onScroll = () => {
-                // 가로 스크롤 그림자
-                const scrollLeft = wrapper.scrollLeft;
-                const scrollWidth = wrapper.scrollWidth;
-                const clientWidth = wrapper.clientWidth;
-                const newScrolledLeft = scrollLeft > 0;
-                const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
-                if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
-                    this.scrolledLeft = newScrolledLeft;
-                    this.scrolledRight = newScrolledRight;
-                    this.refreshChildrenConfig();
-                }
-                // 세로 가상 스크롤 — RAF로 프레임당 1회만 처리
-                if (this.useVirtualScroll && !rafPending) {
-                    rafPending = true;
-                    requestAnimationFrame(() => {
-                        rafPending = false;
-                        this.propagateVirtualUpdate();
-                    });
-                }
-            };
-            this.scrollContainer = wrapper;
-            wrapper.addEventListener('scroll', this.onScroll, { passive: true });
-            this.onScroll();
-            if (this.useVirtualScroll) {
-                this.propagateVirtualUpdate(); // 초기 렌더
-            }
-        });
-        this.syncNoDataContentObserver();
-    }
-    disconnectedCallback() {
-        if (this.scrollContainer && this.onScroll) {
-            this.scrollContainer.removeEventListener('scroll', this.onScroll);
-        }
-        this.noDataContentResizeObserver?.disconnect();
-        this.noDataContentResizeObserver = undefined;
-    }
-    syncNoDataContentObserver() {
-        const isNoData = this.rowCount === 0 && !this.isLoading;
-        if (!isNoData) {
-            this.noDataContentResizeObserver?.disconnect();
-            this.noDataContentResizeObserver = undefined;
-            this.noDataBodyHeight = 60;
-            return;
-        }
-        this.observeNoDataContentHeight();
-    }
-    // observer를 붙이고 콘텐츠 높이를 측정해 noDataBodyHeight를 갱신하는 함수
-    observeNoDataContentHeight() {
-        if (typeof ResizeObserver === 'undefined')
-            return;
-        const target = this.noDataContentEl;
-        if (!target)
-            return;
-        this.noDataContentResizeObserver?.disconnect();
-        this.noDataContentResizeObserver = new ResizeObserver(() => {
-            const measured = Math.ceil(target.scrollHeight);
-            const nextHeight = Math.max(60, measured);
-            if (nextHeight !== this.noDataBodyHeight) {
-                this.noDataBodyHeight = nextHeight;
-            }
-        });
-        this.noDataContentResizeObserver.observe(target);
-        readTask(() => {
-            if (!this.noDataContentEl)
-                return;
-            const measured = Math.ceil(this.noDataContentEl.scrollHeight);
-            const next = Math.max(60, measured);
-            if (next !== this.noDataBodyHeight) {
-                this.noDataBodyHeight = next;
-            }
-        });
-    }
-    queryChildEl(selector) {
-        return (this.el.querySelector(selector) ??
-            this.el.shadowRoot?.querySelector(selector) ??
-            null);
-    }
-    queryAllTr() {
-        const light = Array.from(this.el.querySelectorAll('sd-tr'));
-        const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
-        return [...light, ...shadow];
-    }
-    pushRowsToChildren(rows) {
-        const tbody = this.queryChildEl('sd-tbody');
-        if (tbody)
-            tbody.rows = rows;
-        const thead = this.queryChildEl('sd-thead');
-        if (thead)
-            thead.rows = rows;
-    }
-    handleStructureSlotChange = () => {
-        if (Array.isArray(this.rows)) {
-            this.pushRowsToChildren(this.rows);
-        }
-        this.refreshChildrenConfig();
-    };
-    refreshChildrenSelection() {
-        const thead = this.queryChildEl('sd-thead');
-        thead?.refreshSelection?.();
-        this.queryAllTr().forEach(tr => tr.refreshSelection?.());
-    }
-    refreshChildrenConfig() {
-        const thead = this.queryChildEl('sd-thead');
-        thead?.refreshConfig?.();
-        this.queryAllTr().forEach(tr => tr.refreshConfig?.());
-    }
-    maybeEmitVirtualReachEnd(start, end) {
-        const threshold = Math.max(1, this.virtualEndThreshold);
-        const nearEnd = end >= Math.max(0, this.rowCount - threshold);
-        if (!nearEnd)
-            return;
-        if (this.lastReachEndNotifiedRowCount === this.rowCount)
-            return;
-        this.lastReachEndNotifiedRowCount = this.rowCount;
-        this.sdVirtualReachEnd.emit({
-            from: start,
-            to: end,
-            rowCount: this.rowCount,
-            threshold,
-        });
-    }
-    propagateVirtualUpdate(forceSpacerUpdate = false) {
-        if (!this.scrollContainer || !this.useVirtualScroll)
-            return;
-        const scrollTop = this.toFiniteNumber(this.scrollContainer.scrollTop, 0);
-        const containerHeight = this.toFiniteNumber(this.scrollContainer.clientHeight, 0);
-        const { start, end } = this.calculateVisibleRange(scrollTop, containerHeight);
-        if (!Number.isFinite(start) || !Number.isFinite(end))
-            return;
-        const rangeChanged = this.vsStart !== start || this.vsEnd !== end;
-        if (!rangeChanged && !forceSpacerUpdate)
-            return;
-        this.vsStart = start;
-        this.vsEnd = end;
-        const topHeight = start * this.effectiveRowHeight;
-        const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
-        // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
-        const tbody = this.queryChildEl('sd-tbody');
-        tbody?.setSpacersSync?.(topHeight, bottomHeight);
-        if (rangeChanged) {
-            this.sdVirtualUpdate.emit({
-                from: start,
-                to: end,
-            });
-        }
-        this.maybeEmitVirtualReachEnd(start, end);
-    }
-    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(rowKey, field) {
-        if (rowKey == null || field === '')
-            return;
-        let fields = this.useFrameRegistry.get(rowKey);
-        if (!fields) {
-            fields = new Set();
-            this.useFrameRegistry.set(rowKey, fields);
-        }
-        fields.add(field);
-    }
-    unregisterUseFrameSync(rowKey, field) {
-        if (rowKey == null || field === '')
-            return;
-        const fields = this.useFrameRegistry.get(rowKey);
-        if (!fields)
-            return;
-        fields.delete(field);
-        if (fields.size === 0)
-            this.useFrameRegistry.delete(rowKey);
-    }
-    hasUseFrameInRowSync(rowKey) {
-        const fields = this.useFrameRegistry.get(rowKey);
-        return fields != null && fields.size > 0;
-    }
-    isCellUseFrameSync(rowKey, field) {
-        return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
-    }
-    isRowSelectedSync(row) {
-        return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
-    }
-    /** 행이 선택되어 있는지 확인합니다. */
-    async isRowSelected(row) {
-        return this.isRowSelectedSync(row);
-    }
-    updateRowSelectSync(row) {
-        const selectedArray = Array.from(this.innerSelected);
-        const exists = this.isRowSelectedSync(row);
-        const newSelected = exists
-            ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
-            : [...selectedArray, row];
-        if (newSelected.length === selectedArray.length)
-            return;
-        this.innerSelected = new Set(newSelected);
-        this.selected = Array.from(this.innerSelected);
-        this.sdSelectChange.emit(Array.from(this.innerSelected));
-        this.refreshChildrenSelection();
-    }
-    /** 행 선택 상태를 토글합니다. */
-    async updateRowSelect(row) {
-        this.updateRowSelectSync(row);
-    }
-    toggleSelectAllSync(checked, rows) {
-        if (checked) {
-            const pageRows = new Set([...rows]);
-            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
-        }
-        else {
-            const currentPageKeys = rows.map(r => r[this.rowKey ?? 'id']);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey ?? 'id'])));
-        }
-        this.selected = Array.from(this.innerSelected);
-        this.sdSelectChange.emit(Array.from(this.innerSelected));
-        this.refreshChildrenSelection();
-    }
-    /** 전체 행 선택/해제를 처리합니다. */
-    async toggleSelectAll(checked, rows) {
-        this.toggleSelectAllSync(checked, rows);
-    }
-    getIsAllCheckedSync(rows) {
-        const total = rows.length;
-        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id'])).length;
-        if (selectedCount === 0)
-            return false;
-        if (selectedCount === total)
-            return true;
-        return null; // indeterminate
-    }
-    /** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
-    async getIsAllChecked(rows) {
-        return this.getIsAllCheckedSync(rows);
-    }
-    changePage(page) {
-        if (!this.useInternalPagination) {
-            this.sdPageChange.emit(page);
-            return;
-        }
-        this.currentPage = page;
-        this.sdPageChange.emit(this.currentPage);
-        this.updateRowsVisibility();
-    }
-    updateRowsVisibility() {
-        this.queryAllTr().forEach(tr => tr.updateVisibility?.());
-    }
-    changeRowsPerPage(perPage) {
-        const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
-        if (!this.useInternalPagination) {
-            this.sdRowsPerPageChange.emit(changedRowsPerPage);
-            return;
-        }
-        this.innerRowsPerPage = changedRowsPerPage;
-        const newLastPage = Math.max(1, Math.ceil(this.rowCount / changedRowsPerPage));
-        if (this.currentPage > newLastPage) {
-            this.currentPage = newLastPage;
-        }
-        this.sdRowsPerPageChange.emit(changedRowsPerPage);
-        this.updateRowsVisibility();
-    }
-    get lastPageNumber() {
-        if (this.useInternalPagination) {
-            return Math.max(1, Math.ceil(this.rowCount / this.innerRowsPerPage));
-        }
-        const { lastPage, rowsPerPage = 10 } = this.pagination || {};
-        return lastPage ?? Math.max(1, Math.ceil(this.rowCount / rowsPerPage));
-    }
-    handleResize(index, event, reversed = false) {
-        if (typeof document === 'undefined')
-            return;
-        const startX = event.clientX;
-        const startWidth = this.columnWidths[index];
-        const handleMouseMove = (moveEvent) => {
-            const col = this.columns[index];
-            if (col == null)
-                return;
-            const minWidth = col.minWidth || 50;
-            const maxWidth = col.maxWidth || 9999;
-            const delta = moveEvent.clientX - startX;
-            const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
-            this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
-            const thead = this.queryChildEl('sd-thead');
-            thead?.setColumnWidths?.(this.columnWidths);
-            this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
-            const stickyRightCount = this.stickyColumn?.right || 0;
-            const visibleColCount = this.columns.filter(c => c.visible !== false).length;
-            const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
-            if (isRightStickyEdgeResizer) {
-                requestAnimationFrame(() => {
-                    this.onScroll?.();
-                });
-            }
-        };
-        const handleMouseUp = () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    }
-    getStickyStyleSync(colIdx) {
-        const leftOffset = this.columnWidths
-            .slice(0, colIdx)
-            .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >=
-            this.columns.filter(c => c.visible !== false).length -
-                (this.stickyColumn?.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        const visibleCol = this.columns.filter(c => c.visible !== false)[colIdx];
-        const base = {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-        };
-        if (!visibleCol?.autoWidth) {
-            base['width'] = `${this.columnWidths[colIdx]}px`;
-            base['minWidth'] = `${this.columnWidths[colIdx]}px`;
-            base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
-        }
-        return base;
-    }
-    /** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
-    async getStickyStyle(colIdx) {
-        return this.getStickyStyleSync(colIdx);
-    }
-    // ─── rowspan / colspan registry ─────────────────────────────────
-    // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
-    // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
-    // 덮였는지 판정해 <td>를 그릴지 결정한다.
-    spanKey(rowKey, field) {
-        return `${rowKey}::${field}`;
-    }
-    // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
-    // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
-    // 덮인 셀이 사라지거나 다시 나타난다.
-    // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
-    // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
-    requestAllTrUpdate() {
-        this.queryAllTr().forEach(tr => {
-            if (typeof tr.bumpSpansVersion === 'function') {
-                tr.bumpSpansVersion();
-            }
-            else {
-                forceUpdate(tr);
-            }
-        });
-    }
-    registerSpanSync(rowKey, field, rowspan, colspan) {
-        if (rowKey == null || field === '')
-            return;
-        const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
-        const safeColspan = Math.max(1, Math.floor(colspan || 1));
-        const key = this.spanKey(rowKey, field);
-        const prev = this.spanRegistry.get(key);
-        if (safeRowspan === 1 && safeColspan === 1) {
-            if (!prev)
-                return;
-            this.spanRegistry.delete(key);
-            this.requestAllTrUpdate();
-            return;
-        }
-        if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
-            return;
-        this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
-        this.requestAllTrUpdate();
-    }
-    unregisterSpanSync(rowKey, field) {
-        if (rowKey == null || field === '')
-            return;
-        const key = this.spanKey(rowKey, field);
-        if (!this.spanRegistry.has(key))
-            return;
-        this.spanRegistry.delete(key);
-        this.requestAllTrUpdate();
-    }
-    getSpanSync(rowKey, field) {
-        return this.spanRegistry.get(this.spanKey(rowKey, field));
-    }
-    // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
-    // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
-    // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
-    registerCellClassSync(rowKey, field, cls) {
-        if (rowKey == null || field === '')
-            return;
-        const key = this.spanKey(rowKey, field);
-        const safe = (cls ?? '').trim();
-        if (safe === '') {
-            this.cellClassRegistry.delete(key);
-            return;
-        }
-        this.cellClassRegistry.set(key, safe);
-    }
-    unregisterCellClassSync(rowKey, field) {
-        if (rowKey == null || field === '')
-            return;
-        this.cellClassRegistry.delete(this.spanKey(rowKey, field));
-    }
-    getCellClassSync(rowKey, field) {
-        return this.cellClassRegistry.get(this.spanKey(rowKey, field));
-    }
-    // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
-    // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
-    hasRowspanSync() {
-        for (const span of this.spanRegistry.values()) {
-            if (span.rowspan > 1)
-                return true;
-        }
-        return false;
-    }
-    isCoveredSync(rowKey, colIdx, columns) {
-        if (this.spanRegistry.size === 0)
-            return false;
-        const visibleCols = columns.filter(c => c.visible !== false);
-        // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
-        for (let i = 0; i < colIdx; i++) {
-            const c = visibleCols[i];
-            if (c == null)
-                continue;
-            const field = typeof c.field === 'string' ? c.field : c.name;
-            const span = this.spanRegistry.get(this.spanKey(rowKey, field));
-            if (!span)
-                continue;
-            if (i + span.colspan > colIdx)
-                return true;
-        }
-        // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
-        //    rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
-        //    없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
-        const myRowIdx = this.resolveRowIndex(rowKey);
-        if (myRowIdx == null)
-            return false;
-        for (const [key, span] of this.spanRegistry) {
-            if (span.rowspan <= 1)
-                continue;
-            const sepIdx = key.indexOf('::');
-            if (sepIdx < 0)
-                continue;
-            const otherRowKey = key.slice(0, sepIdx);
-            const otherField = key.slice(sepIdx + 2);
-            const otherRowIdx = this.resolveRowIndex(otherRowKey);
-            if (otherRowIdx == null)
-                continue;
-            if (otherRowIdx >= myRowIdx)
-                continue;
-            if (otherRowIdx + span.rowspan <= myRowIdx)
-                continue;
-            const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
-            if (otherColIdx < 0)
-                continue;
-            if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
-                return true;
-        }
-        return false;
-    }
-    setRowCountSync(count) {
-        const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
-        if (safeCount !== this.rowCount) {
-            this.lastReachEndNotifiedRowCount = -1;
-        }
-        this.rowCount = safeCount;
-        if (this.useVirtualScroll) {
-            this.propagateVirtualUpdate(true);
-        }
-    }
-    /** 가상 스크롤 총 행 수를 설정합니다. */
-    async setRowCount(count) {
-        this.setRowCountSync(count);
-    }
-    calculateVisibleRange(scrollTop, containerHeight) {
-        const safeRowHeight = Math.max(1, this.toFiniteNumber(this.effectiveRowHeight, 40));
-        const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
-        const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
-        const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
-        const safeRowCount = Math.max(0, Math.floor(this.toFiniteNumber(this.rowCount, 0)));
-        const firstVisible = Math.floor(safeScrollTop / safeRowHeight);
-        const visibleCount = Math.ceil(safeContainerHeight / safeRowHeight);
-        const start = Math.max(0, firstVisible - safeBuffer);
-        const end = Math.min(safeRowCount, firstVisible + visibleCount + safeBuffer);
-        return { start, end };
-    }
-    getPaginationInfoSync() {
-        if (!this.useInternalPagination || !this.pagination)
-            return null;
-        const startIndex = (this.currentPage - 1) * this.innerRowsPerPage;
-        const endIndex = startIndex + this.innerRowsPerPage;
-        return {
-            startIndex,
-            endIndex,
-            currentPage: this.currentPage,
-            rowsPerPage: this.innerRowsPerPage,
-        };
-    }
-    /** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
-    async getPaginationInfo() {
-        return this.getPaginationInfoSync();
-    }
-    getVirtualScrollRangeSync() {
-        if (!this.useVirtualScroll)
-            return null;
-        if (!(this.vsEnd > 0))
-            return null;
-        return { from: this.vsStart, to: this.vsEnd };
-    }
-    // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
-    // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
-    renderAutoRows() {
-        if (this.useVirtualScroll)
-            return null;
-        const allRows = this.rows ?? [];
-        const pageInfo = this.getPaginationInfoSync();
-        const startIdx = pageInfo?.startIndex ?? 0;
-        const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
-        return displayed.map((row, i) => {
-            const absoluteIdx = startIdx + i;
-            return h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
-        });
-    }
-    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',
-            this.rowCount === 0 && !this.isLoading && 'sd-table--no-data',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    render() {
-        const resolvedTableId = this.getResolvedTableId();
-        const isNoData = this.rowCount === 0 && !this.isLoading;
-        const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
-        const noDataTotalHeight = 36 + this.noDataBodyHeight;
-        const hostHeight = isNoData
-            ? this.height !== undefined
-                ? `max(${this.height}, ${noDataTotalHeight}px)`
-                : `max(${noDataTotalHeight}px, 100%)`
-            : (this.height ?? '100%');
-        const hostStyle = {
-            '--table-radius': `${TABLE_RADIUS}px`,
-            '--table-border-color': TABLE_BORDER.color,
-            '--table-border-width': `${TABLE_BORDER.width}px`,
-            '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
-            '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
-            '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
-            '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
-            '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
-            '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
-            '--table-host-height': hostHeight,
-        };
-        return (h(Host, { key: 'b90b9865f78c2b42c3c13ad27ed968dd97827eb6', style: hostStyle }, h("div", { key: '2eb291b03b219a3abb4da5967c6d0f43195b458e', class: "sd-table__container", style: {
-                '--table-width': this.width,
-                '--pagination-height': `${paginationHeight}px`,
-            } }, h("div", { key: '999feaffbf82db9233416a1d66974e8859b9b3a0', class: {
-                'sd-table__wrapper': true,
-                'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
-                'sd-table__wrapper--radius-full': this.radius === 'full',
-            } }, h("div", { key: 'ff0a04325ab9fe1ba5e6b25f52bb8265226fbba4', class: {
-                'sd-table__scroll-container': true,
-                'sd-table__scroll-container--loading': this.isLoading,
-                'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (h("div", { key: '1a4dbf4a721240b3395230997c18c8ef989bbffc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '793a6772ef4c792e7f50c2ad90d43bdfbdde11a0', indeterminate: true }))), isNoData && (h(h.Fragment, null, h("div", { key: '13b76f695edddfa3d4a13bcb1091f95cafb1ae17', class: "sd-table__no-data-header-overlay" }), h("div", { key: 'f271bfa20d06cba0cc6c5fe6b5af5c874c1e0682', class: "sd-table__no-data" }, h("div", { key: '6791f70e0b4cd1226bdcc16414249ad178b70396', class: "sd-table__no-data-content", ref: el => {
-                this.noDataContentEl = el;
-                if (el)
-                    this.syncNoDataContentObserver();
-            } }, h("slot", { key: '9cba0ff5c5ea3b4c78ccdb961de9cfe3ef2ac1e9', name: "no-data" }, h("span", { key: '1022372f37f1564b0d636c888a17cb5ab5ac2e35' }, this.resolvedNoDataLabel)))))), h("table", { key: 'e3d8c7dec8b3c76896b3063266dd5450bbfa7c13', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
-            this.pagination.rowsPerPage > 0 &&
-            this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '5410b53a9182f97406a0992464bc3435eb8439b1', class: "sd-table__pagination" }, h("sd-pagination", { key: 'aa237fe475797dd626856f5335395bdfa870f6db', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'd2b98c053c6d63f0bbea73d66779dfa5c1828b5a', value: this.useInternalPagination
-                ? this.innerRowsPerPage
-                : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
-                if (!this.isRowsPerPageValue(e.detail))
-                    return;
-                this.changeRowsPerPage(e.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
-            }]
-    }; }
-};
-SdTable.style = sdTableCss();
-
-export { SdTable as sd_table };