npm - @digital-realty/ix-grid - Versions diffs - 1.0.39 → 1.0.41 - Mend

@digital-realty/ix-grid 1.0.39 → 1.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/demo/columns.js +4 -2
package/demo/index.html +11 -5
package/dist/IxGrid.d.ts +4 -0
package/dist/IxGrid.js +12 -1
package/dist/IxGrid.js.map +1 -1
package/dist/components/IxGridColumnFilter.js +1 -0
package/dist/components/IxGridColumnFilter.js.map +1 -1
package/dist/components/IxGridDownloadMenu.d.ts +3 -0
package/dist/components/IxGridDownloadMenu.js +40 -19
package/dist/components/IxGridDownloadMenu.js.map +1 -1
package/dist/components/IxGridRowFilter.d.ts +1 -0
package/dist/components/IxGridRowFilter.js +28 -4
package/dist/components/IxGridRowFilter.js.map +1 -1
package/dist/ix-grid.min.js +3 -3
package/dist/models/IxGridDownloadMenuItemModel.d.ts +7 -0
package/dist/models/IxGridDownloadMenuItemModel.js +2 -0
package/dist/models/IxGridDownloadMenuItemModel.js.map +1 -0
package/package.json +2 -2
package/src/IxGrid.ts +15 -1
package/src/components/IxGridColumnFilter.ts +1 -0
package/src/components/IxGridDownloadMenu.ts +31 -11
package/src/components/IxGridRowFilter.ts +37 -5
package/src/models/IxGridDownloadMenuItemModel.ts +7 -0

package/demo/columns.js CHANGED Viewed

@@ -26,7 +26,8 @@ export const columns = [
     bodyRenderer: (row) => html` <span>${row.firstName}</span>`,
     sortable: true,
     filterable: true,
-    hidden: false
+    hidden: false,
+    filterOperators: ['contains', 'equals'],
   },
   {
     name: 'lastName',
@@ -34,6 +35,7 @@ export const columns = [
     bodyRenderer: (row) => html` <span>${row.lastName}</span>`,
     sortable: true,
     filterable: true,
+    filterOperators: ['equals'],
   },
   {
     name: 'email',
@@ -62,4 +64,4 @@ export const columns = [
       )}
     </div>`,
   }
-]
+]

package/demo/index.html CHANGED Viewed

@@ -13,7 +13,7 @@
     ix-button {
       margin-right: 10px;
       display: inline-block;
-    }
+    }
   </style>
 </head>
 <body>
@@ -46,9 +46,9 @@
         )
       } else if(col !== '' && dir === 'desc'){
         thisPage.sort(
-          (a,b) => a[col] > b[col] ? -1 : 1
+          (a,b) => a[col] > b[col] ? -1 : 1
         )
-      }
+      }
       if(thisPage.length < contacts.length) {
         rowsLength = thisPage.length;
       } else {
@@ -68,6 +68,11 @@
       refresh();
     }
+    const handleClick = (e) => {
+      console.log(e)
+      // to get the name of the column header
+      console.log(e.detail.context.column)
+    }
     /*
  localStorageID
    @property({ type: String }) sortedColumn = '';
@@ -78,14 +83,15 @@
     const refresh = () => render(
       html`
         <div data-theme="ix-theme" class="container">
-          <ix-grid
+          <ix-grid
             .columns=${columns}
             .rows=${pageData}
             .recordCount=${rowsLength}
             .page=${pageNumber}
             .pageSize=${pageSize}
+            localStorageID="demo-grid"
             @change=${handleChange}
-            @cell-focus=${e => console.log(e)}
+            @cell-focus=${handleClick}
             @download=${e => console.log(e)}
           >
             <div slot="header">

package/dist/IxGrid.d.ts CHANGED Viewed

@@ -6,9 +6,11 @@ import './components/IxGridDownloadMenu.js';
 import './components/IxPagination.js';
 import './components/IxGridColumnFilter.js';
 import './components/IxGridRowFilter.js';
+import { IxGridDownloadMenuItemModel } from './models/IxGridDownloadMenuItemModel.js';
 export interface Row {
     [key: string]: string;
 }
+export type FilterOperator = 'equals' | 'contains';
 export interface Column {
     name: string;
     header: string;
@@ -18,6 +20,7 @@ export interface Column {
     filterable?: boolean;
     hidden?: boolean;
     frozenToEnd?: boolean;
+    filterOperators?: FilterOperator[];
 }
 export declare class IxGrid extends LitElement {
     static readonly styles: import("lit").CSSResult[];
@@ -36,6 +39,7 @@ export declare class IxGrid extends LitElement {
     recordCount: number;
     localStorageID: string | undefined;
     showDownload: boolean;
+    downloadMenuItems: IxGridDownloadMenuItemModel[];
     addParamsToURL: boolean;
     private filters;
     _columns: Column[];

package/dist/IxGrid.js CHANGED Viewed

@@ -29,6 +29,7 @@ export class IxGrid extends LitElement {
         this.recordCount = 0;
         this.localStorageID = undefined;
         this.showDownload = true;
+        this.downloadMenuItems = [];
         this.addParamsToURL = true;
         this.filters = [];
         this._columns = [];
@@ -69,7 +70,9 @@ export class IxGrid extends LitElement {
               @reorderColumns=${this.reorderColumnsFromFilter}
             ></ix-grid-column-filter>
             ${this.showDownload
-                ? html `<ix-grid-download-menu></ix-grid-download-menu>`
+                ? html `<ix-grid-download-menu
+                  .items=${this.downloadMenuItems}
+                ></ix-grid-download-menu>`
                 : nothing}
             <ix-grid-row-filter
               .columns=${this._columns}
@@ -144,6 +147,10 @@ export class IxGrid extends LitElement {
                 page: this.page,
                 pageSize: this.pageSize,
                 filters,
+                filtersOperators: this.filters.map((f) => ({
+                    columnField: f.columnField,
+                    operator: f.operatorValue,
+                })),
             },
             bubbles: true,
             composed: true,
@@ -215,6 +222,7 @@ export class IxGrid extends LitElement {
                           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>`}
@@ -275,6 +283,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], IxGrid.prototype, "showDownload", void 0);
+__decorate([
+    property({ type: Array })
+], IxGrid.prototype, "downloadMenuItems", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'add-params-to-url' })
 ], IxGrid.prototype, "addParamsToURL", void 0);

package/dist/IxGrid.js.map CHANGED Viewed

	@@ -1 +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';\n\nexport interface Row {\n [key: string]: string;\n}\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}\n\nexport class IxGrid extends LitElement {\n static readonly styles = [IxGridViewStyles];\n\n @query('vaadin-grid') grid!: HTMLElement;\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: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n true;\n\n @state() private filters: Filter[] = [];\n\n @state() _columns: Column[] = [];\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 },\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 connectedCallback() {\n super.connectedCallback();\n this._columns = this.columns;\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></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 class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\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 ></vaadin-grid-column>`\n : nothing\n )\n : html`<vaadin-grid-column></vaadin-grid-column>`}\n </vaadin-grid>`\n : nothing}\n ${this.rowLimit > 0\n ? this.renderRowLimitControls()\n : this.renderPaginationControls()}\n\n <slot name=\"footer\"></slot>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,8BAA8B,CAAC;AACtC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAqBzC,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAK6B,YAAO,GAAa,EAAE,CAAC;QAEvB,SAAI,GAAU,EAAE,CAAC;QAEhB,qBAAgB,GAAG,oBAAoB,CAAC;QAExC,iBAAY,GAAG,EAAE,CAAC;QAElB,kBAAa,GAAG,EAAE,CAAC;QAElB,eAAU,GAAG,KAAK,CAAC;QAEQ,gBAAW,GAAG,KAAK,CAAC;QAEhD,aAAQ,GAAW,CAAC,CAAC;QAErB,SAAI,GAAG,CAAC,CAAC;QAET,aAAQ,GAAG,EAAE,CAAC;QAEf,cAAS,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAEtC,gBAAW,GAAG,CAAC,CAAC;QAEhB,mBAAc,GAAuB,SAAS,CAAC;QAE9C,iBAAY,GAAG,IAAI,CAAC;QAEtB,sBAAiB,GAC1C,EAAE,CAAC;QAEwD,mBAAc,GACzE,IAAI,CAAC;QAEU,YAAO,GAAa,EAAE,CAAC;QAE/B,aAAQ,GAAa,EAAE,CAAC;QAExB,cAAS,GAAG,KAAK,CAAC;QAElB,eAAU,GAAG,KAAK,CAAC;QA4DpB,uBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA;;eAExC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC;iBACnD,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC;;;QAG9D,MAAM,CAAC,MAAM;QACb,MAAM,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,CAAA;eACC,IAAI,CAAC,aAAa,KAAK,MAAM;gBAChC,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,IAAI;gBAC/B,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,gBAAgB;YACpB;YACJ,CAAC,CAAC,OAAO;;GAEd,CAAC;QAwCM,iBAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;QAG3B,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,QAAQ;+BACP,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;8BAC/B,CAAC,CAAc,EAAE,EAAE;gBACjC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAc,EAAE,EAAU,EAAE,EAAE;oBACtD,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;gBAC3C,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;gCACiB,IAAI,CAAC,wBAAwB;;cAE/C,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA;2BACO,IAAI,CAAC,iBAAiB;0CACP;gBAC5B,CAAC,CAAC,OAAO;;yBAEE,IAAI,CAAC,QAAQ;2BACX,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;gBAChC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;;iBAEE;;;;;GAKd,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,OAAO,CAAC;YAEtD,OAAO,IAAI,CAAA;;;;mBAII,GAAG,EAAE;gBACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACrC,CAAC;;;YAGC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;iCAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;;;KAG9D,CAAC;QACJ,CAAC,CAAC;QAEM,6BAAwB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEjC,IAAI,CAAC,IAAI;kBACL,IAAI,CAAC,QAAQ;mBACZ,IAAI,CAAC,SAAS;qBACZ,IAAI,CAAC,WAAW;0BACX,CAAC,CAAc,EAAE,EAAE;YACrC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;YAClC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;;GAEJ,CAAC;IA4CJ,CAAC;IAjOC,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5D,CAAC;IAEO,KAAK,CAAC,UAAU;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CACjC,CAAC,aAAwC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrE,GAAG,aAAa;YAChB,CAAC,WAAW,CAAC,EAAE,KAAK;SACrB,CAAC,EACF,EAAE,CACH,CAAC;QAEF,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,MAAM,SAAS,GAA8B;gBAC3C,IAAI,EAAE,IAAI,CAAC,YAAY;gBACvB,KAAK,EAAE,IAAI,CAAC,aAAa;gBACzB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;gBAC9B,GAAG,OAAO;aACX,CAAC;YAEF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC1C,MAAM,YAAY,GAAG,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;YACpD,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;YACrC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;SACvD;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,UAAU,EAAE,IAAI,CAAC,YAAY;gBAC7B,SAAS,EAAE,IAAI,CAAC,aAAa;gBAC7B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO;gBACP,gBAAgB,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC;oBACjD,WAAW,EAAE,CAAC,CAAC,WAAW;oBAC1B,QAAQ,EAAE,CAAC,CAAC,aAAa;iBAC1B,CAAC,CAAC;aACJ;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,SAAiB,EAAE;QAC5B,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;YAChC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE;QACD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAE3B,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAoBD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,KAAK,CAAC,uBAAuB;;QAC3B,qDAAqD;QACrD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAC5B,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,gBAAgB,CAAC,IAAI,CAAC,KAAI,EAAE,CACpD,CAAC;QACF,IAAI,WAAW,CAAC,MAAM,EAAE;YACtB,MAAM,WAAW,GAAG,WAAW;iBAC5B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;iBAC/D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC;iBAC/C,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACpB,WAAW,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;gBAC7B,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;YAC3C,CAAC,CAAC,CAAC;YACH,MAAM,uBAAuB,GAAG,WAAW,CAAC,KAAK,CAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAC5C,CAAC;YACF,IAAI,CAAC,uBAAuB,EAAE;gBAC5B,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;gBAClE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,gBAAgB,CAAC,CAAC;gBACtC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,MAAM,IAAI,CAAC,cAAc,CAAC;gBAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB;SACF;IACH,CAAC;IAED,KAAK,CAAC,wBAAwB,CAAC,CAAc;QAC3C,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAuED,MAAM;;QACJ,OAAO,IAAI,CAAA;mBACI,kBAAkB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;UAC5D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;UAC/C,CAAC,IAAI,CAAC,SAAS;YACf,CAAC,CAAC,IAAI,CAAA;uBACO,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU;gBAC5C,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;gBACnC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;yBAIF,IAAI,CAAC,uBAAuB;;gBAErC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;gBACtC,CAAC,CAAC,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CACpC,MAAM,CAAC,IAAI;oBACT,CAAC,CAAC,IAAI,CAAA;4BACA,oBAAoB,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,EACrC,IAAI,CAAC,aAAa,CACnB;4BACC,kBAAkB,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC;;kCAErC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC;oCACrB,MAAM,CAAC,MAAM;2CACN,MAAM,CAAC,WAAW;iCAC5B,MAAM,CAAC,IAAI;+CACG;oBACzB,CAAC,CAAC,OAAO,CACZ;gBACH,CAAC,CAAC,IAAI,CAAA,2CAA2C;2BACtC;YACjB,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,QAAQ,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAC/B,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE;;;;KAItC,CAAC;IACJ,CAAC;;AA9Qe,aAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAEtB;IAArB,KAAK,CAAC,aAAa,CAAC;oCAAoB;AAEd;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCAAwB;AAEvB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAyC;AAExC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoB;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAoB;AAEQ;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CAAqB;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAsB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAe;AAEf;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAwC;AAEtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAE9C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAqB;AAEtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDACrB;AAEwD;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;8CACrD;AAEE;IAAR,KAAK,EAAE;uCAAgC;AAE/B;IAAR,KAAK,EAAE;wCAAyB;AAExB;IAAR,KAAK,EAAE;yCAAmB;AAElB;IAAR,KAAK,EAAE;0CAAoB","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: 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() _columns: Column[] = [];\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 connectedCallback() {\n super.connectedCallback();\n this._columns = this.columns;\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 class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\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 : 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.js CHANGED Viewed

@@ -40,6 +40,7 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
             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;

package/dist/components/IxGridColumnFilter.js.map CHANGED Viewed

	@@ -1 +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.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"]}
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"]}

package/dist/components/IxGridDownloadMenu.d.ts CHANGED Viewed

@@ -3,10 +3,13 @@ import { IxMenu } from '@digital-realty/ix-menu';
 import '@digital-realty/ix-menu/ix-menu.js';
 import '@digital-realty/ix-menu/ix-menu-item.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import { IxGridDownloadMenuItemModel } from '../models/IxGridDownloadMenuItemModel.js';
 export declare class IxGridDownloadMenu extends LitElement {
     static readonly styles: import("lit").CSSResult[];
     downloadMenu: IxMenu;
     downloadMenuAnchor: HTMLElement;
+    items: IxGridDownloadMenuItemModel[];
     toggleMenu(): void;
+    renderMenuItems(): import("lit").TemplateResult<1> | import("lit").TemplateResult<1>[];
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/IxGridDownloadMenu.js CHANGED Viewed

@@ -1,41 +1,59 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import '@digital-realty/ix-menu/ix-menu.js';
 import '@digital-realty/ix-menu/ix-menu-item.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import { IxGridViewStyles } from '../grid-view-styles.js';
 import { IxGridDownloadMenuStyles } from './grid-download-menu-styles.js';
 let IxGridDownloadMenu = class IxGridDownloadMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
     toggleMenu() {
         this.downloadMenu.open = !this.downloadMenu.open;
     }
-    render() {
-        return html ` <div style="position: relative">
-      <ix-icon-button
-        icon="download"
-        id="anchor"
-        @click=${this.toggleMenu}
-      ></ix-icon-button>
-      <ix-menu id="menu" anchor="anchor" has-overflow>
-        <ix-menu-item
+    renderMenuItems() {
+        var _a;
+        if (((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            return html ` <ix-menu-item
           @click=${() => this.dispatchEvent(new CustomEvent('download', {
-            detail: 'all',
-            bubbles: true,
-            composed: true,
-        }))}
+                detail: 'all',
+                bubbles: true,
+                composed: true,
+            }))}
         >
           <div slot="headline">Download All Records</div>
         </ix-menu-item>
         <ix-menu-item
           @click=${() => this.dispatchEvent(new CustomEvent('download', {
-            detail: 'filter',
-            bubbles: true,
-            composed: true,
-        }))}
+                detail: 'filter',
+                bubbles: true,
+                composed: true,
+            }))}
         >
           <div slot="headline">Download Current Filter</div>
-        </ix-menu-item>
+        </ix-menu-item>`;
+        }
+        return this.items
+            .filter(x => !x.hidden)
+            .map(m => html ` <ix-menu-item
+          .disabled=${m.disabled}
+          @click=${() => m.onClick(m.name)}
+        >
+          <div slot="headline">${m.label}</div>
+        </ix-menu-item>`);
+    }
+    render() {
+        return html ` <div style="position: relative">
+      <ix-icon-button
+        icon="download"
+        id="anchor"
+        @click=${this.toggleMenu}
+      ></ix-icon-button>
+      <ix-menu id="menu" anchor="anchor" has-overflow>
+        ${this.renderMenuItems()}
       </ix-menu>
     </div>`;
     }
@@ -47,6 +65,9 @@ __decorate([
 __decorate([
     query('#anchor')
 ], IxGridDownloadMenu.prototype, "downloadMenuAnchor", void 0);
+__decorate([
+    property({ type: Array })
+], IxGridDownloadMenu.prototype, "items", void 0);
 IxGridDownloadMenu = __decorate([
     customElement('ix-grid-download-menu')
 ], IxGridDownloadMenu);

package/dist/components/IxGridDownloadMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IxGridDownloadMenu.js","sourceRoot":"","sources":["../../src/components/IxGridDownloadMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;~~AAEzD~~,OAAO,oCAAoC,CAAC;AAC5C,OAAO,yCAAyC,CAAC;AACjD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;~~AAGnE~~,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;~~IAOhD~~,UAAU;QACR,IAAI,CAAC,YAAa,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,YAAa,CAAC,IAAI,CAAC;IACrD,CAAC;IAED,~~MAAM;QACJ~~,~~OAAO,~~IAAI,CAAA~~;;;;iBAIE~~,IAAI,CAAC,~~UAAU;;;;mBAIb~~,GAAG,EAAE,CACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE;~~YAC1B~~,MAAM,EAAE,KAAK;~~YACb~~,OAAO,EAAE,IAAI;~~YACb~~,QAAQ,EAAE,IAAI;~~SACf~~,CAAC,CACH;;;;;mBAKM,GAAG,EAAE,CACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE;~~YAC1B~~,MAAM,EAAE,QAAQ;~~YAChB~~,OAAO,EAAE,IAAI;~~YACb~~,QAAQ,EAAE,IAAI;~~SACf~~,CAAC,CACH~~;;;;;WAKF~~,CAAC;IACV,CAAC;;~~AA5Ce~~,yBAAM,GAAG,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;AAEtD;IAAf,KAAK,CAAC,OAAO,CAAC;wDAAuB;AAEpB;IAAjB,KAAK,CAAC,SAAS,CAAC;8DAAkC;~~AALxC~~,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,~~CA8C9B~~;~~SA9CY~~,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridDownloadMenuStyles } from './grid-download-menu-styles.js';\n\n@customElement('ix-grid-download-menu')\nexport class IxGridDownloadMenu extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridDownloadMenuStyles];\n\n @query('#menu') downloadMenu!: IxMenu;\n\n @query('#anchor') downloadMenuAnchor!: HTMLElement;\n\n toggleMenu() {\n this.downloadMenu!.open = !this.downloadMenu!.open;\n }\n\n ~~render~~() {\n ~~return~~ ~~html`~~ ~~<div~~ ~~style=\"position:~~ ~~relative\">\n <ix-icon-button\n icon=\"download\"\n id=\"anchor\"\n @click=$~~{~~this.toggleMenu}~~\n ~~></ix-icon-button>\n <ix-menu~~ ~~id=\"menu\"~~ ~~anchor=\"anchor\" has-overflow>\n~~ <ix-menu-item\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('download', {\n detail: 'all',\n bubbles: true,\n composed: true,\n })\n )}\n >\n <div slot=\"headline\">Download All Records</div>\n </ix-menu-item>\n <ix-menu-item\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('download', {\n detail: 'filter',\n bubbles: true,\n composed: true,\n })\n )}\n >\n <div slot=\"headline\">Download Current Filter</div>\n </ix-menu-item>\n </ix-menu>\n </div>`;\n }\n}\n"]}
1	+ {"version":3,"file":"IxGridDownloadMenu.js","sourceRoot":"","sources":["../../src/components/IxGridDownloadMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,oCAAoC,CAAC;AAC5C,OAAO,yCAAyC,CAAC;AACjD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAInE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAOsB,UAAK,GAAkC,EAAE,CAAC;IA0DvE,CAAC;IAxDC,UAAU;QACR,IAAI,CAAC,YAAa,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,YAAa,CAAC,IAAI,CAAC;IACrD,CAAC;IAED,eAAe;;QACb,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,MAAK,CAAC,EAAE;YAC5B,OAAO,IAAI,CAAA;mBACE,GAAG,EAAE,CACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE;gBAC1B,MAAM,EAAE,KAAK;gBACb,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH;;;;;mBAKM,GAAG,EAAE,CACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,UAAU,EAAE;gBAC1B,MAAM,EAAE,QAAQ;gBAChB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH;;;wBAGW,CAAC;SACpB;QAED,OAAO,IAAI,CAAC,KAAK;aACd,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;aACtB,GAAG,CACF,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;sBACK,CAAC,CAAC,QAAQ;mBACb,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;;iCAET,CAAC,CAAC,KAAK;wBAChB,CACjB,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,UAAU;;;UAGtB,IAAI,CAAC,eAAe,EAAE;;WAErB,CAAC;IACV,CAAC;;AA/De,yBAAM,GAAG,CAAC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC;AAEtD;IAAf,KAAK,CAAC,OAAO,CAAC;wDAAuB;AAEpB;IAAjB,KAAK,CAAC,SAAS,CAAC;8DAAkC;AAExB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAA2C;AAP1D,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAiE9B;SAjEY,kBAAkB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { IxMenu } from '@digital-realty/ix-menu';\nimport '@digital-realty/ix-menu/ix-menu.js';\nimport '@digital-realty/ix-menu/ix-menu-item.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridDownloadMenuStyles } from './grid-download-menu-styles.js';\nimport { IxGridDownloadMenuItemModel } from '../models/IxGridDownloadMenuItemModel.js';\n\n@customElement('ix-grid-download-menu')\nexport class IxGridDownloadMenu extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridDownloadMenuStyles];\n\n @query('#menu') downloadMenu!: IxMenu;\n\n @query('#anchor') downloadMenuAnchor!: HTMLElement;\n\n @property({ type: Array }) items: IxGridDownloadMenuItemModel[] = [];\n\n toggleMenu() {\n this.downloadMenu!.open = !this.downloadMenu!.open;\n }\n\n renderMenuItems() {\n if (this.items?.length === 0) {\n return html` <ix-menu-item\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('download', {\n detail: 'all',\n bubbles: true,\n composed: true,\n })\n )}\n >\n <div slot=\"headline\">Download All Records</div>\n </ix-menu-item>\n <ix-menu-item\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('download', {\n detail: 'filter',\n bubbles: true,\n composed: true,\n })\n )}\n >\n <div slot=\"headline\">Download Current Filter</div>\n </ix-menu-item>`;\n }\n\n return this.items\n .filter(x => !x.hidden)\n .map(\n m => html` <ix-menu-item\n .disabled=${m.disabled}\n @click=${() => m.onClick(m.name)}\n >\n <div slot=\"headline\">${m.label}</div>\n </ix-menu-item>`\n );\n }\n\n render() {\n return html` <div style=\"position: relative\">\n <ix-icon-button\n icon=\"download\"\n id=\"anchor\"\n @click=${this.toggleMenu}\n ></ix-icon-button>\n <ix-menu id=\"menu\" anchor=\"anchor\" has-overflow>\n ${this.renderMenuItems()}\n </ix-menu>\n </div>`;\n }\n}\n"]}

package/dist/components/IxGridRowFilter.d.ts CHANGED Viewed

@@ -31,6 +31,7 @@ export declare class IxGridRowFilter extends LitElement {
     clearFilters(): void;
     removeFilter(index: number): void;
     private onfilterColumnChange;
+    private onfilterOperatorChange;
     private onfilterValueChange;
     formatCamelCaseToEnglish(text: string): string;
     renderToolTip(): string | import("lit").TemplateResult<1>;

package/dist/components/IxGridRowFilter.js CHANGED Viewed

@@ -53,13 +53,15 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
         return this.filterColumns.filter(f => !this.filterNames.includes(f));
     }
     parseFilterQueryString() {
+        var _a;
         const params = new URLSearchParams(window.location.search);
         const filters = [];
         for (const [key, value] of params) {
+            const filterOperators = ((_a = this.filterableColumns.find(c => c.name === key)) === null || _a === void 0 ? void 0 : _a.filterOperators) || ['contains'];
             if (this.filterColumns.includes(key)) {
                 filters.push({
                     columnField: key,
-                    operatorValue: 'contains',
+                    operatorValue: filterOperators[0],
                     value,
                 });
             }
@@ -76,13 +78,15 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
         }));
     }
     addFilter() {
+        var _a;
         const nextFilter = this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
             '';
+        const filterOperators = ((_a = this.filterableColumns.find(c => c.name === nextFilter)) === null || _a === void 0 ? void 0 : _a.filterOperators) || ['contains'];
         this.filters = [
             ...this.filters,
             {
                 columnField: nextFilter,
-                operatorValue: 'contains',
+                operatorValue: filterOperators[0],
                 value: '',
             },
         ];
@@ -109,6 +113,14 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
             this.dispatchUpdate();
         }
     }
+    onfilterOperatorChange(index, e) {
+        const selectedValue = e.target.value;
+        this.filters[index].operatorValue = selectedValue;
+        this.filters = [...this.filters];
+        if (this.filters[index].value.length >= 3) {
+            this.dispatchUpdate();
+        }
+    }
     onfilterValueChange(index, e) {
         const oldValueLength = this.filters[index].value.length;
         const { value } = e.target;
@@ -141,6 +153,7 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
       </ul>`;
     }
     renderFilterInput(value, index) {
+        var _a, _b;
         const options = [value.columnField, ...this.unselectedFilters];
         const filterOptions = this.filterableColumns.filter(column => options.includes(column.name));
         return html `
@@ -221,8 +234,19 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
           <div class="filter-form-group">
             <label class="form-group-operator-label"
               ><span>Operator</span>
-              <select>
-                <option select="select">contains</option>
+              <select
+                @change=${(e) => this.onfilterOperatorChange(index, e)}
+                .value=${value.operatorValue}
+                data-v=${value.operatorValue}
+              >
+                ${repeat((_b = (_a = filterOptions.find(column => column.name === value.columnField)) === null || _a === void 0 ? void 0 : _a.filterOperators) !== null && _b !== void 0 ? _b : ['contains'], (filter) => html `
+                    <option
+                      value=${filter}
+                      ?selected=${filter === value.columnField}
+                    >
+                      ${filter}
+                    </option>
+                  `)}
               </select>
             </label>
           </div>

package/dist/components/IxGridRowFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IxGridRowFilter.js","sourceRoot":"","sources":["../../src/components/IxGridRowFilter.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/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridRowFilterStyles } from './grid-row-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\nimport { copy } from '../ix-grid-copy.js';\n\nexport interface Filter {\n columnField: string;\n operatorValue: string;\n value: string;\n}\n\n@customElement('ix-grid-row-filter')\nexport class IxGridRowFilter extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridRowFilterStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @state() private isDropdownVisible: boolean = false;\n\n @state() private filters: Filter[] = [];\n\n @state() private filterableColumns: Column[] = [];\n\n @state() private filterColumns: string[] = [];\n\n @state() private activeFilters: Filter[] = [];\n\n @state() private mapSelect: boolean = false;\n\n updateActiveFilters() {\n this.activeFilters = this.filters.filter(filter => filter.value.length > 0);\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.closeOnOuterClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.closeOnOuterClick);\n }\n\n firstUpdated() {\n this.filterableColumns = this.columns.filter(column => column.filterable);\n this.filterColumns = this.filterableColumns.map(column => column.name);\n this.filters = this.parseFilterQueryString();\n if (!this.filters.length) {\n this.addFilter();\n }\n this.updateActiveFilters();\n this.dispatchUpdate();\n }\n\n get filterNames() {\n return this.filters.map(filter => filter.columnField);\n }\n\n get unselectedFilters() {\n return this.filterColumns.filter(f => !this.filterNames.includes(f));\n }\n\n closeOnOuterClick = (e: Event) => {\n if (!e.composedPath().includes(this)) {\n this.isDropdownVisible = false;\n }\n };\n\n parseFilterQueryString(): Filter[] {\n const params = new URLSearchParams(window.location.search);\n const filters: Filter[] = [];\n\n for (const [key, value] of params) {\n if (this.filterColumns.includes(key)) {\n filters.push({\n columnField: key,\n operatorValue: 'contains',\n value,\n });\n }\n }\n\n return filters;\n }\n\n dispatchUpdate() {\n this.dispatchEvent(\n new CustomEvent('rowFilter', {\n detail: {\n filters: this.filters.filter(filter => filter.value.length >= 3),\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n addFilter() {\n const nextFilter =\n this.filterColumns.find(filter => !this.filterNames.includes(filter)) \|\|\n '';\n this.filters = [\n ...this.filters,\n {\n columnField: nextFilter,\n operatorValue: 'contains',\n value: '',\n },\n ];\n this.updateActiveFilters();\n }\n\n clearFilters() {\n this.filters = [];\n this.addFilter();\n this.dispatchUpdate();\n }\n\n removeFilter(index: number) {\n this.filters = this.filters.filter((_, i) => i !== index);\n this.dispatchUpdate();\n if (this.filters.length === 0) {\n this.isDropdownVisible = false;\n this.addFilter();\n }\n }\n\n private onfilterColumnChange(index: number, e: Event) {\n const selectedValue = (e.target as HTMLSelectElement).value;\n this.filters[index].columnField = selectedValue;\n\n this.filters = [...this.filters];\n\n if (this.filters[index].value.length >= 3) {\n this.dispatchUpdate();\n }\n }\n\n private onfilterValueChange(index: number, e: Event) {\n const oldValueLength = this.filters[index].value.length;\n const { value } = e.target as HTMLInputElement;\n this.filters[index].value = value;\n\n const newValueLength = this.filters[index].value.length;\n if (\n this.filters[index].columnField.length > 0 &&\n (newValueLength >= 3 \|\| newValueLength < oldValueLength)\n ) {\n this.dispatchUpdate();\n }\n this.updateActiveFilters();\n }\n\n formatCamelCaseToEnglish(text: string) {\n const spaced = text.replace(/([A-Z])/g, ' $1').toLowerCase();\n const english = spaced.charAt(0).toUpperCase() + spaced.slice(1);\n return english;\n }\n\n renderToolTip() {\n if (this.isDropdownVisible) {\n return copy.hideFilters;\n }\n if (!this.activeFilters.length) {\n return copy.showFilters;\n }\n return html` <p>${this.activeFilters.length} ${copy.activeFilter}</p>\n <ul>\n ${this.activeFilters.map(\n filter => html`<li>\n ${this.formatCamelCaseToEnglish(filter.columnField)}\n ${filter.operatorValue} ${filter.value}\n </li>`\n )}\n </ul>`;\n }\n\n renderFilterInput(value: Filter, index: number) {\n const options = [value.columnField, ...this.unselectedFilters];\n const filterOptions = this.filterableColumns.filter(column =>\n options.includes(column.name)\n );\n return html`\n <div class=\"filter-form\">\n <div class=\"filter-remove filter-form-column\">\n <div class=\"form-group\">\n <ix-icon-button\n icon=\"close\"\n @click=${() => this.removeFilter(index)}\n @keyDown=${(e: KeyboardEvent) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n this.removeFilter(index);\n }\n }}\n ></ix-icon-button>\n </div>\n </div>\n ${this.mapSelect\n ? html`<div\n class=\"filter-form-column filter-form-column-border filterColumnField\"\n >\n <div class=\"form-group\">\n <label\n class=\"form-group-column-label\"\n title=\"select: ${value.columnField}, options: ${filterOptions.map(\n column => `value=${column.name}, selected=${\n column.name === value.columnField\n }, ${column.header}\n `\n )}\"\n >Columns</label\n >\n\n <select\n @change=${(e: Event) => this.onfilterColumnChange(index, e)}\n .value=${value.columnField}\n data-v=${value.columnField}\n >\n ${filterOptions.map(\n column => html`\n <option\n value=${column.name}\n ?selected=${column.name === value.columnField}\n >\n ${column.header}\n </option>\n `\n )}\n </select>\n </div>\n </div>`\n : nothing}\n\n <div\n class=\"filter-form-column filter-form-column-border filterColumnField\"\n >\n <div class=\"filter-form-group\">\n <label\n class=\"form-group-column-label\"\n title=\"select: ${value.columnField}, options: ${filterOptions.map(\n column => `value=${column.name}, selected=${\n column.name === value.columnField\n }, ${column.header}\n `\n )}\"\n ><span>Columns</span>\n <select\n @change=${(e: Event) => this.onfilterColumnChange(index, e)}\n .value=${value.columnField}\n data-v=${value.columnField}\n >\n ${repeat(\n filterOptions,\n (column: Column) => column.name,\n (column: Column) => html`\n <option\n value=${column.name}\n ?selected=${column.name === value.columnField}\n >\n ${column.header}\n </option>\n `\n )}\n </select>\n </label>\n </div>\n </div>\n\n <div\n class=\"filter-form-column filter-form-column-border filterOperatorField\"\n >\n <div class=\"filter-form-group\">\n <label class=\"form-group-operator-label\"\n ><span>Operator</span>\n <select>\n <option select=\"select\">contains</option>\n </select>\n </label>\n </div>\n </div>\n <div\n class=\"filter-form-column filter-form-column-border filterValueField\"\n >\n <div class=\"filter-form-group\">\n <label class=\"form-group-value-label\"\n ><span>Value</span>\n <input\n placeholder=\"Filter value\"\n @input=${(e: Event) => this.onfilterValueChange(index, e)}\n .value=${value.value}\n />\n </label>\n </div>\n </div>\n </div>\n `;\n }\n\n renderDropdown() {\n const disableAddButton =\n this.filters.length >= this.filterColumns.length \|\|\n this.activeFilters.length < this.filters.length;\n return html` <div class=\"filter-dropdown-content\">\n <div class=\"filter-body\">\n ${this.filters.map((filter, index) =>\n this.renderFilterInput(filter, index)\n )}\n </div>\n <div class=\"filter-footer\">\n <button\n class=\"add-filter-button\"\n @click=\"${() => this.addFilter()}\"\n ?disabled=${disableAddButton}\n >\n <ix-icon-button icon=\"add\"></ix-icon-button>\n <span class=\"add\">ADD FILTER</span>\n </button>\n <button\n class=\"clear\"\n @click=\"${() => this.clearFilters()}\"\n ?disabled=${this.activeFilters.length === 0}\n >\n <span class=\"add\">CLEAR ALL</span>\n </button>\n </div>\n </div>`;\n }\n\n render() {\n return html` <div class=\"grid-menu\">\n <div class=\"filter-container tooltip-container\">\n ${this.activeFilters.length > 0\n ? html`<span class=\"filter-superscript\"\n >${this.activeFilters.length}</span\n >`\n : nothing}\n <ix-button\n appearance=\"text\"\n class=\"filter_list filter-button\"\n @click=${() => {\n this.isDropdownVisible = !this.isDropdownVisible;\n }}\n @keyDown=${() => {\n this.isDropdownVisible = !this.isDropdownVisible;\n }}\n >\n <div class=\"slot-wrap\">\n <ix-icon appearance=\"default\" class=\"filter-icon\"\n >filter_list</ix-icon\n >\n <span class=\"filter\">${copy.filters}</span>\n </div>\n </ix-button>\n <div class=\"tool-tip\">${this.renderToolTip()}</div>\n ${this.isDropdownVisible ? this.renderDropdown() : nothing}\n </div>\n </div>`;\n }\n}\n"]}
1	+ {"version":3,"file":"IxGridRowFilter.js","sourceRoot":"","sources":["../../src/components/IxGridRowFilter.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/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridRowFilterStyles } from './grid-row-filter-styles.js';\nimport type { Column, FilterOperator } from '../IxGrid.js';\nimport { copy } from '../ix-grid-copy.js';\n\nexport interface Filter {\n columnField: string;\n operatorValue: string;\n value: string;\n}\n\n@customElement('ix-grid-row-filter')\nexport class IxGridRowFilter extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridRowFilterStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @state() private isDropdownVisible: boolean = false;\n\n @state() private filters: Filter[] = [];\n\n @state() private filterableColumns: Column[] = [];\n\n @state() private filterColumns: string[] = [];\n\n @state() private activeFilters: Filter[] = [];\n\n @state() private mapSelect: boolean = false;\n\n updateActiveFilters() {\n this.activeFilters = this.filters.filter(filter => filter.value.length > 0);\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.closeOnOuterClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.closeOnOuterClick);\n }\n\n firstUpdated() {\n this.filterableColumns = this.columns.filter(column => column.filterable);\n this.filterColumns = this.filterableColumns.map(column => column.name);\n this.filters = this.parseFilterQueryString();\n if (!this.filters.length) {\n this.addFilter();\n }\n this.updateActiveFilters();\n this.dispatchUpdate();\n }\n\n get filterNames() {\n return this.filters.map(filter => filter.columnField);\n }\n\n get unselectedFilters() {\n return this.filterColumns.filter(f => !this.filterNames.includes(f));\n }\n\n closeOnOuterClick = (e: Event) => {\n if (!e.composedPath().includes(this)) {\n this.isDropdownVisible = false;\n }\n };\n\n parseFilterQueryString(): Filter[] {\n const params = new URLSearchParams(window.location.search);\n const filters: Filter[] = [];\n\n for (const [key, value] of params) {\n const filterOperators = this.filterableColumns.find(c => c.name === key)\n ?.filterOperators \|\| ['contains'];\n if (this.filterColumns.includes(key)) {\n filters.push({\n columnField: key,\n operatorValue: filterOperators[0],\n value,\n });\n }\n }\n\n return filters;\n }\n\n dispatchUpdate() {\n this.dispatchEvent(\n new CustomEvent('rowFilter', {\n detail: {\n filters: this.filters.filter(filter => filter.value.length >= 3),\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n addFilter() {\n const nextFilter =\n this.filterColumns.find(filter => !this.filterNames.includes(filter)) \|\|\n '';\n const filterOperators = this.filterableColumns.find(\n c => c.name === nextFilter\n )?.filterOperators \|\| ['contains'];\n this.filters = [\n ...this.filters,\n {\n columnField: nextFilter,\n operatorValue: filterOperators[0],\n value: '',\n },\n ];\n this.updateActiveFilters();\n }\n\n clearFilters() {\n this.filters = [];\n this.addFilter();\n this.dispatchUpdate();\n }\n\n removeFilter(index: number) {\n this.filters = this.filters.filter((_, i) => i !== index);\n this.dispatchUpdate();\n if (this.filters.length === 0) {\n this.isDropdownVisible = false;\n this.addFilter();\n }\n }\n\n private onfilterColumnChange(index: number, e: Event) {\n const selectedValue = (e.target as HTMLSelectElement).value;\n this.filters[index].columnField = selectedValue;\n\n this.filters = [...this.filters];\n\n if (this.filters[index].value.length >= 3) {\n this.dispatchUpdate();\n }\n }\n\n private onfilterOperatorChange(index: number, e: Event) {\n const selectedValue = (e.target as HTMLSelectElement).value;\n this.filters[index].operatorValue = selectedValue;\n\n this.filters = [...this.filters];\n\n if (this.filters[index].value.length >= 3) {\n this.dispatchUpdate();\n }\n }\n\n private onfilterValueChange(index: number, e: Event) {\n const oldValueLength = this.filters[index].value.length;\n const { value } = e.target as HTMLInputElement;\n this.filters[index].value = value;\n\n const newValueLength = this.filters[index].value.length;\n if (\n this.filters[index].columnField.length > 0 &&\n (newValueLength >= 3 \|\| newValueLength < oldValueLength)\n ) {\n this.dispatchUpdate();\n }\n this.updateActiveFilters();\n }\n\n formatCamelCaseToEnglish(text: string) {\n const spaced = text.replace(/([A-Z])/g, ' $1').toLowerCase();\n const english = spaced.charAt(0).toUpperCase() + spaced.slice(1);\n return english;\n }\n\n renderToolTip() {\n if (this.isDropdownVisible) {\n return copy.hideFilters;\n }\n if (!this.activeFilters.length) {\n return copy.showFilters;\n }\n return html` <p>${this.activeFilters.length} ${copy.activeFilter}</p>\n <ul>\n ${this.activeFilters.map(\n filter => html`<li>\n ${this.formatCamelCaseToEnglish(filter.columnField)}\n ${filter.operatorValue} ${filter.value}\n </li>`\n )}\n </ul>`;\n }\n\n renderFilterInput(value: Filter, index: number) {\n const options = [value.columnField, ...this.unselectedFilters];\n const filterOptions = this.filterableColumns.filter(column =>\n options.includes(column.name)\n );\n return html`\n <div class=\"filter-form\">\n <div class=\"filter-remove filter-form-column\">\n <div class=\"form-group\">\n <ix-icon-button\n icon=\"close\"\n @click=${() => this.removeFilter(index)}\n @keyDown=${(e: KeyboardEvent) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n this.removeFilter(index);\n }\n }}\n ></ix-icon-button>\n </div>\n </div>\n ${this.mapSelect\n ? html`<div\n class=\"filter-form-column filter-form-column-border filterColumnField\"\n >\n <div class=\"form-group\">\n <label\n class=\"form-group-column-label\"\n title=\"select: ${value.columnField}, options: ${filterOptions.map(\n column => `value=${column.name}, selected=${\n column.name === value.columnField\n }, ${column.header}\n `\n )}\"\n >Columns</label\n >\n\n <select\n @change=${(e: Event) => this.onfilterColumnChange(index, e)}\n .value=${value.columnField}\n data-v=${value.columnField}\n >\n ${filterOptions.map(\n column => html`\n <option\n value=${column.name}\n ?selected=${column.name === value.columnField}\n >\n ${column.header}\n </option>\n `\n )}\n </select>\n </div>\n </div>`\n : nothing}\n\n <div\n class=\"filter-form-column filter-form-column-border filterColumnField\"\n >\n <div class=\"filter-form-group\">\n <label\n class=\"form-group-column-label\"\n title=\"select: ${value.columnField}, options: ${filterOptions.map(\n column => `value=${column.name}, selected=${\n column.name === value.columnField\n }, ${column.header}\n `\n )}\"\n ><span>Columns</span>\n <select\n @change=${(e: Event) => this.onfilterColumnChange(index, e)}\n .value=${value.columnField}\n data-v=${value.columnField}\n >\n ${repeat(\n filterOptions,\n (column: Column) => column.name,\n (column: Column) => html`\n <option\n value=${column.name}\n ?selected=${column.name === value.columnField}\n >\n ${column.header}\n </option>\n `\n )}\n </select>\n </label>\n </div>\n </div>\n\n <div\n class=\"filter-form-column filter-form-column-border filterOperatorField\"\n >\n <div class=\"filter-form-group\">\n <label class=\"form-group-operator-label\"\n ><span>Operator</span>\n <select\n @change=${(e: Event) => this.onfilterOperatorChange(index, e)}\n .value=${value.operatorValue}\n data-v=${value.operatorValue}\n >\n ${repeat(\n filterOptions.find(\n column => column.name === value.columnField\n )?.filterOperators ?? ['contains'],\n (filter: FilterOperator) => html`\n <option\n value=${filter}\n ?selected=${filter === value.columnField}\n >\n ${filter}\n </option>\n `\n )}\n </select>\n </label>\n </div>\n </div>\n <div\n class=\"filter-form-column filter-form-column-border filterValueField\"\n >\n <div class=\"filter-form-group\">\n <label class=\"form-group-value-label\"\n ><span>Value</span>\n <input\n placeholder=\"Filter value\"\n @input=${(e: Event) => this.onfilterValueChange(index, e)}\n .value=${value.value}\n />\n </label>\n </div>\n </div>\n </div>\n `;\n }\n\n renderDropdown() {\n const disableAddButton =\n this.filters.length >= this.filterColumns.length \|\|\n this.activeFilters.length < this.filters.length;\n return html` <div class=\"filter-dropdown-content\">\n <div class=\"filter-body\">\n ${this.filters.map((filter, index) =>\n this.renderFilterInput(filter, index)\n )}\n </div>\n <div class=\"filter-footer\">\n <button\n class=\"add-filter-button\"\n @click=\"${() => this.addFilter()}\"\n ?disabled=${disableAddButton}\n >\n <ix-icon-button icon=\"add\"></ix-icon-button>\n <span class=\"add\">ADD FILTER</span>\n </button>\n <button\n class=\"clear\"\n @click=\"${() => this.clearFilters()}\"\n ?disabled=${this.activeFilters.length === 0}\n >\n <span class=\"add\">CLEAR ALL</span>\n </button>\n </div>\n </div>`;\n }\n\n render() {\n return html` <div class=\"grid-menu\">\n <div class=\"filter-container tooltip-container\">\n ${this.activeFilters.length > 0\n ? html`<span class=\"filter-superscript\"\n >${this.activeFilters.length}</span\n >`\n : nothing}\n <ix-button\n appearance=\"text\"\n class=\"filter_list filter-button\"\n @click=${() => {\n this.isDropdownVisible = !this.isDropdownVisible;\n }}\n @keyDown=${() => {\n this.isDropdownVisible = !this.isDropdownVisible;\n }}\n >\n <div class=\"slot-wrap\">\n <ix-icon appearance=\"default\" class=\"filter-icon\"\n >filter_list</ix-icon\n >\n <span class=\"filter\">${copy.filters}</span>\n </div>\n </ix-button>\n <div class=\"tool-tip\">${this.renderToolTip()}</div>\n ${this.isDropdownVisible ? this.renderDropdown() : nothing}\n </div>\n </div>`;\n }\n}\n"]}

package/dist/ix-grid.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{query,customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import"@vaadin/grid";import{columnHeaderRenderer,columnBodyRenderer}from"@vaadin/grid/lit.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-select/ix-select.js";import{repeat}from"lit/directives/repeat.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-button/ix-button.js";const IxGridViewStyles=css`@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype')}*{font-family:'Red Hat Display',sans-serif}vaadin-grid::part(cell){cursor:pointer}vaadin-grid::part(header-cell){cursor:default;--vaadin-grid-cell-background:#fff}vaadin-grid::part(row):hover{--vaadin-grid-cell-background:#f5f5f5}ix-icon-button{--md-icon-button-icon-size:28px;--md-icon-button-icon-color:rgb(20, 86, 224);--md-icon-button-hover-icon-color:rgb(20, 86, 224);--md-icon-button-pressed-icon-color:rgb(20, 86, 224);--md-icon-button-focus-icon-color:rgb(20, 86, 224);--ix-icon-line-height:1}ix-button{--md-text-button-label-text-color:var(--md-sys-color-primary);--md-text-button-hover-state-layer-color:#49454f;--md-text-button-pressed-icon-color:rgb(20, 86, 224);--md-text-button-focus-icon-color:rgb(20, 86, 224);--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-dialog{--md-dialog-container-color:#fff}ix-grid ix-textbox{--md-sys-color-on-surface-variant:#b8bfc8}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}.material-icons.delete{color:#6d758c}.material-icons.info{color:orange;font-size:48px}.material-icons.check_circle{color:green}.material-icons.mail{color:#ff9800}.material-icons.warning{color:#db0028}.material-icons.do_not_disturb_on{color:#6d758c}.grid-container{background-color:#fff;border-radius:12px;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;box-sizing:border-box;padding:3px}.touch-edge{margin:0 -3px}.grid-header{display:flex;-webkit-box-pack:justify;place-content:space-between;-webkit-box-align:center;align-items:center;padding:16px 24px;flex-wrap:wrap;gap:18px}.grid-header h2{margin:0;font-style:normal;font-weight:700;font-size:20px;line-height:24px;letter-spacing:.15px;color:#092241;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-menu{display:flex;align-items:center;margin-left:auto}.grid-menu ix-button{--md-text-button-leading-space:4px;--md-text-button-trailing-space:4px}.grid-menu span{color:#1456e0;cursor:pointer}.grid-empty-content{height:73vh;justify-content:center;align-items:flex-start;padding-top:54px}.grid-empty-content h2{font-weight:900;font-size:22px;color:#000}.header{font-weight:700;display:flex;user-select:none;align-items:center}.header .header-sort-icon{padding-left:5px;opacity:0;font-size:17px;color:rgba(0,0,0,.54);cursor:pointer;height:18px}.header:hover .header-sort-icon{opacity:1}.loading{opacity:.25}span .disabled{color:rgba(9,34,65,.7)}.disable-cursor{cursor:default!important}.accounts{display:flex;align-items:center}.account-name{margin:0 8px 0 3px}vaadin-grid-cell-content{font-size:14px;--_cell-padding:1rem}.row-limit{display:flex;padding:8px}`,IxGridDownloadMenuStyles=css`ix-menu{--md-menu-container-color:#fff}`;let IxGridDownloadMenu=class extends LitElement{toggleMenu(){this.downloadMenu.open=!this.downloadMenu.open}render(){return html`<div style="position:relative"><ix-icon-button icon="download" id="anchor" @click="${this.toggleMenu}"></ix-icon-button><ix-menu id="menu" anchor="anchor" has-overflow><ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"all",bubbles:!0,composed:!0}))}"><div slot="headline">Download All Records</div></ix-menu-item><ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"filter",bubbles:!0,composed:!0}))}"><div slot="headline">Download Current Filter</div></ix-menu-item></ix-menu></div>`}};IxGridDownloadMenu.styles=[IxGridViewStyles,IxGridDownloadMenuStyles],__decorate([query("#menu")],IxGridDownloadMenu.prototype,"downloadMenu",void 0),__decorate([query("#anchor")],IxGridDownloadMenu.prototype,"downloadMenuAnchor",void 0),IxGridDownloadMenu=__decorate([customElement("ix-grid-download-menu")],IxGridDownloadMenu);const PaginationStyles=css`.pagination{display:flex;align-items:center;justify-content:end;gap:1rem;font-size:12px;margin:1rem}.pagination-nav{display:flex}ix-icon-button{--md-icon-button-icon-color:black;--md-icon-button-hover-icon-color:black;--md-icon-button-pressed-icon-color:black;--md-icon-button-focus-icon-color:black;--ix-icon-line-height:1}ix-select{--md-sys-color-primary:red;--md-sys-color-secondary:blue;--md-sys-color-tertiary:yellow;--md-menu-container-color:#fff;--md-filled-select-text-field-container-color:#fff;--md-filled-select-text-field-active-indicator-height:0px;--md-filled-select-text-field-hover-indicator-height:0px;--md-filled-field-hover-active-indicator-height:0px;--md-filled-field-focus-active-indicator-height:0px;--md-filled-field-content-size:14px;--md-filled-field-bottom-space:4px;--md-filled-field-top-space:4px;--md-filled-select-text-field-focus-trailing-icon-color:rgb(20, 86, 224);--md-filled-select-text-field-focus-active-indicator-color:var(
+import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{query,property,customElement,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import"@vaadin/grid";import{columnHeaderRenderer,columnBodyRenderer}from"@vaadin/grid/lit.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-select/ix-select.js";import{repeat}from"lit/directives/repeat.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-button/ix-button.js";const IxGridViewStyles=css`@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype')}*{font-family:'Red Hat Display',sans-serif}vaadin-grid::part(cell){cursor:pointer}vaadin-grid::part(header-cell){cursor:default;--vaadin-grid-cell-background:#fff}vaadin-grid::part(row):hover{--vaadin-grid-cell-background:#f5f5f5}ix-icon-button{--md-icon-button-icon-size:28px;--md-icon-button-icon-color:rgb(20, 86, 224);--md-icon-button-hover-icon-color:rgb(20, 86, 224);--md-icon-button-pressed-icon-color:rgb(20, 86, 224);--md-icon-button-focus-icon-color:rgb(20, 86, 224);--ix-icon-line-height:1}ix-button{--md-text-button-label-text-color:var(--md-sys-color-primary);--md-text-button-hover-state-layer-color:#49454f;--md-text-button-pressed-icon-color:rgb(20, 86, 224);--md-text-button-focus-icon-color:rgb(20, 86, 224);--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-dialog{--md-dialog-container-color:#fff}ix-grid ix-textbox{--md-sys-color-on-surface-variant:#b8bfc8}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}.material-icons.delete{color:#6d758c}.material-icons.info{color:orange;font-size:48px}.material-icons.check_circle{color:green}.material-icons.mail{color:#ff9800}.material-icons.warning{color:#db0028}.material-icons.do_not_disturb_on{color:#6d758c}.grid-container{background-color:#fff;border-radius:12px;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;box-sizing:border-box;padding:3px}.touch-edge{margin:0 -3px}.grid-header{display:flex;-webkit-box-pack:justify;place-content:space-between;-webkit-box-align:center;align-items:center;padding:16px 24px;flex-wrap:wrap;gap:18px}.grid-header h2{margin:0;font-style:normal;font-weight:700;font-size:20px;line-height:24px;letter-spacing:.15px;color:#092241;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.grid-menu{display:flex;align-items:center;margin-left:auto}.grid-menu ix-button{--md-text-button-leading-space:4px;--md-text-button-trailing-space:4px}.grid-menu span{color:#1456e0;cursor:pointer}.grid-empty-content{height:73vh;justify-content:center;align-items:flex-start;padding-top:54px}.grid-empty-content h2{font-weight:900;font-size:22px;color:#000}.header{font-weight:700;display:flex;user-select:none;align-items:center}.header .header-sort-icon{padding-left:5px;opacity:0;font-size:17px;color:rgba(0,0,0,.54);cursor:pointer;height:18px}.header:hover .header-sort-icon{opacity:1}.loading{opacity:.25}span .disabled{color:rgba(9,34,65,.7)}.disable-cursor{cursor:default!important}.accounts{display:flex;align-items:center}.account-name{margin:0 8px 0 3px}vaadin-grid-cell-content{font-size:14px;--_cell-padding:1rem}.row-limit{display:flex;padding:8px}`,IxGridDownloadMenuStyles=css`ix-menu{--md-menu-container-color:#fff}`;let IxGridDownloadMenu=class extends LitElement{constructor(){super(...arguments),this.items=[]}toggleMenu(){this.downloadMenu.open=!this.downloadMenu.open}renderMenuItems(){var e;return 0===(null==(e=this.items)?void 0:e.length)?html`<ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"all",bubbles:!0,composed:!0}))}"><div slot="headline">Download All Records</div></ix-menu-item><ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"filter",bubbles:!0,composed:!0}))}"><div slot="headline">Download Current Filter</div></ix-menu-item>`:this.items.filter(e=>!e.hidden).map(e=>html`<ix-menu-item .disabled="${e.disabled}" @click="${()=>e.onClick(e.name)}"><div slot="headline">${e.label}</div></ix-menu-item>`)}render(){return html`<div style="position:relative"><ix-icon-button icon="download" id="anchor" @click="${this.toggleMenu}"></ix-icon-button><ix-menu id="menu" anchor="anchor" has-overflow>${this.renderMenuItems()}</ix-menu></div>`}};IxGridDownloadMenu.styles=[IxGridViewStyles,IxGridDownloadMenuStyles],__decorate([query("#menu")],IxGridDownloadMenu.prototype,"downloadMenu",void 0),__decorate([query("#anchor")],IxGridDownloadMenu.prototype,"downloadMenuAnchor",void 0),__decorate([property({type:Array})],IxGridDownloadMenu.prototype,"items",void 0),IxGridDownloadMenu=__decorate([customElement("ix-grid-download-menu")],IxGridDownloadMenu);const PaginationStyles=css`.pagination{display:flex;align-items:center;justify-content:end;gap:1rem;font-size:12px;margin:1rem}.pagination-nav{display:flex}ix-icon-button{--md-icon-button-icon-color:black;--md-icon-button-hover-icon-color:black;--md-icon-button-pressed-icon-color:black;--md-icon-button-focus-icon-color:black;--ix-icon-line-height:1}ix-select{--md-sys-color-primary:red;--md-sys-color-secondary:blue;--md-sys-color-tertiary:yellow;--md-menu-container-color:#fff;--md-filled-select-text-field-container-color:#fff;--md-filled-select-text-field-active-indicator-height:0px;--md-filled-select-text-field-hover-indicator-height:0px;--md-filled-field-hover-active-indicator-height:0px;--md-filled-field-focus-active-indicator-height:0px;--md-filled-field-content-size:14px;--md-filled-field-bottom-space:4px;--md-filled-field-top-space:4px;--md-filled-select-text-field-focus-trailing-icon-color:rgb(20, 86, 224);--md-filled-select-text-field-focus-active-indicator-color:var(
       --md-filled-select-text-field-focus-trailing-icon-color
-    )}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}`,copy={activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",user:"user",viewMore:"VIEW MORE",viewLess:"VIEW LESS"};let IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){const e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><p>${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${e=>{e=e.target;this.pageSize=Number(e.value),this.updatePagination()}}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select><p>${(this.page-1)*this.pageSize+1} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${this.recordCount}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right"></ix-icon-button></div></div>`}};IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination);const IxGridColumnFilterStyles=css`.dropdown-content{position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px}.dropdown-content>div{margin:0;font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;letter-spacing:.25px;color:#092241;display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center;background-color:#f9f9f9}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{flex:2}.dropdown-content label ix-icon.draggable{font-size:24px;color:var(--md-sys-color-primary,#1456e0);cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;opacity:0}.dropdown-content label:hover ix-icon.draggable{opacity:1}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:#db0028;border-radius:50%}ix-switch{padding:2px 4px;--md-switch-track-height:12px;--md-switch-track-width:35px;--md-sys-color-primary:rgba(20, 86, 224, 0.68);--md-sys-color-on-primary:#1456e0;--md-sys-color-primary-container:#1456e0;--md-switch-handle-height:19px;--md-switch-handle-width:18px;--md-sys-color-surface-container-highest:#9e9e9e;--md-sys-color-outline:#9e9e9e;--md-switch-pressed-handle-height:19px;--md-switch-pressed-handle-width:18px;--md-switch-handle-color:#fff;--md-sys-color-on-surface-variant:white;--selected-handle-height:19px;--selected-handle-width:18px;--_pressed-handle-height:19px;--_pressed-handle-width:18px;--md-switch-selected-handle-height:19px;--md-switch-selected-handle-width:18px;margin:11px 8px 1px 0}.list{position:relative}`,triggerKeys=[" ","Enter"];let IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.localStorageID=void 0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}initializeLocalStorage(){if(this.localStorageID){var e=localStorage.getItem(this.localStorageID);if(e){const i=JSON.parse(e);this.columns.forEach((e,t)=>{i.includes(e.name)&&(this.columns[t].hidden=!0)})}this.dispatchUpdate()}}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),void 0!==this.localStorageID&&localStorage.setItem(this.localStorageID,JSON.stringify(this.disabledColumns)),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),void 0!==this.localStorageID&&localStorage.setItem(this.localStorageID,JSON.stringify(this.disabledColumns)),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id"));this.dragEvent.startId=e}dragend(){var e,t;this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1}}dragenter(e){var e=e.target;e.classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}render(){return html`<div class="grid-menu"><span @click="${()=>{this.isDropdownVisible=!0}}" @keyDown="${e=>{triggerKeys.includes(e.key)&&(this.isDropdownVisible=!0)}}" class="list list-dropdown"><ix-icon-button appearance="default" icon="list"></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns,e=>e.name,(e,t)=>html`<div class="${e.hidden?"disabled":""}"><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="true" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p><ix-icon class="draggable">drag_handle</ix-icon></label></div>`)}</div>`:nothing}</span></div>`}};IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"localStorageID",void 0),__decorate([state()],IxGridColumnFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridColumnFilter.prototype,"disabledColumns",void 0),__decorate([state()],IxGridColumnFilter.prototype,"dragEvent",void 0),IxGridColumnFilter=__decorate([customElement("ix-grid-column-filter")],IxGridColumnFilter);const IxGridRowFilterStyles=css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:#1456e0;margin-right:5px}.grid-menu ix-button .filter{font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;margin-top:2px}.filter-form{white-space:nowrap;padding:9px;font-family:'Open Sans',sans-serif;color:#5d6d82}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:#5d6d82}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-form input,.filter-form option,.filter-form select{border-radius:0;cursor:pointer;letter-spacing:1.44px;line-height:1.4375em;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;font-size:16px;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;font-family:'Open Sans',sans-serif;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}.form-group label{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.add-filter-button .add{margin-right:0;margin-left:-6px}.filter-footer{margin-top:auto;display:flex;align-items:left;padding:0;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;width:100%}.filter-footer button{align-items:center!important;margin-left:0}.filter-footer .add{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px}.filter-footer .clear{margin-left:auto!important}.form-group .close{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.25rem;font-weight:lighter}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:98;display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0;height:16px;width:16px;border-radius:50%;background-color:#1456e0;color:#fff}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.add-filter-button.disabled{opacity:.5;cursor:not-allowed}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:#fff;overflow-wrap:break-word;border-radius:3px;background-color:#071454;padding:5px 8px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;color:#fff;overflow-wrap:break-word;border-radius:3px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px}.add-filter-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}.add-filter-button:disabled,.clear:disabled{opacity:.25;cursor:not-allowed}button{-webkit-box-align:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}ix-button.filter-button{padding-inline:0}.grid-menu ix-button{align-items:center;display:flex}`;let IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.filters=this.parseFilterQueryString(),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate()}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){var e,t,i=[];for([e,t]of new URLSearchParams(window.location.search))this.filterColumns.includes(e)&&i.push({columnField:e,operatorValue:"contains",value:t});return i}dispatchUpdate(){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length)},bubbles:!0,composed:!0}))}addFilter(){var e=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";this.filters=[...this.filters,{columnField:e,operatorValue:"contains",value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter())}onfilterColumnChange(e,t){t=t.target.value;this.filters[e].columnField=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.target["value"],t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderFilterInput(t,i){const o=[t.columnField,...this.unselectedFilters];var e=this.filterableColumns.filter(e=>o.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${e.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
+    )}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}`,copy={activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",user:"user",viewMore:"VIEW MORE",viewLess:"VIEW LESS"};let IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){const e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><p>${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${e=>{e=e.target;this.pageSize=Number(e.value),this.updatePagination()}}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select><p>${(this.page-1)*this.pageSize+1} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${this.recordCount}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right"></ix-icon-button></div></div>`}};IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination);const IxGridColumnFilterStyles=css`.dropdown-content{position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px}.dropdown-content>div{margin:0;font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;letter-spacing:.25px;color:#092241;display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center;background-color:#f9f9f9}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{flex:2}.dropdown-content label ix-icon.draggable{font-size:24px;color:var(--md-sys-color-primary,#1456e0);cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;opacity:0}.dropdown-content label:hover ix-icon.draggable{opacity:1}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:#db0028;border-radius:50%}ix-switch{padding:2px 4px;--md-switch-track-height:12px;--md-switch-track-width:35px;--md-sys-color-primary:rgba(20, 86, 224, 0.68);--md-sys-color-on-primary:#1456e0;--md-sys-color-primary-container:#1456e0;--md-switch-handle-height:19px;--md-switch-handle-width:18px;--md-sys-color-surface-container-highest:#9e9e9e;--md-sys-color-outline:#9e9e9e;--md-switch-pressed-handle-height:19px;--md-switch-pressed-handle-width:18px;--md-switch-handle-color:#fff;--md-sys-color-on-surface-variant:white;--selected-handle-height:19px;--selected-handle-width:18px;--_pressed-handle-height:19px;--_pressed-handle-width:18px;--md-switch-selected-handle-height:19px;--md-switch-selected-handle-width:18px;margin:11px 8px 1px 0}.list{position:relative}`,triggerKeys=[" ","Enter"];let IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.localStorageID=void 0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}initializeLocalStorage(){if(this.localStorageID){var e=localStorage.getItem(this.localStorageID);if(e){const i=JSON.parse(e);this.disabledColumns=i,this.columns.forEach((e,t)=>{i.includes(e.name)&&(this.columns[t].hidden=!0)})}this.dispatchUpdate()}}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),void 0!==this.localStorageID&&localStorage.setItem(this.localStorageID,JSON.stringify(this.disabledColumns)),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),void 0!==this.localStorageID&&localStorage.setItem(this.localStorageID,JSON.stringify(this.disabledColumns)),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id"));this.dragEvent.startId=e}dragend(){var e,t;this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1}}dragenter(e){var e=e.target;e.classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}render(){return html`<div class="grid-menu"><span @click="${()=>{this.isDropdownVisible=!0}}" @keyDown="${e=>{triggerKeys.includes(e.key)&&(this.isDropdownVisible=!0)}}" class="list list-dropdown"><ix-icon-button appearance="default" icon="list"></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns,e=>e.name,(e,t)=>html`<div class="${e.hidden?"disabled":""}"><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="true" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p><ix-icon class="draggable">drag_handle</ix-icon></label></div>`)}</div>`:nothing}</span></div>`}};IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"localStorageID",void 0),__decorate([state()],IxGridColumnFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridColumnFilter.prototype,"disabledColumns",void 0),__decorate([state()],IxGridColumnFilter.prototype,"dragEvent",void 0),IxGridColumnFilter=__decorate([customElement("ix-grid-column-filter")],IxGridColumnFilter);const IxGridRowFilterStyles=css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:#1456e0;margin-right:5px}.grid-menu ix-button .filter{font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;margin-top:2px}.filter-form{white-space:nowrap;padding:9px;font-family:'Open Sans',sans-serif;color:#5d6d82}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:#5d6d82}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-form input,.filter-form option,.filter-form select{border-radius:0;cursor:pointer;letter-spacing:1.44px;line-height:1.4375em;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;font-size:16px;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;font-family:'Open Sans',sans-serif;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}.form-group label{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.add-filter-button .add{margin-right:0;margin-left:-6px}.filter-footer{margin-top:auto;display:flex;align-items:left;padding:0;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;width:100%}.filter-footer button{align-items:center!important;margin-left:0}.filter-footer .add{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px}.filter-footer .clear{margin-left:auto!important}.form-group .close{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.25rem;font-weight:lighter}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:98;display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0;height:16px;width:16px;border-radius:50%;background-color:#1456e0;color:#fff}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.add-filter-button.disabled{opacity:.5;cursor:not-allowed}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:#fff;overflow-wrap:break-word;border-radius:3px;background-color:#071454;padding:5px 8px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;color:#fff;overflow-wrap:break-word;border-radius:3px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px}.add-filter-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}.add-filter-button:disabled,.clear:disabled{opacity:.25;cursor:not-allowed}button{-webkit-box-align:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}ix-button.filter-button{padding-inline:0}.grid-menu ix-button{align-items:center;display:flex}`;let IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.filters=this.parseFilterQueryString(),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate()}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){var e=[];for(const[i,o]of new URLSearchParams(window.location.search)){var t=(null==(t=this.filterableColumns.find(e=>e.name===i))?void 0:t.filterOperators)||["contains"];this.filterColumns.includes(i)&&e.push({columnField:i,operatorValue:t[0],value:o})}return e}dispatchUpdate(){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length)},bubbles:!0,composed:!0}))}addFilter(){const t=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";var e=(null==(e=this.filterableColumns.find(e=>e.name===t))?void 0:e.filterOperators)||["contains"];this.filters=[...this.filters,{columnField:t,operatorValue:e[0],value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter())}onfilterColumnChange(e,t){t=t.target.value;this.filters[e].columnField=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterOperatorChange(e,t){t=t.target.value;this.filters[e].operatorValue=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.target["value"],t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderFilterInput(t,i){const o=[t.columnField,...this.unselectedFilters];var e=this.filterableColumns.filter(e=>o.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${e.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
                 `)}">Columns</label> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${e.map(e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></div></div>`:nothing}<div class="filter-form-column filter-form-column-border filterColumnField"><div class="filter-form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${e.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
-                `)}"><span>Columns</span> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(e,e=>e.name,e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterOperatorField"><div class="filter-form-group"><label class="form-group-operator-label"><span>Operator</span> <select><option select="select">contains</option></select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group"><label class="form-group-value-label"><span>Value</span> <input placeholder="Filter value" @input="${e=>this.onfilterValueChange(i,e)}" .value="${t.value}"></label></div></div></div>`}renderDropdown(){var e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return html`<div class="filter-dropdown-content"><div class="filter-body">${this.filters.map((e,t)=>this.renderFilterInput(e,t))}</div><div class="filter-footer"><button class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}"><ix-icon-button icon="add"></ix-icon-button><span class="add">ADD FILTER</span></button> <button class="clear" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}"><span class="add">CLEAR ALL</span></button></div></div>`}render(){return html`<div class="grid-menu"><div class="filter-container tooltip-container">${0<this.activeFilters.length?html`<span class="filter-superscript">${this.activeFilters.length}</span>`:nothing}<ix-button appearance="text" class="filter_list filter-button" @click="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}" @keyDown="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}"><div class="slot-wrap"><ix-icon appearance="default" class="filter-icon">filter_list</ix-icon><span class="filter">${copy.filters}</span></div></ix-button><div class="tool-tip">${this.renderToolTip()}</div>${this.isDropdownVisible?this.renderDropdown():nothing}</div></div>`}};IxGridRowFilter.styles=[IxGridViewStyles,IxGridRowFilterStyles],__decorate([property({type:Array})],IxGridRowFilter.prototype,"columns",void 0),__decorate([state()],IxGridRowFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridRowFilter.prototype,"filters",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterableColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"activeFilters",void 0),__decorate([state()],IxGridRowFilter.prototype,"mapSelect",void 0),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter);class IxGrid extends LitElement{constructor(){super(...arguments),this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.addParamsToURL=!0,this.filters=[],this._columns=[],this.isLoading=!1,this.isExpanded=!1,this.renderColumnHeader=e=>html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="header">${e.header} ${e.sortable?html`<ix-icon title="Sort" class="header-sort-icon">${"desc"===this.sortDirection&&this.sortedColumn===e.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:html`<div class="grid-menu"><ix-grid-column-filter .columns="${this._columns}" localStorageID="${ifDefined(this.localStorageID)}" @columnFilter="${e=>{e.detail.columns.forEach((e,t)=>{this._columns[t].hidden=e.hidden}),this.updatePage()}}" @reorderColumns="${this.reorderColumnsFromFilter}"></ix-grid-column-filter>${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()}}"></ix-grid-row-filter></div>`}</div><div class="touch-edge"><slot name="under-header"></slot></div>`,this.renderRowLimitControls=()=>this.rows.length<=this.rowLimit?nothing:html`<div class="row-limit"><ix-button appearance="text" @click="${()=>{this.isExpanded=!this.isExpanded}}" has-icon>${this.isExpanded?copy.viewLess:copy.viewMore}<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()}}"></ix-pagination>`}get columnNames(){return this._columns.map(e=>e.name)}async updatePage(){var e,t,i=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.addParamsToURL&&(t={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...i},e=new URL(window.location.href),t=new URLSearchParams(t),e.search=t.toString(),window.history.replaceState(null,"",e.toString())),this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:i},bubbles:!0,composed:!0}))}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}connectedCallback(){super.connectedCallback(),this._columns=this.columns}async reorderColumnsFromTable(){var e=Array.from((null==(e=null==(e=this.grid)?void 0:e.shadowRoot)?void 0:e.querySelectorAll("th"))||[]);if(e.length){const i=e.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);e.forEach((e,t)=>{this._columns[t].width=e.style.width}),i.every((e,t)=>0===t||e>i[t-1])||(e=i.map(e=>this._columns[e]),this._columns=[...e],this.isLoading=!0,await this.updateComplete,this.isLoading=!1)}}async reorderColumnsFromFilter(e){this._columns=[...e.detail.reorderedColumns],this.isLoading=!0,await this.updateComplete,this.isLoading=!1}render(){var e;return html`<div class="${"grid-container "+(this.isLoading?"loading":"")}">${this.hideHeader?nothing:this.renderHeader()} ${this.isLoading?nothing:html`<vaadin-grid .items="${0<this.rowLimit&&!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(e=>!e.hidden)?null==(e=this._columns)?void 0:e.map(e=>e.name?html`<vaadin-grid-column ${columnHeaderRenderer(()=>this.renderColumnHeader(e),this.sortDirection)} ${columnBodyRenderer(e.bodyRenderer,[])} resizable width="${ifDefined(e.width)}" ?hidden="${e.hidden}" ?frozen-to-end="${e.frozenToEnd}"></vaadin-grid-column>`:nothing):html`<vaadin-grid-column></vaadin-grid-column>`}</vaadin-grid>`} ${0<this.rowLimit?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),window.customElements.define("ix-grid",IxGrid);
+                `)}"><span>Columns</span> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(e,e=>e.name,e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterOperatorField"><div class="filter-form-group"><label class="form-group-operator-label"><span>Operator</span> <select @change="${e=>this.onfilterOperatorChange(i,e)}" .value="${t.operatorValue}" data-v="${t.operatorValue}">${repeat(null!=(e=null==(e=e.find(e=>e.name===t.columnField))?void 0:e.filterOperators)?e:["contains"],e=>html`<option value="${e}" ?selected="${e===t.columnField}">${e}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group"><label class="form-group-value-label"><span>Value</span> <input placeholder="Filter value" @input="${e=>this.onfilterValueChange(i,e)}" .value="${t.value}"></label></div></div></div>`}renderDropdown(){var e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return html`<div class="filter-dropdown-content"><div class="filter-body">${this.filters.map((e,t)=>this.renderFilterInput(e,t))}</div><div class="filter-footer"><button class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}"><ix-icon-button icon="add"></ix-icon-button><span class="add">ADD FILTER</span></button> <button class="clear" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}"><span class="add">CLEAR ALL</span></button></div></div>`}render(){return html`<div class="grid-menu"><div class="filter-container tooltip-container">${0<this.activeFilters.length?html`<span class="filter-superscript">${this.activeFilters.length}</span>`:nothing}<ix-button appearance="text" class="filter_list filter-button" @click="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}" @keyDown="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}"><div class="slot-wrap"><ix-icon appearance="default" class="filter-icon">filter_list</ix-icon><span class="filter">${copy.filters}</span></div></ix-button><div class="tool-tip">${this.renderToolTip()}</div>${this.isDropdownVisible?this.renderDropdown():nothing}</div></div>`}};IxGridRowFilter.styles=[IxGridViewStyles,IxGridRowFilterStyles],__decorate([property({type:Array})],IxGridRowFilter.prototype,"columns",void 0),__decorate([state()],IxGridRowFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridRowFilter.prototype,"filters",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterableColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"activeFilters",void 0),__decorate([state()],IxGridRowFilter.prototype,"mapSelect",void 0),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter);class IxGrid extends LitElement{constructor(){super(...arguments),this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.downloadMenuItems=[],this.addParamsToURL=!0,this.filters=[],this._columns=[],this.isLoading=!1,this.isExpanded=!1,this.renderColumnHeader=e=>html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="header">${e.header} ${e.sortable?html`<ix-icon title="Sort" class="header-sort-icon">${"desc"===this.sortDirection&&this.sortedColumn===e.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:html`<div class="grid-menu"><ix-grid-column-filter .columns="${this._columns}" localStorageID="${ifDefined(this.localStorageID)}" @columnFilter="${e=>{e.detail.columns.forEach((e,t)=>{this._columns[t].hidden=e.hidden}),this.updatePage()}}" @reorderColumns="${this.reorderColumnsFromFilter}"></ix-grid-column-filter>${this.showDownload?html`<ix-grid-download-menu .items="${this.downloadMenuItems}"></ix-grid-download-menu>`:nothing}<ix-grid-row-filter .columns="${this._columns}" @rowFilter="${e=>{this.filters=e.detail.filters,this.updatePage()}}"></ix-grid-row-filter></div>`}</div><div class="touch-edge"><slot name="under-header"></slot></div>`,this.renderRowLimitControls=()=>this.rows.length<=this.rowLimit?nothing:html`<div class="row-limit"><ix-button appearance="text" @click="${()=>{this.isExpanded=!this.isExpanded}}" has-icon>${this.isExpanded?copy.viewLess:copy.viewMore}<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()}}"></ix-pagination>`}get columnNames(){return this._columns.map(e=>e.name)}async updatePage(){var e,t,i=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.addParamsToURL&&(t={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...i},e=new URL(window.location.href),t=new URLSearchParams(t),e.search=t.toString(),window.history.replaceState(null,"",e.toString())),this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:i,filtersOperators:this.filters.map(e=>({columnField:e.columnField,operator:e.operatorValue}))},bubbles:!0,composed:!0}))}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}connectedCallback(){super.connectedCallback(),this._columns=this.columns}async reorderColumnsFromTable(){var e=Array.from((null==(e=null==(e=this.grid)?void 0:e.shadowRoot)?void 0:e.querySelectorAll("th"))||[]);if(e.length){const i=e.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);e.forEach((e,t)=>{this._columns[t].width=e.style.width}),i.every((e,t)=>0===t||e>i[t-1])||(e=i.map(e=>this._columns[e]),this._columns=[...e],this.isLoading=!0,await this.updateComplete,this.isLoading=!1)}}async reorderColumnsFromFilter(e){this._columns=[...e.detail.reorderedColumns],this.isLoading=!0,await this.updateComplete,this.isLoading=!1}render(){var e;return html`<div class="${"grid-container "+(this.isLoading?"loading":"")}">${this.hideHeader?nothing:this.renderHeader()} ${this.isLoading?nothing:html`<vaadin-grid .items="${0<this.rowLimit&&!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(e=>!e.hidden)?null==(e=this._columns)?void 0:e.map(e=>e.name?html`<vaadin-grid-column ${columnHeaderRenderer(()=>this.renderColumnHeader(e),this.sortDirection)} ${columnBodyRenderer(e.bodyRenderer,[])} resizable width="${ifDefined(e.width)}" ?hidden="${e.hidden}" ?frozen-to-end="${e.frozenToEnd}" path="${e.name}"></vaadin-grid-column>`:nothing):html`<vaadin-grid-column></vaadin-grid-column>`}</vaadin-grid>`} ${0<this.rowLimit?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:Array})],IxGrid.prototype,"downloadMenuItems",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),window.customElements.define("ix-grid",IxGrid);

package/dist/models/IxGridDownloadMenuItemModel.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export interface IxGridDownloadMenuItemModel {
+    name: string;
+    label: string;
+    onClick: (name: string) => void;
+    disabled?: boolean;
+    hidden?: boolean;
+}

package/dist/models/IxGridDownloadMenuItemModel.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=IxGridDownloadMenuItemModel.js.map

package/dist/models/IxGridDownloadMenuItemModel.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"IxGridDownloadMenuItemModel.js","sourceRoot":"","sources":["../../src/models/IxGridDownloadMenuItemModel.ts"],"names":[],"mappings":"","sourcesContent":["export interface IxGridDownloadMenuItemModel {\n name: string;\n label: string;\n onClick: (name: string) => void;\n disabled?: boolean;\n hidden?: boolean;\n}\n"]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-grid following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -102,5 +102,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "8d051ca9a8a78736d061f2c2a196c619b7ee2bef"
+  "gitHead": "f6f6a46ff5e97b2cf36fc95ccb73d0b1bfcdb4ea"
 }

package/src/IxGrid.ts CHANGED Viewed

@@ -12,11 +12,14 @@ import './components/IxGridRowFilter.js';
 import type { Filter } from './components/IxGridRowFilter.js';
 import { IxGridViewStyles } from './grid-view-styles.js';
 import { copy } from './ix-grid-copy.js';
+import { IxGridDownloadMenuItemModel } from './models/IxGridDownloadMenuItemModel.js';
 export interface Row {
   [key: string]: string;
 }
+export type FilterOperator = 'equals' | 'contains';
 export interface Column {
   name: string;
   header: string;
@@ -26,6 +29,7 @@ export interface Column {
   filterable?: boolean;
   hidden?: boolean;
   frozenToEnd?: boolean;
+  filterOperators?: FilterOperator[];
 }
 export class IxGrid extends LitElement {
@@ -61,6 +65,9 @@ export class IxGrid extends LitElement {
   @property({ type: Boolean }) showDownload = true;
+  @property({ type: Array }) downloadMenuItems: IxGridDownloadMenuItemModel[] =
+    [];
   @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =
     true;
@@ -108,6 +115,10 @@ export class IxGrid extends LitElement {
           page: this.page,
           pageSize: this.pageSize,
           filters,
+          filtersOperators: this.filters.map((f: Filter) => ({
+            columnField: f.columnField,
+            operator: f.operatorValue,
+          })),
         },
         bubbles: true,
         composed: true,
@@ -200,7 +211,9 @@ export class IxGrid extends LitElement {
               @reorderColumns=${this.reorderColumnsFromFilter}
             ></ix-grid-column-filter>
             ${this.showDownload
-              ? html`<ix-grid-download-menu></ix-grid-download-menu>`
+              ? html`<ix-grid-download-menu
+                  .items=${this.downloadMenuItems}
+                ></ix-grid-download-menu>`
               : nothing}
             <ix-grid-row-filter
               .columns=${this._columns}
@@ -276,6 +289,7 @@ export class IxGrid extends LitElement {
                           width=${ifDefined(column.width)}
                           ?hidden=${column.hidden}
                           ?frozen-to-end=${column.frozenToEnd}
+                          path=${column.name}
                         ></vaadin-grid-column>`
                       : nothing
                   )

package/src/components/IxGridColumnFilter.ts CHANGED Viewed

@@ -55,6 +55,7 @@ export class IxGridColumnFilter extends LitElement {
       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;

package/src/components/IxGridDownloadMenu.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import { LitElement, html } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { IxMenu } from '@digital-realty/ix-menu';
 import '@digital-realty/ix-menu/ix-menu.js';
 import '@digital-realty/ix-menu/ix-menu-item.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import { IxGridViewStyles } from '../grid-view-styles.js';
 import { IxGridDownloadMenuStyles } from './grid-download-menu-styles.js';
+import { IxGridDownloadMenuItemModel } from '../models/IxGridDownloadMenuItemModel.js';
 @customElement('ix-grid-download-menu')
 export class IxGridDownloadMenu extends LitElement {
@@ -15,19 +16,15 @@ export class IxGridDownloadMenu extends LitElement {
   @query('#anchor') downloadMenuAnchor!: HTMLElement;
+  @property({ type: Array }) items: IxGridDownloadMenuItemModel[] = [];
   toggleMenu() {
     this.downloadMenu!.open = !this.downloadMenu!.open;
   }
-  render() {
-    return html` <div style="position: relative">
-      <ix-icon-button
-        icon="download"
-        id="anchor"
-        @click=${this.toggleMenu}
-      ></ix-icon-button>
-      <ix-menu id="menu" anchor="anchor" has-overflow>
-        <ix-menu-item
+  renderMenuItems() {
+    if (this.items?.length === 0) {
+      return html` <ix-menu-item
           @click=${() =>
             this.dispatchEvent(
               new CustomEvent('download', {
@@ -50,7 +47,30 @@ export class IxGridDownloadMenu extends LitElement {
             )}
         >
           <div slot="headline">Download Current Filter</div>
-        </ix-menu-item>
+        </ix-menu-item>`;
+    }
+    return this.items
+      .filter(x => !x.hidden)
+      .map(
+        m => html` <ix-menu-item
+          .disabled=${m.disabled}
+          @click=${() => m.onClick(m.name)}
+        >
+          <div slot="headline">${m.label}</div>
+        </ix-menu-item>`
+      );
+  }
+  render() {
+    return html` <div style="position: relative">
+      <ix-icon-button
+        icon="download"
+        id="anchor"
+        @click=${this.toggleMenu}
+      ></ix-icon-button>
+      <ix-menu id="menu" anchor="anchor" has-overflow>
+        ${this.renderMenuItems()}
       </ix-menu>
     </div>`;
   }

package/src/components/IxGridRowFilter.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import '@digital-realty/ix-button/ix-button.js';
 import '@digital-realty/ix-select/ix-select.js';
 import { IxGridViewStyles } from '../grid-view-styles.js';
 import { IxGridRowFilterStyles } from './grid-row-filter-styles.js';
-import type { Column } from '../IxGrid.js';
+import type { Column, FilterOperator } from '../IxGrid.js';
 import { copy } from '../ix-grid-copy.js';
 export interface Filter {
@@ -78,10 +78,12 @@ export class IxGridRowFilter extends LitElement {
     const filters: Filter[] = [];
     for (const [key, value] of params) {
+      const filterOperators = this.filterableColumns.find(c => c.name === key)
+        ?.filterOperators || ['contains'];
       if (this.filterColumns.includes(key)) {
         filters.push({
           columnField: key,
-          operatorValue: 'contains',
+          operatorValue: filterOperators[0],
           value,
         });
       }
@@ -106,11 +108,14 @@ export class IxGridRowFilter extends LitElement {
     const nextFilter =
       this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
       '';
+    const filterOperators = this.filterableColumns.find(
+      c => c.name === nextFilter
+    )?.filterOperators || ['contains'];
     this.filters = [
       ...this.filters,
       {
         columnField: nextFilter,
-        operatorValue: 'contains',
+        operatorValue: filterOperators[0],
         value: '',
       },
     ];
@@ -143,6 +148,17 @@ export class IxGridRowFilter extends LitElement {
     }
   }
+  private onfilterOperatorChange(index: number, e: Event) {
+    const selectedValue = (e.target as HTMLSelectElement).value;
+    this.filters[index].operatorValue = selectedValue;
+    this.filters = [...this.filters];
+    if (this.filters[index].value.length >= 3) {
+      this.dispatchUpdate();
+    }
+  }
   private onfilterValueChange(index: number, e: Event) {
     const oldValueLength = this.filters[index].value.length;
     const { value } = e.target as HTMLInputElement;
@@ -279,8 +295,24 @@ export class IxGridRowFilter extends LitElement {
           <div class="filter-form-group">
             <label class="form-group-operator-label"
               ><span>Operator</span>
-              <select>
-                <option select="select">contains</option>
+              <select
+                @change=${(e: Event) => this.onfilterOperatorChange(index, e)}
+                .value=${value.operatorValue}
+                data-v=${value.operatorValue}
+              >
+                ${repeat(
+                  filterOptions.find(
+                    column => column.name === value.columnField
+                  )?.filterOperators ?? ['contains'],
+                  (filter: FilterOperator) => html`
+                    <option
+                      value=${filter}
+                      ?selected=${filter === value.columnField}
+                    >
+                      ${filter}
+                    </option>
+                  `
+                )}
               </select>
             </label>
           </div>

package/src/models/IxGridDownloadMenuItemModel.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export interface IxGridDownloadMenuItemModel {
+  name: string;
+  label: string;
+  onClick: (name: string) => void;
+  disabled?: boolean;
+  hidden?: boolean;
+}