@exmg/exm-grid 1.1.36 → 1.2.0

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-pagination.js

@@ -0,0 +1,153 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+import './exm-grid-toolbar-filters.js';
+import { style } from '../styles/exm-grid-pagination-styles-css.js';
+/**
+ * ### Styling
+ * The following custom properties  are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--exm-theme-table-pagination-bg-color` | pagination background color | `var(--mdc-theme-surface, #ffffff);`
+ * `--exm-theme-table-pagination-color` | pagination foreground (mostly text) color | `var(--mdc-theme-on-surface, #02182b);`
+ */
+let ExmGridPagination = class ExmGridPagination extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.pageSizeLabel = 'Rows per page:';
+        this.pageSizeOptions = [10, 20, 30];
+        this.pageSize = this.pageSizeOptions[0];
+        this.pageIndex = 0;
+        this.itemCount = 0;
+    }
+    renderPageSizeLabel() {
+        return html ` ${this.pageSizeLabel} `;
+    }
+    renderPageSizeOptions() {
+        const items = (this.pageSizeOptions || []).map((item) => ({ label: `${item}`, value: `${item}` }));
+        return html `
+      <exm-grid-toolbar-filters
+        id="pageSizeOptions"
+        selected="${this.pageSize}"
+        .items=${items}
+        @exm-grid-toolbar-filter-changed="${this.handleOnPageSizeChanged}"
+      ></exm-grid-toolbar-filters>
+    `;
+    }
+    renderPageRangeLabel() {
+        if (this.itemCount > 0) {
+            return html `
+        <span>
+          ${this.pageIndex * this.pageSize + 1}- ${Math.min((this.pageIndex + 1) * this.pageSize, this.itemCount)} of
+          ${this.itemCount}
+        </span>
+      `;
+        }
+        return html ` <span>${this.pageIndex * this.pageSize + 1}-${(this.pageIndex + 1) * this.pageSize}</span> `;
+    }
+    renderPageRangeActions() {
+        return html ` ${this.renderPrevPage()} ${this.renderNextPage()} `;
+    }
+    renderPrevPage() {
+        const enabled = this.pageIndex > 0;
+        return html `
+      <md-icon-button
+        id="prevPageBtn"
+        ?disabled="${!enabled}"
+        class="actions"
+        title="Previous page"
+        @click="${enabled ? this.handleOnClickPrev : undefined}"
+        ><md-icon>navigate_before</md-icon></md-icon-button
+      >
+    `;
+    }
+    renderNextPage() {
+        const enabled = this.itemCount && this.itemCount > (this.pageIndex + 1) * this.pageSize;
+        return html `
+      <md-icon-button
+        id="nextPageBtn"
+        ?disabled="${!enabled}"
+        class="actions"
+        title="Next page"
+        @click="${enabled ? this.handleOnClickNext : undefined}"
+        ><md-icon>navigate_next</md-icon></md-icon-button
+      >
+    `;
+    }
+    fireEventPageChanged(page) {
+        this.dispatchEvent(new CustomEvent('exm-grid-pagination-page-changed', { bubbles: true, composed: true, detail: { page } }));
+    }
+    handleOnClickPrev(e) {
+        e.preventDefault();
+        this.pageIndex = this.pageIndex - 1;
+        this.fireEventPageChanged(this.pageIndex);
+        return false;
+    }
+    handleOnClickNext(e) {
+        e.preventDefault();
+        this.pageIndex = this.pageIndex + 1;
+        this.fireEventPageChanged(this.pageIndex);
+        return false;
+    }
+    handleOnPageSizeChanged(e) {
+        const { value } = e.detail;
+        if (typeof value !== 'undefined') {
+            this.pageSize = parseInt(value, 10);
+            this.pageIndex = 0;
+            this.dispatchEvent(new CustomEvent('exm-grid-pagination-page-size-changed', {
+                bubbles: true,
+                composed: true,
+                detail: { pageSize: this.pageSize, page: this.pageIndex },
+            }));
+        }
+    }
+    render() {
+        // tslint:disable:max-line-length
+        return html `
+      <style>
+        :host {
+          md-icon-button {
+            fill: var(--md-sys-color-on-surface);
+          }
+        }
+      </style>
+      <div class="wrapper">
+        <div class="page-size">
+          <div class="page-size-label">${this.renderPageSizeLabel()}</div>
+          <div class="page-size-options">${this.renderPageSizeOptions()}</div>
+        </div>
+        <div class="page-range">
+          <div class="page-range-label">${this.renderPageRangeLabel()}</div>
+          <div class="page-range-actions">${this.renderPageRangeActions()}</div>
+        </div>
+        <div></div>
+      </div>
+    `;
+        // tslint:enable:max-line-length
+    }
+};
+ExmGridPagination.styles = [style];
+__decorate([
+    property({ type: String, attribute: 'page-size-label' })
+], ExmGridPagination.prototype, "pageSizeLabel", void 0);
+__decorate([
+    property({ type: Array, attribute: 'page-size-options' })
+], ExmGridPagination.prototype, "pageSizeOptions", void 0);
+__decorate([
+    property({ type: Number, attribute: 'page-size' })
+], ExmGridPagination.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Number, attribute: 'page-index' })
+], ExmGridPagination.prototype, "pageIndex", void 0);
+__decorate([
+    property({ type: Number, attribute: 'item-count' })
+], ExmGridPagination.prototype, "itemCount", void 0);
+ExmGridPagination = __decorate([
+    customElement('exm-grid-pagination')
+], ExmGridPagination);
+export { ExmGridPagination };
+//# sourceMappingURL=exm-grid-pagination.js.map

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-setting-selection-list.d.ts

@@ -0,0 +1,24 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import { SettingSelectionListItem } from './types/exm-grid-toolbar-types.js';
+export declare class ExmGridSettingSelectionList extends ExmgElement {
+    tooltip: string;
+    icon: string;
+    settingData: SettingSelectionListItem[];
+    private menu?;
+    private dispatchSettingsChanged;
+    private handleListAction;
+    static styles: import("lit").CSSResult[];
+    protected firstUpdated(): Promise<void>;
+    private saveSettingsListToLocalStorage;
+    private getSettingsListFromLocalStorage;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-grid-setting-selection-list': ExmGridSettingSelectionList;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-setting-selection-list.js

@@ -0,0 +1,124 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import { style } from '../styles/exm-grid-setting-selection-list-styles-css.js';
+let ExmGridSettingSelectionList = class ExmGridSettingSelectionList extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.tooltip = '';
+        this.icon = 'filter_list';
+        this.settingData = [];
+    }
+    dispatchSettingsChanged() {
+        this.dispatchEvent(new CustomEvent('exm-grid-setting-changed', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: [...this.settingData],
+            },
+        }));
+    }
+    handleListAction(id) {
+        const index = this.settingData.findIndex((d) => d.id === id);
+        this.settingData[index].selected = !this.settingData[index].selected;
+        this.settingData = [...this.settingData];
+        this.saveSettingsListToLocalStorage();
+        this.dispatchSettingsChanged();
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        this.getSettingsListFromLocalStorage();
+    }
+    saveSettingsListToLocalStorage() {
+        const key = `columnSettingsV2:${window.location.pathname}`;
+        const value = this.settingData;
+        // .filter((d) => d.selected)
+        // .map((d) => d.id)
+        // .join(',');
+        localStorage.setItem(key, JSON.stringify(value));
+        return JSON.stringify(value);
+    }
+    getSettingsListFromLocalStorage() {
+        const key = `columnSettingsV2:${window.location.pathname}`;
+        let value = localStorage.getItem(key);
+        if (!value) {
+            value = this.saveSettingsListToLocalStorage();
+        }
+        const storageSettings = JSON.parse(value);
+        for (const setting of this.settingData) {
+            const ss = storageSettings === null || storageSettings === void 0 ? void 0 : storageSettings.find((s) => s.id === setting.id);
+            // setting not found in storage add
+            if (!ss) {
+                storageSettings === null || storageSettings === void 0 ? void 0 : storageSettings.push(setting);
+            }
+            // do not update checked state from settingsData if exists in storage
+        }
+        const toBeDeleted = [];
+        for (const storageSetting of storageSettings || []) {
+            const ss = this.settingData.find((s) => s.id === storageSetting.id);
+            // setting not found in settingdate -> remove entry from storage
+            if (!ss) {
+                toBeDeleted.push(storageSetting.id);
+            }
+        }
+        for (const id of toBeDeleted) {
+            const index = storageSettings === null || storageSettings === void 0 ? void 0 : storageSettings.findIndex((s) => s.id === id);
+            if (index && index > -1) {
+                storageSettings === null || storageSettings === void 0 ? void 0 : storageSettings.splice(index, 1);
+            }
+        }
+        this.settingData = [...(storageSettings || [])];
+        this.saveSettingsListToLocalStorage();
+        this.dispatchSettingsChanged();
+    }
+    render() {
+        return html `
+      <md-icon-button
+        id="filterBtn"
+        @click=${() => this.menu.show()}
+        aria-controls="menu"
+        class="mdc-icon-button material-icons action"
+        title="${this.tooltip}"
+        data-mdc-ripple-is-unbounded="true"
+        ><md-icon>${this.icon}</md-icon></md-icon-button
+      >
+
+      <md-menu
+        id="menu"
+        menu-corner="start-end"
+        anchor="filterBtn"
+        role="listbox"
+        aria-label="Column filter options"
+        multi
+        @action="${this.handleListAction}"
+      >
+        ${this.settingData.map((item) => html ` <md-menu-item type="option" keep-open ?selected=${item.selected}>
+              <div slot="headline" @click=${() => this.handleListAction(item.id)}>${item.title}</div>
+            </md-menu-item>`)}
+      </md-menu>
+    `;
+    }
+};
+ExmGridSettingSelectionList.styles = [style];
+__decorate([
+    property({ type: String })
+], ExmGridSettingSelectionList.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String })
+], ExmGridSettingSelectionList.prototype, "icon", void 0);
+__decorate([
+    property({ type: Array })
+], ExmGridSettingSelectionList.prototype, "settingData", void 0);
+__decorate([
+    query('#menu')
+], ExmGridSettingSelectionList.prototype, "menu", void 0);
+ExmGridSettingSelectionList = __decorate([
+    customElement('exm-grid-setting-selection-list')
+], ExmGridSettingSelectionList);
+export { ExmGridSettingSelectionList };
+//# sourceMappingURL=exm-grid-setting-selection-list.js.map

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-smart-toolbar.d.ts

@@ -0,0 +1,31 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import './exm-grid-toolbar.js';
+import { Filter, Setting, SettingSelectionListItem } from './types/exm-grid-toolbar-types.js';
+import { ActionWithCondition } from './types/exm-grid-smart-toolbar-types.js';
+export declare class ExmGridSmartToolbar extends ExmgElement {
+    description: string;
+    actions: ActionWithCondition[];
+    filters: Filter[];
+    settings: Setting[];
+    amountOfSelectedItems: number;
+    showColumnFilter: boolean;
+    columnFilterButtonTooltip: string;
+    columnFilterDialogTitle: string;
+    columnFilterColumns: SettingSelectionListItem[];
+    searchEnabled: boolean;
+    searchPlaceholder: string;
+    disableSeperator: boolean;
+    static styles: import("lit").CSSResult[];
+    private getActions;
+    private shouldActionBeVisible;
+    private isActionAmountSelectedItemsCondition;
+    private checkAmountOfSelectedItemsRangeCondition;
+    private getFilters;
+    private getSettings;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-grid-smart-toolbar': ExmGridSmartToolbar;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-smart-toolbar.js

@@ -0,0 +1,138 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import './exm-grid-toolbar.js';
+import { SettingConfigId, SettingConfigType, } from './types/exm-grid-toolbar-types.js';
+import { ActionConditionType, } from './types/exm-grid-smart-toolbar-types.js';
+let ExmGridSmartToolbar = class ExmGridSmartToolbar extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.description = '';
+        this.actions = [];
+        this.filters = [];
+        this.settings = [];
+        this.amountOfSelectedItems = 0;
+        this.showColumnFilter = false;
+        this.columnFilterButtonTooltip = 'Column selection';
+        this.columnFilterDialogTitle = 'Select columns';
+        this.columnFilterColumns = [];
+        this.searchEnabled = false;
+        this.searchPlaceholder = 'Search';
+        this.disableSeperator = false;
+    }
+    getActions() {
+        return this.actions.filter((action) => {
+            return this.shouldActionBeVisible(action);
+        });
+    }
+    shouldActionBeVisible(action) {
+        if (this.isActionAmountSelectedItemsCondition(action)) {
+            return this.checkAmountOfSelectedItemsRangeCondition(action);
+        }
+        return true;
+    }
+    isActionAmountSelectedItemsCondition(action) {
+        return !!action.condition && action.condition.type === ActionConditionType.AmountOfSelectedItemsRange;
+    }
+    checkAmountOfSelectedItemsRangeCondition(action) {
+        const condition = action.condition;
+        const min = condition.min;
+        if (min !== undefined && this.amountOfSelectedItems < min) {
+            return false;
+        }
+        const max = condition.max;
+        if (max !== undefined && this.amountOfSelectedItems > max) {
+            return false;
+        }
+        return true;
+    }
+    getFilters() {
+        return this.filters.map((filter) => {
+            return {
+                ...filter,
+                disabled: this.amountOfSelectedItems > 0,
+            };
+        });
+    }
+    getSettings() {
+        if (!this.showColumnFilter) {
+            return [];
+        }
+        return [
+            {
+                id: SettingConfigId.ColumnSelector,
+                dialogTitle: this.columnFilterDialogTitle,
+                tooltip: this.columnFilterButtonTooltip,
+                icon: 'filter_list',
+                config: {
+                    type: SettingConfigType.SelectionList,
+                    data: this.columnFilterColumns,
+                },
+            },
+        ];
+    }
+    render() {
+        return html `
+      <exm-grid-toolbar
+        searchPlaceholder=${this.searchPlaceholder}
+        .searchEnabled=${this.searchEnabled}
+        .actions="${this.getActions()}"
+        description="${this.description}"
+        .filters="${this.getFilters()}"
+        .settings="${this.getSettings()}"
+        ?disableSeperator=${this.disableSeperator}
+      >
+        <slot name="extra" slot="extra"></slot>
+      </exm-grid-toolbar>
+    `;
+    }
+};
+ExmGridSmartToolbar.styles = [
+    css `
+      :host {
+        display: block;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], ExmGridSmartToolbar.prototype, "description", void 0);
+__decorate([
+    property({ type: Array })
+], ExmGridSmartToolbar.prototype, "actions", void 0);
+__decorate([
+    property({ type: Array })
+], ExmGridSmartToolbar.prototype, "filters", void 0);
+__decorate([
+    property({ type: Array })
+], ExmGridSmartToolbar.prototype, "settings", void 0);
+__decorate([
+    property({ type: Number, attribute: 'amount-of-selected-items' })
+], ExmGridSmartToolbar.prototype, "amountOfSelectedItems", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-column-filter' })
+], ExmGridSmartToolbar.prototype, "showColumnFilter", void 0);
+__decorate([
+    property({ type: String, attribute: 'column-filter-button-tooltip' })
+], ExmGridSmartToolbar.prototype, "columnFilterButtonTooltip", void 0);
+__decorate([
+    property({ type: String, attribute: 'column-filter-dialog-title' })
+], ExmGridSmartToolbar.prototype, "columnFilterDialogTitle", void 0);
+__decorate([
+    property({ type: Array, attribute: 'column-filter-columns' })
+], ExmGridSmartToolbar.prototype, "columnFilterColumns", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmGridSmartToolbar.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: String })
+], ExmGridSmartToolbar.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmGridSmartToolbar.prototype, "disableSeperator", void 0);
+ExmGridSmartToolbar = __decorate([
+    customElement('exm-grid-smart-toolbar')
+], ExmGridSmartToolbar);
+export { ExmGridSmartToolbar };
+//# sourceMappingURL=exm-grid-smart-toolbar.js.map

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-toolbar-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-toolbar-filters.d.ts

@@ -0,0 +1,36 @@
+import { ExmgElement } from '@exmg/lit-base';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+import '@material/web/button/text-button.js';
+import { Menu } from '@material/web/menu/menu.js';
+export interface FilterItem {
+    label: string;
+    value: string;
+}
+interface Token {
+    id: number | string;
+    text: string;
+}
+export interface EventSelectPayload {
+    value: string;
+    item: Element;
+    token: Token;
+}
+export declare class ExmGridToolbarFilters extends ExmgElement {
+    /**
+     * Gets or sets the selected element. The default is to use the index of the item.
+     * @type {string}
+     */
+    selected?: string;
+    items: FilterItem[];
+    menu?: Menu;
+    /**
+     * Set to true to disable this input.
+     */
+    disabled: boolean;
+    static styles: import("lit").CSSResult[];
+    selectedLabel(): string;
+    _handleMenuClick(value: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-toolbar-filters.js

@@ -0,0 +1,77 @@
+import { __decorate } from "tslib";
+import { ExmgElement } from '@exmg/lit-base';
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-item.js';
+import '@material/web/button/text-button.js';
+let ExmGridToolbarFilters = class ExmGridToolbarFilters extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        /**
+         * Set to true to disable this input.
+         */
+        this.disabled = false;
+    }
+    selectedLabel() {
+        var _a;
+        const item = (_a = this.items) === null || _a === void 0 ? void 0 : _a.find((i) => i.value === this.selected);
+        return item ? item.label : 'No Filter Selected';
+    }
+    _handleMenuClick(value) {
+        if (this.selected !== value) {
+            this.selected = value;
+            this.fire('exm-grid-toolbar-filter-changed', { value });
+        }
+    }
+    render() {
+        var _a;
+        return html `
+      <span style="position: relative;">
+        <md-text-button
+          id="filterBtn"
+          aria-controls="menu"
+          @click=${() => this.menu.show()}
+          ?disabled=${this.disabled}
+          trailing-icon
+          >${this.selectedLabel()} <md-icon slot="icon">expand_more</md-icon></md-text-button
+        >
+        <md-menu id="menu" menu-corner="start-start" anchor="filterBtn" role="listbox" aria-label="Filter options">
+          ${(_a = this.items) === null || _a === void 0 ? void 0 : _a.map((i) => html `<md-menu-item
+                type="option"
+                id="${i.value}"
+                ?selected=${i.value === this.selected}
+                @click=${() => this._handleMenuClick(i.value)}
+              >
+                <div slot="headline">${i.label}</div></md-menu-item
+              >`)}
+        </md-menu>
+      </span>
+    `;
+    }
+};
+ExmGridToolbarFilters.styles = [
+    css `
+      :host {
+        display: block;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], ExmGridToolbarFilters.prototype, "selected", void 0);
+__decorate([
+    property({ type: Array })
+], ExmGridToolbarFilters.prototype, "items", void 0);
+__decorate([
+    query('md-menu')
+], ExmGridToolbarFilters.prototype, "menu", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmGridToolbarFilters.prototype, "disabled", void 0);
+ExmGridToolbarFilters = __decorate([
+    customElement('exm-grid-toolbar-filters')
+], ExmGridToolbarFilters);
+export { ExmGridToolbarFilters };
+//# sourceMappingURL=exm-grid-toolbar-filters.js.map

package/.rollup.cache/root/repo/packages/exm-grid/dist/table/exm-grid-toolbar.d.ts

@@ -0,0 +1,41 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import './exm-grid-toolbar-filters.js';
+import './exm-grid-base-toolbar.js';
+import './exm-grid-setting-selection-list.js';
+import '../search/exm-toolbar-search.js';
+import { Action, Filter, Setting } from './types/exm-grid-toolbar-types.js';
+export declare class ExmGridToolbar extends ExmgElement {
+    static styles: import("lit").CSSResult[];
+    description: string;
+    actions: Action[];
+    filters: Filter[];
+    settings: Setting[];
+    searchEnabled: boolean;
+    searchPlaceholder: string;
+    disableSeperator: boolean;
+    private emitActionExecutedEvent;
+    private emitFilterChangedEvent;
+    private saveFilterInLocalStorage;
+    private getFilterFromLocalStorage;
+    private emitSettingChangedEvent;
+    private renderActions;
+    private renderSearch;
+    private renderDescription;
+    private renderFilters;
+    private renderFilter;
+    private isFilterSingleSelectConfig;
+    private getSelectedFilter;
+    private renderSingleSelectFilter;
+    private renderSettings;
+    private renderSetting;
+    private isSettingSelectionListConfig;
+    private renderSelectionListSetting;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-grid-toolbar': ExmGridToolbar;
+    }
+}