@xplortech/apollo-core 2.7.0 → 2.7.1

package/dist/collection/components/xpl-table/xpl-table.js

@@ -1,1147 +1,91 @@
 import { Host, h, } from "@stencil/core";
-import { TimerManager } from "../../utils/lifecycle";
-import { cycleSortDirection, getGridColumnWidthFromHeaderCell, getIconType, ROW_REORDER_MARK, SELECTION_MARK, } from "./utils/table-internal";
-import { getNearestTableBodyRowFromNode, getNextVisibleTableBodyRowAfter, moveRowInTableBody, } from "./utils/move-row-dom";
-function bodyRowFromDragTarget(target) {
-    return getNearestTableBodyRowFromNode(target);
-}
-function tableBodyRowFromEvent(ev) {
-    const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
-    const row = path.find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-table-row');
-    return row !== null && row !== void 0 ? row : bodyRowFromDragTarget(ev.target);
-}
-function reorderDragHandleFromEvent(ev) {
-    const path = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
-    const handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
-    return handle !== null && handle !== void 0 ? handle : null;
-}
-export class Table {
-    constructor() {
-        this.columnWidthsToken = '';
-        this.lastEmittedRowSelectionKey = '';
-        this.selectAllValue = Math.random().toString(36).slice(2);
-        this.draggedRow = null;
-        this.pendingDragRow = null;
-        this.pointerUpClearPending = null;
-        this.reorderKeyboardTimers = new TimerManager();
-        this.onReorderHandleKeydown = (ev) => {
-            this.handleReorderHandleKeyDown(ev);
-        };
-        this.areAllSelected = false;
-        this.colCount = 0;
-        this.hasScrolled = false;
-        this.keyboardReorderRowId = null;
-        this.reorderLiveMessage = '';
-        this.rowData = [];
-        this.rowFooterData = [];
-        this.selected = [];
-        this.selectedRowIds = [];
-        this.sortTypeArray = [];
-        this.isSortable = false;
-        this.selectedValues = [];
-        this.sortableColumns = [];
-        this.onGridScroll = (e) => {
-            this.hasScrolled = e.target.scrollLeft > 0;
-        };
-        this.selectAll = (e) => {
-            const { target } = e;
-            if (!(target instanceof HTMLInputElement))
-                return;
-            const { checked } = target;
-            this.areAllSelected = checked;
-            this.selected =
-                this.selectedValues.length > 0
-                    ? Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => (checked ? input === null || input === void 0 ? void 0 : input.value : checked))
-                    : this.selected.map(() => checked);
-            this.onSelectionChange();
-        };
-        this.selectOne = (e, checkboxIdx) => {
-            const { target } = e;
-            if (!(target instanceof HTMLInputElement))
-                return;
-            const { checked, value } = target;
-            this.areAllSelected = false;
-            this.selected = this.selected.map((v, selectedIdx) => {
-                if (selectedIdx !== checkboxIdx)
-                    return v;
-                return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
-            });
-            this.onSelectionChange();
-        };
-        this.onSelectionChange = () => {
-            this.tableSelect.emit({
-                selected: this.selected,
-                areAllSelected: this.areAllSelected,
-            });
-        };
-        this.onLegacyScroll = () => {
-            this.hasScrolled = this.container.scrollLeft > 0;
-        };
-        this.sortBy = (col, sortTypeArray) => {
-            const handleSort = (a, b) => {
-                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase())
-                    return -1;
-                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase())
-                    return 1;
-                return 0;
-            };
-            switch (sortTypeArray[col]) {
-                case 'asc':
-                    this.rowData.sort((a, b) => handleSort(a, b));
-                    break;
-                case 'desc':
-                    this.rowData.sort((a, b) => handleSort(b, a));
-                    break;
-                default:
-                    this.rowData = this.data;
-                    this.sortTypeArray[col] = null;
-                    break;
-            }
-            this.rowData = Array.from(this.rowData);
-        };
-        this.setData = () => {
-            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
-        };
-        this.setFooterData = () => {
-            this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
-        };
-    }
-    watchColumns() {
-        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
-    }
-    watchData() {
-        this.setData();
-    }
-    watchFooterData() {
-        this.setFooterData();
-    }
-    watchReorderHandleIcon() {
-        if (this.isLegacyMode || !this.rowReorderable)
-            return;
-        this.syncInjectedReorderHandleIcons();
-    }
-    watchReorderHandleIconKeyboard() {
-        if (this.isLegacyMode || !this.rowReorderable)
-            return;
-        this.syncInjectedReorderHandleIcons();
-    }
-    watchRowReorderable(next) {
-        if (this.isLegacyMode)
-            return;
-        if (!next) {
-            this.keyboardReorderRowId = null;
-            this.syncReorderHandleKeyboardA11y(null);
-            this.removeManagedReorderCells();
-            this.draggedRow = null;
-            this.pendingDragRow = null;
-            this.clearPendingDragListeners();
-            this.reorderLiveMessage = '';
-            this.queryBodyRows().forEach((r) => {
-                var _a;
-                r.removeAttribute('draggable');
-                (_a = r.querySelector('.xpl-table__row-drag-handle')) === null || _a === void 0 ? void 0 : _a.removeAttribute('draggable');
-                r.classList.remove('xpl-table-row--dragging', 'xpl-table-row--drag-over');
-            });
-            this.colCount = 0;
-            this.columnWidthsToken = '';
-        }
-    }
-    watchSelectable(next) {
-        if (this.isLegacyMode)
-            return;
-        if (!next) {
-            this.selectedRowIds = [];
-            this.lastEmittedRowSelectionKey = '';
-            this.colCount = 0;
-            this.columnWidthsToken = '';
-            this.syncRowSelectedProps();
-        }
-    }
-    componentWillLoad() {
-        if (this.isLegacyMode) {
-            this.areAllSelected = false;
-            this.setData();
-            this.setFooterData();
-            this.selected = new Array(this.rowData.length).fill(false);
-            this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
-        }
-    }
-    componentDidLoad() {
-        if (!this.isLegacyMode) {
-            this.syncCompositionalLayout();
-        }
-    }
-    componentDidUpdate() {
-        if (!this.isLegacyMode) {
-            this.syncCompositionalLayout();
-        }
-    }
-    disconnectedCallback() {
-        this.clearPendingDragListeners();
-        this.detachReorderHandleKeydownListeners();
-        this.reorderKeyboardTimers.dispose();
-        if (this.reorderAnnounceRaf !== undefined) {
-            cancelAnimationFrame(this.reorderAnnounceRaf);
-            this.reorderAnnounceRaf = undefined;
-        }
-    }
-    handleHeaderCellColumnWidthsChange(ev) {
-        if (this.isLegacyMode)
-            return;
-        const t = ev.target;
-        if (!(t instanceof Node) || !this.el.contains(t))
-            return;
-        this.updateColumnWidths();
-    }
-    handleCompositionalCheckboxChange(ev) {
-        var _a, _b;
-        if (this.isLegacyMode || !this.selectable)
-            return;
-        if (!this.isEventFromThisTable(ev.target))
-            return;
-        const path = (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) !== null && _b !== void 0 ? _b : [];
-        let checkboxHost = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement && n.tagName.toLowerCase() === 'xpl-checkbox');
-        if (!checkboxHost &&
-            ev.target &&
-            typeof ev.target.closest === 'function') {
-            checkboxHost = ev.target.closest('xpl-checkbox');
-        }
-        if (!checkboxHost || !this.el.contains(checkboxHost))
-            return;
-        const row = checkboxHost.closest('xpl-table-row');
-        if (!row || !this.isDirectChildBodyRow(row))
-            return;
-        const cell = checkboxHost.closest('xpl-table-cell');
-        if (!cell)
-            return;
-        const selectionIdx = this.getSelectionColumnIndex();
-        if (selectionIdx === null)
-            return;
-        const bodyCells = Table.getBodyRowCells(row);
-        const colIdx = bodyCells.indexOf(cell);
-        if (colIdx !== selectionIdx)
-            return;
-        ev.stopPropagation();
-        const rowId = Table.getRowIdForRow(row);
-        if (!rowId || row.disabled)
-            return;
-        const input = checkboxHost.querySelector('input[type="checkbox"]');
-        if (!input)
-            return;
-        const { checked } = input;
-        if (checked) {
-            if (!this.selectedRowIds.includes(rowId)) {
-                this.selectedRowIds = [...this.selectedRowIds, rowId];
-            }
-        }
-        else {
-            this.selectedRowIds = this.selectedRowIds.filter((id) => id !== rowId);
-        }
-        this.applyHeaderCheckboxState();
-        this.syncRowSelectedProps();
-        this.emitCompositionalSelection();
-    }
-    handleCompositionalHeaderCheckboxChange(ev) {
-        var _a, _b;
-        if (this.isLegacyMode || !this.selectable)
-            return;
-        if (!this.isEventFromThisTable(ev.target))
-            return;
-        const path = (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) !== null && _b !== void 0 ? _b : [];
-        let headerCell = (path.length > 0 ? path : [ev.target].filter((n) => n != null)).find((n) => n instanceof HTMLElement &&
-            n.tagName.toLowerCase() === 'xpl-table-header-cell' &&
-            n.getAttribute('type') === 'checkbox');
-        if (!headerCell && ev.target && typeof ev.target.closest === 'function') {
-            headerCell = ev.target.closest('xpl-table-header-cell[type="checkbox"]');
-        }
-        if (!headerCell || !this.el.contains(headerCell))
-            return;
-        if (!this.isCellInOurCompositionalHeader(headerCell))
-            return;
-        const headerCells = this.getCompositionalHeaderCells();
-        if (!headerCells.includes(headerCell))
-            return;
-        const checked = !!ev.detail;
-        const selectableRows = this.querySelectableBodyRows();
-        const ids = selectableRows
-            .map((r) => Table.getRowIdForRow(r))
-            .filter((id) => !!id);
-        if (checked) {
-            this.selectedRowIds = [...ids];
-        }
-        else {
-            this.selectedRowIds = [];
-        }
-        this.applyBodyCheckboxStates();
-        this.syncRowSelectedProps();
-        this.emitCompositionalSelection();
-    }
-    handlePointerDownExitKeyboardReorder(ev) {
-        if (this.isLegacyMode || !this.rowReorderable || this.keyboardReorderRowId === null) {
-            return;
-        }
-        const t = ev.target;
-        if (!(t instanceof Node) || !this.el.contains(t)) {
-            return;
-        }
-        const row = t instanceof Element ? t.closest('xpl-table-row') : null;
-        if (!row || !this.isDirectChildBodyRow(row)) {
-            return;
-        }
-        this.keyboardReorderRowId = null;
-        this.syncReorderHandleKeyboardA11y(null);
-    }
-    handleReorderHandleKeyDown(ev) {
-        var _a;
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const rawPath = typeof ev.composedPath === 'function' ? ev.composedPath() : [];
-        const path = rawPath.length > 0 ? rawPath : ev.target ? [ev.target] : [];
-        let handle = path.find((n) => n instanceof HTMLElement && n.classList.contains('xpl-table__row-drag-handle'));
-        if (!handle &&
-            ev.target instanceof HTMLElement &&
-            ev.target.classList.contains('xpl-table__row-drag-handle')) {
-            handle = ev.target;
-        }
-        if (!handle || !this.el.contains(handle)) {
-            return;
-        }
-        const row = handle.closest('xpl-table-row');
-        if (!row || !this.isDirectChildBodyRow(row)) {
-            return;
-        }
-        const rowId = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
-        if (!rowId) {
-            return;
-        }
-        const isKbd = this.keyboardReorderRowId === rowId;
-        const isEscapeKey = ev.key === 'Escape' ||
-            ev.key === 'Esc' ||
-            ev.code === 'Escape' ||
-            ev.keyCode === 27;
-        if (row.disabled) {
-            if (isEscapeKey && isKbd) {
-                ev.preventDefault();
-                this.keyboardReorderRowId = null;
-                this.syncReorderHandleKeyboardA11y(null);
-            }
-            return;
-        }
-        if (isEscapeKey) {
-            if (isKbd) {
-                ev.preventDefault();
-                this.keyboardReorderRowId = null;
-                this.syncReorderHandleKeyboardA11y(null);
-            }
-            return;
-        }
-        if (!isKbd) {
-            if (ev.key === 'Enter' || ev.key === ' ') {
-                ev.preventDefault();
-                this.keyboardReorderRowId = rowId;
-                this.syncReorderHandleKeyboardA11y(rowId);
-            }
-            return;
-        }
-        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
-            ev.preventDefault();
-            const dir = ev.key === 'ArrowUp' ? 'up' : 'down';
-            this.performKeyboardRowReorder(rowId, dir);
-        }
-    }
-    handleRowReorderPointerDown(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const handle = reorderDragHandleFromEvent(ev);
-        if (!handle) {
-            return;
-        }
-        const table = handle.closest('xpl-table');
-        if (table !== this.el) {
-            return;
-        }
-        const row = bodyRowFromDragTarget(handle);
-        if (!row || row.disabled) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || row.parentElement !== body) {
-            return;
-        }
-        this.clearPendingDragListeners();
-        this.pendingDragRow = row;
-        const onPointerEnd = () => {
-            this.clearPendingDragListeners();
-            this.pendingDragRow = null;
-        };
-        document.addEventListener('pointerup', onPointerEnd, true);
-        document.addEventListener('pointercancel', onPointerEnd, true);
-        this.pointerUpClearPending = () => {
-            document.removeEventListener('pointerup', onPointerEnd, true);
-            document.removeEventListener('pointercancel', onPointerEnd, true);
-        };
-    }
-    handleRowReorderDragStart(ev) {
-        var _a;
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row) {
-            return;
-        }
-        if (row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || row.parentElement !== body) {
-            return;
-        }
-        if (row.disabled || this.pendingDragRow !== row) {
-            ev.preventDefault();
-            return;
-        }
-        this.keyboardReorderRowId = null;
-        this.syncReorderHandleKeyboardA11y(null);
-        this.clearPendingDragListeners();
-        this.pendingDragRow = null;
-        this.draggedRow = row;
-        if (ev.dataTransfer) {
-            ev.dataTransfer.effectAllowed = 'move';
-            ev.dataTransfer.setData('text/plain', (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '');
-        }
-        row.classList.add('xpl-table-row--dragging');
-    }
-    handleRowReorderDragEnd(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row || row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        row.classList.remove('xpl-table-row--dragging');
-        this.clearReorderDragOverClasses();
-        this.draggedRow = null;
-    }
-    handleRowReorderDragOver(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row || row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || row.parentElement !== body || row.disabled) {
-            return;
-        }
-        ev.preventDefault();
-        if (ev.dataTransfer) {
-            ev.dataTransfer.dropEffect = 'move';
-        }
-    }
-    handleRowReorderDragEnter(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row || row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || row.parentElement !== body || row.disabled) {
-            return;
-        }
-        ev.preventDefault();
-        row.classList.add('xpl-table-row--drag-over');
-    }
-    handleRowReorderDragLeave(ev) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        const row = tableBodyRowFromEvent(ev);
-        if (!row || row.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const related = ev.relatedTarget;
-        if (related && row.contains(related)) {
-            return;
-        }
-        row.classList.remove('xpl-table-row--drag-over');
-    }
-    handleRowReorderDrop(ev) {
-        var _a;
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        ev.preventDefault();
-        const dropRow = tableBodyRowFromEvent(ev);
-        if (!dropRow || dropRow.closest('xpl-table') !== this.el) {
-            return;
-        }
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body || dropRow.parentElement !== body || dropRow.disabled) {
-            return;
-        }
-        const source = this.draggedRow;
-        if (!source || source.disabled) {
-            this.draggedRow = null;
-            this.clearReorderDragOverClasses();
-            return;
-        }
-        if (source === dropRow) {
-            this.clearReorderDragOverClasses();
-            return;
-        }
-        const visible = this.getVisibleBodyRowsForReorder();
-        const fromIndex = visible.indexOf(source);
-        const toIndex = visible.indexOf(dropRow);
-        if (fromIndex === -1 || toIndex === -1) {
-            this.clearReorderDragOverClasses();
-            return;
-        }
-        const direction = fromIndex > toIndex ? 'up' : 'down';
-        const rowId = (_a = Table.getRowIdForRow(source)) !== null && _a !== void 0 ? _a : '';
-        const runMove = () => {
-            moveRowInTableBody(body, source, dropRow);
-        };
-        runMove();
-        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => { var _a; return (_a = Table.getRowIdForRow(r)) !== null && _a !== void 0 ? _a : ''; });
-        this.rowOrderChange.emit({
-            rowId,
-            direction,
-            orderedRowIds,
-            fromIndex,
-            toIndex,
-        });
-        this.announceRowReorder(rowId, orderedRowIds);
-        this.clearReorderDragOverClasses();
-        if (this.selectable) {
-            this.applyBodyCheckboxStates();
-            this.applyHeaderCheckboxState();
-            this.syncRowSelectedProps();
-        }
-        this.updateColumnWidths();
-    }
-    get isLegacyMode() {
-        return this.columns !== undefined || this.data !== undefined || this.footer !== undefined;
-    }
-    ensureTableInstanceId() {
-        if (this.tableInstanceId)
-            return;
-        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-            this.tableInstanceId = crypto.randomUUID();
-        }
-        else {
-            this.tableInstanceId = Math.random().toString(36).slice(2);
-        }
-    }
-    generateRowId() {
-        this.ensureTableInstanceId();
-        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-            return `${this.tableInstanceId}-${crypto.randomUUID()}`;
-        }
-        return `${this.tableInstanceId}-${Math.random().toString(36).slice(2)}`;
-    }
-    syncCompositionalLayout() {
-        if (this.isLegacyMode)
-            return;
-        if (this.rowReorderable) {
-            this.syncReorderColumn();
-        }
-        else {
-            this.removeManagedReorderCells();
-        }
-        if (this.selectable) {
-            this.ensureTableInstanceId();
-            this.pruneStaleSelectedRowIds();
-            this.ensureBodyRowIds();
-            this.applyBodyCheckboxStates();
-            this.applyHeaderCheckboxState();
-            this.syncRowSelectedProps();
-        }
-        if (this.rowReorderable && this.selectable) {
-            this.normalizeManagedColumnsOrder();
-        }
-        this.updateColumnWidths();
-    }
-    getDirectChildTableSection(tag) {
-        var _a;
-        const el = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === tag);
-        return (_a = el) !== null && _a !== void 0 ? _a : null;
-    }
-    isDirectChildBodyRow(row) {
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        return body !== null && row.parentElement === body;
-    }
-    isCellInOurCompositionalHeader(cell) {
-        const header = cell.closest('xpl-table-header');
-        return header !== null && header.parentElement === this.el;
-    }
-    getSelectionColumnIndex() {
-        const headerCells = this.getCompositionalHeaderCells();
-        const idx = headerCells.findIndex((c) => c.getAttribute('type') === 'checkbox');
-        return idx >= 0 ? idx : null;
-    }
-    static getBodyRowCells(row) {
-        return Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell');
-    }
-    queryBodyRows() {
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body)
-            return [];
-        return Array.from(body.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-row');
-    }
-    querySelectableBodyRows() {
-        return this.queryBodyRows().filter((row) => !row.disabled);
-    }
-    static getRowIdForRow(row) {
-        var _a;
-        const id = (_a = row.getAttribute('row-id')) === null || _a === void 0 ? void 0 : _a.trim();
-        return id || null;
-    }
-    ensureBodyRowIds() {
-        this.queryBodyRows().forEach((row) => {
-            if (Table.getRowIdForRow(row))
-                return;
-            row.setAttribute('row-id', this.generateRowId());
-        });
-    }
-    removeManagedReorderCells() {
-        this.el.querySelectorAll(`[${ROW_REORDER_MARK}]`).forEach((node) => {
-            var _a;
-            if (!(node instanceof Element))
-                return;
-            if (node.closest('xpl-table') !== this.el)
-                return;
-            (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-        });
-    }
-    getSelectionSlotCellForReorderOrder(row) {
-        const idx = this.getSelectionColumnIndex();
-        if (idx === null) {
-            return null;
-        }
-        const cells = Array.from(row.children);
-        const cell = cells[idx];
-        if (!cell) {
-            return null;
-        }
-        const tag = cell.tagName.toLowerCase();
-        if (tag === 'xpl-table-header-cell') {
-            return cell.getAttribute('type') === 'checkbox' ? cell : null;
-        }
-        if (tag === 'xpl-table-cell') {
-            if (cell.hasAttribute(SELECTION_MARK)) {
-                return cell;
-            }
-            return cell.querySelector('xpl-checkbox') ? cell : null;
-        }
-        if (tag === 'xpl-table-footer-cell') {
-            return cell;
-        }
-        return null;
-    }
-    normalizeManagedColumnsOrder() {
-        var _a;
-        const fix = (row) => {
-            const re = row.querySelector(`:scope > [${ROW_REORDER_MARK}]`);
-            const se = this.getSelectionSlotCellForReorderOrder(row);
-            if (!re || !se) {
-                return;
-            }
-            const siblings = Array.from(row.children);
-            const iRe = siblings.indexOf(re);
-            const iSe = siblings.indexOf(se);
-            if (iRe > iSe) {
-                row.insertBefore(re, se);
-            }
-        };
-        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
-        if (header) {
-            const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
-            const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
-            fix(container);
-        }
-        this.queryBodyRows().forEach((row) => fix(row));
-        const footer = this.getDirectChildTableSection('xpl-table-footer');
-        if (footer) {
-            Array.from(footer.children)
-                .filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
-                .forEach((row) => fix(row));
-        }
-    }
-    syncReorderColumn() {
-        if (!this.rowReorderable || this.isLegacyMode)
-            return;
-        this.ensureBodyRowIds();
-        this.ensureHeaderReorderCell();
-        this.ensureBodyReorderCells();
-        this.ensureFooterReorderCells();
-        this.applyReorderRowDraggableState();
-    }
-    ensureHeaderReorderCell() {
-        var _a;
-        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
-        if (!header)
-            return;
-        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
-        const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
-        if (Array.from(container.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell' &&
-            c.hasAttribute(ROW_REORDER_MARK))) {
-            return;
-        }
-        const cell = document.createElement('xpl-table-header-cell');
-        cell.setAttribute(ROW_REORDER_MARK, '');
-        cell.setAttribute('type', 'empty');
-        cell.setAttribute('width', '48');
-        cell.setAttribute('align', 'center');
-        container.insertBefore(cell, container.firstChild);
-    }
-    ensureBodyReorderCells() {
-        this.queryBodyRows().forEach((row) => {
-            var _a;
-            const managed = Array.from(row.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-cell' &&
-                c.hasAttribute(ROW_REORDER_MARK));
-            if (managed.length > 1) {
-                for (let i = 1; i < managed.length; i += 1) {
-                    managed[i].remove();
-                }
-            }
-            let cell = managed[0];
-            if (!cell) {
-                const newCell = document.createElement('xpl-table-cell');
-                newCell.setAttribute(ROW_REORDER_MARK, '');
-                newCell.setAttribute('width', '48');
-                newCell.setAttribute('align', 'center');
-                const btn = document.createElement('button');
-                btn.type = 'button';
-                btn.className = 'xpl-table__row-drag-handle';
-                btn.setAttribute('aria-label', 'Reorder row');
-                btn.setAttribute('aria-pressed', 'false');
-                const iconName = this.getResolvedIconForRow((_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '');
-                if (iconName) {
-                    const icon = document.createElement('xpl-icon');
-                    icon.setAttribute('icon', iconName);
-                    icon.setAttribute('size', '16');
-                    btn.appendChild(icon);
-                }
-                newCell.appendChild(btn);
-                row.insertBefore(newCell, row.firstChild);
-                cell = newCell;
-            }
-            else {
-                cell.setAttribute('align', 'center');
-            }
-            const btn = cell.querySelector('.xpl-table__row-drag-handle');
-            if (btn) {
-                btn.disabled = row.disabled;
-            }
-        });
-        this.syncInjectedReorderHandleIcons();
-        this.attachReorderHandleKeydownListeners();
-    }
-    getResolvedIconForRow(rowId) {
-        var _a, _b;
-        const inKeyboardMode = this.keyboardReorderRowId !== null &&
-            rowId !== '' &&
-            rowId === this.keyboardReorderRowId;
-        if (inKeyboardMode) {
-            if (this.reorderHandleIconKeyboard === '') {
-                return null;
-            }
-            return (_a = this.reorderHandleIconKeyboard) !== null && _a !== void 0 ? _a : 'caret-expand-y';
-        }
-        if (this.reorderHandleIcon === '') {
-            return null;
-        }
-        return (_b = this.reorderHandleIcon) !== null && _b !== void 0 ? _b : 'grip-dots-vertical';
-    }
-    syncInjectedReorderHandleIcons() {
-        this.queryBodyRows().forEach((row) => {
-            var _a;
-            const btn = row.querySelector('.xpl-table__row-drag-handle');
-            if (!btn) {
-                return;
-            }
-            const rowId = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
-            const iconName = this.getResolvedIconForRow(rowId);
-            btn.querySelectorAll('xpl-icon').forEach((n) => n.remove());
-            if (iconName) {
-                const icon = document.createElement('xpl-icon');
-                icon.setAttribute('icon', iconName);
-                icon.setAttribute('size', '16');
-                btn.appendChild(icon);
-            }
-        });
-    }
-    syncReorderHandleKeyboardA11y(activeId) {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        this.queryBodyRows().forEach((row) => {
-            var _a;
-            const btn = row.querySelector('.xpl-table__row-drag-handle');
-            if (!btn) {
-                return;
-            }
-            const rid = (_a = Table.getRowIdForRow(row)) !== null && _a !== void 0 ? _a : '';
-            const isActive = activeId !== null && rid === activeId;
-            btn.classList.toggle('xpl-table__row-drag-handle--keyboard-mode', isActive);
-            btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
-            btn.setAttribute('aria-label', isActive
-                ? 'Press arrow up or down to reorder, Escape to exit'
-                : 'Press Enter or Space to activate keyboard reorder mode, or drag to reorder');
-        });
-        this.syncInjectedReorderHandleIcons();
-    }
-    attachReorderHandleKeydownListeners() {
-        if (this.isLegacyMode || !this.rowReorderable) {
-            return;
-        }
-        this.queryBodyRows().forEach((row) => {
-            const btn = row.querySelector('.xpl-table__row-drag-handle');
-            if (!btn || btn.dataset.xplReorderKbdBound === 'true') {
-                return;
-            }
-            btn.dataset.xplReorderKbdBound = 'true';
-            btn.addEventListener('keydown', this.onReorderHandleKeydown);
-        });
-    }
-    detachReorderHandleKeydownListeners() {
-        if (!this.el) {
-            return;
-        }
-        this.el
-            .querySelectorAll('.xpl-table__row-drag-handle[data-xpl-reorder-kbd-bound="true"]')
-            .forEach((btn) => {
-            btn.removeEventListener('keydown', this.onReorderHandleKeydown);
-            delete btn.dataset.xplReorderKbdBound;
-        });
-    }
-    performKeyboardRowReorder(rowId, direction) {
-        const body = this.getDirectChildTableSection('xpl-table-body');
-        if (!body) {
-            return false;
-        }
-        const visible = this.getVisibleBodyRowsForReorder();
-        const itemIndex = visible.findIndex((r) => Table.getRowIdForRow(r) === rowId);
-        if (itemIndex === -1) {
-            return false;
-        }
-        const targetIndex = direction === 'up' ? itemIndex - 1 : itemIndex + 1;
-        if (targetIndex < 0 || targetIndex >= visible.length) {
-            return false;
-        }
-        const fromIndex = itemIndex;
-        const item = visible[itemIndex];
-        const targetItem = visible[targetIndex];
-        if (direction === 'up') {
-            body.insertBefore(item, targetItem);
-        }
-        else {
-            const nextVisible = getNextVisibleTableBodyRowAfter(targetItem);
-            if (nextVisible) {
-                body.insertBefore(item, nextVisible);
-            }
-            else {
-                body.appendChild(item);
-            }
-        }
-        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => { var _a; return (_a = Table.getRowIdForRow(r)) !== null && _a !== void 0 ? _a : ''; });
-        const toIndex = orderedRowIds.indexOf(rowId);
-        this.rowOrderChange.emit({
-            rowId,
-            direction,
-            orderedRowIds,
-            fromIndex,
-            toIndex,
-        });
-        this.announceRowReorder(rowId, orderedRowIds);
-        this.clearReorderDragOverClasses();
-        if (this.selectable) {
-            this.applyBodyCheckboxStates();
-            this.applyHeaderCheckboxState();
-            this.syncRowSelectedProps();
-        }
-        this.updateColumnWidths();
-        this.reorderKeyboardTimers.requestAnimationFrame(() => {
-            if (!this.el.isConnected) {
-                return;
-            }
-            const moved = this.getVisibleBodyRowsForReorder().find((r) => Table.getRowIdForRow(r) === rowId);
-            const btn = moved === null || moved === void 0 ? void 0 : moved.querySelector('.xpl-table__row-drag-handle');
-            btn === null || btn === void 0 ? void 0 : btn.focus();
-        });
-        return true;
-    }
-    ensureFooterReorderCells() {
-        const footer = this.getDirectChildTableSection('xpl-table-footer');
-        if (!footer)
-            return;
-        Array.from(footer.children)
-            .filter((c) => c.tagName.toLowerCase() === 'xpl-table-row')
-            .forEach((row) => {
-            if (Array.from(row.children).some((c) => c.tagName.toLowerCase() === 'xpl-table-footer-cell' &&
-                c.hasAttribute(ROW_REORDER_MARK))) {
-                return;
-            }
-            const cell = document.createElement('xpl-table-footer-cell');
-            cell.setAttribute(ROW_REORDER_MARK, '');
-            cell.setAttribute('width', '48');
-            cell.setAttribute('align', 'center');
-            row.insertBefore(cell, row.firstChild);
-        });
-    }
-    static supportsSubgridBodyRow() {
-        return (typeof CSS !== 'undefined' &&
-            typeof CSS.supports === 'function' &&
-            CSS.supports('grid-template-columns', 'subgrid'));
-    }
-    applyReorderRowDraggableState() {
-        const useRowDrag = Table.supportsSubgridBodyRow();
-        this.queryBodyRows().forEach((row) => {
-            const btn = row.querySelector('.xpl-table__row-drag-handle');
-            btn === null || btn === void 0 ? void 0 : btn.removeAttribute('draggable');
-            row.removeAttribute('draggable');
-            if (!this.rowReorderable || row.disabled) {
-                return;
-            }
-            if (!btn) {
-                return;
-            }
-            if (useRowDrag) {
-                row.setAttribute('draggable', 'true');
-            }
-            else {
-                btn.setAttribute('draggable', 'true');
-            }
-        });
-    }
-    getVisibleBodyRowsForReorder() {
-        return this.queryBodyRows().filter((r) => !r.hasAttribute('hidden'));
-    }
-    clearReorderDragOverClasses() {
-        this.queryBodyRows().forEach((r) => r.classList.remove('xpl-table-row--drag-over'));
-    }
-    clearPendingDragListeners() {
-        if (this.pointerUpClearPending) {
-            this.pointerUpClearPending();
-            this.pointerUpClearPending = null;
-        }
-    }
-    announceRowReorder(movedRowId, orderedRowIds) {
-        if (!this.rowReorderable || !movedRowId) {
-            return;
-        }
-        const index = orderedRowIds.indexOf(movedRowId);
-        if (index < 0) {
-            return;
-        }
-        this.reorderLiveMessage = '';
-        if (this.reorderAnnounceRaf !== undefined) {
-            cancelAnimationFrame(this.reorderAnnounceRaf);
-        }
-        this.reorderAnnounceRaf = requestAnimationFrame(() => {
-            this.reorderAnnounceRaf = undefined;
-            if (!this.el.isConnected) {
-                return;
-            }
-            this.reorderLiveMessage = `Row ${movedRowId}, now position ${index + 1} of ${orderedRowIds.length}`;
-        });
-    }
-    pruneStaleSelectedRowIds() {
-        const validIds = new Set(this.queryBodyRows()
-            .map((r) => Table.getRowIdForRow(r))
-            .filter((id) => !!id));
-        const next = this.selectedRowIds.filter((id) => validIds.has(id));
-        if (next.length === this.selectedRowIds.length)
-            return;
-        this.selectedRowIds = next;
-        this.applyBodyCheckboxStates();
-        this.applyHeaderCheckboxState();
-        this.syncRowSelectedProps();
-        this.emitCompositionalSelection();
-    }
-    static getBodyRowCheckboxAriaLabel(row, selectionColIndex) {
-        var _a, _b;
-        const cells = Table.getBodyRowCells(row);
-        const labelCell = cells.find((c, i) => (selectionColIndex === null || i !== selectionColIndex) &&
-            !c.hasAttribute(ROW_REORDER_MARK));
-        const first = labelCell !== null && labelCell !== void 0 ? labelCell : cells[0];
-        if (!first)
-            return 'Select row';
-        const raw = (_b = (_a = first.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ').trim()) !== null && _b !== void 0 ? _b : '';
-        if (!raw)
-            return 'Select row';
-        const truncated = raw.length > 100 ? `${raw.slice(0, 100)}…` : raw;
-        return `Select row, ${truncated}`;
-    }
-    applyBodyCheckboxStates() {
-        const selectionIdx = this.getSelectionColumnIndex();
-        if (selectionIdx === null)
-            return;
-        this.queryBodyRows().forEach((row) => {
-            const rowId = Table.getRowIdForRow(row);
-            const cells = Table.getBodyRowCells(row);
-            const cell = cells[selectionIdx];
-            const cb = cell === null || cell === void 0 ? void 0 : cell.querySelector('xpl-checkbox');
-            if (!cb || !rowId)
-                return;
-            cb.checked = this.selectedRowIds.includes(rowId);
-            cb.disabled = row.disabled;
-            cb.value = rowId;
-            cb.setAttribute('aria-label', Table.getBodyRowCheckboxAriaLabel(row, selectionIdx));
-        });
-    }
-    getHeaderCheckboxCell() {
-        const idx = this.getSelectionColumnIndex();
-        if (idx === null)
-            return null;
-        const cells = this.getCompositionalHeaderCells();
-        const cell = cells[idx];
-        if (!cell || cell.getAttribute('type') !== 'checkbox')
-            return null;
-        return cell;
-    }
-    applyHeaderCheckboxState() {
-        const cell = this.getHeaderCheckboxCell();
-        if (!cell)
-            return;
-        const selectableRows = this.querySelectableBodyRows();
-        const ids = selectableRows
-            .map((r) => Table.getRowIdForRow(r))
-            .filter((id) => !!id);
-        const selectedCount = ids.filter((id) => this.selectedRowIds.includes(id)).length;
-        const allSelected = ids.length > 0 && selectedCount === ids.length;
-        const indeterminate = selectedCount > 0 && !allSelected;
-        cell.checked = allSelected;
-        cell.indeterminate = indeterminate;
-    }
-    syncRowSelectedProps() {
-        this.queryBodyRows().forEach((row) => {
-            const id = Table.getRowIdForRow(row);
-            const selected = id ? this.selectedRowIds.includes(id) : false;
-            row.selected = selected;
-        });
-    }
-    emitCompositionalSelection() {
-        const ids = this.selectedRowIds;
-        const key = ids.join('\u0001');
-        if (key === this.lastEmittedRowSelectionKey) {
-            return;
-        }
-        this.lastEmittedRowSelectionKey = key;
-        this.rowSelectionChange.emit({ selectedRowIds: [...ids] });
-    }
-    isEventFromThisTable(target) {
-        if (target == null || typeof target !== 'object')
-            return false;
-        const t = target;
-        const start = 'closest' in t && typeof t.closest === 'function'
-            ? t
-            : 'parentElement' in t
-                ? t.parentElement
-                : null;
-        if (!start)
-            return false;
-        const nearest = start.closest('xpl-table');
-        return nearest === this.el;
-    }
-    static sortKeyFromHeaderCell(cell, columnIndex) {
-        var _a, _b;
-        const c = cell;
-        const raw = ((_b = (_a = c.sortKey) !== null && _a !== void 0 ? _a : c.label) !== null && _b !== void 0 ? _b : '').trim();
-        if (raw.length > 0) {
-            return raw.replace(/ /g, '-').toLowerCase();
-        }
-        return `column-${columnIndex}`;
-    }
-    handleCompositionalHeaderSort(ev) {
-        var _a;
-        if (this.isLegacyMode)
-            return;
-        if (!this.isEventFromThisTable(ev.target))
-            return;
-        const source = ev.target;
-        const headerRow = (_a = source.closest('xpl-table-header xpl-table-row')) !== null && _a !== void 0 ? _a : source.closest('xpl-table-row');
-        if (!headerRow || !this.el.contains(headerRow))
-            return;
-        const cells = Array.from(headerRow.querySelectorAll('xpl-table-header-cell'));
-        const { columnIndex } = ev.detail;
-        const target = cells[columnIndex];
-        if (!(target === null || target === void 0 ? void 0 : target.sortable))
-            return;
-        const next = cycleSortDirection(target.sortDirection);
-        cells.forEach((cell, i) => {
-            const hc = cell;
-            if (!hc.sortable)
+const getIconType = (sortType) => {
+    switch (sortType) {
+        case 'asc':
+            return 'arrow-up';
+        case 'desc':
+            return 'arrow-down';
+        default:
+            return 'dash';
+    }
+};
+export class Table {
+    constructor() {
+        this.selectedValues = [];
+        this.isSortable = false;
+        this.sortableColumns = [];
+        this.areAllSelected = false;
+        this.hasScrolled = false;
+        this.sortTypeArray = [];
+        this.selectAllValue = Math.random().toString(36).slice(2);
+        this.selectAll = (e) => {
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
                 return;
-            hc.sortDirection = i === columnIndex ? next : null;
-        });
-        const sortState = {};
-        cells.forEach((cell, i) => {
-            var _a;
-            const hc = cell;
-            if (!hc.sortable)
+            const { checked } = target;
+            this.areAllSelected = checked;
+            this.selected =
+                this.selectedValues.length > 0
+                    ?
+                        Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => checked ? input === null || input === void 0 ? void 0 : input.value : checked)
+                    : this.selected.map(() => checked);
+            this.onChange();
+        };
+        this.selectOne = (e, checkboxIdx) => {
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
                 return;
-            sortState[Table.sortKeyFromHeaderCell(hc, i)] = (_a = hc.sortDirection) !== null && _a !== void 0 ? _a : null;
-        });
-        const sortTypeArr = cells.map((cell) => {
-            var _a;
-            const hc = cell;
-            return hc.sortable ? ((_a = hc.sortDirection) !== null && _a !== void 0 ? _a : null) : null;
-        });
-        const colName = Table.sortKeyFromHeaderCell(cells[columnIndex], columnIndex);
-        const detail = Object.assign(Object.assign({}, sortState), { colNum: columnIndex, colName,
-            sortTypeArr });
-        this.sortChanged.emit(detail);
-    }
-    legacySortStatePayload() {
-        var _a;
-        const out = {};
-        if (!((_a = this.columns) === null || _a === void 0 ? void 0 : _a.length))
-            return out;
-        this.columns.forEach((col, i) => {
-            var _a;
-            const key = col.replace(/ /g, '-').toLowerCase();
-            out[key] = (_a = this.sortTypeArray[i]) !== null && _a !== void 0 ? _a : null;
-        });
-        return out;
-    }
-    legacySortChangedDetail(colNum) {
-        var _a, _b;
-        const base = this.legacySortStatePayload();
-        const title = (_b = (_a = this.columns) === null || _a === void 0 ? void 0 : _a[colNum]) !== null && _b !== void 0 ? _b : '';
-        const colName = title.replace(/ /g, '-').toLowerCase();
-        return Object.assign(Object.assign({}, base), { colNum,
-            colName, sortTypeArr: [...this.sortTypeArray] });
-    }
-    getCompositionalHeaderCells() {
-        var _a;
-        const header = (_a = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header')) !== null && _a !== void 0 ? _a : null;
-        if (!header)
-            return [];
-        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
-        const container = firstRow !== null && firstRow !== void 0 ? firstRow : header;
-        return Array.from(container.children).filter((c) => c.tagName.toLowerCase() === 'xpl-table-header-cell');
-    }
-    updateColumnWidths() {
-        const headerCells = this.getCompositionalHeaderCells();
-        const columnWidths = headerCells.map((cell) => getGridColumnWidthFromHeaderCell(cell));
-        const next = columnWidths.join(' ');
-        const n = headerCells.length;
-        if (n === this.colCount && this.colCount > 0 && this.columnWidthsToken === next) {
-            return;
-        }
-        this.el.style.setProperty('--column-widths', next);
-        this.colCount = n;
-        this.columnWidthsToken = next;
+            const { checked, value } = target;
+            this.areAllSelected = false;
+            this.selected = this.selected.map((v, selectedIdx) => {
+                if (selectedIdx !== checkboxIdx)
+                    return v;
+                return this.selectedValues.length > 0 ? (checked ? value : checked) : checked;
+            });
+            this.onChange();
+        };
+        this.onChange = () => {
+            this.tableSelect.emit({
+                selected: this.selected,
+                areAllSelected: this.areAllSelected,
+            });
+        };
+        this.onScroll = () => {
+            this.hasScrolled = this.container.scrollLeft > 0;
+        };
+        this.sortBy = (col, sortTypeArray) => {
+            const handleSort = (a, b) => {
+                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase()) {
+                    return -1;
+                }
+                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {
+                    return 1;
+                }
+                return 0;
+            };
+            switch (sortTypeArray[col]) {
+                case 'asc':
+                    this.rowData.sort((a, b) => handleSort(a, b));
+                    break;
+                case 'desc':
+                    this.rowData.sort((a, b) => handleSort(b, a));
+                    break;
+                default:
+                    this.rowData = this.data;
+                    this.sortTypeArray[col] = null;
+                    break;
+            }
+            this.rowData = Array.from(this.rowData);
+            this.render();
+        };
+        this.setData = () => {
+            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+        };
+        this.setFooterData = () => {
+            this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
+        };
     }
-    handleSort(clickEvt, isColumnSortable, colNum) {
+    handleSort(clickEvt, isColumnSortable, colNum, colName) {
         clickEvt.preventDefault();
         clickEvt.stopPropagation();
         if (!isColumnSortable)
@@ -1158,57 +102,57 @@ export class Table {
                     return 'asc';
             }
         });
-        const evt = this.sortChanged.emit(this.legacySortChangedDetail(colNum));
+        const evt = this.sortChanged.emit({
+            colNum,
+            colName,
+            sortTypeArr: this.sortTypeArray,
+        });
         if (!evt.defaultPrevented)
             this.sortBy(colNum, this.sortTypeArray);
     }
-    renderLegacy() {
+    watchData() {
+        this.setData();
+    }
+    watchFooterData() {
+        this.setFooterData();
+    }
+    watchColumns() {
+        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+    }
+    componentWillLoad() {
+        this.areAllSelected = false;
+        this.setData();
+        this.setFooterData();
+        this.selected = new Array(this.rowData.length).fill(false);
+        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+    }
+    render() {
         var _a;
         if (this.columns &&
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        return (h(Host, null, h("div", { class: "xpl-table-container", onScroll: this.onLegacyScroll, ref: (el) => {
+        return (h(Host, { key: '10b0bfd08e28fada9a2c8509d405c5314cce1689' }, h("div", { key: '8e5b4fe928618b175a58f858f6cfd65f4bd29c53', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, h("table", { class: {
+            } }, h("table", { key: 'a6df646737b9a1d5e67cebe9eaad41911ab606ca', class: {
                 'xpl-table': true,
-                'xpl-table--legacy': true,
                 'xpl-table--striped': this.striped,
                 'xpl-table--freeze': this.freeze,
                 'xpl-table--has-scrolled': this.hasScrolled,
-            } }, this.columns && (h("thead", null, this.columns.map((column, i) => {
-            var _a, _b;
-            const iconType = getIconType((_b = (_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : null);
+            } }, this.columns && (h("thead", { key: '5f14766107d69f26b865f63c323d417f43260267' }, this.columns.map((column, i) => {
+            var _a;
+            const iconType = getIconType((_a = this.sortTypeArray) === null || _a === void 0 ? void 0 : _a[i]);
             const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
-            return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("input", { checked: this.areAllSelected, id: "__xpl-table-th", indeterminate: !this.areAllSelected &&
+            return (h("th", null, h("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (h("input", { checked: this.areAllSelected, id: "__xpl-table-th", indeterminate: !this.areAllSelected &&
                     this.selected.some((a) => a), onClick: (e) => {
                     e.stopPropagation();
                     this.selectAll(e);
                 }, type: "checkbox", value: `select-all-${this.selectAllValue}` })), column, isColumnSortable && !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), h("tbody", null, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
+        }))), h("tbody", { key: 'b13ca1d1a738de189d4f040dfd309187671b341d' }, this.rowData.map((row, rowNum) => (h("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
                 : '' }, row.map((cell, i) => (h("td", null, this.multiselect && i === 0 ? (h("label", { htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", null, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
-    }
-    renderCompositional() {
-        const selectionToolbarCount = this.selectedRowIds.length;
-        return (h(Host, { role: "grid", "aria-label": this.label, "aria-colcount": this.colCount > 0 ? this.colCount : undefined, class: {
-                'xpl-table': true,
-                'xpl-table--striped': this.striped,
-                'xpl-table--freeze': this.freeze,
-                'xpl-table--has-scrolled': this.hasScrolled,
-                'xpl-table--selectable': !!this.selectable,
-                'xpl-table--selection-active': !!this.selectable && this.selectedRowIds.length > 0,
-                'xpl-table--row-reorderable': !!this.rowReorderable,
-            }, onScroll: this.onGridScroll }, this.rowReorderable && (h("div", { class: "xpl-table__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)), this.selectable && (h("div", { class: {
-                'xpl-toolbar': true,
-                hidden: selectionToolbarCount === 0,
-                'xpl-table__toolbar': true,
-            } }, h("div", { class: "toolbar" }, h("p", { class: "selected-item-count" }, selectionToolbarCount, " Selected"), h("div", { class: "actions" }, h("slot", { name: "toolbar-actions-left" }), h("slot", { name: "toolbar-actions-right" }))))), h("slot", null)));
-    }
-    render() {
-        return this.isLegacyMode ? this.renderLegacy() : this.renderCompositional();
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))))))))), ((_a = this.rowFooterData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("tfoot", { key: '5d45854ba21aa7e0bfaaf3b8a537e0c121538ac9' }, this.rowFooterData.map((row) => (h("tr", null, row.map((cell) => (h("td", null, h("div", { innerHTML: cell })))))))))))));
     }
     static get is() { return "xpl-table"; }
     static get properties() {
@@ -1224,11 +168,8 @@ export class Table {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.\n\nThe header values for each column."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The header values for each column."
                 },
                 "getter": false,
                 "setter": false
@@ -1244,11 +185,8 @@ export class Table {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.\n\nThe data for the body of the table."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The data for the body of the table."
                 },
                 "getter": false,
                 "setter": false
@@ -1264,11 +202,8 @@ export class Table {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.\n\nThe data for the footer of the table."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The data for the footer of the table."
                 },
                 "getter": false,
                 "setter": false
@@ -1285,14 +220,14 @@ export class Table {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "When true, the first **data** column (per row) is sticky during horizontal scroll.\nLeading compositional columns are skipped: `selectable` (checkbox) and/or `row-reorderable`\n(grip) are not frozen so they scroll with the grid; the next column stays pinned at `left: 0`."
+                    "text": "When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "freeze"
             },
-            "isSortable": {
+            "multiselect": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1302,39 +237,16 @@ export class Table {
                 },
                 "required": false,
                 "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Legacy data-driven table API only. May be removed in a future major release.\n\nToggles to show the sort button on each table head."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-sortable",
-                "defaultValue": "false"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Accessible label for the table. Maps to `aria-label` in compositional mode."
+                    "text": "Toggles a selectable checkbox for each row in the table"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label"
+                "attribute": "multiselect"
             },
-            "multiselect": {
+            "striped": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1344,76 +256,34 @@ export class Table {
                 },
                 "required": false,
                 "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Legacy data-driven table API only. May be removed in a future major release.\n\nToggles a selectable checkbox for each row in the table."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "multiselect"
-            },
-            "reorderHandleIcon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Icon name for the optional `xpl-icon` inside each **managed** reorder grip when the row is **not** in\nkeyboard reorder mode (pointer / idle). Set to `\"\"` to omit the icon so you can style the button or author a\nfully custom reorder column in markup. When omitted, defaults to `grip-dots-vertical`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "reorder-handle-icon"
-            },
-            "reorderHandleIconKeyboard": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Icon name for the managed reorder grip **while that row is in keyboard reorder mode** (after the user\nactivates the grip with Enter or Space). Use a different icon than `reorder-handle-icon` so users can see\nthey should use arrow keys. When omitted, defaults to `caret-expand-y` (same as `xpl-list` keyboard reorder).\nSet to `\"\"` to show no icon in keyboard mode only (combine with CSS on\n`.xpl-table__row-drag-handle--keyboard-mode` if needed)."
+                    "text": "Toggles an optional styling of the background of each even row of the table body."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "reorder-handle-icon-keyboard"
+                "attribute": "striped"
             },
-            "rowReorderable": {
-                "type": "boolean",
+            "selectedValues": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string[]",
+                    "resolved": "string[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "When true (compositional mode only), **prepends** a managed reorder column as the **first** grid\ncolumn (empty header + grip button per body row) and enables HTML5 drag-and-drop row reordering\n(same interaction model as `xpl-list`). With `selectable`, DOM order is **reorder | selection |\ndata** unless you author a custom reorder column. The table updates the DOM and emits\n`rowOrderChange`; consumers should persist order if needed. Ignored in legacy `columns`/`data` mode."
+                    "text": "The values for the input for each row when multiselect is activated."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "row-reorderable"
+                "defaultValue": "[]"
             },
-            "selectable": {
+            "isSortable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1425,33 +295,13 @@ export class Table {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "When true (compositional mode only), enables row selection state, the selection toolbar\n(\u201CN Selected\u201D), and `rowSelectionChange`. **You must add the selection column in your\nmarkup:** a header cell with `type=\"checkbox\"`, a body cell containing `xpl-checkbox` per row\n(aligned with that column), and matching `xpl-table-footer-cell` cells when you use a footer.\nEach body row should use `row-id` on `xpl-table-row` (or accept auto-generated ids) so\n`rowSelectionChange` can report `selectedRowIds`.\n\nThe toolbar uses the same layout as `xpl-toolbar` and is visible only while at least one row\nis selected. Use `toolbar-actions-left` / `toolbar-actions-right` slots on this host for bulk\nactions."
+                    "text": "Toggles to show the sort button on each table head"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "selectable"
-            },
-            "selectedValues": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Legacy data-driven table API only. May be removed in a future major release.\n\nThe values for the input for each row when multiselect is activated."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
+                "attribute": "is-sortable",
+                "defaultValue": "false"
             },
             "sortableColumns": {
                 "type": "unknown",
@@ -1463,87 +313,40 @@ export class Table {
                 },
                 "required": false,
                 "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the compositional slot-based API instead. Will be removed in a future major release.\n\nManually determined if the column is sortable."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "striped": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Toggles an optional styling of the background of each even row of the\ntable body."
+                    "text": "Manually determined if the column is sortable"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "striped"
+                "defaultValue": "[]"
             }
         };
     }
     static get states() {
         return {
             "areAllSelected": {},
-            "colCount": {},
-            "hasScrolled": {},
-            "keyboardReorderRowId": {},
-            "reorderLiveMessage": {},
             "rowData": {},
             "rowFooterData": {},
+            "hasScrolled": {},
             "selected": {},
-            "selectedRowIds": {},
             "sortTypeArray": {}
         };
     }
     static get events() {
         return [{
-                "method": "rowOrderChange",
-                "name": "rowOrderChange",
-                "bubbles": false,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after body rows are reordered via drag-and-drop (compositional `row-reorderable` mode)."
-                },
-                "complexType": {
-                    "original": "XplTableRowOrderChangeDetail",
-                    "resolved": "XplTableRowOrderChangeDetail",
-                    "references": {
-                        "XplTableRowOrderChangeDetail": {
-                            "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-table/xpl-table.tsx",
-                            "id": "src/components/components/xpl-table/xpl-table.tsx::XplTableRowOrderChangeDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "rowSelectionChange",
-                "name": "rowSelectionChange",
-                "bubbles": false,
+                "method": "tableSelect",
+                "name": "tableSelect",
+                "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when row selection changes in compositional `selectable` mode.\nListen on this `xpl-table` instance only; the event does not bubble to parents\u2014use\n`table.addEventListener('rowSelectionChange', \u2026)` on the same element. When wiring from a\nscript in static HTML, wait for `customElements.whenDefined('xpl-table')` so the host is ready.\n(Named `rowSelectionChange` to avoid clashing with the native `selectionchange` event.)"
+                    "text": "Callback function that is called when the checkbox for a row of a\n`multiselect` table is checked"
                 },
                 "complexType": {
-                    "original": "{ selectedRowIds: string[] }",
-                    "resolved": "{ selectedRowIds: string[]; }",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 }
             }, {
@@ -1554,32 +357,11 @@ export class Table {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when sort changes in **legacy** or **compositional** mode. `event.detail` is a plain\nobject: **sort-key slug \u2192 `'asc' | 'desc' | null`** (null = that column not sorted). Keys match\nlegacy column titles (slugified) or compositional `sort-key` / label slugs. Call\n`event.preventDefault()` in legacy mode to skip built-in row sorting; compositional tables do\nnot reorder rows automatically."
-                },
-                "complexType": {
-                    "original": "XplTableSortChangedDetail",
-                    "resolved": "XplTableSortChangedDetail",
-                    "references": {
-                        "XplTableSortChangedDetail": {
-                            "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-table/xpl-table.tsx",
-                            "id": "src/components/components/xpl-table/xpl-table.tsx::XplTableSortChangedDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "tableSelect",
-                "name": "tableSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Callback function that is called when the checkbox for a row of a\n`multiselect` table is checked."
+                    "text": "Emits an event whenever the sort changes.\nThe 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]).\nThe default action can be overridden by calling event.preventDefault()."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "{\n        colNum: number;\n        colName: string;\n        sortTypeArr: string[];\n    }",
+                    "resolved": "{ colNum: number; colName: string; sortTypeArr: string[]; }",
                     "references": {}
                 }
             }];
@@ -1587,101 +369,14 @@ export class Table {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "columns",
-                "methodName": "watchColumns"
-            }, {
                 "propName": "data",
                 "methodName": "watchData"
             }, {
                 "propName": "footer",
                 "methodName": "watchFooterData"
             }, {
-                "propName": "reorderHandleIcon",
-                "methodName": "watchReorderHandleIcon"
-            }, {
-                "propName": "reorderHandleIconKeyboard",
-                "methodName": "watchReorderHandleIconKeyboard"
-            }, {
-                "propName": "rowReorderable",
-                "methodName": "watchRowReorderable"
-            }, {
-                "propName": "selectable",
-                "methodName": "watchSelectable"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "xplTableColumnWidthsChange",
-                "method": "handleHeaderCellColumnWidthsChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "checkboxChange",
-                "method": "handleCompositionalCheckboxChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "headerCheckboxChange",
-                "method": "handleCompositionalHeaderCheckboxChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "pointerdown",
-                "method": "handlePointerDownExitKeyboardReorder",
-                "target": undefined,
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "pointerdown",
-                "method": "handleRowReorderPointerDown",
-                "target": undefined,
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "dragstart",
-                "method": "handleRowReorderDragStart",
-                "target": undefined,
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "dragend",
-                "method": "handleRowReorderDragEnd",
-                "target": undefined,
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "dragover",
-                "method": "handleRowReorderDragOver",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "dragenter",
-                "method": "handleRowReorderDragEnter",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "dragleave",
-                "method": "handleRowReorderDragLeave",
-                "target": undefined,
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "drop",
-                "method": "handleRowReorderDrop",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "headerSortChange",
-                "method": "handleCompositionalHeaderSort",
-                "target": undefined,
-                "capture": false,
-                "passive": false
+                "propName": "columns",
+                "methodName": "watchColumns"
             }];
     }
 }