@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -7,301 +7,301 @@ import { d as defineCustomElement$1 } from './tttx-tag.js';
 
 const tttxSelectBoxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:flex;gap:4px}.label{font-size:16px;font-weight:500;line-height:18.752px;color:#212121}:host(.inline) .label{padding-top:8px}:host(.block){flex-direction:column}.dropdown-container{position:relative;display:flex;flex-direction:column;width:100%}.dropdown-container:focus-visible{outline:none}.dropdown-container:focus .dropdown-selector{border:1px solid #1479c6}.dropdown-selector,.dropdown-body{display:flex;border-radius:4px;background-color:white}.dropdown-selector{min-height:36px;box-sizing:border-box;align-items:center;gap:8px;padding:4px 8px 4px 16px;cursor:pointer;justify-content:space-between;border:1px solid #d5d5d5;display:flex;flex-direction:row}.dropdown-selector>.left-wrapper{flex:1;min-width:0}.dropdown-selector *{font-weight:400}.dropdown-selector.invalid{border:1px solid #dc0000}.priority-pill{padding:6px 8px 6px 16px}.dropdown-read-only{background-color:#BDBDBD !important}.errorBubble{position:relative;font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}.errorBubble:not(.visible){display:none}.errorBubble>*{font-size:16px;margin-right:4px;height:16px}.description{color:#757575;font-size:14px;line-height:16.408px}.description>p{margin:0}.description-dd{color:#757575;font-size:14px;line-height:16.408px}.description-dd>p{margin:0}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#212121;font-size:16px;line-height:18.752px}.dropdown-selector-chevron{height:24px}.dropdown-selector-chevron-offset{height:24px}.dropdown-selector-chevron>tttx-icon{cursor:pointer}.dropdown-body-container{position:fixed;z-index:2}.dropdown-body{position:absolute;flex-direction:column;box-shadow:0px 1px 5px #1111114D;padding-bottom:8px;border:1px solid #d5d5d5}.dropdown-options-list{display:flex;flex-direction:column;overflow-y:auto;max-height:368px}.dropdown-option{padding:6px 8px 6px 16px;cursor:pointer}.dropdown-option:hover{background-color:#1111110d}.dropdown-option:active,.dropdown-option.selected{background-color:#ebfbfc}.placeholder{color:#9e9e9e;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.searchbox{padding:8px 16px}.searchbox tttx-standalone-input{margin-top:-4px}.hidden{display:none}";
 
-const TttxSelectBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selectItemEvent = createEvent(this, "selectItemEvent", 3);
-    this.toggleOpen = createEvent(this, "toggleOpen", 3);
-    this.searchUpdated = createEvent(this, "multiselectSearchUpdated", 7);
-    this.selectEndReachedEvent = createEvent(this, "selectEndReached", 7);
-    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 = purify.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)))));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "optionsData": ["setOptionsData"],
-    "isAllExternalDataLoaded": ["updateAllLoadedBool"]
-  }; }
-  static get style() { return tttxSelectBoxCss; }
-}, [1, "tttx-select-box_1_9_101", {
-    "optionsData": [1, "options-data"],
-    "label": [1],
-    "inline": [4],
-    "placeholder": [1],
-    "searchEnabled": [4, "search-enabled"],
-    "selectedValue": [1, "selected-value"],
-    "useExternalFiltering": [4, "use-external-filtering"],
-    "useExternalPaginatedFiltering": [4, "use-external-paginated-filtering"],
-    "isAllExternalDataLoaded": [4, "is-all-external-data-loaded"],
-    "isLoading": [4, "is-loading"],
-    "readOnly": [4, "read-only"],
-    "priorityLabel": [1, "priority-label"],
-    "nonPriorityLabel": [1, "non-priority-label"],
-    "clearable": [4],
-    "showErrorMsg": [4, "show-error-msg"],
-    "showErrorBubble": [4, "show-error-bubble"],
-    "errorMsg": [1, "error-msg"],
-    "open": [32],
-    "selectedItem": [32],
-    "searchTerm": [32],
-    "loadingNextExternalPage": [32],
-    "setSelectedItem": [64]
-  }, [[0, "closeSelectBox", "handleCloseSelectBox"], [0, "blur", "handleBlur"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-select-box_1_9_101", "tttx-icon_1_9_101", "tttx-loading-spinner_1_9_101", "tttx-standalone-input_1_9_101", "tttx-tag_1_9_101"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-select-box_1_9_101":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxSelectBox);
-      }
-      break;
-    case "tttx-icon_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "tttx-loading-spinner_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "tttx-standalone-input_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "tttx-tag_1_9_101":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+const TttxSelectBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectItemEvent = createEvent(this, "selectItemEvent", 3);
+    this.toggleOpen = createEvent(this, "toggleOpen", 3);
+    this.searchUpdated = createEvent(this, "multiselectSearchUpdated", 7);
+    this.selectEndReachedEvent = createEvent(this, "selectEndReached", 7);
+    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 = purify.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)))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "optionsData": ["setOptionsData"],
+    "isAllExternalDataLoaded": ["updateAllLoadedBool"]
+  }; }
+  static get style() { return tttxSelectBoxCss; }
+}, [1, "tttx-select-box_1_9_103", {
+    "optionsData": [1, "options-data"],
+    "label": [1],
+    "inline": [4],
+    "placeholder": [1],
+    "searchEnabled": [4, "search-enabled"],
+    "selectedValue": [1, "selected-value"],
+    "useExternalFiltering": [4, "use-external-filtering"],
+    "useExternalPaginatedFiltering": [4, "use-external-paginated-filtering"],
+    "isAllExternalDataLoaded": [4, "is-all-external-data-loaded"],
+    "isLoading": [4, "is-loading"],
+    "readOnly": [4, "read-only"],
+    "priorityLabel": [1, "priority-label"],
+    "nonPriorityLabel": [1, "non-priority-label"],
+    "clearable": [4],
+    "showErrorMsg": [4, "show-error-msg"],
+    "showErrorBubble": [4, "show-error-bubble"],
+    "errorMsg": [1, "error-msg"],
+    "open": [32],
+    "selectedItem": [32],
+    "searchTerm": [32],
+    "loadingNextExternalPage": [32],
+    "setSelectedItem": [64]
+  }, [[0, "closeSelectBox", "handleCloseSelectBox"], [0, "blur", "handleBlur"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-select-box_1_9_103", "tttx-icon_1_9_103", "tttx-loading-spinner_1_9_103", "tttx-standalone-input_1_9_103", "tttx-tag_1_9_103"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-select-box_1_9_103":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxSelectBox);
+      }
+      break;
+    case "tttx-icon_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "tttx-loading-spinner_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-standalone-input_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "tttx-tag_1_9_103":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
 }
 
 export { TttxSelectBox as T, defineCustomElement as d };

package/dist/components/tttx-select-box_1_9_103.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxSelectBox_1_9_103 extends Components.TttxSelectBox_1_9_103, HTMLElement {}
+export const TttxSelectBox_1_9_103: {
+  prototype: TttxSelectBox_1_9_103;
+  new (): TttxSelectBox_1_9_103;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{tttx-select-box_1_9_101.js → tttx-select-box_1_9_103.js}

@@ -1,6 +1,6 @@
 import { T as TttxSelectBox, d as defineCustomElement$1 } from './tttx-select-box.js';
 
-const TttxSelectBox_1_9_101 = TttxSelectBox;
+const TttxSelectBox_1_9_103 = TttxSelectBox;
 const defineCustomElement = defineCustomElement$1;
 
-export { TttxSelectBox_1_9_101, defineCustomElement };
+export { TttxSelectBox_1_9_103, defineCustomElement };

package/dist/components/tttx-skeleton_loader_1_9_103.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxSkeleton_loader_1_9_103 extends Components.TttxSkeleton_loader_1_9_103, HTMLElement {}
+export const TttxSkeleton_loader_1_9_103: {
+  prototype: TttxSkeleton_loader_1_9_103;
+  new (): TttxSkeleton_loader_1_9_103;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;