@3t-transform/threeteeui 0.2.97 → 0.2.98

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

@@ -38,6 +38,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
@@ -65,11 +75,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 };
 }
@@ -99,6 +104,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');
@@ -122,7 +129,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 = class {
   constructor(hostRef) {
@@ -379,17 +386,21 @@ const TttxForm = class {
    */
   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');
     }
@@ -407,6 +418,38 @@ const TttxForm = class {
     // 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
@@ -426,9 +469,19 @@ const TttxForm = class {
     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
@@ -459,25 +512,40 @@ const TttxForm = class {
     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/cjs/tttx-icon.cjs.entry.js

@@ -13,7 +13,12 @@ const TttxIcon = class {
     this.color = 'grey';
   }
   render() {
-    return (index.h(index.Host, null, index.h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
+    if (this.color.startsWith('#')) {
+      return (index.h(index.Host, null, index.h("span", { class: 'material-symbols-rounded', style: { color: this.color } }, this.icon)));
+    }
+    else {
+      return (index.h(index.Host, null, index.h("span", { class: `material-symbols-rounded ${this.color}` }, this.icon)));
+    }
   }
 };
 TttxIcon.style = tttxIconCss;

package/dist/cjs/tttx-standalone-input.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-992a9fb3.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 = class {
   constructor(hostRef) {

package/dist/collection/components/atoms/tttx-icon/tttx-icon.js

@@ -5,7 +5,12 @@ export class TttxIcon {
     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 is() { return "tttx-icon"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js

@@ -1,5 +1,5 @@
 import icons from './../../../icons';
-const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred'];
+const colors = ['red', 'blue', 'black', 'white', 'gray', 'green', 'orange', 'darkred', '#397A4C', '#FF00BB'];
 export default {
   title: 'Atoms/Icons',
   component: 'tttx-icon',

package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js

@@ -13,5 +13,12 @@ export default {
 };
 export const Example = args => {
   const size = args.size || 'large';
-  return `<tttx-loading-spinner ${args.loadingMessage ? 'loading-message' : ''} size='${size}' />`;
+  return `<tttx-loading-spinner data-chromatic="ignore" ${args.loadingMessage ? 'loading-message' : ''} size='${size}' />`;
+};
+Example.parameters = {
+  chromatic: {
+    pauseAnimationAtEnd: true,
+    delay: 5000,
+    disableSnapshot: true
+  },
 };

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

@@ -23,6 +23,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');

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

@@ -30,6 +30,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
@@ -57,11 +67,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 };
 }

package/dist/collection/components/molecules/tttx-form/tttx-form.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-form/tttx-form.js

@@ -258,17 +258,21 @@ export class TttxForm {
    */
   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');
     }
@@ -286,6 +290,38 @@ export class TttxForm {
     // 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
@@ -305,9 +341,19 @@ export class TttxForm {
     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
@@ -338,25 +384,40 @@ export class TttxForm {
     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/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,
+};