@digital-realty/ix-grid 1.3.18 → 1.3.26

package/src/components/IxGridRowFilter.js

@@ -1,441 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,14 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"IxPagination.js","sourceRoot":"","sources":["IxPagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { PaginationStyles } from './pagination-styles.js';\nimport { copy } from '../ix-grid-copy.js';\n\n@customElement('ix-pagination')\nexport class IxPagination extends LitElement {\n  static readonly styles = [IxGridViewStyles, PaginationStyles];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  private changePage(offset: number) {\n    this.page += offset;\n    this.updatePagination();\n  }\n\n  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

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