@3t-transform/threeteeui 0.2.115 → 0.2.117

package/dist/components/tttx-form.js

@@ -1,5 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
+import { d as defineCustomElement$4 } from './tttx-icon2.js';
+import { d as defineCustomElement$3 } from './tttx-select-box2.js';
+import { d as defineCustomElement$2 } from './tttx-standalone-input2.js';
 
 /**
  * Validates the input field on focusout event by checking its validity state,
@@ -191,7 +194,7 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   async setSelectOptions(fieldname, options) {
     const select = this.fieldset.querySelector(`[name=${fieldname}]`);
-    select.innerHTML = '';
+    const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldname}]`);
     const fragment = new DocumentFragment();
     for (const option of options) {
       const o = document.createElement('option');
@@ -199,7 +202,10 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       o.value = option.value;
       fragment.appendChild(o);
     }
-    select.appendChild(fragment);
+    select.replaceChildren(fragment);
+    tttxSelect.optionsData = options;
+    //await tttxSelect.setOptionsData(options);
+    await tttxSelect.setSelectedItem(options[0].value);
   }
   /**
    * Submits the form data to the server.
@@ -256,7 +262,7 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @param {boolean} [formProperties.options[].placeholder]
    */
   createSelect(formKey, formProperties) {
-    var _a;
+    var _a, _b, _c, _d;
     const select = document.createElement('select');
     select.setAttribute('name', formKey);
     formProperties.options.forEach(optionProperties => {
@@ -264,7 +270,23 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
     if ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey])
       select.classList.remove('placeholder');
-    return select;
+    const tttxSelect = document.createElement('tttx-select-box');
+    tttxSelect.optionsData = (_b = formProperties.options) === null || _b === void 0 ? void 0 : _b.filter(o => !o.placeholder);
+    tttxSelect.placeholder = (_d = (_c = formProperties.options) === null || _c === void 0 ? void 0 : _c.filter(o => o.placeholder)[0]) === null || _d === void 0 ? void 0 : _d.label;
+    tttxSelect.inline = false;
+    tttxSelect.searchEnabled = true;
+    tttxSelect.style.width = '100%';
+    tttxSelect.style.marginTop = '6px';
+    tttxSelect.setAttribute('name', 'overlay-' + formKey);
+    const fragment = document.createDocumentFragment();
+    fragment.append(tttxSelect);
+    select.style.display = 'none';
+    tttxSelect.addEventListener('selectItemEvent', function (ev) {
+      select.value = ev.detail.value;
+      select.onblur({ target: select }); // triggers validator
+      select.onchange({ target: select }); // triggers dataChanged event
+    });
+    return { input: select, overlay: fragment };
   }
   /**
    * Appends an option to a select element
@@ -492,10 +514,11 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *
    * @param {Record<string, any>} formProperties - An object containing properties for the form field, including its label text and validation rules.
    * @param {HTMLInputElement | HTMLSelectElement} input - The input element to associate with the label.
+   * @param {never} overlay - The Child Element which will be rendered atop the standard HTML5 element
    * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
    * @return {HTMLLabelElement} - The new label element.
    */
-  createLabel(formProperties, input, errorBubble) {
+  createLabel(formProperties, input, overlay, errorBubble) {
     var _a;
     const outerContainer = document.createElement('div');
     let outerContainerClassName = 'outer-container inputBlock';
@@ -521,6 +544,9 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     else {
       // Append the input element and error bubble element to the outerContainer
+      if (overlay) {
+        outerContainer.appendChild(overlay);
+      }
       outerContainer.appendChild(input);
     }
     if (formProperties.type !== 'checkbox') {
@@ -590,33 +616,33 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.template.content.append(end);
         continue;
       }
-      let input;
+      let fragments = {};
       switch (formProperties.type) {
         case 'select':
-          input = this.createSelect(formKey, formProperties);
+          fragments = this.createSelect(formKey, formProperties);
           break;
         case 'radio':
-          input = this.createRadio(formKey, formProperties);
+          fragments.input = this.createRadio(formKey, formProperties);
           break;
         case 'textarea':
-          input = this.createTextArea(formKey, formProperties);
+          fragments.input = this.createTextArea(formKey, formProperties);
           break;
         default:
-          input = this.createInput(formKey, formProperties);
+          fragments.input = this.createInput(formKey, formProperties);
       }
       // If the form property has validation, apply it to the input
       if (formProperties.validation &&
         formProperties.type !== 'radio') {
-        this.applyValidation(input, formProperties.validation);
+        this.applyValidation(fragments.input, formProperties.validation);
       }
       // Create an error bubble and label element for the input
       const errorBubble = this.createErrorBubble();
-      const label = this.createLabel(formProperties, input, errorBubble);
+      const label = this.createLabel(formProperties, fragments.input, fragments.overlay, errorBubble);
       // If explicitly setting input as invalid, set invalid state and error message on render
       if ((_a = formProperties.validation) === null || _a === void 0 ? void 0 : _a.invalid) {
         const errorMessage = formProperties.validation.invalid.message;
-        input.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
-        setErrorState(input, true, errorMessage);
+        fragments.input.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
+        setErrorState(fragments.input, true, errorMessage);
       }
       // Append the label element to the form template
       this.template.content.append(label);
@@ -637,7 +663,7 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     // Clone the template's content and store it in a variable
-    const formItems = this.template.content.cloneNode(true);
+    const formItems = this.template.content;
     // Bind event listeners to form elements
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
@@ -685,6 +711,11 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
                 formItem.checked = true;
               }
               break;
+            case 'select':
+            case 'select-one':
+              formItems.querySelector(`[name=overlay-${key}]`).selectedValue = this._data[key];
+              formItem.value = this._data[key];
+              break;
             default:
               formItem.value = this._data[key];
           }
@@ -785,13 +816,28 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tttx-form"];
+  const components = ["tttx-form", "tttx-icon", "tttx-select-box", "tttx-standalone-input"];
   components.forEach(tagName => { switch (tagName) {
     case "tttx-form":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TttxForm$1);
       }
       break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "tttx-select-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-standalone-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

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

@@ -1,158 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
-import { d as defineCustomElement$3 } from './tttx-icon2.js';
-import { d as defineCustomElement$2 } from './tttx-standalone-input2.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}.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:relative;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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selectItemEvent = createEvent(this, "selectItemEvent", 3);
-    this.toggleOpen = createEvent(this, "toggleOpen", 3);
-    this.bodyOffset = {};
-    this.optionsData = null;
-    this.label = undefined;
-    this.inline = undefined;
-    this.placeholder = '';
-    this.searchEnabled = undefined;
-    this.selectedValue = undefined;
-    this.open = false;
-    this.selectedItem = undefined;
-    this.searchTerm = '';
-  }
-  async componentWillLoad() {
-    if (this.optionsData) {
-      // attempt to preselect an item if specified
-      const parsedOptionsData = (typeof this.optionsData === 'string') ? JSON.parse(this.optionsData) : this.optionsData;
-      const matchingItems = parsedOptionsData.filter((item) => { return item.value == this.selectedValue; });
-      this.selectedItem = (matchingItems.length > 0) ? matchingItems[0] : undefined;
-    }
-  }
-  handleCloseSelectBox() {
-    this.open = false;
-  }
-  handleBlur() {
-    this.open = false;
-    this.toggleOpen.emit(false);
-  }
-  onDropdownClicked() {
-    this.open = !this.open;
-    this.searchTerm = '';
-    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", { 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), chevron);
-    }
-  }
-  dropdownOption(option) {
-    /* istanbul ignore next */
-    const hideOption = this.searchEnabled && option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1;
-    const selected = this.selectedItem && option.value === this.selectedItem.value;
-    if (option.html) {
-      const sanitisedHTML = purify.sanitize(option.html, domSanitiserOptions);
-      /* istanbul ignore next */
-      return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
-    }
-    else if (option.description) {
-      return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label, h("div", { class: "description-dd" }, h("p", null, option.description))));
-    }
-    /* istanbul ignore next */
-    return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label));
-  }
-  /* istanbul ignore next */
-  handleSearchInput(event) {
-    const target = event.target;
-    this.searchTerm = target.value;
-  }
-  calculateDropdownMenuOffset() {
-    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
-    const bottomPosY = this.dropdownSelector.getBoundingClientRect().bottom;
-    // (Max list height OR 31px * number of items) + 52px for search bar + 8px padding at bottom
-    let dropdownMenuMaxHeight = Math.min((368), 36 * this._optionsData.length) + 8;
-    if (this.searchEnabled)
-      dropdownMenuMaxHeight += 52;
-    const clientRectangle = dropdownSelector.getBoundingClientRect();
-    if (bottomPosY + dropdownMenuMaxHeight > window.innerHeight) {
-      this.bodyOffset = { top: `${window.innerHeight - (dropdownMenuMaxHeight + 16)}px`, position: 'fixed', width: `${dropdownSelector.offsetWidth}px`, zIndex: '10' };
-    }
-    else {
-      this.bodyOffset = { position: 'fixed', left: clientRectangle.left, top: clientRectangle.top, width: (clientRectangle.width - 2) + 'px', zIndex: '10' };
-    }
-  }
-  render() {
-    if (!this.optionsData)
-      return;
-    this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
-    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", 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 &&
-      /* istanbul ignore next */
-      h("div", { class: "searchbox" }, h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this) })), h("div", { class: "dropdown-options-list" }, this._optionsData.map((option) => {
-      return this.dropdownOption(option);
-    }))))))));
-  }
-  get el() { return this; }
-  static get style() { return tttxSelectBoxCss; }
-}, [1, "tttx-select-box", {
-    "optionsData": [1, "options-data"],
-    "label": [1],
-    "inline": [4],
-    "placeholder": [1],
-    "searchEnabled": [4, "search-enabled"],
-    "selectedValue": [1, "selected-value"],
-    "open": [32],
-    "selectedItem": [32],
-    "searchTerm": [32]
-  }, [[0, "closeSelectBox", "handleCloseSelectBox"], [0, "blur", "handleBlur"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-select-box", "tttx-icon", "tttx-standalone-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-select-box":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxSelectBox$1);
-      }
-      break;
-    case "tttx-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "tttx-standalone-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { T as TttxSelectBox$1, d as defineCustomElement$1 } from './tttx-select-box2.js';
 
 const TttxSelectBox = TttxSelectBox$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -0,0 +1,171 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
+import { d as defineCustomElement$2 } from './tttx-icon2.js';
+import { d as defineCustomElement$1 } from './tttx-standalone-input2.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}.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:relative;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.bodyOffset = {};
+    this.optionsData = null;
+    this.label = undefined;
+    this.inline = undefined;
+    this.placeholder = '';
+    this.searchEnabled = undefined;
+    this.selectedValue = undefined;
+    this.open = false;
+    this.selectedItem = undefined;
+    this.searchTerm = '';
+  }
+  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;
+    }
+  }
+  async setOptionsData() {
+    this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
+  }
+  async setSelectedItem(value) {
+    if (!value)
+      return;
+    const item = this._optionsData.find(x => x.value.toLowerCase() === value.toLowerCase());
+    if (!item)
+      return;
+    this.selectedValue = item.value;
+    this.selectedItem = item;
+  }
+  handleCloseSelectBox() {
+    this.open = false;
+  }
+  handleBlur() {
+    this.open = false;
+    this.toggleOpen.emit(false);
+  }
+  onDropdownClicked() {
+    this.open = !this.open;
+    this.searchTerm = '';
+    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", { 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), chevron);
+    }
+  }
+  dropdownOption(option) {
+    /* istanbul ignore next */
+    const hideOption = this.searchEnabled && option.label.toLowerCase().indexOf(this.searchTerm.toLowerCase()) === -1;
+    const selected = this.selectedItem && option.value === this.selectedItem.value;
+    if (option.html) {
+      const sanitisedHTML = purify.sanitize(option.html, domSanitiserOptions);
+      /* istanbul ignore next */
+      return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label, innerHTML: sanitisedHTML }));
+    }
+    else if (option.description) {
+      return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label, h("div", { class: "description-dd" }, h("p", null, option.description))));
+    }
+    /* istanbul ignore next */
+    return (h("div", { class: `dropdown-option ${hideOption ? 'hidden' : ''} ${selected ? 'selected' : ''}`, onClick: this.onItemSelected.bind(this, option), key: option.label }, option.label));
+  }
+  /* istanbul ignore next */
+  handleSearchInput(event) {
+    const target = event.target;
+    this.searchTerm = target.value;
+  }
+  calculateDropdownMenuOffset() {
+    const dropdownSelector = this.el.shadowRoot.querySelector('.dropdown-selector');
+    const bottomPosY = this.dropdownSelector.getBoundingClientRect().bottom;
+    // (Max list height OR 31px * number of items) + 52px for search bar + 8px padding at bottom
+    let dropdownMenuMaxHeight = Math.min((368), 36 * this._optionsData.length) + 8;
+    if (this.searchEnabled)
+      dropdownMenuMaxHeight += 52;
+    const clientRectangle = dropdownSelector.getBoundingClientRect();
+    if (bottomPosY + dropdownMenuMaxHeight > window.innerHeight) {
+      this.bodyOffset = { top: `${window.innerHeight - (dropdownMenuMaxHeight + 16)}px`, position: 'fixed', width: `${dropdownSelector.offsetWidth}px`, zIndex: '10' };
+    }
+    else {
+      this.bodyOffset = { position: 'fixed', left: clientRectangle.left, top: clientRectangle.top, width: (clientRectangle.width - 2) + 'px', zIndex: '10' };
+    }
+  }
+  render() {
+    if (!this.optionsData)
+      return;
+    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", 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 &&
+      /* istanbul ignore next */
+      h("div", { class: "searchbox" }, h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this) })), h("div", { class: "dropdown-options-list" }, this._optionsData.map((option) => {
+      return this.dropdownOption(option);
+    }))))))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "optionsData": ["setOptionsData"]
+  }; }
+  static get style() { return tttxSelectBoxCss; }
+}, [1, "tttx-select-box", {
+    "optionsData": [1, "options-data"],
+    "label": [1],
+    "inline": [4],
+    "placeholder": [1],
+    "searchEnabled": [4, "search-enabled"],
+    "selectedValue": [1, "selected-value"],
+    "open": [32],
+    "selectedItem": [32],
+    "searchTerm": [32],
+    "setSelectedItem": [64]
+  }, [[0, "closeSelectBox", "handleCloseSelectBox"], [0, "blur", "handleBlur"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-select-box", "tttx-icon", "tttx-standalone-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-select-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxSelectBox);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "tttx-standalone-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { TttxSelectBox as T, defineCustomElement as d };

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box",[[1,"tttx-multiselect-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"htmlVisibleValue":[4,"html-visible-value"],"visibleValue":[1,"visible-value"],"open":[32],"unsavedSelectedItems":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"firstSelected":[1028,"first-selected"],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog",[[1,"tttx-dialog",{"header":[1],"type":[1],"size":[1],"open":[4],"allowOverflow":[4,"allow-overflow"],"closeEnabled":[4,"close-enabled"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64],"setSelectOptions":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[2,"tttx-textarea",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"rows":[2],"textareaautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"disabled":[4],"maxlength":[8],"name":[1],"placeholder":[1],"readonly":[8],"required":[4],"value":[1032]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-filter_4",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}],[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["tttx-data-pattern",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64],"setSelectOptions":[64]}]]],["tttx-multiselect-box",[[1,"tttx-multiselect-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"htmlVisibleValue":[4,"html-visible-value"],"visibleValue":[1,"visible-value"],"open":[32],"unsavedSelectedItems":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"firstSelected":[1028,"first-selected"],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog",[[1,"tttx-dialog",{"header":[1],"type":[1],"size":[1],"open":[4],"allowOverflow":[4,"allow-overflow"],"closeEnabled":[4,"close-enabled"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-expander",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading",[[4,"tttx-checkbox-group-heading"]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea",[[2,"tttx-textarea",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"rows":[2],"textareaautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"disabled":[4],"maxlength":[8],"name":[1],"placeholder":[1],"readonly":[8],"required":[4],"value":[1032]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"selectedValue":[1,"selected-value"],"open":[32],"selectedItem":[32],"searchTerm":[32],"setSelectedItem":[64]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-filter_4",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]],[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32]}],[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]],[1,"tttx-toolbar",{"border":[4],"viewSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]]], options);
   });
 };