@exmg/exm-grid 1.2.2 → 1.2.4

package/dist/table/exm-grid-base.js

@@ -0,0 +1,331 @@
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property, state } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.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';
+import '@exmg/exm-sortable/exm-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-alternate-background-color` | alternate row background color | `#cbc9d420;`
+ * `--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;`
+ */
+class ExmGridBase 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>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], ExmGridBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmGridBase.prototype, "sortable", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-sort-column' })
+], ExmGridBase.prototype, "defaultSortColumn", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-sort-direction' })
+], ExmGridBase.prototype, "defaultSortDirection", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'rows-sortable' })
+], ExmGridBase.prototype, "rowsSortable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'rows-selectable' })
+], ExmGridBase.prototype, "rowsSelectable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-row-click-selection' })
+], ExmGridBase.prototype, "disableRowClickSelection", void 0);
+__decorate([
+    property({ type: String, attribute: 'selectable-checkbox-selector' })
+], ExmGridBase.prototype, "selectableCheckboxSelector", void 0);
+__decorate([
+    property({ type: Object })
+], ExmGridBase.prototype, "hiddenColumnNames", void 0);
+__decorate([
+    property({ type: Object })
+], ExmGridBase.prototype, "selectedRowIds", void 0);
+__decorate([
+    property({ type: Object })
+], ExmGridBase.prototype, "expandedRowIds", void 0);
+__decorate([
+    property({ type: String, attribute: 'expandable-toggle-selector', reflect: true })
+], ExmGridBase.prototype, "expandableToggleSelector", void 0);
+__decorate([
+    property({ type: String, attribute: 'table-layout', reflect: true })
+], ExmGridBase.prototype, "tableLayout", void 0);
+__decorate([
+    state()
+], ExmGridBase.prototype, "querySelectors", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'data-with-toolbar' })
+], ExmGridBase.prototype, "withToolbar", void 0);
+
+export { ExmGridBase };
+//# sourceMappingURL=exm-grid-base.js.map

package/dist/table/exm-grid.d.ts

@@ -1,130 +1,9 @@
-import { ExmgElement } from '@exmg/lit-base/index.js';
-import '@exmg/exm-sortable/exm-sortable.js';
-import { SORT_DIRECTION } from './types/exm-grid-types.js';
-type GenericPropertyValues<T, V = unknown> = Map<T, V>;
-type Props = Exclude<keyof ExmGrid, number | symbol>;
-type SmartPropertyValue = GenericPropertyValues<Props>;
-/**
- * ### 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;`
- */
-export declare class ExmGrid extends ExmgElement {
+import { ExmGridBase } from './exm-grid-base.js';
+export declare class ExmGrid extends ExmGridBase {
     static styles: import("lit").CSSResult[];
-    /**
-     * Array of data which mapped to rows
-     */
-    items: unknown[];
-    /**
-     * Feature that turn on sort by column
-     */
-    sortable: boolean;
-    /**
-     * Name of sort column which should be sorted by default
-     */
-    defaultSortColumn?: string;
-    /**
-     * Default sort direction
-     */
-    defaultSortDirection?: SORT_DIRECTION;
-    /**
-     * Feature that allow sort rows
-     * If table has turn on feature `selectable` then it takes precedence and `rowSelectable` will be ignored
-     */
-    rowsSortable: boolean;
-    /**
-     * Feature that allow select rows
-     */
-    rowsSelectable: boolean;
-    /**
-     * By default a ros is also selactable by clicking anywhere inside the row when the rowSElectable option is enabled
-     */
-    disableRowClickSelection: boolean;
-    /**
-     * If rows are selectable you can also pass selector to checkboxes.
-     * We can have checkboxes in thead or / and tbody.
-     */
-    selectableCheckboxSelector?: string;
-    /**
-     * Map of column names that should be hidden
-     */
-    hiddenColumnNames: Record<string, string>;
-    /**
-     * Map of row id and selection state
-     * Useful for setup default selection or manipulating programmatically
-     */
-    selectedRowIds: Record<string, boolean>;
-    /**
-     * Map of row id and expandable row state
-     * Useful for setup default expanded rows or manipulating programmatically
-     */
-    expandedRowIds: Record<string, boolean>;
-    /**
-     * Selector to element inside row which will trigger expand / collapse action on related row detail
-     */
-    expandableToggleSelector?: string;
-    /**
-     * Set table layout. If fixed then text overflow will be hidden and ellipsis added.
-     */
-    tableLayout: 'fixed' | 'auto';
-    private querySelectors?;
-    withToolbar: boolean;
-    private rowSelectableFeature?;
-    private rowExpandableFeature?;
-    private rowSortableFeature?;
-    private columnSortableFeature?;
-    private componentReady;
-    private getQuerySelectors;
-    private getTable;
-    private getTableBody;
-    private findTableBody;
-    private getColumns;
-    private getBodyRowSelector;
-    private canSortRows;
-    private rowsOrderChange;
-    private updateColumnVisibility;
-    private updateAutoColspan;
-    private observeExpandedRowIds;
-    private observeSelectedRowIds;
-    private observeItems;
-    private initGridAttributes;
-    protected firstUpdated(): Promise<void>;
-    protected updated(changedProps: SmartPropertyValue): void;
-    private renderWithoutSortable;
-    private renderWithSortable;
-    protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'exm-grid': ExmGrid;
     }
 }
-export {};