@exmg/exm-grid 1.0.0

package/src/table/exm-grid.js

@@ -0,0 +1,333 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property, customElement, state } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
+import '@exmg/exm-sortable/exm-sortable.js';
+import { style as exmgGridTableStyles } from '../styles/exm-grid-styles-css.js';
+import { ExmgRowSelectable } from './featrues/exm-row-selectable.js';
+import { ExmgQuerySelectors } from './utils/exm-query-selectors.js';
+import { ExmgRowExpandable } from './featrues/exm-row-expandable.js';
+import { ExmgColumnSortable } from './featrues/exm-column-sortable.js';
+import { ExmgRowSortable } from './featrues/exm-row-sortable.js';
+/**
+ * ### Styling
+ * The following custom properties and mixins are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--exm-arrow-upward-url` | Url to icon that is used for soring direction indicator | `url('/assets/arrow-upward.svg');`
+ * `--exm-table-card-width` | table card width | `100%;`
+ * `--exm-table-card-margin-bottom` | table bottom margin  | `5px;`
+ * `--exm-table-color` | table text color | `#02182b;`
+ * `--exm-table-background-color` | table background color | `#ffffff;`
+ * `--exm-table-box-shadow` | table box shadow | `#{0px 1px 5px 0px rgba($onSurface, .2), 0px 2px 2px 0px rgba($onSurface, .14), 0px 3px 1px -2px rgba($onSurface, .12)},`
+ * `--exm-table-row-divider-color` | table rows separator color | `#dbdbdb;`
+ * `--exm-table-row-selected-color` | selected row text color | `#02182b;`
+ * `--exm-table-row-selected-background-color` | selected row background color | `#e2f1fe;`
+ * `--exm-table-row-hover-color` | row hover text color | `#02182b;`
+ * `--exm-table-row-hover-background-color` | row hover background color | `#f1f1f1;`
+ * `--exm-table-row-dragged-background-color` | sortable row background color when dragged | `#f1f1f1;`
+ * `--exm-table-rows-expanded-divider-border` | border between row and expanded row detail | `none;`
+ * `--exm-table-rows-expanded-border` | border around row and expanded row detail | `1px solid #dbdbdb;`
+ * `--exm-table-rows-expanded-background-color` | background color of row and expanded row detail | `#e2f1fe;`
+ * `--exm-table-rows-expanded-color` | text color of row and expanded row detail | `#02182b;`
+ * `--exm-table-th-color` | header text color | `#0071dc;`
+ * `--exm-table-columns-background-color` | header background color | `#ffffff;`
+ * `--exm-table-th-sortable-hover-color` | sortable header hover text color | `#02182b;`
+ * `--exm-table-th-height` | header height | `48px;`
+ * `--exm-table-th-sort-margin-left` | header margin after text but before icon | `0px;`
+ * `--exm-table-td-height` | row cell height | `48px;`
+ * `--exm-table-th-sort-icon-height` | sort icon height | `1em;`
+ * `--exm-table-th-sort-icon-width` | sort icon width | `1em;`
+ * `--exm-table-col-number-padding-right` | right padding of number column | `10px;`
+ * `--exm-table-checkbox-cell-width` | width of cell with checkbox | `24px;`
+ */
+let ExmgGrid = class ExmgGrid extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Array of data which mapped to rows
+         */
+        this.items = [];
+        /**
+         * Feature that turn on sort by column
+         */
+        this.sortable = false;
+        /**
+         * Feature that allow sort rows
+         * If table has turn on feature `selectable` then it takes precedence and `rowSelectable` will be ignored
+         */
+        this.rowsSortable = false;
+        /**
+         * Feature that allow select rows
+         */
+        this.rowsSelectable = false;
+        /**
+         * By default a ros is also selactable by clicking anywhere inside the row when the rowSElectable option is enabled
+         */
+        this.disableRowClickSelection = false;
+        /**
+         * Map of column names that should be hidden
+         */
+        this.hiddenColumnNames = {};
+        /**
+         * Map of row id and selection state
+         * Useful for setup default selection or manipulating programmatically
+         */
+        this.selectedRowIds = {};
+        /**
+         * Map of row id and expandable row state
+         * Useful for setup default expanded rows or manipulating programmatically
+         */
+        this.expandedRowIds = {};
+        /**
+         * Set table layout. If fixed then text overflow will be hidden and ellipsis added.
+         */
+        this.tableLayout = 'auto';
+        this.withToolbar = false;
+        this.componentReady = false;
+    }
+    getQuerySelectors() {
+        if (!this.querySelectors) {
+            throw new Error('ExmgQuerySelector not initialized yet');
+        }
+        return this.querySelectors;
+    }
+    getTable() {
+        return this.getQuerySelectors().getTable();
+    }
+    getTableBody() {
+        return this.getQuerySelectors().getTableBody();
+    }
+    findTableBody() {
+        if (this.querySelectors) {
+            return this.getTableBody() || undefined;
+        }
+        return undefined;
+    }
+    // eslint-disable-next-line
+    getColumns(selector = 'th') {
+        return this.getQuerySelectors().getColumns(selector);
+    }
+    getBodyRowSelector(selector = '') {
+        return this.getQuerySelectors().getBodyRowSelector(selector);
+    }
+    canSortRows() {
+        return !this.sortable && this.rowsSortable;
+    }
+    rowsOrderChange(e) {
+        setTimeout(() => {
+            const { sourceIndex, targetIndex } = e.detail;
+            const items = [...this.items];
+            const movedElement = items[sourceIndex];
+            items.splice(sourceIndex, 1);
+            items.splice(targetIndex, 0, movedElement);
+            this.dispatchEvent(new CustomEvent('exm-grid-rows-order-updated', {
+                composed: true,
+                bubbles: true,
+                detail: { sourceIndex, targetIndex },
+            }));
+            this.dispatchEvent(new CustomEvent('exm-grid-rows-order-changed', {
+                composed: true,
+                bubbles: true,
+                detail: { items },
+            }));
+        }, 0);
+    }
+    updateColumnVisibility(previousHiddenColumnNames = {}) {
+        let visibleColumns = 0;
+        this.getColumns().forEach((column, index) => {
+            const columnKey = column.getAttribute('data-column-key');
+            visibleColumns += this.hiddenColumnNames[columnKey || ''] ? 0 : 1;
+            if (columnKey && previousHiddenColumnNames[columnKey] !== this.hiddenColumnNames[columnKey]) {
+                const nextDisplayValue = this.hiddenColumnNames[columnKey] ? 'none' : 'table-cell';
+                column.style.display = nextDisplayValue;
+                this.getTable()
+                    .querySelectorAll(`tbody.grid-data tr:not(.grid-row-detail) td:nth-child(${index + 1})`)
+                    .forEach((cell) => {
+                    cell.style.display = nextDisplayValue;
+                });
+            }
+        });
+        this.updateAutoColspan(visibleColumns);
+    }
+    updateAutoColspan(visibleColumns) {
+        this.getTable()
+            .querySelectorAll('[data-auto-colspan]')
+            .forEach((element) => {
+            const offset = Number.parseInt(element.getAttribute('data-auto-span') || '0', 10);
+            element.setAttribute('colspan', (visibleColumns - offset).toString());
+        });
+    }
+    observeExpandedRowIds(changedProps) {
+        if (changedProps.has('expandedRowIds')) {
+            Object.entries(this.expandedRowIds).forEach(([rowId, nextExpandedState]) => {
+                const expendableToggle = this.getTableBody().querySelector(this.getBodyRowSelector(`[data-row-key="${rowId}"] ${this.expandableToggleSelector}`));
+                if (expendableToggle) {
+                    const isExpanded = expendableToggle.hasAttribute('data-is-expanded');
+                    if (isExpanded !== nextExpandedState) {
+                        expendableToggle.dispatchEvent(new MouseEvent('click'));
+                    }
+                }
+            });
+        }
+    }
+    observeSelectedRowIds(changedProps) {
+        if (changedProps.has('selectedRowIds')) {
+            Object.entries(this.selectedRowIds).forEach(([rowId, nextSelectionState]) => {
+                const row = this.getTableBody().querySelector(this.getBodyRowSelector(`[data-row-key="${rowId}"]`));
+                if (row) {
+                    const isSelected = row.hasAttribute('data-selected');
+                    if (isSelected !== nextSelectionState) {
+                        row.dispatchEvent(new MouseEvent('click'));
+                    }
+                }
+            });
+        }
+    }
+    observeItems(changedProps) {
+        if (changedProps.has('items') && this.rowSelectableFeature) {
+            this.rowSelectableFeature.syncSelectedItems();
+        }
+    }
+    async initGridAttributes() {
+        await this.updateComplete;
+        const toolbarSlot = this.shadowRoot.querySelector('slot[name="toolbar"]');
+        if (toolbarSlot && toolbarSlot.assignedNodes && toolbarSlot.assignedNodes().length) {
+            // make TS happy - this.withToolbar is declared but never read
+            this.withToolbar = this.withToolbar || true;
+        }
+    }
+    async firstUpdated() {
+        const table = this.shadowRoot.host.querySelector('table');
+        const tableBody = table.querySelector('tbody.grid-data');
+        this.querySelectors = new ExmgQuerySelectors(table, tableBody);
+        this.initGridAttributes();
+        const bodyRows = this.querySelectors.getBodyRows();
+        if (this.sortable) {
+            this.columnSortableFeature = new ExmgColumnSortable(this.querySelectors, (event) => this.dispatchEvent(event), this.defaultSortColumn, this.defaultSortDirection);
+            this.columnSortableFeature.initFeature();
+        }
+        if (this.canSortRows()) {
+            this.rowSortableFeature = new ExmgRowSortable(this.querySelectors);
+            this.rowSortableFeature.initFeature();
+        }
+        if (this.rowsSelectable) {
+            this.rowSelectableFeature = new ExmgRowSelectable(this.querySelectors, (event) => this.dispatchEvent(event), this.disableRowClickSelection, this.selectableCheckboxSelector);
+            this.rowSelectableFeature.initFeature(bodyRows);
+        }
+        if (this.expandableToggleSelector) {
+            this.rowExpandableFeature = new ExmgRowExpandable(this.querySelectors, this.expandableToggleSelector);
+            this.rowExpandableFeature.initFeature();
+        }
+        this.updateColumnVisibility();
+        bodyRows.forEach((row) => row.setAttribute('data-initialized', ''));
+        this.querySelectors.getColumns('th:not([title])').forEach((col) => col.setAttribute('title', col.innerText));
+        this.querySelectors.getTable().setAttribute('data-table-layout', this.tableLayout);
+        await this.updateComplete;
+        this.componentReady = true;
+    }
+    updated(changedProps) {
+        if (changedProps.has('hiddenColumnNames') || changedProps.has('items')) {
+            this.updateColumnVisibility(changedProps.get('hiddenColumnNames'));
+        }
+        this.observeItems(changedProps);
+        this.observeExpandedRowIds(changedProps);
+        this.observeSelectedRowIds(changedProps);
+        if (this.componentReady && changedProps.has('items')) {
+            const bodyRows = this.querySelectors.getBodyRowsNotInitialized();
+            if (this.rowSelectableFeature) {
+                this.rowSelectableFeature.updateFeature(bodyRows);
+            }
+            if (this.rowExpandableFeature) {
+                this.rowExpandableFeature.updateFeature();
+            }
+            if (this.rowSortableFeature) {
+                this.rowSortableFeature.updateFeature();
+            }
+            bodyRows.forEach((row) => row.setAttribute('data-initialized', ''));
+        }
+    }
+    renderWithoutSortable() {
+        return html ` <slot></slot> `;
+    }
+    renderWithSortable() {
+        return html `
+      <exm-sortable
+        orientation="${'vertical'}"
+        animation-enabled
+        item-selector="tbody.grid-data &gt; tr:not(.grid-row-detail)"
+        handle-selector=".grid-row-drag-handler"
+        .sortableHostNode="${this.findTableBody()}"
+        @dom-order-change="${this.rowsOrderChange}"
+      >
+        <slot></slot>
+      </exm-sortable>
+    `;
+    }
+    render() {
+        return html `
+      <div class="table-card-container">
+        <slot name="toolbar"></slot>
+        <div class="table-card">
+          <div class="table-container">
+            ${cache(this.canSortRows() ? this.renderWithSortable() : this.renderWithoutSortable())}
+          </div>
+          <slot name="pagination"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+ExmgGrid.styles = [exmgGridTableStyles];
+__decorate([
+    property({ type: Array })
+], ExmgGrid.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmgGrid.prototype, "sortable", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-sort-column' })
+], ExmgGrid.prototype, "defaultSortColumn", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-sort-direction' })
+], ExmgGrid.prototype, "defaultSortDirection", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'rows-sortable' })
+], ExmgGrid.prototype, "rowsSortable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'rows-selectable' })
+], ExmgGrid.prototype, "rowsSelectable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-row-click-selection' })
+], ExmgGrid.prototype, "disableRowClickSelection", void 0);
+__decorate([
+    property({ type: String, attribute: 'selectable-checkbox-selector' })
+], ExmgGrid.prototype, "selectableCheckboxSelector", void 0);
+__decorate([
+    property({ type: Object })
+], ExmgGrid.prototype, "hiddenColumnNames", void 0);
+__decorate([
+    property({ type: Object })
+], ExmgGrid.prototype, "selectedRowIds", void 0);
+__decorate([
+    property({ type: Object })
+], ExmgGrid.prototype, "expandedRowIds", void 0);
+__decorate([
+    property({ type: String, attribute: 'expandable-toggle-selector', reflect: true })
+], ExmgGrid.prototype, "expandableToggleSelector", void 0);
+__decorate([
+    property({ type: String, attribute: 'table-layout', reflect: true })
+], ExmgGrid.prototype, "tableLayout", void 0);
+__decorate([
+    state()
+], ExmgGrid.prototype, "querySelectors", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'data-with-toolbar' })
+], ExmgGrid.prototype, "withToolbar", void 0);
+ExmgGrid = __decorate([
+    customElement('exm-grid')
+], ExmgGrid);
+export { ExmgGrid };
+//# sourceMappingURL=exm-grid.js.map

package/src/table/featrues/exm-column-sortable.d.ts

@@ -0,0 +1,12 @@
+import { ExmgQuerySelectors } from '../utils/exm-query-selectors.js';
+import { SORT_DIRECTION } from '../types/exm-grid-types.js';
+export declare class ExmgColumnSortable {
+    private querySelectors;
+    private dispatchEvent;
+    private defaultSortColumn?;
+    private defaultSortDirection?;
+    constructor(qs: ExmgQuerySelectors, de: (e: Event) => boolean, dsc?: string, dsd?: SORT_DIRECTION);
+    initFeature(): void;
+    private registerListeners;
+    private fireSortChanged;
+}

package/src/table/featrues/exm-column-sortable.js

@@ -0,0 +1,50 @@
+export class ExmgColumnSortable {
+    constructor(qs, de, dsc, dsd) {
+        this.querySelectors = qs;
+        this.dispatchEvent = de;
+        this.defaultSortColumn = dsc;
+        this.defaultSortDirection = dsd;
+    }
+    initFeature() {
+        this.querySelectors.getColumns('th[data-sort]').forEach((column) => {
+            const columnId = column.getAttribute('data-sort') || column.getAttribute('data-column-key');
+            //  set default sort column if any
+            if (!!this.defaultSortColumn && !!this.defaultSortDirection && this.defaultSortColumn === columnId) {
+                column.setAttribute('data-sort-direction', this.defaultSortDirection);
+            }
+            this.registerListeners(column, columnId);
+        });
+    }
+    registerListeners(column, columnId) {
+        column.addEventListener('click', () => {
+            const columnSortDirection = column.getAttribute('data-sort-direction');
+            const nextSortDirection = columnSortDirection === 'ASC' ? 'DESC' : columnSortDirection === 'DESC' ? undefined : 'ASC';
+            // reset previous
+            this.querySelectors
+                .getColumns('th[data-sort-direction=ASC], th[data-sort-direction=DESC]')
+                .forEach((alreadySortedColumn) => {
+                if (alreadySortedColumn !== column) {
+                    alreadySortedColumn.removeAttribute('data-sort-direction');
+                }
+            });
+            if (nextSortDirection) {
+                column.setAttribute('data-sort-direction', nextSortDirection);
+            }
+            else {
+                column.removeAttribute('data-sort-direction');
+            }
+            this.fireSortChanged(columnId, nextSortDirection);
+        });
+    }
+    fireSortChanged(columnId, sortDirection) {
+        this.dispatchEvent(new CustomEvent('exm-grid-sort-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                column: columnId,
+                sortDirection: sortDirection ? sortDirection : undefined,
+            },
+        }));
+    }
+}
+//# sourceMappingURL=exm-column-sortable.js.map

package/src/table/featrues/exm-row-expandable.d.ts

@@ -0,0 +1,9 @@
+import { ExmgQuerySelectors } from '../utils/exm-query-selectors.js';
+export declare class ExmgRowExpandable {
+    private querySelectors;
+    private expandableToggleSelector;
+    constructor(qs: ExmgQuerySelectors, ets: string);
+    initFeature(): void;
+    updateFeature(): void;
+    private registerClickListener;
+}

package/src/table/featrues/exm-row-expandable.js

@@ -0,0 +1,42 @@
+export class ExmgRowExpandable {
+    constructor(qs, ets) {
+        this.querySelectors = qs;
+        this.expandableToggleSelector = ets;
+    }
+    initFeature() {
+        this.querySelectors
+            .getTableBody()
+            .querySelectorAll(`${this.expandableToggleSelector}:not([data-is-expandable])`)
+            .forEach((triggerElement) => {
+            triggerElement.setAttribute('data-is-expandable', '');
+            this.registerClickListener(triggerElement);
+        });
+    }
+    updateFeature() {
+        this.initFeature();
+    }
+    registerClickListener(triggerElement) {
+        triggerElement.addEventListener('click', (event) => {
+            const parentRow = triggerElement.closest('tr');
+            const rowDetail = parentRow && parentRow.nextElementSibling;
+            if (!parentRow || !rowDetail) {
+                // console.error(`Cannot find parent <tr> for selector ${this.expandableToggleSelector}`);
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            const isExpanded = triggerElement.hasAttribute('data-is-expanded');
+            if (isExpanded) {
+                triggerElement.removeAttribute('data-is-expanded');
+                rowDetail.removeAttribute('data-is-row-expanded');
+                parentRow.removeAttribute('data-has-expanded-detail');
+            }
+            else {
+                triggerElement.setAttribute('data-is-expanded', '');
+                rowDetail.setAttribute('data-is-row-expanded', '');
+                parentRow.setAttribute('data-has-expanded-detail', '');
+            }
+        });
+    }
+}
+//# sourceMappingURL=exm-row-expandable.js.map

package/src/table/featrues/exm-row-selectable.d.ts

@@ -0,0 +1,20 @@
+import { ExmgQuerySelectors } from '../utils/exm-query-selectors.js';
+export declare class ExmgRowSelectable {
+    allCheckbox?: HTMLInputElement;
+    selectedRows: HTMLTableRowElement[];
+    private querySelectors;
+    private dispatchEvent;
+    private selectableCheckboxSelector?;
+    private disableRowClickSelection;
+    constructor(qs: ExmgQuerySelectors, de: (event: Event) => boolean, drcs: boolean, scs?: string);
+    initFeature(bodyRows: NodeListOf<HTMLTableRowElement>): void;
+    updateFeature(bodyRows: NodeListOf<HTMLTableRowElement>): void;
+    syncSelectedItems(): void;
+    private fireSelectableRows;
+    private updateBodyRowsListeners;
+    private initAllCheckbox;
+    private syncRowSelectionWithBodyCheckboxes;
+    private getBodyCheckboxes;
+    private handleAllCheckboxStateChange;
+    private updateSelectAllCheckbox;
+}

package/src/table/featrues/exm-row-selectable.js

@@ -0,0 +1,204 @@
+const checkCheckbox = (checkboxElement) => {
+    checkboxElement.setAttribute('checked', 'checked');
+    checkboxElement.removeAttribute('indeterminate');
+    checkboxElement.checked = true;
+};
+const uncheckCheckbox = (checkboxElement) => {
+    checkboxElement.removeAttribute('checked');
+    checkboxElement.removeAttribute('indeterminate');
+    checkboxElement.checked = false;
+};
+const indeterminateCheckbox = (checkboxElement) => {
+    checkboxElement.removeAttribute('checked');
+    checkboxElement.setAttribute('indeterminate', 'true');
+    checkboxElement.checked = true;
+};
+const syncCheckboxAttrFromProp = (checkboxElement) => {
+    if (checkboxElement.checked) {
+        checkboxElement.setAttribute('checked', 'checked');
+    }
+    else {
+        checkboxElement.removeAttribute('checked');
+    }
+};
+export class ExmgRowSelectable {
+    constructor(qs, de, drcs, scs) {
+        this.selectedRows = [];
+        this.querySelectors = qs;
+        this.dispatchEvent = de;
+        this.selectableCheckboxSelector = scs;
+        this.disableRowClickSelection = drcs;
+    }
+    // eslint-disable-next-line
+    initFeature(bodyRows) {
+        const fireEvent = this.initAllCheckbox();
+        const rowsSelectionSyncShouldTriggerEvent = this.syncRowSelectionWithBodyCheckboxes();
+        this.updateBodyRowsListeners(bodyRows);
+        if (fireEvent || rowsSelectionSyncShouldTriggerEvent) {
+            this.fireSelectableRows();
+        }
+    }
+    // eslint-disable-next-line
+    updateFeature(bodyRows) {
+        this.updateBodyRowsListeners(bodyRows);
+        const rowsSelectionSyncShouldTriggerEvent = this.syncRowSelectionWithBodyCheckboxes();
+        this.updateSelectAllCheckbox();
+        if (rowsSelectionSyncShouldTriggerEvent) {
+            this.fireSelectableRows();
+        }
+    }
+    syncSelectedItems() {
+        if (this.syncRowSelectionWithBodyCheckboxes()) {
+            this.fireSelectableRows();
+        }
+    }
+    fireSelectableRows() {
+        this.dispatchEvent(new CustomEvent('exm-grid-selected-rows-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rows: [...this.selectedRows],
+            },
+        }));
+    }
+    // eslint-disable-next-line
+    updateBodyRowsListeners(bodyRows) {
+        bodyRows.forEach((row) => {
+            row.setAttribute('data-is-selectable', '');
+            row.addEventListener('click', (e) => {
+                const target = e.target;
+                // Also TR needed for initial auto selected rows on init / if disable row selection it is only possible to use the md-checkbox
+                if ((this.disableRowClickSelection && target.tagName !== 'MD-CHECKBOX' && target.tagName !== 'TR') ||
+                    (target.tagName !== 'TR' && target.tagName !== 'TD' && target.tagName !== 'MD-CHECKBOX')) {
+                    return;
+                }
+                const index = this.selectedRows.indexOf(row);
+                const isRowAlreadySelected = index > -1;
+                if (isRowAlreadySelected) {
+                    row.removeAttribute('data-selected');
+                    this.selectedRows.splice(index, 1);
+                }
+                else {
+                    row.setAttribute('data-selected', '');
+                    this.selectedRows.push(row);
+                }
+                const rowCheckbox = this.selectableCheckboxSelector && row.querySelector(this.selectableCheckboxSelector);
+                if (rowCheckbox && rowCheckbox !== e.target) {
+                    if (isRowAlreadySelected) {
+                        uncheckCheckbox(rowCheckbox);
+                    }
+                    else {
+                        checkCheckbox(rowCheckbox);
+                    }
+                }
+                else if (rowCheckbox) {
+                    syncCheckboxAttrFromProp(rowCheckbox);
+                }
+                this.updateSelectAllCheckbox();
+                this.fireSelectableRows();
+            });
+        });
+    }
+    initAllCheckbox() {
+        let fireEvent = false;
+        this.allCheckbox = this.selectableCheckboxSelector
+            ? this.querySelectors.getColumn(this.selectableCheckboxSelector)
+            : undefined;
+        if (this.allCheckbox) {
+            if (this.allCheckbox.checked) {
+                this.handleAllCheckboxStateChange();
+                fireEvent = true;
+            }
+            this.allCheckbox.addEventListener('change', () => {
+                syncCheckboxAttrFromProp(this.allCheckbox);
+                this.handleAllCheckboxStateChange();
+                this.fireSelectableRows();
+            });
+        }
+        return fireEvent;
+    }
+    syncRowSelectionWithBodyCheckboxes() {
+        let fireEvent = false;
+        if (this.selectableCheckboxSelector) {
+            // remove row attribute data-selected if checkbox not selected
+            this.querySelectors
+                .getTableBody()
+                .querySelectorAll(`tr[data-selected] ${this.selectableCheckboxSelector}:not([checked])`)
+                .forEach((uncheckedCheckbox) => {
+                const row = uncheckedCheckbox.closest('tr');
+                if (row) {
+                    row.removeAttribute('data-selected');
+                    fireEvent = true;
+                }
+            });
+            // add row attribute data-selected if checkbox is selected
+            this.querySelectors
+                .getTableBody()
+                .querySelectorAll(`tr:not([data-selected]) ${this.selectableCheckboxSelector}[checked]`)
+                .forEach((checkedCheckbox) => {
+                const row = checkedCheckbox.closest('tr');
+                if (row) {
+                    row.setAttribute('data-selected', '');
+                    fireEvent = true;
+                }
+            });
+            const prevSelectedRowsCount = this.selectedRows.length;
+            this.selectedRows = Array.from(this.querySelectors.getTableBody().querySelectorAll('tr[data-selected]'));
+            if (prevSelectedRowsCount !== this.selectedRows.length) {
+                fireEvent = true;
+            }
+            if (this.allCheckbox && !this.allCheckbox.checked) {
+                if (this.selectedRows.length && this.selectedRows.length === this.querySelectors.getBodyRows().length) {
+                    checkCheckbox(this.allCheckbox);
+                }
+            }
+        }
+        return fireEvent;
+    }
+    getBodyCheckboxes() {
+        return this.selectableCheckboxSelector
+            ? Array.from(this.querySelectors.getTableBody().querySelectorAll(this.selectableCheckboxSelector))
+            : [];
+    }
+    handleAllCheckboxStateChange() {
+        if (this.allCheckbox.checked) {
+            this.allCheckbox.removeAttribute('indeterminate');
+            this.selectedRows = [];
+            this.querySelectors.getBodyRows().forEach((row) => {
+                row.setAttribute('data-selected', '');
+                this.selectedRows.push(row);
+            });
+            this.getBodyCheckboxes().forEach((checkbox) => {
+                checkCheckbox(checkbox);
+            });
+        }
+        else {
+            this.allCheckbox.removeAttribute('indeterminate');
+            this.selectedRows = [];
+            this.querySelectors
+                .getTableBody()
+                .querySelectorAll('tr[data-selected]')
+                .forEach((row) => {
+                row.removeAttribute('data-selected');
+            });
+            this.getBodyCheckboxes().forEach((checkbox) => {
+                uncheckCheckbox(checkbox);
+            });
+        }
+    }
+    updateSelectAllCheckbox() {
+        const selectedRowsCount = this.selectedRows.length;
+        if (this.allCheckbox) {
+            if (!this.allCheckbox.checked && selectedRowsCount === this.querySelectors.getBodyRows().length) {
+                checkCheckbox(this.allCheckbox);
+            }
+            else if (selectedRowsCount === 0) {
+                uncheckCheckbox(this.allCheckbox);
+            }
+            else if (selectedRowsCount < this.querySelectors.getBodyRows().length) {
+                indeterminateCheckbox(this.allCheckbox);
+            }
+        }
+    }
+}
+//# sourceMappingURL=exm-row-selectable.js.map

package/src/table/featrues/exm-row-sortable.d.ts

@@ -0,0 +1,9 @@
+import { ExmgQuerySelectors } from '../utils/exm-query-selectors.js';
+export declare class ExmgRowSortable {
+    private querySelectors;
+    constructor(qs: ExmgQuerySelectors);
+    initFeature(): void;
+    updateFeature(): void;
+    private getRowDetailQuerySelectorFactory;
+    private registerMouseListenersHideDetailOnStartDragging;
+}