@3t-transform/threeteeui 0.1.8 → 0.1.10

package/dist/cjs/tttx.cjs.js

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-8ba406f6.js');
+const index = require('./index-dc6cc829.js');
 
 /*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tttx.cjs.js', document.baseURI).href));
@@ -17,7 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[16],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"showPopover":[32],"selectedFilters":[32],"filterSearchTerm":[32],"displayedFilterSettings":[32],"allSelected":[32]}]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputicon":[1],"inline":[4],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
 });
-
-exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/molecules/tttx-filter/tttx-filter.js",
     "./components/molecules/tttx-standalone-input/tttx-standalone-input.js",
     "./components/atoms/tttx-button/tttx-button.js",
     "./components/atoms/tttx-icon/tttx-icon.js",
@@ -11,8 +12,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.3",
-    "typescriptVersion": "4.9.4"
+    "version": "2.20.0",
+    "typescriptVersion": "4.8.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css

@@ -23,6 +23,10 @@ dt.mainTitle {
   color: #212121;
 }
 
+dt, dd {
+  overflow-wrap: anywhere;
+}
+
 dd {
   margin: 0;
   font-weight: 400;

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js

@@ -21,10 +21,11 @@ export class TttxKeyvalueBlock {
   }
   renderArrayElements(values) {
     const elements = [];
+    const divSize = (100 / values.length).toString();
     for (let i = 0; i < values.length; i++) {
       const value = values[i];
       if (this.horizontal) {
-        elements.push(h("div", null, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
+        elements.push(h("div", { style: { maxWidth: divSize } }, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
       }
       else {
         elements.push(h("dt", { class: 'mainTitle' }, value.title));

package/dist/collection/components/molecules/tttx-filter/tttx-filter.css

@@ -0,0 +1,215 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+.material-symbols-rounded {
+  font-family: "Material Symbols Rounded", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  color: #9e9e9e;
+}
+
+.filter-container .filter-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: "Roboto", serif;
+  text-transform: uppercase;
+  color: #212121;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  background: transparent;
+  height: 36px;
+  width: 95px;
+  margin: 0;
+  padding-right: 16px;
+}
+.filter-container .filter-button .filter-icon {
+  padding-left: 8px;
+  padding-right: 4px;
+}
+.filter-container .filter-button.--list-icon {
+  font-size: 0;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+}
+.filter-container .filter-button.--list-icon .filter-icon {
+  padding: 0;
+}
+.filter-container .filter-button.--list-icon:hover {
+  background: #e3e3e3;
+}
+.filter-container .filter-button.--table-icon {
+  font-size: 0;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+}
+.filter-container .filter-button.--table-icon .filter-icon {
+  padding: 0;
+  width: 24px;
+  height: 24px;
+}
+.filter-container .filter-button.--table-icon:hover {
+  background: #e3e3e3;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+}
+.filter-container .filter-button:hover {
+  background: #e3e3e3;
+}
+.filter-container .filter-popover-container {
+  display: block;
+  width: 196px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 5px #1111114D;
+  position: absolute;
+}
+.filter-container .filter-popover-container .filter-header {
+  color: #757575;
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: "Roboto", serif;
+  padding-left: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  margin: 0;
+}
+.filter-container .filter-popover-container .popover-divider {
+  border: none;
+  width: 164px;
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+  margin-bottom: 8px;
+  height: 1px;
+  background-color: #d5d5d5;
+}
+.filter-container .filter-popover-container .filter-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 36px;
+  padding-left: 22px;
+  padding-bottom: 4px;
+}
+.filter-container .filter-popover-container .filter-option .select-all-icon {
+  padding-right: 6px;
+}
+.filter-container .filter-popover-container .filter-option .checkbox-icon {
+  padding-right: 8px;
+}
+.filter-container .filter-popover-container .filter-option .filter-label {
+  padding-left: 8px;
+  padding-bottom: 3px;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: "Roboto", serif;
+}
+.filter-container .filter-popover-container .filter-option:first-child {
+  margin-top: 8px;
+}
+.filter-container .filter-popover-container .filter-option:last-child {
+  margin-bottom: 8px;
+}
+.filter-container .filter-popover-container .filter-popover-button-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-bottom: 8px;
+}
+.filter-container .filter-popover-container .filter-popover-button-container .close-button {
+  height: 36px;
+  width: 74px;
+  background-color: white;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  text-transform: uppercase;
+  margin-right: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: "Roboto", serif;
+}
+.filter-container .filter-popover-container .filter-popover-button-container .apply-button {
+  height: 36px;
+  width: 73px;
+  background-color: #1479c6;
+  color: white;
+  border-radius: 4px;
+  border: none;
+  text-transform: uppercase;
+  margin-right: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: "Roboto", serif;
+}
+.filter-container .filter-popover-container.--with-search-field {
+  width: 252px;
+}
+.filter-container .filter-popover-container.--with-search-field .popover-divider {
+  width: 220px;
+}
+.filter-container .filter-popover-container.--with-search-field .popover-divider:first-child {
+  top: 44px;
+}
+.filter-container .filter-popover-container.--with-search-field .search-field-container {
+  position: relative;
+  color: #d5d5d5;
+  width: 220px;
+  height: 36px;
+  padding: 0 16px;
+}
+.filter-container .filter-popover-container.--with-search-field .search-field-container .search-icon {
+  position: absolute;
+  top: 50%;
+  padding-left: 8px;
+  padding-bottom: 9.2px;
+  height: 17px;
+  width: 17px;
+  transform: translateY(-50%);
+}
+.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input {
+  padding-left: 36px;
+  border: 1px solid #d5d5d5;
+  border-radius: 4px;
+  height: 36px;
+  width: 220px;
+  font-size: 16px;
+  font-family: "Roboto", serif;
+  font-weight: 500;
+  color: #9e9e9e;
+  box-sizing: border-box;
+}
+.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus-visible, .filter-container .filter-popover-container.--with-search-field .search-field-container .search-input:focus {
+  outline: none;
+  border: 1px solid #1479c6;
+}
+.filter-container .filter-popover-container.--with-search-field .search-field-container .search-input::placeholder {
+  color: #9e9e9e;
+  font-size: 16px;
+  font-family: "Roboto", serif;
+  font-weight: 500;
+}
+.filter-container .filter-popover-container.--with-search-field .search-field-container .popover-divider {
+  margin-top: 8px;
+}
+.filter-container .filter-popover-container.--with-search-field .filter-option:first-child {
+  padding-top: 8px;
+}

package/dist/collection/components/molecules/tttx-filter/tttx-filter.js

@@ -0,0 +1,325 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from '@stencil/core';
+export class TttxFilter {
+  constructor() {
+    this.filterKey = undefined;
+    this.filterOptions = [
+      { optionIcon: 'cancel', optionIconColor: 'darkred', optionText: 'Expired' },
+      { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },
+      { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },
+    ];
+    this.showSelectAll = true;
+    this.showSearchField = false;
+    this.showOptionIcons = true;
+    this.filterButtonStyle = 'list filter';
+    this.filterHeader = 'Qualification status';
+    this.showPopover = false;
+    this.selectedFilters = this.filterOptions.map((filterOption) => filterOption.optionText);
+    this.filterSearchTerm = '';
+    this.displayedFilterSettings = this.filterOptions;
+    this.allSelected = true;
+  }
+  emitFilterEvent() {
+    this.filterChangeEvent.emit({
+      selectedFilters: this.selectedFilters,
+      filterKey: this.filterKey,
+      allSelected: this.allSelected,
+    });
+  }
+  onFilterButtonClick() {
+    this.togglePopover();
+  }
+  onCloseButtonClick() {
+    this.togglePopover();
+  }
+  onApplyFilterButtonClick() {
+    this.emitFilterEvent();
+    this.togglePopover();
+  }
+  onFilterOptionSelected(selectedOption) {
+    this.allSelected = false;
+    if (this.selectedFilters.includes(selectedOption)) {
+      this.selectedFilters = this.selectedFilters.filter((filter) => filter != selectedOption);
+    }
+    else {
+      this.selectedFilters = [...this.selectedFilters, selectedOption];
+    }
+  }
+  togglePopover() {
+    this.showPopover = !this.showPopover;
+    //     if(!this.showPopover) {
+    //         // this._focussedElementIndex = -1;
+    //     }
+  }
+  // Commented out keyboard interaction for now
+  // @Listen('keyup')
+  // handleKeyUp(event: KeyboardEvent) {
+  //     const keyboardEventValue = event.key;
+  //     if (document.activeElement.id != `filter__${this.filterKey}`) return;
+  //     if (event.key == " " || event.code == "Space" || event.keyCode == 32) {
+  //         if (this._focussedElementIndex == 0) {
+  //             this.onSelectAllClick()
+  //         } else {
+  //             const options = this.el.shadowRoot.querySelectorAll('.filter-option') as HTMLElement[];
+  //             this.onFilterOptionSelected(options[this._focussedElementIndex].textContent)
+  //         }
+  //         return;
+  //     }
+  //     switch (keyboardEventValue) {
+  //         case 'Enter':
+  //         if(!this.showPopover) {
+  //             this.showPopover=true
+  //         } else {
+  //             this.emitFilterEvent()
+  //         }
+  //             break;
+  //         case 'Escape':
+  //             this.showPopover = false;
+  //             this._focussedElementIndex = -1;
+  //             break;
+  //         case 'ArrowDown':
+  //             this.showPopover = true;
+  //             if (this._focussedElementIndex == -1) {
+  //                 this._focussedElementIndex = 0;
+  //             } else {
+  //                 const options = this.el.shadowRoot.querySelectorAll('.filter-option') as HTMLElement[];
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 // options[this._focussedElementIndex].focus();
+  //                 this._focussedElementIndex + 1 < options.length ? this._focussedElementIndex++ : (this._focussedElementIndex = 0);
+  //             }
+  //             break;
+  //         case 'ArrowUp':
+  //             if (this._focussedElementIndex == -1) {
+  //                 this.showPopover = true;
+  //                 this._focussedElementIndex = 0;
+  //             } else {
+  //                 const options = this.el.shadowRoot.querySelectorAll('.filter-option') as HTMLElement[];
+  //                 const currentOption = options[this._focussedElementIndex] as HTMLElement;
+  //                 currentOption.blur();
+  //                 // options[this._focussedElementIndex].focus();
+  //                 this._focussedElementIndex > 0 ? this._focussedElementIndex-- : (this._focussedElementIndex = options.length - 1);
+  //             }
+  //             break;
+  //     }
+  // }
+  handleFilterChange(event) {
+    const target = event.target;
+    this.filterSearchTerm = target.value;
+    const filteredResults = this.filterOptions.filter((filterOption) => {
+      const lowercaseOption = filterOption.optionText.toLowerCase();
+      const filterTerm = this.filterSearchTerm.toLowerCase();
+      return lowercaseOption.includes(filterTerm);
+    });
+    this.displayedFilterSettings = filteredResults;
+  }
+  onSelectAllClick() {
+    this.allSelected = !this.allSelected;
+    if (this.allSelected) {
+      this.displayedFilterSettings.forEach((filterSetting) => { this.selectedFilters = [...this.selectedFilters, filterSetting.optionText]; });
+    }
+    else {
+      this.selectedFilters = [];
+    }
+  }
+  getFilterButtonClassName(buttonStyle) {
+    switch (buttonStyle) {
+      case 'table icon': {
+        return '--table-icon';
+      }
+      case 'list icon': {
+        return '--list-icon';
+      }
+      default: {
+        return '';
+      }
+    }
+  }
+  render() {
+    const filterPopoverContainerClassNameModifier = this.showSearchField ? '--with-search-field' : '';
+    const selectAllCheckboxIcon = this.allSelected ? 'check_box' : 'check_box_outline_blank';
+    const selectAllCheckboxColor = this.allSelected ? 'blue' : 'grey';
+    const buttonStyleClassNameModifier = this.getFilterButtonClassName(this.filterButtonStyle);
+    const filterKey = `filter__${this.filterKey}`;
+    return (h(Host, { id: filterKey }, h("div", { class: 'filter-container' }, h("button", { class: `filter-button ${buttonStyleClassNameModifier}`, type: 'button', onClick: this.onFilterButtonClick.bind(this) }, h("tttx-icon", { icon: 'filter_list', class: 'filter-icon', color: 'black' }), "Filter"), this.showPopover && (h("div", { class: `filter-popover-container ${filterPopoverContainerClassNameModifier}` }, h("h4", { class: 'filter-header' }, this.filterHeader), h("hr", { class: 'popover-divider' }), this.showSearchField ? (h("div", { class: 'search-field-container' }, h("tttx-icon", { icon: 'search', class: 'search-icon' }), h("input", { type: 'text', class: 'search-input', placeholder: 'Search', value: this.filterSearchTerm, onInput: this.handleFilterChange.bind(this) }), h("hr", { class: 'popover-divider' }))) : (''), h("div", { class: 'filter-options-container' }, this.showSelectAll ? (h("div", { class: 'filter-option', tabIndex: -1, onClick: this.onSelectAllClick.bind(this) }, h("tttx-icon", { icon: selectAllCheckboxIcon, color: selectAllCheckboxColor, class: 'select-all-icon' }), h("label", { class: 'filter-label' }, "Select all"))) : (''), this.displayedFilterSettings.map((option) => {
+      const checkboxIcon = this.selectedFilters.includes(option.optionText) ? 'check_box' : 'check_box_outline_blank';
+      const checkboxColor = this.selectedFilters.includes(option.optionText) ? 'blue' : 'grey';
+      return h("div", { class: 'filter-option', tabIndex: -1, onClick: () => this.onFilterOptionSelected(option.optionText), key: option.optionText }, h("tttx-icon", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), this.showOptionIcons && h("tttx-icon", { icon: option.optionIcon, color: option.optionIconColor }), h("label", { class: 'filter-label' }, option.optionText));
+    })), h("hr", { class: 'popover-divider' }), h("div", { class: 'filter-popover-button-container' }, h("button", { type: 'button', class: 'close-button', onClick: this.onCloseButtonClick.bind(this) }, "Close"), h("button", { type: 'button', class: 'apply-button', onClick: this.onApplyFilterButtonClick.bind(this) }, "Apply")))))));
+  }
+  static get is() { return "tttx-filter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-filter.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-filter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "filterKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-key",
+        "reflect": false
+      },
+      "filterOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FilterSettings[]",
+          "resolved": "FilterSettings[]",
+          "references": {
+            "FilterSettings": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[\n        { optionIcon: 'cancel', optionIconColor: 'darkred', optionText: 'Expired' },\n        { optionIcon: 'warning', optionIconColor: 'orange', optionText: 'Expiring soon' },\n        { optionIcon: 'check_circle', optionIconColor: 'green', optionText: 'Active' },\n    ]"
+      },
+      "showSelectAll": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-select-all",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showSearchField": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-search-field",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showOptionIcons": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-option-icons",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "filterButtonStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'list filter' | 'list icon' | 'table icon'",
+          "resolved": "\"list filter\" | \"list icon\" | \"table icon\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-button-style",
+        "reflect": false,
+        "defaultValue": "'list filter'"
+      },
+      "filterHeader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filter-header",
+        "reflect": false,
+        "defaultValue": "'Qualification status'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "showPopover": {},
+      "selectedFilters": {},
+      "filterSearchTerm": {},
+      "displayedFilterSettings": {},
+      "allSelected": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "filterChangeEvent",
+        "name": "filterChangeEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FilterChangeEvent",
+          "resolved": "FilterChangeEvent",
+          "references": {
+            "FilterChangeEvent": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}