@digital-realty/ix-grid 1.2.7 → 1.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/components/IxGridRowFilter.d.ts +1 -0
  2. package/dist/components/IxGridRowFilter.js +11 -11
  3. package/dist/components/IxGridRowFilter.js.map +1 -1
  4. package/dist/components/grid-column-filter-styles.js +1 -1
  5. package/dist/components/grid-column-filter-styles.js.map +1 -1
  6. package/dist/components/grid-row-filter-styles.js +1 -1
  7. package/dist/components/grid-row-filter-styles.js.map +1 -1
  8. package/dist/grid-view-styles.js +2 -2
  9. package/dist/grid-view-styles.js.map +1 -1
  10. package/dist/ix-grid.min.js +2 -2
  11. package/package.json +4 -3
  12. package/src/components/IxGridRowFilter.ts +9 -11
  13. package/src/components/grid-column-filter-styles.ts +1 -1
  14. package/src/components/grid-row-filter-styles.ts +1 -1
  15. package/src/grid-view-styles.ts +2 -2
  16. package/web-test-runner.config.mjs +8 -2
package/dist/components/IxGridRowFilter.d.ts CHANGED
@@ -24,6 +24,7 @@ export declare class IxGridRowFilter extends LitElement {
24
24
  private mapSelect;
25
25
  private maxDate;
26
26
  private fromDateErrorText?;
27
+ private oldValueLength;
27
28
  private debounceEvent;
28
29
  private debouncedOnFilterValueChange;
29
30
  updateActiveFilters(): void;
package/dist/components/IxGridRowFilter.js CHANGED
@@ -4,7 +4,7 @@ import '@digital-realty/ix-date/ix-date.js';
4
4
  import '@digital-realty/ix-icon-button/ix-icon-button.js';
5
5
  import '@digital-realty/ix-icon/ix-icon.js';
6
6
  import '@digital-realty/ix-select/ix-select.js';
7
- import { formatDate } from 'date-fns/format.js';
7
+ import { format } from 'date-fns/format.js';
8
8
  import { LitElement, html, nothing } from 'lit';
9
9
  import { customElement, property, state } from 'lit/decorators.js';
10
10
  import { repeat } from 'lit/directives/repeat.js';
@@ -23,8 +23,9 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
23
23
  this.filterColumns = [];
24
24
  this.activeFilters = [];
25
25
  this.mapSelect = false;
26
- this.maxDate = formatDate(new Date(), 'yyyy-MM-dd');
26
+ this.maxDate = format(new Date(), 'yyyy-MM-dd');
27
27
  this.fromDateErrorText = '';
28
+ this.oldValueLength = 0;
28
29
  this.debouncedOnFilterValueChange = () => { };
29
30
  this.closeOnOuterClick = (e) => {
30
31
  if (!e.composedPath().includes(this)) {
@@ -88,7 +89,7 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
88
89
  dispatchUpdate(resetPage = true) {
89
90
  this.dispatchEvent(new CustomEvent('rowFilter', {
90
91
  detail: {
91
- filters: this.filters.filter(filter => filter.value.length >= 3),
92
+ filters: this.filters.filter(filter => filter.value.length),
92
93
  resetPage,
93
94
  },
94
95
  bubbles: true,
@@ -136,17 +137,13 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
136
137
  this.filters[index].operatorValue =
137
138
  ((_a = selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.filterOperators) === null || _a === void 0 ? void 0 : _a[0]) || 'contains';
138
139
  this.filters = [...this.filters];
139
- if (this.filters[index].value.length >= 3) {
140
- this.dispatchUpdate();
141
- }
140
+ this.dispatchUpdate();
142
141
  }
143
142
  onfilterOperatorChange(index, e) {
144
143
  const selectedValue = e.target.value;
145
144
  this.filters[index].operatorValue = selectedValue;
146
145
  this.filters = [...this.filters];
147
- if (this.filters[index].value.length >= 3) {
148
- this.dispatchUpdate();
149
- }
146
+ this.dispatchUpdate();
150
147
  }
151
148
  onDatefilterValueChange(index, value) {
152
149
  this.filters[index].value = value;
@@ -154,15 +151,15 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
154
151
  this.updateActiveFilters();
155
152
  }
156
153
  onfilterValueChange(index, target) {
157
- const oldValueLength = this.filters[index].value.length;
158
154
  const { value } = target;
159
155
  this.filters[index].value = value;
160
156
  const newValueLength = this.filters[index].value.length;
161
157
  if (this.filters[index].columnField.length > 0 &&
162
- (newValueLength >= 3 || newValueLength < oldValueLength)) {
158
+ (newValueLength >= 3 || newValueLength < this.oldValueLength)) {
163
159
  this.dispatchUpdate();
164
160
  }
165
161
  this.updateActiveFilters();
162
+ this.oldValueLength = newValueLength;
166
163
  }
167
164
  formatCamelCaseToEnglish(text) {
168
165
  const spaced = text.replace(/([A-Z])/g, ' $1').toLowerCase();
@@ -425,6 +422,9 @@ __decorate([
425
422
  __decorate([
426
423
  state()
427
424
  ], IxGridRowFilter.prototype, "fromDateErrorText", void 0);
425
+ __decorate([
426
+ state()
427
+ ], IxGridRowFilter.prototype, "oldValueLength", void 0);
428
428
  IxGridRowFilter = __decorate([
429
429
  customElement('ix-grid-row-filter')
430
430
  ], IxGridRowFilter);
package/dist/components/IxGridRowFilter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IxGridRowFilter.js","sourceRoot":"","sources":["../../src/components/IxGridRowFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { formatDate } from 'date-fns/format.js';\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { Column, DataType, FilterOperator } from '../IxGrid.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { copy } from '../ix-grid-copy.js';\nimport { IxGridRowFilterStyles } from './grid-row-filter-styles.js';\n\nexport interface Filter {\n columnField: string;\n operatorValue: string;\n dataType?: DataType;\n value: string;\n}\n\n@customElement('ix-grid-row-filter')\nexport class IxGridRowFilter extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridRowFilterStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: Number }) filterValueChangeDebounceTime: number = 300;\n\n @property({ type: Boolean }) readParamsFromURL = false;\n\n @state() private isDropdownVisible: boolean = false;\n\n @state() private filters: Filter[] = [];\n\n @state() private filterableColumns: Column[] = [];\n\n @state() private filterColumns: string[] = [];\n\n @state() private activeFilters: Filter[] = [];\n\n @state() private mapSelect: boolean = false;\n\n @state() private maxDate = formatDate(new Date(), 'yyyy-MM-dd');\n\n @state() private fromDateErrorText? = '';\n\n private debounceEvent: ReturnType<typeof setTimeout> | undefined;\n\n private debouncedOnFilterValueChange: (\n index: number,\n target: EventTarget\n ) => void = () => {};\n\n updateActiveFilters() {\n this.activeFilters = this.filters.filter(filter => filter.value.length > 0);\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this.closeOnOuterClick);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.closeOnOuterClick);\n }\n\n firstUpdated() {\n this.filterableColumns = this.columns.filter(column => column.filterable);\n this.filterColumns = this.filterableColumns.map(column => column.name);\n\n if (this.readParamsFromURL) {\n this.filters = this.parseFilterQueryString();\n }\n\n if (!this.filters.length) {\n this.addFilter();\n }\n\n this.updateActiveFilters();\n this.dispatchUpdate(false);\n this.debouncedOnFilterValueChange = (index, target) => {\n clearTimeout(this.debounceEvent);\n this.debounceEvent = setTimeout(\n () => this.onfilterValueChange.bind(this)(index, target),\n this.filterValueChangeDebounceTime\n );\n };\n }\n\n get filterNames() {\n return this.filters.map(filter => filter.columnField);\n }\n\n get unselectedFilters() {\n return this.filterColumns.filter(f => !this.filterNames.includes(f));\n }\n\n closeOnOuterClick = (e: Event) => {\n if (!e.composedPath().includes(this)) {\n this.isDropdownVisible = false;\n }\n };\n\n parseFilterQueryString(): Filter[] {\n const params = new URLSearchParams(window.location.search);\n const filters: Filter[] = [];\n\n this.filterableColumns.forEach(fc => {\n fc.filterOperators?.forEach(operator => {\n const key = `${fc.name}_${operator}`;\n\n if (params.has(key)) {\n filters.push({\n columnField: fc.name,\n operatorValue: operator,\n dataType: fc.dataType,\n value: params.get(key) ?? '',\n });\n }\n });\n });\n\n return filters;\n }\n\n dispatchUpdate(resetPage = true) {\n this.dispatchEvent(\n new CustomEvent('rowFilter', {\n detail: {\n filters: this.filters.filter(filter => filter.value.length >= 3),\n resetPage,\n },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n addFilter() {\n const nextFilter =\n this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||\n '';\n const filterOperators = this.filterableColumns.find(\n c => c.name === nextFilter\n )?.filterOperators || ['contains'];\n\n const filterDataType =\n this.filterableColumns.find(c => c.name === nextFilter)?.dataType ||\n 'string';\n\n this.filters = [\n ...this.filters,\n {\n columnField: nextFilter,\n operatorValue: filterOperators[0],\n dataType: filterDataType,\n value: '',\n },\n ];\n this.updateActiveFilters();\n }\n\n clearFilters() {\n this.filters = [];\n this.addFilter();\n this.dispatchUpdate();\n }\n\n removeFilter(index: number) {\n this.filters = this.filters.filter((_, i) => i !== index);\n this.dispatchUpdate();\n if (this.filters.length === 0) {\n this.isDropdownVisible = false;\n this.addFilter();\n }\n\n 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 if (this.filters[index].value.length >= 3) {\n this.dispatchUpdate();\n }\n }\n\n private onfilterOperatorChange(index: number, e: Event) {\n const selectedValue = (e.target as HTMLSelectElement).value;\n this.filters[index].operatorValue = selectedValue;\n\n this.filters = [...this.filters];\n\n if (this.filters[index].value.length >= 3) {\n this.dispatchUpdate();\n }\n }\n\n private onDatefilterValueChange(index: number, value: string) {\n this.filters[index].value = value;\n this.dispatchUpdate();\n this.updateActiveFilters();\n }\n\n private onfilterValueChange(index: number, target: EventTarget) {\n const oldValueLength = this.filters[index].value.length;\n const { value } = target as HTMLInputElement;\n this.filters[index].value = value;\n\n const newValueLength = this.filters[index].value.length;\n if (\n this.filters[index].columnField.length > 0 &&\n (newValueLength >= 3 || newValueLength < oldValueLength)\n ) {\n this.dispatchUpdate();\n }\n this.updateActiveFilters();\n }\n\n formatCamelCaseToEnglish(text: string) {\n const spaced = text.replace(/([A-Z])/g, ' $1').toLowerCase();\n const english = spaced.charAt(0).toUpperCase() + spaced.slice(1);\n return english;\n }\n\n renderToolTip() {\n if (this.isDropdownVisible) {\n return copy.hideFilters;\n }\n if (!this.activeFilters.length) {\n return copy.showFilters;\n }\n return html` <p>${this.activeFilters.length} ${copy.activeFilter}</p>\n <ul>\n ${this.activeFilters.map(\n filter => html`<li>\n ${this.formatCamelCaseToEnglish(filter.columnField)}\n ${filter.operatorValue} ${filter.value}\n </li>`\n )}\n </ul>`;\n }\n\n private renderStringInput(value: any, index: number) {\n return html`<label class=\"form-group-operator-label\">\n <span>Value</span>\n <input\n 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"]}
1
+ {"version":3,"file":"IxGridRowFilter.js","sourceRoot":"","sources":["../../src/components/IxGridRowFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-button/ix-button.js';\nimport '@digital-realty/ix-date/ix-date.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { format } from 'date-fns/format.js';\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { Column, DataType, FilterOperator } from '../IxGrid.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { copy } from '../ix-grid-copy.js';\nimport { IxGridRowFilterStyles } from './grid-row-filter-styles.js';\n\nexport interface Filter {\n columnField: string;\n operatorValue: string;\n dataType?: DataType;\n value: string;\n}\n\n@customElement('ix-grid-row-filter')\nexport class IxGridRowFilter extends LitElement {\n static readonly styles = [IxGridViewStyles, IxGridRowFilterStyles];\n\n @property({ type: Array }) columns: Column[] = [];\n\n @property({ type: Number }) filterValueChangeDebounceTime: number = 300;\n\n @property({ type: Boolean }) readParamsFromURL = false;\n\n @state() private isDropdownVisible: boolean = false;\n\n @state() private filters: Filter[] = [];\n\n @state() private filterableColumns: Column[] = [];\n\n @state() private filterColumns: string[] = [];\n\n @state() private activeFilters: Filter[] = [];\n\n @state() private mapSelect: boolean = false;\n\n @state() private maxDate = format(new Date(), 'yyyy-MM-dd');\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 }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this.closeOnOuterClick);\n }\n\n firstUpdated() {\n this.filterableColumns = this.columns.filter(column => column.filterable);\n this.filterColumns = this.filterableColumns.map(column => column.name);\n\n if (this.readParamsFromURL) {\n this.filters = this.parseFilterQueryString();\n }\n\n if (!this.filters.length) {\n this.addFilter();\n }\n\n this.updateActiveFilters();\n this.dispatchUpdate(false);\n this.debouncedOnFilterValueChange = (index, target) => {\n clearTimeout(this.debounceEvent);\n this.debounceEvent = setTimeout(\n () => this.onfilterValueChange.bind(this)(index, target),\n this.filterValueChangeDebounceTime\n );\n };\n }\n\n get filterNames() {\n return this.filters.map(filter => filter.columnField);\n }\n\n get unselectedFilters() {\n return this.filterColumns.filter(f => !this.filterNames.includes(f));\n }\n\n closeOnOuterClick = (e: Event) => {\n if (!e.composedPath().includes(this)) {\n this.isDropdownVisible = false;\n }\n };\n\n parseFilterQueryString(): Filter[] {\n const params = new URLSearchParams(window.location.search);\n const filters: Filter[] = [];\n\n this.filterableColumns.forEach(fc => {\n fc.filterOperators?.forEach(operator => {\n const key = `${fc.name}_${operator}`;\n\n if (params.has(key)) {\n filters.push({\n columnField: fc.name,\n operatorValue: operator,\n dataType: fc.dataType,\n value: params.get(key) ?? '',\n });\n }\n });\n });\n\n return filters;\n }\n\n dispatchUpdate(resetPage = true) {\n this.dispatchEvent(\n new CustomEvent('rowFilter', {\n detail: {\n filters: this.filters.filter(filter => filter.value.length),\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 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/dist/components/grid-column-filter-styles.js CHANGED
@@ -85,6 +85,6 @@ export const IxGridColumnFilterStyles = css `
85
85
  .dropdown-content {
86
86
  left: 0;
87
87
  }
88
- }
88
+ }
89
89
  `;
90
90
  //# sourceMappingURL=grid-column-filter-styles.js.map
package/dist/components/grid-column-filter-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid-column-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-column-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuF1C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridColumnFilterStyles = css`\n .dropdown-content {\n position: absolute;\n background-color: var(--clr-surface-container-lowest, #fff);\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 9;\n -webkit-box-align: center;\n align-items: center;\n cursor: pointer;\n vertical-align: middle;\n -webkit-tap-highlight-color: transparent;\n padding: 10px;\n width: 247px;\n left: -100px;\n border-radius: 16px;\n }\n\n .dropdown-content > div {\n margin: 0px;\n color: var(--clr-on-surface, #092241);\n font-family: var(--text-small-font, sans-serif);\n font-size: var(--text-small-size, 0.875rem);\n letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n line-height: var(--text-small-line-height, 1.42857143em);\n font-weight: var(--text-small-weight, normal);\n text-decoration: var(--text-small-decoration, none);\n text-transform: var(--text-small-transform, none);\n display: block;\n cursor: pointer;\n }\n\n .dropdown-content span:hover {\n background-color: #f1f1f1;\n }\n\n .dropdown-content label {\n display: flex;\n align-items: center;\n }\n\n .dropdown-content label.dragOrigin {\n background: #ff000017;\n outline: 1px #ff9d9d dashed;\n }\n\n .dropdown-content label p {\n width: 158px;\n }\n\n .dropdown-content label .draggable {\n font-size: 24px;\n cursor: move; /* fallback if grab cursor is unsupported */\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n }\n\n .dropdown-content label .draggable path {\n fill: var(--clr-primary, #1456e0);\n }\n\n .active {\n position: absolute;\n right: 0;\n top: 0;\n height: 8px;\n width: 8px;\n background-color: var(--clr-critical, #db0028);\n border-radius: 50%;\n }\n\n ix-switch {\n padding: 0 0 0 6px;\n display: flex;\n width: 48px;\n }\n\n .list {\n position: relative;\n }\n\n @media only screen and (max-width: 840px) {\n .dropdown-content {\n left: 0;\n }\n } \n`;\n"]}
1
+ {"version":3,"file":"grid-column-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-column-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuF1C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridColumnFilterStyles = css`\n .dropdown-content {\n position: absolute;\n background-color: var(--clr-surface-container-lowest, #fff);\n min-width: 160px;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 9;\n -webkit-box-align: center;\n align-items: center;\n cursor: pointer;\n vertical-align: middle;\n -webkit-tap-highlight-color: transparent;\n padding: 10px;\n width: 247px;\n left: -100px;\n border-radius: 16px;\n }\n\n .dropdown-content > div {\n margin: 0px;\n color: var(--clr-on-surface, #092241);\n font-family: var(--text-small-font, sans-serif);\n font-size: var(--text-small-size, 0.875rem);\n letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n line-height: var(--text-small-line-height, 1.42857143em);\n font-weight: var(--text-small-weight, normal);\n text-decoration: var(--text-small-decoration, none);\n text-transform: var(--text-small-transform, none);\n display: block;\n cursor: pointer;\n }\n\n .dropdown-content span:hover {\n background-color: #f1f1f1;\n }\n\n .dropdown-content label {\n display: flex;\n align-items: center;\n }\n\n .dropdown-content label.dragOrigin {\n background: #ff000017;\n outline: 1px #ff9d9d dashed;\n }\n\n .dropdown-content label p {\n width: 158px;\n }\n\n .dropdown-content label .draggable {\n font-size: 24px;\n cursor: move; /* fallback if grab cursor is unsupported */\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab;\n }\n\n .dropdown-content label .draggable path {\n fill: var(--clr-primary, #1456e0);\n }\n\n .active {\n position: absolute;\n right: 0;\n top: 0;\n height: 8px;\n width: 8px;\n background-color: var(--clr-critical, #db0028);\n border-radius: 50%;\n }\n\n ix-switch {\n padding: 0 0 0 6px;\n display: flex;\n width: 48px;\n }\n\n .list {\n position: relative;\n }\n\n @media only screen and (max-width: 840px) {\n .dropdown-content {\n left: 0;\n }\n }\n`;\n"]}
package/dist/components/grid-row-filter-styles.js CHANGED
@@ -296,6 +296,6 @@ export const IxGridRowFilterStyles = css `
296
296
  right: inherit;
297
297
  top: 0;
298
298
  }
299
- }
299
+ }
300
300
  `;
301
301
  //# sourceMappingURL=grid-row-filter-styles.js.map
package/dist/components/grid-row-filter-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid-row-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-row-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0SvC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridRowFilterStyles = css`\n .slot-wrap {\n display: flex;\n }\n\n .slot-wrap ix-icon {\n --ix-icon-font-size: 24px;\n color: var(--clr-primary, #1456e0);\n margin-right: 5px;\n }\n\n .grid-menu ix-button .filter {\n margin-top: 2px;\n }\n\n .filter-form {\n white-space: nowrap;\n padding: 9px;\n color: var(--clr-on-surface-variant, #092241b3);\n }\n\n .filter-form-column {\n display: inline-block;\n vertical-align: middle;\n }\n\n .filter-remove span {\n margin-right: 0px;\n color: var(--clr-on-surface-variant, #092241b3);\n }\n\n .filter-dropdown-content {\n position: absolute;\n display: inline;\n right: 0;\n top: 78%;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 3;\n transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n border-radius: 12px;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n background-color: #ffffff;\n z-index: 10;\n }\n\n .filter-form input,\n .filter-form select,\n .filter-form option {\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n border-radius: 0px;\n cursor: pointer;\n box-sizing: content-box;\n background: none;\n height: 1.4375em;\n margin: 0px;\n animation-name: mui-auto-fill-cancel;\n animation-duration: 10ms;\n border: none;\n border-image: initial;\n box-sizing: border-box;\n cursor: text;\n user-select: none;\n color: currentcolor;\n -webkit-tap-highlight-color: transparent;\n display: block;\n min-width: 0px;\n width: 100%;\n height: 25px;\n border-bottom: 1px solid black;\n }\n\n .filter-form option {\n -webkit-tap-highlight-color: #9ca6b2;\n }\n\n .filter-form input:hover,\n .filter-form select:hover {\n outline: none !important;\n border-bottom: 2px solid black;\n }\n\n .filter-form input:focus,\n .filter-form select:focus {\n outline: none !important;\n border-bottom: 2px solid #1456e0;\n }\n\n .filter-form select:focus {\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n align-items: baseline;\n height: 54px;\n justify-content: flex-end;\n font-family: var(--text-default-font, sans-serif);\n }\n\n .form-group label {\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n padding: 0px;\n color: #092241;\n display: block;\n transform-origin: left top;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 133%;\n transform: translate(0px, -1.5px) scale(0.75);\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n }\n\n .filter-form-group label span {\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n padding: 0px;\n color: #092241;\n display: block;\n transform-origin: left top;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 133%;\n transform: translate(0px, -1.5px) scale(0.75);\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n }\n\n .filter-form-group label:focus-within span {\n color: #1456e0;\n }\n\n .filter-form-group {\n display: flex;\n flex-direction: column;\n align-items: baseline;\n height: 54px;\n justify-content: flex-end;\n font-family: var(--text-default-font, sans-serif);\n }\n\n option {\n font-weight: normal;\n display: block;\n min-height: 1.2em;\n padding: 0px 2px 1px;\n white-space: nowrap;\n }\n\n .filter-footer {\n padding: 9px;\n display: flex;\n justify-content: space-between;\n }\n\n .no-display {\n display: none;\n }\n\n .filter-local-operator-empty {\n width: 54px;\n border: none;\n }\n\n .grid-menu span.filter-superscript {\n position: absolute;\n top: 6px;\n left: 14px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--text-caption-font, sans-serif);\n font-size: var(--text-caption-size, 0.75rem);\n letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n line-height: var(--text-caption-line-height, 1.33333333em);\n font-weight: var(--text-caption-weight, normal);\n text-transform: var(--text-caption-transform, none);\n text-decoration: var(--text-caption-decoration, none);\n padding: 0;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background-color: var(--clr-primary, #1456e0);\n color: var(--clr-on-primary, #fff);\n }\n\n .filterlist {\n width: 40px;\n }\n\n .filterColumnField {\n width: 150px;\n }\n\n .filterValueField {\n width: 190px;\n }\n\n .filterOperatorField {\n width: 120px;\n }\n\n .form-group-operator-label {\n width: 100%;\n }\n\n .filter-form .filterOperatorInput {\n min-width: 96px;\n }\n\n select:hover {\n cursor: pointer;\n }\n\n input:hover {\n cursor: text;\n }\n\n .tooltip-container {\n position: relative;\n display: inline-block;\n }\n\n .tool-tip {\n color: var(--clr-on-secondary, #fff);\n overflow-wrap: break-word;\n border-radius: 3px;\n background-color: var(--clr-secondary, #071454);\n padding: 5px 8px;\n font-family: var(--text-caption-font, sans-serif);\n font-size: var(--text-caption-size, 0.75rem);\n letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n line-height: var(--text-caption-line-height, 1.33333333em);\n font-weight: var(--text-caption-weight, normal);\n text-transform: var(--text-caption-transform, none);\n text-decoration: var(--text-caption-decoration, none);\n\n position: absolute;\n top: 42px;\n right: 0;\n z-index: 3;\n white-space: nowrap;\n display: none;\n }\n\n .filter-button:hover ~ .tool-tip {\n display: block;\n }\n\n .tool-tip li {\n margin-left: -21px;\n overflow-wrap: break-word;\n border-radius: 3px;\n max-width: 250px;\n min-width: 200px;\n white-space: wrap;\n }\n\n .tool-tip p {\n margin: 0;\n padding: 0;\n }\n\n .grid-menu ix-button {\n align-items: center;\n display: flex;\n }\n\n @media only screen and (max-width: 840px) {\n .filter-dropdown-content {\n right: inherit;\n top: 0;\n }\n } \n`;\n"]}
1
+ {"version":3,"file":"grid-row-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-row-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0SvC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridRowFilterStyles = css`\n .slot-wrap {\n display: flex;\n }\n\n .slot-wrap ix-icon {\n --ix-icon-font-size: 24px;\n color: var(--clr-primary, #1456e0);\n margin-right: 5px;\n }\n\n .grid-menu ix-button .filter {\n margin-top: 2px;\n }\n\n .filter-form {\n white-space: nowrap;\n padding: 9px;\n color: var(--clr-on-surface-variant, #092241b3);\n }\n\n .filter-form-column {\n display: inline-block;\n vertical-align: middle;\n }\n\n .filter-remove span {\n margin-right: 0px;\n color: var(--clr-on-surface-variant, #092241b3);\n }\n\n .filter-dropdown-content {\n position: absolute;\n display: inline;\n right: 0;\n top: 78%;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 3;\n transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n border-radius: 12px;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n background-color: #ffffff;\n z-index: 10;\n }\n\n .filter-form input,\n .filter-form select,\n .filter-form option {\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n border-radius: 0px;\n cursor: pointer;\n box-sizing: content-box;\n background: none;\n height: 1.4375em;\n margin: 0px;\n animation-name: mui-auto-fill-cancel;\n animation-duration: 10ms;\n border: none;\n border-image: initial;\n box-sizing: border-box;\n cursor: text;\n user-select: none;\n color: currentcolor;\n -webkit-tap-highlight-color: transparent;\n display: block;\n min-width: 0px;\n width: 100%;\n height: 25px;\n border-bottom: 1px solid black;\n }\n\n .filter-form option {\n -webkit-tap-highlight-color: #9ca6b2;\n }\n\n .filter-form input:hover,\n .filter-form select:hover {\n outline: none !important;\n border-bottom: 2px solid black;\n }\n\n .filter-form input:focus,\n .filter-form select:focus {\n outline: none !important;\n border-bottom: 2px solid #1456e0;\n }\n\n .filter-form select:focus {\n background-color: rgba(0, 0, 0, 0.05);\n }\n\n .form-group {\n display: flex;\n flex-direction: column;\n align-items: baseline;\n height: 54px;\n justify-content: flex-end;\n font-family: var(--text-default-font, sans-serif);\n }\n\n .form-group label {\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n padding: 0px;\n color: #092241;\n display: block;\n transform-origin: left top;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 133%;\n transform: translate(0px, -1.5px) scale(0.75);\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n }\n\n .filter-form-group label span {\n font-family: var(--text-default-font, sans-serif);\n font-size: var(--text-default-size, 16px);\n letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n line-height: var(--text-default-line-height, 1.75em);\n font-weight: var(--text-default-weight, normal);\n text-transform: var(--text-default-decoration, none);\n text-decoration: var(--text-default-transform, none);\n padding: 0px;\n color: #092241;\n display: block;\n transform-origin: left top;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 133%;\n transform: translate(0px, -1.5px) scale(0.75);\n transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n }\n\n .filter-form-group label:focus-within span {\n color: #1456e0;\n }\n\n .filter-form-group {\n display: flex;\n flex-direction: column;\n align-items: baseline;\n height: 54px;\n justify-content: flex-end;\n font-family: var(--text-default-font, sans-serif);\n }\n\n option {\n font-weight: normal;\n display: block;\n min-height: 1.2em;\n padding: 0px 2px 1px;\n white-space: nowrap;\n }\n\n .filter-footer {\n padding: 9px;\n display: flex;\n justify-content: space-between;\n }\n\n .no-display {\n display: none;\n }\n\n .filter-local-operator-empty {\n width: 54px;\n border: none;\n }\n\n .grid-menu span.filter-superscript {\n position: absolute;\n top: 6px;\n left: 14px;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--text-caption-font, sans-serif);\n font-size: var(--text-caption-size, 0.75rem);\n letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n line-height: var(--text-caption-line-height, 1.33333333em);\n font-weight: var(--text-caption-weight, normal);\n text-transform: var(--text-caption-transform, none);\n text-decoration: var(--text-caption-decoration, none);\n padding: 0;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background-color: var(--clr-primary, #1456e0);\n color: var(--clr-on-primary, #fff);\n }\n\n .filterlist {\n width: 40px;\n }\n\n .filterColumnField {\n width: 150px;\n }\n\n .filterValueField {\n width: 190px;\n }\n\n .filterOperatorField {\n width: 120px;\n }\n\n .form-group-operator-label {\n width: 100%;\n }\n\n .filter-form .filterOperatorInput {\n min-width: 96px;\n }\n\n select:hover {\n cursor: pointer;\n }\n\n input:hover {\n cursor: text;\n }\n\n .tooltip-container {\n position: relative;\n display: inline-block;\n }\n\n .tool-tip {\n color: var(--clr-on-secondary, #fff);\n overflow-wrap: break-word;\n border-radius: 3px;\n background-color: var(--clr-secondary, #071454);\n padding: 5px 8px;\n font-family: var(--text-caption-font, sans-serif);\n font-size: var(--text-caption-size, 0.75rem);\n letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n line-height: var(--text-caption-line-height, 1.33333333em);\n font-weight: var(--text-caption-weight, normal);\n text-transform: var(--text-caption-transform, none);\n text-decoration: var(--text-caption-decoration, none);\n\n position: absolute;\n top: 42px;\n right: 0;\n z-index: 3;\n white-space: nowrap;\n display: none;\n }\n\n .filter-button:hover ~ .tool-tip {\n display: block;\n }\n\n .tool-tip li {\n margin-left: -21px;\n overflow-wrap: break-word;\n border-radius: 3px;\n max-width: 250px;\n min-width: 200px;\n white-space: wrap;\n }\n\n .tool-tip p {\n margin: 0;\n padding: 0;\n }\n\n .grid-menu ix-button {\n align-items: center;\n display: flex;\n }\n\n @media only screen and (max-width: 840px) {\n .filter-dropdown-content {\n right: inherit;\n top: 0;\n }\n }\n`;\n"]}
package/dist/grid-view-styles.js CHANGED
@@ -251,7 +251,7 @@ export const IxGridViewStyles = css `
251
251
  .grid-container {
252
252
  border-radius: 0;
253
253
  box-shadow: none;
254
- }
255
- }
254
+ }
255
+ }
256
256
  `;
257
257
  //# sourceMappingURL=grid-view-styles.js.map
package/dist/grid-view-styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid-view-styles.js","sourceRoot":"","sources":["../src/grid-view-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8PlC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridViewStyles = css`\n :host {\n --_ix-grid-cell-padding: var(--ix-grid-cell-padding, 1rem);\n --lumo-primary-color-50pct: transparent;\n }\n\n * {\n font-family: inherit;\n }\n\n vaadin-grid::part(cell) {\n cursor: var(--ix-grid-cell-pointer, pointer);\n }\n\n vaadin-grid::part(header-cell) {\n cursor: default;\n --vaadin-grid-cell-background: #fff;\n }\n\n vaadin-grid::part(row):hover {\n --vaadin-grid-cell-background: #f5f5f5;\n }\n\n vaadin-grid-cell-content {\n font-size: 14px;\n --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);\n }\n\n .hide-column-headers::part(header-cell) {\n display: none;\n }\n\n vaadin-grid::part(ix-disabled-cell) {\n cursor: default;\n color: var(--cp-neutral-blue-60p);\n --vaadin-grid-cell-background: var(--cp-neutral-blue-12p);\n }\n\n ix-grid-download-menu {\n width: 38px;\n margin-right: 2px;\n }\n\n ix-grid-column-filter {\n width: 36px;\n }\n\n .grid-container {\n background-color: var(--clr-surface-container-lowest, #ffffff);\n border-radius: 8px;\n box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n #e1e4e8 0px 0px 0px 1px inset;\n box-sizing: border-box;\n padding: 2px;\n }\n\n .touch-edge {\n margin: 0 -3px;\n }\n\n .grid-header {\n display: flex;\n -webkit-box-pack: justify;\n place-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n padding: 16px 24px;\n flex-wrap: wrap;\n gap: 18px;\n /* offset table margin */\n margin: -3px 0 0 -3px;\n }\n\n .grid-menu {\n display: flex;\n align-items: center;\n margin-left: auto;\n }\n\n .grid-menu ix-button {\n --md-text-button-leading-space: 4px;\n --md-text-button-trailing-space: 4px;\n }\n\n .grid-menu span {\n color: var(--clr-primary, #1456e0);\n cursor: pointer;\n }\n\n .header {\n font-weight: bold;\n display: flex;\n user-select: none;\n align-items: center;\n padding-right: calc(var(--_ix-grid-cell-padding) / 2);\n position: relative;\n\n &:not(.frozen):not(.last)::after {\n content: '';\n display: block;\n position: absolute;\n border: 0;\n border-right-width: var(--ix-grid-header-border-width, 2px);\n border-color: var(\n --ix-grid-header-border-color,\n var(--clr-outline, #0922411f)\n );\n border-style: solid;\n margin-right: 0;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n }\n\n .header-label {\n position: relative;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 1;\n z-index: 2;\n }\n }\n\n .header .header-sort-icon {\n background: #fff;\n display: none;\n padding-left: 5px;\n font-size: 17px;\n color: rgba(0, 0, 0, 0.54);\n cursor: pointer;\n height: 18px;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 3;\n }\n\n .header:hover .header-sort-icon {\n display: block;\n }\n\n .columns-reordering {\n opacity: 0.25;\n }\n\n .progress-container {\n position: relative;\n top: 60px;\n z-index: 1;\n }\n\n span .disabled {\n color: var(--clr-on-surface-variant, rgba(9, 34, 65, 0.7));\n }\n\n .disable-cursor {\n cursor: default !important;\n }\n\n .accounts {\n display: flex;\n align-items: center;\n }\n\n .account-name {\n margin: 0 8px 0 3px;\n }\n\n vaadin-grid-cell-content {\n font-family: var(--text-small-font, sans-serif);\n font-size: var(--text-small-size, 0.875rem);\n letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n line-height: var(--text-small-line-height, 1.42857143em);\n font-weight: var(--text-small-weight, normal);\n text-decoration: var(--text-small-decoration, none);\n text-transform: var(--text-small-transform, none);\n --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);\n }\n\n vaadin-grid-cell-content > div {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .row-controls {\n border-top: solid 1px var(--clr-border-outline, #0922411f);\n }\n\n .row-limit {\n display: flex;\n padding: 8px;\n }\n\n /* launchpad variant */\n .launchpad vaadin-grid {\n --_lumo-grid-border-width: 0;\n --lumo-size-xl: auto;\n }\n\n .launchpad vaadin-grid-cell-content {\n padding: 11px 24px;\n border-bottom: 0;\n }\n\n .launchpad vaadin-grid::part(body-row) {\n border-bottom: 1px solid var(--clr-border-outline, rgba(9, 34, 65, 0.12));\n }\n\n .launchpad .grid-header {\n padding: 0.5rem 18px 0;\n }\n\n .launchpad .header {\n font-family: var(--text-caption-font, sans-serif);\n font-size: var(--text-caption-size, 0.75rem);\n letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n line-height: var(--text-caption-line-height, 1.33333333em);\n font-weight: var(--text-caption-weight, normal);\n text-transform: var(--text-caption-transform, none);\n text-decoration: var(--text-caption-decoration, none);\n }\n\n .launchpad .grid-header h2 {\n font-family: var(--text-page-title-font, sans-serif);\n font-size: var(--text-page-title-size, 2.125rem);\n letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n line-height: var(--text-page-title-line-height, 1.17647059em);\n font-weight: var(--text-page-title-weight, bold);\n text-decoration: var(--text-page-title-decoration, none);\n text-transform: var(--text-page-title-transform, none);\n }\n\n @media only screen and (max-width: 840px) {\n .grid-header {\n display: flex;\n flex-direction: column;\n padding: 1em 1em 0 1em;\n place-content: flex-start;\n -webkit-box-align: flex-start;\n align-items: flex-start;\n gap: 0.75em;\n }\n .grid-menu {\n padding-left: 0;\n margin-left: -4px;\n }\n .grid-container {\n border-radius: 0;\n box-shadow: none;\n } \n } \n`;\n"]}
1
+ {"version":3,"file":"grid-view-styles.js","sourceRoot":"","sources":["../src/grid-view-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8PlC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridViewStyles = css`\n :host {\n --_ix-grid-cell-padding: var(--ix-grid-cell-padding, 1rem);\n --lumo-primary-color-50pct: transparent;\n }\n\n * {\n font-family: inherit;\n }\n\n vaadin-grid::part(cell) {\n cursor: var(--ix-grid-cell-pointer, pointer);\n }\n\n vaadin-grid::part(header-cell) {\n cursor: default;\n --vaadin-grid-cell-background: #fff;\n }\n\n vaadin-grid::part(row):hover {\n --vaadin-grid-cell-background: #f5f5f5;\n }\n\n vaadin-grid-cell-content {\n font-size: 14px;\n --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);\n }\n\n .hide-column-headers::part(header-cell) {\n display: none;\n }\n\n vaadin-grid::part(ix-disabled-cell) {\n cursor: default;\n color: var(--cp-neutral-blue-60p);\n --vaadin-grid-cell-background: var(--cp-neutral-blue-12p);\n }\n\n ix-grid-download-menu {\n width: 38px;\n margin-right: 2px;\n }\n\n ix-grid-column-filter {\n width: 36px;\n }\n\n .grid-container {\n background-color: var(--clr-surface-container-lowest, #ffffff);\n border-radius: 8px;\n box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n #e1e4e8 0px 0px 0px 1px inset;\n box-sizing: border-box;\n padding: 2px;\n }\n\n .touch-edge {\n margin: 0 -3px;\n }\n\n .grid-header {\n display: flex;\n -webkit-box-pack: justify;\n place-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n padding: 16px 24px;\n flex-wrap: wrap;\n gap: 18px;\n /* offset table margin */\n margin: -3px 0 0 -3px;\n }\n\n .grid-menu {\n display: flex;\n align-items: center;\n margin-left: auto;\n }\n\n .grid-menu ix-button {\n --md-text-button-leading-space: 4px;\n --md-text-button-trailing-space: 4px;\n }\n\n .grid-menu span {\n color: var(--clr-primary, #1456e0);\n cursor: pointer;\n }\n\n .header {\n font-weight: bold;\n display: flex;\n user-select: none;\n align-items: center;\n padding-right: calc(var(--_ix-grid-cell-padding) / 2);\n position: relative;\n\n &:not(.frozen):not(.last)::after {\n content: '';\n display: block;\n position: absolute;\n border: 0;\n border-right-width: var(--ix-grid-header-border-width, 2px);\n border-color: var(\n --ix-grid-header-border-color,\n var(--clr-outline, #0922411f)\n );\n border-style: solid;\n margin-right: 0;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n }\n\n .header-label {\n position: relative;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 1;\n z-index: 2;\n }\n }\n\n .header .header-sort-icon {\n background: #fff;\n display: none;\n padding-left: 5px;\n font-size: 17px;\n color: rgba(0, 0, 0, 0.54);\n cursor: pointer;\n height: 18px;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n z-index: 3;\n }\n\n .header:hover .header-sort-icon {\n display: block;\n }\n\n .columns-reordering {\n opacity: 0.25;\n }\n\n .progress-container {\n position: relative;\n top: 60px;\n z-index: 1;\n }\n\n span .disabled {\n color: var(--clr-on-surface-variant, rgba(9, 34, 65, 0.7));\n }\n\n .disable-cursor {\n cursor: default !important;\n }\n\n .accounts {\n display: flex;\n align-items: center;\n }\n\n .account-name {\n margin: 0 8px 0 3px;\n }\n\n vaadin-grid-cell-content {\n font-family: var(--text-small-font, sans-serif);\n font-size: var(--text-small-size, 0.875rem);\n letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n line-height: var(--text-small-line-height, 1.42857143em);\n font-weight: var(--text-small-weight, normal);\n text-decoration: var(--text-small-decoration, none);\n text-transform: var(--text-small-transform, none);\n --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);\n }\n\n vaadin-grid-cell-content > div {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .row-controls {\n border-top: solid 1px var(--clr-border-outline, #0922411f);\n }\n\n .row-limit {\n display: flex;\n padding: 8px;\n }\n\n /* launchpad variant */\n .launchpad vaadin-grid {\n --_lumo-grid-border-width: 0;\n --lumo-size-xl: auto;\n }\n\n .launchpad vaadin-grid-cell-content {\n padding: 11px 24px;\n border-bottom: 0;\n }\n\n .launchpad vaadin-grid::part(body-row) {\n border-bottom: 1px solid var(--clr-border-outline, rgba(9, 34, 65, 0.12));\n }\n\n .launchpad .grid-header {\n padding: 0.5rem 18px 0;\n }\n\n .launchpad .header {\n font-family: var(--text-caption-font, sans-serif);\n font-size: var(--text-caption-size, 0.75rem);\n letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n line-height: var(--text-caption-line-height, 1.33333333em);\n font-weight: var(--text-caption-weight, normal);\n text-transform: var(--text-caption-transform, none);\n text-decoration: var(--text-caption-decoration, none);\n }\n\n .launchpad .grid-header h2 {\n font-family: var(--text-page-title-font, sans-serif);\n font-size: var(--text-page-title-size, 2.125rem);\n letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n line-height: var(--text-page-title-line-height, 1.17647059em);\n font-weight: var(--text-page-title-weight, bold);\n text-decoration: var(--text-page-title-decoration, none);\n text-transform: var(--text-page-title-transform, none);\n }\n\n @media only screen and (max-width: 840px) {\n .grid-header {\n display: flex;\n flex-direction: column;\n padding: 1em 1em 0 1em;\n place-content: flex-start;\n -webkit-box-align: flex-start;\n align-items: flex-start;\n gap: 0.75em;\n }\n .grid-menu {\n padding-left: 0;\n margin-left: -4px;\n }\n .grid-container {\n border-radius: 0;\n box-shadow: none;\n }\n }\n`;\n"]}
package/dist/ix-grid.min.js CHANGED
@@ -1,6 +1,6 @@
1
- import{__decorate}from"tslib";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-progress/ix-progress.js";import"@vaadin/grid";import{columnHeaderRenderer}from"@vaadin/grid/lit.js";import{css,svg,LitElement,nothing,html,render}from"lit";import{query,property,state,customElement}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-select/ix-select.js";import{formatDate}from"date-fns/format.js";let IxGridViewStyles=css`:host{--_ix-grid-cell-padding:var(--ix-grid-cell-padding, 1rem);--lumo-primary-color-50pct:transparent}*{font-family:inherit}vaadin-grid::part(cell){cursor:var(--ix-grid-cell-pointer,pointer)}vaadin-grid::part(header-cell){cursor:default;--vaadin-grid-cell-background:#fff}vaadin-grid::part(row):hover{--vaadin-grid-cell-background:#f5f5f5}vaadin-grid-cell-content{font-size:14px;--_cell-padding:var(--ix-grid-cell-padding, 14px 10px)}.hide-column-headers::part(header-cell){display:none}vaadin-grid::part(ix-disabled-cell){cursor:default;color:var(--cp-neutral-blue-60p);--vaadin-grid-cell-background:var(--cp-neutral-blue-12p)}ix-grid-download-menu{width:38px;margin-right:2px}ix-grid-column-filter{width:36px}.grid-container{background-color:var(--clr-surface-container-lowest,#fff);border-radius:8px;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;box-sizing:border-box;padding:2px}.touch-edge{margin:0 -3px}.grid-header{display:flex;-webkit-box-pack:justify;place-content:space-between;-webkit-box-align:center;align-items:center;padding:16px 24px;flex-wrap:wrap;gap:18px;margin:-3px 0 0 -3px}.grid-menu{display:flex;align-items:center;margin-left:auto}.grid-menu ix-button{--md-text-button-leading-space:4px;--md-text-button-trailing-space:4px}.grid-menu span{color:var(--clr-primary,#1456e0);cursor:pointer}.header{font-weight:700;display:flex;user-select:none;align-items:center;padding-right:calc(var(--_ix-grid-cell-padding)/ 2);position:relative;text-overflow:ellipsis;overflow:hidden;flex-grow:1;z-index:2}.header:hover .header-sort-icon{display:block}.columns-reordering{opacity:.25}.progress-container{position:relative;top:60px;z-index:1}span .disabled{color:var(--clr-on-surface-variant,rgba(9,34,65,.7))}.disable-cursor{cursor:default!important}.accounts{display:flex;align-items:center}.account-name{margin:0 8px 0 3px}vaadin-grid-cell-content{font-family:var(--text-small-font,sans-serif);font-size:var(--text-small-size,.875rem);letter-spacing:var(--text-small-letter-spacing,.0275em);line-height:var(--text-small-line-height,1.42857143em);font-weight:var(--text-small-weight,normal);text-decoration:var(--text-small-decoration,none);text-transform:var(--text-small-transform,none);--_cell-padding:var(--ix-grid-cell-padding, 14px 10px)}vaadin-grid-cell-content>div{overflow:hidden;text-overflow:ellipsis}.row-controls{border-top:solid 1px var(--clr-border-outline,#0922411f)}.row-limit{display:flex;padding:8px}.launchpad vaadin-grid{--_lumo-grid-border-width:0;--lumo-size-xl:auto}.launchpad vaadin-grid-cell-content{padding:11px 24px;border-bottom:0}.launchpad vaadin-grid::part(body-row){border-bottom:1px solid var(--clr-border-outline,rgba(9,34,65,.12))}.launchpad .grid-header{padding:.5rem 18px 0}.launchpad .header{font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none)}.launchpad .grid-header h2{font-family:var(--text-page-title-font,sans-serif);font-size:var(--text-page-title-size,2.125rem);letter-spacing:var(--text-page-title-letter-spacing,.01029412em);line-height:var(--text-page-title-line-height,1.17647059em);font-weight:var(--text-page-title-weight,bold);text-decoration:var(--text-page-title-decoration,none);text-transform:var(--text-page-title-transform,none)}@media only screen and (max-width:840px){.grid-header{display:flex;flex-direction:column;padding:1em 1em 0 1em;place-content:flex-start;-webkit-box-align:flex-start;align-items:flex-start;gap:.75em}.grid-menu{padding-left:0;margin-left:-4px}.grid-container{border-radius:0;box-shadow:none}}`,IxGridColumnFilterStyles=css`.dropdown-content{position:absolute;background-color:var(--clr-surface-container-lowest,#fff);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:9;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px;width:247px;left:-100px;border-radius:16px}.dropdown-content>div{margin:0;color:var(--clr-on-surface,#092241);font-family:var(--text-small-font,sans-serif);font-size:var(--text-small-size,.875rem);letter-spacing:var(--text-small-letter-spacing,.0275em);line-height:var(--text-small-line-height,1.42857143em);font-weight:var(--text-small-weight,normal);text-decoration:var(--text-small-decoration,none);text-transform:var(--text-small-transform,none);display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{width:158px}.dropdown-content label .draggable{font-size:24px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.dropdown-content label .draggable path{fill:var(--clr-primary,#1456e0)}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:var(--clr-critical,#db0028);border-radius:50%}ix-switch{padding:0 0 0 6px;display:flex;width:48px}.list{position:relative}@media only screen and (max-width:840px){.dropdown-content{left:0}}`,triggerKeys=[" ","Enter"],handleIcon=svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z" fill="#1456e0"/></svg>`,IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.columnsLocalStorageKey=void 0,this.columnReorderingAllowed=!1,this.refreshDataOnColumnVisibilityChange=!0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}get preservedColumns(){let e=[];return e=this.columnsLocalStorageKey?JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]"):e}initializeLocalStorage(){0<this.preservedColumns.length&&(this.disabledColumns=this.preservedColumns.filter(t=>t.hidden&&this.columns.some(e=>e.name===t.name)).map(e=>e.name),this.columns.forEach((e,t)=>{this.disabledColumns.includes(e.name)&&(this.columns[t].hidden=!0)})),this.dispatchUpdate()}update(e){super.update(e),e.has("columnsLocalStorageKey")&&this.initializeLocalStorage()}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden!==!(null!=e&&e.checked)&&this.dispatchEvent(new CustomEvent("columnVisibilityChange",{detail:{column:this.columns[t]},bubbles:!0,composed:!0})),this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){this.columnReorderingAllowed&&(e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id")),this.dragEvent.startId=e)}dragend(){var e,t;this.columnReorderingAllowed&&(this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1})}dragenter(e){this.columnReorderingAllowed&&(e=e.target).classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}handleDropdownToggle(e){e instanceof KeyboardEvent&&!triggerKeys.includes(e.key)||e.composedPath().includes(this.dropdown)||(this.isDropdownVisible=!this.isDropdownVisible)}render(){return html`<div class="grid-menu"><span @click="${this.handleDropdownToggle}" @keyDown="${this.handleDropdownToggle}" class="list list-dropdown"><ix-icon-button appearance="default"><svg slot="default" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z" fill="#1456E0"/></svg></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns.filter(e=>!1!==e.filterable),e=>e.name,(e,t)=>html`<div><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="${this.columnReorderingAllowed}" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p>${this.columnReorderingAllowed?html`<div class="draggable">${handleIcon}</div>`:nothing}</label></div>`)}</div>`:nothing}</span></div>`}},IxGridDownloadMenu=(IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([query(".dropdown-content")],IxGridColumnFilter.prototype,"dropdown",void 0),__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"columnsLocalStorageKey",void 0),__decorate([property({type:Boolean})],IxGridColumnFilter.prototype,"columnReorderingAllowed",void 0),__decorate([property({type:Boolean})],IxGridColumnFilter.prototype,"refreshDataOnColumnVisibilityChange",void 0),__decorate([property({attribute:!1})],IxGridColumnFilter.prototype,"requestGridUpdate",void 0),__decorate([state()],IxGridColumnFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridColumnFilter.prototype,"disabledColumns",void 0),__decorate([state()],IxGridColumnFilter.prototype,"dragEvent",void 0),IxGridColumnFilter=__decorate([customElement("ix-grid-column-filter")],IxGridColumnFilter),class extends LitElement{constructor(){super(...arguments),this.items=[],this.isDownloading=!1}toggleMenu(){this.downloadMenu.open=!this.downloadMenu.open}renderMenuItems(){var e;return 0===(null==(e=this.items)?void 0:e.length)?html`<ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"all",bubbles:!0,composed:!0}))}"><div slot="headline">Download All Records</div></ix-menu-item><ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"filter",bubbles:!0,composed:!0}))}"><div slot="headline">Download Current Filter</div></ix-menu-item>`:this.items.filter(e=>!e.hidden).map(e=>html`<ix-menu-item .disabled="${e.disabled}" @click="${()=>e.onClick(e.name)}"><div slot="headline">${e.label}</div></ix-menu-item>`)}render(){return this.isDownloading?html`<ix-progress .indeterminate="${!0}" .linear="${!1}" style="--md-circular-progress-size:1.75REM;text-align:center"></ix-progress>`:html`<div style="position:relative"><ix-icon-button id="anchor" @click="${this.toggleMenu}"><svg slot="default" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z" fill="#1456E0"/></svg></ix-icon-button><ix-menu id="menu" anchor="anchor" has-overflow>${this.renderMenuItems()}</ix-menu></div>`}}),copy=(IxGridDownloadMenu.styles=[IxGridViewStyles],__decorate([query("#menu")],IxGridDownloadMenu.prototype,"downloadMenu",void 0),__decorate([query("#anchor")],IxGridDownloadMenu.prototype,"downloadMenuAnchor",void 0),__decorate([property({type:Array})],IxGridDownloadMenu.prototype,"items",void 0),__decorate([property({type:Boolean})],IxGridDownloadMenu.prototype,"isDownloading",void 0),IxGridDownloadMenu=__decorate([customElement("ix-grid-download-menu")],IxGridDownloadMenu),{activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",viewMore:"VIEW MORE",viewLess:"VIEW LESS"}),IxGridRowFilterStyles=css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:var(--clr-primary,#1456e0);margin-right:5px}.grid-menu ix-button .filter{margin-top:2px}.filter-form{white-space:nowrap;padding:9px;color:var(--clr-on-surface-variant,#092241b3)}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:var(--clr-on-surface-variant,#092241b3)}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff;z-index:10}.filter-form input,.filter-form option,.filter-form select{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);border-radius:0;cursor:pointer;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:var(--text-default-font,sans-serif)}.form-group label{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:var(--text-default-font,sans-serif)}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.filter-footer{padding:9px;display:flex;justify-content:space-between}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:1;display:flex;align-items:center;justify-content:center;font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none);padding:0;height:16px;width:16px;border-radius:50%;background-color:var(--clr-primary,#1456e0);color:var(--clr-on-primary,#fff)}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.form-group-operator-label{width:100%}.filter-form .filterOperatorInput{min-width:96px}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:var(--clr-on-secondary,#fff);overflow-wrap:break-word;border-radius:3px;background-color:var(--clr-secondary,#071454);padding:5px 8px;font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none);position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;overflow-wrap:break-word;border-radius:3px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0}.grid-menu ix-button{align-items:center;display:flex}@media only screen and (max-width:840px){.filter-dropdown-content{right:inherit;top:0}}`,IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.filterValueChangeDebounceTime=300,this.readParamsFromURL=!1,this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.maxDate=formatDate(new Date,"yyyy-MM-dd"),this.fromDateErrorText="",this.debouncedOnFilterValueChange=()=>{},this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.readParamsFromURL&&(this.filters=this.parseFilterQueryString()),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate(!1),this.debouncedOnFilterValueChange=(e,t)=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(()=>this.onfilterValueChange.bind(this)(e,t),this.filterValueChangeDebounceTime)}}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){let r=new URLSearchParams(window.location.search),o=[];return this.filterableColumns.forEach(i=>{var e;null!=(e=i.filterOperators)&&e.forEach(e=>{var t=i.name+"_"+e;r.has(t)&&o.push({columnField:i.name,operatorValue:e,dataType:i.dataType,value:null!=(e=r.get(t))?e:""})})}),o}dispatchUpdate(e=!0){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length),resetPage:e},bubbles:!0,composed:!0}))}addFilter(){let e,t,i=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";var r=(null==(e=this.filterableColumns.find(e=>e.name===i))?void 0:e.filterOperators)||["contains"],o=(null==(t=this.filterableColumns.find(e=>e.name===i))?void 0:t.dataType)||"string";this.filters=[...this.filters,{columnField:i,operatorValue:r[0],dataType:o,value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter()),this.updateActiveFilters()}onfilterColumnChange(e,t){let i,r=t.target.value;t=this.filterableColumns.find(e=>e.name===r);this.filters[e].columnField=r,this.filters[e].dataType=null==t?void 0:t.dataType,this.filters[e].operatorValue=(null==(i=null==t?void 0:t.filterOperators)?void 0:i[0])||"contains",this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterOperatorChange(e,t){t=t.target.value;this.filters[e].operatorValue=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onDatefilterValueChange(e,t){this.filters[e].value=t,this.dispatchUpdate(),this.updateActiveFilters()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.value,t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderStringInput(e,t){return html`<label class="form-group-operator-label"><span>Value</span> <input data-testid="${"filterValueInput-"+t}" placeholder="Filter value" @input="${e=>this.debouncedOnFilterValueChange(t,e.target)}" .value="${e.value}"></label>`}renderDateInput(e,t){return html`<ix-date data-testid="${"filterValueInput-"+t}" .value="${e.value}" max="${this.maxDate}" name="${e.columnField}-valueDate" .errorText="${this.fromDateErrorText}" .onChanged="${e=>this.onDatefilterValueChange(t,e)}"></ix-date>`}renderFilterInputControl(e,t){switch(e.dataType){case"string":case void 0:return this.renderStringInput(e,t);case"dateTime":return this.renderDateInput(e,t);default:return nothing}}renderFilterInput(t,i){let e,r,o=[t.columnField,...this.unselectedFilters];var a=this.filterableColumns.filter(e=>o.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" data-testid="clearFilterButton" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${a.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
1
+ import{__decorate}from"tslib";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-progress/ix-progress.js";import"@vaadin/grid";import{columnHeaderRenderer}from"@vaadin/grid/lit.js";import{css,svg,LitElement,nothing,html,render}from"lit";import{query,property,state,customElement}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-select/ix-select.js";import{format}from"date-fns/format.js";let IxGridViewStyles=css`:host{--_ix-grid-cell-padding:var(--ix-grid-cell-padding, 1rem);--lumo-primary-color-50pct:transparent}*{font-family:inherit}vaadin-grid::part(cell){cursor:var(--ix-grid-cell-pointer,pointer)}vaadin-grid::part(header-cell){cursor:default;--vaadin-grid-cell-background:#fff}vaadin-grid::part(row):hover{--vaadin-grid-cell-background:#f5f5f5}vaadin-grid-cell-content{font-size:14px;--_cell-padding:var(--ix-grid-cell-padding, 14px 10px)}.hide-column-headers::part(header-cell){display:none}vaadin-grid::part(ix-disabled-cell){cursor:default;color:var(--cp-neutral-blue-60p);--vaadin-grid-cell-background:var(--cp-neutral-blue-12p)}ix-grid-download-menu{width:38px;margin-right:2px}ix-grid-column-filter{width:36px}.grid-container{background-color:var(--clr-surface-container-lowest,#fff);border-radius:8px;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;box-sizing:border-box;padding:2px}.touch-edge{margin:0 -3px}.grid-header{display:flex;-webkit-box-pack:justify;place-content:space-between;-webkit-box-align:center;align-items:center;padding:16px 24px;flex-wrap:wrap;gap:18px;margin:-3px 0 0 -3px}.grid-menu{display:flex;align-items:center;margin-left:auto}.grid-menu ix-button{--md-text-button-leading-space:4px;--md-text-button-trailing-space:4px}.grid-menu span{color:var(--clr-primary,#1456e0);cursor:pointer}.header{font-weight:700;display:flex;user-select:none;align-items:center;padding-right:calc(var(--_ix-grid-cell-padding)/ 2);position:relative;text-overflow:ellipsis;overflow:hidden;flex-grow:1;z-index:2}.header:hover .header-sort-icon{display:block}.columns-reordering{opacity:.25}.progress-container{position:relative;top:60px;z-index:1}span .disabled{color:var(--clr-on-surface-variant,rgba(9,34,65,.7))}.disable-cursor{cursor:default!important}.accounts{display:flex;align-items:center}.account-name{margin:0 8px 0 3px}vaadin-grid-cell-content{font-family:var(--text-small-font,sans-serif);font-size:var(--text-small-size,.875rem);letter-spacing:var(--text-small-letter-spacing,.0275em);line-height:var(--text-small-line-height,1.42857143em);font-weight:var(--text-small-weight,normal);text-decoration:var(--text-small-decoration,none);text-transform:var(--text-small-transform,none);--_cell-padding:var(--ix-grid-cell-padding, 14px 10px)}vaadin-grid-cell-content>div{overflow:hidden;text-overflow:ellipsis}.row-controls{border-top:solid 1px var(--clr-border-outline,#0922411f)}.row-limit{display:flex;padding:8px}.launchpad vaadin-grid{--_lumo-grid-border-width:0;--lumo-size-xl:auto}.launchpad vaadin-grid-cell-content{padding:11px 24px;border-bottom:0}.launchpad vaadin-grid::part(body-row){border-bottom:1px solid var(--clr-border-outline,rgba(9,34,65,.12))}.launchpad .grid-header{padding:.5rem 18px 0}.launchpad .header{font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none)}.launchpad .grid-header h2{font-family:var(--text-page-title-font,sans-serif);font-size:var(--text-page-title-size,2.125rem);letter-spacing:var(--text-page-title-letter-spacing,.01029412em);line-height:var(--text-page-title-line-height,1.17647059em);font-weight:var(--text-page-title-weight,bold);text-decoration:var(--text-page-title-decoration,none);text-transform:var(--text-page-title-transform,none)}@media only screen and (max-width:840px){.grid-header{display:flex;flex-direction:column;padding:1em 1em 0 1em;place-content:flex-start;-webkit-box-align:flex-start;align-items:flex-start;gap:.75em}.grid-menu{padding-left:0;margin-left:-4px}.grid-container{border-radius:0;box-shadow:none}}`,IxGridColumnFilterStyles=css`.dropdown-content{position:absolute;background-color:var(--clr-surface-container-lowest,#fff);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:9;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px;width:247px;left:-100px;border-radius:16px}.dropdown-content>div{margin:0;color:var(--clr-on-surface,#092241);font-family:var(--text-small-font,sans-serif);font-size:var(--text-small-size,.875rem);letter-spacing:var(--text-small-letter-spacing,.0275em);line-height:var(--text-small-line-height,1.42857143em);font-weight:var(--text-small-weight,normal);text-decoration:var(--text-small-decoration,none);text-transform:var(--text-small-transform,none);display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{width:158px}.dropdown-content label .draggable{font-size:24px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.dropdown-content label .draggable path{fill:var(--clr-primary,#1456e0)}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:var(--clr-critical,#db0028);border-radius:50%}ix-switch{padding:0 0 0 6px;display:flex;width:48px}.list{position:relative}@media only screen and (max-width:840px){.dropdown-content{left:0}}`,triggerKeys=[" ","Enter"],handleIcon=svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z" fill="#1456e0"/></svg>`,IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.columnsLocalStorageKey=void 0,this.columnReorderingAllowed=!1,this.refreshDataOnColumnVisibilityChange=!0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}get preservedColumns(){let e=[];return e=this.columnsLocalStorageKey?JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]"):e}initializeLocalStorage(){0<this.preservedColumns.length&&(this.disabledColumns=this.preservedColumns.filter(t=>t.hidden&&this.columns.some(e=>e.name===t.name)).map(e=>e.name),this.columns.forEach((e,t)=>{this.disabledColumns.includes(e.name)&&(this.columns[t].hidden=!0)})),this.dispatchUpdate()}update(e){super.update(e),e.has("columnsLocalStorageKey")&&this.initializeLocalStorage()}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden!==!(null!=e&&e.checked)&&this.dispatchEvent(new CustomEvent("columnVisibilityChange",{detail:{column:this.columns[t]},bubbles:!0,composed:!0})),this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){this.columnReorderingAllowed&&(e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id")),this.dragEvent.startId=e)}dragend(){var e,t;this.columnReorderingAllowed&&(this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1})}dragenter(e){this.columnReorderingAllowed&&(e=e.target).classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}handleDropdownToggle(e){e instanceof KeyboardEvent&&!triggerKeys.includes(e.key)||e.composedPath().includes(this.dropdown)||(this.isDropdownVisible=!this.isDropdownVisible)}render(){return html`<div class="grid-menu"><span @click="${this.handleDropdownToggle}" @keyDown="${this.handleDropdownToggle}" class="list list-dropdown"><ix-icon-button appearance="default"><svg slot="default" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z" fill="#1456E0"/></svg></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns.filter(e=>!1!==e.filterable),e=>e.name,(e,t)=>html`<div><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="${this.columnReorderingAllowed}" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p>${this.columnReorderingAllowed?html`<div class="draggable">${handleIcon}</div>`:nothing}</label></div>`)}</div>`:nothing}</span></div>`}},IxGridDownloadMenu=(IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([query(".dropdown-content")],IxGridColumnFilter.prototype,"dropdown",void 0),__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"columnsLocalStorageKey",void 0),__decorate([property({type:Boolean})],IxGridColumnFilter.prototype,"columnReorderingAllowed",void 0),__decorate([property({type:Boolean})],IxGridColumnFilter.prototype,"refreshDataOnColumnVisibilityChange",void 0),__decorate([property({attribute:!1})],IxGridColumnFilter.prototype,"requestGridUpdate",void 0),__decorate([state()],IxGridColumnFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridColumnFilter.prototype,"disabledColumns",void 0),__decorate([state()],IxGridColumnFilter.prototype,"dragEvent",void 0),IxGridColumnFilter=__decorate([customElement("ix-grid-column-filter")],IxGridColumnFilter),class extends LitElement{constructor(){super(...arguments),this.items=[],this.isDownloading=!1}toggleMenu(){this.downloadMenu.open=!this.downloadMenu.open}renderMenuItems(){var e;return 0===(null==(e=this.items)?void 0:e.length)?html`<ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"all",bubbles:!0,composed:!0}))}"><div slot="headline">Download All Records</div></ix-menu-item><ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"filter",bubbles:!0,composed:!0}))}"><div slot="headline">Download Current Filter</div></ix-menu-item>`:this.items.filter(e=>!e.hidden).map(e=>html`<ix-menu-item .disabled="${e.disabled}" @click="${()=>e.onClick(e.name)}"><div slot="headline">${e.label}</div></ix-menu-item>`)}render(){return this.isDownloading?html`<ix-progress .indeterminate="${!0}" .linear="${!1}" style="--md-circular-progress-size:1.75REM;text-align:center"></ix-progress>`:html`<div style="position:relative"><ix-icon-button id="anchor" @click="${this.toggleMenu}"><svg slot="default" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z" fill="#1456E0"/></svg></ix-icon-button><ix-menu id="menu" anchor="anchor" has-overflow>${this.renderMenuItems()}</ix-menu></div>`}}),copy=(IxGridDownloadMenu.styles=[IxGridViewStyles],__decorate([query("#menu")],IxGridDownloadMenu.prototype,"downloadMenu",void 0),__decorate([query("#anchor")],IxGridDownloadMenu.prototype,"downloadMenuAnchor",void 0),__decorate([property({type:Array})],IxGridDownloadMenu.prototype,"items",void 0),__decorate([property({type:Boolean})],IxGridDownloadMenu.prototype,"isDownloading",void 0),IxGridDownloadMenu=__decorate([customElement("ix-grid-download-menu")],IxGridDownloadMenu),{activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",viewMore:"VIEW MORE",viewLess:"VIEW LESS"}),IxGridRowFilterStyles=css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:var(--clr-primary,#1456e0);margin-right:5px}.grid-menu ix-button .filter{margin-top:2px}.filter-form{white-space:nowrap;padding:9px;color:var(--clr-on-surface-variant,#092241b3)}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:var(--clr-on-surface-variant,#092241b3)}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff;z-index:10}.filter-form input,.filter-form option,.filter-form select{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);border-radius:0;cursor:pointer;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:var(--text-default-font,sans-serif)}.form-group label{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:var(--text-default-font,sans-serif)}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.filter-footer{padding:9px;display:flex;justify-content:space-between}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:1;display:flex;align-items:center;justify-content:center;font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none);padding:0;height:16px;width:16px;border-radius:50%;background-color:var(--clr-primary,#1456e0);color:var(--clr-on-primary,#fff)}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.form-group-operator-label{width:100%}.filter-form .filterOperatorInput{min-width:96px}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:var(--clr-on-secondary,#fff);overflow-wrap:break-word;border-radius:3px;background-color:var(--clr-secondary,#071454);padding:5px 8px;font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none);position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;overflow-wrap:break-word;border-radius:3px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0}.grid-menu ix-button{align-items:center;display:flex}@media only screen and (max-width:840px){.filter-dropdown-content{right:inherit;top:0}}`,IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.filterValueChangeDebounceTime=300,this.readParamsFromURL=!1,this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.maxDate=format(new Date,"yyyy-MM-dd"),this.fromDateErrorText="",this.oldValueLength=0,this.debouncedOnFilterValueChange=()=>{},this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.readParamsFromURL&&(this.filters=this.parseFilterQueryString()),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate(!1),this.debouncedOnFilterValueChange=(e,t)=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(()=>this.onfilterValueChange.bind(this)(e,t),this.filterValueChangeDebounceTime)}}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){let r=new URLSearchParams(window.location.search),o=[];return this.filterableColumns.forEach(i=>{var e;null!=(e=i.filterOperators)&&e.forEach(e=>{var t=i.name+"_"+e;r.has(t)&&o.push({columnField:i.name,operatorValue:e,dataType:i.dataType,value:null!=(e=r.get(t))?e:""})})}),o}dispatchUpdate(e=!0){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>e.value.length),resetPage:e},bubbles:!0,composed:!0}))}addFilter(){let e,t,i=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";var r=(null==(e=this.filterableColumns.find(e=>e.name===i))?void 0:e.filterOperators)||["contains"],o=(null==(t=this.filterableColumns.find(e=>e.name===i))?void 0:t.dataType)||"string";this.filters=[...this.filters,{columnField:i,operatorValue:r[0],dataType:o,value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter()),this.updateActiveFilters()}onfilterColumnChange(e,t){let i,r=t.target.value;t=this.filterableColumns.find(e=>e.name===r);this.filters[e].columnField=r,this.filters[e].dataType=null==t?void 0:t.dataType,this.filters[e].operatorValue=(null==(i=null==t?void 0:t.filterOperators)?void 0:i[0])||"contains",this.filters=[...this.filters],this.dispatchUpdate()}onfilterOperatorChange(e,t){t=t.target.value;this.filters[e].operatorValue=t,this.filters=[...this.filters],this.dispatchUpdate()}onDatefilterValueChange(e,t){this.filters[e].value=t,this.dispatchUpdate(),this.updateActiveFilters()}onfilterValueChange(e,t){t=t.value,this.filters[e].value=t,t=this.filters[e].value.length;0<this.filters[e].columnField.length&&(3<=t||t<this.oldValueLength)&&this.dispatchUpdate(),this.updateActiveFilters(),this.oldValueLength=t}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderStringInput(e,t){return html`<label class="form-group-operator-label"><span>Value</span> <input data-testid="${"filterValueInput-"+t}" placeholder="Filter value" @input="${e=>this.debouncedOnFilterValueChange(t,e.target)}" .value="${e.value}"></label>`}renderDateInput(e,t){return html`<ix-date data-testid="${"filterValueInput-"+t}" .value="${e.value}" max="${this.maxDate}" name="${e.columnField}-valueDate" .errorText="${this.fromDateErrorText}" .onChanged="${e=>this.onDatefilterValueChange(t,e)}"></ix-date>`}renderFilterInputControl(e,t){switch(e.dataType){case"string":case void 0:return this.renderStringInput(e,t);case"dateTime":return this.renderDateInput(e,t);default:return nothing}}renderFilterInput(t,i){let e,r,o=[t.columnField,...this.unselectedFilters];var a=this.filterableColumns.filter(e=>o.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" data-testid="clearFilterButton" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${a.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
2
2
  `)}">Columns</label> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${a.map(e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></div></div>`:nothing}<div class="filter-form-column filter-form-column-border filterColumnField"><div class="filter-form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${a.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
3
- `)}"><span>Columns</span> <select data-testid="${"filterColumnInput-"+i}" @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(a,e=>e.name,e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterOperatorField"><div class="filter-form-group"><label class="form-group-operator-label"><span>Operator</span> <select data-testid="${"filterOperatorInput-"+i}" class="filterOperatorInput" @change="${e=>this.onfilterOperatorChange(i,e)}" .value="${t.operatorValue}" data-v="${t.operatorValue}">${repeat(null!=(r=null==(e=a.find(e=>e.name===t.columnField))?void 0:e.filterOperators)?r:["contains"],e=>html`<option value="${e}" ?selected="${e===t.operatorValue}">${e}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group">${this.renderFilterInputControl(t,i)}</div></div></div>`}renderDropdown(){var e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return html`<div class="filter-dropdown-content"><div class="filter-body">${this.filters.map((e,t)=>this.renderFilterInput(e,t))}</div><div class="filter-footer"><ix-button data-testid="addFilterButton" class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}" appearance="text"><ix-icon slot="icon">add</ix-icon>Add filter</ix-button><ix-button data-testid="clearAllFiltersButton" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}" appearance="text">Clear all</ix-button></div></div>`}render(){return html`<div class="grid-menu"><div class="filter-container tooltip-container">${0<this.activeFilters.length?html`<span class="filter-superscript">${this.activeFilters.length}</span>`:nothing}<ix-button 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>`}},PaginationStyles=(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([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,"maxDate",void 0),__decorate([state()],IxGridRowFilter.prototype,"fromDateErrorText",void 0),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter),css`:host{--md-filled-select-text-field-input-text-size:var(
3
+ `)}"><span>Columns</span> <select data-testid="${"filterColumnInput-"+i}" @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(a,e=>e.name,e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterOperatorField"><div class="filter-form-group"><label class="form-group-operator-label"><span>Operator</span> <select data-testid="${"filterOperatorInput-"+i}" class="filterOperatorInput" @change="${e=>this.onfilterOperatorChange(i,e)}" .value="${t.operatorValue}" data-v="${t.operatorValue}">${repeat(null!=(r=null==(e=a.find(e=>e.name===t.columnField))?void 0:e.filterOperators)?r:["contains"],e=>html`<option value="${e}" ?selected="${e===t.operatorValue}">${e}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group">${this.renderFilterInputControl(t,i)}</div></div></div>`}renderDropdown(){var e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return html`<div class="filter-dropdown-content"><div class="filter-body">${this.filters.map((e,t)=>this.renderFilterInput(e,t))}</div><div class="filter-footer"><ix-button data-testid="addFilterButton" class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}" appearance="text"><ix-icon slot="icon">add</ix-icon>Add filter</ix-button><ix-button data-testid="clearAllFiltersButton" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}" appearance="text">Clear all</ix-button></div></div>`}render(){return html`<div class="grid-menu"><div class="filter-container tooltip-container">${0<this.activeFilters.length?html`<span class="filter-superscript">${this.activeFilters.length}</span>`:nothing}<ix-button 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>`}},PaginationStyles=(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([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,"maxDate",void 0),__decorate([state()],IxGridRowFilter.prototype,"fromDateErrorText",void 0),__decorate([state()],IxGridRowFilter.prototype,"oldValueLength",void 0),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter),css`:host{--md-filled-select-text-field-input-text-size:var(
4
4
  --ix-filled-select-text-field-input-text-size,
5
5
  12px
6
6
  )}.pagination{display:flex;align-items:center;justify-content:end;gap:0;font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none);margin:1rem}.pagination-nav{display:flex;margin-left:2rem}.rows-per-page{color:var(--clr-on-surface,#092241)}ix-select{--md-menu-container-color:var(--bg-surface-container-lowest, #fff);--md-filled-select-text-field-container-color:var(
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent ix-grid following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "Digital Realty",
6
- "version": "1.2.7",
6
+ "version": "1.2.9",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@digital-realty/ix-button": "^3.3.7",
33
- "@digital-realty/ix-date": "^1.1.12",
33
+ "@digital-realty/ix-date": "^1.1.13",
34
34
  "@digital-realty/ix-icon": "^1.1.7",
35
35
  "@digital-realty/ix-icon-button": "^1.1.7",
36
36
  "@digital-realty/ix-menu": "^1.1.6",
@@ -40,6 +40,7 @@
40
40
  "@lit/react": "^1.0.5",
41
41
  "@vaadin/grid": "^24.3.11",
42
42
  "date-fns": "^4.1.0",
43
+ "date-fns-tz": "^3.2.0",
43
44
  "lit": "^3.2.1",
44
45
  "react": "^18.3.1",
45
46
  "rollup-plugin-replace": "^2.2.0"
@@ -111,5 +112,5 @@
111
112
  "prettier --write"
112
113
  ]
113
114
  },
114
- "gitHead": "93bc03f9cc5f88fa567d500e580403c74a989409"
115
+ "gitHead": "2a00bd82bc2877b0c0e2b52648734a41f07da1d0"
115
116
  }
package/src/components/IxGridRowFilter.ts CHANGED
@@ -3,7 +3,7 @@ import '@digital-realty/ix-date/ix-date.js';
3
3
  import '@digital-realty/ix-icon-button/ix-icon-button.js';
4
4
  import '@digital-realty/ix-icon/ix-icon.js';
5
5
  import '@digital-realty/ix-select/ix-select.js';
6
- import { formatDate } from 'date-fns/format.js';
6
+ import { format } from 'date-fns/format.js';
7
7
  import { LitElement, html, nothing } from 'lit';
8
8
  import { customElement, property, state } from 'lit/decorators.js';
9
9
  import { repeat } from 'lit/directives/repeat.js';
@@ -41,10 +41,12 @@ export class IxGridRowFilter extends LitElement {
41
41
 
42
42
  @state() private mapSelect: boolean = false;
43
43
 
44
- @state() private maxDate = formatDate(new Date(), 'yyyy-MM-dd');
44
+ @state() private maxDate = format(new Date(), 'yyyy-MM-dd');
45
45
 
46
46
  @state() private fromDateErrorText? = '';
47
47
 
48
+ @state() private oldValueLength: number = 0;
49
+
48
50
  private debounceEvent: ReturnType<typeof setTimeout> | undefined;
49
51
 
50
52
  private debouncedOnFilterValueChange: (
@@ -129,7 +131,7 @@ export class IxGridRowFilter extends LitElement {
129
131
  this.dispatchEvent(
130
132
  new CustomEvent('rowFilter', {
131
133
  detail: {
132
- filters: this.filters.filter(filter => filter.value.length >= 3),
134
+ filters: this.filters.filter(filter => filter.value.length),
133
135
  resetPage,
134
136
  },
135
137
  bubbles: true,
@@ -191,9 +193,7 @@ export class IxGridRowFilter extends LitElement {
191
193
 
192
194
  this.filters = [...this.filters];
193
195
 
194
- if (this.filters[index].value.length >= 3) {
195
- this.dispatchUpdate();
196
- }
196
+ this.dispatchUpdate();
197
197
  }
198
198
 
199
199
  private onfilterOperatorChange(index: number, e: Event) {
@@ -202,9 +202,7 @@ export class IxGridRowFilter extends LitElement {
202
202
 
203
203
  this.filters = [...this.filters];
204
204
 
205
- if (this.filters[index].value.length >= 3) {
206
- this.dispatchUpdate();
207
- }
205
+ this.dispatchUpdate();
208
206
  }
209
207
 
210
208
  private onDatefilterValueChange(index: number, value: string) {
@@ -214,18 +212,18 @@ export class IxGridRowFilter extends LitElement {
214
212
  }
215
213
 
216
214
  private onfilterValueChange(index: number, target: EventTarget) {
217
- const oldValueLength = this.filters[index].value.length;
218
215
  const { value } = target as HTMLInputElement;
219
216
  this.filters[index].value = value;
220
217
 
221
218
  const newValueLength = this.filters[index].value.length;
222
219
  if (
223
220
  this.filters[index].columnField.length > 0 &&
224
- (newValueLength >= 3 || newValueLength < oldValueLength)
221
+ (newValueLength >= 3 || newValueLength < this.oldValueLength)
225
222
  ) {
226
223
  this.dispatchUpdate();
227
224
  }
228
225
  this.updateActiveFilters();
226
+ this.oldValueLength = newValueLength;
229
227
  }
230
228
 
231
229
  formatCamelCaseToEnglish(text: string) {
package/src/components/grid-column-filter-styles.ts CHANGED
@@ -86,5 +86,5 @@ export const IxGridColumnFilterStyles = css`
86
86
  .dropdown-content {
87
87
  left: 0;
88
88
  }
89
- }
89
+ }
90
90
  `;
package/src/components/grid-row-filter-styles.ts CHANGED
@@ -297,5 +297,5 @@ export const IxGridRowFilterStyles = css`
297
297
  right: inherit;
298
298
  top: 0;
299
299
  }
300
- }
300
+ }
301
301
  `;
package/src/grid-view-styles.ts CHANGED
@@ -252,6 +252,6 @@ export const IxGridViewStyles = css`
252
252
  .grid-container {
253
253
  border-radius: 0;
254
254
  box-shadow: none;
255
- }
256
- }
255
+ }
256
+ }
257
257
  `;
package/web-test-runner.config.mjs CHANGED
@@ -17,7 +17,13 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
17
17
  importMapsPlugin({
18
18
  inject: {
19
19
  importMap: {
20
- imports: { 'date-fns/': 'https://cdn.jsdelivr.net/npm/date-fns@4.1.0/' },
20
+ imports: {
21
+ 'date-fns/': 'https://cdn.jsdelivr.net/npm/date-fns@4.1.0/',
22
+ 'date-fns': 'https://cdn.jsdelivr.net/npm/date-fns@4.1.0/index.js',
23
+ 'date-fns/format': 'https://cdn.jsdelivr.net/npm/date-fns@4.1.0/format.js',
24
+ 'date-fns-tz/': 'https://cdn.jsdelivr.net/npm/date-fns-tz@3.2.0/',
25
+ 'date-fns-tz': 'https://cdn.jsdelivr.net/npm/date-fns-tz@3.2.0/dist/esm/index.js',
26
+ },
21
27
  },
22
28
  },
23
29
  }),
@@ -26,7 +32,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
26
32
  /** Resolve bare module imports */
27
33
  nodeResolve: {
28
34
  exportConditions: ['browser', 'development'],
29
- resolveOnly: module => !module.includes('date-fns')
35
+ // resolveOnly: module => !module.includes('date-fns')
30
36
  },
31
37
 
32
38
  port: 8030,