@3t-transform/threeteeui 0.2.115 → 0.2.117

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box.cjs",[[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.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[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.cjs",[[1,"tttx-tree-view",{"data":[1040],"firstSelected":[1028,"first-selected"],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog.cjs",[[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.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64],"setSelectOptions":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[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.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[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.cjs",[[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.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64],"setSelectOptions":[64]}]]],["tttx-multiselect-box.cjs",[[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.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"firstSelected":[1028,"first-selected"],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog.cjs",[[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.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[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.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-select-box.cjs",[[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.cjs",[[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.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]],["tttx-standalone-input.cjs",[[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);
   });
 };
 

package/dist/cjs/tttx-form.cjs.entry.js

@@ -194,7 +194,7 @@ const TttxForm = class {
    */
   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');
@@ -202,7 +202,10 @@ const TttxForm = class {
       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.
@@ -259,7 +262,7 @@ const TttxForm = class {
    * @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 => {
@@ -267,7 +270,23 @@ const TttxForm = class {
     });
     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
@@ -495,10 +514,11 @@ const TttxForm = class {
    *
    * @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';
@@ -524,6 +544,9 @@ const TttxForm = class {
     }
     else {
       // Append the input element and error bubble element to the outerContainer
+      if (overlay) {
+        outerContainer.appendChild(overlay);
+      }
       outerContainer.appendChild(input);
     }
     if (formProperties.type !== 'checkbox') {
@@ -593,33 +616,33 @@ const TttxForm = class {
         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);
@@ -640,7 +663,7 @@ const TttxForm = class {
       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);
@@ -688,6 +711,11 @@ const TttxForm = class {
                 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];
           }

package/dist/cjs/tttx-select-box.cjs.entry.js

@@ -26,12 +26,23 @@ const TttxSelectBox = class {
   }
   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.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;
   }
@@ -111,7 +122,6 @@ const TttxSelectBox = class {
   render() {
     if (!this.optionsData)
       return;
-    this._optionsData = typeof this.optionsData === 'string' ? JSON.parse(this.optionsData) : this.optionsData;
     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", 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 &&
       /* istanbul ignore next */
       index.h("div", { class: "searchbox" }, index.h("tttx-standalone-input", { type: "text", label: "", required: true, showerrorbubble: false, iconleft: 'search', onInput: this.handleSearchInput.bind(this) })), index.h("div", { class: "dropdown-options-list" }, this._optionsData.map((option) => {
@@ -119,6 +129,9 @@ const TttxSelectBox = class {
     }))))))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "optionsData": ["setOptionsData"]
+  }; }
 };
 TttxSelectBox.style = tttxSelectBoxCss;
 

package/dist/cjs/tttx.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-multiselect-box.cjs",[[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.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[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.cjs",[[1,"tttx-tree-view",{"data":[1040],"firstSelected":[1028,"first-selected"],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog.cjs",[[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.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64],"setSelectOptions":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[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.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[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.cjs",[[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.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-data-pattern.cjs",[[1,"tttx-data-pattern",{"data":[1],"sorteroptions":[1],"filteroptions":[1],"filterheader":[1]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1025],"data":[1032],"submit":[64],"setSelectOptions":[64]}]]],["tttx-multiselect-box.cjs",[[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.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"allowOverflow":[4,"allow-overflow"],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"firstSelected":[1028,"first-selected"],"treeData":[32],"selectedId":[32]}]]],["tttx-checkbox.cjs",[[0,"tttx-checkbox",{"checkboxId":[1,"checkbox-id"],"label":[1],"inline":[4],"indeterminate":[4],"checked":[4]}]]],["tttx-dialog.cjs",[[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.cjs",[[1,"tttx-expander",{"name":[1],"open":[4],"lefticon":[1],"lefticoncolor":[1],"isExpanded":[32]}]]],["tttx-tabs.cjs",[[2,"tttx-tabs",{"tabsName":[1,"tabs-name"],"navigation":[4],"wide":[4],"tabs":[1],"_tabs":[32]},[[0,"keydown","handleKeyDown"]]]]],["tttx-checkbox-group.cjs",[[1,"tttx-checkbox-group"]]],["tttx-checkbox-group-caption.cjs",[[4,"tttx-checkbox-group-caption"]]],["tttx-checkbox-group-heading.cjs",[[4,"tttx-checkbox-group-heading"]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[1],"horizontal":[4],"spacedout":[4],"_elements":[32]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-percentage-bar.cjs",[[2,"tttx-percentage-bar",{"percentage":[8],"thresholds":[1],"color":[1],"min":[1],"labelid":[1],"_percentage":[32],"_ranges":[32],"_min":[32]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1],"textColor":[1,"text-color"]}]]],["tttx-textarea.cjs",[[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.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-select-box.cjs",[[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.cjs",[[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.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]],["tttx-standalone-input.cjs",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/molecules/tttx-form/tttx-form.js

@@ -64,7 +64,7 @@ export class TttxForm {
    */
   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');
@@ -72,7 +72,10 @@ export class TttxForm {
       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.
@@ -129,7 +132,7 @@ export class TttxForm {
    * @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 => {
@@ -137,7 +140,23 @@ export class TttxForm {
     });
     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
@@ -365,10 +384,11 @@ export class TttxForm {
    *
    * @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';
@@ -394,6 +414,9 @@ export class TttxForm {
     }
     else {
       // Append the input element and error bubble element to the outerContainer
+      if (overlay) {
+        outerContainer.appendChild(overlay);
+      }
       outerContainer.appendChild(input);
     }
     if (formProperties.type !== 'checkbox') {
@@ -463,33 +486,33 @@ export class TttxForm {
         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);
@@ -510,7 +533,7 @@ export class TttxForm {
       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);
@@ -558,6 +581,11 @@ export class TttxForm {
                 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];
           }
@@ -771,6 +799,9 @@ export class TttxForm {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "HTMLTttxSelectBoxElement": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"

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

@@ -17,12 +17,23 @@ export class TttxSelectBox {
   }
   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.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;
   }
@@ -102,7 +113,6 @@ export class TttxSelectBox {
   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) => {
@@ -279,7 +289,36 @@ export class TttxSelectBox {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setSelectedItem": {
+        "complexType": {
+          "signature": "(value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "optionsData",
+        "methodName": "setOptionsData"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "closeSelectBox",