@digital-realty/ix-grid 1.0.46 → 1.0.48

package/demo/columns.js

@@ -1,24 +1,5 @@
 import { html } from 'lit';
 
-const contactIcon = (status) => {
-  const statusMap = {
-    active: ['check_circle', 'Active'],
-    invited: ['mail', 'Invited'],
-    declined: ['do_not_disturb_on', 'Declined'],
-    suspended: ['warning', 'Suspended'],
-    removed: ['delete', 'Removed'],
-  };
-
-  const [icon, title] = statusMap[status] || [null, null];
-
-  if (icon && title) {
-    return html`<span class="${icon} material-icons" title="${title}"
-      >${icon}</span
-    >`;
-  }
-  return null;
-};
-
 export const columns = [
   {
     name: 'firstName',
@@ -57,7 +38,7 @@ export const columns = [
     bodyRenderer: (row) => html` <div class="accounts">
       ${row.accounts.map(
         (account) =>
-          html` ${contactIcon(account.status.toLowerCase())}<span
+          html`<span
               class="account-name"
               >${account.name}</span
             >`

package/demo/index.html

@@ -130,7 +130,7 @@
               ]}
             ></ix-grid-nav>
             </div>
-            <div slot="no-rows"><ix-grid-no-rows></ix-grid-no-rows></div>
+            <div slot="no-rows"><ix-grid-no-rows message="No data to display"></ix-grid-no-rows></div>
           </ix-grid>
         </div>
       `,

package/dist/IxGrid.d.ts

@@ -45,14 +45,30 @@ export declare class IxGrid extends LitElement {
     private filters;
     isLoading: boolean;
     isExpanded: boolean;
+    get isPersistable(): boolean;
     get columnNames(): string[];
+    get columnsLocalStorageKey(): string;
+    get arrangedColumns(): {
+        width: string | undefined;
+        name: string;
+        header: string;
+        bodyRenderer: (row: Row) => any;
+        sortable?: boolean | undefined;
+        filterable?: boolean | undefined;
+        hidden?: boolean | undefined;
+        frozenToEnd?: boolean | undefined;
+        filterOperators?: FilterOperator[] | undefined;
+    }[];
     private updatePage;
     handleSort(column?: string): void;
     private renderColumnHeader;
+    setColumnsToLocalStorage(columns: Column[]): void;
     reorderColumnsFromTable(): Promise<void>;
     reorderColumnsFromFilter(e: CustomEvent): Promise<void>;
+    handleOnColumnFilter(e: CustomEvent): void;
     private renderHeader;
     private renderRowLimitControls;
     private renderPaginationControls;
+    renderColumns(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/IxGrid.js

@@ -59,14 +59,9 @@ export class IxGrid extends LitElement {
             ? 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();
-            }}
+              .columns=${this.arrangedColumns}
+              columnsLocalStorageKey=${ifDefined(this.columnsLocalStorageKey)}
+              @columnFilter=${(e) => this.handleOnColumnFilter(e)}
               @reorderColumns=${this.reorderColumnsFromFilter}
             ></ix-grid-column-filter>
             ${this.showDownload
@@ -119,9 +114,41 @@ export class IxGrid extends LitElement {
     ></ix-pagination>
   `;
     }
+    get isPersistable() {
+        if (this.localStorageID)
+            return true;
+        return false;
+    }
     get columnNames() {
         return this.columns.map((column) => column.name);
     }
+    get columnsLocalStorageKey() {
+        return `ix-grid-${this.localStorageID}-columns`;
+    }
+    get arrangedColumns() {
+        let colums = [];
+        if (this.isPersistable) {
+            const preservedColumns = JSON.parse(localStorage.getItem(this.columnsLocalStorageKey) || '[]');
+            if (preservedColumns.length > 0)
+                colums = preservedColumns.map((c) => {
+                    const column = this.columns.find((col) => col.name === c.name);
+                    return {
+                        ...column,
+                        hidden: c.hidden,
+                        frozenToEnd: c.frozenToEnd,
+                        width: !c.width ? undefined : c.width,
+                    };
+                });
+        }
+        if (colums.length === 0)
+            colums = [...this.columns];
+        return colums
+            .filter(col => col)
+            .map((column) => ({
+            ...column,
+            width: !column.width ? undefined : column.width,
+        }));
+    }
     async updatePage() {
         const filters = this.filters.reduce((columnFilters, { columnField, value }) => ({
             ...columnFilters,
@@ -166,8 +193,21 @@ export class IxGrid extends LitElement {
         this.sortedColumn = column;
         this.updatePage();
     }
+    setColumnsToLocalStorage(columns) {
+        if (this.isPersistable) {
+            localStorage.setItem(this.columnsLocalStorageKey, JSON.stringify(columns));
+        }
+    }
     async reorderColumnsFromTable() {
         var _a, _b;
+        const visibleColumns = this.arrangedColumns.filter((column) => column.hidden !== true);
+        const hiddenColumns = this.arrangedColumns.filter((column) => column.hidden === true);
+        const frozenColumns = this.arrangedColumns.filter((column) => column.frozenToEnd === true);
+        const allColumns = [
+            ...visibleColumns.filter(column => (column === null || column === void 0 ? void 0 : column.frozenToEnd) !== true),
+            ...hiddenColumns.filter(column => (column === null || column === void 0 ? void 0 : column.frozenToEnd) !== true),
+            ...frozenColumns,
+        ];
         // 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) {
@@ -175,27 +215,54 @@ export class IxGrid extends LitElement {
                 .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]);
+            let reorderedColumns = [];
             if (!columnsCorrectlyOrdered) {
-                const reorderedColumns = columnOrder.map(id => this.columns[id]);
-                this.columns = [...reorderedColumns];
+                reorderedColumns = columnOrder.map(id => allColumns[id]);
+                this.columns = [
+                    ...reorderedColumns.filter(column => column.hidden !== true && (column === null || column === void 0 ? void 0 : column.frozenToEnd) !== true),
+                    ...hiddenColumns.filter(column => (column === null || column === void 0 ? void 0 : column.frozenToEnd) !== true),
+                    ...frozenColumns,
+                ];
                 this.isLoading = true;
                 await this.updateComplete;
                 this.isLoading = false;
             }
+            this.setColumnsToLocalStorage(reorderedColumns.length > 0 ? [...this.columns] : [...allColumns]);
         }
     }
     async reorderColumnsFromFilter(e) {
         this.columns = [...e.detail.reorderedColumns];
+        this.setColumnsToLocalStorage([...this.columns]);
         this.isLoading = true;
         await this.updateComplete;
         this.isLoading = false;
     }
+    handleOnColumnFilter(e) {
+        e.detail.columns.forEach((column, id) => {
+            this.columns[id].hidden = column === null || column === void 0 ? void 0 : column.hidden;
+        });
+        this.updatePage();
+    }
+    renderColumns() {
+        if (this.arrangedColumns.length > 0) {
+            return html `${this.arrangedColumns.map((column) => {
+                if (column.hidden === true)
+                    return nothing;
+                return html `<vaadin-grid-column
+          ${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
+          ${columnBodyRenderer(column.bodyRenderer, [])}
+          resizable
+          width=${ifDefined(column.width)}
+          ?hidden=${column.hidden}
+          ?frozen-to-end=${column.frozenToEnd}
+          path=${column.name}
+        ></vaadin-grid-column>`;
+            })}`;
+        }
+        return html `<vaadin-grid-column></vaadin-grid-column>`;
+    }
     render() {
-        var _a;
         return html `
       <div
         class=${`grid-container ${this.isLoading ? 'loading' : ''} ${this.variantClass}`}
@@ -211,19 +278,7 @@ export class IxGrid extends LitElement {
                 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
-                    ? html `<vaadin-grid-column
-                            ${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
-                            ${columnBodyRenderer(column.bodyRenderer, [])}
-                            resizable
-                            width=${ifDefined(column.width)}
-                            ?hidden=${column.hidden}
-                            ?frozen-to-end=${column.frozenToEnd}
-                            path=${column.name}
-                          ></vaadin-grid-column>`
-                    : nothing)
-                : html `<vaadin-grid-column></vaadin-grid-column>`}
+                ${this.renderColumns()}
               </vaadin-grid>
               ${this.rows.length === 0 && !this.isLoading
                 ? html `<slot name="no-rows"></slot>`

package/dist/IxGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxGridDownloadMenu.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\nimport { IxGridDownloadMenuItemModel } from './models/IxGridDownloadMenuItemModel.js';\n\nexport interface Row {\n  [key: string]: string;\n}\n\nexport type FilterOperator = 'equals' | 'contains';\n\nexport interface Column {\n  name: string;\n  header: string;\n  bodyRenderer: (row: Row) => any;\n  width?: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  hidden?: boolean;\n  frozenToEnd?: boolean;\n  filterOperators?: FilterOperator[];\n}\n\nexport class IxGrid extends LitElement {\n  static readonly styles = [IxGridViewStyles];\n\n  @query('vaadin-grid') grid!: HTMLElement;\n\n  @property({ type: String }) variantClass = '';\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: Array }) rows: Row[] = [];\n\n  @property({ type: String }) defaultEmptyText = 'No data to display';\n\n  @property({ type: String }) sortedColumn = '';\n\n  @property({ type: String }) sortDirection = '';\n\n  @property({ type: Boolean }) hideHeader = false;\n\n  @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n  @property({ type: Number }) rowLimit: number = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: String }) localStorageID: string | undefined = undefined;\n\n  @property({ type: Boolean }) showDownload = true;\n\n  @property({ type: Array }) downloadMenuItems: IxGridDownloadMenuItemModel[] =\n    [];\n\n  @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n    true;\n\n  @state() private filters: Filter[] = [];\n\n  @state() isLoading = false;\n\n  @state() isExpanded = false;\n\n  get columnNames() {\n    return this.columns.map((column: Column) => column.name);\n  }\n\n  private async updatePage() {\n    const filters = this.filters.reduce(\n      (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n        ...columnFilters,\n        [columnField]: value,\n      }),\n      {}\n    );\n\n    if (this.addParamsToURL) {\n      const urlParams: { [key: string]: string } = {\n        sort: this.sortedColumn,\n        order: this.sortDirection,\n        page: this.page.toString(),\n        size: this.pageSize.toString(),\n        ...filters,\n      };\n\n      const url = new URL(window.location.href);\n      const searchParams = new URLSearchParams(urlParams);\n      url.search = searchParams.toString();\n      window.history.replaceState(null, '', url.toString());\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          columnName: this.sortedColumn,\n          sortOrder: this.sortDirection,\n          page: this.page,\n          pageSize: this.pageSize,\n          filters,\n          filtersOperators: this.filters.map((f: Filter) => ({\n            columnField: f.columnField,\n            operator: f.operatorValue,\n          })),\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  handleSort(column: string = '') {\n    if (this.sortedColumn !== column) {\n      this.sortDirection = 'asc';\n    } else {\n      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n    }\n    this.sortedColumn = column;\n\n    this.updatePage();\n  }\n\n  private renderColumnHeader = (column: Column) => html`\n    <div\n      @click=${() => column.sortable && this.handleSort(column.name)}\n      @keyDown=${() => column.sortable && this.handleSort(column.name)}\n      class=\"header\"\n    >\n      ${column.header}\n      ${column.sortable\n        ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n            >${this.sortDirection === 'desc' &&\n            this.sortedColumn === column.name\n              ? `arrow_upward`\n              : `arrow_downward`}</ix-icon\n          >`\n        : nothing}\n    </div>\n  `;\n\n  async reorderColumnsFromTable() {\n    // calulate column order from table header flex order\n    const headerNodes = Array.from(\n      this.grid?.shadowRoot?.querySelectorAll('th') || []\n    );\n    if (headerNodes.length) {\n      const columnOrder = headerNodes\n        .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n        .sort((a, b) => a.flexPosition - b.flexPosition)\n        .map(el => el.id);\n      headerNodes.forEach((el, id) => {\n        this.columns[id].width = el.style.width;\n      });\n      const columnsCorrectlyOrdered = columnOrder.every(\n        (x, i) => i === 0 || x > columnOrder[i - 1]\n      );\n      if (!columnsCorrectlyOrdered) {\n        const reorderedColumns = columnOrder.map(id => this.columns[id]);\n        this.columns = [...reorderedColumns];\n        this.isLoading = true;\n        await this.updateComplete;\n        this.isLoading = false;\n      }\n    }\n  }\n\n  async reorderColumnsFromFilter(e: CustomEvent) {\n    this.columns = [...e.detail.reorderedColumns];\n    this.isLoading = true;\n    await this.updateComplete;\n    this.isLoading = false;\n  }\n\n  private renderHeader = () => html`\n    <div class=\"grid-header\">\n      <slot name=\"header\"><div class=\"empty\"></div></slot>\n      ${this.hideFilters\n        ? nothing\n        : html`<div class=\"grid-menu\">\n            <ix-grid-column-filter\n              .columns=${this.columns}\n              localStorageID=${ifDefined(this.localStorageID)}\n              @columnFilter=${(e: CustomEvent) => {\n                e.detail.columns.forEach((column: Column, id: number) => {\n                  this.columns[id].hidden = column.hidden;\n                });\n                this.updatePage();\n              }}\n              @reorderColumns=${this.reorderColumnsFromFilter}\n            ></ix-grid-column-filter>\n            ${this.showDownload\n              ? html`<ix-grid-download-menu\n                  .items=${this.downloadMenuItems}\n                ></ix-grid-download-menu>`\n              : nothing}\n            <ix-grid-row-filter\n              .columns=${this.columns}\n              @rowFilter=${(e: CustomEvent) => {\n                this.filters = e.detail.filters;\n                this.updatePage();\n              }}\n            ></ix-grid-row-filter>\n          </div>`}\n    </div>\n    <div class=\"touch-edge\">\n      <slot name=\"under-header\"></slot>\n    </div>\n  `;\n\n  private renderRowLimitControls = () => {\n    if (this.rows.length <= this.rowLimit) return nothing;\n\n    return html`\n      <div class=\"row-limit\">\n        <ix-button\n          appearance=\"text\"\n          @click=${() => {\n            this.isExpanded = !this.isExpanded;\n          }}\n          has-icon\n        >\n          ${this.isExpanded ? copy.viewLess : copy.viewMore}\n          <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n        </ix-button>\n      </div>\n    `;\n  };\n\n  private renderPaginationControls = () => html`\n    <ix-pagination\n      .page=${this.page}\n      .pageSize=${this.pageSize}\n      .pageSizes=${this.pageSizes}\n      .recordCount=${this.recordCount}\n      @updatePagination=${(e: CustomEvent) => {\n        this.page = e.detail.page;\n        this.pageSize = e.detail.pageSize;\n        this.updatePage();\n      }}\n    ></ix-pagination>\n  `;\n\n  render() {\n    return html`\n      <div\n        class=${`grid-container ${this.isLoading ? 'loading' : ''} ${\n          this.variantClass\n        }`}\n      >\n        ${this.hideHeader ? nothing : this.renderHeader()}\n        ${!this.isLoading\n          ? html`<vaadin-grid\n                .items=${this.rowLimit > 0 && !this.isExpanded\n                  ? this.rows.slice(0, this.rowLimit)\n                  : this.rows}\n                all-rows-visible\n                column-reordering-allowed\n                theme=\"no-border\"\n                @mouseup=${this.reorderColumnsFromTable}\n              >\n                ${this.columns.some(col => !col.hidden)\n                  ? this.columns?.map((column: Column) =>\n                      column.name\n                        ? html`<vaadin-grid-column\n                            ${columnHeaderRenderer(\n                              () => this.renderColumnHeader(column),\n                              this.sortDirection\n                            )}\n                            ${columnBodyRenderer(column.bodyRenderer, [])}\n                            resizable\n                            width=${ifDefined(column.width)}\n                            ?hidden=${column.hidden}\n                            ?frozen-to-end=${column.frozenToEnd}\n                            path=${column.name}\n                          ></vaadin-grid-column>`\n                        : nothing\n                    )\n                  : html`<vaadin-grid-column></vaadin-grid-column>`}\n              </vaadin-grid>\n              ${this.rows.length === 0 && !this.isLoading\n                ? html`<slot name=\"no-rows\"></slot>`\n                : nothing}`\n          : nothing}\n        ${this.rowLimit > 0\n          ? this.renderRowLimitControls()\n          : this.renderPaginationControls()}\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxGridDownloadMenu.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\nimport { IxGridDownloadMenuItemModel } from './models/IxGridDownloadMenuItemModel.js';\n\nexport interface Row {\n  [key: string]: string;\n}\n\nexport type FilterOperator = 'equals' | 'contains';\n\nexport interface Column {\n  name: string;\n  header: string;\n  bodyRenderer: (row: Row) => any;\n  width?: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  hidden?: boolean;\n  frozenToEnd?: boolean;\n  filterOperators?: FilterOperator[];\n}\n\nexport class IxGrid extends LitElement {\n  static readonly styles = [IxGridViewStyles];\n\n  @query('vaadin-grid') grid!: HTMLElement;\n\n  @property({ type: String }) variantClass = '';\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: Array }) rows: Row[] = [];\n\n  @property({ type: String }) defaultEmptyText = 'No data to display';\n\n  @property({ type: String }) sortedColumn = '';\n\n  @property({ type: String }) sortDirection = '';\n\n  @property({ type: Boolean }) hideHeader = false;\n\n  @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n  @property({ type: Number }) rowLimit: number = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: String }) localStorageID: string | undefined = undefined;\n\n  @property({ type: Boolean }) showDownload = true;\n\n  @property({ type: Array }) downloadMenuItems: IxGridDownloadMenuItemModel[] =\n    [];\n\n  @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n    true;\n\n  @state() private filters: Filter[] = [];\n\n  @state() isLoading = false;\n\n  @state() isExpanded = false;\n\n  get isPersistable() {\n    if (this.localStorageID) return true;\n\n    return false;\n  }\n\n  get columnNames() {\n    return this.columns.map((column: Column) => column.name);\n  }\n\n  get columnsLocalStorageKey() {\n    return `ix-grid-${this.localStorageID}-columns`;\n  }\n\n  get arrangedColumns() {\n    let colums: Column[] = [];\n\n    if (this.isPersistable) {\n      const preservedColumns = JSON.parse(\n        localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n      );\n\n      if (preservedColumns.length > 0)\n        colums = preservedColumns.map((c: Column) => {\n          const column = this.columns.find(\n            (col: Column) => col.name === c.name\n          ) as Column;\n\n          return {\n            ...column,\n            hidden: c.hidden,\n            frozenToEnd: c.frozenToEnd,\n            width: !c.width ? undefined : c.width,\n          };\n        });\n    }\n\n    if (colums.length === 0) colums = [...this.columns];\n\n    return colums\n      .filter(col => col)\n      .map((column: Column) => ({\n        ...column,\n        width: !column.width ? undefined : column.width,\n      }));\n  }\n\n  private async updatePage() {\n    const filters = this.filters.reduce(\n      (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n        ...columnFilters,\n        [columnField]: value,\n      }),\n      {}\n    );\n\n    if (this.addParamsToURL) {\n      const urlParams: { [key: string]: string } = {\n        sort: this.sortedColumn,\n        order: this.sortDirection,\n        page: this.page.toString(),\n        size: this.pageSize.toString(),\n        ...filters,\n      };\n\n      const url = new URL(window.location.href);\n      const searchParams = new URLSearchParams(urlParams);\n      url.search = searchParams.toString();\n      window.history.replaceState(null, '', url.toString());\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          columnName: this.sortedColumn,\n          sortOrder: this.sortDirection,\n          page: this.page,\n          pageSize: this.pageSize,\n          filters,\n          filtersOperators: this.filters.map((f: Filter) => ({\n            columnField: f.columnField,\n            operator: f.operatorValue,\n          })),\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  handleSort(column: string = '') {\n    if (this.sortedColumn !== column) {\n      this.sortDirection = 'asc';\n    } else {\n      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n    }\n    this.sortedColumn = column;\n\n    this.updatePage();\n  }\n\n  private renderColumnHeader = (column: Column) => html`\n    <div\n      @click=${() => column.sortable && this.handleSort(column.name)}\n      @keyDown=${() => column.sortable && this.handleSort(column.name)}\n      class=\"header\"\n    >\n      ${column.header}\n      ${column.sortable\n        ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n            >${this.sortDirection === 'desc' &&\n            this.sortedColumn === column.name\n              ? `arrow_upward`\n              : `arrow_downward`}</ix-icon\n          >`\n        : nothing}\n    </div>\n  `;\n\n  setColumnsToLocalStorage(columns: Column[]) {\n    if (this.isPersistable) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify(columns)\n      );\n    }\n  }\n\n  async reorderColumnsFromTable() {\n    const visibleColumns = this.arrangedColumns.filter(\n      (column: Column) => column.hidden !== true\n    );\n    const hiddenColumns = this.arrangedColumns.filter(\n      (column: Column) => column.hidden === true\n    );\n    const frozenColumns = this.arrangedColumns.filter(\n      (column: Column) => column.frozenToEnd === true\n    );\n\n    const allColumns = [\n      ...visibleColumns.filter(column => column?.frozenToEnd !== true),\n      ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n      ...frozenColumns,\n    ];\n\n    // calulate column order from table header flex order\n    const headerNodes = Array.from(\n      this.grid?.shadowRoot?.querySelectorAll('th') || []\n    );\n    if (headerNodes.length) {\n      const columnOrder = headerNodes\n        .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n        .sort((a, b) => a.flexPosition - b.flexPosition)\n        .map(el => el.id);\n\n      const columnsCorrectlyOrdered = columnOrder.every(\n        (x, i) => i === 0 || x > columnOrder[i - 1]\n      );\n      let reorderedColumns: Column[] = [];\n      if (!columnsCorrectlyOrdered) {\n        reorderedColumns = columnOrder.map(id => allColumns[id]);\n        this.columns = [\n          ...reorderedColumns.filter(\n            column => column.hidden !== true && column?.frozenToEnd !== true\n          ),\n          ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n          ...frozenColumns,\n        ];\n\n        this.isLoading = true;\n        await this.updateComplete;\n        this.isLoading = false;\n      }\n      this.setColumnsToLocalStorage(\n        reorderedColumns.length > 0 ? [...this.columns] : [...allColumns]\n      );\n    }\n  }\n\n  async reorderColumnsFromFilter(e: CustomEvent) {\n    this.columns = [...e.detail.reorderedColumns];\n    this.setColumnsToLocalStorage([...this.columns]);\n\n    this.isLoading = true;\n    await this.updateComplete;\n    this.isLoading = false;\n  }\n\n  handleOnColumnFilter(e: CustomEvent) {\n    e.detail.columns.forEach((column: Column, id: number) => {\n      this.columns[id].hidden = column?.hidden;\n    });\n    this.updatePage();\n  }\n\n  private renderHeader = () => html`\n    <div class=\"grid-header\">\n      <slot name=\"header\"><div class=\"empty\"></div></slot>\n      ${this.hideFilters\n        ? nothing\n        : html`<div class=\"grid-menu\">\n            <ix-grid-column-filter\n              .columns=${this.arrangedColumns}\n              columnsLocalStorageKey=${ifDefined(this.columnsLocalStorageKey)}\n              @columnFilter=${(e: CustomEvent) => this.handleOnColumnFilter(e)}\n              @reorderColumns=${this.reorderColumnsFromFilter}\n            ></ix-grid-column-filter>\n            ${this.showDownload\n              ? html`<ix-grid-download-menu\n                  .items=${this.downloadMenuItems}\n                ></ix-grid-download-menu>`\n              : nothing}\n            <ix-grid-row-filter\n              .columns=${this.columns}\n              @rowFilter=${(e: CustomEvent) => {\n                this.filters = e.detail.filters;\n                this.updatePage();\n              }}\n            ></ix-grid-row-filter>\n          </div>`}\n    </div>\n    <div class=\"touch-edge\">\n      <slot name=\"under-header\"></slot>\n    </div>\n  `;\n\n  private renderRowLimitControls = () => {\n    if (this.rows.length <= this.rowLimit) return nothing;\n\n    return html`\n      <div class=\"row-limit\">\n        <ix-button\n          appearance=\"text\"\n          @click=${() => {\n            this.isExpanded = !this.isExpanded;\n          }}\n          has-icon\n        >\n          ${this.isExpanded ? copy.viewLess : copy.viewMore}\n          <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n        </ix-button>\n      </div>\n    `;\n  };\n\n  private renderPaginationControls = () => html`\n    <ix-pagination\n      .page=${this.page}\n      .pageSize=${this.pageSize}\n      .pageSizes=${this.pageSizes}\n      .recordCount=${this.recordCount}\n      @updatePagination=${(e: CustomEvent) => {\n        this.page = e.detail.page;\n        this.pageSize = e.detail.pageSize;\n        this.updatePage();\n      }}\n    ></ix-pagination>\n  `;\n\n  renderColumns() {\n    if (this.arrangedColumns.length > 0) {\n      return html`${this.arrangedColumns.map((column: Column) => {\n        if (column.hidden === true) return nothing;\n\n        return html`<vaadin-grid-column\n          ${columnHeaderRenderer(\n            () => this.renderColumnHeader(column),\n            this.sortDirection\n          )}\n          ${columnBodyRenderer(column.bodyRenderer, [])}\n          resizable\n          width=${ifDefined(column.width)}\n          ?hidden=${column.hidden}\n          ?frozen-to-end=${column.frozenToEnd}\n          path=${column.name}\n        ></vaadin-grid-column>`;\n      })}`;\n    }\n\n    return html`<vaadin-grid-column></vaadin-grid-column>`;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${`grid-container ${this.isLoading ? 'loading' : ''} ${\n          this.variantClass\n        }`}\n      >\n        ${this.hideHeader ? nothing : this.renderHeader()}\n        ${!this.isLoading\n          ? html`<vaadin-grid\n                .items=${this.rowLimit > 0 && !this.isExpanded\n                  ? this.rows.slice(0, this.rowLimit)\n                  : this.rows}\n                all-rows-visible\n                column-reordering-allowed\n                theme=\"no-border\"\n                @mouseup=${this.reorderColumnsFromTable}\n              >\n                ${this.renderColumns()}\n              </vaadin-grid>\n              ${this.rows.length === 0 && !this.isLoading\n                ? html`<slot name=\"no-rows\"></slot>`\n                : nothing}`\n          : nothing}\n        ${this.rowLimit > 0\n          ? this.renderRowLimitControls()\n          : this.renderPaginationControls()}\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/components/IxGridColumnFilter.d.ts

@@ -6,7 +6,7 @@ import type { Column } from '../IxGrid.js';
 export declare class IxGridColumnFilter extends LitElement {
     static readonly styles: import("lit").CSSResult[];
     columns: Column[];
-    localStorageID: string | undefined;
+    columnsLocalStorageKey: string | undefined;
     private isDropdownVisible;
     disabledColumns: string[];
     dragEvent: {
@@ -17,6 +17,7 @@ export declare class IxGridColumnFilter extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     outerInteraction: (e: Event) => void;
+    get preservedColumns(): Column[];
     initializeLocalStorage(): void;
     toggleColumn(id: number): void;
     updateColumn(e: Event, id: number): void;

package/dist/components/IxGridColumnFilter.js

@@ -12,7 +12,7 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
     constructor() {
         super(...arguments);
         this.columns = [];
-        this.localStorageID = undefined;
+        this.columnsLocalStorageKey = undefined;
         this.isDropdownVisible = false;
         this.disabledColumns = [];
         this.dragEvent = {
@@ -35,28 +35,33 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
         super.disconnectedCallback();
         document.removeEventListener('click', this.outerInteraction);
     }
+    get preservedColumns() {
+        let preservedColumns = [];
+        if (this.columnsLocalStorageKey) {
+            preservedColumns = JSON.parse(localStorage.getItem(this.columnsLocalStorageKey) || '[]');
+        }
+        return preservedColumns;
+    }
     initializeLocalStorage() {
-        if (this.localStorageID) {
-            const storedDisabledColumns = localStorage.getItem(this.localStorageID);
-            if (storedDisabledColumns) {
-                const disabledColumns = JSON.parse(storedDisabledColumns);
-                this.disabledColumns = disabledColumns;
-                this.columns.forEach((column, id) => {
-                    if (disabledColumns.includes(column.name)) {
-                        this.columns[id].hidden = true;
-                    }
-                });
-            }
-            this.dispatchUpdate();
+        if (this.preservedColumns.length > 0) {
+            this.disabledColumns = this.preservedColumns
+                .filter(c => c.hidden)
+                .map(c => c.name);
+            this.columns.forEach((column, id) => {
+                if (this.disabledColumns.includes(column.name)) {
+                    this.columns[id].hidden = true;
+                }
+            });
         }
+        this.dispatchUpdate();
     }
     toggleColumn(id) {
         this.columns[id].hidden = !this.columns[id].hidden;
         this.disabledColumns = this.columns
             .filter((column) => column.hidden)
             .map((column) => column.name);
-        if (this.localStorageID !== undefined) {
-            localStorage.setItem(this.localStorageID, JSON.stringify(this.disabledColumns));
+        if (this.columnsLocalStorageKey) {
+            localStorage.setItem(this.columnsLocalStorageKey, JSON.stringify([...this.columns]));
         }
         this.dispatchUpdate();
     }
@@ -68,8 +73,8 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
         this.disabledColumns = this.columns
             .filter((column) => column.hidden)
             .map((column) => column.name);
-        if (this.localStorageID !== undefined) {
-            localStorage.setItem(this.localStorageID, JSON.stringify(this.disabledColumns));
+        if (this.columnsLocalStorageKey) {
+            localStorage.setItem(this.columnsLocalStorageKey, JSON.stringify([...this.columns]));
         }
         this.dispatchUpdate();
     }
@@ -171,7 +176,7 @@ __decorate([
 ], IxGridColumnFilter.prototype, "columns", void 0);
 __decorate([
     property({ type: String })
-], IxGridColumnFilter.prototype, "localStorageID", void 0);
+], IxGridColumnFilter.prototype, "columnsLocalStorageKey", void 0);
 __decorate([
     state()
 ], IxGridColumnFilter.prototype, "isDropdownVisible", void 0);

package/dist/components/IxGridColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\n\nconst triggerKeys = [' ', 'Enter'];\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n  static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: String }) localStorageID: string | undefined = undefined;\n\n  @state() private isDropdownVisible: boolean = false;\n\n  @state() disabledColumns: string[] = [];\n\n  @state() dragEvent: {\n    sourceEl: HTMLElement | null;\n    startId: number;\n    targetId: number;\n  } = {\n    sourceEl: null,\n    startId: -1,\n    targetId: -1,\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.outerInteraction);\n    this.initializeLocalStorage();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.outerInteraction);\n  }\n\n  outerInteraction = (e: Event) => {\n    if (!e.composedPath().includes(this)) {\n      this.isDropdownVisible = false;\n    }\n  };\n\n  initializeLocalStorage() {\n    if (this.localStorageID) {\n      const storedDisabledColumns = localStorage.getItem(this.localStorageID);\n\n      if (storedDisabledColumns) {\n        const disabledColumns = JSON.parse(storedDisabledColumns);\n        this.disabledColumns = disabledColumns;\n        this.columns.forEach((column, id) => {\n          if (disabledColumns.includes(column.name)) {\n            this.columns[id].hidden = true;\n          }\n        });\n      }\n      this.dispatchUpdate();\n    }\n  }\n\n  toggleColumn(id: number) {\n    this.columns[id].hidden = !this.columns[id].hidden;\n\n    this.disabledColumns = this.columns\n      .filter((column: Column) => column.hidden)\n      .map((column: Column) => column.name);\n\n    if (this.localStorageID !== undefined) {\n      localStorage.setItem(\n        this.localStorageID,\n        JSON.stringify(this.disabledColumns)\n      );\n    }\n\n    this.dispatchUpdate();\n  }\n\n  updateColumn(e: Event, id: number) {\n    const input = e.target as HTMLElement;\n    const el = input.shadowRoot?.querySelector('input');\n\n    this.columns[id].hidden = !el?.checked;\n\n    this.disabledColumns = this.columns\n      .filter((column: Column) => column.hidden)\n      .map((column: Column) => column.name);\n\n    if (this.localStorageID !== undefined) {\n      localStorage.setItem(\n        this.localStorageID,\n        JSON.stringify(this.disabledColumns)\n      );\n    }\n\n    this.dispatchUpdate();\n  }\n\n  dispatchUpdate(columns = this.columns) {\n    this.dispatchEvent(\n      new CustomEvent('columnFilter', {\n        detail: {\n          columns,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  dragstart(e: DragEvent) {\n    const el = e.target as HTMLElement;\n    this.dragEvent.sourceEl = el;\n    el.style.opacity = '0.3';\n    const id = Number(el.getAttribute('data-id') as string);\n    this.dragEvent.startId = id;\n  }\n\n  dragend() {\n    if (this.dragEvent.startId !== this.dragEvent.targetId) {\n      const reorderedColumns = [...this.columns];\n      const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];\n      reorderedColumns.splice(this.dragEvent.targetId, 0, el);\n      this.dispatchEvent(\n        new CustomEvent('reorderColumns', {\n          detail: {\n            reorderedColumns,\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n    this.dragEvent.sourceEl?.style.removeProperty('opacity');\n    this.dragEvent = {\n      sourceEl: null,\n      startId: -1,\n      targetId: -1,\n    };\n  }\n\n  dragenter(e: DragEvent) {\n    const el = e.target as HTMLElement;\n    if (el.classList.contains('drag-target')) {\n      const target = Number(el.getAttribute('data-id') as string);\n      this.dragEvent.targetId = target;\n    }\n  }\n\n  render() {\n    return html`<div class=\"grid-menu\">\n      <span\n        @click=${() => {\n          this.isDropdownVisible = true;\n        }}\n        @keyDown=${(e: KeyboardEvent) => {\n          if (triggerKeys.includes(e.key)) {\n            this.isDropdownVisible = true;\n          }\n        }}\n        class=\"list list-dropdown\"\n      >\n        <ix-icon-button appearance=\"default\" icon=\"list\"></ix-icon-button>\n        ${this.disabledColumns.length > 0\n          ? html`<div class=\"active\"></div>`\n          : nothing}\n        ${this.isDropdownVisible\n          ? html` <div\n              class=\"dropdown-content\"\n              @dragover=${(e: DragEvent) => e.preventDefault()}\n              @dragstart=${this.dragstart}\n              @dragend=${this.dragend}\n              @dragenter=${this.dragenter}\n            >\n              ${repeat(\n                this.columns,\n                (col: Column) => col.name,\n                (col: Column, id: number) => html`<div\n                  class=${col.hidden ? 'disabled' : ''}\n                >\n                  <label\n                    class=${`ix-switch-label drag-target ${\n                      this.dragEvent.startId === id ? 'dragOrigin' : ''\n                    }`}\n                    draggable=\"true\"\n                    data-id=${id}\n                  >\n                    <ix-switch\n                      .selected=${!col.hidden}\n                      @change=${(e: Event) => this.updateColumn(e, id)}\n                    >\n                    </ix-switch>\n                    <p>${col.header}</p>\n                    <ix-icon class=\"draggable\">drag_handle</ix-icon>\n                  </label>\n                </div>`\n              )}\n            </div>`\n          : nothing}\n      </span>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAG5B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGsB,YAAO,GAAa,EAAE,CAAC;QAEtB,2BAAsB,GAChD,SAAS,CAAC;QAEK,sBAAiB,GAAY,KAAK,CAAC;QAE3C,oBAAe,GAAa,EAAE,CAAC;QAE/B,cAAS,GAId;YACF,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,CAAC,CAAC;YACX,QAAQ,EAAE,CAAC,CAAC;SACb,CAAC;QAaF,qBAAgB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;gBACpC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;aAChC;QACH,CAAC,CAAC;IAwKJ,CAAC;IAvLC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC1D,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAChC,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC/D,CAAC;IAQD,IAAI,gBAAgB;QAClB,IAAI,gBAAgB,GAAa,EAAE,CAAC;QAEpC,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAC3B,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAI,IAAI,CAC1D,CAAC;SACH;QACD,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAED,sBAAsB;QACpB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;YACpC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB;iBACzC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;iBACrB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACpB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;gBAClC,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;oBAC9C,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC;iBAChC;YACH,CAAC,CAAC,CAAC;SACJ;QACD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,EAAU;QACrB,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC;QAEnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;aAChC,MAAM,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;aACzC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAExC,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,YAAY,CAAC,OAAO,CAClB,IAAI,CAAC,sBAAsB,EAC3B,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAClC,CAAC;SACH;QAED,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,CAAQ,EAAE,EAAU;;QAC/B,MAAM,KAAK,GAAG,CAAC,CAAC,MAAqB,CAAC;QACtC,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEpD,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,OAAO,CAAA,CAAC;QAEvC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;aAChC,MAAM,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;aACzC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAExC,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,YAAY,CAAC,OAAO,CAClB,IAAI,CAAC,sBAAsB,EAC3B,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAClC,CAAC;SACH;QAED,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;QACnC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,MAAM,EAAE;gBACN,OAAO;aACR;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,SAAS,CAAC,CAAY;QACpB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAqB,CAAC;QACnC,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,EAAE,CAAC;QAC7B,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAW,CAAC,CAAC;QACxD,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,EAAE,CAAC;IAC9B,CAAC;IAED,OAAO;;QACL,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;YACtD,MAAM,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3C,MAAM,EAAE,GAAG,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACjE,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE;oBACN,gBAAgB;iBACjB;gBACD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;SACH;QACD,MAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,0CAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACzD,IAAI,CAAC,SAAS,GAAG;YACf,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,CAAC,CAAC;YACX,QAAQ,EAAE,CAAC,CAAC;SACb,CAAC;IACJ,CAAC;IAED,SAAS,CAAC,CAAY;QACpB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAqB,CAAC;QACnC,IAAI,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YACxC,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAW,CAAC,CAAC;YAC5D,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,MAAM,CAAC;SAClC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE;YACZ,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC;mBACU,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;gBAC/B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;aAC/B;QACH,CAAC;;;;UAIC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC;YAC/B,CAAC,CAAC,IAAI,CAAA,4BAA4B;YAClC,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,iBAAiB;YACtB,CAAC,CAAC,IAAI,CAAA;;0BAEU,CAAC,CAAY,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;2BACnC,IAAI,CAAC,SAAS;yBAChB,IAAI,CAAC,OAAO;2BACV,IAAI,CAAC,SAAS;;gBAEzB,MAAM,CACN,IAAI,CAAC,OAAO,EACZ,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EACzB,CAAC,GAAW,EAAE,EAAU,EAAE,EAAE,CAAC,IAAI,CAAA;0BACvB,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;4BAG1B,+BACN,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EACjD,EAAE;;8BAEQ,EAAE;;;kCAGE,CAAC,GAAG,CAAC,MAAM;gCACb,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC;;;yBAG7C,GAAG,CAAC,MAAM;;;uBAGZ,CACR;mBACI;YACT,CAAC,CAAC,OAAO;;WAER,CAAC;IACV,CAAC;;AA3Me,yBAAM,GAAG,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;AAE3C;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAwB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEACf;AAEH;IAAR,KAAK,EAAE;6DAA4C;AAE3C;IAAR,KAAK,EAAE;2DAAgC;AAE/B;IAAR,KAAK,EAAE;qDAQN;AApBS,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CA6M9B;SA7MY,kBAAkB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\n\nconst triggerKeys = [' ', 'Enter'];\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n  static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: String }) columnsLocalStorageKey: string | undefined =\n    undefined;\n\n  @state() private isDropdownVisible: boolean = false;\n\n  @state() disabledColumns: string[] = [];\n\n  @state() dragEvent: {\n    sourceEl: HTMLElement | null;\n    startId: number;\n    targetId: number;\n  } = {\n    sourceEl: null,\n    startId: -1,\n    targetId: -1,\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.outerInteraction);\n    this.initializeLocalStorage();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.outerInteraction);\n  }\n\n  outerInteraction = (e: Event) => {\n    if (!e.composedPath().includes(this)) {\n      this.isDropdownVisible = false;\n    }\n  };\n\n  get preservedColumns() {\n    let preservedColumns: Column[] = [];\n\n    if (this.columnsLocalStorageKey) {\n      preservedColumns = JSON.parse(\n        localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n      );\n    }\n    return preservedColumns;\n  }\n\n  initializeLocalStorage() {\n    if (this.preservedColumns.length > 0) {\n      this.disabledColumns = this.preservedColumns\n        .filter(c => c.hidden)\n        .map(c => c.name);\n      this.columns.forEach((column, id) => {\n        if (this.disabledColumns.includes(column.name)) {\n          this.columns[id].hidden = true;\n        }\n      });\n    }\n    this.dispatchUpdate();\n  }\n\n  toggleColumn(id: number) {\n    this.columns[id].hidden = !this.columns[id].hidden;\n\n    this.disabledColumns = this.columns\n      .filter((column: Column) => column.hidden)\n      .map((column: Column) => column.name);\n\n    if (this.columnsLocalStorageKey) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify([...this.columns])\n      );\n    }\n\n    this.dispatchUpdate();\n  }\n\n  updateColumn(e: Event, id: number) {\n    const input = e.target as HTMLElement;\n    const el = input.shadowRoot?.querySelector('input');\n\n    this.columns[id].hidden = !el?.checked;\n\n    this.disabledColumns = this.columns\n      .filter((column: Column) => column.hidden)\n      .map((column: Column) => column.name);\n\n    if (this.columnsLocalStorageKey) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify([...this.columns])\n      );\n    }\n\n    this.dispatchUpdate();\n  }\n\n  dispatchUpdate(columns = this.columns) {\n    this.dispatchEvent(\n      new CustomEvent('columnFilter', {\n        detail: {\n          columns,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  dragstart(e: DragEvent) {\n    const el = e.target as HTMLElement;\n    this.dragEvent.sourceEl = el;\n    el.style.opacity = '0.3';\n    const id = Number(el.getAttribute('data-id') as string);\n    this.dragEvent.startId = id;\n  }\n\n  dragend() {\n    if (this.dragEvent.startId !== this.dragEvent.targetId) {\n      const reorderedColumns = [...this.columns];\n      const el = reorderedColumns.splice(this.dragEvent.startId, 1)[0];\n      reorderedColumns.splice(this.dragEvent.targetId, 0, el);\n      this.dispatchEvent(\n        new CustomEvent('reorderColumns', {\n          detail: {\n            reorderedColumns,\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n    this.dragEvent.sourceEl?.style.removeProperty('opacity');\n    this.dragEvent = {\n      sourceEl: null,\n      startId: -1,\n      targetId: -1,\n    };\n  }\n\n  dragenter(e: DragEvent) {\n    const el = e.target as HTMLElement;\n    if (el.classList.contains('drag-target')) {\n      const target = Number(el.getAttribute('data-id') as string);\n      this.dragEvent.targetId = target;\n    }\n  }\n\n  render() {\n    return html`<div class=\"grid-menu\">\n      <span\n        @click=${() => {\n          this.isDropdownVisible = true;\n        }}\n        @keyDown=${(e: KeyboardEvent) => {\n          if (triggerKeys.includes(e.key)) {\n            this.isDropdownVisible = true;\n          }\n        }}\n        class=\"list list-dropdown\"\n      >\n        <ix-icon-button appearance=\"default\" icon=\"list\"></ix-icon-button>\n        ${this.disabledColumns.length > 0\n          ? html`<div class=\"active\"></div>`\n          : nothing}\n        ${this.isDropdownVisible\n          ? html` <div\n              class=\"dropdown-content\"\n              @dragover=${(e: DragEvent) => e.preventDefault()}\n              @dragstart=${this.dragstart}\n              @dragend=${this.dragend}\n              @dragenter=${this.dragenter}\n            >\n              ${repeat(\n                this.columns,\n                (col: Column) => col.name,\n                (col: Column, id: number) => html`<div\n                  class=${col.hidden ? 'disabled' : ''}\n                >\n                  <label\n                    class=${`ix-switch-label drag-target ${\n                      this.dragEvent.startId === id ? 'dragOrigin' : ''\n                    }`}\n                    draggable=\"true\"\n                    data-id=${id}\n                  >\n                    <ix-switch\n                      .selected=${!col.hidden}\n                      @change=${(e: Event) => this.updateColumn(e, id)}\n                    >\n                    </ix-switch>\n                    <p>${col.header}</p>\n                    <ix-icon class=\"draggable\">drag_handle</ix-icon>\n                  </label>\n                </div>`\n              )}\n            </div>`\n          : nothing}\n      </span>\n    </div>`;\n  }\n}\n"]}

package/dist/components/IxGridNoRows.d.ts

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 import '@digital-realty/ix-icon/ix-icon.js';
 export declare class IxGridNoRows extends LitElement {
     static styles: import("lit").CSSResult;
-    type: 'warning' | 'info';
+    type: 'warning' | 'info' | 'error';
     icon: string;
     message: string;
     render(): import("lit").TemplateResult<1>;

package/dist/components/IxGridNoRows.js

@@ -5,14 +5,14 @@ import '@digital-realty/ix-icon/ix-icon.js';
 export class IxGridNoRows extends LitElement {
     constructor() {
         super(...arguments);
-        this.type = 'warning';
-        this.icon = 'warning';
-        this.message = 'No rows to display';
+        this.type = 'error';
+        this.icon = 'error';
+        this.message = 'No data to display';
     }
     render() {
         return html `
       <div class="container">
-        <ix-icon class="icon ${this.type}">info</ix-icon>
+        <ix-icon class="icon ${this.type}">${this.icon}</ix-icon>
         <h2 class="dlr-text-heading">${this.message}</h2>
       </div>
     `;
@@ -28,12 +28,13 @@ IxGridNoRows.styles = css `
     }
     .icon {
       margin: 4rem 0 0;
-      width: var(--no-rows-icon-size, 42px);
-      height: var(--no-rows-icon-size, 42px);
-      --ix-icon-font-size: var(--no-rows-icon-size, 42px);
+      width: var(--no-rows-icon-size, 48px);
+      height: var(--no-rows-icon-size, 48px);
+      --ix-icon-font-size: var(--no-rows-icon-size, 48px);
       --ix-icon-line-height: var(--no-rows-icon-line-height, 1);
     }
-    .warning {
+    .warning,
+    .error {
       user-select: none;
       width: 48px;
       height: 44px;
@@ -42,6 +43,12 @@ IxGridNoRows.styles = css `
     .critical {
       color: var(--clr-critical, #db0028);
     }
+    h2 {
+      font-family: var(--ix-font-family, 'Red Hat Display');
+    }
+    h2.dlr-text-heading {
+      margin-top: 10px;
+    }
   `;
 __decorate([
     property({ type: String })

package/dist/components/IxGridNoRows.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["../../src/components/IxGridNoRows.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA2B8B,SAAI,GAAuB,SAAS,CAAC;QAErC,SAAI,GAAW,SAAS,CAAC;QAEzB,YAAO,GAAW,oBAAoB,CAAC;IAUrE,CAAC;IARC,MAAM;QACJ,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,IAAI;uCACD,IAAI,CAAC,OAAO;;KAE9C,CAAC;IACJ,CAAC;;AAvCM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBlB,CAAC;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsC;AAErC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxGridNoRows extends LitElement {\n  static styles = css`\n    .container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 1rem;\n      flex-direction: column;\n    }\n    .icon {\n      margin: 4rem 0 0;\n      width: var(--no-rows-icon-size, 42px);\n      height: var(--no-rows-icon-size, 42px);\n      --ix-icon-font-size: var(--no-rows-icon-size, 42px);\n      --ix-icon-line-height: var(--no-rows-icon-line-height, 1);\n    }\n    .warning {\n      user-select: none;\n      width: 48px;\n      height: 44px;\n      color: var(--clr-warning, #ff9800);\n    }\n    .critical {\n      color: var(--clr-critical, #db0028);\n    }\n  `;\n\n  @property({ type: String }) type: 'warning' | 'info' = 'warning';\n\n  @property({ type: String }) icon: string = 'warning';\n\n  @property({ type: String }) message: string = 'No rows to display';\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <ix-icon class=\"icon ${this.type}\">info</ix-icon>\n        <h2 class=\"dlr-text-heading\">${this.message}</h2>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["../../src/components/IxGridNoRows.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAkC8B,SAAI,GAAiC,OAAO,CAAC;QAE7C,SAAI,GAAW,OAAO,CAAC;QAEvB,YAAO,GAAW,oBAAoB,CAAC;IAUrE,CAAC;IARC,MAAM;QACJ,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;uCACf,IAAI,CAAC,OAAO;;KAE9C,CAAC;IACJ,CAAC;;AA9CM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BlB,CAAC;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxGridNoRows extends LitElement {\n  static styles = css`\n    .container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 1rem;\n      flex-direction: column;\n    }\n    .icon {\n      margin: 4rem 0 0;\n      width: var(--no-rows-icon-size, 48px);\n      height: var(--no-rows-icon-size, 48px);\n      --ix-icon-font-size: var(--no-rows-icon-size, 48px);\n      --ix-icon-line-height: var(--no-rows-icon-line-height, 1);\n    }\n    .warning,\n    .error {\n      user-select: none;\n      width: 48px;\n      height: 44px;\n      color: var(--clr-warning, #ff9800);\n    }\n    .critical {\n      color: var(--clr-critical, #db0028);\n    }\n    h2 {\n      font-family: var(--ix-font-family, 'Red Hat Display');\n    }\n    h2.dlr-text-heading {\n      margin-top: 10px;\n    }\n  `;\n\n  @property({ type: String }) type: 'warning' | 'info' | 'error' = 'error';\n\n  @property({ type: String }) icon: string = 'error';\n\n  @property({ type: String }) message: string = 'No data to display';\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <ix-icon class=\"icon ${this.type}\">${this.icon}</ix-icon>\n        <h2 class=\"dlr-text-heading\">${this.message}</h2>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/components/IxPagination.js

@@ -32,7 +32,7 @@ let IxPagination = class IxPagination extends LitElement {
         const back = this.page > 1;
         const next = this.recordCount > this.page * this.pageSize;
         return html ` <div class="pagination">
-      <p>${copy.rowsPerPage}:</p>
+      <p class="rows-per-page">${copy.rowsPerPage}:</p>
       <ix-select
         wide-menu
         menu-positioning="fixed"

package/dist/components/IxPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxPagination.js","sourceRoot":"","sources":["../../src/components/IxPagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { PaginationStyles } from './pagination-styles.js';\nimport { copy } from '../ix-grid-copy.js';\n\n@customElement('ix-pagination')\nexport class IxPagination extends LitElement {\n  static readonly styles = [IxGridViewStyles, PaginationStyles];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  private changePage(offset: number) {\n    this.page += offset;\n    this.updatePagination();\n  }\n\n  updatePagination(page = this.page, pageSize = this.pageSize) {\n    this.dispatchEvent(\n      new CustomEvent('updatePagination', {\n        detail: {\n          page,\n          pageSize,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    const back = this.page > 1;\n    const next = this.recordCount > this.page * this.pageSize;\n    return html` <div class=\"pagination\">\n      <p>${copy.rowsPerPage}:</p>\n      <ix-select\n        wide-menu\n        menu-positioning=\"fixed\"\n        class=\"pagination__select-input\"\n        @request-selection=${(e: Event) => {\n          const el = e.target as HTMLInputElement;\n          this.pageSize = Number(el.value);\n          this.updatePagination();\n        }}\n        selected-index=${this.pageSizes.indexOf(this.pageSize)}\n        filled\n      >\n        ${this.pageSizes.map(\n          option => html`\n            <ix-select-option class=\"select-option\" value=${option}>\n              <div slot=\"headline\">${option}</div>\n            </ix-select-option>\n          `\n        )}\n      </ix-select>\n      <p>\n        ${(this.page - 1) * this.pageSize + 1} -\n        ${this.page * this.pageSize > this.recordCount\n          ? html`${this.recordCount}`\n          : html`${this.page * this.pageSize}`}\n        of ${this.recordCount}\n      </p>\n      <div class=\"pagination-nav\">\n        <ix-icon-button\n          ?disabled=${!back}\n          @click=${() => back && this.changePage(-1)}\n          icon=\"chevron_left\"\n        >\n        </ix-icon-button>\n        <ix-icon-button\n          ?disabled=${!next}\n          @click=${() => next && this.changePage(+1)}\n          icon=\"chevron_right\"\n        >\n        </ix-icon-button>\n      </div>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"IxPagination.js","sourceRoot":"","sources":["../../src/components/IxPagination.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAGnC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAGuB,gBAAW,GAAG,CAAC,CAAC;QAEhB,SAAI,GAAG,CAAC,CAAC;QAET,aAAQ,GAAG,EAAE,CAAC;QAEf,cAAS,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAoEpE,CAAC;IAlES,UAAU,CAAC,MAAc;QAC/B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ;QACzD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ;aACT;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1D,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,WAAW;;;;;6BAKpB,CAAC,CAAQ,EAAE,EAAE;YAChC,MAAM,EAAE,GAAG,CAAC,CAAC,MAA0B,CAAC;YACxC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;yBACgB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;;;UAGpD,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;4DACoC,MAAM;qCAC7B,MAAM;;WAEhC,CACF;;;UAGC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC;UACnC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW;YAC5C,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;YAC3B,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE;aACjC,IAAI,CAAC,WAAW;;;;sBAIP,CAAC,IAAI;mBACR,GAAG,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;;;;;sBAK9B,CAAC,IAAI;mBACR,GAAG,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;;;;;WAKzC,CAAC;IACV,CAAC;;AA3Ee,mBAAM,GAAG,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AAEf;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAwC;AATvD,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA6ExB;SA7EY,YAAY","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { PaginationStyles } from './pagination-styles.js';\nimport { copy } from '../ix-grid-copy.js';\n\n@customElement('ix-pagination')\nexport class IxPagination extends LitElement {\n  static readonly styles = [IxGridViewStyles, PaginationStyles];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  private changePage(offset: number) {\n    this.page += offset;\n    this.updatePagination();\n  }\n\n  updatePagination(page = this.page, pageSize = this.pageSize) {\n    this.dispatchEvent(\n      new CustomEvent('updatePagination', {\n        detail: {\n          page,\n          pageSize,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    const back = this.page > 1;\n    const next = this.recordCount > this.page * this.pageSize;\n    return html` <div class=\"pagination\">\n      <p class=\"rows-per-page\">${copy.rowsPerPage}:</p>\n      <ix-select\n        wide-menu\n        menu-positioning=\"fixed\"\n        class=\"pagination__select-input\"\n        @request-selection=${(e: Event) => {\n          const el = e.target as HTMLInputElement;\n          this.pageSize = Number(el.value);\n          this.updatePagination();\n        }}\n        selected-index=${this.pageSizes.indexOf(this.pageSize)}\n        filled\n      >\n        ${this.pageSizes.map(\n          option => html`\n            <ix-select-option class=\"select-option\" value=${option}>\n              <div slot=\"headline\">${option}</div>\n            </ix-select-option>\n          `\n        )}\n      </ix-select>\n      <p>\n        ${(this.page - 1) * this.pageSize + 1} -\n        ${this.page * this.pageSize > this.recordCount\n          ? html`${this.recordCount}`\n          : html`${this.page * this.pageSize}`}\n        of ${this.recordCount}\n      </p>\n      <div class=\"pagination-nav\">\n        <ix-icon-button\n          ?disabled=${!back}\n          @click=${() => back && this.changePage(-1)}\n          icon=\"chevron_left\"\n        >\n        </ix-icon-button>\n        <ix-icon-button\n          ?disabled=${!next}\n          @click=${() => next && this.changePage(+1)}\n          icon=\"chevron_right\"\n        >\n        </ix-icon-button>\n      </div>\n    </div>`;\n  }\n}\n"]}