@3t-transform/threeteeui 0.2.96 → 0.2.98

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

@@ -110,9 +110,9 @@ const formSchema = {
         label: 'Food category',
         options: [
           { label: 'Choose an option', value: '', placeholder: true },
-          { label: 'Poultry', value: 'Chicken' },
-          { label: 'Fish', value: 'Salmon' },
-          { label: 'Veg', value: 'Lettuce' },
+          { label: 'Poultry', value: 'chicken' },
+          { label: 'Fish', value: 'salmon' },
+          { label: 'Veg', value: 'lettuce' },
         ],
         validation: {
           required: {
@@ -271,6 +271,52 @@ const formSchemaWithReadonly = {
         },
       },
     },
+    dropdown: {
+      form: {
+        type: 'select',
+        blankDefault: true,
+        label: 'Food category',
+        options: [
+          { label: 'Choose an option', value: '', placeholder: true },
+          { label: 'Poultry', value: 'chicken' },
+          { label: 'Fish', value: 'salmon' },
+          { label: 'Veg', value: 'lettuce' },
+        ],
+        validation: {
+          required: {
+            message: 'Must select a value',
+          },
+        },
+      },
+    },
+    permissions: {
+      form: {
+        type: 'checkbox',
+        label: 'Permissions',
+        inlineLabel: 'Please grant permissions to use data',
+        validation: {
+          required: {
+            message: 'Please grant permissions to use data',
+          },
+        },
+      },
+    },
+    expiration: {
+      type: 'radio',
+      form: {
+        type: 'radio',
+        label: 'Expiration',
+        options: [
+          { label: 'Never expires', value: 'neverExpires' },
+          { label: 'Will expire', value: 'willExpire' },
+        ],
+        validation: {
+          required: {
+            message: 'Please select validity',
+          },
+        },
+      },
+    },
   },
 };
 const data = {
@@ -280,6 +326,9 @@ const data = {
   postcode: 'AB10',
   age: '50',
   dob: '1973-06-02',
+  dropdown: 'chicken',
+  permissions: 'on',
+  expiration: 'willExpire'
 };
 export const PrePopulateForm = args => `<tttx-form id='form' formSchema='${JSON.stringify(args.formSchema)}' data='${JSON.stringify(args.data)}'></tttx-form>
 <hr/>
@@ -302,3 +351,77 @@ PrePopulateForm.args = {
   data,
   formSchema: formSchemaWithReadonly,
 };
+const radioFormSchema = {
+  properties: {
+    name: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        placeholder: 'Enter a name',
+        label: 'Name',
+        validation: {
+          required: {
+            message: 'Please enter name',
+          },
+        },
+      },
+    },
+    requiresEvidence: {
+      type: 'checkbox',
+      form: {
+        type: 'checkbox',
+        label: '',
+        inlineLabel: 'Requires Evidence',
+      },
+    },
+    validity: {
+      type: 'radio',
+      form: {
+        type: 'radio',
+        label: 'Validity',
+        options: [
+          { label: 'Never expires', value: 'neverExpires' },
+          { label: 'Validity duration', value: 'validityDuration' },
+        ],
+        validation: {
+          required: {
+            message: 'Please select validity',
+          },
+        },
+      },
+    },
+    option2: {
+      type: 'radio',
+      form: {
+        type: 'radio',
+        label: 'Option 2',
+        options: [
+          { label: 'Opt 2a', value: 'opt2a' },
+          { label: 'Opt 2b', value: 'opt2b' },
+          { label: 'Opt 2c', value: 'opt2c' },
+        ],
+      },
+    },
+  },
+};
+export const FormWithRadio = args => `<tttx-form id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form>
+    <hr/>
+    <button type='button' id='button'>Submit Form</button>
+    <script>
+        if (window['tttxform'] === undefined && window['submitButton'] === undefined) {
+            let tttxform = document.getElementById('form');
+            tttxform.addEventListener('dataSubmitted', (event) => {
+                for(var entry of event.detail.entries()) {
+                    console.log(entry[0], entry[1]);
+                }
+            });
+            let submitButton = document.getElementById('button');
+            submitButton.onclick = () => {
+                tttxform.submit();
+            }
+        }
+    </script>`;
+FormWithRadio.args = {
+  formSchema: radioFormSchema,
+};

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

@@ -102,7 +102,7 @@ DialogBoxWithDropdown.args = {
     body: {
       isCustomHtml: true,
       customHtml: `
-              <div style="padding: 5px;">
+              <div style="padding: 5px; display: flex; gap: 16px; flex-direction: column">
                 <tttx-select-box
                   id="htmlSelectBox"
                   options-data='${JSON.stringify(tagOptions)}'
@@ -115,7 +115,7 @@ DialogBoxWithDropdown.args = {
                 <tttx-standalone-input
                   label='Name'
                   placeholder='Enter name'
-                />
+                ></tttx-standalone-input>
                 <tttx-select-box
                   id="htmlSelectBox2"
                   options-data='${JSON.stringify(options)}'

package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css

@@ -70,6 +70,10 @@ label .outer-container input:not([type=submit]) {
   font-size: 16px;
   line-height: 19px;
 }
+label .outer-container input[type=radio] {
+  width: 20px;
+  height: 20px;
+}
 label .outer-container input[type=date] {
   background: white;
   display: block;
@@ -102,6 +106,9 @@ label .outer-container.inputBlock.readonly {
   user-select: none;
   color: gray;
 }
+label .outer-container.inputBlock.radioBlock {
+  display: block;
+}
 label .outer-container.inputInline {
   display: flex;
   white-space: nowrap;

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.js

@@ -5,6 +5,7 @@ import domSanitiserOptions from '../../../shared/domsanitiser.options';
 export class TttxTreeView {
   constructor() {
     this.data = undefined;
+    this.firstSelected = undefined;
     this.treeData = undefined;
     this.selectedId = undefined;
   }
@@ -47,9 +48,8 @@ export class TttxTreeView {
   }
   updateSelected(node) {
     let selected = false;
-    if (node.id === this.selectedId) {
+    if (node.id === this.selectedId)
       selected = true;
-    }
     return selected;
   }
   treeConfigs(node) {
@@ -97,6 +97,8 @@ export class TttxTreeView {
   render() {
     if (!this.data)
       return;
+    if (this.firstSelected)
+      this.selectedId = this.data[0].id;
     this.treeData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data;
     return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node) => this.renderNode(node)))));
   }
@@ -133,6 +135,23 @@ export class TttxTreeView {
           "tags": [],
           "text": ""
         }
+      },
+      "firstSelected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "first-selected",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/molecules/tttx-tree-view/tttx-tree-view.stories.js

@@ -540,6 +540,7 @@ const TttxTreeViewselectable = ({ data }) => `
       const treeViewselectable = document.getElementById('treeViewselectable');
     }
     treeViewselectable.data = ${JSON.stringify(data)};
+    treeViewselectable.firstSelected = true;
     </script>
 `;
 export const SelectableAndHover = TttxTreeViewselectable.bind({});

package/dist/components/tttx-form.js

@@ -33,6 +33,16 @@ function validityCheck(event) {
   // target.setCustomValidity('custom error!');
   // and cleared with
   // target.setCustomValidity('');
+  //handle whitespace-only input
+  if (target.value.length && !target.value.replace(/\s/g, '').length) {
+    errorMessage = 'This field cannot be left blank';
+    target.setCustomValidity(errorMessage);
+  }
+  else {
+    errorMessage = '';
+    if (target.setCustomValidity) // tests are dumb as a brick
+      target.setCustomValidity('');
+  }
   // Check the validity of the input field and set an error message if needed
   switch (true) {
     // The field is required, but has no value
@@ -60,11 +70,6 @@ function validityCheck(event) {
     default:
       hasError = false;
   }
-  //handle whitespace-only input
-  if (!target.value.replace(/\s/g, '').length && target.value.length !== 0) {
-    errorMessage = 'Whitespace-only not allowed';
-    hasError = true;
-  }
   // Return the error state
   return { target, hasError, errorMessage };
 }
@@ -94,6 +99,8 @@ function setErrorState(target, hasError, errorMessage, parent = undefined) {
       errorBubble = target.parentElement.parentElement.querySelector('.errorBubble');
     }
   }
+  if (!errorBubble)
+    return;
   // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
   if (hasError) {
     target.classList.add('invalid');
@@ -117,7 +124,7 @@ function setErrorState(target, hasError, errorMessage, parent = undefined) {
   }
 }
 
-const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label{font-weight:500;font-size:16px;line-height:19px;color:#212121}label .optional{color:#757575;font-weight:normal}label .outer-container{position:relative}label .outer-container .left-icons,label .outer-container .right-icons{display:flex;position:absolute;height:24px;gap:8px}label .outer-container .left-icons tttx-icon,label .outer-container .right-icons tttx-icon{height:24px;width:24px}label .outer-container .left-icons{left:8px}label .outer-container .right-icons{right:8px}label .outer-container input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px;}label .outer-container input.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon{padding-right:40px}label .outer-container input.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label .outer-container input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus{border-color:#1479c6}label .outer-container input:focus-visible{outline:none}label .outer-container.inputBlock{display:flex;align-items:center;line-height:21px}label .outer-container.inputBlock .left-icons,label .outer-container.inputBlock .right-icons{margin-top:4px}label .outer-container.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}label .outer-container.inputInline{display:flex;white-space:nowrap;align-items:center;margin:0}label .outer-container.inputInline input{margin-top:0}label .secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16px;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}label .errorBubble:not(.visible){display:none}label .errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:block}fieldset{margin:0;padding:0;border:none}label{display:block;position:relative;margin-bottom:16px}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}";
+const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label{font-weight:500;font-size:16px;line-height:19px;color:#212121}label .optional{color:#757575;font-weight:normal}label .outer-container{position:relative}label .outer-container .left-icons,label .outer-container .right-icons{display:flex;position:absolute;height:24px;gap:8px}label .outer-container .left-icons tttx-icon,label .outer-container .right-icons tttx-icon{height:24px;width:24px}label .outer-container .left-icons{left:8px}label .outer-container .right-icons{right:8px}label .outer-container input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px;}label .outer-container input.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon{padding-right:40px}label .outer-container input.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label .outer-container input[type=radio]{width:20px;height:20px}label .outer-container input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus{border-color:#1479c6}label .outer-container input:focus-visible{outline:none}label .outer-container.inputBlock{display:flex;align-items:center;line-height:21px}label .outer-container.inputBlock .left-icons,label .outer-container.inputBlock .right-icons{margin-top:4px}label .outer-container.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}label .outer-container.inputBlock.radioBlock{display:block}label .outer-container.inputInline{display:flex;white-space:nowrap;align-items:center;margin:0}label .outer-container.inputInline input{margin-top:0}label .secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16px;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}label .errorBubble:not(.visible){display:none}label .errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:block}fieldset{margin:0;padding:0;border:none}label{display:block;position:relative;margin-bottom:16px}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}";
 
 const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -376,17 +383,21 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   createLabel(formProperties, input, errorBubble) {
     const outerContainer = document.createElement('div');
-    outerContainer.className = 'outer-container inputBlock';
+    let outerContainerClassName = 'outer-container inputBlock';
     // Create a new <label> element with the "inputBlock" class and the specified text
     const label = document.createElement('label');
     label.innerText = formProperties.label;
     // If the form property has no validation object, add an "optional" span element to the label
-    if (!formProperties.validation) {
+    if (!formProperties.validation && formProperties.label) {
       const optionalSpan = document.createElement('span');
       optionalSpan.className = 'optional';
       optionalSpan.innerHTML = '&nbsp;(optional)';
       label.appendChild(optionalSpan);
     }
+    if (formProperties.type === 'radio') {
+      outerContainerClassName += ' radioBlock';
+    }
+    outerContainer.className = outerContainerClassName;
     if (formProperties.readonly) {
       label.classList.add('readonly');
     }
@@ -404,6 +415,38 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // Return the label element
     return label;
   }
+  /**
+   * Creates a new radio input with a set of options.
+   *
+   * @param {string} formKey - The name of the dropdown field, as specified in the form schema.
+   * @param {Object} formProperties - An object containing additional properties, such as the field type and options properties.
+   * @param {'radio'} formProperties.type - The type of form field. In this case, it will always be "radio".
+   * @param {Object} formProperties.validation - A set of validation rules for the field.
+   * @param {Object[]} formProperties.options - A list of properties to pass to the select options.
+   * @param {string} formProperties.options.label - The visible value of the option.
+   * @param {string} formProperties.options.value - The actual value of the option.
+   */
+  createRadio(formKey, formProperties) {
+    var _a, _b;
+    const fragment = new DocumentFragment();
+    for (const optionProperties of formProperties.options) {
+      // Create a new <input> element with the specified name and type
+      const input = document.createElement('input');
+      input.type = 'radio';
+      input.name = formKey;
+      input.value = optionProperties.value;
+      if ((_a = formProperties === null || formProperties === void 0 ? void 0 : formProperties.validation) === null || _a === void 0 ? void 0 : _a.required) {
+        input.setAttribute('required', 'required');
+        input.setAttribute('data-required', (_b = formProperties.validation.required.message) !== null && _b !== void 0 ? _b : '');
+      }
+      const span = document.createElement('span');
+      span.innerText = optionProperties.label;
+      fragment.appendChild(input);
+      fragment.appendChild(span);
+      fragment.appendChild(document.createElement('br'));
+    }
+    return fragment;
+  }
   /**
    * Populates the form template with input fields and labels based on the properties of the
    * current form schema. For each property in the schema, it creates an input element, applies
@@ -423,9 +466,19 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     propertyKeys.forEach(formKey => {
       const formItem = properties[formKey];
       const formProperties = formItem.form;
-      const input = formProperties.type === 'select' ? this.createSelect(formKey, formProperties) : this.createInput(formKey, formProperties);
+      let input;
+      switch (formProperties.type) {
+        case 'select':
+          input = this.createSelect(formKey, formProperties);
+          break;
+        case 'radio':
+          input = this.createRadio(formKey, formProperties);
+          break;
+        default:
+          input = this.createInput(formKey, formProperties);
+      }
       // If the form property has validation, apply it to the input
-      if (formProperties.validation) {
+      if (formProperties.validation && formProperties.type !== 'radio') {
         this.applyValidation(input, formProperties.validation);
       }
       // Create an error bubble and label element for the input
@@ -456,25 +509,40 @@ const TttxForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const propertyKeys = Object.keys(properties);
     propertyKeys.forEach(formKey => {
       var _a, _b;
-      const formInput = formItems.querySelector(`[name=${formKey}]`);
-      // Bind events to form input elements
-      formInput.oninvalid = this.validityCheckWrapper.bind(this);
-      formInput.onblur = this.validityCheckWrapper.bind(this);
-      formInput.onkeyup = this.fieldChanged.bind(this);
-      formInput.onchange = this.fieldChanged.bind(this);
-      if (((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) !== undefined && this._data[formKey] !== null) {
-        formInput.value = this._data[formKey];
-      }
-      // If explicitly setting input as invalid, set invalid state and error message on render
-      if ((_b = properties[formKey].form.validation) === null || _b === void 0 ? void 0 : _b.invalid) {
-        const errorMessage = properties[formKey].form.validation.invalid.message;
-        formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
-        setErrorState(formInput, true, errorMessage);
-      }
-      if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
-        formInput.addEventListener('change', () => {
-          formInput.classList.remove('placeholder');
-        });
+      const formInputs = formItems.querySelectorAll(`[name=${formKey}]`);
+      for (const formInput of formInputs) {
+        // Bind events to form input elements
+        formInput.oninvalid = this.validityCheckWrapper.bind(this);
+        formInput.onblur = this.validityCheckWrapper.bind(this);
+        formInput.onkeyup = this.fieldChanged.bind(this);
+        formInput.onchange = this.fieldChanged.bind(this);
+        if ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) {
+          switch (formInput.type) {
+            case 'checkbox':
+              if (this._data[formKey] === 'on') {
+                formInput.checked = true;
+              }
+              break;
+            case 'radio':
+              if (formInput.value === this._data[formKey]) {
+                formInput.checked = true;
+              }
+              break;
+            default:
+              formInput.value = this._data[formKey];
+          }
+        }
+        // If explicitly setting input as invalid, set invalid state and error message on render
+        if ((_b = properties[formKey].form.validation) === null || _b === void 0 ? void 0 : _b.invalid) {
+          const errorMessage = properties[formKey].form.validation.invalid.message;
+          formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
+          setErrorState(formInput, true, errorMessage);
+        }
+        if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
+          formInput.addEventListener('change', () => {
+            formInput.classList.remove('placeholder');
+          });
+        }
       }
     });
     // Append the cloned form elements to the fieldset

package/dist/components/tttx-icon2.js

@@ -11,7 +11,12 @@ const TttxIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.color = 'grey';
   }
   render() {
-    return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
+    if (this.color.startsWith('#')) {
+      return (h(Host, null, h("span", { class: 'material-symbols-rounded', style: { color: this.color } }, this.icon)));
+    }
+    else {
+      return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color}` }, this.icon)));
+    }
   }
   static get style() { return tttxIconCss; }
 }, [1, "tttx-icon", {

package/dist/components/tttx-standalone-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './tttx-icon2.js';
 
-const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;color:#212121}label.sc-tttx-standalone-input .optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input{position:relative}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{display:flex;position:absolute;height:24px;gap:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input{height:24px;width:24px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input{left:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{right:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.has-left-icon.sc-tttx-standalone-input{padding-left:72px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-left-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-right-icon.sc-tttx-standalone-input{padding-right:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus{border-color:#1479c6}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus-visible{outline:none}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input{display:flex;align-items:center;line-height:21px}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{margin-top:4px}label.sc-tttx-standalone-input .outer-container.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center;margin:0}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input input.sc-tttx-standalone-input{margin-top:0}label.sc-tttx-standalone-input .secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;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}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input:not(.visible){display:none}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded.sc-tttx-standalone-input{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.sc-tttx-standalone-input-h{display:block}";
+const tttxStandaloneInputCss = ".material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;color:#212121}label.sc-tttx-standalone-input .optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input{position:relative}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{display:flex;position:absolute;height:24px;gap:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input tttx-icon.sc-tttx-standalone-input{height:24px;width:24px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input{left:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{right:8px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-input-icon.has-left-icon.sc-tttx-standalone-input{padding-left:72px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-left-icon.sc-tttx-standalone-input{padding-left:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.has-right-icon.sc-tttx-standalone-input{padding-right:40px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[type=radio].sc-tttx-standalone-input{width:20px;height:20px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus{border-color:#1479c6}label.sc-tttx-standalone-input .outer-container.sc-tttx-standalone-input input.sc-tttx-standalone-input:focus-visible{outline:none}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input{display:flex;align-items:center;line-height:21px}label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .left-icons.sc-tttx-standalone-input,label.sc-tttx-standalone-input .outer-container.inputBlock.sc-tttx-standalone-input .right-icons.sc-tttx-standalone-input{margin-top:4px}label.sc-tttx-standalone-input .outer-container.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}label.sc-tttx-standalone-input .outer-container.inputBlock.radioBlock.sc-tttx-standalone-input{display:block}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center;margin:0}label.sc-tttx-standalone-input .outer-container.inputInline.sc-tttx-standalone-input input.sc-tttx-standalone-input{margin-top:0}label.sc-tttx-standalone-input .secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;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}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input:not(.visible){display:none}label.sc-tttx-standalone-input .errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded.sc-tttx-standalone-input{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.sc-tttx-standalone-input-h{display:block}";
 
 const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/tttx-tree-view.js

@@ -13,6 +13,7 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.clickEvent = createEvent(this, "clickEvent", 7);
     this.expandNode = createEvent(this, "expandNode", 7);
     this.data = undefined;
+    this.firstSelected = undefined;
     this.treeData = undefined;
     this.selectedId = undefined;
   }
@@ -55,9 +56,8 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   updateSelected(node) {
     let selected = false;
-    if (node.id === this.selectedId) {
+    if (node.id === this.selectedId)
       selected = true;
-    }
     return selected;
   }
   treeConfigs(node) {
@@ -105,12 +105,15 @@ const TttxTreeView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   render() {
     if (!this.data)
       return;
+    if (this.firstSelected)
+      this.selectedId = this.data[0].id;
     this.treeData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data;
     return (h("div", { class: "tree-view-element" }, h("ul", null, this.treeData.map((node) => this.renderNode(node)))));
   }
   static get style() { return tttxTreeViewCss; }
 }, [1, "tttx-tree-view", {
     "data": [1040],
+    "firstSelected": [1028, "first-selected"],
     "treeData": [32],
     "selectedId": [32]
   }]);

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],"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]}]]],["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-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]}]]],["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);
   });
 };