@3t-transform/threeteeui 1.9.101 → 1.9.103

package/dist/collection/components/molecules/tttx-multiselect-box/tttx-multiselect-box.js

@@ -1,499 +1,499 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h, Host, Fragment } from '@stencil/core';
-import * as DOMPurify from 'dompurify';
-import domSanitiserOptions from '../../../shared/domsanitiser.options';
-export class TttxMultiselectBox {
-  constructor() {
-    this.bodyOffset = {};
-    this.optionsData = null;
-    this.label = undefined;
-    this.inline = undefined;
-    this.placeholder = '';
-    this.searchEnabled = undefined;
-    this.htmlVisibleValue = undefined;
-    this.visibleValue = undefined;
-    this.isLoading = undefined;
-    this.stopLocalSearch = undefined;
-    this.readOnly = undefined;
-    this.priorityLabel = 'Priority Group';
-    this.nonPriorityLabel = 'Non Priority Group';
-    this.open = false;
-    this.unsavedSelectedItems = [];
-    this.searchTerm = '';
-  }
-  handleCloseSelectBox() {
-    this.open = false;
-  }
-  handleBlur() {
-    this.open = false;
-    this.toggleOpen.emit(false);
-  }
-  handleOptionsDataChange() {
-    this.initializeUnsavedSelectedItems();
-  }
-  componentWillLoad() {
-    this.initializeUnsavedSelectedItems();
-  }
-  initializeUnsavedSelectedItems() {
-    this.unsavedSelectedItems = this.safelyCloneArray(typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData);
-    if (this.open) {
-      // if dialog is open then on data change recalculating dropdown offset.
-      this.calculateDropdownMenuOffset();
-    }
-  }
-  /**
-   * We want to generally clone instances of optionsData and unsavedSelectedItems
-   * This is because they may be assigned from each other, but have different purposes
-   * If we don't clone them, changing one may propagate to the others
-   * JSON.parse/stringify will deep clone them, so the references of the array elements will also change
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  safelyCloneArray(arr) {
-    return JSON.parse(JSON.stringify(arr));
-  }
-  onDropdownClicked() {
-    if (this.readOnly)
-      return;
-    this.open = !this.open;
-    this.searchTerm = '';
-    this.calculateDropdownMenuOffset();
-    this.toggleOpen.emit(this.open);
-  }
-  onCancel() {
-    this.open = false;
-    this.unsavedSelectedItems = this.safelyCloneArray(typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData);
-    this.toggleOpen.emit(false);
-  }
-  applyChanges() {
-    this.open = false;
-    this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems));
-  }
-  onItemSelected(option) {
-    const optionIndex = this.unsavedSelectedItems.findIndex((item) => item.value === option.value);
-    this.unsavedSelectedItems[optionIndex] = Object.assign(Object.assign({}, option), { selected: !option.selected });
-    this.unsavedSelectedItems = [...this.unsavedSelectedItems];
-    this.selectItemEvent.emit(option);
-  }
-  dropdownSelectorContent() {
-    if (!this.unsavedSelectedItems.find((item) => item.selected))
-      return h("div", { class: "placeholder" }, this.placeholder);
-    if (this.htmlVisibleValue) {
-      const sanitisedHTML = DOMPurify.sanitize(this.visibleValue, domSanitiserOptions);
-      return h("div", { class: "dropdown-selector-html-content", innerHTML: sanitisedHTML });
-    }
-    return h("div", null, this.visibleValue);
-  }
-  optionFoundInSearchTerm(option) {
-    // Check if local search should be stopped
-    if (this.stopLocalSearch) {
-      return false; // Do not hide options if local search is stopped
-    }
-    // Convert option label and search term to lowercase for case-insensitive comparison
-    const optionLabelLowerCase = option.label.toLowerCase();
-    const searchTermLowerCase = this.searchTerm.toLowerCase();
-    // Check if the search term is not found in the option label
-    const isSearchTermNotFound = !optionLabelLowerCase.includes(searchTermLowerCase);
-    // Return the result of the search term check
-    return isSearchTermNotFound;
-  }
-  renderDropdownOptions(options) {
-    let usingPriority = false;
-    const priorityOptions = [];
-    const nonPriorityOptions = [];
-    for (const option of options) {
-      // using priority groups if any item has the option set, so set true for first found
-      usingPriority = usingPriority || option.prioritise === true;
-      // don't include if it doesn't match the search term when searching
-      if (this.searchEnabled && this.optionFoundInSearchTerm(option))
-        continue;
-      if (option.prioritise === true) {
-        priorityOptions.push(option);
-        continue;
-      }
-      nonPriorityOptions.push(option);
-    }
-    // render priority options at the top of the dropdown list
-    return (h(Fragment, null, usingPriority && priorityOptions.length > 0 &&
-      h(Fragment, null, h("tttx-tag_1_9_101", { class: 'priority-pill', text: this.priorityLabel, color: "#F0F0F0" }), priorityOptions.map((option) => this.dropdownOption(option))), nonPriorityOptions.length > 0 &&
-      h(Fragment, null, usingPriority &&
-        h("tttx-tag_1_9_101", { class: 'priority-pill', text: this.nonPriorityLabel, color: "#F0F0F0" }), nonPriorityOptions.map((option) => this.dropdownOption(option)))));
-  }
-  dropdownOption(option) {
-    // This is tested in e2e tests
-    /* istanbul ignore next */
-    const checkboxIcon = option.selected ? 'check_box' : 'check_box_outline_blank';
-    const checkboxColor = option.selected ? 'blue' : 'grey';
-    if (option.html) {
-      const sanitisedHTML = DOMPurify.sanitize(option.html, domSanitiserOptions);
-      // This is tested in e2e tests
-      /* istanbul ignore next */
-      return (h("div", { class: `dropdown-option ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon_1_9_101", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { innerHTML: sanitisedHTML })));
-    }
-    // This is tested in e2e tests
-    /* istanbul ignore next */
-    return (h("div", { class: `dropdown-option ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon_1_9_101", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { class: "plaintext-option" }, option.label)));
-  }
-  // This is tested in e2e tests
-  /* istanbul ignore next */
-  handleSearchInput(event) {
-    const target = event.target;
-    this.searchTerm = target.value;
-    this.searchDataChanged.emit({ searchTerm: target.value });
-    this.calculateDropdownMenuOffset(); // Dropdown offset recalculation during search.
-  }
-  calculateDropdownMenuOffset() {
-    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
-    const bottomPosY = dropdownSelector.getBoundingClientRect().bottom;
-    const clientRectangle = dropdownSelector.getBoundingClientRect();
-    // (Max list height OR 36px * number of items) + 52px for search bar + 45px for footer + 8px padding at bottom
-    let dropdownMenuMaxHeight = Math.min((288), 36 * this.unsavedSelectedItems.length) + 45 + 8;
-    if (this.searchEnabled)
-      dropdownMenuMaxHeight += 52;
-    if (bottomPosY + dropdownMenuMaxHeight > window.innerHeight) {
-      this.bodyOffset = { top: `${window.innerHeight - (dropdownMenuMaxHeight + 16)}px`, position: 'fixed', width: `${dropdownSelector.offsetWidth}px`, zIndex: '10' };
-    }
-    else {
-      this.bodyOffset = { position: 'fixed', left: clientRectangle.left, top: `${clientRectangle.top}px`, width: (clientRectangle.width - 2) + 'px', zIndex: '10' };
-    }
-  }
-  render() {
-    if (!this.optionsData)
-      return;
-    const chevronIcon = this.open ? 'expand_less' : 'expand_more';
-    const readOnlyClass = this.readOnly ? 'dropdown-read-only' : '';
-    return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: ['dropdown-selector', readOnlyClass].join(' '), onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon_1_9_101", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({}, this.bodyOffset) }, this.searchEnabled &&
-      /* istanbul ignore next */
-      h("div", { class: "searchbox" }, h("tttx-standalone-input_1_9_101", { type: "text", placeholder: 'Search', label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this), inline: true })), h("div", { class: "dropdown-options-list" }, this.isLoading ? (h("tttx-loading-spinner_1_9_101", { class: 'loading-style' })) : (this.renderDropdownOptions(this.unsavedSelectedItems))), h("div", { class: 'footer' }, h("tttx-button_1_9_101", { design: "primary", onClick: this.applyChanges.bind(this) }, "Apply"), h("tttx-button_1_9_101", { onClick: this.onCancel.bind(this) }, "Cancel"))))))));
-  }
-  static get is() { return "tttx-multiselect-box_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-multiselect-box.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-multiselect-box.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "optionsData": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | SelectItem[]",
-          "resolved": "SelectItem[] | string",
-          "references": {
-            "SelectItem": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "options-data",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "inline",
-        "reflect": false
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "searchEnabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "search-enabled",
-        "reflect": false
-      },
-      "htmlVisibleValue": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "html-visible-value",
-        "reflect": false
-      },
-      "visibleValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "visible-value",
-        "reflect": false
-      },
-      "isLoading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-loading",
-        "reflect": false
-      },
-      "stopLocalSearch": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "stop-local-search",
-        "reflect": false
-      },
-      "readOnly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "read-only",
-        "reflect": false
-      },
-      "priorityLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "priority-label",
-        "reflect": false,
-        "defaultValue": "'Priority Group'"
-      },
-      "nonPriorityLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "non-priority-label",
-        "reflect": false,
-        "defaultValue": "'Non Priority Group'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "unsavedSelectedItems": {},
-      "searchTerm": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selectItemEvent",
-        "name": "selectItemEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "SelectItem",
-          "resolved": "SelectItem",
-          "references": {
-            "SelectItem": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        }
-      }, {
-        "method": "toggleOpen",
-        "name": "toggleOpen",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "changesApplied",
-        "name": "changesApplied",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "SelectItem[]",
-          "resolved": "SelectItem[]",
-          "references": {
-            "SelectItem": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        }
-      }, {
-        "method": "searchDataChanged",
-        "name": "searchDataChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ searchTerm: string; }",
-          "resolved": "{ searchTerm: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "optionsData",
-        "methodName": "handleOptionsDataChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "closeSelectBox",
-        "method": "handleCloseSelectBox",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "blur",
-        "method": "handleBlur",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host, Fragment } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxMultiselectBox {
+  constructor() {
+    this.bodyOffset = {};
+    this.optionsData = null;
+    this.label = undefined;
+    this.inline = undefined;
+    this.placeholder = '';
+    this.searchEnabled = undefined;
+    this.htmlVisibleValue = undefined;
+    this.visibleValue = undefined;
+    this.isLoading = undefined;
+    this.stopLocalSearch = undefined;
+    this.readOnly = undefined;
+    this.priorityLabel = 'Priority Group';
+    this.nonPriorityLabel = 'Non Priority Group';
+    this.open = false;
+    this.unsavedSelectedItems = [];
+    this.searchTerm = '';
+  }
+  handleCloseSelectBox() {
+    this.open = false;
+  }
+  handleBlur() {
+    this.open = false;
+    this.toggleOpen.emit(false);
+  }
+  handleOptionsDataChange() {
+    this.initializeUnsavedSelectedItems();
+  }
+  componentWillLoad() {
+    this.initializeUnsavedSelectedItems();
+  }
+  initializeUnsavedSelectedItems() {
+    this.unsavedSelectedItems = this.safelyCloneArray(typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData);
+    if (this.open) {
+      // if dialog is open then on data change recalculating dropdown offset.
+      this.calculateDropdownMenuOffset();
+    }
+  }
+  /**
+   * We want to generally clone instances of optionsData and unsavedSelectedItems
+   * This is because they may be assigned from each other, but have different purposes
+   * If we don't clone them, changing one may propagate to the others
+   * JSON.parse/stringify will deep clone them, so the references of the array elements will also change
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  safelyCloneArray(arr) {
+    return JSON.parse(JSON.stringify(arr));
+  }
+  onDropdownClicked() {
+    if (this.readOnly)
+      return;
+    this.open = !this.open;
+    this.searchTerm = '';
+    this.calculateDropdownMenuOffset();
+    this.toggleOpen.emit(this.open);
+  }
+  onCancel() {
+    this.open = false;
+    this.unsavedSelectedItems = this.safelyCloneArray(typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData);
+    this.toggleOpen.emit(false);
+  }
+  applyChanges() {
+    this.open = false;
+    this.changesApplied.emit(this.safelyCloneArray(this.unsavedSelectedItems));
+  }
+  onItemSelected(option) {
+    const optionIndex = this.unsavedSelectedItems.findIndex((item) => item.value === option.value);
+    this.unsavedSelectedItems[optionIndex] = Object.assign(Object.assign({}, option), { selected: !option.selected });
+    this.unsavedSelectedItems = [...this.unsavedSelectedItems];
+    this.selectItemEvent.emit(option);
+  }
+  dropdownSelectorContent() {
+    if (!this.unsavedSelectedItems.find((item) => item.selected))
+      return h("div", { class: "placeholder" }, this.placeholder);
+    if (this.htmlVisibleValue) {
+      const sanitisedHTML = DOMPurify.sanitize(this.visibleValue, domSanitiserOptions);
+      return h("div", { class: "dropdown-selector-html-content", innerHTML: sanitisedHTML });
+    }
+    return h("div", null, this.visibleValue);
+  }
+  optionFoundInSearchTerm(option) {
+    // Check if local search should be stopped
+    if (this.stopLocalSearch) {
+      return false; // Do not hide options if local search is stopped
+    }
+    // Convert option label and search term to lowercase for case-insensitive comparison
+    const optionLabelLowerCase = option.label.toLowerCase();
+    const searchTermLowerCase = this.searchTerm.toLowerCase();
+    // Check if the search term is not found in the option label
+    const isSearchTermNotFound = !optionLabelLowerCase.includes(searchTermLowerCase);
+    // Return the result of the search term check
+    return isSearchTermNotFound;
+  }
+  renderDropdownOptions(options) {
+    let usingPriority = false;
+    const priorityOptions = [];
+    const nonPriorityOptions = [];
+    for (const option of options) {
+      // using priority groups if any item has the option set, so set true for first found
+      usingPriority = usingPriority || option.prioritise === true;
+      // don't include if it doesn't match the search term when searching
+      if (this.searchEnabled && this.optionFoundInSearchTerm(option))
+        continue;
+      if (option.prioritise === true) {
+        priorityOptions.push(option);
+        continue;
+      }
+      nonPriorityOptions.push(option);
+    }
+    // render priority options at the top of the dropdown list
+    return (h(Fragment, null, usingPriority && priorityOptions.length > 0 &&
+      h(Fragment, null, h("tttx-tag_1_9_103", { class: 'priority-pill', text: this.priorityLabel, color: "#F0F0F0" }), priorityOptions.map((option) => this.dropdownOption(option))), nonPriorityOptions.length > 0 &&
+      h(Fragment, null, usingPriority &&
+        h("tttx-tag_1_9_103", { class: 'priority-pill', text: this.nonPriorityLabel, color: "#F0F0F0" }), nonPriorityOptions.map((option) => this.dropdownOption(option)))));
+  }
+  dropdownOption(option) {
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    const checkboxIcon = option.selected ? 'check_box' : 'check_box_outline_blank';
+    const checkboxColor = option.selected ? 'blue' : 'grey';
+    if (option.html) {
+      const sanitisedHTML = DOMPurify.sanitize(option.html, domSanitiserOptions);
+      // This is tested in e2e tests
+      /* istanbul ignore next */
+      return (h("div", { class: `dropdown-option ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon_1_9_103", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { innerHTML: sanitisedHTML })));
+    }
+    // This is tested in e2e tests
+    /* istanbul ignore next */
+    return (h("div", { class: `dropdown-option ${option.selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, h("tttx-icon_1_9_103", { icon: checkboxIcon, color: checkboxColor, class: 'checkbox-icon' }), h("div", { class: "plaintext-option" }, option.label)));
+  }
+  // This is tested in e2e tests
+  /* istanbul ignore next */
+  handleSearchInput(event) {
+    const target = event.target;
+    this.searchTerm = target.value;
+    this.searchDataChanged.emit({ searchTerm: target.value });
+    this.calculateDropdownMenuOffset(); // Dropdown offset recalculation during search.
+  }
+  calculateDropdownMenuOffset() {
+    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
+    const bottomPosY = dropdownSelector.getBoundingClientRect().bottom;
+    const clientRectangle = dropdownSelector.getBoundingClientRect();
+    // (Max list height OR 36px * number of items) + 52px for search bar + 45px for footer + 8px padding at bottom
+    let dropdownMenuMaxHeight = Math.min((288), 36 * this.unsavedSelectedItems.length) + 45 + 8;
+    if (this.searchEnabled)
+      dropdownMenuMaxHeight += 52;
+    if (bottomPosY + dropdownMenuMaxHeight > window.innerHeight) {
+      this.bodyOffset = { top: `${window.innerHeight - (dropdownMenuMaxHeight + 16)}px`, position: 'fixed', width: `${dropdownSelector.offsetWidth}px`, zIndex: '10' };
+    }
+    else {
+      this.bodyOffset = { position: 'fixed', left: clientRectangle.left, top: `${clientRectangle.top}px`, width: (clientRectangle.width - 2) + 'px', zIndex: '10' };
+    }
+  }
+  render() {
+    if (!this.optionsData)
+      return;
+    const chevronIcon = this.open ? 'expand_less' : 'expand_more';
+    const readOnlyClass = this.readOnly ? 'dropdown-read-only' : '';
+    return (h(Host, { class: this.inline ? 'inline' : 'block' }, this.label && h("div", { class: "label" }, this.label), h("div", { tabindex: "0", class: "dropdown-container" }, h("div", { class: ['dropdown-selector', readOnlyClass].join(' '), onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent(), h("div", { class: "dropdown-selector-chevron" }, h("tttx-icon_1_9_103", { icon: chevronIcon, color: "black" }))), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({}, this.bodyOffset) }, this.searchEnabled &&
+      /* istanbul ignore next */
+      h("div", { class: "searchbox" }, h("tttx-standalone-input_1_9_103", { type: "text", placeholder: 'Search', label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this), inline: true })), h("div", { class: "dropdown-options-list" }, this.isLoading ? (h("tttx-loading-spinner_1_9_103", { class: 'loading-style' })) : (this.renderDropdownOptions(this.unsavedSelectedItems))), h("div", { class: 'footer' }, h("tttx-button_1_9_103", { design: "primary", onClick: this.applyChanges.bind(this) }, "Apply"), h("tttx-button_1_9_103", { onClick: this.onCancel.bind(this) }, "Cancel"))))))));
+  }
+  static get is() { return "tttx-multiselect-box_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-multiselect-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-multiselect-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "optionsData": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | SelectItem[]",
+          "resolved": "SelectItem[] | string",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "options-data",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "searchEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "search-enabled",
+        "reflect": false
+      },
+      "htmlVisibleValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "html-visible-value",
+        "reflect": false
+      },
+      "visibleValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "visible-value",
+        "reflect": false
+      },
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-loading",
+        "reflect": false
+      },
+      "stopLocalSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "stop-local-search",
+        "reflect": false
+      },
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "read-only",
+        "reflect": false
+      },
+      "priorityLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "priority-label",
+        "reflect": false,
+        "defaultValue": "'Priority Group'"
+      },
+      "nonPriorityLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "non-priority-label",
+        "reflect": false,
+        "defaultValue": "'Non Priority Group'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "unsavedSelectedItems": {},
+      "searchTerm": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectItemEvent",
+        "name": "selectItemEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectItem",
+          "resolved": "SelectItem",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "toggleOpen",
+        "name": "toggleOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "changesApplied",
+        "name": "changesApplied",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectItem[]",
+          "resolved": "SelectItem[]",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "searchDataChanged",
+        "name": "searchDataChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ searchTerm: string; }",
+          "resolved": "{ searchTerm: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "optionsData",
+        "methodName": "handleOptionsDataChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "closeSelectBox",
+        "method": "handleCloseSelectBox",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}