@exmg/exm-grid 1.0.0

package/src/table/exm-grid-toolbar.js

@@ -0,0 +1,283 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import './exm-grid-toolbar-filters.js';
+import '@polymer/paper-item/paper-item.js';
+import './exm-grid-base-toolbar.js';
+import './exm-grid-setting-selection-list.js';
+import '../search/exm-toolbar-search.js';
+import { FilterConfigType, SettingConfigType, } from './types/exm-grid-toolbar-types.js';
+let ExmgGridToolbar = class ExmgGridToolbar extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.description = '';
+        this.actions = [];
+        this.filters = [];
+        this.settings = [];
+        this.searchEnabled = false;
+        this.searchPlaceholder = 'Search';
+        this.disableSeperator = false;
+    }
+    emitActionExecutedEvent(action) {
+        return () => {
+            this.dispatchEvent(new CustomEvent('exm-grid-toolbar-action-executed', {
+                detail: {
+                    id: action.id,
+                },
+                composed: true,
+                bubbles: true,
+            }));
+        };
+    }
+    emitFilterChangedEvent(filter) {
+        return (event) => {
+            this.saveFilterInLocalStorage(filter.id, event.detail.value);
+            this.dispatchEvent(new CustomEvent('exm-grid-toolbar-filter-changed', {
+                detail: {
+                    id: filter.id,
+                    value: event.detail.value,
+                },
+                composed: true,
+                bubbles: true,
+            }));
+        };
+    }
+    saveFilterInLocalStorage(filterId, value) {
+        if (filterId.length > 0) {
+            const key = `${filterId}${window.location.pathname}`;
+            localStorage.setItem(key, value);
+        }
+    }
+    getFilterFromLocalStorage(filterId) {
+        if (filterId.length > 0) {
+            const key = `${filterId}${window.location.pathname}`;
+            return localStorage.getItem(key);
+        }
+        return null;
+    }
+    emitSettingChangedEvent(setting) {
+        return (event) => {
+            this.dispatchEvent(new CustomEvent('exm-grid-toolbar-setting-changed', {
+                detail: {
+                    id: setting.id,
+                    value: event.detail.value,
+                },
+                composed: true,
+                bubbles: true,
+            }));
+        };
+    }
+    renderActions() {
+        return repeat(this.actions, (action) => html `
+        <md-icon-button
+          class="action"
+          title="${ifDefined(action.tooltip)}"
+          @click="${this.emitActionExecutedEvent(action)}"
+          ><md-icon>${action.icon}</md-icon></md-icon-button
+        >
+      `);
+    }
+    renderSearch() {
+        return html `<exm-toolbar-search placeHolder=${this.searchPlaceholder}></exm-toolbar-search> `;
+    }
+    renderDescription() {
+        return html ` ${this.description} `;
+    }
+    renderFilters() {
+        return repeat(this.filters, (filter) => this.renderFilter(filter));
+    }
+    renderFilter(filter) {
+        if (this.isFilterSingleSelectConfig(filter)) {
+            return this.renderSingleSelectFilter(filter);
+        }
+        return undefined;
+    }
+    isFilterSingleSelectConfig(filter) {
+        return filter.config.type === FilterConfigType.SingleSelect;
+    }
+    getSelectedFilter(filter) {
+        return this.getFilterFromLocalStorage(filter.id) || filter.config.data[0].id || 0;
+    }
+    renderSingleSelectFilter(filter) {
+        const items = filter.config.data.map((item) => ({ label: item.title, value: item.id }));
+        return html `
+      <exm-grid-toolbar-filters
+        selected="${this.getSelectedFilter(filter)}"
+        ?disabled="${!!filter.disabled}"
+        .items=${items}
+        @exm-grid-toolbar-filter-changed="${this.emitFilterChangedEvent(filter)}"
+      ></exm-grid-toolbar-filters>
+    `;
+    }
+    renderSettings() {
+        return repeat(this.settings, (setting) => this.renderSetting(setting));
+    }
+    renderSetting(setting) {
+        if (this.isSettingSelectionListConfig(setting)) {
+            return this.renderSelectionListSetting(setting);
+        }
+        return undefined;
+    }
+    isSettingSelectionListConfig(setting) {
+        return setting.config.type === SettingConfigType.SelectionList;
+    }
+    renderSelectionListSetting(setting) {
+        return html `
+      <exm-grid-setting-selection-list
+        class="setting"
+        setting-id="${setting.id}"
+        dialog-title="${ifDefined(setting.dialogTitle)}"
+        tooltip="${ifDefined(setting.tooltip)}"
+        icon="${ifDefined(setting.icon)}"
+        .settingData="${setting.config.data}"
+        @exm-grid-setting-changed="${this.emitSettingChangedEvent(setting)}"
+      >
+      </exm-grid-setting-selection-list>
+    `;
+    }
+    render() {
+        return html `
+      <style>
+        :host {
+          --paper-item-focused: {
+            background-color: var(
+              --exm-theme-table-toolbar-filter-item-active-bg-color,
+              var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
+            );
+          }
+          --paper-item-selected: {
+            background-color: var(
+              --exm-theme-table-toolbar-filter-item-active-bg-color,
+              var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
+            );
+          }
+          --paper-button-ink-color: var(
+            --exm-theme-table-toolbar-filter-item-active-bg-color,
+            var(--mdc-theme-surface)
+          );
+          --paper-input-container-color: var(--exm-grid-toolbar-on-surface-color, var(--mdc-theme-on-surface));
+          --paper-input-container-focus-color: var(--exm-grid-toolbar-on-surface-color, var(--mdc-theme-primary));
+
+          --exm-paper-combobox-selected-item-color: var(
+            --exm-grid-toolbar-on-surface-color,
+            var(--mdc-theme-on-surface)
+          );
+          --exm-paper-combobox-selected-item-bg-color: var(--exm-grid-toolbar-surface-color, transparent);
+          --exm-paper-combobox-dropdown-button-color: var(
+            --exm-grid-toolbar-on-surface-color,
+            var(--mdc-theme-on-surface)
+          );
+          --exm-paper-combobox-dropdown-button-bg-color: var(--exm-grid-toolbar-surface-color, transparent);
+          --exm-paper-combobox-dropdown-list-color: var(
+            --exm-grid-toolbar-on-surface-color,
+            var(--mdc-theme-on-surface)
+          );
+          --exm-paper-combobox-dropdown-list-bg-color: var(
+            --exm-grid-toolbar-surface-color,
+            var(--mdc-theme-surface)
+          );
+        }
+        :host exm-grid-base-toolbar[active] {
+          --paper-item-focused: {
+            background-color: var(
+              --exm-theme-table-toolbar-filter-item-active-bg-color,
+              var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
+            );
+          }
+          --paper-item-selected: {
+            background-color: var(
+              --exm-theme-table-toolbar-filter-item-active-bg-color,
+              var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
+            );
+          }
+          --paper-button-ink-color: var(
+            --exm-theme-table-toolbar-filter-item-active-bg-color,
+            var(--mdc-theme-secondary)
+          );
+          --paper-input-container-color: var(--exm-grid-toolbar-active-on-surface-color, var(--mdc-theme-on-surface));
+          --paper-input-container-focus-color: var(
+            --exm-grid-toolbar-active-on-surface-color,
+            var(--mdc-theme-primary)
+          );
+
+          --exm-paper-combobox-selected-item-color: var(
+            --exm-grid-toolbar-active-on-surface-color,
+            var(--mdc-theme-on-surface)
+          );
+          --exm-paper-combobox-selected-item-bg-color: var(--exm-grid-toolbar-bg-active-surface-color, transparent);
+          --exm-paper-combobox-dropdown-button-color: var(
+            --exm-grid-toolbar-active-on-surface-color,
+            var(--mdc-theme-on-surface)
+          );
+          --exm-paper-combobox-dropdown-button-bg-color: var(--exm-grid-toolbar-bg-active-surface-color, transparent);
+          --exm-paper-combobox-dropdown-list-color: var(
+            --exm-grid-toolbar-active-on-surface-color,
+            var(--mdc-theme-on-surface)
+          );
+          --exm-paper-combobox-dropdown-list-bg-color: var(
+            --exm-grid-toolbar-bg-active-surface-color,
+            var(--mdc-theme-surface)
+          );
+        }
+        .title {
+          display: flex;
+          align-items: center;
+          height: 48px;
+          flex: 1;
+        }
+        .title > exm-toolbar-search {
+          flex: 1;
+        }
+      </style>
+      <exm-grid-base-toolbar ?disableSeperator=${this.disableSeperator}>
+        <div slot="actions">${this.renderActions()}</div>
+        ${this.searchEnabled
+            ? html `<div class="title" slot="description">${this.renderSearch()}</div>`
+            : html `<div class="title" slot="description">${this.renderDescription()}</div>`}
+
+        <div slot="filters">${this.renderFilters()}</div>
+        <div slot="settings">${this.renderSettings()}</div>
+        <div class="extra" slot="extra"><slot name="extra"></slot></div>
+      </exm-grid-base-toolbar>
+    `;
+    }
+};
+ExmgGridToolbar.styles = [
+    css `
+      exm-grid-toolbar-filters {
+        padding-left: 10px;
+        border-radius: 4px;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], ExmgGridToolbar.prototype, "description", void 0);
+__decorate([
+    property({ type: Array })
+], ExmgGridToolbar.prototype, "actions", void 0);
+__decorate([
+    property({ type: Array })
+], ExmgGridToolbar.prototype, "filters", void 0);
+__decorate([
+    property({ type: Array })
+], ExmgGridToolbar.prototype, "settings", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgGridToolbar.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: String })
+], ExmgGridToolbar.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgGridToolbar.prototype, "disableSeperator", void 0);
+ExmgGridToolbar = __decorate([
+    customElement('exm-grid-toolbar')
+], ExmgGridToolbar);
+export { ExmgGridToolbar };
+//# sourceMappingURL=exm-grid-toolbar.js.map

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

@@ -0,0 +1,130 @@
+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 ExmgGrid, 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 ExmgGrid extends ExmgElement {
+    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': ExmgGrid;
+    }
+}
+export {};