@digital-realty/ix-grid 1.0.38 → 2.0.0-alpha.0

package/dist/components/IxGridRowFilter.d.ts

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

package/dist/components/IxGridRowFilter.js

@@ -1,148 +1,148 @@
-import { __decorate } from "tslib";
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import '@digital-realty/ix-icon/ix-icon.js';
-import '@digital-realty/ix-icon-button/ix-icon-button.js';
-import '@digital-realty/ix-button/ix-button.js';
-import '@digital-realty/ix-select/ix-select.js';
-import { IxGridViewStyles } from '../grid-view-styles.js';
-import { IxGridRowFilterStyles } from './grid-row-filter-styles.js';
-import { copy } from '../ix-grid-copy.js';
-let IxGridRowFilter = class IxGridRowFilter extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.columns = [];
-        this.isDropdownVisible = false;
-        this.filters = [];
-        this.filterableColumns = [];
-        this.filterColumns = [];
-        this.activeFilters = [];
-        this.mapSelect = false;
-        this.closeOnOuterClick = (e) => {
-            if (!e.composedPath().includes(this)) {
-                this.isDropdownVisible = false;
-            }
-        };
-    }
-    updateActiveFilters() {
-        this.activeFilters = this.filters.filter(filter => filter.value.length > 0);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener('click', this.closeOnOuterClick);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener('click', this.closeOnOuterClick);
-    }
-    firstUpdated() {
-        this.filterableColumns = this.columns.filter(column => column.filterable);
-        this.filterColumns = this.filterableColumns.map(column => column.name);
-        this.filters = this.parseFilterQueryString();
-        if (!this.filters.length) {
-            this.addFilter();
-        }
-        this.updateActiveFilters();
-        this.dispatchUpdate();
-    }
-    get filterNames() {
-        return this.filters.map(filter => filter.columnField);
-    }
-    get unselectedFilters() {
-        return this.filterColumns.filter(f => !this.filterNames.includes(f));
-    }
-    parseFilterQueryString() {
-        const params = new URLSearchParams(window.location.search);
-        const filters = [];
-        for (const [key, value] of params) {
-            if (this.filterColumns.includes(key)) {
-                filters.push({
-                    columnField: key,
-                    operatorValue: 'contains',
-                    value,
-                });
-            }
-        }
-        return filters;
-    }
-    dispatchUpdate() {
-        this.dispatchEvent(new CustomEvent('rowFilter', {
-            detail: {
-                filters: this.filters.filter(filter => filter.value.length >= 3),
-            },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    addFilter() {
-        const nextFilter = this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
-            '';
-        this.filters = [
-            ...this.filters,
-            {
-                columnField: nextFilter,
-                operatorValue: 'contains',
-                value: '',
-            },
-        ];
-        this.updateActiveFilters();
-    }
-    clearFilters() {
-        this.filters = [];
-        this.addFilter();
-        this.dispatchUpdate();
-    }
-    removeFilter(index) {
-        this.filters = this.filters.filter((_, i) => i !== index);
-        this.dispatchUpdate();
-        if (this.filters.length === 0) {
-            this.isDropdownVisible = false;
-            this.addFilter();
-        }
-    }
-    onfilterColumnChange(index, e) {
-        const selectedValue = e.target.value;
-        this.filters[index].columnField = selectedValue;
-        this.filters = [...this.filters];
-        if (this.filters[index].value.length >= 3) {
-            this.dispatchUpdate();
-        }
-    }
-    onfilterValueChange(index, e) {
-        const oldValueLength = this.filters[index].value.length;
-        const { value } = e.target;
-        this.filters[index].value = value;
-        const newValueLength = this.filters[index].value.length;
-        if (this.filters[index].columnField.length > 0 &&
-            (newValueLength >= 3 || newValueLength < oldValueLength)) {
-            this.dispatchUpdate();
-        }
-        this.updateActiveFilters();
-    }
-    formatCamelCaseToEnglish(text) {
-        const spaced = text.replace(/([A-Z])/g, ' $1').toLowerCase();
-        const english = spaced.charAt(0).toUpperCase() + spaced.slice(1);
-        return english;
-    }
-    renderToolTip() {
-        if (this.isDropdownVisible) {
-            return copy.hideFilters;
-        }
-        if (!this.activeFilters.length) {
-            return copy.showFilters;
-        }
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-button/ix-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { IxGridRowFilterStyles } from './grid-row-filter-styles.js';
+import { copy } from '../ix-grid-copy.js';
+let IxGridRowFilter = class IxGridRowFilter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.isDropdownVisible = false;
+        this.filters = [];
+        this.filterableColumns = [];
+        this.filterColumns = [];
+        this.activeFilters = [];
+        this.mapSelect = false;
+        this.closeOnOuterClick = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this.isDropdownVisible = false;
+            }
+        };
+    }
+    updateActiveFilters() {
+        this.activeFilters = this.filters.filter(filter => filter.value.length > 0);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.closeOnOuterClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.closeOnOuterClick);
+    }
+    firstUpdated() {
+        this.filterableColumns = this.columns.filter(column => column.filterable);
+        this.filterColumns = this.filterableColumns.map(column => column.name);
+        this.filters = this.parseFilterQueryString();
+        if (!this.filters.length) {
+            this.addFilter();
+        }
+        this.updateActiveFilters();
+        this.dispatchUpdate();
+    }
+    get filterNames() {
+        return this.filters.map(filter => filter.columnField);
+    }
+    get unselectedFilters() {
+        return this.filterColumns.filter(f => !this.filterNames.includes(f));
+    }
+    parseFilterQueryString() {
+        const params = new URLSearchParams(window.location.search);
+        const filters = [];
+        for (const [key, value] of params) {
+            if (this.filterColumns.includes(key)) {
+                filters.push({
+                    columnField: key,
+                    operatorValue: 'contains',
+                    value,
+                });
+            }
+        }
+        return filters;
+    }
+    dispatchUpdate() {
+        this.dispatchEvent(new CustomEvent('rowFilter', {
+            detail: {
+                filters: this.filters.filter(filter => filter.value.length >= 3),
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    addFilter() {
+        const nextFilter = this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
+            '';
+        this.filters = [
+            ...this.filters,
+            {
+                columnField: nextFilter,
+                operatorValue: 'contains',
+                value: '',
+            },
+        ];
+        this.updateActiveFilters();
+    }
+    clearFilters() {
+        this.filters = [];
+        this.addFilter();
+        this.dispatchUpdate();
+    }
+    removeFilter(index) {
+        this.filters = this.filters.filter((_, i) => i !== index);
+        this.dispatchUpdate();
+        if (this.filters.length === 0) {
+            this.isDropdownVisible = false;
+            this.addFilter();
+        }
+    }
+    onfilterColumnChange(index, e) {
+        const selectedValue = e.target.value;
+        this.filters[index].columnField = selectedValue;
+        this.filters = [...this.filters];
+        if (this.filters[index].value.length >= 3) {
+            this.dispatchUpdate();
+        }
+    }
+    onfilterValueChange(index, e) {
+        const oldValueLength = this.filters[index].value.length;
+        const { value } = e.target;
+        this.filters[index].value = value;
+        const newValueLength = this.filters[index].value.length;
+        if (this.filters[index].columnField.length > 0 &&
+            (newValueLength >= 3 || newValueLength < oldValueLength)) {
+            this.dispatchUpdate();
+        }
+        this.updateActiveFilters();
+    }
+    formatCamelCaseToEnglish(text) {
+        const spaced = text.replace(/([A-Z])/g, ' $1').toLowerCase();
+        const english = spaced.charAt(0).toUpperCase() + spaced.slice(1);
+        return english;
+    }
+    renderToolTip() {
+        if (this.isDropdownVisible) {
+            return copy.hideFilters;
+        }
+        if (!this.activeFilters.length) {
+            return copy.showFilters;
+        }
         return html ` <p>${this.activeFilters.length} ${copy.activeFilter}</p>
       <ul>
         ${this.activeFilters.map(filter => html `<li>
             ${this.formatCamelCaseToEnglish(filter.columnField)}
             ${filter.operatorValue} ${filter.value}
           </li>`)}
-      </ul>`;
-    }
-    renderFilterInput(value, index) {
-        const options = [value.columnField, ...this.unselectedFilters];
-        const filterOptions = this.filterableColumns.filter(column => options.includes(column.name));
+      </ul>`;
+    }
+    renderFilterInput(value, index) {
+        const options = [value.columnField, ...this.unselectedFilters];
+        const filterOptions = this.filterableColumns.filter(column => options.includes(column.name));
         return html `
       <div class="filter-form">
         <div class="filter-remove filter-form-column">
@@ -150,15 +150,15 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
             <ix-icon-button
               icon="close"
               @click=${() => this.removeFilter(index)}
-              @keyDown=${(e) => {
-            if (e.key === ' ' || e.key === 'Enter') {
-                this.removeFilter(index);
-            }
+              @keyDown=${(e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.removeFilter(index);
+            }
         }}
             ></ix-icon-button>
           </div>
         </div>
-        ${this.mapSelect
+        ${this.mapSelect
             ? html `<div
               class="filter-form-column filter-form-column-border filterColumnField"
             >
@@ -185,7 +185,7 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
                     `)}
                 </select>
               </div>
-            </div>`
+            </div>`
             : nothing}
 
         <div
@@ -242,11 +242,11 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
           </div>
         </div>
       </div>
-    `;
-    }
-    renderDropdown() {
-        const disableAddButton = this.filters.length >= this.filterColumns.length ||
-            this.activeFilters.length < this.filters.length;
+    `;
+    }
+    renderDropdown() {
+        const disableAddButton = this.filters.length >= this.filterColumns.length ||
+            this.activeFilters.length < this.filters.length;
         return html ` <div class="filter-dropdown-content">
       <div class="filter-body">
         ${this.filters.map((filter, index) => this.renderFilterInput(filter, index))}
@@ -268,24 +268,24 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
           <span class="add">CLEAR ALL</span>
         </button>
       </div>
-    </div>`;
-    }
-    render() {
+    </div>`;
+    }
+    render() {
         return html ` <div class="grid-menu">
       <div class="filter-container tooltip-container">
-        ${this.activeFilters.length > 0
+        ${this.activeFilters.length > 0
             ? html `<span class="filter-superscript"
               >${this.activeFilters.length}</span
-            >`
+            >`
             : nothing}
         <ix-button
           appearance="text"
           class="filter_list filter-button"
-          @click=${() => {
-            this.isDropdownVisible = !this.isDropdownVisible;
+          @click=${() => {
+            this.isDropdownVisible = !this.isDropdownVisible;
         }}
-          @keyDown=${() => {
-            this.isDropdownVisible = !this.isDropdownVisible;
+          @keyDown=${() => {
+            this.isDropdownVisible = !this.isDropdownVisible;
         }}
         >
           <div class="slot-wrap">
@@ -298,33 +298,33 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
         <div class="tool-tip">${this.renderToolTip()}</div>
         ${this.isDropdownVisible ? this.renderDropdown() : nothing}
       </div>
-    </div>`;
-    }
-};
-IxGridRowFilter.styles = [IxGridViewStyles, IxGridRowFilterStyles];
-__decorate([
-    property({ type: Array })
-], IxGridRowFilter.prototype, "columns", void 0);
-__decorate([
-    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);
-IxGridRowFilter = __decorate([
-    customElement('ix-grid-row-filter')
-], IxGridRowFilter);
-export { IxGridRowFilter };
+    </div>`;
+    }
+};
+IxGridRowFilter.styles = [IxGridViewStyles, IxGridRowFilterStyles];
+__decorate([
+    property({ type: Array })
+], IxGridRowFilter.prototype, "columns", 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);
+IxGridRowFilter = __decorate([
+    customElement('ix-grid-row-filter')
+], IxGridRowFilter);
+export { IxGridRowFilter };
 //# sourceMappingURL=IxGridRowFilter.js.map

package/dist/components/IxPagination.d.ts

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