@digital-realty/ix-grid 1.4.1-alpha.1 → 1.4.1-alpha.2

package/src/components/IxGridRowFilter.js

@@ -0,0 +1,441 @@
+import { __decorate } from "tslib";
+import '@digital-realty/ix-button/ix-button.js';
+import '@digital-realty/ix-date/ix-date.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-select/ix-select.js';
+import { formatDate } from 'date-fns';
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { copy } from '../ix-grid-copy.js';
+import { IxGridRowFilterStyles } from './grid-row-filter-styles.js';
+let IxGridRowFilter = class IxGridRowFilter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.filterValueChangeDebounceTime = 300;
+        this.readParamsFromURL = false;
+        this.maxDate = formatDate(new Date(), 'yyyy-MM-dd');
+        this.isDropdownVisible = false;
+        this.filters = [];
+        this.filterableColumns = [];
+        this.filterColumns = [];
+        this.activeFilters = [];
+        this.mapSelect = false;
+        this.fromDateErrorText = '';
+        this.oldValueLength = 0;
+        this.debouncedOnFilterValueChange = () => { };
+        this.closeOnOuterClick = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this.isDropdownVisible = false;
+            }
+        };
+        this.handlePopState = () => {
+            this.filters = this.parseFilterQueryString();
+            if (this.filters.length === 0) {
+                this.isDropdownVisible = false;
+                this.addFilter();
+            }
+            this.updateActiveFilters();
+        };
+    }
+    updateActiveFilters() {
+        this.activeFilters = this.filters.filter(filter => filter.value.length > 0);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.closeOnOuterClick);
+        window.addEventListener('popstate', this.handlePopState);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.closeOnOuterClick);
+        window.removeEventListener('popstate', this.handlePopState);
+    }
+    firstUpdated() {
+        this.filterableColumns = this.columns.filter(column => column.filterable);
+        this.filterColumns = this.filterableColumns.map(column => column.name);
+        if (this.readParamsFromURL) {
+            this.filters = this.parseFilterQueryString();
+        }
+        if (!this.filters.length) {
+            this.addFilter();
+        }
+        this.updateActiveFilters();
+        this.dispatchUpdate(false);
+        this.debouncedOnFilterValueChange = (index, target) => {
+            clearTimeout(this.debounceEvent);
+            this.debounceEvent = setTimeout(() => this.onfilterValueChange.bind(this)(index, target), this.filterValueChangeDebounceTime);
+        };
+    }
+    get filterNames() {
+        return this.filters.map(filter => filter.columnField);
+    }
+    get unselectedFilters() {
+        return this.filterColumns.filter(f => !this.filterNames.includes(f));
+    }
+    parseFilterQueryString() {
+        const params = new URLSearchParams(window.location.search);
+        const filters = [];
+        this.filterableColumns.forEach(fc => {
+            var _a;
+            (_a = fc.filterOperators) === null || _a === void 0 ? void 0 : _a.forEach(operator => {
+                var _a;
+                const key = `${fc.name}_${operator}`;
+                if (params.has(key)) {
+                    filters.push({
+                        columnField: fc.name,
+                        operatorValue: operator,
+                        dataType: fc.dataType,
+                        value: (_a = params.get(key)) !== null && _a !== void 0 ? _a : '',
+                    });
+                }
+            });
+        });
+        return filters;
+    }
+    dispatchUpdate(resetPage = true) {
+        this.dispatchEvent(new CustomEvent('rowFilter', {
+            detail: {
+                filters: this.filters.filter(filter => filter.value.length),
+                resetPage,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    addFilter() {
+        var _a, _b;
+        const nextFilter = this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
+            '';
+        const filterOperators = ((_a = this.filterableColumns.find(c => c.name === nextFilter)) === null || _a === void 0 ? void 0 : _a.filterOperators) || ['contains'];
+        const filterDataType = ((_b = this.filterableColumns.find(c => c.name === nextFilter)) === null || _b === void 0 ? void 0 : _b.dataType) ||
+            'string';
+        this.filters = [
+            ...this.filters,
+            {
+                columnField: nextFilter,
+                operatorValue: filterOperators[0],
+                dataType: filterDataType,
+                value: '',
+            },
+        ];
+        this.updateActiveFilters();
+    }
+    clearFilters() {
+        this.filters = [];
+        this.addFilter();
+        this.dispatchUpdate();
+    }
+    removeFilter(index) {
+        this.filters = this.filters.filter((_, i) => i !== index);
+        this.dispatchUpdate();
+        if (this.filters.length === 0) {
+            this.isDropdownVisible = false;
+            this.addFilter();
+        }
+        this.updateActiveFilters();
+    }
+    onfilterColumnChange(index, e) {
+        var _a;
+        const selectedValue = e.target.value;
+        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 = [...this.filters];
+        this.dispatchUpdate();
+    }
+    onfilterOperatorChange(index, e) {
+        const selectedValue = e.target.value;
+        this.filters[index].operatorValue = selectedValue;
+        this.filters = [...this.filters];
+        this.dispatchUpdate();
+    }
+    onDatefilterValueChange(index, value) {
+        this.filters[index].value = value;
+        this.dispatchUpdate();
+        this.updateActiveFilters();
+    }
+    onfilterValueChange(index, target) {
+        const { value } = target;
+        this.filters[index].value = value;
+        const newValueLength = this.filters[index].value.length;
+        if (this.filters[index].columnField.length > 0 &&
+            (newValueLength >= 3 || newValueLength < this.oldValueLength)) {
+            this.dispatchUpdate();
+        }
+        this.updateActiveFilters();
+        this.oldValueLength = newValueLength;
+    }
+    formatCamelCaseToEnglish(text) {
+        const spaced = text.replace(/([A-Z])/g, ' $1').toLowerCase();
+        const english = spaced.charAt(0).toUpperCase() + spaced.slice(1);
+        return english;
+    }
+    renderToolTip() {
+        if (this.isDropdownVisible) {
+            return copy.hideFilters;
+        }
+        if (!this.activeFilters.length) {
+            return copy.showFilters;
+        }
+        return html ` <p>${this.activeFilters.length} ${copy.activeFilter}</p>
+      <ul>
+        ${this.activeFilters.map(filter => html `<li>
+            ${this.formatCamelCaseToEnglish(filter.columnField)}
+            ${filter.operatorValue} ${filter.value}
+          </li>`)}
+      </ul>`;
+    }
+    renderStringInput(value, index) {
+        return html `<label class="form-group-operator-label">
+      <span>Value</span>
+      <input
+        data-testid=${`filterValueInput-${index}`}
+        placeholder="Filter value"
+        @input=${(e) => this.debouncedOnFilterValueChange(index, e.target)}
+        .value=${value.value}
+      />
+    </label>`;
+    }
+    renderDateInput(value, index) {
+        return html ` <ix-date
+      data-testid=${`filterValueInput-${index}`}
+      .value=${value.value}
+      max=${this.maxDate}
+      name="${value.columnField}-valueDate"
+      .errorText=${this.fromDateErrorText}
+      .onChanged=${e => this.onDatefilterValueChange(index, e)}
+    >
+    </ix-date>`;
+    }
+    renderFilterInputControl(value, index) {
+        switch (value.dataType) {
+            case 'string':
+            case undefined:
+                return this.renderStringInput(value, index);
+            case 'dateTime':
+                return this.renderDateInput(value, index);
+            default:
+                return nothing;
+        }
+    }
+    renderFilterInput(value, index) {
+        var _a, _b;
+        const options = [value.columnField, ...this.unselectedFilters];
+        const filterOptions = this.filterableColumns.filter(column => options.includes(column.name));
+        return html `
+      <div class="filter-form">
+        <div class="filter-remove filter-form-column">
+          <div class="form-group">
+            <ix-icon-button
+              icon="close"
+              data-testid="clearFilterButton"
+              @click=${() => this.removeFilter(index)}
+              @keyDown=${(e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.removeFilter(index);
+            }
+        }}
+            ></ix-icon-button>
+          </div>
+        </div>
+        ${this.mapSelect
+            ? html `<div
+              class="filter-form-column filter-form-column-border filterColumnField"
+            >
+              <div class="form-group">
+                <label
+                  class="form-group-column-label"
+                  title="select: ${value.columnField}, options: ${filterOptions.map(column => `value=${column.name}, selected=${column.name === value.columnField}, ${column.header}
+                `)}"
+                  >Columns</label
+                >
+
+                <select
+                  @change=${(e) => this.onfilterColumnChange(index, e)}
+                  .value=${value.columnField}
+                  data-v=${value.columnField}
+                >
+                  ${filterOptions.map(column => html `
+                      <option
+                        value=${column.name}
+                        ?selected=${column.name === value.columnField}
+                      >
+                        ${column.header}
+                      </option>
+                    `)}
+                </select>
+              </div>
+            </div>`
+            : nothing}
+
+        <div
+          class="filter-form-column filter-form-column-border filterColumnField"
+        >
+          <div class="filter-form-group">
+            <label
+              class="form-group-column-label"
+              title="select: ${value.columnField}, options: ${filterOptions.map(column => `value=${column.name}, selected=${column.name === value.columnField}, ${column.header}
+                `)}"
+              ><span>Columns</span>
+              <select
+                data-testid=${`filterColumnInput-${index}`}
+                @change=${(e) => this.onfilterColumnChange(index, e)}
+                .value=${value.columnField}
+                data-v=${value.columnField}
+              >
+                ${repeat(filterOptions, (column) => column.name, (column) => html `
+                    <option
+                      value=${column.name}
+                      ?selected=${column.name === value.columnField}
+                    >
+                      ${column.header}
+                    </option>
+                  `)}
+              </select>
+            </label>
+          </div>
+        </div>
+
+        <div
+          class="filter-form-column filter-form-column-border filterOperatorField"
+        >
+          <div class="filter-form-group">
+            <label class="form-group-operator-label"
+              ><span>Operator</span>
+              <select
+                data-testid=${`filterOperatorInput-${index}`}
+                class="filterOperatorInput"
+                @change=${(e) => this.onfilterOperatorChange(index, e)}
+                .value=${value.operatorValue}
+                data-v=${value.operatorValue}
+              >
+                ${repeat((_b = (_a = filterOptions.find(column => column.name === value.columnField)) === null || _a === void 0 ? void 0 : _a.filterOperators) !== null && _b !== void 0 ? _b : ['contains'], (filter) => html `
+                    <option
+                      value=${filter}
+                      ?selected=${filter === value.operatorValue}
+                    >
+                      ${filter}
+                    </option>
+                  `)}
+              </select>
+            </label>
+          </div>
+        </div>
+        <div
+          class="filter-form-column filter-form-column-border filterValueField"
+        >
+          <div class="filter-form-group">
+            ${this.renderFilterInputControl(value, index)}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderDropdown() {
+        const disableAddButton = this.filters.length >= this.filterColumns.length ||
+            this.activeFilters.length < this.filters.length;
+        return html ` <div class="filter-dropdown-content">
+      <div class="filter-body">
+        ${this.filters.map((filter, index) => this.renderFilterInput(filter, index))}
+      </div>
+      <div class="filter-footer">
+        <ix-button
+          data-testid="addFilterButton"
+          class="add-filter-button"
+          @click="${() => this.addFilter()}"
+          ?disabled=${disableAddButton}
+          appearance="text"
+        >
+          <ix-icon slot="icon">add</ix-icon>
+          Add filter
+        </ix-button>
+        <ix-button
+          data-testid="clearAllFiltersButton"
+          @click="${() => this.clearFilters()}"
+          ?disabled=${this.activeFilters.length === 0}
+          appearance="text"
+        >
+          Clear all
+        </ix-button>
+      </div>
+    </div>`;
+    }
+    render() {
+        return html ` <div class="grid-menu">
+      <div class="filter-container tooltip-container">
+        ${this.activeFilters.length > 0
+            ? html `<span class="filter-superscript"
+              >${this.activeFilters.length}</span
+            >`
+            : nothing}
+        <ix-button
+          data-testid="showFiltersButton"
+          appearance="text"
+          class="filter_list filter-button"
+          @click=${() => {
+            this.isDropdownVisible = !this.isDropdownVisible;
+        }}
+          @keyDown=${() => {
+            this.isDropdownVisible = !this.isDropdownVisible;
+        }}
+        >
+          <div class="slot-wrap">
+            <ix-icon appearance="default" class="filter-icon"
+              >filter_list</ix-icon
+            >
+            <span class="filter">${copy.filters}</span>
+          </div>
+        </ix-button>
+        <div class="tool-tip">${this.renderToolTip()}</div>
+        ${this.isDropdownVisible ? this.renderDropdown() : nothing}
+      </div>
+    </div>`;
+    }
+};
+IxGridRowFilter.styles = [IxGridViewStyles, IxGridRowFilterStyles];
+__decorate([
+    property({ type: Array })
+], IxGridRowFilter.prototype, "columns", void 0);
+__decorate([
+    property({ type: Number })
+], IxGridRowFilter.prototype, "filterValueChangeDebounceTime", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxGridRowFilter.prototype, "readParamsFromURL", void 0);
+__decorate([
+    property({ type: String })
+], IxGridRowFilter.prototype, "maxDate", void 0);
+__decorate([
+    state()
+], IxGridRowFilter.prototype, "isDropdownVisible", void 0);
+__decorate([
+    state()
+], IxGridRowFilter.prototype, "filters", void 0);
+__decorate([
+    state()
+], IxGridRowFilter.prototype, "filterableColumns", void 0);
+__decorate([
+    state()
+], IxGridRowFilter.prototype, "filterColumns", void 0);
+__decorate([
+    state()
+], IxGridRowFilter.prototype, "activeFilters", void 0);
+__decorate([
+    state()
+], IxGridRowFilter.prototype, "mapSelect", void 0);
+__decorate([
+    state()
+], IxGridRowFilter.prototype, "fromDateErrorText", void 0);
+__decorate([
+    state()
+], IxGridRowFilter.prototype, "oldValueLength", void 0);
+IxGridRowFilter = __decorate([
+    customElement('ix-grid-row-filter')
+], IxGridRowFilter);
+export { IxGridRowFilter };

package/src/components/IxGridRowFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGridRowFilter.js","sourceRoot":"","sources":["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';\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  @property({ type: String }) maxDate: string = formatDate(\n    new Date(),\n    'yyyy-MM-dd'\n  );\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 fromDateErrorText? = '';\n\n  @state() private oldValueLength: number = 0;\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    window.addEventListener('popstate', this.handlePopState);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.closeOnOuterClick);\n    window.removeEventListener('popstate', this.handlePopState);\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),\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    this.updateActiveFilters();\n  }\n\n  private handlePopState = () => {\n    this.filters = this.parseFilterQueryString();\n    if (this.filters.length === 0) {\n      this.isDropdownVisible = false;\n      this.addFilter();\n    }\n    this.updateActiveFilters();\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    this.dispatchUpdate();\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    this.dispatchUpdate();\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 { 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 < this.oldValueLength)\n    ) {\n      this.dispatchUpdate();\n    }\n    this.updateActiveFilters();\n    this.oldValueLength = newValueLength;\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        data-testid=${`filterValueInput-${index}`}\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      data-testid=${`filterValueInput-${index}`}\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              data-testid=\"clearFilterButton\"\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                data-testid=${`filterColumnInput-${index}`}\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                data-testid=${`filterOperatorInput-${index}`}\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          data-testid=\"addFilterButton\"\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          data-testid=\"clearAllFiltersButton\"\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          data-testid=\"showFiltersButton\"\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/src/components/IxPagination.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+export declare class IxPagination extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    recordCount: number;
+    page: number;
+    pageSize: number;
+    pageSizes: number[];
+    private changePage;
+    private handlePageSizeSelection;
+    updatePagination(page?: number, pageSize?: number): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/components/IxPagination.js

@@ -0,0 +1,107 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { PaginationStyles } from './pagination-styles.js';
+import { copy } from '../ix-grid-copy.js';
+let IxPagination = class IxPagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.recordCount = 0;
+        this.page = 1;
+        this.pageSize = 10;
+        this.pageSizes = [5, 10, 25, 100];
+    }
+    changePage(offset) {
+        this.page += offset;
+        this.updatePagination();
+    }
+    handlePageSizeSelection(e) {
+        const el = e.target;
+        const newPageSize = Number(el.value);
+        const currentFirstRecord = (this.page - 1) * this.pageSize + 1;
+        const newPageNum = Math.ceil(currentFirstRecord / newPageSize);
+        this.updatePagination(newPageNum, newPageSize);
+    }
+    updatePagination(page = this.page, pageSize = this.pageSize) {
+        this.dispatchEvent(new CustomEvent('updatePagination', {
+            detail: {
+                page,
+                pageSize,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const back = this.page > 1;
+        const next = this.recordCount > this.page * this.pageSize;
+        return html ` <div class="pagination">
+      <div>
+        <p class="rows-per-page">${copy.rowsPerPage}:</p>
+        <ix-select
+          wide-menu
+          menu-positioning="fixed"
+          class="pagination__select-input"
+          @request-selection=${this.handlePageSizeSelection}
+          selected-index=${this.pageSizes.indexOf(this.pageSize)}
+          filled
+        >
+          ${this.pageSizes.map(option => html `
+              <ix-select-option
+                class="select-option"
+                value=${option}
+                ?selected=${option === this.pageSize}
+              >
+                <div slot="headline">${option}</div>
+              </ix-select-option>
+            `)}
+        </ix-select>
+      </div>
+      <div>
+        <p>
+          ${this.recordCount > 0 ? (this.page - 1) * this.pageSize + 1 : 0} -
+          ${this.page * this.pageSize > this.recordCount
+            ? html `${this.recordCount}`
+            : html `${this.page * this.pageSize}`}
+          of ${this.recordCount > 0 ? this.recordCount : 0}
+        </p>
+        <div class="pagination-nav">
+          <ix-icon-button
+            ?disabled=${!back}
+            @click=${() => back && this.changePage(-1)}
+            icon="chevron_left"
+            data-testid="ix-pagination-prev"
+          >
+          </ix-icon-button>
+          <ix-icon-button
+            ?disabled=${!next}
+            @click=${() => next && this.changePage(+1)}
+            icon="chevron_right"
+            data-testid="ix-pagination-next"
+          >
+          </ix-icon-button>
+        </div>
+      </div>
+    </div>`;
+    }
+};
+IxPagination.styles = [IxGridViewStyles, PaginationStyles];
+__decorate([
+    property({ type: Number })
+], IxPagination.prototype, "recordCount", void 0);
+__decorate([
+    property({ type: Number })
+], IxPagination.prototype, "page", void 0);
+__decorate([
+    property({ type: Number })
+], IxPagination.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Array })
+], IxPagination.prototype, "pageSizes", void 0);
+IxPagination = __decorate([
+    customElement('ix-pagination')
+], IxPagination);
+export { IxPagination };

package/src/components/IxPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxPagination.js","sourceRoot":"","sources":["IxPagination.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,wCAAwC,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAGnC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAGuB,gBAAW,GAAG,CAAC,CAAC;QAEhB,SAAI,GAAG,CAAC,CAAC;QAET,aAAQ,GAAG,EAAE,CAAC;QAEf,cAAS,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAoFpE,CAAC;IAlFS,UAAU,CAAC,MAAc;QAC/B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,uBAAuB,CAAC,CAAQ;QACtC,MAAM,EAAE,GAAG,CAAC,CAAC,MAA0B,CAAC;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAErC,MAAM,kBAAkB,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,GAAG,WAAW,CAAC,CAAC;QAE/D,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IACjD,CAAC;IAED,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ;QACzD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ;aACT;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1D,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,WAAW;;;;;+BAKpB,IAAI,CAAC,uBAAuB;2BAChC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;;;YAGpD,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;;wBAGF,MAAM;4BACF,MAAM,KAAK,IAAI,CAAC,QAAQ;;uCAEb,MAAM;;aAEhC,CACF;;;;;YAKC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW;YAC5C,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;YAC3B,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE;eACjC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;;;wBAIlC,CAAC,IAAI;qBACR,GAAG,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;;;;;;wBAM9B,CAAC,IAAI;qBACR,GAAG,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;;;;;;;WAO3C,CAAC;IACV,CAAC;;AA3Fe,mBAAM,GAAG,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AAEf;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAwC;AATvD,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA6FxB;SA7FY,YAAY","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { PaginationStyles } from './pagination-styles.js';\nimport { copy } from '../ix-grid-copy.js';\n\n@customElement('ix-pagination')\nexport class IxPagination extends LitElement {\n  static readonly styles = [IxGridViewStyles, PaginationStyles];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  private changePage(offset: number) {\n    this.page += offset;\n    this.updatePagination();\n  }\n\n  private handlePageSizeSelection(e: Event) {\n    const el = e.target as HTMLInputElement;\n    const newPageSize = Number(el.value);\n\n    const currentFirstRecord = (this.page - 1) * this.pageSize + 1;\n    const newPageNum = Math.ceil(currentFirstRecord / newPageSize);\n\n    this.updatePagination(newPageNum, newPageSize);\n  }\n\n  updatePagination(page = this.page, pageSize = this.pageSize) {\n    this.dispatchEvent(\n      new CustomEvent('updatePagination', {\n        detail: {\n          page,\n          pageSize,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    const back = this.page > 1;\n    const next = this.recordCount > this.page * this.pageSize;\n    return html` <div class=\"pagination\">\n      <div>\n        <p class=\"rows-per-page\">${copy.rowsPerPage}:</p>\n        <ix-select\n          wide-menu\n          menu-positioning=\"fixed\"\n          class=\"pagination__select-input\"\n          @request-selection=${this.handlePageSizeSelection}\n          selected-index=${this.pageSizes.indexOf(this.pageSize)}\n          filled\n        >\n          ${this.pageSizes.map(\n            option => html`\n              <ix-select-option\n                class=\"select-option\"\n                value=${option}\n                ?selected=${option === this.pageSize}\n              >\n                <div slot=\"headline\">${option}</div>\n              </ix-select-option>\n            `\n          )}\n        </ix-select>\n      </div>\n      <div>\n        <p>\n          ${this.recordCount > 0 ? (this.page - 1) * this.pageSize + 1 : 0} -\n          ${this.page * this.pageSize > this.recordCount\n            ? html`${this.recordCount}`\n            : html`${this.page * this.pageSize}`}\n          of ${this.recordCount > 0 ? this.recordCount : 0}\n        </p>\n        <div class=\"pagination-nav\">\n          <ix-icon-button\n            ?disabled=${!back}\n            @click=${() => back && this.changePage(-1)}\n            icon=\"chevron_left\"\n            data-testid=\"ix-pagination-prev\"\n          >\n          </ix-icon-button>\n          <ix-icon-button\n            ?disabled=${!next}\n            @click=${() => next && this.changePage(+1)}\n            icon=\"chevron_right\"\n            data-testid=\"ix-pagination-next\"\n          >\n          </ix-icon-button>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n"]}

package/src/components/grid-column-filter-styles.d.ts

@@ -0,0 +1 @@
+export declare const IxGridColumnFilterStyles: import("lit").CSSResult;