@exmg/exm-grid 1.0.7 → 1.0.8-alpha.21

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

@@ -1,283 +0,0 @@
-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 ExmGridToolbar = class ExmGridToolbar 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>
-    `;
-    }
-};
-ExmGridToolbar.styles = [
-    css `
-      exm-grid-toolbar-filters {
-        padding-left: 10px;
-        border-radius: 4px;
-      }
-    `,
-];
-__decorate([
-    property({ type: String })
-], ExmGridToolbar.prototype, "description", void 0);
-__decorate([
-    property({ type: Array })
-], ExmGridToolbar.prototype, "actions", void 0);
-__decorate([
-    property({ type: Array })
-], ExmGridToolbar.prototype, "filters", void 0);
-__decorate([
-    property({ type: Array })
-], ExmGridToolbar.prototype, "settings", void 0);
-__decorate([
-    property({ type: Boolean })
-], ExmGridToolbar.prototype, "searchEnabled", void 0);
-__decorate([
-    property({ type: String })
-], ExmGridToolbar.prototype, "searchPlaceholder", void 0);
-__decorate([
-    property({ type: Boolean })
-], ExmGridToolbar.prototype, "disableSeperator", void 0);
-ExmGridToolbar = __decorate([
-    customElement('exm-grid-toolbar')
-], ExmGridToolbar);
-export { ExmGridToolbar };
-//# sourceMappingURL=exm-grid-toolbar.js.map

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

@@ -1,130 +0,0 @@
-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 {
-    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 {};