@digital-realty/ix-grid 1.0.6

package/dist/IxGrid.js

@@ -0,0 +1,227 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '@vaadin/grid';
+import { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './components/IxPagination.js';
+import './components/IxGridColumnFilter.js';
+import './components/IxGridRowFilter.js';
+import { IxGridViewStyles } from './grid-view-styles.js';
+import { copy } from './ix-grid-copy.js';
+export class IxGrid extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.rows = [];
+        this.defaultEmptyText = 'No data to display';
+        this.sortedColumn = '';
+        this.sortDirection = '';
+        this.hideHeader = false;
+        this.rowLimit = 0;
+        this.page = 1;
+        this.pageSize = 10;
+        this.pageSizes = [5, 10, 25, 100];
+        this.recordCount = 0;
+        this.localStorageID = undefined;
+        this.filters = [];
+        this.isLoading = false;
+        this.isExpanded = false;
+        this.renderColumnHeader = (column) => html `
+    <div
+      @click=${() => column.sortable && this.handleSort(column.name)}
+      @keyDown=${() => column.sortable && this.handleSort(column.name)}
+      class="header"
+    >
+      ${column.header}
+      ${column.sortable
+            ? html `<ix-icon title="Sort" class="header-sort-icon"
+            >${this.sortDirection === 'desc' &&
+                this.sortedColumn === column.name
+                ? `arrow_upward`
+                : `arrow_downward`}</ix-icon
+          >`
+            : nothing}
+    </div>
+  `;
+        this.renderHeader = () => html `
+    <div class="grid-header">
+      <h2>
+        ${html `${this.recordCount}
+        ${copy.user}${this.recordCount === 1 ? '' : 's'}`}
+      </h2>
+      <div class="grid-menu">
+        <ix-grid-column-filter
+          .columns=${this.columns}
+          localStorageID=${ifDefined(this.localStorageID)}
+          @columnFilter=${(e) => {
+            e.detail.columns.forEach((column, id) => {
+                this.columns[id].hidden = column.hidden;
+            });
+            this.updatePage();
+        }}
+        ></ix-grid-column-filter>
+        <ix-icon-button icon="download"></ix-icon-button>
+        <ix-grid-row-filter
+          .columns=${this.columns}
+          @rowFilter=${(e) => {
+            this.filters = e.detail.filters;
+            this.updatePage();
+        }}
+        ></ix-grid-row-filter>
+      </div>
+    </div>
+  `;
+        this.renderRowLimitControls = () => {
+            if (this.rows.length <= this.rowLimit)
+                return nothing;
+            return html `
+      <div class="row-limit">
+        <ix-button
+          appearance="text"
+          @click=${() => {
+                this.isExpanded = !this.isExpanded;
+            }}
+          has-icon
+        >
+          ${this.isExpanded ? copy.viewLess : copy.viewMore}
+          <ix-icon slot="icon">${this.isExpanded ? 'remove' : 'add'}</ix-icon>
+        </ix-button>
+      </div>
+    `;
+        };
+        this.renderPaginationControls = () => html `
+    <ix-pagination
+      .page=${this.page}
+      .pageSize=${this.pageSize}
+      .pageSizes=${this.pageSizes}
+      .recordCount=${this.recordCount}
+      @updatePagination=${(e) => {
+            this.page = e.detail.page;
+            this.pageSize = e.detail.pageSize;
+            this.updatePage();
+        }}
+    ></ix-pagination>
+  `;
+    }
+    get columnNames() {
+        return this.columns.map((column) => column.name);
+    }
+    async updatePage() {
+        const filters = this.filters.reduce((columnFilters, { columnField, value }) => ({
+            ...columnFilters,
+            [columnField]: value,
+        }), {});
+        const urlParams = {
+            sort: this.sortedColumn,
+            order: this.sortDirection,
+            page: this.page.toString(),
+            size: this.pageSize.toString(),
+            ...filters,
+        };
+        const url = new URL(window.location.href);
+        const searchParams = new URLSearchParams(urlParams);
+        url.search = searchParams.toString();
+        window.history.replaceState(null, '', url.toString());
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                columnName: this.sortedColumn,
+                sortOrder: this.sortDirection,
+                page: this.page,
+                pageSize: this.pageSize,
+                filters,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleSort(column = '') {
+        if (this.sortedColumn !== column) {
+            this.sortDirection = 'asc';
+        }
+        else {
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        this.sortedColumn = column;
+        this.updatePage();
+    }
+    render() {
+        var _a;
+        return html `
+      <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>
+        ${this.hideHeader ? nothing : this.renderHeader()}
+        <vaadin-grid
+          .items=${this.rowLimit > 0 && !this.isExpanded
+            ? this.rows.slice(0, this.rowLimit)
+            : this.rows}
+          all-rows-visible
+          column-reordering-allowed
+          theme="no-border"
+        >
+          ${(_a = this.columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
+            ? html `<vaadin-grid-column
+                  ${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
+                  ${columnBodyRenderer(column.bodyRenderer, [])}
+                  resizable
+                  width=${ifDefined(column.width)}
+                  ?hidden=${column.hidden}
+                  ?frozen-to-end=${column.frozenToEnd}
+                ></vaadin-grid-column>`
+            : nothing)}
+        </vaadin-grid>
+        ${this.rowLimit > 0
+            ? this.renderRowLimitControls()
+            : this.renderPaginationControls()}
+      </div>
+    `;
+    }
+}
+IxGrid.styles = [IxGridViewStyles];
+__decorate([
+    property({ type: Array })
+], IxGrid.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], IxGrid.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], IxGrid.prototype, "defaultEmptyText", void 0);
+__decorate([
+    property({ type: String })
+], IxGrid.prototype, "sortedColumn", void 0);
+__decorate([
+    property({ type: String })
+], IxGrid.prototype, "sortDirection", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGrid.prototype, "hideHeader", void 0);
+__decorate([
+    property({ type: Number })
+], IxGrid.prototype, "rowLimit", void 0);
+__decorate([
+    property({ type: Number })
+], IxGrid.prototype, "page", void 0);
+__decorate([
+    property({ type: Number })
+], IxGrid.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Array })
+], IxGrid.prototype, "pageSizes", void 0);
+__decorate([
+    property({ type: Number })
+], IxGrid.prototype, "recordCount", void 0);
+__decorate([
+    property({ type: String })
+], IxGrid.prototype, "localStorageID", void 0);
+__decorate([
+    state()
+], IxGrid.prototype, "filters", void 0);
+__decorate([
+    state()
+], IxGrid.prototype, "isLoading", void 0);
+__decorate([
+    state()
+], IxGrid.prototype, "isExpanded", void 0);
+//# sourceMappingURL=IxGrid.js.map

package/dist/IxGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\n\nexport interface Row {\n  [key: string]: string;\n}\n\nexport interface Column {\n  name: string;\n  header: string;\n  bodyRenderer: (row: Row) => any;\n  width?: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  hidden?: boolean;\n  frozenToEnd?: boolean;\n}\n\nexport class IxGrid extends LitElement {\n  static readonly styles = [IxGridViewStyles];\n\n  @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: Number }) rowLimit: number = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: String }) localStorageID: string | undefined = undefined;\n\n  @state() private filters: Filter[] = [];\n\n  @state() isLoading = false;\n\n  @state() isExpanded = false;\n\n  get columnNames() {\n    return this.columns.map((column: Column) => column.name);\n  }\n\n  private async updatePage() {\n    const filters = this.filters.reduce(\n      (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n        ...columnFilters,\n        [columnField]: value,\n      }),\n      {}\n    );\n\n    const urlParams: { [key: string]: string } = {\n      sort: this.sortedColumn,\n      order: this.sortDirection,\n      page: this.page.toString(),\n      size: this.pageSize.toString(),\n      ...filters,\n    };\n\n    const url = new URL(window.location.href);\n    const searchParams = new URLSearchParams(urlParams);\n    url.search = searchParams.toString();\n    window.history.replaceState(null, '', url.toString());\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          columnName: this.sortedColumn,\n          sortOrder: this.sortDirection,\n          page: this.page,\n          pageSize: this.pageSize,\n          filters,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  handleSort(column: string = '') {\n    if (this.sortedColumn !== column) {\n      this.sortDirection = 'asc';\n    } else {\n      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n    }\n    this.sortedColumn = column;\n\n    this.updatePage();\n  }\n\n  private renderColumnHeader = (column: Column) => html`\n    <div\n      @click=${() => column.sortable && this.handleSort(column.name)}\n      @keyDown=${() => column.sortable && this.handleSort(column.name)}\n      class=\"header\"\n    >\n      ${column.header}\n      ${column.sortable\n        ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n            >${this.sortDirection === 'desc' &&\n            this.sortedColumn === column.name\n              ? `arrow_upward`\n              : `arrow_downward`}</ix-icon\n          >`\n        : nothing}\n    </div>\n  `;\n\n  private renderHeader = () => html`\n    <div class=\"grid-header\">\n      <h2>\n        ${html`${this.recordCount}\n        ${copy.user}${this.recordCount === 1 ? '' : 's'}`}\n      </h2>\n      <div class=\"grid-menu\">\n        <ix-grid-column-filter\n          .columns=${this.columns}\n          localStorageID=${ifDefined(this.localStorageID)}\n          @columnFilter=${(e: CustomEvent) => {\n            e.detail.columns.forEach((column: Column, id: number) => {\n              this.columns[id].hidden = column.hidden;\n            });\n            this.updatePage();\n          }}\n        ></ix-grid-column-filter>\n        <ix-icon-button icon=\"download\"></ix-icon-button>\n        <ix-grid-row-filter\n          .columns=${this.columns}\n          @rowFilter=${(e: CustomEvent) => {\n            this.filters = e.detail.filters;\n            this.updatePage();\n          }}\n        ></ix-grid-row-filter>\n      </div>\n    </div>\n  `;\n\n  private renderRowLimitControls = () => {\n    if (this.rows.length <= this.rowLimit) return nothing;\n\n    return html`\n      <div class=\"row-limit\">\n        <ix-button\n          appearance=\"text\"\n          @click=${() => {\n            this.isExpanded = !this.isExpanded;\n          }}\n          has-icon\n        >\n          ${this.isExpanded ? copy.viewLess : copy.viewMore}\n          <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n        </ix-button>\n      </div>\n    `;\n  };\n\n  private renderPaginationControls = () => html`\n    <ix-pagination\n      .page=${this.page}\n      .pageSize=${this.pageSize}\n      .pageSizes=${this.pageSizes}\n      .recordCount=${this.recordCount}\n      @updatePagination=${(e: CustomEvent) => {\n        this.page = e.detail.page;\n        this.pageSize = e.detail.pageSize;\n        this.updatePage();\n      }}\n    ></ix-pagination>\n  `;\n\n  render() {\n    return html`\n      <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\n        ${this.hideHeader ? nothing : this.renderHeader()}\n        <vaadin-grid\n          .items=${this.rowLimit > 0 && !this.isExpanded\n            ? this.rows.slice(0, this.rowLimit)\n            : this.rows}\n          all-rows-visible\n          column-reordering-allowed\n          theme=\"no-border\"\n        >\n          ${this.columns?.map((column: Column) =>\n            column.name\n              ? html`<vaadin-grid-column\n                  ${columnHeaderRenderer(\n                    () => this.renderColumnHeader(column),\n                    this.sortDirection\n                  )}\n                  ${columnBodyRenderer(column.bodyRenderer, [])}\n                  resizable\n                  width=${ifDefined(column.width)}\n                  ?hidden=${column.hidden}\n                  ?frozen-to-end=${column.frozenToEnd}\n                ></vaadin-grid-column>`\n              : nothing\n          )}\n        </vaadin-grid>\n        ${this.rowLimit > 0\n          ? this.renderRowLimitControls()\n          : this.renderPaginationControls()}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/components/IxGridColumnFilter.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import '@digital-realty/ix-switch/ix-switch.js';
+import type { Column } from '../IxGrid.js';
+export declare class IxGridColumnFilter extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    columns: Column[];
+    localStorageID: string | undefined;
+    private isDropdownVisible;
+    disabledColumns: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    outerInteraction: (e: Event) => void;
+    initializeLocalStorage(): void;
+    toggleColumn(id: number): void;
+    updateColumn(e: Event, id: number): void;
+    dispatchUpdate(columns?: Column[]): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/IxGridColumnFilter.js

@@ -0,0 +1,133 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import '@digital-realty/ix-switch/ix-switch.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';
+const triggerKeys = [' ', 'Enter'];
+let IxGridColumnFilter = class IxGridColumnFilter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.localStorageID = undefined;
+        this.isDropdownVisible = false;
+        this.disabledColumns = [];
+        this.outerInteraction = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this.isDropdownVisible = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.outerInteraction);
+        this.initializeLocalStorage();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.outerInteraction);
+    }
+    initializeLocalStorage() {
+        if (this.localStorageID) {
+            const storedDisabledColumns = localStorage.getItem(this.localStorageID);
+            if (storedDisabledColumns) {
+                const disabledColumns = JSON.parse(storedDisabledColumns);
+                this.columns.forEach((column, id) => {
+                    if (disabledColumns.includes(column.name)) {
+                        this.columns[id].hidden = true;
+                    }
+                });
+            }
+            this.dispatchUpdate();
+        }
+    }
+    toggleColumn(id) {
+        this.columns[id].hidden = !this.columns[id].hidden;
+        this.disabledColumns = this.columns
+            .filter((column) => column.hidden)
+            .map((column) => column.name);
+        if (this.localStorageID !== undefined) {
+            localStorage.setItem(this.localStorageID, JSON.stringify(this.disabledColumns));
+        }
+        this.dispatchUpdate();
+    }
+    updateColumn(e, id) {
+        var _a;
+        const input = e.target;
+        const el = (_a = input.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        this.columns[id].hidden = !(el === null || el === void 0 ? void 0 : el.checked);
+        this.disabledColumns = this.columns
+            .filter((column) => column.hidden)
+            .map((column) => column.name);
+        if (this.localStorageID !== undefined) {
+            localStorage.setItem(this.localStorageID, JSON.stringify(this.disabledColumns));
+        }
+        this.dispatchUpdate();
+    }
+    dispatchUpdate(columns = this.columns) {
+        this.dispatchEvent(new CustomEvent('columnFilter', {
+            detail: {
+                columns,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        var _a;
+        return html ` <div class="grid-menu">
+      <span
+        @click=${() => {
+            this.isDropdownVisible = true;
+        }}
+        @keyDown=${(e) => {
+            if (triggerKeys.includes(e.key)) {
+                this.isDropdownVisible = true;
+            }
+        }}
+        class="list list-dropdown"
+      >
+        <ix-icon-button icon="list"></ix-icon-button>
+        ${this.disabledColumns.length > 0
+            ? html `<div class="active"></div>`
+            : nothing}
+        ${this.isDropdownVisible
+            ? html ` <div class="dropdown-content">
+              ${(_a = this.columns) === null || _a === void 0 ? void 0 : _a.map((col, id) => html `<div
+                  class=${col.hidden ? 'disabled' : ''}
+                >
+                  <label class="ix-switch-label">
+                    <ix-switch
+                      .selected=${!col.hidden}
+                      @change=${(e) => this.updateColumn(e, id)}
+                    >
+                    </ix-switch>
+                    <p>${col.header}</p>
+                  </label>
+                </div>`)}
+            </div>`
+            : nothing}
+      </span>
+    </div>`;
+    }
+};
+IxGridColumnFilter.styles = [IxGridViewStyles, IxGridColumnFilterStyles];
+__decorate([
+    property({ type: Array })
+], IxGridColumnFilter.prototype, "columns", void 0);
+__decorate([
+    property({ type: String })
+], IxGridColumnFilter.prototype, "localStorageID", void 0);
+__decorate([
+    state()
+], IxGridColumnFilter.prototype, "isDropdownVisible", void 0);
+__decorate([
+    state()
+], IxGridColumnFilter.prototype, "disabledColumns", void 0);
+IxGridColumnFilter = __decorate([
+    customElement('ix-grid-column-filter')
+], IxGridColumnFilter);
+export { IxGridColumnFilter };
+//# sourceMappingURL=IxGridColumnFilter.js.map

package/dist/components/IxGridColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGridColumnFilter.js","sourceRoot":"","sources":["../../src/components/IxGridColumnFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport '@digital-realty/ix-switch/ix-switch.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\n\nconst triggerKeys = [' ', 'Enter'];\n\n@customElement('ix-grid-column-filter')\nexport class IxGridColumnFilter extends LitElement {\n  static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: String }) localStorageID: string | undefined = undefined;\n\n  @state() private isDropdownVisible: boolean = false;\n\n  @state() disabledColumns: string[] = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.outerInteraction);\n    this.initializeLocalStorage();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.outerInteraction);\n  }\n\n  outerInteraction = (e: Event) => {\n    if (!e.composedPath().includes(this)) {\n      this.isDropdownVisible = false;\n    }\n  };\n\n  initializeLocalStorage() {\n    if (this.localStorageID) {\n      const storedDisabledColumns = localStorage.getItem(this.localStorageID);\n\n      if (storedDisabledColumns) {\n        const disabledColumns = JSON.parse(storedDisabledColumns);\n        this.columns.forEach((column, id) => {\n          if (disabledColumns.includes(column.name)) {\n            this.columns[id].hidden = true;\n          }\n        });\n      }\n      this.dispatchUpdate();\n    }\n  }\n\n  toggleColumn(id: number) {\n    this.columns[id].hidden = !this.columns[id].hidden;\n\n    this.disabledColumns = this.columns\n      .filter((column: Column) => column.hidden)\n      .map((column: Column) => column.name);\n\n    if (this.localStorageID !== undefined) {\n      localStorage.setItem(\n        this.localStorageID,\n        JSON.stringify(this.disabledColumns)\n      );\n    }\n\n    this.dispatchUpdate();\n  }\n\n  updateColumn(e: Event, id: number) {\n    const input = e.target as HTMLElement;\n    const el = input.shadowRoot?.querySelector('input');\n\n    this.columns[id].hidden = !el?.checked;\n\n    this.disabledColumns = this.columns\n      .filter((column: Column) => column.hidden)\n      .map((column: Column) => column.name);\n\n    if (this.localStorageID !== undefined) {\n      localStorage.setItem(\n        this.localStorageID,\n        JSON.stringify(this.disabledColumns)\n      );\n    }\n\n    this.dispatchUpdate();\n  }\n\n  dispatchUpdate(columns = this.columns) {\n    this.dispatchEvent(\n      new CustomEvent('columnFilter', {\n        detail: {\n          columns,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    return html` <div class=\"grid-menu\">\n      <span\n        @click=${() => {\n          this.isDropdownVisible = true;\n        }}\n        @keyDown=${(e: KeyboardEvent) => {\n          if (triggerKeys.includes(e.key)) {\n            this.isDropdownVisible = true;\n          }\n        }}\n        class=\"list list-dropdown\"\n      >\n        <ix-icon-button icon=\"list\"></ix-icon-button>\n        ${this.disabledColumns.length > 0\n          ? html`<div class=\"active\"></div>`\n          : nothing}\n        ${this.isDropdownVisible\n          ? html` <div class=\"dropdown-content\">\n              ${this.columns?.map(\n                (col: Column, id: number) => html`<div\n                  class=${col.hidden ? 'disabled' : ''}\n                >\n                  <label class=\"ix-switch-label\">\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                  </label>\n                </div>`\n              )}\n            </div>`\n          : nothing}\n      </span>\n    </div>`;\n  }\n}\n"]}

package/dist/components/IxGridRowFilter.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import type { Column } from '../IxGrid.js';
+export interface Filter {
+    columnField: string;
+    operatorValue: string;
+    value: string;
+}
+export declare class IxGridRowFilter extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    columns: Column[];
+    private isDropdownVisible;
+    private filters;
+    private filterableColumns;
+    private filterColumns;
+    private activeFilters;
+    private mapSelect;
+    updateActiveFilters(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    get filterNames(): string[];
+    get unselectedFilters(): string[];
+    closeOnOuterClick: (e: Event) => void;
+    parseFilterQueryString(): Filter[];
+    dispatchUpdate(): void;
+    addFilter(): void;
+    clearFilters(): void;
+    removeFilter(index: number): void;
+    private onfilterColumnChange;
+    private onfilterValueChange;
+    renderToolTip(): string | import("lit").TemplateResult<1>;
+    renderFilterInput(value: Filter, index: number): import("lit").TemplateResult<1>;
+    renderDropdown(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}