@3t-transform/threeteeui 0.1.41 → 0.1.43

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

@@ -1,477 +1,479 @@
-// Ignore in coverage because this is tested through E2E tests
-/* istanbul ignore file */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-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';
-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) {
-    // If the formSchema changes and the form data is uncontrolled, store the data since the fields will be removed to avoid form duplication
-    if (!this.data && this.form && this._formSchema) {
-      const formData = new FormData(this.form);
-      this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map((formKey) => {
-        return [
-          formKey,
-          formData.get(formKey)
-        ];
-      }));
-    }
-    // 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;
-    }
-  }
-  onDataChange(newValue) {
-    if (typeof newValue === 'string') {
-      this._data = JSON.parse(newValue);
-    }
-    else {
-      this._data = newValue;
-    }
-  }
-  /**
-   * 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 {ChangeEvent} event - The focus event triggered by the field.
-   * @return {void}
-   */
-  fieldChanged(event) {
-    // Extract the name and value of the field from the event
-    const fieldName = event.target.name;
-    const fieldValue = event.target.value;
-    // Emit an event to signal that the field's data has changed
-    this.dataChanged.emit({ name: fieldName, value: fieldValue });
-  }
-  async submit() {
-    this.submitButton.click();
-  }
-  /**
-   * Submits the form data to the server.
-   *
-   * @param {SubmitEvent} event - The event object for the form submission.
-   * @returns {void}
-   *
-   * @example
-   * const form = document.getElementById('myForm');
-   * form.addEventListener('submit', (event) => {
-   *   doSubmit(event);
-   * });
-   */
-  doSubmit(event) {
-    // prevent the form from submitting normally
-    event.preventDefault();
-    // create a new FormData object with the form data
-    const formData = new FormData(event.target);
-    // 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 {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.
-   */
-  createSelect(formKey, formProperties) {
-    const select = document.createElement('select');
-    select.setAttribute('name', formKey);
-    formProperties.options.forEach(optionProperties => {
-      this.appendOption(select, optionProperties);
-    });
-    return select;
-  }
-  /**
-   * Appends an option to a select element
-   *
-   * @param {HTMLSelectElement} select - The select elements to attach the option to.
-   * @param {value} value - The value of the option.
-   * @param {label} label - The label which will be displayed on the form for the option.
-   */
-  appendOption(select, optionProperties) {
-    const option = document.createElement('option');
-    option.setAttribute('value', optionProperties.value);
-    if (optionProperties.placeholder) {
-      option.setAttribute('disabled', '');
-      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 {Object} 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.name = formKey;
-    input.type = formProperties.type;
-    // 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;
-    }
-    // Return the input element
-    return input;
-  }
-  /**
-   * 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 {HTMLInputElement} 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 {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 {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
-   * @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.maxlength] - The maximum length of the input field.
-   * @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);
-    }
-  }
-  // 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;
-  }
-  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 {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
-   * @param {HTMLInputElement} input - The input element to associate with the label.
-   * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
-   * @return {HTMLLabelElement} - The new label element.
-   */
-  createLabel(formProperties, input, errorBubble) {
-    // Create a new <label> element with the "inputBlock" class and the specified text
-    const label = document.createElement('label');
-    label.className = 'inputBlock';
-    label.innerText = formProperties.label;
-    // If the form property has no validation object, add an "optional" span element to the label
-    if (!formProperties.validation) {
-      const optionalSpan = document.createElement('span');
-      optionalSpan.className = 'optional';
-      optionalSpan.innerHTML = '&nbsp;(optional)';
-      label.appendChild(optionalSpan);
-    }
-    if (formProperties.readonly) {
-      label.classList.add('readonly');
-    }
-    if (formProperties.type === 'checkbox') {
-      label.className += ' inlineBlock';
-      this.appendCheckboxInput(formProperties, input, label);
-    }
-    else {
-      // Append the input element and error bubble element to the label
-      label.appendChild(input);
-    }
-    label.appendChild(errorBubble);
-    // Return the label element
-    return label;
-  }
-  /**
-   * 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() {
-    // 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
-    propertyKeys.forEach(formKey => {
-      const formItem = properties[formKey];
-      const formProperties = formItem.form;
-      const input = formProperties.type === 'select' ? this.createSelect(formKey, formProperties) : this.createInput(formKey, formProperties);
-      // If the form property has validation, apply it to the input
-      if (formProperties.validation) {
-        this.applyValidation(input, formProperties.validation);
-      }
-      // Create an error bubble and label element for the input
-      const errorBubble = this.createErrorBubble();
-      const label = this.createLabel(formProperties, input, errorBubble);
-      // Append the label element to the form template
-      this.template.content.append(label);
-    });
-  }
-  /**
-   * 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.cloneNode(true);
-    // Bind event listeners to form elements
-    const properties = this._formSchema.properties;
-    const propertyKeys = Object.keys(properties);
-    propertyKeys.forEach(formKey => {
-      var _a;
-      const formInput = formItems.querySelector(`[name=${formKey}]`);
-      // Bind events to form input elements
-      formInput.oninvalid = this.validityCheckWrapper.bind(this);
-      formInput.onblur = this.validityCheckWrapper.bind(this);
-      formInput.onkeyup = this.fieldChanged.bind(this);
-      formInput.onchange = this.fieldChanged.bind(this);
-      if (this._data && this._data[formKey] !== undefined && this._data[formKey] !== null) {
-        formInput.value = this._data[formKey];
-      }
-      // If explicitly setting input as invalid, set invalid state and error message on render
-      if ((_a = properties[formKey].form.validation) === null || _a === void 0 ? void 0 : _a.invalid) {
-        const errorMessage = properties[formKey].form.validation.invalid.message;
-        formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
-        setErrorState(formInput, true, errorMessage);
-      }
-      if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
-        formInput.addEventListener('change', () => {
-          formInput.classList.remove('placeholder');
-        });
-      }
-    });
-    // Append the cloned form elements to the fieldset
-    this.fieldset.replaceChildren(formItems);
-  }
-  validityCheckWrapper(event) {
-    const { target, hasError, errorMessage } = validityCheck(event);
-    setErrorState(target, hasError, errorMessage);
-  }
-  /**
-   * 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.
-   *
-   * @return {JSX.Element} - The rendered form template as a JSX element.
-   */
-  render() {
-    return (h(Host, null, h("form", { ref: el => (this.form = el), onSubmit: this.doSubmit.bind(this) }, h("fieldset", { ref: el => (this.fieldset = el) }), h("input", { type: "submit", ref: el => (this.submitButton = el), style: { display: 'none' } }))));
-  }
-  static get is() { return "tttx-form"; }
-  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": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "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: any }",
-          "resolved": "{ name: string; value: any; }",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "submit": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "formschema",
-        "methodName": "onFormSchemaChange"
-      }, {
-        "propName": "data",
-        "methodName": "onDataChange"
-      }];
-  }
-}
+// Ignore in coverage because this is tested through E2E tests
+/* istanbul ignore file */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+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';
+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) {
+    // If the formSchema changes and the form data is uncontrolled, store the data since the fields will be removed to avoid form duplication
+    if (!this.data && this.form && this._formSchema) {
+      const formData = new FormData(this.form);
+      this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map((formKey) => {
+        return [
+          formKey,
+          formData.get(formKey)
+        ];
+      }));
+    }
+    // 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;
+    }
+  }
+  onDataChange(newValue) {
+    if (typeof newValue === 'string') {
+      this._data = JSON.parse(newValue);
+    }
+    else {
+      this._data = newValue;
+    }
+  }
+  /**
+   * 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 {ChangeEvent} event - The focus event triggered by the field.
+   * @return {void}
+   */
+  fieldChanged(event) {
+    // Extract the name and value of the field from the event
+    const fieldName = event.target.name;
+    const fieldValue = event.target.value;
+    // Emit an event to signal that the field's data has changed
+    this.dataChanged.emit({ name: fieldName, value: fieldValue });
+  }
+  async submit() {
+    this.submitButton.click();
+  }
+  /**
+   * Submits the form data to the server.
+   *
+   * @param {SubmitEvent} event - The event object for the form submission.
+   * @returns {void}
+   *
+   * @example
+   * const form = document.getElementById('myForm');
+   * form.addEventListener('submit', (event) => {
+   *   doSubmit(event);
+   * });
+   */
+  doSubmit(event) {
+    // prevent the form from submitting normally
+    event.preventDefault();
+    // create a new FormData object with the form data
+    const formData = new FormData(event.target);
+    // 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 {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.
+   */
+  createSelect(formKey, formProperties) {
+    const select = document.createElement('select');
+    select.setAttribute('name', formKey);
+    formProperties.options.forEach(optionProperties => {
+      this.appendOption(select, optionProperties);
+    });
+    if (this._data && this._data[formKey])
+      select.classList.remove('placeholder');
+    return select;
+  }
+  /**
+   * Appends an option to a select element
+   *
+   * @param {HTMLSelectElement} select - The select elements to attach the option to.
+   * @param {value} value - The value of the option.
+   * @param {label} label - The label which will be displayed on the form for the option.
+   */
+  appendOption(select, optionProperties) {
+    const option = document.createElement('option');
+    option.setAttribute('value', optionProperties.value);
+    if (optionProperties.placeholder) {
+      option.setAttribute('disabled', '');
+      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 {Object} 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.name = formKey;
+    input.type = formProperties.type;
+    // 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;
+    }
+    // Return the input element
+    return input;
+  }
+  /**
+   * 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 {HTMLInputElement} 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 {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 {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
+   * @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.maxlength] - The maximum length of the input field.
+   * @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);
+    }
+  }
+  // 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;
+  }
+  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 {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
+   * @param {HTMLInputElement} input - The input element to associate with the label.
+   * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
+   * @return {HTMLLabelElement} - The new label element.
+   */
+  createLabel(formProperties, input, errorBubble) {
+    // Create a new <label> element with the "inputBlock" class and the specified text
+    const label = document.createElement('label');
+    label.className = 'inputBlock';
+    label.innerText = formProperties.label;
+    // If the form property has no validation object, add an "optional" span element to the label
+    if (!formProperties.validation) {
+      const optionalSpan = document.createElement('span');
+      optionalSpan.className = 'optional';
+      optionalSpan.innerHTML = '&nbsp;(optional)';
+      label.appendChild(optionalSpan);
+    }
+    if (formProperties.readonly) {
+      label.classList.add('readonly');
+    }
+    if (formProperties.type === 'checkbox') {
+      label.className += ' inlineBlock';
+      this.appendCheckboxInput(formProperties, input, label);
+    }
+    else {
+      // Append the input element and error bubble element to the label
+      label.appendChild(input);
+    }
+    label.appendChild(errorBubble);
+    // Return the label element
+    return label;
+  }
+  /**
+   * 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() {
+    // 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
+    propertyKeys.forEach(formKey => {
+      const formItem = properties[formKey];
+      const formProperties = formItem.form;
+      const input = formProperties.type === 'select' ? this.createSelect(formKey, formProperties) : this.createInput(formKey, formProperties);
+      // If the form property has validation, apply it to the input
+      if (formProperties.validation) {
+        this.applyValidation(input, formProperties.validation);
+      }
+      // Create an error bubble and label element for the input
+      const errorBubble = this.createErrorBubble();
+      const label = this.createLabel(formProperties, input, errorBubble);
+      // Append the label element to the form template
+      this.template.content.append(label);
+    });
+  }
+  /**
+   * 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.cloneNode(true);
+    // Bind event listeners to form elements
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    propertyKeys.forEach(formKey => {
+      var _a;
+      const formInput = formItems.querySelector(`[name=${formKey}]`);
+      // Bind events to form input elements
+      formInput.oninvalid = this.validityCheckWrapper.bind(this);
+      formInput.onblur = this.validityCheckWrapper.bind(this);
+      formInput.onkeyup = this.fieldChanged.bind(this);
+      formInput.onchange = this.fieldChanged.bind(this);
+      if (this._data && this._data[formKey] !== undefined && this._data[formKey] !== null) {
+        formInput.value = this._data[formKey];
+      }
+      // If explicitly setting input as invalid, set invalid state and error message on render
+      if ((_a = properties[formKey].form.validation) === null || _a === void 0 ? void 0 : _a.invalid) {
+        const errorMessage = properties[formKey].form.validation.invalid.message;
+        formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
+        setErrorState(formInput, true, errorMessage);
+      }
+      if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
+        formInput.addEventListener('change', () => {
+          formInput.classList.remove('placeholder');
+        });
+      }
+    });
+    // Append the cloned form elements to the fieldset
+    this.fieldset.replaceChildren(formItems);
+  }
+  validityCheckWrapper(event) {
+    const { target, hasError, errorMessage } = validityCheck(event);
+    setErrorState(target, hasError, errorMessage);
+  }
+  /**
+   * 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.
+   *
+   * @return {JSX.Element} - The rendered form template as a JSX element.
+   */
+  render() {
+    return (h(Host, null, h("form", { ref: el => (this.form = el), onSubmit: this.doSubmit.bind(this) }, h("fieldset", { ref: el => (this.fieldset = el) }), h("input", { type: "submit", ref: el => (this.submitButton = el), style: { display: 'none' } }))));
+  }
+  static get is() { return "tttx-form"; }
+  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": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "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: any }",
+          "resolved": "{ name: string; value: any; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "submit": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "formschema",
+        "methodName": "onFormSchemaChange"
+      }, {
+        "propName": "data",
+        "methodName": "onDataChange"
+      }];
+  }
+}