@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,671 +1,671 @@
-// 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 TttxSelectBox {
-  constructor() {
-    this.bodyOffset = {};
-    this.closeSelectBoxHandler = () => {
-      if (this.open) {
-        this.open = false;
-      }
-    };
-    this.optionsData = null;
-    this.label = undefined;
-    this.inline = undefined;
-    this.placeholder = '';
-    this.searchEnabled = undefined;
-    this.selectedValue = undefined;
-    this.useExternalFiltering = undefined;
-    this.useExternalPaginatedFiltering = undefined;
-    this.isAllExternalDataLoaded = undefined;
-    this.isLoading = undefined;
-    this.readOnly = undefined;
-    this.priorityLabel = 'Priority Group';
-    this.nonPriorityLabel = 'Non Priority Group';
-    this.clearable = false;
-    this.showErrorMsg = undefined;
-    this.showErrorBubble = false;
-    this.errorMsg = undefined;
-    this.open = false;
-    this.selectedItem = undefined;
-    this.searchTerm = '';
-    this.loadingNextExternalPage = false;
-  }
-  async componentWillLoad() {
-    if (this.optionsData) {
-      this.setOptionsData();
-      const matchingItems = this._optionsData.filter((item) => {
-        return item.value == this.selectedValue;
-      });
-      this.selectedItem = matchingItems.length > 0 ? matchingItems[0] : undefined;
-    }
-    this._isAllExternalDataLoaded = this.isAllExternalDataLoaded;
-  }
-  async setOptionsData() {
-    this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
-    if (this.open) {
-      this.calculateDropdownMenuOffset();
-    }
-    this.loadingNextExternalPage = false;
-  }
-  updateAllLoadedBool() {
-    this._isAllExternalDataLoaded = this.isAllExternalDataLoaded;
-  }
-  async setSelectedItem(value) {
-    if (!value)
-      return this.cleanSelectedItem();
-    const item = this._optionsData.find(x => x.value.toLowerCase() === value.toLowerCase());
-    if (!item)
-      return this.cleanSelectedItem();
-    this.selectedValue = item.value;
-    this.selectedItem = item;
-  }
-  cleanSelectedItem() {
-    this.selectedValue = undefined;
-    this.selectedItem = undefined;
-    this.selectItemEvent.emit(this.selectedItem);
-  }
-  componentDidLoad() {
-    document.addEventListener('closeSelectBoxOnScroll', this.closeSelectBoxHandler);
-  }
-  componentWillUnload() {
-    document.removeEventListener('closeSelectBoxOnScroll', this.closeSelectBoxHandler);
-  }
-  handleCloseSelectBox() {
-    this.open = false;
-  }
-  handleBlur() {
-    this.open = false;
-    this.toggleOpen.emit(false);
-  }
-  onDropdownClicked() {
-    if (this.readOnly)
-      return;
-    this.open = !this.open;
-    this.searchTerm = '';
-    this.loadingNextExternalPage = false;
-    this.calculateDropdownMenuOffset();
-    this.toggleOpen.emit(this.open);
-  }
-  onItemSelected(option) {
-    this.selectedItem = option;
-    this.selectItemEvent.emit(this.selectedItem);
-    this.handleBlur();
-  }
-  dropdownSelectorContent() {
-    let title;
-    let subtitle;
-    const chevronIcon = this.open ? 'expand_less' : 'expand_more';
-    const icon = h("tttx-icon_1_9_101", { icon: chevronIcon, color: "black" });
-    let chevron = h("div", { class: "dropdown-selector-chevron" }, icon);
-    if (!this.selectedItem) {
-      title = h("div", { class: "placeholder" }, this.placeholder);
-      return (h(Fragment, null, title, chevron));
-    }
-    else if (this.selectedItem.html) {
-      title = h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html });
-      return (h(Fragment, null, title, chevron));
-    }
-    else {
-      title = (h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label));
-      if (this.selectedItem.description) {
-        subtitle = (h("div", { class: "description" }, h("p", null, this.selectedItem.description)));
-        chevron = h("div", { class: "dropdown-selector-chevron-offset" }, icon);
-      }
-      return (h(Fragment, null, h("div", { class: "left-wrapper" }, title, subtitle), this.clearable && !this.readOnly &&
-        h("tttx-icon_1_9_101", { class: "input-icon", style: { paddingTop: '5px', cursor: 'pointer' }, icon: 'close_small', onClick: this.cleanSelectedItem.bind(this) }), chevron));
-    }
-  }
-  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.useExternalFiltering && !this.useExternalPaginatedFiltering) &&
-        option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1)
-        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) {
-    const selected = this.selectedItem && option.value === this.selectedItem.value;
-    if (option.html) {
-      const sanitisedHTML = DOMPurify.sanitize(option.html, domSanitiserOptions);
-      return (h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
-    }
-    else if (option.description) {
-      return (h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label, h("div", { class: "description-dd" }, h("p", null, option.description))));
-    }
-    return (h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label));
-  }
-  handleSearchInput(event) {
-    const searchInput = event.target.value;
-    if (this.useExternalFiltering || this.useExternalPaginatedFiltering) {
-      // emit event with the latest search value
-      clearTimeout(this.searchFilterTimeout);
-      this.searchFilterTimeout = setTimeout((filterValue) => {
-        this.searchUpdated.emit(filterValue);
-      }, 500, searchInput);
-    }
-    this.searchTerm = searchInput;
-  }
-  calculateDropdownMenuOffset() {
-    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
-    const clientRectangle = dropdownSelector.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
-    // Calculate the maximum dropdown menu height
-    let dropdownMenuMaxHeight = Math.min(368, 36 * this._optionsData.length) + 8;
-    if (this.searchEnabled)
-      dropdownMenuMaxHeight += 52;
-    // Determine if the dropdown would overflow the bottom of the viewport
-    const availableSpaceBelow = viewportHeight - clientRectangle.bottom;
-    const availableSpaceAbove = clientRectangle.top;
-    // If there is no option data, add some default height to ensure the loading screen is fully visible.
-    if (!this._optionsData.length) {
-      dropdownMenuMaxHeight = 200;
-    }
-    let top, bottom, maxHeight;
-    if (availableSpaceBelow >= dropdownMenuMaxHeight) {
-      // Enough space below, show dropdown below
-      top = clientRectangle.bottom + 'px';
-      bottom = '';
-      maxHeight = dropdownMenuMaxHeight + 'px';
-    }
-    else if (availableSpaceAbove >= dropdownMenuMaxHeight) {
-      // Enough space above, show dropdown above
-      top = '';
-      bottom = (viewportHeight - clientRectangle.top) + 'px';
-      maxHeight = dropdownMenuMaxHeight + 'px';
-    }
-    else {
-      // No space above, no space below then calculating space base on dropdown height
-      top = dropdownMenuMaxHeight - availableSpaceAbove + 'px';
-      bottom = (dropdownMenuMaxHeight - availableSpaceBelow) + 'px';
-      maxHeight = dropdownMenuMaxHeight + 'px';
-    }
-    this.bodyOffset = {
-      position: 'fixed',
-      left: Math.max(clientRectangle.left, 0) + 'px',
-      width: Math.min(clientRectangle.width, viewportWidth - clientRectangle.left - 16) + 'px',
-      top,
-      bottom,
-      maxHeight,
-      zIndex: '10',
-      overflowY: 'auto', // Allow scrolling if needed
-    };
-  }
-  onSelectScroll(scrollEvent) {
-    const selectDiv = scrollEvent.target;
-    const scrollOffset = selectDiv.scrollHeight - selectDiv.scrollTop - selectDiv.offsetHeight;
-    const isScrolledEnd = scrollOffset <= 5;
-    if (this.useExternalPaginatedFiltering && isScrolledEnd && !this.loadingNextExternalPage && !this._isAllExternalDataLoaded) {
-      this.loadingNextExternalPage = true;
-      clearTimeout(this.selectEndReached);
-      this.selectEndReached = setTimeout((filterValue) => {
-        this.selectEndReachedEvent.emit(filterValue);
-      }, 500, this.searchTerm);
-    }
-  }
-  render() {
-    if (!this.optionsData)
-      return;
-    const invalidClass = this.showErrorMsg ? 'invalid' : '';
-    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', invalidClass, readOnlyClass].join(' '), ref: el => (this.dropdownSelector = el), onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent()), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({ width: `${this.dropdownSelector.offsetWidth}px` }, this.bodyOffset) }, this.searchEnabled && (h("div", { class: "searchbox" }, h("tttx-standalone-input_1_9_101", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: "search", onInput: this.handleSearchInput.bind(this) }))), h("div", { class: "dropdown-options-list", onScroll: this.onSelectScroll.bind(this) }, !this.isLoading && (this.renderDropdownOptions(this._optionsData)), (this.isLoading || this.loadingNextExternalPage) && (h("tttx-loading-spinner_1_9_101", { class: 'loading-style' })))))), this.showErrorBubble && (h("span", { class: ['errorBubble', this.showErrorMsg && this.errorMsg ? 'visible' : ''].join(' ') }, h("tttx-icon_1_9_101", { icon: "warning", color: "#dc0000", size: 16 }), " ", this.errorMsg)))));
-  }
-  static get is() { return "tttx-select-box_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-select-box.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-select-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
-      },
-      "selectedValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected-value",
-        "reflect": false
-      },
-      "useExternalFiltering": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "use-external-filtering",
-        "reflect": false
-      },
-      "useExternalPaginatedFiltering": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "use-external-paginated-filtering",
-        "reflect": false
-      },
-      "isAllExternalDataLoaded": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-all-external-data-loaded",
-        "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
-      },
-      "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'"
-      },
-      "clearable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "clearable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "showErrorMsg": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-error-msg",
-        "reflect": false
-      },
-      "showErrorBubble": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-error-bubble",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "errorMsg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-msg",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "selectedItem": {},
-      "searchTerm": {},
-      "loadingNextExternalPage": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selectItemEvent",
-        "name": "selectItemEvent",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "SelectItem",
-          "resolved": "SelectItem",
-          "references": {
-            "SelectItem": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        }
-      }, {
-        "method": "toggleOpen",
-        "name": "toggleOpen",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "searchUpdated",
-        "name": "multiselectSearchUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "selectEndReachedEvent",
-        "name": "selectEndReached",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setSelectedItem": {
-        "complexType": {
-          "signature": "(value: string | undefined) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "optionsData",
-        "methodName": "setOptionsData"
-      }, {
-        "propName": "isAllExternalDataLoaded",
-        "methodName": "updateAllLoadedBool"
-      }];
-  }
-  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 TttxSelectBox {
+  constructor() {
+    this.bodyOffset = {};
+    this.closeSelectBoxHandler = () => {
+      if (this.open) {
+        this.open = false;
+      }
+    };
+    this.optionsData = null;
+    this.label = undefined;
+    this.inline = undefined;
+    this.placeholder = '';
+    this.searchEnabled = undefined;
+    this.selectedValue = undefined;
+    this.useExternalFiltering = undefined;
+    this.useExternalPaginatedFiltering = undefined;
+    this.isAllExternalDataLoaded = undefined;
+    this.isLoading = undefined;
+    this.readOnly = undefined;
+    this.priorityLabel = 'Priority Group';
+    this.nonPriorityLabel = 'Non Priority Group';
+    this.clearable = false;
+    this.showErrorMsg = undefined;
+    this.showErrorBubble = false;
+    this.errorMsg = undefined;
+    this.open = false;
+    this.selectedItem = undefined;
+    this.searchTerm = '';
+    this.loadingNextExternalPage = false;
+  }
+  async componentWillLoad() {
+    if (this.optionsData) {
+      this.setOptionsData();
+      const matchingItems = this._optionsData.filter((item) => {
+        return item.value == this.selectedValue;
+      });
+      this.selectedItem = matchingItems.length > 0 ? matchingItems[0] : undefined;
+    }
+    this._isAllExternalDataLoaded = this.isAllExternalDataLoaded;
+  }
+  async setOptionsData() {
+    this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+    if (this.open) {
+      this.calculateDropdownMenuOffset();
+    }
+    this.loadingNextExternalPage = false;
+  }
+  updateAllLoadedBool() {
+    this._isAllExternalDataLoaded = this.isAllExternalDataLoaded;
+  }
+  async setSelectedItem(value) {
+    if (!value)
+      return this.cleanSelectedItem();
+    const item = this._optionsData.find(x => x.value.toLowerCase() === value.toLowerCase());
+    if (!item)
+      return this.cleanSelectedItem();
+    this.selectedValue = item.value;
+    this.selectedItem = item;
+  }
+  cleanSelectedItem() {
+    this.selectedValue = undefined;
+    this.selectedItem = undefined;
+    this.selectItemEvent.emit(this.selectedItem);
+  }
+  componentDidLoad() {
+    document.addEventListener('closeSelectBoxOnScroll', this.closeSelectBoxHandler);
+  }
+  componentWillUnload() {
+    document.removeEventListener('closeSelectBoxOnScroll', this.closeSelectBoxHandler);
+  }
+  handleCloseSelectBox() {
+    this.open = false;
+  }
+  handleBlur() {
+    this.open = false;
+    this.toggleOpen.emit(false);
+  }
+  onDropdownClicked() {
+    if (this.readOnly)
+      return;
+    this.open = !this.open;
+    this.searchTerm = '';
+    this.loadingNextExternalPage = false;
+    this.calculateDropdownMenuOffset();
+    this.toggleOpen.emit(this.open);
+  }
+  onItemSelected(option) {
+    this.selectedItem = option;
+    this.selectItemEvent.emit(this.selectedItem);
+    this.handleBlur();
+  }
+  dropdownSelectorContent() {
+    let title;
+    let subtitle;
+    const chevronIcon = this.open ? 'expand_less' : 'expand_more';
+    const icon = h("tttx-icon_1_9_103", { icon: chevronIcon, color: "black" });
+    let chevron = h("div", { class: "dropdown-selector-chevron" }, icon);
+    if (!this.selectedItem) {
+      title = h("div", { class: "placeholder" }, this.placeholder);
+      return (h(Fragment, null, title, chevron));
+    }
+    else if (this.selectedItem.html) {
+      title = h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html });
+      return (h(Fragment, null, title, chevron));
+    }
+    else {
+      title = (h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label));
+      if (this.selectedItem.description) {
+        subtitle = (h("div", { class: "description" }, h("p", null, this.selectedItem.description)));
+        chevron = h("div", { class: "dropdown-selector-chevron-offset" }, icon);
+      }
+      return (h(Fragment, null, h("div", { class: "left-wrapper" }, title, subtitle), this.clearable && !this.readOnly &&
+        h("tttx-icon_1_9_103", { class: "input-icon", style: { paddingTop: '5px', cursor: 'pointer' }, icon: 'close_small', onClick: this.cleanSelectedItem.bind(this) }), chevron));
+    }
+  }
+  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.useExternalFiltering && !this.useExternalPaginatedFiltering) &&
+        option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1)
+        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) {
+    const selected = this.selectedItem && option.value === this.selectedItem.value;
+    if (option.html) {
+      const sanitisedHTML = DOMPurify.sanitize(option.html, domSanitiserOptions);
+      return (h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
+    }
+    else if (option.description) {
+      return (h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label, h("div", { class: "description-dd" }, h("p", null, option.description))));
+    }
+    return (h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label));
+  }
+  handleSearchInput(event) {
+    const searchInput = event.target.value;
+    if (this.useExternalFiltering || this.useExternalPaginatedFiltering) {
+      // emit event with the latest search value
+      clearTimeout(this.searchFilterTimeout);
+      this.searchFilterTimeout = setTimeout((filterValue) => {
+        this.searchUpdated.emit(filterValue);
+      }, 500, searchInput);
+    }
+    this.searchTerm = searchInput;
+  }
+  calculateDropdownMenuOffset() {
+    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
+    const clientRectangle = dropdownSelector.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    // Calculate the maximum dropdown menu height
+    let dropdownMenuMaxHeight = Math.min(368, 36 * this._optionsData.length) + 8;
+    if (this.searchEnabled)
+      dropdownMenuMaxHeight += 52;
+    // Determine if the dropdown would overflow the bottom of the viewport
+    const availableSpaceBelow = viewportHeight - clientRectangle.bottom;
+    const availableSpaceAbove = clientRectangle.top;
+    // If there is no option data, add some default height to ensure the loading screen is fully visible.
+    if (!this._optionsData.length) {
+      dropdownMenuMaxHeight = 200;
+    }
+    let top, bottom, maxHeight;
+    if (availableSpaceBelow >= dropdownMenuMaxHeight) {
+      // Enough space below, show dropdown below
+      top = clientRectangle.bottom + 'px';
+      bottom = '';
+      maxHeight = dropdownMenuMaxHeight + 'px';
+    }
+    else if (availableSpaceAbove >= dropdownMenuMaxHeight) {
+      // Enough space above, show dropdown above
+      top = '';
+      bottom = (viewportHeight - clientRectangle.top) + 'px';
+      maxHeight = dropdownMenuMaxHeight + 'px';
+    }
+    else {
+      // No space above, no space below then calculating space base on dropdown height
+      top = dropdownMenuMaxHeight - availableSpaceAbove + 'px';
+      bottom = (dropdownMenuMaxHeight - availableSpaceBelow) + 'px';
+      maxHeight = dropdownMenuMaxHeight + 'px';
+    }
+    this.bodyOffset = {
+      position: 'fixed',
+      left: Math.max(clientRectangle.left, 0) + 'px',
+      width: Math.min(clientRectangle.width, viewportWidth - clientRectangle.left - 16) + 'px',
+      top,
+      bottom,
+      maxHeight,
+      zIndex: '10',
+      overflowY: 'auto', // Allow scrolling if needed
+    };
+  }
+  onSelectScroll(scrollEvent) {
+    const selectDiv = scrollEvent.target;
+    const scrollOffset = selectDiv.scrollHeight - selectDiv.scrollTop - selectDiv.offsetHeight;
+    const isScrolledEnd = scrollOffset <= 5;
+    if (this.useExternalPaginatedFiltering && isScrolledEnd && !this.loadingNextExternalPage && !this._isAllExternalDataLoaded) {
+      this.loadingNextExternalPage = true;
+      clearTimeout(this.selectEndReached);
+      this.selectEndReached = setTimeout((filterValue) => {
+        this.selectEndReachedEvent.emit(filterValue);
+      }, 500, this.searchTerm);
+    }
+  }
+  render() {
+    if (!this.optionsData)
+      return;
+    const invalidClass = this.showErrorMsg ? 'invalid' : '';
+    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', invalidClass, readOnlyClass].join(' '), ref: el => (this.dropdownSelector = el), onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent()), this.open && (h("div", { class: "dropdown-body-container" }, h("div", { class: "dropdown-body", style: Object.assign({ width: `${this.dropdownSelector.offsetWidth}px` }, this.bodyOffset) }, this.searchEnabled && (h("div", { class: "searchbox" }, h("tttx-standalone-input_1_9_103", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: "search", onInput: this.handleSearchInput.bind(this) }))), h("div", { class: "dropdown-options-list", onScroll: this.onSelectScroll.bind(this) }, !this.isLoading && (this.renderDropdownOptions(this._optionsData)), (this.isLoading || this.loadingNextExternalPage) && (h("tttx-loading-spinner_1_9_103", { class: 'loading-style' })))))), this.showErrorBubble && (h("span", { class: ['errorBubble', this.showErrorMsg && this.errorMsg ? 'visible' : ''].join(' ') }, h("tttx-icon_1_9_103", { icon: "warning", color: "#dc0000", size: 16 }), " ", this.errorMsg)))));
+  }
+  static get is() { return "tttx-select-box_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-select-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-select-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
+      },
+      "selectedValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-value",
+        "reflect": false
+      },
+      "useExternalFiltering": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-external-filtering",
+        "reflect": false
+      },
+      "useExternalPaginatedFiltering": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-external-paginated-filtering",
+        "reflect": false
+      },
+      "isAllExternalDataLoaded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-all-external-data-loaded",
+        "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
+      },
+      "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'"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clearable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showErrorMsg": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-error-msg",
+        "reflect": false
+      },
+      "showErrorBubble": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-error-bubble",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "errorMsg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-msg",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "selectedItem": {},
+      "searchTerm": {},
+      "loadingNextExternalPage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectItemEvent",
+        "name": "selectItemEvent",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "SelectItem",
+          "resolved": "SelectItem",
+          "references": {
+            "SelectItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "toggleOpen",
+        "name": "toggleOpen",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "searchUpdated",
+        "name": "multiselectSearchUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "selectEndReachedEvent",
+        "name": "selectEndReached",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setSelectedItem": {
+        "complexType": {
+          "signature": "(value: string | undefined) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "optionsData",
+        "methodName": "setOptionsData"
+      }, {
+        "propName": "isAllExternalDataLoaded",
+        "methodName": "updateAllLoadedBool"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "closeSelectBox",
+        "method": "handleCloseSelectBox",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}