@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,1267 +1,1267 @@
-import { h, Host } from '@stencil/core';
-import * as DOMPurify from 'dompurify';
-import domSanitiserOptions from '../../../shared/domsanitiser.options';
-import validityCheck from './lib/validityCheck';
-import setErrorState from './lib/setErrorState';
-import { endDateComparisonValidator, startEndTimeComparator, startDateComparisonValidator } from './lib/timecomparatorChecks';
-export class TttxForm {
-  constructor() {
-    // Create a new template element using the HTMLTemplateElement interface.
-    this.template = document.createElement('template');
-    this.formschema = undefined;
-    this.data = undefined;
-  }
-  // This method is called whenever the "formschema" property changes
-  onFormSchemaChange(newValue) {
-    // Check if the new value is a string, indicating that it needs to be parsed
-    if (typeof newValue === 'string') {
-      // Parse the string and set the "_formSchema" property
-      this._formSchema = JSON.parse(newValue);
-    }
-    else {
-      // If the new value is already an object, set the "_formSchema" property directly
-      this._formSchema = newValue;
-    }
-    return this._formSchema;
-  }
-  onDataChange(newValue) {
-    if (typeof newValue === 'string') {
-      this._data = JSON.parse(newValue);
-    }
-    else {
-      this._data = newValue;
-    }
-    return this._data;
-  }
-  /**
-   * Handles the focus event for a form field and emits a "dataChanged" event
-   * to the parent component with the field name and its new value.
-   *
-   * @param {KeyboardEvent | Event} event - The focus event triggered by the field.
-   * @return {void}
-   */
-  fieldChanged(event) {
-    // Extract the name and value of the field from the event
-    const target = event.target;
-    const fieldName = target.name;
-    let fieldValue = target.value;
-    if (target.type === 'checkbox') {
-      fieldValue = target.checked ? 'on' : 'off';
-    }
-    // Emit an event to signal that the field's data has changed
-    this.dataChanged.emit({ name: fieldName, value: fieldValue });
-  }
-  async submit() {
-    this.submitButton.click();
-  }
-  async showLoadingSpinner(fieldname, value) {
-    const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldname}]`);
-    tttxSelect.isLoading = value;
-  }
-  async setSelectedItem(fieldname, id) {
-    const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldname}]`);
-    // select option with id
-    await tttxSelect.setSelectedItem(id);
-  }
-  /**
-   * Replace all children in a given select list with a list of new options
-   * @param { string } fieldname the form name of the given field
-   * @param { {label: string, value: string}[] } options a list of option values and labels
-   */
-  async setSelectOptions(fieldname, options, skipDefultSelection) {
-    const select = this.fieldset.querySelector(`[name=${fieldname}]`);
-    const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldname}]`);
-    const fragment = new DocumentFragment();
-    for (const option of options) {
-      const o = document.createElement('option');
-      o.innerText = option.label;
-      o.value = option.value;
-      if (option.disabled) {
-        o.disabled = true;
-      }
-      fragment.appendChild(o);
-    }
-    select.replaceChildren(fragment);
-    tttxSelect.optionsData = options;
-    // skip the first option selection if skipDefultSelection is true.
-    if (!skipDefultSelection) {
-      await tttxSelect.setSelectedItem(options.length > 0 ? options[0].value : undefined);
-    }
-  }
-  async isValid() {
-    const valid = this.form.checkValidity();
-    const allElements = this.fieldset.querySelectorAll('[custom-validation-set=true]');
-    if (allElements.length || !valid) {
-      return false;
-    }
-    return true;
-  }
-  /**
-   * Submits the form data to the server.
-   *
-   * @param {SubmitEvent} event - The event object for the form submission.
-   * @returns {void}
-   */
-  doSubmit(event) {
-    // prevent the form from submitting normally
-    event.preventDefault();
-    const allElements = this.fieldset.querySelectorAll('[custom-validation-set=true]');
-    if (allElements.length) {
-      return;
-    }
-    // create a new FormData object with the form data
-    const formData = new FormData(event.target);
-    // get a list of checkboxes, if any, so we can manually set unchecked box data
-    const formProperties = this._formSchema.properties;
-    for (const formKey of Object.keys(formProperties)) {
-      if (formProperties[formKey].form.type === 'checkbox' && !formData.has(formKey)) {
-        formData.append(formKey, 'off');
-      }
-    }
-    // emit the form data through the `dataSubmitted` event
-    this.dataSubmitted.emit(formData);
-  }
-  // This method is called before the component is loaded into the DOM
-  componentWillLoad() {
-    // Initialize the form schema by calling the "onFormSchemaChange" method with the current "formschema" property
-    this.onFormSchemaChange(this.formschema);
-    if (this.data) {
-      this.onDataChange(this.data);
-    }
-  }
-  // This method is called before the component is rendered
-  componentWillRender() {
-    // Clear the template to account for a potential re-render scenario
-    this.template = document.createElement('template');
-    // Populate the form from the form schema
-    this.populateFormFromSchema();
-  }
-  /**
-   * Creates a new HTMLSelectElement 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 {'select'} formProperties.type - The type of form field. In this case, it will always be "select".
-   * @param {object} formProperties.validation - A set of validation rules for the field.
-   * @param {Array<{label:string, value:string, placeholder?:boolean}>} 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.
-   * @param {boolean} [formProperties.options[].placeholder]
-   */
-  createSelect(formKey, formProperties) {
-    var _a, _b, _c, _d, _e, _f;
-    const select = document.createElement('select');
-    select.setAttribute('name', formKey);
-    (_a = formProperties.options) === null || _a === void 0 ? void 0 : _a.forEach(optionProperties => {
-      this.appendOption(select, optionProperties);
-    });
-    if ((_b = this._data) === null || _b === void 0 ? void 0 : _b[formKey]) {
-      select.classList.remove('placeholder');
-    }
-    const tttxSelect = document.createElement('tttx-select-box_1_9_101');
-    tttxSelect.optionsData = (_c = formProperties.options) === null || _c === void 0 ? void 0 : _c.filter(o => !o.placeholder);
-    tttxSelect.placeholder = (_e = (_d = formProperties.options) === null || _d === void 0 ? void 0 : _d.filter(o => o.placeholder)[0]) === null || _e === void 0 ? void 0 : _e.label;
-    tttxSelect.inline = false;
-    tttxSelect.searchEnabled = true;
-    tttxSelect.useExternalFiltering = formProperties.useExternalFiltering || false;
-    tttxSelect.style.width = '100%';
-    tttxSelect.style.marginTop = '6px';
-    tttxSelect.isLoading = formProperties.isLoading || false;
-    tttxSelect.readOnly = (_f = formProperties.readOnly) !== null && _f !== void 0 ? _f : false;
-    tttxSelect.setAttribute('name', 'overlay-' + formKey);
-    const fragment = document.createDocumentFragment();
-    fragment.append(tttxSelect);
-    select.style.display = 'none';
-    tttxSelect.addEventListener('selectItemEvent', this.selectItemEventCallback.bind(select));
-    // emit the event for searchTermChanged.
-    tttxSelect.addEventListener('multiselectSearchUpdated', (ev) => this.searchTermChanged.emit({
-      name: formKey,
-      value: ev.detail,
-      type: 'SearchTermChanged'
-    }));
-    tttxSelect.addEventListener('toggleOpen', (ev) => this.selectToggleOpen.emit({
-      name: formKey,
-      value: ev.detail,
-      type: 'ToggleOpen'
-    }));
-    return { input: select, overlay: fragment };
-  }
-  selectItemEventCallback(ev) {
-    // this function MUST be bound to a HTMLSelectElement
-    // 'this' will be the select element
-    // the function was split out for testing
-    const select = this;
-    select.value = ev.detail.value;
-    select.onblur({ target: select }); // triggers validator
-    select.onchange({ target: select }); // triggers dataChanged event
-  }
-  /**
-   * Appends an option to a select element
-   *
-   * @param {HTMLSelectElement} select - The select elements to attach the option to.
-   * @param {Object} optionProperties
-   * @param {string} optionProperties.value - The value of the option.
-   * @param {string} optionProperties.label - The label which will be displayed on the form for the option.
-   * @param {boolean} [optionProperties.placeholder]
-   */
-  appendOption(select, optionProperties) {
-    const option = document.createElement('option');
-    option.setAttribute('value', optionProperties.value);
-    if (optionProperties.placeholder) {
-      option.setAttribute('disabled', (optionProperties.disabled) ? 'true' : '');
-      option.setAttribute('selected', '');
-      option.setAttribute('hidden', '');
-      select.classList.add('placeholder');
-    }
-    if (optionProperties.label)
-      option.innerHTML = DOMPurify.sanitize(optionProperties.label, domSanitiserOptions);
-    select.appendChild(option);
-  }
-  /**
-   * Creates a new HTMLInputElement with the specified name, type, and placeholder (if any),
-   * and sets its autocomplete and autocapitalization properties to off.
-   *
-   * @param {string} formKey - The name of the input field, as specified in the form schema.
-   * @param {Record<string, any>} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
-   * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
-   * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
-   * @return {HTMLInputElement} - The new input element.
-   */
-  createInput(formKey, formProperties) {
-    var _a;
-    // Create a new <input> element with the specified name and type
-    const input = document.createElement('input');
-    input.type = formProperties.type;
-    input.name = formKey;
-    // Set the placeholder attribute to the specified value (if any)
-    input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
-    // Disable autocomplete and autocapitalization
-    input.autocomplete = 'off';
-    input.autocapitalize = 'off';
-    if (formProperties.readonly) {
-      input.readOnly = true;
-    }
-    if (formProperties.maskedValue) {
-      // Clear input on focus
-      input.onfocus = () => {
-        if (input.value === formProperties.maskedValue) {
-          input.value = '';
-        }
-      };
-      // Restore value or update it on blur
-      input.addEventListener('blur', () => {
-        if (input.value.trim() === '') {
-          input.value = formProperties.maskedValue;
-        }
-        else {
-          formProperties.value = input.value;
-        }
-      });
-    }
-    // Return the input element
-    return input;
-  }
-  /**
-   * Creates a new HTMLTextAreaElement with the specified name and placeholder (if any),
-   * and sets its autocomplete and autocapitalization properties to off.
-   *
-   * @param {string} formKey - The name of the input field, as specified in the form schema.
-   * @param {Record<string, any>} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
-   * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
-   * @return {HTMLTextAreaElement} - The new input element.
-   */
-  createTextArea(formKey, formProperties) {
-    var _a;
-    const input = document.createElement('textarea');
-    input.name = formKey;
-    // Set the placeholder attribute to the specified value (if any)
-    input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
-    // Disable autocomplete and autocapitalization
-    input.autocomplete = 'off';
-    input.autocapitalize = 'off';
-    if (formProperties.readonly) {
-      input.readOnly = true;
-    }
-    if (formProperties.resize === 'none') {
-      input.classList.add('resize-none');
-    }
-    // Return the input element
-    return input;
-  }
-  createStartEndDateComponent(formKey, formProperties) {
-    var _a, _b, _c, _d;
-    const startDate = document.createElement('input');
-    const endDate = document.createElement('input');
-    startDate.type = endDate.type = 'date';
-    startDate.name = `${formKey}-startdate`;
-    endDate.name = `${formKey}-enddate`;
-    startDate.setAttribute('data-formkey', formKey);
-    endDate.setAttribute('data-formkey', formKey);
-    if (formProperties.readonly) {
-      startDate.readOnly = true;
-      endDate.readOnly = true;
-    }
-    this.applyValidation(startDate, Object.assign({ required: { message: 'Please enter a start date' }, dateCompare: { to: endDate.name } }, (_a = formProperties.validation) === null || _a === void 0 ? void 0 : _a.startDate));
-    this.applyValidation(endDate, Object.assign({ required: { message: 'Please enter an end date' }, dateCompare: { with: startDate.name, message: 'End date cannot be before the start date' } }, (_b = formProperties.validation) === null || _b === void 0 ? void 0 : _b.endDate));
-    let startTime;
-    let endTime;
-    if (formProperties.includeTime) {
-      startTime = document.createElement('input');
-      endTime = document.createElement('input');
-      startTime.type = endTime.type = 'time';
-      startTime.name = `${formKey}-starttime`;
-      endTime.name = `${formKey}-endtime`;
-      startTime.setAttribute('data-formkey', formKey);
-      endTime.setAttribute('data-formkey', formKey);
-      if (formProperties.readonly) {
-        startTime.readOnly = true;
-        endTime.readOnly = true;
-      }
-      this.applyValidation(startTime, Object.assign({ required: { message: 'Please enter a start time' } }, (_c = formProperties.validation) === null || _c === void 0 ? void 0 : _c.startTime));
-      this.applyValidation(endTime, Object.assign({ required: { message: 'Please enter an end time' } }, (_d = formProperties.validation) === null || _d === void 0 ? void 0 : _d.endTime));
-    }
-    const startLabel = document.createElement('label');
-    startLabel.innerText = 'Start date';
-    const endLabel = document.createElement('label');
-    endLabel.innerText = 'End date';
-    const startContainer = document.createElement('div');
-    const endContainer = document.createElement('div');
-    startContainer.className = endContainer.className = 'outer-container inputBlock';
-    startLabel.className = endLabel.className = 'flex-label';
-    startContainer.append(startDate);
-    if (startTime) {
-      startContainer.append(startTime);
-    }
-    startLabel.append(startContainer);
-    startLabel.append(this.createErrorBubble());
-    endContainer.append(endDate);
-    if (endTime) {
-      endContainer.append(endTime);
-    }
-    endLabel.append(endContainer);
-    endLabel.append(this.createErrorBubble());
-    return { start: startLabel, end: endLabel };
-  }
-  /**
-   * Applies validation attributes to an input element based on the specified validation object.
-   * If a certain property is present in the object, it will set the corresponding attribute on
-   * the input element (e.g., "required" will set the "required" and "data-required" attributes,
-   * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
-   *
-   * @param {FormField} input - The input element to apply validation attributes to.
-   * @param {object} validation - An object containing the validation rules for the input field.
-   * @param {object} [validation.required] - An object containing a "message" property to display if the field is required.
-   * @param {string} [validation.required.message]
-   * @param {object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
-   * @param {string} [validation.pattern.pattern]
-   * @param {string} [validation.pattern.message]
-   * @param {object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
-   * @param {string} [validation.badInput.message]
-   * @param {object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
-   * @param {string} [validation.minmax.min]
-   * @param {string} [validation.minmax.max]
-   * @param {string} [validation.minmax.message]
-   * @param {string} [validation.maxlength] - The maximum length of the input field.
-   * @param {string} [validation.datecompare] - To compare start and end date fields.
-   * @return {void}
-   */
-  applyValidation(input, validation) {
-    var _a, _b;
-    // If the "required" property is present, add the "required" attribute to the input element and
-    // set its "data-required" attribute to the specified message (if any)
-    if (validation.required) {
-      input.setAttribute('required', '');
-      input.setAttribute('data-required', (_a = validation.required.message) !== null && _a !== void 0 ? _a : '');
-    }
-    // If the "pattern" property is present, add the "pattern" attribute to the input element and set
-    // its "data-pattern" attribute to the specified message (if any)
-    if (validation.pattern) {
-      input.setAttribute('pattern', validation.pattern.pattern);
-      input.setAttribute('data-pattern', (_b = validation.pattern.message) !== null && _b !== void 0 ? _b : '');
-    }
-    // If the "badInput" property is present, set the input element's "data-badinput" attribute to
-    // the specified message
-    if (validation.badInput) {
-      input.setAttribute('data-badinput', validation.badInput.message);
-    }
-    // If the "minmax" property is present, add the "min" and "max" attributes to the input element
-    // and set its "data-range" attribute to the specified message (if any)
-    if (validation.minmax) {
-      input.setAttribute('min', validation.minmax.min);
-      input.setAttribute('max', validation.minmax.max);
-      input.setAttribute('data-range', validation.minmax.message);
-    }
-    // If the "maxlength" property is present, add the "maxlength" attribute to the input element
-    if (validation.maxlength) {
-      input.setAttribute('maxlength', validation.maxlength);
-    }
-    // Custom validation parameters for start date and end date comparison
-    if (validation.dateCompare) {
-      if (validation.dateCompare.message && validation.dateCompare.with) {
-        input.setAttribute('data-compare', validation.dateCompare.message);
-        input.setAttribute('data-compare-with', validation.dateCompare.with);
-      }
-      if (validation.dateCompare.to) {
-        input.setAttribute('data-compare-to', validation.dateCompare.to);
-      }
-    }
-  }
-  // Create a new error bubble element
-  createErrorBubble() {
-    // Create a new <div> element with the "errorBubble" class
-    const errorBubble = document.createElement('div');
-    errorBubble.className = 'errorBubble';
-    // Return the error bubble element
-    return errorBubble;
-  }
-  /**
-   *
-   * @param {Record<string, any>} formProperties
-   * @param {HTMLInputElement | HTMLSelectElement} input
-   * @param {HTMLLabelElement} label
-   * @returns {void}
-   */
-  appendCheckboxInput(formProperties, input, label) {
-    if (formProperties.label) {
-      const lineBreak = document.createElement('br');
-      label.appendChild(lineBreak);
-    }
-    // Append the input element and error bubble element to the label
-    label.appendChild(input);
-    if (!formProperties.inlineLabel)
-      return;
-    const inlineLabel = document.createElement('span');
-    inlineLabel.className = 'inlineLabel';
-    inlineLabel.textContent = formProperties.inlineLabel;
-    label.appendChild(inlineLabel);
-  }
-  /**
-   * Creates a new <label> element with the "inputBlock" class and the specified label text,
-   * and appends the input element and error bubble element to it. If the form property has
-   * no validation object, it adds an "optional" span element to the label.
-   *
-   * @param {Record<string, any>} formProperties - An object containing properties for the form field, including its label text and validation rules.
-   * @param {HTMLInputElement | HTMLSelectElement} input - The input element to associate with the label.
-   * @param {never} overlay - The Child Element which will be rendered atop the standard HTML5 element
-   * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
-   * @return {HTMLLabelElement} - The new label element.
-   */
-  createLabel(formProperties, input, overlay = null, errorBubble) {
-    var _a;
-    const outerContainer = document.createElement('div');
-    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 (!((_a = formProperties.validation) === null || _a === void 0 ? void 0 : _a.required) && 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');
-    }
-    if (formProperties.type === 'checkbox') {
-      this.appendCheckboxInput(formProperties, input, label);
-    }
-    else {
-      // Append the input element and error bubble element to the outerContainer
-      if (overlay) {
-        outerContainer.appendChild(overlay);
-      }
-      outerContainer.appendChild(input);
-    }
-    if (formProperties.type !== 'checkbox') {
-      label.appendChild(outerContainer);
-    }
-    label.appendChild(errorBubble);
-    // 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 = document.createDocumentFragment();
-    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
-   * any validation rules to it, creates an error bubble and label element, and appends them
-   * to the form template. Finally, it creates and appends a submit button element to the form.
-   *
-   * @return {void}
-   */
-  populateFormFromSchema() {
-    var _a;
-    // If there is no form schema, return early
-    if (!this._formSchema) {
-      return;
-    }
-    // Get the properties of the form schema and their keys
-    const properties = this._formSchema.properties;
-    const propertyKeys = Object.keys(properties);
-    // Loop through each property key and create an input, label, and error bubble for it
-    for (const formKey of propertyKeys) {
-      const formItem = properties[formKey];
-      const formProperties = formItem.form;
-      // complex form types which require
-      // custom HTML should be done here
-      if (formProperties.type === 'startenddate') {
-        const { start, end } = this.createStartEndDateComponent(formKey, formProperties);
-        this.template.content.append(start);
-        this.template.content.append(end);
-        continue;
-      }
-      let fragments = {};
-      switch (formProperties.type) {
-        case 'select':
-          fragments = this.createSelect(formKey, formProperties);
-          break;
-        case 'radio':
-          fragments.input = this.createRadio(formKey, formProperties);
-          break;
-        case 'textarea':
-          fragments.input = this.createTextArea(formKey, formProperties);
-          break;
-        default:
-          fragments.input = this.createInput(formKey, formProperties);
-      }
-      // If the form property has validation, apply it to the input
-      if (formProperties.validation &&
-        formProperties.type !== 'radio') {
-        this.applyValidation(fragments.input, formProperties.validation);
-      }
-      // Create an error bubble and label element for the input
-      const errorBubble = this.createErrorBubble();
-      const label = this.createLabel(formProperties, fragments.input, fragments.overlay, errorBubble);
-      // If explicitly setting input as invalid, set invalid state and error message on render
-      if ((_a = formProperties.validation) === null || _a === void 0 ? void 0 : _a.invalid) {
-        const errorMessage = formProperties.validation.invalid.message;
-        fragments.input.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
-        setErrorState(fragments.input, true, errorMessage);
-      }
-      // Append the label element to the form template
-      this.template.content.append(label);
-      if (formProperties.disabled) {
-        this.toggleFormField(fragments.input, true);
-      }
-    }
-  }
-  /**
-   * Clones the form template and binds event listeners to its input elements. First, it checks if
-   * there is a form schema present. If so, it clones the template's content, binds events to form
-   * input elements, and appends the cloned form elements to the fieldset. The event listeners include
-   * "oninvalid" (to check input validity on submit), "onblur" (to check input validity on blur),
-   * "onkeyup" (to handle changes in input fields), and "onchange" (to handle changes in select fields).
-   *
-   * @return {void}
-   */
-  componentDidRender() {
-    // If there's no form schema, return
-    if (!this._formSchema) {
-      return;
-    }
-    // Clone the template's content and store it in a variable
-    const formItems = this.template.content;
-    // Bind event listeners to form elements
-    const properties = this._formSchema.properties;
-    const propertyKeys = Object.keys(properties);
-    for (const formKey of propertyKeys) {
-      this.applyValidationFunctionsToFormElement(formItems, formKey, properties);
-    }
-    // populate with existing form data if available
-    if ((this._data && Object.keys(this._data).length > 0)) {
-      this.populateFormWithExistingData(formItems);
-    }
-    // Append the cloned form elements to the fieldset
-    this.fieldset.replaceChildren(formItems);
-  }
-  /**
-   * Assign validation events to a given form item
-   * @param formItems The document fragment template of form items to be rendered
-   * @param formKey The key of the form item to bind events too
-   * @param properties The form item's properties, such as type and name
-   */
-  applyValidationFunctionsToFormElement(formItems, formKey, properties) {
-    const formItemsByKey = formItems.querySelectorAll(`[name^=${formKey}]`);
-    for (const formInput of formItemsByKey) {
-      // 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 (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
-        formInput.addEventListener('change', this.selectRemovePlaceholderCallback.bind(formInput));
-      }
-      if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-with')) {
-        formInput.oninvalid = endDateComparisonValidator.bind(this);
-        formInput.onblur = endDateComparisonValidator.bind(this);
-      }
-      if (properties[formKey].form.type === 'startenddate' && formInput.type === 'time') {
-        formInput.oninvalid = startEndTimeComparator.bind(this);
-        formInput.onblur = startEndTimeComparator.bind(this);
-      }
-      if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-to')) {
-        formInput.oninvalid = startDateComparisonValidator.bind(this);
-        formInput.onblur = startDateComparisonValidator.bind(this);
-      }
-    }
-  }
-  /**
-   * If data exists, set form input values before rendering
-   * @param formItems The document fragment template of form items to be rendered
-   */
-  populateFormWithExistingData(formItems) {
-    var _a;
-    const dataKeys = Object.keys(this._data);
-    for (const key of dataKeys) {
-      const formItemsByKey = formItems.querySelectorAll(`[name=${key}]`);
-      for (const formItem of formItemsByKey) {
-        switch (formItem.type) {
-          case 'checkbox':
-            if (this._data[key] === 'on') {
-              formItem.checked = true;
-            }
-            break;
-          case 'radio':
-            if (formItem.value === this._data[key]) {
-              formItem.checked = true;
-            }
-            break;
-          case 'select':
-          case 'select-one':
-            formItems.querySelector(`[name=overlay-${key}]`)['selectedValue'] = this._data[key];
-            formItem.value = this._data[key];
-            break;
-          case 'date':
-            formItem.value = (_a = this._data[key]) === null || _a === void 0 ? void 0 : _a.split('T')[0];
-            break;
-          default:
-            formItem.value = this._data[key];
-        }
-      }
-    }
-  }
-  /**
-   * Remove the placeholder class on the bound THIS select element
-   */
-  selectRemovePlaceholderCallback() {
-    const select = this;
-    select.classList.remove('placeholder');
-  }
-  /**
-   * A wrapper around validity check and set error state
-   */
-  validityCheckWrapper(event) {
-    const { target, hasError, errorMessage } = validityCheck(event);
-    setErrorState(target, hasError, errorMessage);
-  }
-  assignFieldsetReference(el) {
-    this.fieldset = el;
-  }
-  assignButtonReference(el) {
-    this.submitButton = el;
-  }
-  /**
-   * An external validation trigger to apply to a form field
-   * @param { string } fieldName The form field name to apply the validation too
-   * @param { string } message The validation message to display under the form field
-   */
-  async setValidationFor(fieldName, message) {
-    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
-    if (formField.disabled) {
-      return;
-    }
-    formField.setCustomValidity(message);
-    formField.setAttribute('custom-validation-set', 'true');
-    setErrorState(formField, true, message);
-  }
-  /**
-   * Clear the validation message on a given form field
-   * @param { string } fieldName The form field name to clear the validation of
-   */
-  async clearValidationFor(fieldName) {
-    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
-    formField.setCustomValidity('');
-    formField.removeAttribute('custom-validation-set');
-    setErrorState(formField, false, '');
-  }
-  toggleFormField(formField, disabled) {
-    formField.disabled = disabled;
-    let parent = formField.parentElement;
-    if (parent) {
-      do {
-        if (parent.nodeName !== 'LABEL') {
-          parent = parent.parentElement;
-        }
-      } while (parent && parent.nodeName !== 'LABEL');
-      if (parent) {
-        parent.style.display = (disabled) ? 'none' : 'block';
-      }
-    }
-  }
-  /**
-   * Disable a form field and visually remove it from the form.
-   * If custom validation is set, this function will return without affecting the form field.
-   * @param { string } fieldName The form field name to disable
-   */
-  async disableFormField(fieldName) {
-    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
-    if (formField.hasAttribute('custom-validation-set')) {
-      return;
-    }
-    this.toggleFormField(formField, true);
-  }
-  /**
-   * Enable a form field and visually add it back to the form.
-   * @param { string } fieldName The form field name to enable
-   */
-  async enableFormField(fieldName) {
-    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
-    this.toggleFormField(formField, false);
-  }
-  /**
-   * Set the value of a form field progromatically
-   * @param { string } fieldName The form field name having it's value set
-   * @param { string } fieldValue The form field value to set
-   */
-  async setInputFieldValue(fieldName, fieldValue) {
-    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
-    formField.value = fieldValue;
-  }
-  /**
-   * Change the readonly property on an input field. If set to 'true' any validation will also be cleared.
-   * @param { string } fieldName The form field name to set
-   * @param { boolean } readonly The state of the read-only attribute
-   */
-  async setFieldReadOnlyMode(fieldName, readonly) {
-    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
-    if (formField && formField.nodeName === 'SELECT') {
-      const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldName}]`);
-      tttxSelect.readOnly = readonly;
-      formField.disabled = readonly;
-    }
-    else {
-      formField.readOnly = readonly;
-    }
-    if (readonly) {
-      await this.clearValidationFor(fieldName);
-    }
-  }
-  /**
-   * Renders the component's template as a form element with a fieldset container. The form's
-   * "onSubmit" event is bound to the "doSubmit" function, which handles the form submission
-   * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
-   * to the "fieldset" instance variable using a ref, so it can be populated with form elements
-   * later on.
-   */
-  render() {
-    //react rendering so we can't JEST it
-    //ignore so it doesn't ruin coverage
-    /*istanbul ignore next*/
-    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this), ref: frm => this.form = frm }, h("fieldset", { ref: this.assignFieldsetReference.bind(this) }), h("input", { type: "submit", ref: this.assignButtonReference.bind(this), style: { display: 'none' } }))));
-  }
-  static get is() { return "tttx-form_1_9_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-form.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-form.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "formschema": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "Record<string, any> | string",
-          "resolved": "string | { [x: string]: any; }",
-          "references": {
-            "Record": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "formschema",
-        "reflect": false
-      },
-      "data": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dataSubmitted",
-        "name": "dataSubmitted",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "FormData",
-          "resolved": "FormData",
-          "references": {
-            "FormData": {
-              "location": "global"
-            }
-          }
-        }
-      }, {
-        "method": "dataChanged",
-        "name": "dataChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ name: string; value: string }",
-          "resolved": "{ name: string; value: string; }",
-          "references": {}
-        }
-      }, {
-        "method": "searchTermChanged",
-        "name": "searchTermChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ name: string; value: string, type: string }",
-          "resolved": "{ name: string; value: string; type: string; }",
-          "references": {}
-        }
-      }, {
-        "method": "selectToggleOpen",
-        "name": "selectToggleOpen",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ name: string; value: string, type: string }",
-          "resolved": "{ name: string; value: string; type: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "submit": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "showLoadingSpinner": {
-        "complexType": {
-          "signature": "(fieldname: string, value: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "TttxSelectBox": {
-              "location": "import",
-              "path": "../tttx-select-box/tttx-select-box"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "setSelectedItem": {
-        "complexType": {
-          "signature": "(fieldname: string, id: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "TttxSelectBox": {
-              "location": "import",
-              "path": "../tttx-select-box/tttx-select-box"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "setSelectOptions": {
-        "complexType": {
-          "signature": "(fieldname: string, options: { label: string; value: string; disabled?: boolean; }[], skipDefultSelection?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldname the form name of the given field"
-                }],
-              "text": "the form name of the given field"
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "options a list of option values and labels"
-                }],
-              "text": "a list of option values and labels"
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "TttxSelectBox": {
-              "location": "import",
-              "path": "../tttx-select-box/tttx-select-box"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Replace all children in a given select list with a list of new options",
-          "tags": [{
-              "name": "param",
-              "text": "fieldname the form name of the given field"
-            }, {
-              "name": "param",
-              "text": "options a list of option values and labels"
-            }]
-        }
-      },
-      "isValid": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "setValidationFor": {
-        "complexType": {
-          "signature": "(fieldName: string, message: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldName The form field name to apply the validation too"
-                }],
-              "text": "The form field name to apply the validation too"
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "message The validation message to display under the form field"
-                }],
-              "text": "The validation message to display under the form field"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLInputElement": {
-              "location": "global"
-            },
-            "HTMLSelectElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "An external validation trigger to apply to a form field",
-          "tags": [{
-              "name": "param",
-              "text": "fieldName The form field name to apply the validation too"
-            }, {
-              "name": "param",
-              "text": "message The validation message to display under the form field"
-            }]
-        }
-      },
-      "clearValidationFor": {
-        "complexType": {
-          "signature": "(fieldName: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldName The form field name to clear the validation of"
-                }],
-              "text": "The form field name to clear the validation of"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLInputElement": {
-              "location": "global"
-            },
-            "HTMLSelectElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Clear the validation message on a given form field",
-          "tags": [{
-              "name": "param",
-              "text": "fieldName The form field name to clear the validation of"
-            }]
-        }
-      },
-      "disableFormField": {
-        "complexType": {
-          "signature": "(fieldName: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldName The form field name to disable"
-                }],
-              "text": "The form field name to disable"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLInputElement": {
-              "location": "global"
-            },
-            "HTMLSelectElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Disable a form field and visually remove it from the form.\nIf custom validation is set, this function will return without affecting the form field.",
-          "tags": [{
-              "name": "param",
-              "text": "fieldName The form field name to disable"
-            }]
-        }
-      },
-      "enableFormField": {
-        "complexType": {
-          "signature": "(fieldName: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldName The form field name to enable"
-                }],
-              "text": "The form field name to enable"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLInputElement": {
-              "location": "global"
-            },
-            "HTMLSelectElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Enable a form field and visually add it back to the form.",
-          "tags": [{
-              "name": "param",
-              "text": "fieldName The form field name to enable"
-            }]
-        }
-      },
-      "setInputFieldValue": {
-        "complexType": {
-          "signature": "(fieldName: string, fieldValue: string) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldName The form field name having it's value set"
-                }],
-              "text": "The form field name having it's value set"
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldValue The form field value to set"
-                }],
-              "text": "The form field value to set"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLInputElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Set the value of a form field progromatically",
-          "tags": [{
-              "name": "param",
-              "text": "fieldName The form field name having it's value set"
-            }, {
-              "name": "param",
-              "text": "fieldValue The form field value to set"
-            }]
-        }
-      },
-      "setFieldReadOnlyMode": {
-        "complexType": {
-          "signature": "(fieldName: string, readonly: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "fieldName The form field name to set"
-                }],
-              "text": "The form field name to set"
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "readonly The state of the read-only attribute"
-                }],
-              "text": "The state of the read-only attribute"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLInputElement": {
-              "location": "global"
-            },
-            "TttxSelectBox": {
-              "location": "import",
-              "path": "../tttx-select-box/tttx-select-box"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Change the readonly property on an input field. If set to 'true' any validation will also be cleared.",
-          "tags": [{
-              "name": "param",
-              "text": "fieldName The form field name to set"
-            }, {
-              "name": "param",
-              "text": "readonly The state of the read-only attribute"
-            }]
-        }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "formschema",
-        "methodName": "onFormSchemaChange"
-      }, {
-        "propName": "data",
-        "methodName": "onDataChange"
-      }];
-  }
-}
+import { h, Host } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+import validityCheck from './lib/validityCheck';
+import setErrorState from './lib/setErrorState';
+import { endDateComparisonValidator, startEndTimeComparator, startDateComparisonValidator } from './lib/timecomparatorChecks';
+export class TttxForm {
+  constructor() {
+    // Create a new template element using the HTMLTemplateElement interface.
+    this.template = document.createElement('template');
+    this.formschema = undefined;
+    this.data = undefined;
+  }
+  // This method is called whenever the "formschema" property changes
+  onFormSchemaChange(newValue) {
+    // Check if the new value is a string, indicating that it needs to be parsed
+    if (typeof newValue === 'string') {
+      // Parse the string and set the "_formSchema" property
+      this._formSchema = JSON.parse(newValue);
+    }
+    else {
+      // If the new value is already an object, set the "_formSchema" property directly
+      this._formSchema = newValue;
+    }
+    return this._formSchema;
+  }
+  onDataChange(newValue) {
+    if (typeof newValue === 'string') {
+      this._data = JSON.parse(newValue);
+    }
+    else {
+      this._data = newValue;
+    }
+    return this._data;
+  }
+  /**
+   * Handles the focus event for a form field and emits a "dataChanged" event
+   * to the parent component with the field name and its new value.
+   *
+   * @param {KeyboardEvent | Event} event - The focus event triggered by the field.
+   * @return {void}
+   */
+  fieldChanged(event) {
+    // Extract the name and value of the field from the event
+    const target = event.target;
+    const fieldName = target.name;
+    let fieldValue = target.value;
+    if (target.type === 'checkbox') {
+      fieldValue = target.checked ? 'on' : 'off';
+    }
+    // Emit an event to signal that the field's data has changed
+    this.dataChanged.emit({ name: fieldName, value: fieldValue });
+  }
+  async submit() {
+    this.submitButton.click();
+  }
+  async showLoadingSpinner(fieldname, value) {
+    const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldname}]`);
+    tttxSelect.isLoading = value;
+  }
+  async setSelectedItem(fieldname, id) {
+    const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldname}]`);
+    // select option with id
+    await tttxSelect.setSelectedItem(id);
+  }
+  /**
+   * Replace all children in a given select list with a list of new options
+   * @param { string } fieldname the form name of the given field
+   * @param { {label: string, value: string}[] } options a list of option values and labels
+   */
+  async setSelectOptions(fieldname, options, skipDefultSelection) {
+    const select = this.fieldset.querySelector(`[name=${fieldname}]`);
+    const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldname}]`);
+    const fragment = new DocumentFragment();
+    for (const option of options) {
+      const o = document.createElement('option');
+      o.innerText = option.label;
+      o.value = option.value;
+      if (option.disabled) {
+        o.disabled = true;
+      }
+      fragment.appendChild(o);
+    }
+    select.replaceChildren(fragment);
+    tttxSelect.optionsData = options;
+    // skip the first option selection if skipDefultSelection is true.
+    if (!skipDefultSelection) {
+      await tttxSelect.setSelectedItem(options.length > 0 ? options[0].value : undefined);
+    }
+  }
+  async isValid() {
+    const valid = this.form.checkValidity();
+    const allElements = this.fieldset.querySelectorAll('[custom-validation-set=true]');
+    if (allElements.length || !valid) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Submits the form data to the server.
+   *
+   * @param {SubmitEvent} event - The event object for the form submission.
+   * @returns {void}
+   */
+  doSubmit(event) {
+    // prevent the form from submitting normally
+    event.preventDefault();
+    const allElements = this.fieldset.querySelectorAll('[custom-validation-set=true]');
+    if (allElements.length) {
+      return;
+    }
+    // create a new FormData object with the form data
+    const formData = new FormData(event.target);
+    // get a list of checkboxes, if any, so we can manually set unchecked box data
+    const formProperties = this._formSchema.properties;
+    for (const formKey of Object.keys(formProperties)) {
+      if (formProperties[formKey].form.type === 'checkbox' && !formData.has(formKey)) {
+        formData.append(formKey, 'off');
+      }
+    }
+    // emit the form data through the `dataSubmitted` event
+    this.dataSubmitted.emit(formData);
+  }
+  // This method is called before the component is loaded into the DOM
+  componentWillLoad() {
+    // Initialize the form schema by calling the "onFormSchemaChange" method with the current "formschema" property
+    this.onFormSchemaChange(this.formschema);
+    if (this.data) {
+      this.onDataChange(this.data);
+    }
+  }
+  // This method is called before the component is rendered
+  componentWillRender() {
+    // Clear the template to account for a potential re-render scenario
+    this.template = document.createElement('template');
+    // Populate the form from the form schema
+    this.populateFormFromSchema();
+  }
+  /**
+   * Creates a new HTMLSelectElement 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 {'select'} formProperties.type - The type of form field. In this case, it will always be "select".
+   * @param {object} formProperties.validation - A set of validation rules for the field.
+   * @param {Array<{label:string, value:string, placeholder?:boolean}>} 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.
+   * @param {boolean} [formProperties.options[].placeholder]
+   */
+  createSelect(formKey, formProperties) {
+    var _a, _b, _c, _d, _e, _f;
+    const select = document.createElement('select');
+    select.setAttribute('name', formKey);
+    (_a = formProperties.options) === null || _a === void 0 ? void 0 : _a.forEach(optionProperties => {
+      this.appendOption(select, optionProperties);
+    });
+    if ((_b = this._data) === null || _b === void 0 ? void 0 : _b[formKey]) {
+      select.classList.remove('placeholder');
+    }
+    const tttxSelect = document.createElement('tttx-select-box_1_9_103');
+    tttxSelect.optionsData = (_c = formProperties.options) === null || _c === void 0 ? void 0 : _c.filter(o => !o.placeholder);
+    tttxSelect.placeholder = (_e = (_d = formProperties.options) === null || _d === void 0 ? void 0 : _d.filter(o => o.placeholder)[0]) === null || _e === void 0 ? void 0 : _e.label;
+    tttxSelect.inline = false;
+    tttxSelect.searchEnabled = true;
+    tttxSelect.useExternalFiltering = formProperties.useExternalFiltering || false;
+    tttxSelect.style.width = '100%';
+    tttxSelect.style.marginTop = '6px';
+    tttxSelect.isLoading = formProperties.isLoading || false;
+    tttxSelect.readOnly = (_f = formProperties.readOnly) !== null && _f !== void 0 ? _f : false;
+    tttxSelect.setAttribute('name', 'overlay-' + formKey);
+    const fragment = document.createDocumentFragment();
+    fragment.append(tttxSelect);
+    select.style.display = 'none';
+    tttxSelect.addEventListener('selectItemEvent', this.selectItemEventCallback.bind(select));
+    // emit the event for searchTermChanged.
+    tttxSelect.addEventListener('multiselectSearchUpdated', (ev) => this.searchTermChanged.emit({
+      name: formKey,
+      value: ev.detail,
+      type: 'SearchTermChanged'
+    }));
+    tttxSelect.addEventListener('toggleOpen', (ev) => this.selectToggleOpen.emit({
+      name: formKey,
+      value: ev.detail,
+      type: 'ToggleOpen'
+    }));
+    return { input: select, overlay: fragment };
+  }
+  selectItemEventCallback(ev) {
+    // this function MUST be bound to a HTMLSelectElement
+    // 'this' will be the select element
+    // the function was split out for testing
+    const select = this;
+    select.value = ev.detail.value;
+    select.onblur({ target: select }); // triggers validator
+    select.onchange({ target: select }); // triggers dataChanged event
+  }
+  /**
+   * Appends an option to a select element
+   *
+   * @param {HTMLSelectElement} select - The select elements to attach the option to.
+   * @param {Object} optionProperties
+   * @param {string} optionProperties.value - The value of the option.
+   * @param {string} optionProperties.label - The label which will be displayed on the form for the option.
+   * @param {boolean} [optionProperties.placeholder]
+   */
+  appendOption(select, optionProperties) {
+    const option = document.createElement('option');
+    option.setAttribute('value', optionProperties.value);
+    if (optionProperties.placeholder) {
+      option.setAttribute('disabled', (optionProperties.disabled) ? 'true' : '');
+      option.setAttribute('selected', '');
+      option.setAttribute('hidden', '');
+      select.classList.add('placeholder');
+    }
+    if (optionProperties.label)
+      option.innerHTML = DOMPurify.sanitize(optionProperties.label, domSanitiserOptions);
+    select.appendChild(option);
+  }
+  /**
+   * Creates a new HTMLInputElement with the specified name, type, and placeholder (if any),
+   * and sets its autocomplete and autocapitalization properties to off.
+   *
+   * @param {string} formKey - The name of the input field, as specified in the form schema.
+   * @param {Record<string, any>} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
+   * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
+   * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
+   * @return {HTMLInputElement} - The new input element.
+   */
+  createInput(formKey, formProperties) {
+    var _a;
+    // Create a new <input> element with the specified name and type
+    const input = document.createElement('input');
+    input.type = formProperties.type;
+    input.name = formKey;
+    // Set the placeholder attribute to the specified value (if any)
+    input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
+    // Disable autocomplete and autocapitalization
+    input.autocomplete = 'off';
+    input.autocapitalize = 'off';
+    if (formProperties.readonly) {
+      input.readOnly = true;
+    }
+    if (formProperties.maskedValue) {
+      // Clear input on focus
+      input.onfocus = () => {
+        if (input.value === formProperties.maskedValue) {
+          input.value = '';
+        }
+      };
+      // Restore value or update it on blur
+      input.addEventListener('blur', () => {
+        if (input.value.trim() === '') {
+          input.value = formProperties.maskedValue;
+        }
+        else {
+          formProperties.value = input.value;
+        }
+      });
+    }
+    // Return the input element
+    return input;
+  }
+  /**
+   * Creates a new HTMLTextAreaElement with the specified name and placeholder (if any),
+   * and sets its autocomplete and autocapitalization properties to off.
+   *
+   * @param {string} formKey - The name of the input field, as specified in the form schema.
+   * @param {Record<string, any>} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
+   * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
+   * @return {HTMLTextAreaElement} - The new input element.
+   */
+  createTextArea(formKey, formProperties) {
+    var _a;
+    const input = document.createElement('textarea');
+    input.name = formKey;
+    // Set the placeholder attribute to the specified value (if any)
+    input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
+    // Disable autocomplete and autocapitalization
+    input.autocomplete = 'off';
+    input.autocapitalize = 'off';
+    if (formProperties.readonly) {
+      input.readOnly = true;
+    }
+    if (formProperties.resize === 'none') {
+      input.classList.add('resize-none');
+    }
+    // Return the input element
+    return input;
+  }
+  createStartEndDateComponent(formKey, formProperties) {
+    var _a, _b, _c, _d;
+    const startDate = document.createElement('input');
+    const endDate = document.createElement('input');
+    startDate.type = endDate.type = 'date';
+    startDate.name = `${formKey}-startdate`;
+    endDate.name = `${formKey}-enddate`;
+    startDate.setAttribute('data-formkey', formKey);
+    endDate.setAttribute('data-formkey', formKey);
+    if (formProperties.readonly) {
+      startDate.readOnly = true;
+      endDate.readOnly = true;
+    }
+    this.applyValidation(startDate, Object.assign({ required: { message: 'Please enter a start date' }, dateCompare: { to: endDate.name } }, (_a = formProperties.validation) === null || _a === void 0 ? void 0 : _a.startDate));
+    this.applyValidation(endDate, Object.assign({ required: { message: 'Please enter an end date' }, dateCompare: { with: startDate.name, message: 'End date cannot be before the start date' } }, (_b = formProperties.validation) === null || _b === void 0 ? void 0 : _b.endDate));
+    let startTime;
+    let endTime;
+    if (formProperties.includeTime) {
+      startTime = document.createElement('input');
+      endTime = document.createElement('input');
+      startTime.type = endTime.type = 'time';
+      startTime.name = `${formKey}-starttime`;
+      endTime.name = `${formKey}-endtime`;
+      startTime.setAttribute('data-formkey', formKey);
+      endTime.setAttribute('data-formkey', formKey);
+      if (formProperties.readonly) {
+        startTime.readOnly = true;
+        endTime.readOnly = true;
+      }
+      this.applyValidation(startTime, Object.assign({ required: { message: 'Please enter a start time' } }, (_c = formProperties.validation) === null || _c === void 0 ? void 0 : _c.startTime));
+      this.applyValidation(endTime, Object.assign({ required: { message: 'Please enter an end time' } }, (_d = formProperties.validation) === null || _d === void 0 ? void 0 : _d.endTime));
+    }
+    const startLabel = document.createElement('label');
+    startLabel.innerText = 'Start date';
+    const endLabel = document.createElement('label');
+    endLabel.innerText = 'End date';
+    const startContainer = document.createElement('div');
+    const endContainer = document.createElement('div');
+    startContainer.className = endContainer.className = 'outer-container inputBlock';
+    startLabel.className = endLabel.className = 'flex-label';
+    startContainer.append(startDate);
+    if (startTime) {
+      startContainer.append(startTime);
+    }
+    startLabel.append(startContainer);
+    startLabel.append(this.createErrorBubble());
+    endContainer.append(endDate);
+    if (endTime) {
+      endContainer.append(endTime);
+    }
+    endLabel.append(endContainer);
+    endLabel.append(this.createErrorBubble());
+    return { start: startLabel, end: endLabel };
+  }
+  /**
+   * Applies validation attributes to an input element based on the specified validation object.
+   * If a certain property is present in the object, it will set the corresponding attribute on
+   * the input element (e.g., "required" will set the "required" and "data-required" attributes,
+   * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
+   *
+   * @param {FormField} input - The input element to apply validation attributes to.
+   * @param {object} validation - An object containing the validation rules for the input field.
+   * @param {object} [validation.required] - An object containing a "message" property to display if the field is required.
+   * @param {string} [validation.required.message]
+   * @param {object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
+   * @param {string} [validation.pattern.pattern]
+   * @param {string} [validation.pattern.message]
+   * @param {object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
+   * @param {string} [validation.badInput.message]
+   * @param {object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
+   * @param {string} [validation.minmax.min]
+   * @param {string} [validation.minmax.max]
+   * @param {string} [validation.minmax.message]
+   * @param {string} [validation.maxlength] - The maximum length of the input field.
+   * @param {string} [validation.datecompare] - To compare start and end date fields.
+   * @return {void}
+   */
+  applyValidation(input, validation) {
+    var _a, _b;
+    // If the "required" property is present, add the "required" attribute to the input element and
+    // set its "data-required" attribute to the specified message (if any)
+    if (validation.required) {
+      input.setAttribute('required', '');
+      input.setAttribute('data-required', (_a = validation.required.message) !== null && _a !== void 0 ? _a : '');
+    }
+    // If the "pattern" property is present, add the "pattern" attribute to the input element and set
+    // its "data-pattern" attribute to the specified message (if any)
+    if (validation.pattern) {
+      input.setAttribute('pattern', validation.pattern.pattern);
+      input.setAttribute('data-pattern', (_b = validation.pattern.message) !== null && _b !== void 0 ? _b : '');
+    }
+    // If the "badInput" property is present, set the input element's "data-badinput" attribute to
+    // the specified message
+    if (validation.badInput) {
+      input.setAttribute('data-badinput', validation.badInput.message);
+    }
+    // If the "minmax" property is present, add the "min" and "max" attributes to the input element
+    // and set its "data-range" attribute to the specified message (if any)
+    if (validation.minmax) {
+      input.setAttribute('min', validation.minmax.min);
+      input.setAttribute('max', validation.minmax.max);
+      input.setAttribute('data-range', validation.minmax.message);
+    }
+    // If the "maxlength" property is present, add the "maxlength" attribute to the input element
+    if (validation.maxlength) {
+      input.setAttribute('maxlength', validation.maxlength);
+    }
+    // Custom validation parameters for start date and end date comparison
+    if (validation.dateCompare) {
+      if (validation.dateCompare.message && validation.dateCompare.with) {
+        input.setAttribute('data-compare', validation.dateCompare.message);
+        input.setAttribute('data-compare-with', validation.dateCompare.with);
+      }
+      if (validation.dateCompare.to) {
+        input.setAttribute('data-compare-to', validation.dateCompare.to);
+      }
+    }
+  }
+  // Create a new error bubble element
+  createErrorBubble() {
+    // Create a new <div> element with the "errorBubble" class
+    const errorBubble = document.createElement('div');
+    errorBubble.className = 'errorBubble';
+    // Return the error bubble element
+    return errorBubble;
+  }
+  /**
+   *
+   * @param {Record<string, any>} formProperties
+   * @param {HTMLInputElement | HTMLSelectElement} input
+   * @param {HTMLLabelElement} label
+   * @returns {void}
+   */
+  appendCheckboxInput(formProperties, input, label) {
+    if (formProperties.label) {
+      const lineBreak = document.createElement('br');
+      label.appendChild(lineBreak);
+    }
+    // Append the input element and error bubble element to the label
+    label.appendChild(input);
+    if (!formProperties.inlineLabel)
+      return;
+    const inlineLabel = document.createElement('span');
+    inlineLabel.className = 'inlineLabel';
+    inlineLabel.textContent = formProperties.inlineLabel;
+    label.appendChild(inlineLabel);
+  }
+  /**
+   * Creates a new <label> element with the "inputBlock" class and the specified label text,
+   * and appends the input element and error bubble element to it. If the form property has
+   * no validation object, it adds an "optional" span element to the label.
+   *
+   * @param {Record<string, any>} formProperties - An object containing properties for the form field, including its label text and validation rules.
+   * @param {HTMLInputElement | HTMLSelectElement} input - The input element to associate with the label.
+   * @param {never} overlay - The Child Element which will be rendered atop the standard HTML5 element
+   * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
+   * @return {HTMLLabelElement} - The new label element.
+   */
+  createLabel(formProperties, input, overlay = null, errorBubble) {
+    var _a;
+    const outerContainer = document.createElement('div');
+    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 (!((_a = formProperties.validation) === null || _a === void 0 ? void 0 : _a.required) && 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');
+    }
+    if (formProperties.type === 'checkbox') {
+      this.appendCheckboxInput(formProperties, input, label);
+    }
+    else {
+      // Append the input element and error bubble element to the outerContainer
+      if (overlay) {
+        outerContainer.appendChild(overlay);
+      }
+      outerContainer.appendChild(input);
+    }
+    if (formProperties.type !== 'checkbox') {
+      label.appendChild(outerContainer);
+    }
+    label.appendChild(errorBubble);
+    // 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 = document.createDocumentFragment();
+    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
+   * any validation rules to it, creates an error bubble and label element, and appends them
+   * to the form template. Finally, it creates and appends a submit button element to the form.
+   *
+   * @return {void}
+   */
+  populateFormFromSchema() {
+    var _a;
+    // If there is no form schema, return early
+    if (!this._formSchema) {
+      return;
+    }
+    // Get the properties of the form schema and their keys
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    // Loop through each property key and create an input, label, and error bubble for it
+    for (const formKey of propertyKeys) {
+      const formItem = properties[formKey];
+      const formProperties = formItem.form;
+      // complex form types which require
+      // custom HTML should be done here
+      if (formProperties.type === 'startenddate') {
+        const { start, end } = this.createStartEndDateComponent(formKey, formProperties);
+        this.template.content.append(start);
+        this.template.content.append(end);
+        continue;
+      }
+      let fragments = {};
+      switch (formProperties.type) {
+        case 'select':
+          fragments = this.createSelect(formKey, formProperties);
+          break;
+        case 'radio':
+          fragments.input = this.createRadio(formKey, formProperties);
+          break;
+        case 'textarea':
+          fragments.input = this.createTextArea(formKey, formProperties);
+          break;
+        default:
+          fragments.input = this.createInput(formKey, formProperties);
+      }
+      // If the form property has validation, apply it to the input
+      if (formProperties.validation &&
+        formProperties.type !== 'radio') {
+        this.applyValidation(fragments.input, formProperties.validation);
+      }
+      // Create an error bubble and label element for the input
+      const errorBubble = this.createErrorBubble();
+      const label = this.createLabel(formProperties, fragments.input, fragments.overlay, errorBubble);
+      // If explicitly setting input as invalid, set invalid state and error message on render
+      if ((_a = formProperties.validation) === null || _a === void 0 ? void 0 : _a.invalid) {
+        const errorMessage = formProperties.validation.invalid.message;
+        fragments.input.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
+        setErrorState(fragments.input, true, errorMessage);
+      }
+      // Append the label element to the form template
+      this.template.content.append(label);
+      if (formProperties.disabled) {
+        this.toggleFormField(fragments.input, true);
+      }
+    }
+  }
+  /**
+   * Clones the form template and binds event listeners to its input elements. First, it checks if
+   * there is a form schema present. If so, it clones the template's content, binds events to form
+   * input elements, and appends the cloned form elements to the fieldset. The event listeners include
+   * "oninvalid" (to check input validity on submit), "onblur" (to check input validity on blur),
+   * "onkeyup" (to handle changes in input fields), and "onchange" (to handle changes in select fields).
+   *
+   * @return {void}
+   */
+  componentDidRender() {
+    // If there's no form schema, return
+    if (!this._formSchema) {
+      return;
+    }
+    // Clone the template's content and store it in a variable
+    const formItems = this.template.content;
+    // Bind event listeners to form elements
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    for (const formKey of propertyKeys) {
+      this.applyValidationFunctionsToFormElement(formItems, formKey, properties);
+    }
+    // populate with existing form data if available
+    if ((this._data && Object.keys(this._data).length > 0)) {
+      this.populateFormWithExistingData(formItems);
+    }
+    // Append the cloned form elements to the fieldset
+    this.fieldset.replaceChildren(formItems);
+  }
+  /**
+   * Assign validation events to a given form item
+   * @param formItems The document fragment template of form items to be rendered
+   * @param formKey The key of the form item to bind events too
+   * @param properties The form item's properties, such as type and name
+   */
+  applyValidationFunctionsToFormElement(formItems, formKey, properties) {
+    const formItemsByKey = formItems.querySelectorAll(`[name^=${formKey}]`);
+    for (const formInput of formItemsByKey) {
+      // 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 (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
+        formInput.addEventListener('change', this.selectRemovePlaceholderCallback.bind(formInput));
+      }
+      if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-with')) {
+        formInput.oninvalid = endDateComparisonValidator.bind(this);
+        formInput.onblur = endDateComparisonValidator.bind(this);
+      }
+      if (properties[formKey].form.type === 'startenddate' && formInput.type === 'time') {
+        formInput.oninvalid = startEndTimeComparator.bind(this);
+        formInput.onblur = startEndTimeComparator.bind(this);
+      }
+      if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-to')) {
+        formInput.oninvalid = startDateComparisonValidator.bind(this);
+        formInput.onblur = startDateComparisonValidator.bind(this);
+      }
+    }
+  }
+  /**
+   * If data exists, set form input values before rendering
+   * @param formItems The document fragment template of form items to be rendered
+   */
+  populateFormWithExistingData(formItems) {
+    var _a;
+    const dataKeys = Object.keys(this._data);
+    for (const key of dataKeys) {
+      const formItemsByKey = formItems.querySelectorAll(`[name=${key}]`);
+      for (const formItem of formItemsByKey) {
+        switch (formItem.type) {
+          case 'checkbox':
+            if (this._data[key] === 'on') {
+              formItem.checked = true;
+            }
+            break;
+          case 'radio':
+            if (formItem.value === this._data[key]) {
+              formItem.checked = true;
+            }
+            break;
+          case 'select':
+          case 'select-one':
+            formItems.querySelector(`[name=overlay-${key}]`)['selectedValue'] = this._data[key];
+            formItem.value = this._data[key];
+            break;
+          case 'date':
+            formItem.value = (_a = this._data[key]) === null || _a === void 0 ? void 0 : _a.split('T')[0];
+            break;
+          default:
+            formItem.value = this._data[key];
+        }
+      }
+    }
+  }
+  /**
+   * Remove the placeholder class on the bound THIS select element
+   */
+  selectRemovePlaceholderCallback() {
+    const select = this;
+    select.classList.remove('placeholder');
+  }
+  /**
+   * A wrapper around validity check and set error state
+   */
+  validityCheckWrapper(event) {
+    const { target, hasError, errorMessage } = validityCheck(event);
+    setErrorState(target, hasError, errorMessage);
+  }
+  assignFieldsetReference(el) {
+    this.fieldset = el;
+  }
+  assignButtonReference(el) {
+    this.submitButton = el;
+  }
+  /**
+   * An external validation trigger to apply to a form field
+   * @param { string } fieldName The form field name to apply the validation too
+   * @param { string } message The validation message to display under the form field
+   */
+  async setValidationFor(fieldName, message) {
+    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
+    if (formField.disabled) {
+      return;
+    }
+    formField.setCustomValidity(message);
+    formField.setAttribute('custom-validation-set', 'true');
+    setErrorState(formField, true, message);
+  }
+  /**
+   * Clear the validation message on a given form field
+   * @param { string } fieldName The form field name to clear the validation of
+   */
+  async clearValidationFor(fieldName) {
+    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
+    formField.setCustomValidity('');
+    formField.removeAttribute('custom-validation-set');
+    setErrorState(formField, false, '');
+  }
+  toggleFormField(formField, disabled) {
+    formField.disabled = disabled;
+    let parent = formField.parentElement;
+    if (parent) {
+      do {
+        if (parent.nodeName !== 'LABEL') {
+          parent = parent.parentElement;
+        }
+      } while (parent && parent.nodeName !== 'LABEL');
+      if (parent) {
+        parent.style.display = (disabled) ? 'none' : 'block';
+      }
+    }
+  }
+  /**
+   * Disable a form field and visually remove it from the form.
+   * If custom validation is set, this function will return without affecting the form field.
+   * @param { string } fieldName The form field name to disable
+   */
+  async disableFormField(fieldName) {
+    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
+    if (formField.hasAttribute('custom-validation-set')) {
+      return;
+    }
+    this.toggleFormField(formField, true);
+  }
+  /**
+   * Enable a form field and visually add it back to the form.
+   * @param { string } fieldName The form field name to enable
+   */
+  async enableFormField(fieldName) {
+    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
+    this.toggleFormField(formField, false);
+  }
+  /**
+   * Set the value of a form field progromatically
+   * @param { string } fieldName The form field name having it's value set
+   * @param { string } fieldValue The form field value to set
+   */
+  async setInputFieldValue(fieldName, fieldValue) {
+    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
+    formField.value = fieldValue;
+  }
+  /**
+   * Change the readonly property on an input field. If set to 'true' any validation will also be cleared.
+   * @param { string } fieldName The form field name to set
+   * @param { boolean } readonly The state of the read-only attribute
+   */
+  async setFieldReadOnlyMode(fieldName, readonly) {
+    const formField = this.fieldset.querySelector(`[name=${fieldName}]`);
+    if (formField && formField.nodeName === 'SELECT') {
+      const tttxSelect = this.fieldset.querySelector(`[name=overlay-${fieldName}]`);
+      tttxSelect.readOnly = readonly;
+      formField.disabled = readonly;
+    }
+    else {
+      formField.readOnly = readonly;
+    }
+    if (readonly) {
+      await this.clearValidationFor(fieldName);
+    }
+  }
+  /**
+   * Renders the component's template as a form element with a fieldset container. The form's
+   * "onSubmit" event is bound to the "doSubmit" function, which handles the form submission
+   * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
+   * to the "fieldset" instance variable using a ref, so it can be populated with form elements
+   * later on.
+   */
+  render() {
+    //react rendering so we can't JEST it
+    //ignore so it doesn't ruin coverage
+    /*istanbul ignore next*/
+    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this), ref: frm => this.form = frm }, h("fieldset", { ref: this.assignFieldsetReference.bind(this) }), h("input", { type: "submit", ref: this.assignButtonReference.bind(this), style: { display: 'none' } }))));
+  }
+  static get is() { return "tttx-form_1_9_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-form.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-form.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "formschema": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Record<string, any> | string",
+          "resolved": "string | { [x: string]: any; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "formschema",
+        "reflect": false
+      },
+      "data": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dataSubmitted",
+        "name": "dataSubmitted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FormData",
+          "resolved": "FormData",
+          "references": {
+            "FormData": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "dataChanged",
+        "name": "dataChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string; value: string }",
+          "resolved": "{ name: string; value: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "searchTermChanged",
+        "name": "searchTermChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string; value: string, type: string }",
+          "resolved": "{ name: string; value: string; type: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "selectToggleOpen",
+        "name": "selectToggleOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string; value: string, type: string }",
+          "resolved": "{ name: string; value: string; type: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "submit": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "showLoadingSpinner": {
+        "complexType": {
+          "signature": "(fieldname: string, value: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TttxSelectBox": {
+              "location": "import",
+              "path": "../tttx-select-box/tttx-select-box"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setSelectedItem": {
+        "complexType": {
+          "signature": "(fieldname: string, id: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TttxSelectBox": {
+              "location": "import",
+              "path": "../tttx-select-box/tttx-select-box"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setSelectOptions": {
+        "complexType": {
+          "signature": "(fieldname: string, options: { label: string; value: string; disabled?: boolean; }[], skipDefultSelection?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldname the form name of the given field"
+                }],
+              "text": "the form name of the given field"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "options a list of option values and labels"
+                }],
+              "text": "a list of option values and labels"
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TttxSelectBox": {
+              "location": "import",
+              "path": "../tttx-select-box/tttx-select-box"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Replace all children in a given select list with a list of new options",
+          "tags": [{
+              "name": "param",
+              "text": "fieldname the form name of the given field"
+            }, {
+              "name": "param",
+              "text": "options a list of option values and labels"
+            }]
+        }
+      },
+      "isValid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setValidationFor": {
+        "complexType": {
+          "signature": "(fieldName: string, message: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to apply the validation too"
+                }],
+              "text": "The form field name to apply the validation too"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "message The validation message to display under the form field"
+                }],
+              "text": "The validation message to display under the form field"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "An external validation trigger to apply to a form field",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to apply the validation too"
+            }, {
+              "name": "param",
+              "text": "message The validation message to display under the form field"
+            }]
+        }
+      },
+      "clearValidationFor": {
+        "complexType": {
+          "signature": "(fieldName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to clear the validation of"
+                }],
+              "text": "The form field name to clear the validation of"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Clear the validation message on a given form field",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to clear the validation of"
+            }]
+        }
+      },
+      "disableFormField": {
+        "complexType": {
+          "signature": "(fieldName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to disable"
+                }],
+              "text": "The form field name to disable"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Disable a form field and visually remove it from the form.\nIf custom validation is set, this function will return without affecting the form field.",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to disable"
+            }]
+        }
+      },
+      "enableFormField": {
+        "complexType": {
+          "signature": "(fieldName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to enable"
+                }],
+              "text": "The form field name to enable"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Enable a form field and visually add it back to the form.",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to enable"
+            }]
+        }
+      },
+      "setInputFieldValue": {
+        "complexType": {
+          "signature": "(fieldName: string, fieldValue: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name having it's value set"
+                }],
+              "text": "The form field name having it's value set"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldValue The form field value to set"
+                }],
+              "text": "The form field value to set"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set the value of a form field progromatically",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name having it's value set"
+            }, {
+              "name": "param",
+              "text": "fieldValue The form field value to set"
+            }]
+        }
+      },
+      "setFieldReadOnlyMode": {
+        "complexType": {
+          "signature": "(fieldName: string, readonly: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to set"
+                }],
+              "text": "The form field name to set"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "readonly The state of the read-only attribute"
+                }],
+              "text": "The state of the read-only attribute"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "TttxSelectBox": {
+              "location": "import",
+              "path": "../tttx-select-box/tttx-select-box"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Change the readonly property on an input field. If set to 'true' any validation will also be cleared.",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to set"
+            }, {
+              "name": "param",
+              "text": "readonly The state of the read-only attribute"
+            }]
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "formschema",
+        "methodName": "onFormSchemaChange"
+      }, {
+        "propName": "data",
+        "methodName": "onDataChange"
+      }];
+  }
+}