@digital-realty/ix-grid 1.1.19 → 1.1.21

package/dist/IxGrid.js

@@ -171,12 +171,14 @@ export class IxGrid extends LitElement {
         return `ix-grid-${this.localStorageID}-columns`;
     }
     get arrangedColumns() {
-        let colums = [];
+        let displayColumns = [];
         if (this.isPersistable) {
             const preservedColumns = JSON.parse(localStorage.getItem(this.columnsLocalStorageKey) || '[]');
             if (preservedColumns.length > 0)
-                colums = preservedColumns.map((c) => {
+                displayColumns = preservedColumns.map((c) => {
                     const column = this.columns.find((col) => col.name === c.name);
+                    if (!column)
+                        return;
                     return {
                         ...column,
                         hidden: c.hidden,
@@ -185,9 +187,9 @@ export class IxGrid extends LitElement {
                     };
                 });
         }
-        if (colums.length === 0)
-            colums = [...this.columns];
-        return colums
+        if (displayColumns.length === 0)
+            displayColumns = [...this.columns];
+        return displayColumns
             .filter(col => col)
             .map((column) => ({
             ...column,
@@ -255,7 +257,10 @@ export class IxGrid extends LitElement {
             if (!this.originalSearchParams) {
                 this.saveOriginalSearchParams(gridSearchParams);
             }
-            const combinedParams = new URLSearchParams([...(_a = this.originalSearchParams) !== null && _a !== void 0 ? _a : [], ...gridSearchParams]);
+            const combinedParams = new URLSearchParams([
+                ...((_a = this.originalSearchParams) !== null && _a !== void 0 ? _a : []),
+                ...gridSearchParams,
+            ]);
             url.search = combinedParams.toString();
             window.history.replaceState(null, '', url.toString());
         }

package/dist/IxGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { html, LitElement, nothing, render } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '@vaadin/grid';\nimport { GridItemModel } from '@vaadin/grid';\nimport { columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-progress/ix-progress.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 type DataType = 'string' | 'dateTime';\n\nexport type BodyRenderer = (\n  item: any,\n  model: GridItemModel<any>,\n  column: GridColumn\n) => any;\n\nexport interface Column {\n  name: string;\n  header: string;\n  bodyRenderer: BodyRenderer;\n  width?: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  hidden?: boolean;\n  frozenToEnd?: boolean;\n  dataType?: DataType;\n  filterOperators?: FilterOperator[];\n}\n\nexport interface FieldOperator {\n  columnField: string;\n  operator: FilterOperator;\n}\n\nexport class IxGrid extends LitElement {\n  static readonly styles = [IxGridViewStyles];\n\n  private defaultPageSize = 10;\n\n  private defaultPage = 1;\n\n  private originalSearchParams: URLSearchParams | undefined = undefined;\n\n  @query('vaadin-grid') grid!: HTMLElement;\n\n  @property({ type: Boolean, attribute: 'column-reordering-allowed' })\n  columnReorderingAllowed: boolean = false;\n\n  @property({ type: String }) variantClass = '';\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: Array }) rows: Row[] = [];\n\n  @property({ type: String }) defaultEmptyText = 'No data to display';\n\n  @property({ type: String }) sortedColumn = '';\n\n  @property({ type: String }) sortDirection = '';\n\n  @property({ type: Boolean }) hideHeader = false;\n\n  @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n  @property({ type: Number }) rowLimit: number = 0;\n\n  @property({ type: Number }) page = this.defaultPage;\n\n  @property({ type: Number }) pageSize = this.defaultPageSize;\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 }) isDownloading = false;\n\n  @property({ type: Boolean }) isLoading = false;\n\n  @property({ type: Array }) downloadMenuItems: IxGridDownloadMenuItemModel[] =\n    [];\n\n  @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n    true;\n\n  @property({ type: Boolean }) readParamsFromURL = false;\n\n  @property({ type: Boolean }) refreshDataOnColumnVisibilityChange: boolean =\n    true;\n\n  @property({ type: Number }) filterValueChangeDebounceTime: number = 300;\n\n  @property({ type: Boolean }) hideColumnHeaders = false;\n\n  @state() private filters: Filter[] = [];\n\n  @state() isColumnsReordering = false;\n\n  @state() isExpanded = false;\n\n  get isPersistable() {\n    if (this.localStorageID) return true;\n\n    return false;\n  }\n\n  get columnNames() {\n    return this.columns.map((column: Column) => column.name);\n  }\n\n  get columnsLocalStorageKey() {\n    return `ix-grid-${this.localStorageID}-columns`;\n  }\n\n  get arrangedColumns() {\n    let colums: Column[] = [];\n\n    if (this.isPersistable) {\n      const preservedColumns = JSON.parse(\n        localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n      );\n\n      if (preservedColumns.length > 0)\n        colums = preservedColumns.map((c: Column) => {\n          const column = this.columns.find(\n            (col: Column) => col.name === c.name\n          ) as Column;\n\n          return {\n            ...column,\n            hidden: c.hidden,\n            frozenToEnd: c.frozenToEnd,\n            width: !c.width ? undefined : c.width,\n          };\n        });\n    }\n\n    if (colums.length === 0) colums = [...this.columns];\n\n    return colums\n      .filter(col => col)\n      .map((column: Column) => ({\n        ...column,\n        width: !column.width ? undefined : column.width,\n      }));\n  }\n\n  firstUpdated(){\n    if(this.readParamsFromURL){\n      const url = new URL(window.location.href);\n      const searchParams = new URLSearchParams(url.search);\n      const sort = searchParams.get('sort');\n      const order = searchParams.get('order');\n      const page = searchParams.get('page');\n      const size = searchParams.get('size');\n\n      if(sort && order){\n        this.sortedColumn = sort;\n        this.sortDirection = order;\n      }\n\n      if(page){\n        this.page = parseInt(page, 10) || this.defaultPage;\n      }\n\n      if(size){\n        this.pageSize = parseInt(size, 10) || this.defaultPageSize;\n      }\n    }\n  }\n\n  buildQueryFromFilters(){\n    const params = new URLSearchParams();\n\n    this.filters.forEach((f: Filter) => {\n      params.append(`${f.columnField}_${f.operatorValue}`, f.value );\n    });\n\n    return Object.fromEntries(params);\n  }\n\n  private async updatePage(refreshUrlParams = true) {\n    const filters = this.filters.reduce(\n      (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n        ...columnFilters,\n        [columnField]: value,\n      }),\n      {}\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(\n            (f: Filter): FieldOperator => ({\n              columnField: f.columnField,\n              operator: <FilterOperator>f.operatorValue,\n            })\n          ),\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (this.addParamsToURL && refreshUrlParams) {\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        ...this.buildQueryFromFilters(),\n      };\n\n      const url = new URL(window.location.href);\n      const gridSearchParams = new URLSearchParams(urlParams);\n\n      if(!this.originalSearchParams){\n        this.saveOriginalSearchParams(gridSearchParams);\n      }\n\n      const combinedParams = new URLSearchParams([...this.originalSearchParams ?? [], ...gridSearchParams])\n      url.search = combinedParams.toString();\n      window.history.replaceState(null, '', url.toString());\n    }\n  }\n\n  saveOriginalSearchParams(gridSearchParams: URLSearchParams) {\n    const url = new URL(window.location.href);\n    const originalSearchParams = new URLSearchParams(url.search);\n\n    this.filters.forEach((f: Filter) => {\n      originalSearchParams.delete(`${f.columnField}_${f.operatorValue}`);\n    });\n\n    gridSearchParams.forEach((value, key) => {\n      originalSearchParams.delete(key);\n    });\n\n    this.originalSearchParams = originalSearchParams;\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 = (\n    column: Column,\n    index: number,\n    length: number\n  ) => {\n    const headerClasses = classMap({\n      header: true,\n      frozen: !!column.frozenToEnd,\n      first: index === 0,\n      last: index === length - 1,\n    });\n\n    return html`\n      <div\n        @click=${() => column.sortable && this.handleSort(column.name)}\n        @keyDown=${() => column.sortable && this.handleSort(column.name)}\n        class=${headerClasses}\n      >\n        <span class=\"header-label\">${column.header}</span>\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\n  setColumnsToLocalStorage(columns: Column[]) {\n    if (this.isPersistable) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify(columns)\n      );\n    }\n  }\n\n  async reorderColumnsFromTable() {\n    const visibleColumns = this.arrangedColumns.filter(\n      (column: Column) => column.hidden !== true\n    );\n    const hiddenColumns = this.arrangedColumns.filter(\n      (column: Column) => column.hidden === true\n    );\n    const frozenColumns = this.arrangedColumns.filter(\n      (column: Column) => column.frozenToEnd === true\n    );\n\n    const allColumns = [\n      ...visibleColumns.filter(column => column?.frozenToEnd !== true),\n      ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n      ...frozenColumns,\n    ];\n\n    // calulate column order from table header flex order\n    const headerNodes = Array.from(\n      this.grid?.shadowRoot?.querySelectorAll('th') || []\n    );\n    if (headerNodes.length) {\n      const columnOrder = headerNodes\n        .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n        .sort((a, b) => a.flexPosition - b.flexPosition)\n        .map(el => el.id);\n\n      const columnsCorrectlyOrdered = columnOrder.every(\n        (x, i) => i === 0 || x > columnOrder[i - 1]\n      );\n      let reorderedColumns: Column[] = [];\n      if (!columnsCorrectlyOrdered) {\n        reorderedColumns = columnOrder.map(id => allColumns[id]);\n        this.columns = [\n          ...reorderedColumns.filter(\n            column => column.hidden !== true && column?.frozenToEnd !== true\n          ),\n          ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n          ...frozenColumns,\n        ];\n\n        this.isColumnsReordering = true;\n        await this.updateComplete;\n        this.isColumnsReordering = false;\n      }\n      this.setColumnsToLocalStorage(\n        reorderedColumns.length > 0 ? [...this.columns] : [...allColumns]\n      );\n    }\n  }\n\n  async reorderColumnsFromFilter(e: CustomEvent) {\n    this.columns = [...e.detail.reorderedColumns];\n    this.setColumnsToLocalStorage([...this.columns]);\n\n    this.isColumnsReordering = true;\n    await this.updateComplete;\n    this.isColumnsReordering = false;\n  }\n\n  handleOnColumnFilter(e: CustomEvent) {\n    e.detail.columns.forEach((column: Column, id: number) => {\n      this.columns[id].hidden = column?.hidden;\n    });\n    this.updatePage(false);\n  }\n\n  private columnRenderer = (\n    column: Column,\n    root: HTMLElement,\n    columnElement: GridColumn,\n    model: any\n  ) => {\n    /*\n      Due to a quirk of vaadin-grid, in order for the column cells to react to\n      changes to bodyRenderer output, we must clear the contents of the cell\n      before rendering the new content. Otherwise the new content will be\n      appended to the existing content.\n    */\n    render(nothing, root);\n\n    const templateResult = column.bodyRenderer(\n      model.item,\n      model,\n      columnElement\n    );\n\n    render(templateResult, root);\n  };\n\n  private renderHeader = () => html`\n    <div class=\"grid-header\">\n      <slot name=\"header\"><div class=\"empty\"></div></slot>\n      ${this.hideFilters\n        ? nothing\n        : html`<div class=\"grid-menu\">\n            <ix-grid-column-filter\n              .columns=${this.arrangedColumns}\n              columnsLocalStorageKey=${ifDefined(this.columnsLocalStorageKey)}\n              @columnFilter=${(e: CustomEvent) => this.handleOnColumnFilter(e)}\n              @reorderColumns=${this.reorderColumnsFromFilter}\n              .columnReorderingAllowed=${this.columnReorderingAllowed}\n              .refreshDataOnColumnVisibilityChange=${this\n                .refreshDataOnColumnVisibilityChange}\n              .requestGridUpdate=${() => this.requestUpdate()}\n            ></ix-grid-column-filter>\n            ${this.showDownload\n              ? html`<ix-grid-download-menu\n                  .items=${this.downloadMenuItems}\n                  .isDownloading=${this.isDownloading}\n                ></ix-grid-download-menu>`\n              : nothing}\n            <ix-grid-row-filter\n              .columns=${this.columns}\n              .filterValueChangeDebounceTime=${this\n                .filterValueChangeDebounceTime}\n              .readParamsFromURL=${this.readParamsFromURL}\n              @rowFilter=${(e: CustomEvent) => {\n                this.filters = e.detail.filters;\n                if(e.detail.resetPage){\n                  this.page = this.defaultPage;\n                }\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-controls 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    <div class=\"row-controls pagination\">\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    </div>\n  `;\n\n  renderColumns() {\n    if (this.arrangedColumns.length > 0) {\n      return html`${this.arrangedColumns.map((column: Column, id: number) => {\n        if (column.hidden === true) return nothing;\n\n        return html`<vaadin-grid-column\n          ${columnHeaderRenderer(\n            () =>\n              this.renderColumnHeader(column, id, this.arrangedColumns.length),\n            this.sortDirection\n          )}\n          .renderer=${(\n            root: HTMLElement,\n            columnElement: GridColumn,\n            model: any\n          ) => this.columnRenderer(column, root, columnElement, model)}\n          resizable\n          width=${ifDefined(column.width)}\n          ?hidden=${column.hidden}\n          ?frozen-to-end=${column.frozenToEnd}\n          path=${column.name}\n        ></vaadin-grid-column>`;\n      })}`;\n    }\n\n    return html`<vaadin-grid-column></vaadin-grid-column>`;\n  }\n\n  renderLoading() {\n    return html` <div\n      class=\"progress-container\"\n      style=\"display: ${this.isLoading ? '' : 'none'}\"\n    >\n      <ix-progress .indeterminate=${true}></ix-progress>\n    </div>`;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${`grid-container ${\n          this.isColumnsReordering ? 'columns-reordering' : ''\n        } ${this.variantClass}`}\n      >\n        ${this.hideHeader ? nothing : this.renderHeader()}\n        ${this.renderLoading()}\n        ${!this.isColumnsReordering\n          ? html`<vaadin-grid\n                class=${this.hideColumnHeaders ? 'hide-column-headers' : ''}\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=${this.columnReorderingAllowed}\n                theme=\"no-border\"\n                @mouseup=${this.reorderColumnsFromTable}\n              >\n                ${this.renderColumns()}\n              </vaadin-grid>\n              ${this.rows.length === 0 && !this.isColumnsReordering\n                ? html`<slot name=\"no-rows\"></slot>`\n                : nothing}`\n          : nothing}\n        ${this.rowLimit > 0\n          ? this.renderRowLimitControls()\n          : this.renderPaginationControls()}\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { html, LitElement, nothing, render } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '@vaadin/grid';\nimport { GridItemModel } from '@vaadin/grid';\nimport { columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-progress/ix-progress.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 type DataType = 'string' | 'dateTime';\n\nexport type BodyRenderer = (\n  item: any,\n  model: GridItemModel<any>,\n  column: GridColumn\n) => any;\n\nexport interface Column {\n  name: string;\n  header: string;\n  bodyRenderer: BodyRenderer;\n  width?: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  hidden?: boolean;\n  frozenToEnd?: boolean;\n  dataType?: DataType;\n  filterOperators?: FilterOperator[];\n}\n\nexport interface FieldOperator {\n  columnField: string;\n  operator: FilterOperator;\n}\n\nexport class IxGrid extends LitElement {\n  static readonly styles = [IxGridViewStyles];\n\n  private defaultPageSize = 10;\n\n  private defaultPage = 1;\n\n  private originalSearchParams: URLSearchParams | undefined = undefined;\n\n  @query('vaadin-grid') grid!: HTMLElement;\n\n  @property({ type: Boolean, attribute: 'column-reordering-allowed' })\n  columnReorderingAllowed: boolean = false;\n\n  @property({ type: String }) variantClass = '';\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: Array }) rows: Row[] = [];\n\n  @property({ type: String }) defaultEmptyText = 'No data to display';\n\n  @property({ type: String }) sortedColumn = '';\n\n  @property({ type: String }) sortDirection = '';\n\n  @property({ type: Boolean }) hideHeader = false;\n\n  @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n  @property({ type: Number }) rowLimit: number = 0;\n\n  @property({ type: Number }) page = this.defaultPage;\n\n  @property({ type: Number }) pageSize = this.defaultPageSize;\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 }) isDownloading = false;\n\n  @property({ type: Boolean }) isLoading = false;\n\n  @property({ type: Array }) downloadMenuItems: IxGridDownloadMenuItemModel[] =\n    [];\n\n  @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n    true;\n\n  @property({ type: Boolean }) readParamsFromURL = false;\n\n  @property({ type: Boolean }) refreshDataOnColumnVisibilityChange: boolean =\n    true;\n\n  @property({ type: Number }) filterValueChangeDebounceTime: number = 300;\n\n  @property({ type: Boolean }) hideColumnHeaders = false;\n\n  @state() private filters: Filter[] = [];\n\n  @state() isColumnsReordering = false;\n\n  @state() isExpanded = false;\n\n  get isPersistable() {\n    if (this.localStorageID) return true;\n\n    return false;\n  }\n\n  get columnNames() {\n    return this.columns.map((column: Column) => column.name);\n  }\n\n  get columnsLocalStorageKey() {\n    return `ix-grid-${this.localStorageID}-columns`;\n  }\n\n  get arrangedColumns() {\n    let displayColumns: Column[] = [];\n\n    if (this.isPersistable) {\n      const preservedColumns = JSON.parse(\n        localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n      );\n\n      if (preservedColumns.length > 0)\n        displayColumns = preservedColumns.map((c: Column) => {\n          const column = this.columns.find(\n            (col: Column) => col.name === c.name\n          ) as Column;\n\n          if(!column) return;\n\n          return {\n            ...column,\n            hidden: c.hidden,\n            frozenToEnd: c.frozenToEnd,\n            width: !c.width ? undefined : c.width,\n          };\n        });\n    }\n\n    if (displayColumns.length === 0) displayColumns = [...this.columns];\n\n    return displayColumns\n      .filter(col => col)\n      .map((column: Column) => ({\n        ...column,\n        width: !column.width ? undefined : column.width,\n      }));\n  }\n\n  firstUpdated() {\n    if (this.readParamsFromURL) {\n      const url = new URL(window.location.href);\n      const searchParams = new URLSearchParams(url.search);\n      const sort = searchParams.get('sort');\n      const order = searchParams.get('order');\n      const page = searchParams.get('page');\n      const size = searchParams.get('size');\n\n      if (sort && order) {\n        this.sortedColumn = sort;\n        this.sortDirection = order;\n      }\n\n      if (page) {\n        this.page = parseInt(page, 10) || this.defaultPage;\n      }\n\n      if (size) {\n        this.pageSize = parseInt(size, 10) || this.defaultPageSize;\n      }\n    }\n  }\n\n  buildQueryFromFilters() {\n    const params = new URLSearchParams();\n\n    this.filters.forEach((f: Filter) => {\n      params.append(`${f.columnField}_${f.operatorValue}`, f.value);\n    });\n\n    return Object.fromEntries(params);\n  }\n\n  private async updatePage(refreshUrlParams = true) {\n    const filters = this.filters.reduce(\n      (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n        ...columnFilters,\n        [columnField]: value,\n      }),\n      {}\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(\n            (f: Filter): FieldOperator => ({\n              columnField: f.columnField,\n              operator: <FilterOperator>f.operatorValue,\n            })\n          ),\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (this.addParamsToURL && refreshUrlParams) {\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        ...this.buildQueryFromFilters(),\n      };\n\n      const url = new URL(window.location.href);\n      const gridSearchParams = new URLSearchParams(urlParams);\n\n      if (!this.originalSearchParams) {\n        this.saveOriginalSearchParams(gridSearchParams);\n      }\n\n      const combinedParams = new URLSearchParams([\n        ...(this.originalSearchParams ?? []),\n        ...gridSearchParams,\n      ]);\n      url.search = combinedParams.toString();\n      window.history.replaceState(null, '', url.toString());\n    }\n  }\n\n  saveOriginalSearchParams(gridSearchParams: URLSearchParams) {\n    const url = new URL(window.location.href);\n    const originalSearchParams = new URLSearchParams(url.search);\n\n    this.filters.forEach((f: Filter) => {\n      originalSearchParams.delete(`${f.columnField}_${f.operatorValue}`);\n    });\n\n    gridSearchParams.forEach((value, key) => {\n      originalSearchParams.delete(key);\n    });\n\n    this.originalSearchParams = originalSearchParams;\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 = (\n    column: Column,\n    index: number,\n    length: number\n  ) => {\n    const headerClasses = classMap({\n      header: true,\n      frozen: !!column.frozenToEnd,\n      first: index === 0,\n      last: index === length - 1,\n    });\n\n    return html`\n      <div\n        @click=${() => column.sortable && this.handleSort(column.name)}\n        @keyDown=${() => column.sortable && this.handleSort(column.name)}\n        class=${headerClasses}\n      >\n        <span class=\"header-label\">${column.header}</span>\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\n  setColumnsToLocalStorage(columns: Column[]) {\n    if (this.isPersistable) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify(columns)\n      );\n    }\n  }\n\n  async reorderColumnsFromTable() {\n    const visibleColumns = this.arrangedColumns.filter(\n      (column: Column) => column.hidden !== true\n    );\n    const hiddenColumns = this.arrangedColumns.filter(\n      (column: Column) => column.hidden === true\n    );\n    const frozenColumns = this.arrangedColumns.filter(\n      (column: Column) => column.frozenToEnd === true\n    );\n\n    const allColumns = [\n      ...visibleColumns.filter(column => column?.frozenToEnd !== true),\n      ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n      ...frozenColumns,\n    ];\n\n    // calulate column order from table header flex order\n    const headerNodes = Array.from(\n      this.grid?.shadowRoot?.querySelectorAll('th') || []\n    );\n    if (headerNodes.length) {\n      const columnOrder = headerNodes\n        .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n        .sort((a, b) => a.flexPosition - b.flexPosition)\n        .map(el => el.id);\n\n      const columnsCorrectlyOrdered = columnOrder.every(\n        (x, i) => i === 0 || x > columnOrder[i - 1]\n      );\n      let reorderedColumns: Column[] = [];\n      if (!columnsCorrectlyOrdered) {\n        reorderedColumns = columnOrder.map(id => allColumns[id]);\n        this.columns = [\n          ...reorderedColumns.filter(\n            column => column.hidden !== true && column?.frozenToEnd !== true\n          ),\n          ...hiddenColumns.filter(column => column?.frozenToEnd !== true),\n          ...frozenColumns,\n        ];\n\n        this.isColumnsReordering = true;\n        await this.updateComplete;\n        this.isColumnsReordering = false;\n      }\n      this.setColumnsToLocalStorage(\n        reorderedColumns.length > 0 ? [...this.columns] : [...allColumns]\n      );\n    }\n  }\n\n  async reorderColumnsFromFilter(e: CustomEvent) {\n    this.columns = [...e.detail.reorderedColumns];\n    this.setColumnsToLocalStorage([...this.columns]);\n\n    this.isColumnsReordering = true;\n    await this.updateComplete;\n    this.isColumnsReordering = false;\n  }\n\n  handleOnColumnFilter(e: CustomEvent) {\n    e.detail.columns.forEach((column: Column, id: number) => {\n      this.columns[id].hidden = column?.hidden;\n    });\n    this.updatePage(false);\n  }\n\n  private columnRenderer = (\n    column: Column,\n    root: HTMLElement,\n    columnElement: GridColumn,\n    model: any\n  ) => {\n    /*\n      Due to a quirk of vaadin-grid, in order for the column cells to react to\n      changes to bodyRenderer output, we must clear the contents of the cell\n      before rendering the new content. Otherwise the new content will be\n      appended to the existing content.\n    */\n    render(nothing, root);\n\n    const templateResult = column.bodyRenderer(\n      model.item,\n      model,\n      columnElement\n    );\n\n    render(templateResult, root);\n  };\n\n  private renderHeader = () => html`\n    <div class=\"grid-header\">\n      <slot name=\"header\"><div class=\"empty\"></div></slot>\n      ${this.hideFilters\n        ? nothing\n        : html`<div class=\"grid-menu\">\n            <ix-grid-column-filter\n              .columns=${this.arrangedColumns}\n              columnsLocalStorageKey=${ifDefined(this.columnsLocalStorageKey)}\n              @columnFilter=${(e: CustomEvent) => this.handleOnColumnFilter(e)}\n              @reorderColumns=${this.reorderColumnsFromFilter}\n              .columnReorderingAllowed=${this.columnReorderingAllowed}\n              .refreshDataOnColumnVisibilityChange=${this\n                .refreshDataOnColumnVisibilityChange}\n              .requestGridUpdate=${() => this.requestUpdate()}\n            ></ix-grid-column-filter>\n            ${this.showDownload\n              ? html`<ix-grid-download-menu\n                  .items=${this.downloadMenuItems}\n                  .isDownloading=${this.isDownloading}\n                ></ix-grid-download-menu>`\n              : nothing}\n            <ix-grid-row-filter\n              .columns=${this.columns}\n              .filterValueChangeDebounceTime=${this\n                .filterValueChangeDebounceTime}\n              .readParamsFromURL=${this.readParamsFromURL}\n              @rowFilter=${(e: CustomEvent) => {\n                this.filters = e.detail.filters;\n                if (e.detail.resetPage) {\n                  this.page = this.defaultPage;\n                }\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-controls 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    <div class=\"row-controls pagination\">\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    </div>\n  `;\n\n  renderColumns() {\n    if (this.arrangedColumns.length > 0) {\n      return html`${this.arrangedColumns.map((column: Column, id: number) => {\n        if (column.hidden === true) return nothing;\n\n        return html`<vaadin-grid-column\n          ${columnHeaderRenderer(\n            () =>\n              this.renderColumnHeader(column, id, this.arrangedColumns.length),\n            this.sortDirection\n          )}\n          .renderer=${(\n            root: HTMLElement,\n            columnElement: GridColumn,\n            model: any\n          ) => this.columnRenderer(column, root, columnElement, model)}\n          resizable\n          width=${ifDefined(column.width)}\n          ?hidden=${column.hidden}\n          ?frozen-to-end=${column.frozenToEnd}\n          path=${column.name}\n        ></vaadin-grid-column>`;\n      })}`;\n    }\n\n    return html`<vaadin-grid-column></vaadin-grid-column>`;\n  }\n\n  renderLoading() {\n    return html` <div\n      class=\"progress-container\"\n      style=\"display: ${this.isLoading ? '' : 'none'}\"\n    >\n      <ix-progress .indeterminate=${true}></ix-progress>\n    </div>`;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${`grid-container ${\n          this.isColumnsReordering ? 'columns-reordering' : ''\n        } ${this.variantClass}`}\n      >\n        ${this.hideHeader ? nothing : this.renderHeader()}\n        ${this.renderLoading()}\n        ${!this.isColumnsReordering\n          ? html`<vaadin-grid\n                class=${this.hideColumnHeaders ? 'hide-column-headers' : ''}\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=${this.columnReorderingAllowed}\n                theme=\"no-border\"\n                @mouseup=${this.reorderColumnsFromTable}\n              >\n                ${this.renderColumns()}\n              </vaadin-grid>\n              ${this.rows.length === 0 && !this.isColumnsReordering\n                ? html`<slot name=\"no-rows\"></slot>`\n                : nothing}`\n          : nothing}\n        ${this.rowLimit > 0\n          ? this.renderRowLimitControls()\n          : this.renderPaginationControls()}\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/components/IxGridColumnFilter.js

@@ -50,7 +50,7 @@ let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
     initializeLocalStorage() {
         if (this.preservedColumns.length > 0) {
             this.disabledColumns = this.preservedColumns
-                .filter(c => c.hidden)
+                .filter(c => c.hidden && this.columns.some(col => col.name === c.name))
                 .map(c => c.name);
             this.columns.forEach((column, id) => {
                 if (this.disabledColumns.includes(column.name)) {

package/dist/components/IxGridColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing, svg } from 'lit';\nimport { customElement, property, query, 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\nconst handleIcon = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z\" fill=\"#1456e0\" />\n</svg>`;\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n  static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n  @query('.dropdown-content') dropdown!: HTMLElement;\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: String }) columnsLocalStorageKey: string | undefined =\n    undefined;\n\n  @property({ type: Boolean }) columnReorderingAllowed: boolean = false;\n\n  @property({ type: Boolean }) refreshDataOnColumnVisibilityChange: boolean =\n    true;\n\n  @property({ attribute: false }) requestGridUpdate: any;\n\n  @state() private isDropdownVisible: boolean = false;\n\n  @state() disabledColumns: string[] = [];\n\n  @state() dragEvent: {\n    sourceEl: HTMLElement | null;\n    startId: number;\n    targetId: number;\n  } = {\n    sourceEl: null,\n    startId: -1,\n    targetId: -1,\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.outerInteraction);\n    this.initializeLocalStorage();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.outerInteraction);\n  }\n\n  outerInteraction = (e: Event) => {\n    if (!e.composedPath().includes(this)) {\n      this.isDropdownVisible = false;\n    }\n  };\n\n  get preservedColumns() {\n    let preservedColumns: Column[] = [];\n\n    if (this.columnsLocalStorageKey) {\n      preservedColumns = JSON.parse(\n        localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n      );\n    }\n    return preservedColumns;\n  }\n\n  initializeLocalStorage() {\n    if (this.preservedColumns.length > 0) {\n      this.disabledColumns = this.preservedColumns\n        .filter(c => c.hidden)\n        .map(c => c.name);\n      this.columns.forEach((column, id) => {\n        if (this.disabledColumns.includes(column.name)) {\n          this.columns[id].hidden = true;\n        }\n      });\n    }\n    this.dispatchUpdate();\n  }\n\n  protected update(changedProperties: PropertyValues): void {\n    super.update(changedProperties);\n    if (changedProperties.has('columnsLocalStorageKey')) {\n      this.initializeLocalStorage();\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.columnsLocalStorageKey) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify([...this.columns])\n      );\n    }\n\n    this.dispatchUpdate();\n  }\n\n  updateColumn(e: Event, id: number) {\n    const input = e.target as HTMLElement;\n    const el = input.shadowRoot?.querySelector('input');\n\n    this.columns[id].hidden = !el?.checked;\n\n    this.disabledColumns = this.columns\n      .filter((column: Column) => column.hidden)\n      .map((column: Column) => column.name);\n\n    if (this.columnsLocalStorageKey) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify([...this.columns])\n      );\n    }\n\n    if (this.refreshDataOnColumnVisibilityChange) this.dispatchUpdate();\n    else this.requestGridUpdate();\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    if (this.columnReorderingAllowed) {\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\n  dragend() {\n    if (this.columnReorderingAllowed) {\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\n  dragenter(e: DragEvent) {\n    if (this.columnReorderingAllowed) {\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\n  handleDropdownToggle(e: Event | KeyboardEvent) {\n    if (e instanceof KeyboardEvent && !triggerKeys.includes(e.key)) {\n      return;\n    }\n    const dropdownListInteraction = e.composedPath().includes(this.dropdown);\n    if (!dropdownListInteraction) {\n      this.isDropdownVisible = !this.isDropdownVisible;\n    }\n  }\n\n  render() {\n    return html`<div class=\"grid-menu\">\n      <span\n        @click=${this.handleDropdownToggle}\n        @keyDown=${this.handleDropdownToggle}\n        class=\"list list-dropdown\"\n      >\n        <ix-icon-button appearance=\"default\">\n          <svg\n            slot=\"default\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z\"\n              fill=\"#1456E0\"\n            />\n          </svg>\n        </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.filter(c => c.filterable !== false),\n                (col: Column) => col.name,\n                (col: Column, id: number) => html`<div>\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                    <div class=\"draggable\">${handleIcon}</ix-div>\n                  </label>\n                </div>`\n              )}\n            </div>`\n          : nothing}\n      </span>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing, svg } from 'lit';\nimport { customElement, property, query, 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\nconst handleIcon = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z\" fill=\"#1456e0\" />\n</svg>`;\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n  static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n  @query('.dropdown-content') dropdown!: HTMLElement;\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: String }) columnsLocalStorageKey: string | undefined =\n    undefined;\n\n  @property({ type: Boolean }) columnReorderingAllowed: boolean = false;\n\n  @property({ type: Boolean }) refreshDataOnColumnVisibilityChange: boolean =\n    true;\n\n  @property({ attribute: false }) requestGridUpdate: any;\n\n  @state() private isDropdownVisible: boolean = false;\n\n  @state() disabledColumns: string[] = [];\n\n  @state() dragEvent: {\n    sourceEl: HTMLElement | null;\n    startId: number;\n    targetId: number;\n  } = {\n    sourceEl: null,\n    startId: -1,\n    targetId: -1,\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.outerInteraction);\n    this.initializeLocalStorage();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.outerInteraction);\n  }\n\n  outerInteraction = (e: Event) => {\n    if (!e.composedPath().includes(this)) {\n      this.isDropdownVisible = false;\n    }\n  };\n\n  get preservedColumns() {\n    let preservedColumns: Column[] = [];\n\n    if (this.columnsLocalStorageKey) {\n      preservedColumns = JSON.parse(\n        localStorage.getItem(this.columnsLocalStorageKey) || '[]'\n      );\n    }\n    return preservedColumns;\n  }\n\n  initializeLocalStorage() {\n    if (this.preservedColumns.length > 0) {\n      this.disabledColumns = this.preservedColumns\n        .filter(c => c.hidden && this.columns.some(col => col.name === c.name))\n        .map(c => c.name);\n      this.columns.forEach((column, id) => {\n        if (this.disabledColumns.includes(column.name)) {\n          this.columns[id].hidden = true;\n        }\n      });\n    }\n    this.dispatchUpdate();\n  }\n\n  protected update(changedProperties: PropertyValues): void {\n    super.update(changedProperties);\n    if (changedProperties.has('columnsLocalStorageKey')) {\n      this.initializeLocalStorage();\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.columnsLocalStorageKey) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify([...this.columns])\n      );\n    }\n\n    this.dispatchUpdate();\n  }\n\n  updateColumn(e: Event, id: number) {\n    const input = e.target as HTMLElement;\n    const el = input.shadowRoot?.querySelector('input');\n\n    this.columns[id].hidden = !el?.checked;\n\n    this.disabledColumns = this.columns\n      .filter((column: Column) => column.hidden)\n      .map((column: Column) => column.name);\n\n    if (this.columnsLocalStorageKey) {\n      localStorage.setItem(\n        this.columnsLocalStorageKey,\n        JSON.stringify([...this.columns])\n      );\n    }\n\n    if (this.refreshDataOnColumnVisibilityChange) this.dispatchUpdate();\n    else this.requestGridUpdate();\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    if (this.columnReorderingAllowed) {\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\n  dragend() {\n    if (this.columnReorderingAllowed) {\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\n  dragenter(e: DragEvent) {\n    if (this.columnReorderingAllowed) {\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\n  handleDropdownToggle(e: Event | KeyboardEvent) {\n    if (e instanceof KeyboardEvent && !triggerKeys.includes(e.key)) {\n      return;\n    }\n    const dropdownListInteraction = e.composedPath().includes(this.dropdown);\n    if (!dropdownListInteraction) {\n      this.isDropdownVisible = !this.isDropdownVisible;\n    }\n  }\n\n  render() {\n    return html`<div class=\"grid-menu\">\n      <span\n        @click=${this.handleDropdownToggle}\n        @keyDown=${this.handleDropdownToggle}\n        class=\"list list-dropdown\"\n      >\n        <ix-icon-button appearance=\"default\">\n          <svg\n            slot=\"default\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n              d=\"M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z\"\n              fill=\"#1456E0\"\n            />\n          </svg>\n        </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.filter(c => c.filterable !== false),\n                (col: Column) => col.name,\n                (col: Column, id: number) => html`<div>\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                    <div class=\"draggable\">${handleIcon}</ix-div>\n                  </label>\n                </div>`\n              )}\n            </div>`\n          : nothing}\n      </span>\n    </div>`;\n  }\n}\n"]}

package/dist/components/IxGridDownloadMenu.js

@@ -6,7 +6,6 @@ import '@digital-realty/ix-menu/ix-menu-item.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import '@digital-realty/ix-progress/ix-progress.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);
@@ -80,7 +79,7 @@ let IxGridDownloadMenu = class IxGridDownloadMenu extends LitElement {
     </div>`;
     }
 };
-IxGridDownloadMenu.styles = [IxGridViewStyles, IxGridDownloadMenuStyles];
+IxGridDownloadMenu.styles = [IxGridViewStyles];
 __decorate([
     query('#menu')
 ], IxGridDownloadMenu.prototype, "downloadMenu", void 0);

package/dist/components/IxGridDownloadMenu.js.map

@@ -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,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,oCAAoC,CAAC;AAC5C,OAAO,yCAAyC,CAAC;AACjD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,4CAA4C,CAAC;AACpD,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;QAExC,kBAAa,GAAG,KAAK,CAAC;IA+ErD,CAAC;IA7EC,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,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,OAAO,IAAI,CAAA;yBACQ,IAAI;kBACX,KAAK;;;sBAGD,CAAC;SAClB;QAED,OAAO,IAAI,CAAA;2CAC4B,IAAI,CAAC,UAAU;;;;;;;;;;;;;;;;;;UAkBhD,IAAI,CAAC,eAAe,EAAE;;WAErB,CAAC;IACV,CAAC;;AAtFe,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;AAExC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAAuB;AATxC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAwF9B;SAxFY,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 '@digital-realty/ix-progress/ix-progress.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  @property({ type: Boolean }) isDownloading = false;\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    if (this.isDownloading) {\n      return html`<ix-progress\n        .indeterminate=${true}\n        .linear=${false}\n        style=\"--md-circular-progress-size: 1.75REM;\n              text-align: center;\"\n      ></ix-progress>`;\n    }\n\n    return html` <div style=\"position: relative\">\n      <ix-icon-button id=\"anchor\" @click=${this.toggleMenu}>\n        <svg\n          slot=\"default\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z\"\n            fill=\"#1456E0\"\n          />\n        </svg>\n      </ix-icon-button>\n      <ix-menu id=\"menu\" anchor=\"anchor\" has-overflow>\n        ${this.renderMenuItems()}\n      </ix-menu>\n    </div>`;\n  }\n}\n"]}
+{"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,4CAA4C,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAInD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAOsB,UAAK,GAAkC,EAAE,CAAC;QAExC,kBAAa,GAAG,KAAK,CAAC;IA+ErD,CAAC;IA7EC,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,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,OAAO,IAAI,CAAA;yBACQ,IAAI;kBACX,KAAK;;;sBAGD,CAAC;SAClB;QAED,OAAO,IAAI,CAAA;2CAC4B,IAAI,CAAC,UAAU;;;;;;;;;;;;;;;;;;UAkBhD,IAAI,CAAC,eAAe,EAAE;;WAErB,CAAC;IACV,CAAC;;AAtFe,yBAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAE5B;IAAf,KAAK,CAAC,OAAO,CAAC;wDAAuB;AAEpB;IAAjB,KAAK,CAAC,SAAS,CAAC;8DAAkC;AAExB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAA2C;AAExC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDAAuB;AATxC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAwF9B;SAxFY,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 '@digital-realty/ix-progress/ix-progress.js';\nimport { IxGridViewStyles } from '../grid-view-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];\n\n  @query('#menu') downloadMenu!: IxMenu;\n\n  @query('#anchor') downloadMenuAnchor!: HTMLElement;\n\n  @property({ type: Array }) items: IxGridDownloadMenuItemModel[] = [];\n\n  @property({ type: Boolean }) isDownloading = false;\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    if (this.isDownloading) {\n      return html`<ix-progress\n        .indeterminate=${true}\n        .linear=${false}\n        style=\"--md-circular-progress-size: 1.75REM;\n              text-align: center;\"\n      ></ix-progress>`;\n    }\n\n    return html` <div style=\"position: relative\">\n      <ix-icon-button id=\"anchor\" @click=${this.toggleMenu}>\n        <svg\n          slot=\"default\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z\"\n            fill=\"#1456E0\"\n          />\n        </svg>\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/IxGridNav.js

@@ -15,6 +15,7 @@ export class IxGridNavigation extends LitElement {
         href=${ifDefined(selected ? undefined : path)}
         @click=${onClick}
         class="button"
+        style=${selected ? 'pointer-events: none' : ''}
         ><div class="button-text">${text}</div></ix-button
       >
     `;
@@ -31,7 +32,7 @@ IxGridNavigation.styles = css `
     :host {
       --md-filled-button-container-color: var(
         --grid-nav-button-container-color,
-        var(--ix-text-dark, #092241)
+        var(--clr-on-surface, #092241)
       );
       --md-filled-button-container-height: var(
         --grid-nav-button-container-height,
@@ -41,19 +42,10 @@ IxGridNavigation.styles = css `
         --grid-nav-button-container-height,
         2.5rem
       );
-      --md-text-button-label-text-color: var(--ix-text-dark, #092241);
-      --md-text-button-hover-label-text-color: var(--ix-text-dark, #092241);
-      --md-text-button-pressed-label-text-color: var(--ix-text-dark, #092241);
-      --md-text-button-focus-label-text-color: var(--ix-text-dark, #092241);
-
-      --md-filled-button-leading-space: var(
-        --grid-nav-button-leading-space,
-        20px
-      );
-      --md-filled-button-trailing-space: var(
-        --grid-nav-button-trailing-space,
-        20px
-      );
+      --md-text-button-label-text-color: var(--clr-on-surface, #092241);
+      --md-text-button-hover-label-text-color: var(--clr-on-surface, #092241);
+      --md-text-button-pressed-label-text-color: var(--clr-on-surface, #092241);
+      --md-text-button-focus-label-text-color: var(--clr-on-surface, #092241);
     }
 
     [disabled] {
@@ -63,7 +55,7 @@ IxGridNavigation.styles = css `
       );
       --md-filled-button-disabled-label-text-color: var(
         --grid-nav-button-disabled-container-color,
-        var(--ix-text-dark, #000)
+        var(--clr-on-surface, #000)
       );
     }
 
@@ -78,7 +70,6 @@ IxGridNavigation.styles = css `
 
     .button-text {
       text-transform: var(--grid-nav-button-text-transform, none);
-      font-family: 'Open Sans', sans-serif;
     }
   `;
 __decorate([

package/dist/components/IxGridNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["../../src/components/IxGridNav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,2BAA2B,CAAC;AAUnC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAC+C,YAAO,GAAqB,EAAE,CAAC;QAyD5E,kDAAkD;QAClD,iBAAY,GAAG,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,GACO,EAAE,EAAE,CACnB,IAAI,CAAA;;oBAEY,QAAQ;qBACP,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;iBACpC,OAAO;;oCAEY,IAAI;;KAEnC,CAAC;IASN,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;;KAE1D,CAAC;IACJ,CAAC;;AAhFM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDlB,CAAC;AAvD2C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAgC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@digital-realty/ix-button';\n\nexport interface IGridNavButton {\n  path?: string;\n  selected?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  text: string;\n}\n\nexport class IxGridNavigation extends LitElement {\n  @property({ type: Array, attribute: false }) buttons: IGridNavButton[] = [];\n\n  static styles = css`\n    :host {\n      --md-filled-button-container-color: var(\n        --grid-nav-button-container-color,\n        var(--ix-text-dark, #092241)\n      );\n      --md-filled-button-container-height: var(\n        --grid-nav-button-container-height,\n        2.5rem\n      );\n      --md-text-button-container-height: var(\n        --grid-nav-button-container-height,\n        2.5rem\n      );\n      --md-text-button-label-text-color: var(--ix-text-dark, #092241);\n      --md-text-button-hover-label-text-color: var(--ix-text-dark, #092241);\n      --md-text-button-pressed-label-text-color: var(--ix-text-dark, #092241);\n      --md-text-button-focus-label-text-color: var(--ix-text-dark, #092241);\n\n      --md-filled-button-leading-space: var(\n        --grid-nav-button-leading-space,\n        20px\n      );\n      --md-filled-button-trailing-space: var(\n        --grid-nav-button-trailing-space,\n        20px\n      );\n    }\n\n    [disabled] {\n      --md-filled-button-disabled-container-color: var(\n        --grid-nav-button-disabled-container-color,\n        transparent\n      );\n      --md-filled-button-disabled-label-text-color: var(\n        --grid-nav-button-disabled-container-color,\n        var(--ix-text-dark, #000)\n      );\n    }\n\n    .container {\n      display: var(--grid-nav-button-group-display, flex);\n      gap: var(--grid-nav-button-group-gap, 0.5rem);\n    }\n\n    .button {\n      margin: var(--grid-nav-button-margin, 0);\n    }\n\n    .button-text {\n      text-transform: var(--grid-nav-button-text-transform, none);\n      font-family: 'Open Sans', sans-serif;\n    }\n  `;\n\n  // eslint-disable-next-line class-methods-use-this\n  renderButton = ({\n    path,\n    text,\n    onClick,\n    disabled,\n    selected,\n  }: IGridNavButton) =>\n    html`\n      <ix-button\n        ?disabled=${disabled}\n        appearance=${selected ? 'filled' : 'text'}\n        href=${ifDefined(selected ? undefined : path)}\n        @click=${onClick}\n        class=\"button\"\n        ><div class=\"button-text\">${text}</div></ix-button\n      >\n    `;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.buttons.map(button => this.renderButton(button))}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["../../src/components/IxGridNav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,2BAA2B,CAAC;AAUnC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAC+C,YAAO,GAAqB,EAAE,CAAC;QA+C5E,kDAAkD;QAClD,iBAAY,GAAG,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,GACO,EAAE,EAAE,CACnB,IAAI,CAAA;;oBAEY,QAAQ;qBACP,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;iBACpC,OAAO;;gBAER,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;oCAClB,IAAI;;KAEnC,CAAC;IASN,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;;KAE1D,CAAC;IACJ,CAAC;;AAvEM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ClB,CAAC;AA7C2C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAgC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@digital-realty/ix-button';\n\nexport interface IGridNavButton {\n  path?: string;\n  selected?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  text: string;\n}\n\nexport class IxGridNavigation extends LitElement {\n  @property({ type: Array, attribute: false }) buttons: IGridNavButton[] = [];\n\n  static styles = css`\n    :host {\n      --md-filled-button-container-color: var(\n        --grid-nav-button-container-color,\n        var(--clr-on-surface, #092241)\n      );\n      --md-filled-button-container-height: var(\n        --grid-nav-button-container-height,\n        2.5rem\n      );\n      --md-text-button-container-height: var(\n        --grid-nav-button-container-height,\n        2.5rem\n      );\n      --md-text-button-label-text-color: var(--clr-on-surface, #092241);\n      --md-text-button-hover-label-text-color: var(--clr-on-surface, #092241);\n      --md-text-button-pressed-label-text-color: var(--clr-on-surface, #092241);\n      --md-text-button-focus-label-text-color: var(--clr-on-surface, #092241);\n    }\n\n    [disabled] {\n      --md-filled-button-disabled-container-color: var(\n        --grid-nav-button-disabled-container-color,\n        transparent\n      );\n      --md-filled-button-disabled-label-text-color: var(\n        --grid-nav-button-disabled-container-color,\n        var(--clr-on-surface, #000)\n      );\n    }\n\n    .container {\n      display: var(--grid-nav-button-group-display, flex);\n      gap: var(--grid-nav-button-group-gap, 0.5rem);\n    }\n\n    .button {\n      margin: var(--grid-nav-button-margin, 0);\n    }\n\n    .button-text {\n      text-transform: var(--grid-nav-button-text-transform, none);\n    }\n  `;\n\n  // eslint-disable-next-line class-methods-use-this\n  renderButton = ({\n    path,\n    text,\n    onClick,\n    disabled,\n    selected,\n  }: IGridNavButton) =>\n    html`\n      <ix-button\n        ?disabled=${disabled}\n        appearance=${selected ? 'filled' : 'text'}\n        href=${ifDefined(selected ? undefined : path)}\n        @click=${onClick}\n        class=\"button\"\n        style=${selected ? 'pointer-events: none' : ''}\n        ><div class=\"button-text\">${text}</div></ix-button\n      >\n    `;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.buttons.map(button => this.renderButton(button))}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/components/IxGridRowFilter.js

@@ -132,7 +132,8 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
         const selectedColumn = this.filterableColumns.find(column => column.name === selectedValue);
         this.filters[index].columnField = selectedValue;
         this.filters[index].dataType = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.dataType;
-        this.filters[index].operatorValue = ((_a = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.filterOperators) === null || _a === void 0 ? void 0 : _a[0]) || 'contains';
+        this.filters[index].operatorValue =
+            ((_a = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.filterOperators) === null || _a === void 0 ? void 0 : _a[0]) || 'contains';
         this.filters = [...this.filters];
         if (this.filters[index].value.length >= 3) {
             this.dispatchUpdate();
@@ -331,21 +332,22 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
         ${this.filters.map((filter, index) => this.renderFilterInput(filter, index))}
       </div>
       <div class="filter-footer">
-        <button
+        <ix-button
           class="add-filter-button"
           @click="${() => this.addFilter()}"
           ?disabled=${disableAddButton}
+          appearance="text"
         >
-          <ix-icon-button icon="add"></ix-icon-button>
-          <span class="add">ADD FILTER</span>
-        </button>
-        <button
-          class="clear"
+          <ix-icon slot="icon">add</ix-icon>
+          Add filter
+        </ix-button>
+        <ix-button
           @click="${() => this.clearFilters()}"
           ?disabled=${this.activeFilters.length === 0}
+          appearance="text"
         >
-          <span class="add">CLEAR ALL</span>
-        </button>
+          Clear all
+        </ix-button>
       </div>
     </div>`;
     }

package/dist/components/IxGridRowFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGridRowFilter.js","sourceRoot":"","sources":["../../src/components/IxGridRowFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { formatDate } from 'date-fns/format.js';\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { Column, DataType, FilterOperator } from '../IxGrid.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { copy } from '../ix-grid-copy.js';\nimport { IxGridRowFilterStyles } from './grid-row-filter-styles.js';\n\nexport interface Filter {\n  columnField: string;\n  operatorValue: string;\n  dataType?: DataType;\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  @property({ type: Number }) filterValueChangeDebounceTime: number = 300;\n\n  @property({ type: Boolean }) readParamsFromURL = false;\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  @state() private maxDate = formatDate(new Date(), 'yyyy-MM-dd');\n\n  @state() private fromDateErrorText? = '';\n\n  private debounceEvent: ReturnType<typeof setTimeout> | undefined;\n\n  private debouncedOnFilterValueChange: (\n    index: number,\n    target: EventTarget\n  ) => void = () => {};\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\n    if(this.readParamsFromURL) {\n      this.filters = this.parseFilterQueryString();\n    }\n\n    if (!this.filters.length) {\n      this.addFilter();\n    }\n    \n    this.updateActiveFilters();\n    this.dispatchUpdate(false);\n    this.debouncedOnFilterValueChange = (index, target) => {\n      clearTimeout(this.debounceEvent);\n      this.debounceEvent = setTimeout(\n        () => this.onfilterValueChange.bind(this)(index, target),\n        this.filterValueChangeDebounceTime\n      );\n    };\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    this.filterableColumns.forEach(fc => {\n      fc.filterOperators?.forEach(operator => {\n        const key = `${fc.name}_${operator}`;\n\n        if (params.has(key)) {\n          filters.push({\n            columnField: fc.name,\n            operatorValue: operator,\n            dataType: fc.dataType,\n            value: params.get(key) ?? '',\n          });\n        }\n      });\n    });\n      \n    return filters;\n  }\n\n  dispatchUpdate(resetPage = true) {\n    this.dispatchEvent(\n      new CustomEvent('rowFilter', {\n        detail: {\n          filters: this.filters.filter(filter => filter.value.length >= 3),\n          resetPage,\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\n    const filterDataType =\n      this.filterableColumns.find(c => c.name === nextFilter)?.dataType ||\n      'string';\n\n    this.filters = [\n      ...this.filters,\n      {\n        columnField: nextFilter,\n        operatorValue: filterOperators[0],\n        dataType: filterDataType,\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    const selectedColumn = this.filterableColumns.find(\n      column => column.name === selectedValue\n    );\n    this.filters[index].columnField = selectedValue;\n    this.filters[index].dataType = selectedColumn?.dataType;\n    this.filters[index].operatorValue = selectedColumn?.filterOperators?.[0] || 'contains';\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 onDatefilterValueChange(index: number, value: string) {\n    this.filters[index].value = value;\n    this.dispatchUpdate();\n    this.updateActiveFilters();\n  }\n\n  private onfilterValueChange(index: number, target: EventTarget) {\n    const oldValueLength = this.filters[index].value.length;\n    const { value } = 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  private renderStringInput(value: any, index: number) {\n    return html`<label class=\"form-group-operator-label\">\n      <span>Value</span>\n      <input\n        placeholder=\"Filter value\"\n        @input=${(e: Event) =>\n          this.debouncedOnFilterValueChange(index, e.target!)}\n        .value=${value.value}\n      />\n    </label>`;\n  }\n\n  private renderDateInput(value: any, index: number) {\n    return html` <ix-date\n      .value=${value.value}\n      max=${this.maxDate}\n      name=\"${value.columnField}-valueDate\"\n      .errorText=${this.fromDateErrorText}\n      .onChanged=${e => this.onDatefilterValueChange(index, e)}\n    >\n    </ix-date>`;\n  }\n\n  private renderFilterInputControl(value: any, index: number) {\n    switch (value.dataType) {\n      case 'string':\n      case undefined:\n        return this.renderStringInput(value, index);\n      case 'dateTime':\n        return this.renderDateInput(value, index);\n      default:\n        return nothing;\n    }\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                class=\"filterOperatorInput\"\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.operatorValue}\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            ${this.renderFilterInputControl(value, index)}\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"]}
+{"version":3,"file":"IxGridRowFilter.js","sourceRoot":"","sources":["../../src/components/IxGridRowFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { formatDate } from 'date-fns/format.js';\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { Column, DataType, FilterOperator } from '../IxGrid.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { copy } from '../ix-grid-copy.js';\nimport { IxGridRowFilterStyles } from './grid-row-filter-styles.js';\n\nexport interface Filter {\n  columnField: string;\n  operatorValue: string;\n  dataType?: DataType;\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  @property({ type: Number }) filterValueChangeDebounceTime: number = 300;\n\n  @property({ type: Boolean }) readParamsFromURL = false;\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  @state() private maxDate = formatDate(new Date(), 'yyyy-MM-dd');\n\n  @state() private fromDateErrorText? = '';\n\n  private debounceEvent: ReturnType<typeof setTimeout> | undefined;\n\n  private debouncedOnFilterValueChange: (\n    index: number,\n    target: EventTarget\n  ) => void = () => {};\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\n    if (this.readParamsFromURL) {\n      this.filters = this.parseFilterQueryString();\n    }\n\n    if (!this.filters.length) {\n      this.addFilter();\n    }\n\n    this.updateActiveFilters();\n    this.dispatchUpdate(false);\n    this.debouncedOnFilterValueChange = (index, target) => {\n      clearTimeout(this.debounceEvent);\n      this.debounceEvent = setTimeout(\n        () => this.onfilterValueChange.bind(this)(index, target),\n        this.filterValueChangeDebounceTime\n      );\n    };\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    this.filterableColumns.forEach(fc => {\n      fc.filterOperators?.forEach(operator => {\n        const key = `${fc.name}_${operator}`;\n\n        if (params.has(key)) {\n          filters.push({\n            columnField: fc.name,\n            operatorValue: operator,\n            dataType: fc.dataType,\n            value: params.get(key) ?? '',\n          });\n        }\n      });\n    });\n\n    return filters;\n  }\n\n  dispatchUpdate(resetPage = true) {\n    this.dispatchEvent(\n      new CustomEvent('rowFilter', {\n        detail: {\n          filters: this.filters.filter(filter => filter.value.length >= 3),\n          resetPage,\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\n    const filterDataType =\n      this.filterableColumns.find(c => c.name === nextFilter)?.dataType ||\n      'string';\n\n    this.filters = [\n      ...this.filters,\n      {\n        columnField: nextFilter,\n        operatorValue: filterOperators[0],\n        dataType: filterDataType,\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    const selectedColumn = this.filterableColumns.find(\n      column => column.name === selectedValue\n    );\n    this.filters[index].columnField = selectedValue;\n    this.filters[index].dataType = selectedColumn?.dataType;\n    this.filters[index].operatorValue =\n      selectedColumn?.filterOperators?.[0] || 'contains';\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 onDatefilterValueChange(index: number, value: string) {\n    this.filters[index].value = value;\n    this.dispatchUpdate();\n    this.updateActiveFilters();\n  }\n\n  private onfilterValueChange(index: number, target: EventTarget) {\n    const oldValueLength = this.filters[index].value.length;\n    const { value } = 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  private renderStringInput(value: any, index: number) {\n    return html`<label class=\"form-group-operator-label\">\n      <span>Value</span>\n      <input\n        placeholder=\"Filter value\"\n        @input=${(e: Event) =>\n          this.debouncedOnFilterValueChange(index, e.target!)}\n        .value=${value.value}\n      />\n    </label>`;\n  }\n\n  private renderDateInput(value: any, index: number) {\n    return html` <ix-date\n      .value=${value.value}\n      max=${this.maxDate}\n      name=\"${value.columnField}-valueDate\"\n      .errorText=${this.fromDateErrorText}\n      .onChanged=${e => this.onDatefilterValueChange(index, e)}\n    >\n    </ix-date>`;\n  }\n\n  private renderFilterInputControl(value: any, index: number) {\n    switch (value.dataType) {\n      case 'string':\n      case undefined:\n        return this.renderStringInput(value, index);\n      case 'dateTime':\n        return this.renderDateInput(value, index);\n      default:\n        return nothing;\n    }\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                class=\"filterOperatorInput\"\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.operatorValue}\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            ${this.renderFilterInputControl(value, index)}\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        <ix-button\n          class=\"add-filter-button\"\n          @click=\"${() => this.addFilter()}\"\n          ?disabled=${disableAddButton}\n          appearance=\"text\"\n        >\n          <ix-icon slot=\"icon\">add</ix-icon>\n          Add filter\n        </ix-button>\n        <ix-button\n          @click=\"${() => this.clearFilters()}\"\n          ?disabled=${this.activeFilters.length === 0}\n          appearance=\"text\"\n        >\n          Clear all\n        </ix-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/components/IxPagination.js

@@ -46,7 +46,11 @@ let IxPagination = class IxPagination extends LitElement {
         filled
       >
         ${this.pageSizes.map(option => html `
-            <ix-select-option class="select-option" value=${option}>
+            <ix-select-option
+              class="select-option"
+              value=${option}
+              ?selected=${option === this.pageSize}
+            >
               <div slot="headline">${option}</div>
             </ix-select-option>
           `)}