@exmg/exm-grid 1.1.2-alpha.6 → 1.1.2

package/dist/table/exm-grid.js

@@ -1,333 +0,0 @@
-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 { ExmRowSelectable } from './featrues/exm-row-selectable.js';
-import { ExmQuerySelectors } from './utils/exm-query-selectors.js';
-import { ExmRowExpandable } from './featrues/exm-row-expandable.js';
-import { ExmColumnSortable } from './featrues/exm-column-sortable.js';
-import { ExmRowSortable } 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 ExmGrid = class ExmGrid 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('ExmQuerySelector 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 ExmQuerySelectors(table, tableBody);
-        this.initGridAttributes();
-        const bodyRows = this.querySelectors.getBodyRows();
-        if (this.sortable) {
-            this.columnSortableFeature = new ExmColumnSortable(this.querySelectors, (event) => this.dispatchEvent(event), this.defaultSortColumn, this.defaultSortDirection);
-            this.columnSortableFeature.initFeature();
-        }
-        if (this.canSortRows()) {
-            this.rowSortableFeature = new ExmRowSortable(this.querySelectors);
-            this.rowSortableFeature.initFeature();
-        }
-        if (this.rowsSelectable) {
-            this.rowSelectableFeature = new ExmRowSelectable(this.querySelectors, (event) => this.dispatchEvent(event), this.disableRowClickSelection, this.selectableCheckboxSelector);
-            this.rowSelectableFeature.initFeature(bodyRows);
-        }
-        if (this.expandableToggleSelector) {
-            this.rowExpandableFeature = new ExmRowExpandable(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>
-    `;
-    }
-};
-ExmGrid.styles = [exmgGridTableStyles];
-__decorate([
-    property({ type: Array })
-], ExmGrid.prototype, "items", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ExmGrid.prototype, "sortable", void 0);
-__decorate([
-    property({ type: String, attribute: 'default-sort-column' })
-], ExmGrid.prototype, "defaultSortColumn", void 0);
-__decorate([
-    property({ type: String, attribute: 'default-sort-direction' })
-], ExmGrid.prototype, "defaultSortDirection", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'rows-sortable' })
-], ExmGrid.prototype, "rowsSortable", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'rows-selectable' })
-], ExmGrid.prototype, "rowsSelectable", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'disable-row-click-selection' })
-], ExmGrid.prototype, "disableRowClickSelection", void 0);
-__decorate([
-    property({ type: String, attribute: 'selectable-checkbox-selector' })
-], ExmGrid.prototype, "selectableCheckboxSelector", void 0);
-__decorate([
-    property({ type: Object })
-], ExmGrid.prototype, "hiddenColumnNames", void 0);
-__decorate([
-    property({ type: Object })
-], ExmGrid.prototype, "selectedRowIds", void 0);
-__decorate([
-    property({ type: Object })
-], ExmGrid.prototype, "expandedRowIds", void 0);
-__decorate([
-    property({ type: String, attribute: 'expandable-toggle-selector', reflect: true })
-], ExmGrid.prototype, "expandableToggleSelector", void 0);
-__decorate([
-    property({ type: String, attribute: 'table-layout', reflect: true })
-], ExmGrid.prototype, "tableLayout", void 0);
-__decorate([
-    state()
-], ExmGrid.prototype, "querySelectors", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'data-with-toolbar' })
-], ExmGrid.prototype, "withToolbar", void 0);
-ExmGrid = __decorate([
-    customElement('exm-grid')
-], ExmGrid);
-export { ExmGrid };
-//# sourceMappingURL=exm-grid.js.map

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

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

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

@@ -1,50 +0,0 @@
-export class ExmColumnSortable {
-    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/dist/table/featrues/exm-row-expandable.d.ts

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

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

@@ -1,42 +0,0 @@
-export class ExmRowExpandable {
-    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/dist/table/featrues/exm-row-selectable.d.ts

@@ -1,20 +0,0 @@
-import { ExmQuerySelectors } from '../utils/exm-query-selectors.js';
-export declare class ExmRowSelectable {
-    allCheckbox?: HTMLInputElement;
-    selectedRows: HTMLTableRowElement[];
-    private querySelectors;
-    private dispatchEvent;
-    private selectableCheckboxSelector?;
-    private disableRowClickSelection;
-    constructor(qs: ExmQuerySelectors, 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/dist/table/featrues/exm-row-selectable.js

@@ -1,204 +0,0 @@
-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 ExmRowSelectable {
-    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/dist/table/featrues/exm-row-sortable.d.ts

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