@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/cjs/{tttx-select-box_localcomponent.cjs.entry.js → tttx-select-box_1_9_103.cjs.entry.js}

@@ -3,248 +3,248 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2c07dc57.js');
-const domsanitiser_options = require('./domsanitiser.options-55ce2d65.js');
+const domsanitiser_options = require('./domsanitiser.options-065dbed8.js');
 require('./_commonjsHelpers-537d719a.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.selectItemEvent = index.createEvent(this, "selectItemEvent", 3);
-    this.toggleOpen = index.createEvent(this, "toggleOpen", 3);
-    this.searchUpdated = index.createEvent(this, "multiselectSearchUpdated", 7);
-    this.selectEndReachedEvent = index.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 = index.h("tttx-icon_localcomponent", { icon: chevronIcon, color: "black" });
-    let chevron = index.h("div", { class: "dropdown-selector-chevron" }, icon);
-    if (!this.selectedItem) {
-      title = index.h("div", { class: "placeholder" }, this.placeholder);
-      return (index.h(index.Fragment, null, title, chevron));
-    }
-    else if (this.selectedItem.html) {
-      title = index.h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html });
-      return (index.h(index.Fragment, null, title, chevron));
-    }
-    else {
-      title = (index.h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label));
-      if (this.selectedItem.description) {
-        subtitle = (index.h("div", { class: "description" }, index.h("p", null, this.selectedItem.description)));
-        chevron = index.h("div", { class: "dropdown-selector-chevron-offset" }, icon);
-      }
-      return (index.h(index.Fragment, null, index.h("div", { class: "left-wrapper" }, title, subtitle), this.clearable && !this.readOnly &&
-        index.h("tttx-icon_localcomponent", { 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 (index.h(index.Fragment, null, usingPriority && priorityOptions.length > 0 &&
-      index.h(index.Fragment, null, index.h("tttx-tag_localcomponent", { class: 'priority-pill', text: this.priorityLabel, color: "#F0F0F0" }), priorityOptions.map((option) => this.dropdownOption(option))), nonPriorityOptions.length > 0 &&
-      index.h(index.Fragment, null, usingPriority &&
-        index.h("tttx-tag_localcomponent", { 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 = domsanitiser_options.purify.sanitize(option.html, domsanitiser_options.domSanitiserOptions);
-      return (index.h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
-    }
-    else if (option.description) {
-      return (index.h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label, index.h("div", { class: "description-dd" }, index.h("p", null, option.description))));
-    }
-    return (index.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 (index.h(index.Host, { class: this.inline ? 'inline' : 'block' }, this.label && index.h("div", { class: "label" }, this.label), index.h("div", { tabindex: "0", class: "dropdown-container" }, index.h("div", { class: ['dropdown-selector', invalidClass, readOnlyClass].join(' '), ref: el => (this.dropdownSelector = el), onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent()), this.open && (index.h("div", { class: "dropdown-body-container" }, index.h("div", { class: "dropdown-body", style: Object.assign({ width: `${this.dropdownSelector.offsetWidth}px` }, this.bodyOffset) }, this.searchEnabled && (index.h("div", { class: "searchbox" }, index.h("tttx-standalone-input_localcomponent", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: "search", onInput: this.handleSearchInput.bind(this) }))), index.h("div", { class: "dropdown-options-list", onScroll: this.onSelectScroll.bind(this) }, !this.isLoading && (this.renderDropdownOptions(this._optionsData)), (this.isLoading || this.loadingNextExternalPage) && (index.h("tttx-loading-spinner_localcomponent", { class: 'loading-style' })))))), this.showErrorBubble && (index.h("span", { class: ['errorBubble', this.showErrorMsg && this.errorMsg ? 'visible' : ''].join(' ') }, index.h("tttx-icon_localcomponent", { icon: "warning", color: "#dc0000", size: 16 }), " ", this.errorMsg)))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "optionsData": ["setOptionsData"],
-    "isAllExternalDataLoaded": ["updateAllLoadedBool"]
-  }; }
-};
+const TttxSelectBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectItemEvent = index.createEvent(this, "selectItemEvent", 3);
+    this.toggleOpen = index.createEvent(this, "toggleOpen", 3);
+    this.searchUpdated = index.createEvent(this, "multiselectSearchUpdated", 7);
+    this.selectEndReachedEvent = index.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 = index.h("tttx-icon_1_9_103", { icon: chevronIcon, color: "black" });
+    let chevron = index.h("div", { class: "dropdown-selector-chevron" }, icon);
+    if (!this.selectedItem) {
+      title = index.h("div", { class: "placeholder" }, this.placeholder);
+      return (index.h(index.Fragment, null, title, chevron));
+    }
+    else if (this.selectedItem.html) {
+      title = index.h("div", { title: this.selectedItem.label, class: "truncated-text", innerHTML: this.selectedItem.html });
+      return (index.h(index.Fragment, null, title, chevron));
+    }
+    else {
+      title = (index.h("div", { title: this.selectedItem.label, class: "truncated-text" }, this.selectedItem.label));
+      if (this.selectedItem.description) {
+        subtitle = (index.h("div", { class: "description" }, index.h("p", null, this.selectedItem.description)));
+        chevron = index.h("div", { class: "dropdown-selector-chevron-offset" }, icon);
+      }
+      return (index.h(index.Fragment, null, index.h("div", { class: "left-wrapper" }, title, subtitle), this.clearable && !this.readOnly &&
+        index.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 (index.h(index.Fragment, null, usingPriority && priorityOptions.length > 0 &&
+      index.h(index.Fragment, null, index.h("tttx-tag_1_9_103", { class: 'priority-pill', text: this.priorityLabel, color: "#F0F0F0" }), priorityOptions.map((option) => this.dropdownOption(option))), nonPriorityOptions.length > 0 &&
+      index.h(index.Fragment, null, usingPriority &&
+        index.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 = domsanitiser_options.purify.sanitize(option.html, domsanitiser_options.domSanitiserOptions);
+      return (index.h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
+    }
+    else if (option.description) {
+      return (index.h("div", { class: `dropdown-option ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label, index.h("div", { class: "description-dd" }, index.h("p", null, option.description))));
+    }
+    return (index.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 (index.h(index.Host, { class: this.inline ? 'inline' : 'block' }, this.label && index.h("div", { class: "label" }, this.label), index.h("div", { tabindex: "0", class: "dropdown-container" }, index.h("div", { class: ['dropdown-selector', invalidClass, readOnlyClass].join(' '), ref: el => (this.dropdownSelector = el), onClick: this.onDropdownClicked.bind(this) }, this.dropdownSelectorContent()), this.open && (index.h("div", { class: "dropdown-body-container" }, index.h("div", { class: "dropdown-body", style: Object.assign({ width: `${this.dropdownSelector.offsetWidth}px` }, this.bodyOffset) }, this.searchEnabled && (index.h("div", { class: "searchbox" }, index.h("tttx-standalone-input_1_9_103", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: "search", onInput: this.handleSearchInput.bind(this) }))), index.h("div", { class: "dropdown-options-list", onScroll: this.onSelectScroll.bind(this) }, !this.isLoading && (this.renderDropdownOptions(this._optionsData)), (this.isLoading || this.loadingNextExternalPage) && (index.h("tttx-loading-spinner_1_9_103", { class: 'loading-style' })))))), this.showErrorBubble && (index.h("span", { class: ['errorBubble', this.showErrorMsg && this.errorMsg ? 'visible' : ''].join(' ') }, index.h("tttx-icon_1_9_103", { icon: "warning", color: "#dc0000", size: 16 }), " ", this.errorMsg)))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "optionsData": ["setOptionsData"],
+    "isAllExternalDataLoaded": ["updateAllLoadedBool"]
+  }; }
+};
 TttxSelectBox.style = tttxSelectBoxCss;
 
-exports.tttx_select_box_localcomponent = TttxSelectBox;
+exports.tttx_select_box_1_9_103 = TttxSelectBox;

package/dist/cjs/{tttx-skeleton_loader_localcomponent.cjs.entry.js → tttx-skeleton_loader_1_9_103.cjs.entry.js}

@@ -6,35 +6,35 @@ const index = require('./index-2c07dc57.js');
 
 const tttxSkeletonLoaderCss = ":host{display:block}.skeleton-wrapper{display:flex}.skeleton-wrapper.vertical{flex-direction:column}.skeleton-wrapper.horizontal{flex-direction:row;align-items:center;flex-wrap:wrap}.skeleton{display:inline-block;background-color:#D5D5D5;position:relative;overflow:hidden;flex-shrink:0}.skeleton.text{border-radius:4px}.skeleton.rect{border-radius:4px}.skeleton.circle{border-radius:50%}.skeleton.pulse{animation:pulse 1.5s infinite ease-in-out}.skeleton.wave::after{content:\"\";position:absolute;top:0;left:-150px;height:100%;width:150px;background:linear-gradient(90deg, transparent, white, transparent);animation:wave 1.6s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}@keyframes wave{0%{left:-150px}100%{left:100%}}";
 
-const TttxSkeletonLoader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.width = '100%';
-    this.height = '1rem';
-    this.borderRadius = '4px';
-    this.color = '#e0e0e0';
-    this.variant = 'text';
-    this.animation = 'pulse';
-    this.count = 1;
-    this.direction = 'vertical';
-    this.gap = '8px';
-    this.customClass = '';
-  }
-  getSkeletonStyle() {
-    const style = {
-      width: this.width,
-      height: this.height,
-      backgroundColor: this.color,
-      borderRadius: this.variant === 'circle' ? '50%' : this.borderRadius,
-    };
-    return style;
-  }
-  render() {
-    const skeletonStyle = this.getSkeletonStyle();
-    const skeletons = Array.from({ length: this.count });
-    return (index.h(index.Host, null, index.h("div", { class: `skeleton-wrapper ${this.direction} ${this.customClass}`, style: { gap: this.gap, width: '100%' } }, skeletons.map((_, index$1) => (index.h("div", { key: index$1, class: `skeleton ${this.animation} ${this.variant}`, style: skeletonStyle }))))));
-  }
-};
+const TttxSkeletonLoader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.width = '100%';
+    this.height = '1rem';
+    this.borderRadius = '4px';
+    this.color = '#e0e0e0';
+    this.variant = 'text';
+    this.animation = 'pulse';
+    this.count = 1;
+    this.direction = 'vertical';
+    this.gap = '8px';
+    this.customClass = '';
+  }
+  getSkeletonStyle() {
+    const style = {
+      width: this.width,
+      height: this.height,
+      backgroundColor: this.color,
+      borderRadius: this.variant === 'circle' ? '50%' : this.borderRadius,
+    };
+    return style;
+  }
+  render() {
+    const skeletonStyle = this.getSkeletonStyle();
+    const skeletons = Array.from({ length: this.count });
+    return (index.h(index.Host, null, index.h("div", { class: `skeleton-wrapper ${this.direction} ${this.customClass}`, style: { gap: this.gap, width: '100%' } }, skeletons.map((_, index$1) => (index.h("div", { key: index$1, class: `skeleton ${this.animation} ${this.variant}`, style: skeletonStyle }))))));
+  }
+};
 TttxSkeletonLoader.style = tttxSkeletonLoaderCss;
 
-exports.tttx_skeleton_loader_localcomponent = TttxSkeletonLoader;
+exports.tttx_skeleton_loader_1_9_103 = TttxSkeletonLoader;