@digital-realty/ix-grid 1.0.37 → 2.0.0-alpha.0

package/dist/IxGrid.d.ts

@@ -1,55 +1,55 @@
-import { LitElement } from 'lit';
-import '@vaadin/grid';
-import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-icon/ix-icon.js';
-import './components/IxGridDownloadMenu.js';
-import './components/IxPagination.js';
-import './components/IxGridColumnFilter.js';
-import './components/IxGridRowFilter.js';
-export interface Row {
-    [key: string]: string;
-}
-export interface Column {
-    name: string;
-    header: string;
-    bodyRenderer: (row: Row) => any;
-    width?: string;
-    sortable?: boolean;
-    filterable?: boolean;
-    hidden?: boolean;
-    frozenToEnd?: boolean;
-}
-export declare class IxGrid extends LitElement {
-    static readonly styles: import("lit").CSSResult[];
-    grid: HTMLElement;
-    columns: Column[];
-    rows: Row[];
-    defaultEmptyText: string;
-    sortedColumn: string;
-    sortDirection: string;
-    hideHeader: boolean;
-    hideFilters: boolean;
-    rowLimit: number;
-    page: number;
-    pageSize: number;
-    pageSizes: number[];
-    recordCount: number;
-    localStorageID: string | undefined;
-    showDownload: boolean;
-    addParamsToURL: boolean;
-    private filters;
-    _columns: Column[];
-    isLoading: boolean;
-    isExpanded: boolean;
-    get columnNames(): string[];
-    private updatePage;
-    handleSort(column?: string): void;
-    private renderColumnHeader;
-    connectedCallback(): void;
-    reorderColumnsFromTable(): Promise<void>;
-    reorderColumnsFromFilter(e: CustomEvent): Promise<void>;
-    private renderHeader;
-    private renderRowLimitControls;
-    private renderPaginationControls;
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import '@vaadin/grid';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './components/IxGridDownloadMenu.js';
+import './components/IxPagination.js';
+import './components/IxGridColumnFilter.js';
+import './components/IxGridRowFilter.js';
+export interface Row {
+    [key: string]: string;
+}
+export interface Column {
+    name: string;
+    header: string;
+    bodyRenderer: (row: Row) => any;
+    width?: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    hidden?: boolean;
+    frozenToEnd?: boolean;
+}
+export declare class IxGrid extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    grid: HTMLElement;
+    columns: Column[];
+    rows: Row[];
+    defaultEmptyText: string;
+    sortedColumn: string;
+    sortDirection: string;
+    hideHeader: boolean;
+    hideFilters: boolean;
+    rowLimit: number;
+    page: number;
+    pageSize: number;
+    pageSizes: number[];
+    recordCount: number;
+    localStorageID: string | undefined;
+    showDownload: boolean;
+    addParamsToURL: boolean;
+    private filters;
+    _columns: Column[];
+    isLoading: boolean;
+    isExpanded: boolean;
+    get columnNames(): string[];
+    private updatePage;
+    handleSort(column?: string): void;
+    private renderColumnHeader;
+    connectedCallback(): void;
+    reorderColumnsFromTable(): Promise<void>;
+    reorderColumnsFromFilter(e: CustomEvent): Promise<void>;
+    private renderHeader;
+    private renderRowLimitControls;
+    private renderPaginationControls;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxGrid.js

@@ -1,39 +1,39 @@
-import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '@vaadin/grid';
-import { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';
-import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-icon/ix-icon.js';
-import './components/IxGridDownloadMenu.js';
-import './components/IxPagination.js';
-import './components/IxGridColumnFilter.js';
-import './components/IxGridRowFilter.js';
-import { IxGridViewStyles } from './grid-view-styles.js';
-import { copy } from './ix-grid-copy.js';
-export class IxGrid extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.columns = [];
-        this.rows = [];
-        this.defaultEmptyText = 'No data to display';
-        this.sortedColumn = '';
-        this.sortDirection = '';
-        this.hideHeader = false;
-        this.hideFilters = false;
-        this.rowLimit = 0;
-        this.page = 1;
-        this.pageSize = 10;
-        this.pageSizes = [5, 10, 25, 100];
-        this.recordCount = 0;
-        this.localStorageID = undefined;
-        this.showDownload = true;
-        this.addParamsToURL = true;
-        this.filters = [];
-        this._columns = [];
-        this.isLoading = false;
-        this.isExpanded = false;
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '@vaadin/grid';
+import { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './components/IxGridDownloadMenu.js';
+import './components/IxPagination.js';
+import './components/IxGridColumnFilter.js';
+import './components/IxGridRowFilter.js';
+import { IxGridViewStyles } from './grid-view-styles.js';
+import { copy } from './ix-grid-copy.js';
+export class IxGrid extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.rows = [];
+        this.defaultEmptyText = 'No data to display';
+        this.sortedColumn = '';
+        this.sortDirection = '';
+        this.hideHeader = false;
+        this.hideFilters = false;
+        this.rowLimit = 0;
+        this.page = 1;
+        this.pageSize = 10;
+        this.pageSizes = [5, 10, 25, 100];
+        this.recordCount = 0;
+        this.localStorageID = undefined;
+        this.showDownload = true;
+        this.addParamsToURL = true;
+        this.filters = [];
+        this._columns = [];
+        this.isLoading = false;
+        this.isExpanded = false;
         this.renderColumnHeader = (column) => html `
     <div
       @click=${() => column.sortable && this.handleSort(column.name)}
@@ -41,41 +41,41 @@ export class IxGrid extends LitElement {
       class="header"
     >
       ${column.header}
-      ${column.sortable
+      ${column.sortable
             ? html `<ix-icon title="Sort" class="header-sort-icon"
-            >${this.sortDirection === 'desc' &&
-                this.sortedColumn === column.name
-                ? `arrow_upward`
+            >${this.sortDirection === 'desc' &&
+                this.sortedColumn === column.name
+                ? `arrow_upward`
                 : `arrow_downward`}</ix-icon
-          >`
+          >`
             : nothing}
     </div>
-  `;
+  `;
         this.renderHeader = () => html `
     <div class="grid-header">
       <slot name="header"><div class="empty"></div></slot>
-      ${this.hideFilters
-            ? nothing
+      ${this.hideFilters
+            ? nothing
             : html `<div class="grid-menu">
             <ix-grid-column-filter
               .columns=${this._columns}
               localStorageID=${ifDefined(this.localStorageID)}
-              @columnFilter=${(e) => {
-                e.detail.columns.forEach((column, id) => {
-                    this._columns[id].hidden = column.hidden;
-                });
-                this.updatePage();
+              @columnFilter=${(e) => {
+                e.detail.columns.forEach((column, id) => {
+                    this._columns[id].hidden = column.hidden;
+                });
+                this.updatePage();
             }}
               @reorderColumns=${this.reorderColumnsFromFilter}
             ></ix-grid-column-filter>
-            ${this.showDownload
-                ? html `<ix-grid-download-menu></ix-grid-download-menu>`
+            ${this.showDownload
+                ? html `<ix-grid-download-menu></ix-grid-download-menu>`
                 : nothing}
             <ix-grid-row-filter
               .columns=${this._columns}
-              @rowFilter=${(e) => {
-                this.filters = e.detail.filters;
-                this.updatePage();
+              @rowFilter=${(e) => {
+                this.filters = e.detail.filters;
+                this.updatePage();
             }}
             ></ix-grid-row-filter>
           </div>`}
@@ -83,16 +83,16 @@ export class IxGrid extends LitElement {
     <div class="touch-edge">
       <slot name="under-header"></slot>
     </div>
-  `;
-        this.renderRowLimitControls = () => {
-            if (this.rows.length <= this.rowLimit)
-                return nothing;
+  `;
+        this.renderRowLimitControls = () => {
+            if (this.rows.length <= this.rowLimit)
+                return nothing;
             return html `
       <div class="row-limit">
         <ix-button
           appearance="text"
-          @click=${() => {
-                this.isExpanded = !this.isExpanded;
+          @click=${() => {
+                this.isExpanded = !this.isExpanded;
             }}
           has-icon
         >
@@ -100,114 +100,114 @@ export class IxGrid extends LitElement {
           <ix-icon slot="icon">${this.isExpanded ? 'remove' : 'add'}</ix-icon>
         </ix-button>
       </div>
-    `;
-        };
+    `;
+        };
         this.renderPaginationControls = () => html `
     <ix-pagination
       .page=${this.page}
       .pageSize=${this.pageSize}
       .pageSizes=${this.pageSizes}
       .recordCount=${this.recordCount}
-      @updatePagination=${(e) => {
-            this.page = e.detail.page;
-            this.pageSize = e.detail.pageSize;
-            this.updatePage();
+      @updatePagination=${(e) => {
+            this.page = e.detail.page;
+            this.pageSize = e.detail.pageSize;
+            this.updatePage();
         }}
     ></ix-pagination>
-  `;
-    }
-    get columnNames() {
-        return this._columns.map((column) => column.name);
-    }
-    async updatePage() {
-        const filters = this.filters.reduce((columnFilters, { columnField, value }) => ({
-            ...columnFilters,
-            [columnField]: value,
-        }), {});
-        if (this.addParamsToURL) {
-            const urlParams = {
-                sort: this.sortedColumn,
-                order: this.sortDirection,
-                page: this.page.toString(),
-                size: this.pageSize.toString(),
-                ...filters,
-            };
-            const url = new URL(window.location.href);
-            const searchParams = new URLSearchParams(urlParams);
-            url.search = searchParams.toString();
-            window.history.replaceState(null, '', url.toString());
-        }
-        this.dispatchEvent(new CustomEvent('change', {
-            detail: {
-                columnName: this.sortedColumn,
-                sortOrder: this.sortDirection,
-                page: this.page,
-                pageSize: this.pageSize,
-                filters,
-            },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleSort(column = '') {
-        if (this.sortedColumn !== column) {
-            this.sortDirection = 'asc';
-        }
-        else {
-            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
-        }
-        this.sortedColumn = column;
-        this.updatePage();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._columns = this.columns;
-    }
-    async reorderColumnsFromTable() {
-        var _a, _b;
-        // calulate column order from table header flex order
-        const headerNodes = Array.from(((_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('th')) || []);
-        if (headerNodes.length) {
-            const columnOrder = headerNodes
-                .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))
-                .sort((a, b) => a.flexPosition - b.flexPosition)
-                .map(el => el.id);
-            headerNodes.forEach((el, id) => {
-                this._columns[id].width = el.style.width;
-            });
-            const columnsCorrectlyOrdered = columnOrder.every((x, i) => i === 0 || x > columnOrder[i - 1]);
-            if (!columnsCorrectlyOrdered) {
-                const reorderedColumns = columnOrder.map(id => this._columns[id]);
-                this._columns = [...reorderedColumns];
-                this.isLoading = true;
-                await this.updateComplete;
-                this.isLoading = false;
-            }
-        }
-    }
-    async reorderColumnsFromFilter(e) {
-        this._columns = [...e.detail.reorderedColumns];
-        this.isLoading = true;
-        await this.updateComplete;
-        this.isLoading = false;
-    }
-    render() {
-        var _a;
+  `;
+    }
+    get columnNames() {
+        return this._columns.map((column) => column.name);
+    }
+    async updatePage() {
+        const filters = this.filters.reduce((columnFilters, { columnField, value }) => ({
+            ...columnFilters,
+            [columnField]: value,
+        }), {});
+        if (this.addParamsToURL) {
+            const urlParams = {
+                sort: this.sortedColumn,
+                order: this.sortDirection,
+                page: this.page.toString(),
+                size: this.pageSize.toString(),
+                ...filters,
+            };
+            const url = new URL(window.location.href);
+            const searchParams = new URLSearchParams(urlParams);
+            url.search = searchParams.toString();
+            window.history.replaceState(null, '', url.toString());
+        }
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                columnName: this.sortedColumn,
+                sortOrder: this.sortDirection,
+                page: this.page,
+                pageSize: this.pageSize,
+                filters,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleSort(column = '') {
+        if (this.sortedColumn !== column) {
+            this.sortDirection = 'asc';
+        }
+        else {
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        this.sortedColumn = column;
+        this.updatePage();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._columns = this.columns;
+    }
+    async reorderColumnsFromTable() {
+        var _a, _b;
+        // calulate column order from table header flex order
+        const headerNodes = Array.from(((_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('th')) || []);
+        if (headerNodes.length) {
+            const columnOrder = headerNodes
+                .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))
+                .sort((a, b) => a.flexPosition - b.flexPosition)
+                .map(el => el.id);
+            headerNodes.forEach((el, id) => {
+                this._columns[id].width = el.style.width;
+            });
+            const columnsCorrectlyOrdered = columnOrder.every((x, i) => i === 0 || x > columnOrder[i - 1]);
+            if (!columnsCorrectlyOrdered) {
+                const reorderedColumns = columnOrder.map(id => this._columns[id]);
+                this._columns = [...reorderedColumns];
+                this.isLoading = true;
+                await this.updateComplete;
+                this.isLoading = false;
+            }
+        }
+    }
+    async reorderColumnsFromFilter(e) {
+        this._columns = [...e.detail.reorderedColumns];
+        this.isLoading = true;
+        await this.updateComplete;
+        this.isLoading = false;
+    }
+    render() {
+        var _a;
         return html `
       <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>
         ${this.hideHeader ? nothing : this.renderHeader()}
-        ${!this.isLoading
+        ${!this.isLoading
             ? html `<vaadin-grid
-              .items=${this.rowLimit > 0 && !this.isExpanded
-                ? this.rows.slice(0, this.rowLimit)
+              .items=${this.rowLimit > 0 && !this.isExpanded
+                ? this.rows.slice(0, this.rowLimit)
                 : this.rows}
               all-rows-visible
               column-reordering-allowed
               theme="no-border"
               @mouseup=${this.reorderColumnsFromTable}
             >
-              ${this._columns.some(col => !col.hidden)
-                ? (_a = this._columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
+              ${this._columns.some(col => !col.hidden)
+                ? (_a = this._columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
                     ? html `<vaadin-grid-column
                           ${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
                           ${columnBodyRenderer(column.bodyRenderer, [])}
@@ -215,79 +215,79 @@ export class IxGrid extends LitElement {
                           width=${ifDefined(column.width)}
                           ?hidden=${column.hidden}
                           ?frozen-to-end=${column.frozenToEnd}
-                        ></vaadin-grid-column>`
-                    : nothing)
+                        ></vaadin-grid-column>`
+                    : nothing)
                 : html `<vaadin-grid-column></vaadin-grid-column>`}
-            </vaadin-grid>`
+            </vaadin-grid>`
             : nothing}
-        ${this.rowLimit > 0
-            ? this.renderRowLimitControls()
+        ${this.rowLimit > 0
+            ? this.renderRowLimitControls()
             : this.renderPaginationControls()}
 
         <slot name="footer"></slot>
       </div>
-    `;
-    }
-}
-IxGrid.styles = [IxGridViewStyles];
-__decorate([
-    query('vaadin-grid')
-], IxGrid.prototype, "grid", void 0);
-__decorate([
-    property({ type: Array })
-], IxGrid.prototype, "columns", void 0);
-__decorate([
-    property({ type: Array })
-], IxGrid.prototype, "rows", void 0);
-__decorate([
-    property({ type: String })
-], IxGrid.prototype, "defaultEmptyText", void 0);
-__decorate([
-    property({ type: String })
-], IxGrid.prototype, "sortedColumn", void 0);
-__decorate([
-    property({ type: String })
-], IxGrid.prototype, "sortDirection", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxGrid.prototype, "hideHeader", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'hide-filters' })
-], IxGrid.prototype, "hideFilters", void 0);
-__decorate([
-    property({ type: Number })
-], IxGrid.prototype, "rowLimit", void 0);
-__decorate([
-    property({ type: Number })
-], IxGrid.prototype, "page", void 0);
-__decorate([
-    property({ type: Number })
-], IxGrid.prototype, "pageSize", void 0);
-__decorate([
-    property({ type: Array })
-], IxGrid.prototype, "pageSizes", void 0);
-__decorate([
-    property({ type: Number })
-], IxGrid.prototype, "recordCount", void 0);
-__decorate([
-    property({ type: String })
-], IxGrid.prototype, "localStorageID", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxGrid.prototype, "showDownload", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'add-params-to-url' })
-], IxGrid.prototype, "addParamsToURL", void 0);
-__decorate([
-    state()
-], IxGrid.prototype, "filters", void 0);
-__decorate([
-    state()
-], IxGrid.prototype, "_columns", void 0);
-__decorate([
-    state()
-], IxGrid.prototype, "isLoading", void 0);
-__decorate([
-    state()
-], IxGrid.prototype, "isExpanded", void 0);
+    `;
+    }
+}
+IxGrid.styles = [IxGridViewStyles];
+__decorate([
+    query('vaadin-grid')
+], IxGrid.prototype, "grid", void 0);
+__decorate([
+    property({ type: Array })
+], IxGrid.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], IxGrid.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], IxGrid.prototype, "defaultEmptyText", void 0);
+__decorate([
+    property({ type: String })
+], IxGrid.prototype, "sortedColumn", void 0);
+__decorate([
+    property({ type: String })
+], IxGrid.prototype, "sortDirection", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGrid.prototype, "hideHeader", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-filters' })
+], IxGrid.prototype, "hideFilters", void 0);
+__decorate([
+    property({ type: Number })
+], IxGrid.prototype, "rowLimit", void 0);
+__decorate([
+    property({ type: Number })
+], IxGrid.prototype, "page", void 0);
+__decorate([
+    property({ type: Number })
+], IxGrid.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Array })
+], IxGrid.prototype, "pageSizes", void 0);
+__decorate([
+    property({ type: Number })
+], IxGrid.prototype, "recordCount", void 0);
+__decorate([
+    property({ type: String })
+], IxGrid.prototype, "localStorageID", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGrid.prototype, "showDownload", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'add-params-to-url' })
+], IxGrid.prototype, "addParamsToURL", void 0);
+__decorate([
+    state()
+], IxGrid.prototype, "filters", void 0);
+__decorate([
+    state()
+], IxGrid.prototype, "_columns", void 0);
+__decorate([
+    state()
+], IxGrid.prototype, "isLoading", void 0);
+__decorate([
+    state()
+], IxGrid.prototype, "isExpanded", void 0);
 //# sourceMappingURL=IxGrid.js.map