@exmg/exm-grid 1.2.2 → 1.2.4

package/dist/table/exm-grid.js

@@ -1,332 +1,11 @@
 import { __decorate } from 'tslib';
-import { html } from 'lit';
-import { ExmgElement } from '@exmg/lit-base/index.js';
-import { property, state, customElement } from 'lit/decorators.js';
-import { cache } from 'lit/directives/cache.js';
-import '@exmg/exm-sortable/exm-sortable.js';
+import { customElement } from 'lit/decorators.js';
 import { style } 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';
+import { ExmGridBase } from './exm-grid-base.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>
-    `;
-    }
+let ExmGrid = class ExmGrid extends ExmGridBase {
 };
 ExmGrid.styles = [style];
-__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);

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

@@ -0,0 +1,9 @@
+import { ExmGridBase } from './exm-grid-base.js';
+export declare class ExmOutlinedGrid extends ExmGridBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-outlined-grid': ExmOutlinedGrid;
+    }
+}

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

@@ -0,0 +1,14 @@
+import { __decorate } from 'tslib';
+import { customElement } from 'lit/decorators.js';
+import { style, gridOutlineStyles } from '../styles/exm-grid-styles-css.js';
+import { ExmGridBase } from './exm-grid-base.js';
+
+let ExmOutlinedGrid = class ExmOutlinedGrid extends ExmGridBase {
+};
+ExmOutlinedGrid.styles = [style, gridOutlineStyles];
+ExmOutlinedGrid = __decorate([
+    customElement('exm-outlined-grid')
+], ExmOutlinedGrid);
+
+export { ExmOutlinedGrid };
+//# sourceMappingURL=exm-outlined-grid.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-grid",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "type": "module",
   "description": "exmg grid element",
   "contributors": [
@@ -22,6 +22,8 @@
     "./exm-grid-smart-toolbar.js": "./dist/table/exm-grid-smart-toolbar.js",
     "./exm-grid-toolbar-filters.js": "./dist/table/exm-grid-toolbar-filters.js",
     "./exm-grid-toolbar.js": "./dist/table/exm-grid-toolbar.js",
+    "./exm-outlined-grid.js": "./dist/table/exm-outlined-grid.js",
+    "./exm-grid-base.js": "./dist/table/exm-grid-base.js",
     "./exm-grid.js": "./dist/table/exm-grid.js",
     "./exm-toolbar-search.js": "./dist/search/exm-toolbar-search.js"
   },
@@ -37,8 +39,8 @@
     "directory": "packages/exm-grid"
   },
   "dependencies": {
-    "@exmg/exm-search": "^1.2.2",
-    "@exmg/exm-sortable": "^1.2.2"
+    "@exmg/exm-search": "^1.2.4",
+    "@exmg/exm-sortable": "^1.2.4"
   },
   "peerDependencies": {
     "@exmg/lit-base": "^3.0.0",
@@ -52,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ebeff1e4708e98ba6b71e4a88ea8a4860cf3c61e"
+  "gitHead": "7d2d8b74ef0b3f65870699ed2aa8e1ff54d8809d"
 }