@digital-realty/ix-grid 1.0.49-alpha.0 → 1.0.49-alpha.2

package/dist/components/IxGridNoRows.js

@@ -1,43 +1,45 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { property } from 'lit/decorators.js';
-import '@digital-realty/ix-icon/ix-icon.js';
-export class IxGridNoRows extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.type = 'error';
-        this.icon = 'error';
-        this.message = 'No data to display';
-    }
-    render() {
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+export class IxGridNoRows extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'error';
+        this.icon = 'error';
+        this.message = 'No data to display';
+        this.iconFontSize = '3rem';
+    }
+    render() {
         return html `
-      <div class="container">
+      <div class="container" style="--ix-icon-font-size: ${this.iconFontSize};">
         <ix-icon class="icon ${this.type}">${this.icon}</ix-icon>
         <h2 class="dlr-text-heading">${this.message}</h2>
       </div>
-    `;
-    }
-}
+    `;
+    }
+}
 IxGridNoRows.styles = css `
     .container {
       display: flex;
-      align-items: center;
       justify-content: center;
-      padding: 1rem;
+      align-items: center;
       flex-direction: column;
+      text-align: center;
+      padding: 3.125rem 0;
     }
     .icon {
-      margin: 4rem 0 0;
-      width: var(--no-rows-icon-size, 48px);
-      height: var(--no-rows-icon-size, 48px);
-      --ix-icon-font-size: var(--no-rows-icon-size, 48px);
-      --ix-icon-line-height: var(--no-rows-icon-line-height, 1);
+      user-select: none;
+      display: inline-block;
+      fill: currentcolor;
+      flex-shrink: 0;
+      font-size: 1.5rem;
+      color: rgb(255, 152, 0);
+      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
     }
     .warning,
     .error {
       user-select: none;
-      width: 48px;
-      height: 44px;
       color: var(--clr-warning, #ff9800);
     }
     .critical {
@@ -47,16 +49,27 @@ IxGridNoRows.styles = css `
       font-family: var(--ix-font-family, 'Red Hat Display');
     }
     h2.dlr-text-heading {
-      margin-top: 10px;
+      margin: 0.5rem 0 0;
+      font-family: 'Red Hat Display', sans-serif;
+      font-style: normal;
+      font-size: 1.5rem;
+      line-height: 2rem;
+      letter-spacing: 0em;
+      color: rgb(9, 34, 65);
+      text-align: center;
+      font-weight: 700;
     }
-  `;
-__decorate([
-    property({ type: String })
-], IxGridNoRows.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], IxGridNoRows.prototype, "icon", void 0);
-__decorate([
-    property({ type: String })
-], IxGridNoRows.prototype, "message", void 0);
+  `;
+__decorate([
+    property({ type: String })
+], IxGridNoRows.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], IxGridNoRows.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], IxGridNoRows.prototype, "message", void 0);
+__decorate([
+    property({ type: String })
+], IxGridNoRows.prototype, "iconFontSize", void 0);
 //# sourceMappingURL=IxGridNoRows.js.map

package/dist/components/IxGridNoRows.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["../../src/components/IxGridNoRows.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAkC8B,SAAI,GAAiC,OAAO,CAAC;QAE7C,SAAI,GAAW,OAAO,CAAC;QAEvB,YAAO,GAAW,oBAAoB,CAAC;IAUrE,CAAC;IARC,MAAM;QACJ,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;uCACf,IAAI,CAAC,OAAO;;KAE9C,CAAC;IACJ,CAAC;;AA9CM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BlB,CAAC;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxGridNoRows extends LitElement {\n  static styles = css`\n    .container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 1rem;\n      flex-direction: column;\n    }\n    .icon {\n      margin: 4rem 0 0;\n      width: var(--no-rows-icon-size, 48px);\n      height: var(--no-rows-icon-size, 48px);\n      --ix-icon-font-size: var(--no-rows-icon-size, 48px);\n      --ix-icon-line-height: var(--no-rows-icon-line-height, 1);\n    }\n    .warning,\n    .error {\n      user-select: none;\n      width: 48px;\n      height: 44px;\n      color: var(--clr-warning, #ff9800);\n    }\n    .critical {\n      color: var(--clr-critical, #db0028);\n    }\n    h2 {\n      font-family: var(--ix-font-family, 'Red Hat Display');\n    }\n    h2.dlr-text-heading {\n      margin-top: 10px;\n    }\n  `;\n\n  @property({ type: String }) type: 'warning' | 'info' | 'error' = 'error';\n\n  @property({ type: String }) icon: string = 'error';\n\n  @property({ type: String }) message: string = 'No data to display';\n\n  render() {\n    return html`\n      <div class=\"container\">\n        <ix-icon class=\"icon ${this.type}\">${this.icon}</ix-icon>\n        <h2 class=\"dlr-text-heading\">${this.message}</h2>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxGridNoRows.js","sourceRoot":"","sources":["../../src/components/IxGridNoRows.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAE5C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA2C8B,SAAI,GAAiC,OAAO,CAAC;QAE7C,SAAI,GAAW,OAAO,CAAC;QAEvB,YAAO,GAAW,oBAAoB,CAAC;QAEvC,iBAAY,GAAW,MAAM,CAAC;IAU5D,CAAC;IARC,MAAM;QACJ,OAAO,IAAI,CAAA;2DAC4C,IAAI,CAAC,YAAY;+BAC7C,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;uCACf,IAAI,CAAC,OAAO;;KAE9C,CAAC;IACJ,CAAC;;AAzDM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,CAAC;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAwC;AAEvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA+B","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\nexport class IxGridNoRows extends LitElement {\n  static styles = css`\n    .container {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      flex-direction: column;\n      text-align: center;\n      padding: 3.125rem 0;\n    }\n    .icon {\n      user-select: none;\n      display: inline-block;\n      fill: currentcolor;\n      flex-shrink: 0;\n      font-size: 1.5rem;\n      color: rgb(255, 152, 0);\n      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    .warning,\n    .error {\n      user-select: none;\n      color: var(--clr-warning, #ff9800);\n    }\n    .critical {\n      color: var(--clr-critical, #db0028);\n    }\n    h2 {\n      font-family: var(--ix-font-family, 'Red Hat Display');\n    }\n    h2.dlr-text-heading {\n      margin: 0.5rem 0 0;\n      font-family: 'Red Hat Display', sans-serif;\n      font-style: normal;\n      font-size: 1.5rem;\n      line-height: 2rem;\n      letter-spacing: 0em;\n      color: rgb(9, 34, 65);\n      text-align: center;\n      font-weight: 700;\n    }\n  `;\n\n  @property({ type: String }) type: 'warning' | 'info' | 'error' = 'error';\n\n  @property({ type: String }) icon: string = 'error';\n\n  @property({ type: String }) message: string = 'No data to display';\n\n  @property({ type: String }) iconFontSize: string = '3rem';\n\n  render() {\n    return html`\n      <div class=\"container\" style=\"--ix-icon-font-size: ${this.iconFontSize};\">\n        <ix-icon class=\"icon ${this.type}\">${this.icon}</ix-icon>\n        <h2 class=\"dlr-text-heading\">${this.message}</h2>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/components/IxGridRowFilter.d.ts

@@ -1,41 +1,41 @@
-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 onfilterOperatorChange;
-    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 onfilterOperatorChange;
+    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,161 +1,161 @@
-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() {
-        var _a;
-        const params = new URLSearchParams(window.location.search);
-        const filters = [];
-        for (const [key, value] of params) {
-            const filterOperators = ((_a = this.filterableColumns.find(c => c.name === key)) === null || _a === void 0 ? void 0 : _a.filterOperators) || ['contains'];
-            if (this.filterColumns.includes(key)) {
-                filters.push({
-                    columnField: key,
-                    operatorValue: filterOperators[0],
-                    value,
-                });
-            }
-        }
-        return filters;
-    }
-    dispatchUpdate() {
-        this.dispatchEvent(new CustomEvent('rowFilter', {
-            detail: {
-                filters: this.filters.filter(filter => filter.value.length >= 3),
-            },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    addFilter() {
-        var _a;
-        const nextFilter = this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
-            '';
-        const filterOperators = ((_a = this.filterableColumns.find(c => c.name === nextFilter)) === null || _a === void 0 ? void 0 : _a.filterOperators) || ['contains'];
-        this.filters = [
-            ...this.filters,
-            {
-                columnField: nextFilter,
-                operatorValue: filterOperators[0],
-                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();
-        }
-    }
-    onfilterOperatorChange(index, e) {
-        const selectedValue = e.target.value;
-        this.filters[index].operatorValue = 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() {
+        var _a;
+        const params = new URLSearchParams(window.location.search);
+        const filters = [];
+        for (const [key, value] of params) {
+            const filterOperators = ((_a = this.filterableColumns.find(c => c.name === key)) === null || _a === void 0 ? void 0 : _a.filterOperators) || ['contains'];
+            if (this.filterColumns.includes(key)) {
+                filters.push({
+                    columnField: key,
+                    operatorValue: filterOperators[0],
+                    value,
+                });
+            }
+        }
+        return filters;
+    }
+    dispatchUpdate() {
+        this.dispatchEvent(new CustomEvent('rowFilter', {
+            detail: {
+                filters: this.filters.filter(filter => filter.value.length >= 3),
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    addFilter() {
+        var _a;
+        const nextFilter = this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
+            '';
+        const filterOperators = ((_a = this.filterableColumns.find(c => c.name === nextFilter)) === null || _a === void 0 ? void 0 : _a.filterOperators) || ['contains'];
+        this.filters = [
+            ...this.filters,
+            {
+                columnField: nextFilter,
+                operatorValue: filterOperators[0],
+                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();
+        }
+    }
+    onfilterOperatorChange(index, e) {
+        const selectedValue = e.target.value;
+        this.filters[index].operatorValue = 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) {
-        var _a, _b;
-        const options = [value.columnField, ...this.unselectedFilters];
-        const filterOptions = this.filterableColumns.filter(column => options.includes(column.name));
+      </ul>`;
+    }
+    renderFilterInput(value, index) {
+        var _a, _b;
+        const options = [value.columnField, ...this.unselectedFilters];
+        const filterOptions = this.filterableColumns.filter(column => options.includes(column.name));
         return html `
       <div class="filter-form">
         <div class="filter-remove filter-form-column">
@@ -163,15 +163,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"
             >
@@ -198,7 +198,7 @@ let IxGridRowFilter = class IxGridRowFilter extends LitElement {
                     `)}
                 </select>
               </div>
-            </div>`
+            </div>`
             : nothing}
 
         <div
@@ -266,11 +266,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))}
@@ -292,24 +292,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">
@@ -322,33 +322,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