@3t-transform/threeteeui 0.1.41 → 0.1.43

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

@@ -1,466 +1,468 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9cde46a5.js';
-import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-cc420431.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-d784fb3e.js';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-3c7ded83.js';
 
-/**
- * Validates the input field on focusout event by checking its validity state,
- * sets an error message if there's an issue, and emits a "dataChanged" event to
- * the parent component with the field name and its new value.
- *
- * @param {Event} event - The focusout event triggered by the input field.
- * @return {void}
- */
-function validityCheck(event) {
-  var _a, _b, _c, _d;
-  event.preventDefault();
-  const target = event.target;
-  let hasError = true;
-  let errorMessage = '';
-  // validity object on HTML5 inputs has the following options
-  // badInput
-  // customError
-  // patternMismatch
-  // rangeOverflow
-  // rangeUnderflow
-  // stepMismatch
-  // tooLong
-  // tooShort
-  // typeMismatch
-  // valid
-  // valueMissing
-  // customErrors can be set with
-  // target.setCustomValidity('custom error!');
-  // and cleared with
-  // target.setCustomValidity('');
-  // Check the validity of the input field and set an error message if needed
-  switch (true) {
-    // The field is required, but has no value
-    case target.validity.valueMissing:
-      errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
-      break;
-    // The field's value does not match the expected pattern
-    case target.validity.patternMismatch:
-      errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
-      break;
-    // The field's value is not of the correct input type
-    case target.validity.badInput:
-      // IE string in a number field
-      errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
-      break;
-    // The field's value is above or below the range set in the "min" and "max" attributes
-    case target.validity.rangeOverflow || target.validity.rangeUnderflow:
-      // IE date or number is above or below value set in min or max tags
-      errorMessage = (_d = target.dataset.range) !== null && _d !== void 0 ? _d : 'Invalid value';
-      break;
-    case target.validity.customError:
-      errorMessage = target.validationMessage;
-      break;
-    // No error detected
-    default:
-      hasError = false;
-  }
-  // Return the error state
-  return { target, hasError, errorMessage };
+/**
+ * Validates the input field on focusout event by checking its validity state,
+ * sets an error message if there's an issue, and emits a "dataChanged" event to
+ * the parent component with the field name and its new value.
+ *
+ * @param {Event} event - The focusout event triggered by the input field.
+ * @return {void}
+ */
+function validityCheck(event) {
+  var _a, _b, _c, _d;
+  event.preventDefault();
+  const target = event.target;
+  let hasError = true;
+  let errorMessage = '';
+  // validity object on HTML5 inputs has the following options
+  // badInput
+  // customError
+  // patternMismatch
+  // rangeOverflow
+  // rangeUnderflow
+  // stepMismatch
+  // tooLong
+  // tooShort
+  // typeMismatch
+  // valid
+  // valueMissing
+  // customErrors can be set with
+  // target.setCustomValidity('custom error!');
+  // and cleared with
+  // target.setCustomValidity('');
+  // Check the validity of the input field and set an error message if needed
+  switch (true) {
+    // The field is required, but has no value
+    case target.validity.valueMissing:
+      errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
+      break;
+    // The field's value does not match the expected pattern
+    case target.validity.patternMismatch:
+      errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
+      break;
+    // The field's value is not of the correct input type
+    case target.validity.badInput:
+      // IE string in a number field
+      errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
+      break;
+    // The field's value is above or below the range set in the "min" and "max" attributes
+    case target.validity.rangeOverflow || target.validity.rangeUnderflow:
+      // IE date or number is above or below value set in min or max tags
+      errorMessage = (_d = target.dataset.range) !== null && _d !== void 0 ? _d : 'Invalid value';
+      break;
+    case target.validity.customError:
+      errorMessage = target.validationMessage;
+      break;
+    // No error detected
+    default:
+      hasError = false;
+  }
+  // Return the error state
+  return { target, hasError, errorMessage };
 }
 
-/**
- * Sets the error state of an input field by updating its class and error message.
- * If an error was detected, it sets the input field's class to "invalid" and
- * displays the error message in an error bubble. If no error was detected,
- * it removes the "invalid" class from the input field and clears the error bubble.
- *
- * @param {HTMLInputElement} target - The input field to update.
- * @param {boolean} hasError - Whether an error was detected in the field.
- * @param {string} errorMessage - The error message to display (if any).
- * @return {void}
- */
-function setErrorState(target, hasError, errorMessage) {
-  // Find the error bubble element for the input field
-  const errorBubble = target.parentElement.querySelector('.errorBubble');
-  // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
-  if (hasError) {
-    target.classList.add('invalid');
-    errorBubble.classList.add('visible');
-    const errorIcon = document.createElement('span');
-    // Set the class of the error icon to a pre-defined CSS class that specifies the icon's appearance
-    errorIcon.className = 'material-symbols-rounded';
-    // Set the text content of the error icon to the word "warning"
-    errorIcon.textContent = 'warning';
-    // errorBubble.replaceChildren cannot be used here because the tests don't support this new feature :(
-    errorBubble.innerHTML = '';
-    errorBubble.append(errorIcon);
-    errorBubble.append(errorMessage);
-    // errorBubble.replaceChildren(errorIcon, errorMessage);
-  }
-  // If no error was detected, remove the "invalid" class from the input field and clear the error bubble
-  else {
-    errorBubble.classList.remove('visible');
-    target.classList.remove('invalid');
-    errorBubble.innerHTML = '';
-  }
+/**
+ * Sets the error state of an input field by updating its class and error message.
+ * If an error was detected, it sets the input field's class to "invalid" and
+ * displays the error message in an error bubble. If no error was detected,
+ * it removes the "invalid" class from the input field and clears the error bubble.
+ *
+ * @param {HTMLInputElement} target - The input field to update.
+ * @param {boolean} hasError - Whether an error was detected in the field.
+ * @param {string} errorMessage - The error message to display (if any).
+ * @return {void}
+ */
+function setErrorState(target, hasError, errorMessage) {
+  // Find the error bubble element for the input field
+  const errorBubble = target.parentElement.querySelector('.errorBubble');
+  // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
+  if (hasError) {
+    target.classList.add('invalid');
+    errorBubble.classList.add('visible');
+    const errorIcon = document.createElement('span');
+    // Set the class of the error icon to a pre-defined CSS class that specifies the icon's appearance
+    errorIcon.className = 'material-symbols-rounded';
+    // Set the text content of the error icon to the word "warning"
+    errorIcon.textContent = 'warning';
+    // errorBubble.replaceChildren cannot be used here because the tests don't support this new feature :(
+    errorBubble.innerHTML = '';
+    errorBubble.append(errorIcon);
+    errorBubble.append(errorMessage);
+    // errorBubble.replaceChildren(errorIcon, errorMessage);
+  }
+  // If no error was detected, remove the "invalid" class from the input field and clear the error bubble
+  else {
+    errorBubble.classList.remove('visible');
+    target.classList.remove('invalid');
+    errorBubble.innerHTML = '';
+  }
 }
 
 const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.input-icon{position:absolute;margin-top:9px;margin-left:4px}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;line-height:16px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;line-height:19px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label.inputInline{display:flex;white-space:nowrap;align-items:center}label.inputInline .input-container{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label{font-weight:500;font-size:16px;line-height:19px;margin-bottom:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;line-height:19px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}@media (max-width: 600px){input[type=date]{padding-top:6px}}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}.input-icon~input{padding:0 32px}input~.errorBubble{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input~.errorBubble:not(.visible){display:none}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000}input:focus{border-color:#1479c6}input:focus-visible{outline:none}.secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:block}fieldset{margin:0;padding:0;border:none}label.inputBlock.inlineBlock{display:inline-block}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}";
 
-const TttxForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dataSubmitted = createEvent(this, "dataSubmitted", 7);
-    this.dataChanged = createEvent(this, "dataChanged", 7);
-    // 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 = purify.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 watchers() { return {
-    "formschema": ["onFormSchemaChange"],
-    "data": ["onDataChange"]
-  }; }
-};
+const TttxForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dataSubmitted = createEvent(this, "dataSubmitted", 7);
+    this.dataChanged = createEvent(this, "dataChanged", 7);
+    // 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 = purify.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 watchers() { return {
+    "formschema": ["onFormSchemaChange"],
+    "data": ["onDataChange"]
+  }; }
+};
 TttxForm.style = tttxFormCss;
 
 export { TttxForm as tttx_form };