@siemens/ix 1.1.0-beta.5 → 1.1.0

package/dist/collection/components/category-filter/category-filter.js

@@ -6,47 +6,36 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { convertToRemString } from '../utils/rwd.util';
 import { InputState } from './input-state';
 import { LogicalFilterOperator } from './logical-filter-operator';
 export class CategoryFilter {
   constructor() {
     this.ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
+    this.documentClickCallback = this.handleDocumentClick.bind(this);
+    this.hasFocus = undefined;
+    this.showCategorySelection = undefined;
     this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
+    this.inputValue = undefined;
+    this.category = undefined;
     this.filterTokens = [];
-    /**
-     * In certain use cases some categories are not available for selection any more.
-     * To allow proper display of set filters with these categories this ID to label mapping can be populated.
-     * Configuration object hash used to supply labels to the filter chips in the input field.
-     * Each ID maps to a string representing the label to display.
-     */
+    this.offsetDropdownX = undefined;
+    this.offsetDropdownY = undefined;
+    this.maxHeightDropdown = undefined;
+    this.maxWidthDropdown = undefined;
+    this.initialState = undefined;
+    this.filterState = undefined;
+    this.placeholder = undefined;
+    this.categories = undefined;
     this.nonSelectableCategories = {};
-    /**
-     * The icon next to the actual text input
-     * Defaults to 'search'
-     */
+    this.suggestions = undefined;
     this.icon = 'search';
-    /**
-     * If set to true allows that a single category can be set more than once.
-     * An already set category will not appear in the category dropdown if set to false.
-     *
-     * Defaults to true
-     */
+    this.hideIcon = undefined;
     this.repeatCategories = true;
-    /**
-     * @deprecated For debugging purposes only!
-     */
     this.tmpDisableScrollIntoView = true;
-    /**
-     * i18n
-     */
     this.labelCategories = 'Categories';
-    /**
-     * i18n
-     */
     this.i18nPlainText = 'Filter by text';
-    this.documentClickCallback = this.handleDocumentClick.bind(this);
   }
   watchFilterState(newValue) {
     this.setFilterState(newValue);
@@ -333,372 +322,366 @@ export class CategoryFilter {
   }
   render() {
     var _a, _b, _c, _d, _e, _f;
-    return (h(Host, null,
-      h("form", { ref: (el) => (this.formElement = el) },
-        h("div", { class: {
-            'form-control': true,
-            'input-container': true,
-            focus: this.hasFocus,
-            'no-icon': this.hideIcon,
-          } },
-          h("ix-icon", { class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }),
-          h("div", { class: "token-container" },
-            h("ul", { class: "list-unstyled" },
-              this.filterTokens.map((value, index) => (h("li", { class: {
-                  animate__animated: true,
-                  animate__fadein: true,
-                } },
-                h("ix-filter-chip", { onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))),
-              this.categories === undefined ? ('') : (h("li", { class: {
-                  'category-preview': true,
-                  'd-none': !this.category,
-                } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)),
-              h("input", { class: {
-                  'text-input': true,
-                  'hide-placeholder': this.category !== undefined,
-                }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder, onFocus: () => this.openCategorySelection() }))),
-          h("button", { class: {
-              btn: true,
-              'btn-invisible-secondary': true,
-              'btn-oval': true,
-              'btn-close': true,
-              'd-none': !this.filterTokens.length && !this.category,
-            }, onClick: () => this.resetFilter(), tabindex: "1" },
-            h("span", { class: "glyph glyph-error glyph-16" })))),
-      h("div", { class: {
-          'category-selection-container': true,
-          'd-none': !this.showCategorySelection && this.category === undefined,
-        }, style: {
-          left: this.offsetDropdownX,
-          top: this.offsetDropdownY,
-          'max-width': this.maxWidthDropdown,
-          'max-height': this.maxHeightDropdown,
-        } },
-        h("div", { class: {
-            'd-none': !this.showCategorySelection || this.category !== undefined,
-          } },
-          h("div", { class: {
-              'category-item-header': true,
-              'd-none': this.getCategoryLables().filter((value) => this.filterByInput(value)).length === 0,
-            } }, this.labelCategories), (_b = this.getCategoryIds()) === null || _b === void 0 ? void 0 :
-          _b.filter((id) => this.filterByInput(this.categories[id].label)).filter((id) => this.filterMultiples(id)).map((id) => {
-            var _a;
-            return (h("div", { "data-id": id, title: id, class: "category-item category-item-id", onClick: () => this.selectCategory(id), tabindex: "0" }, (_a = this.categories[id]) === null || _a === void 0 ? void 0 : _a.label));
-          })),
-        h("div", { class: {
-            'd-none': this.category === undefined,
-          } },
-          h("button", { class: "btn btn-invisible-secondary btn-icon", onClick: () => this.toggleCategoryOperator(), tabindex: "-1" }, this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
-            ? '='
-            : '!='),
-          this.categories === undefined ? ('') : (h("div", { class: "category-item-header" }, (_c = this.categories[this.category]) === null || _c === void 0 ? void 0 : _c.label)),
-          this.categories === undefined
-            ? ''
-            : (_d = this.categories[this.category]) === null || _d === void 0 ? void 0 : _d.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("div", { "data-id": id, title: id, class: "category-item category-item-value", onClick: () => this.addToken(id, this.category), tabindex: "0" }, `${this.categoryLogicalOperator ===
-              LogicalFilterOperator.EQUAL
-              ? '='
-              : '!='} ${id}`)))),
-        h("div", { class: {
-            'category-item-header': true,
-            'd-none': this.category !== undefined ||
-              this.getCategoryIds().filter((value) => this.filterByInput(value)).length > 0,
-          } }, this.i18nPlainText),
-        h("div", { class: {
-            'd-none': !((_e = this.suggestions) === null || _e === void 0 ? void 0 : _e.length) || this.category !== undefined,
-          } }, (_f = this.suggestions) === null || _f === void 0 ? void 0 : _f.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((suggestion) => (h("div", { "data-id": suggestion, class: "category-item plain-text-suggestion", onClick: () => this.addToken(suggestion), tabindex: "0" }, suggestion)))))));
+    return (h(Host, null, h("form", { ref: (el) => (this.formElement = el) }, h("div", { class: {
+        'form-control': true,
+        'input-container': true,
+        focus: this.hasFocus,
+        'no-icon': this.hideIcon,
+      } }, h("ix-icon", { class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { class: "token-container" }, h("ul", { class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { class: {
+        animate__animated: true,
+        animate__fadein: true,
+      } }, h("ix-filter-chip", { onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("li", { class: {
+        'category-preview': true,
+        'd-none': !this.category,
+      } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { class: {
+        'text-input': true,
+        'hide-placeholder': this.category !== undefined,
+      }, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder, onFocus: () => this.openCategorySelection() }))), h("button", { class: {
+        btn: true,
+        'btn-invisible-secondary': true,
+        'btn-oval': true,
+        'btn-close': true,
+        'd-none': !this.filterTokens.length && !this.category,
+      }, onClick: () => this.resetFilter(), tabindex: "1" }, h("span", { class: "glyph glyph-error glyph-16" })))), h("div", { class: {
+        'category-selection-container': true,
+        'd-none': !this.showCategorySelection && this.category === undefined,
+      }, style: {
+        left: this.offsetDropdownX,
+        top: this.offsetDropdownY,
+        'max-width': this.maxWidthDropdown,
+        'max-height': this.maxHeightDropdown,
+      } }, h("div", { class: {
+        'd-none': !this.showCategorySelection || this.category !== undefined,
+      } }, h("div", { class: {
+        'category-item-header': true,
+        'd-none': this.getCategoryLables().filter((value) => this.filterByInput(value)).length === 0,
+      } }, this.labelCategories), (_b = this.getCategoryIds()) === null || _b === void 0 ? void 0 :
+      _b.filter((id) => this.filterByInput(this.categories[id].label)).filter((id) => this.filterMultiples(id)).map((id) => {
+        var _a;
+        return (h("div", { "data-id": id, title: id, class: "category-item category-item-id", onClick: () => this.selectCategory(id), tabindex: "0" }, (_a = this.categories[id]) === null || _a === void 0 ? void 0 : _a.label));
+      })), h("div", { class: {
+        'd-none': this.category === undefined,
+      } }, h("button", { class: "btn btn-invisible-secondary btn-icon", onClick: () => this.toggleCategoryOperator(), tabindex: "-1" }, this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
+      ? '='
+      : '!='), this.categories === undefined ? ('') : (h("div", { class: "category-item-header" }, (_c = this.categories[this.category]) === null || _c === void 0 ? void 0 : _c.label)), this.categories === undefined
+      ? ''
+      : (_d = this.categories[this.category]) === null || _d === void 0 ? void 0 : _d.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("div", { "data-id": id, title: id, class: "category-item category-item-value", onClick: () => this.addToken(id, this.category), tabindex: "0" }, `${this.categoryLogicalOperator ===
+        LogicalFilterOperator.EQUAL
+        ? '='
+        : '!='} ${id}`)))), h("div", { class: {
+        'category-item-header': true,
+        'd-none': this.category !== undefined ||
+          this.getCategoryIds().filter((value) => this.filterByInput(value)).length > 0,
+      } }, this.i18nPlainText), h("div", { class: {
+        'd-none': !((_e = this.suggestions) === null || _e === void 0 ? void 0 : _e.length) || this.category !== undefined,
+      } }, (_f = this.suggestions) === null || _f === void 0 ? void 0 : _f.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((suggestion) => (h("div", { "data-id": suggestion, class: "category-item plain-text-suggestion", onClick: () => this.addToken(suggestion), tabindex: "0" }, suggestion)))))));
   }
   static get is() { return "ix-category-filter"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["category-filter.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["category-filter.css"]
-  }; }
-  static get properties() { return {
-    "initialState": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "FilterState",
-        "resolved": "FilterState",
-        "references": {
-          "FilterState": {
-            "location": "import",
-            "path": "./filter-state"
+  static get originalStyleUrls() {
+    return {
+      "$": ["category-filter.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["category-filter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "initialState": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FilterState",
+          "resolved": "FilterState",
+          "references": {
+            "FilterState": {
+              "location": "import",
+              "path": "./filter-state"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "will get removed with next major release (7.0.0). Use the member filterState instead."
+            }],
+          "text": "When set this will initially populate the component with the provided search criteria.\nThis will trigger all input events accordingly."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "will get removed with next major release (7.0.0). Use the member filterState instead."
-          }],
-        "text": "When set this will initially populate the component with the provided search criteria.\nThis will trigger all input events accordingly."
-      }
-    },
-    "filterState": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "FilterState",
-        "resolved": "FilterState",
-        "references": {
-          "FilterState": {
-            "location": "import",
-            "path": "./filter-state"
+      "filterState": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FilterState",
+          "resolved": "FilterState",
+          "references": {
+            "FilterState": {
+              "location": "import",
+              "path": "./filter-state"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A set of search criteria to populate the component with."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A set of search criteria to populate the component with."
-      }
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Placeholder text to be displayed in an empty input field."
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "categories": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{\n    [id: string]: {\n      label: string;\n      options: string[];\n    };\n  }",
-        "resolved": "{ [id: string]: { label: string; options: string[]; }; }",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\nEach ID maps to an object with a label and an array of options to select from."
-      }
-    },
-    "nonSelectableCategories": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{\n    [id: string]: string;\n  }",
-        "resolved": "{ [id: string]: string; }",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "In certain use cases some categories are not available for selection any more.\nTo allow proper display of set filters with these categories this ID to label mapping can be populated.\nConfiguration object hash used to supply labels to the filter chips in the input field.\nEach ID maps to a string representing the label to display."
-      },
-      "defaultValue": "{}"
-    },
-    "suggestions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A list of strings that will be supplied as typeahead suggestions not tied to any categories."
-      }
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The icon next to the actual text input\nDefaults to 'search'"
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text to be displayed in an empty input field."
+        },
+        "attribute": "placeholder",
+        "reflect": false
       },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "'search'"
-    },
-    "hideIcon": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Allows to hide the icon inside the text input.\nDefaults to false"
-      },
-      "attribute": "hide-icon",
-      "reflect": false
-    },
-    "repeatCategories": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "categories": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    [id: string]: {\n      label: string;\n      options: string[];\n    };\n  }",
+          "resolved": "{ [id: string]: { label: string; options: string[]; }; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\nEach ID maps to an object with a label and an array of options to select from."
+        }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set to true allows that a single category can be set more than once.\nAn already set category will not appear in the category dropdown if set to false.\n\nDefaults to true"
+      "nonSelectableCategories": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    [id: string]: string;\n  }",
+          "resolved": "{ [id: string]: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "In certain use cases some categories are not available for selection any more.\nTo allow proper display of set filters with these categories this ID to label mapping can be populated.\nConfiguration object hash used to supply labels to the filter chips in the input field.\nEach ID maps to a string representing the label to display."
+        },
+        "defaultValue": "{}"
       },
-      "attribute": "repeat-categories",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tmpDisableScrollIntoView": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "suggestions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A list of strings that will be supplied as typeahead suggestions not tied to any categories."
+        }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "For debugging purposes only!"
-          }],
-        "text": ""
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon next to the actual text input\nDefaults to 'search'"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "'search'"
       },
-      "attribute": "tmp-disable-scroll-into-view",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "labelCategories": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "hideIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Allows to hide the icon inside the text input.\nDefaults to false"
+        },
+        "attribute": "hide-icon",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "i18n"
+      "repeatCategories": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set to true allows that a single category can be set more than once.\nAn already set category will not appear in the category dropdown if set to false.\n\nDefaults to true"
+        },
+        "attribute": "repeat-categories",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "label-categories",
-      "reflect": false,
-      "defaultValue": "'Categories'"
-    },
-    "i18nPlainText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "tmpDisableScrollIntoView": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "For debugging purposes only!"
+            }],
+          "text": ""
+        },
+        "attribute": "tmp-disable-scroll-into-view",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "i18n"
+      "labelCategories": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "i18n"
+        },
+        "attribute": "label-categories",
+        "reflect": false,
+        "defaultValue": "'Categories'"
       },
-      "attribute": "i-1-8n-plain-text",
-      "reflect": false,
-      "defaultValue": "'Filter by text'"
-    }
-  }; }
-  static get states() { return {
-    "hasFocus": {},
-    "showCategorySelection": {},
-    "categoryLogicalOperator": {},
-    "inputValue": {},
-    "category": {},
-    "filterTokens": {},
-    "offsetDropdownX": {},
-    "offsetDropdownY": {},
-    "maxHeightDropdown": {},
-    "maxWidthDropdown": {}
-  }; }
-  static get events() { return [{
-      "method": "inputChanged",
-      "name": "inputChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event dispatched whenever the text input changes."
-      },
-      "complexType": {
-        "original": "InputState",
-        "resolved": "InputState",
-        "references": {
-          "InputState": {
-            "location": "import",
-            "path": "./input-state"
+      "i18nPlainText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "i18n"
+        },
+        "attribute": "i-1-8n-plain-text",
+        "reflect": false,
+        "defaultValue": "'Filter by text'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {},
+      "showCategorySelection": {},
+      "categoryLogicalOperator": {},
+      "inputValue": {},
+      "category": {},
+      "filterTokens": {},
+      "offsetDropdownX": {},
+      "offsetDropdownY": {},
+      "maxHeightDropdown": {},
+      "maxWidthDropdown": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "inputChanged",
+        "name": "inputChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event dispatched whenever the text input changes."
+        },
+        "complexType": {
+          "original": "InputState",
+          "resolved": "InputState",
+          "references": {
+            "InputState": {
+              "location": "import",
+              "path": "./input-state"
+            }
           }
         }
-      }
-    }, {
-      "method": "filterChanged",
-      "name": "filterChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event dispatched whenever the filter state changes."
-      },
-      "complexType": {
-        "original": "FilterState",
-        "resolved": "FilterState",
-        "references": {
-          "FilterState": {
-            "location": "import",
-            "path": "./filter-state"
+      }, {
+        "method": "filterChanged",
+        "name": "filterChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event dispatched whenever the filter state changes."
+        },
+        "complexType": {
+          "original": "FilterState",
+          "resolved": "FilterState",
+          "references": {
+            "FilterState": {
+              "location": "import",
+              "path": "./filter-state"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "filterState",
-      "methodName": "watchFilterState"
-    }, {
-      "propName": "showCategorySelection",
-      "methodName": "watchShowCategorySelection"
-    }]; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "setDropdownOffset",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "filterState",
+        "methodName": "watchFilterState"
+      }, {
+        "propName": "showCategorySelection",
+        "methodName": "watchShowCategorySelection"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "setDropdownOffset",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }