@3t-transform/threeteeui 1.9.102 → 1.9.103

package/dist/esm/{tttx-form_localcomponent.entry.js → tttx-form_1_9_103.entry.js}

@@ -1,998 +1,998 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b614efb4.js';
-import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-38a67458.js';
+import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-2c1ef894.js';
 import './_commonjsHelpers-9943807e.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 | FocusEvent} event - The focusout event triggered by the input field.
- * @return {{ target: FormField; hasError: boolean; errorMessage: string; }}
- */
-function validityCheck(event) {
-  var _a, _b, _c, _d;
-  if (event.preventDefault) {
-    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('');
-  //handle whitespace-only input
-  if (!target.hasAttribute('custom-validation-set')) {
-    if (target.value.length && !target.value.replace(/\s/g, '').length) {
-      errorMessage = 'This field cannot be left blank';
-      target.setCustomValidity(errorMessage);
-    }
-    else {
-      if (target.setCustomValidity) // tests are dumb as a brick
-        target.setCustomValidity('');
-    }
-  }
-  // Check the validity of the input field and set an error message if needed
-  switch (true) {
-    // The field is required, but has no value
-    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 | FocusEvent} event - The focusout event triggered by the input field.
+ * @return {{ target: FormField; hasError: boolean; errorMessage: string; }}
+ */
+function validityCheck(event) {
+  var _a, _b, _c, _d;
+  if (event.preventDefault) {
+    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('');
+  //handle whitespace-only input
+  if (!target.hasAttribute('custom-validation-set')) {
+    if (target.value.length && !target.value.replace(/\s/g, '').length) {
+      errorMessage = 'This field cannot be left blank';
+      target.setCustomValidity(errorMessage);
+    }
+    else {
+      if (target.setCustomValidity) // tests are dumb as a brick
+        target.setCustomValidity('');
+    }
+  }
+  // Check the validity of the input field and set an error message if needed
+  switch (true) {
+    // The field is required, but has no value
+    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 {FormField} 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, parent = undefined) {
-  // Find the error bubble element for the input field
-  let errorBubble;
-  if (parent !== undefined) {
-    errorBubble = parent.querySelector('.errorBubble');
-  }
-  else {
-    if (target.parentElement.nodeName.toLowerCase() === 'label') {
-      errorBubble = target.parentElement.querySelector('.errorBubble');
-    }
-    else {
-      errorBubble = target.parentElement.parentElement.querySelector('.errorBubble');
-    }
-  }
-  if (!errorBubble)
-    return;
-  // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
-  if (hasError) {
-    target.classList.add('invalid');
-    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);
-  }
-  // 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 {FormField} 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, parent = undefined) {
+  // Find the error bubble element for the input field
+  let errorBubble;
+  if (parent !== undefined) {
+    errorBubble = parent.querySelector('.errorBubble');
+  }
+  else {
+    if (target.parentElement.nodeName.toLowerCase() === 'label') {
+      errorBubble = target.parentElement.querySelector('.errorBubble');
+    }
+    else {
+      errorBubble = target.parentElement.parentElement.querySelector('.errorBubble');
+    }
+  }
+  if (!errorBubble)
+    return;
+  // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
+  if (hasError) {
+    target.classList.add('invalid');
+    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);
+  }
+  // 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 = '';
+  }
 }
 
-function startEndTimeComparator(event) {
-  var _a, _b;
-  const target = event.target;
-  const formKey = target.getAttribute('data-formkey');
-  const timeFields = Array.from(target.parentElement.parentElement.parentElement.querySelectorAll(`[data-formkey=${formKey}]`));
-  if (timeFields.length === 4) {
-    const startTime = timeFields.find(t => t.name.endsWith('starttime'));
-    const endTime = timeFields.find(t => t.name.endsWith('endtime'));
-    const startDate = timeFields.find(t => t.name.endsWith('startdate'));
-    const endDate = timeFields.find(t => t.name.endsWith('enddate'));
-    if (startTime.valueAsNumber >= endTime.valueAsNumber && ((_a = startDate.valueAsDate) === null || _a === void 0 ? void 0 : _a.valueOf()) === ((_b = endDate.valueAsDate) === null || _b === void 0 ? void 0 : _b.valueOf())) {
-      setErrorState(endTime, true, 'End time cannot be the same or before the start time');
-      if (target.name.endsWith('starttime')) {
-        this.validityCheckWrapper(event);
-      }
-    }
-    else {
-      // clear any end time comparitor errors and perform the standard validity check on the event
-      endTime.setCustomValidity('');
-      setErrorState(endTime, false, null);
-      this.validityCheckWrapper(event);
-    }
-  }
-}
-function clearTimeComparator(event) {
-  const target = event.target;
-  const formKey = target.getAttribute('data-formkey');
-  const timeFields = Array.from(target.parentElement.parentElement.parentElement.querySelectorAll(`[type=time][data-formkey=${formKey}]`));
-  if (timeFields.length) {
-    const endTime = timeFields.find(t => t.name.endsWith('endtime'));
-    endTime.setCustomValidity('');
-    setErrorState(endTime, false, null);
-  }
-}
-function endDateComparisonValidator(event, triggeredByStartDate = false) {
-  var _a, _b, _c, _d;
-  const endDate = event.target;
-  if (!endDate.value && triggeredByStartDate) {
-    return;
-  }
-  const compareWithName = endDate.getAttribute('data-compare-with');
-  const startDate = endDate.parentElement.parentElement.parentElement.querySelector(`[name=${compareWithName}]`);
-  if (((_a = endDate.valueAsDate) === null || _a === void 0 ? void 0 : _a.valueOf()) < ((_b = startDate.valueAsDate) === null || _b === void 0 ? void 0 : _b.valueOf())) {
-    endDate.setCustomValidity(endDate.getAttribute('data-compare'));
-    setErrorState(endDate, true, endDate.getAttribute('data-compare'));
-  }
-  else if (((_c = endDate.valueAsDate) === null || _c === void 0 ? void 0 : _c.valueOf()) === ((_d = startDate.valueAsDate) === null || _d === void 0 ? void 0 : _d.valueOf())) {
-    endDate.setCustomValidity('');
-    this.validityCheckWrapper(event);
-    startEndTimeComparator.bind(this)(event);
-  }
-  else {
-    clearTimeComparator.bind(this)(event);
-    this.validityCheckWrapper(event);
-  }
-}
-function startDateComparisonValidator(event) {
-  const startDate = event.target;
-  const compareToName = startDate.getAttribute('data-compare-to');
-  const endDate = startDate.parentElement.parentElement.parentElement.querySelector(`[name=${compareToName}]`);
-  endDateComparisonValidator.bind(this)({ target: endDate }, true);
-  this.validityCheckWrapper(event);
+function startEndTimeComparator(event) {
+  var _a, _b;
+  const target = event.target;
+  const formKey = target.getAttribute('data-formkey');
+  const timeFields = Array.from(target.parentElement.parentElement.parentElement.querySelectorAll(`[data-formkey=${formKey}]`));
+  if (timeFields.length === 4) {
+    const startTime = timeFields.find(t => t.name.endsWith('starttime'));
+    const endTime = timeFields.find(t => t.name.endsWith('endtime'));
+    const startDate = timeFields.find(t => t.name.endsWith('startdate'));
+    const endDate = timeFields.find(t => t.name.endsWith('enddate'));
+    if (startTime.valueAsNumber >= endTime.valueAsNumber && ((_a = startDate.valueAsDate) === null || _a === void 0 ? void 0 : _a.valueOf()) === ((_b = endDate.valueAsDate) === null || _b === void 0 ? void 0 : _b.valueOf())) {
+      setErrorState(endTime, true, 'End time cannot be the same or before the start time');
+      if (target.name.endsWith('starttime')) {
+        this.validityCheckWrapper(event);
+      }
+    }
+    else {
+      // clear any end time comparitor errors and perform the standard validity check on the event
+      endTime.setCustomValidity('');
+      setErrorState(endTime, false, null);
+      this.validityCheckWrapper(event);
+    }
+  }
+}
+function clearTimeComparator(event) {
+  const target = event.target;
+  const formKey = target.getAttribute('data-formkey');
+  const timeFields = Array.from(target.parentElement.parentElement.parentElement.querySelectorAll(`[type=time][data-formkey=${formKey}]`));
+  if (timeFields.length) {
+    const endTime = timeFields.find(t => t.name.endsWith('endtime'));
+    endTime.setCustomValidity('');
+    setErrorState(endTime, false, null);
+  }
+}
+function endDateComparisonValidator(event, triggeredByStartDate = false) {
+  var _a, _b, _c, _d;
+  const endDate = event.target;
+  if (!endDate.value && triggeredByStartDate) {
+    return;
+  }
+  const compareWithName = endDate.getAttribute('data-compare-with');
+  const startDate = endDate.parentElement.parentElement.parentElement.querySelector(`[name=${compareWithName}]`);
+  if (((_a = endDate.valueAsDate) === null || _a === void 0 ? void 0 : _a.valueOf()) < ((_b = startDate.valueAsDate) === null || _b === void 0 ? void 0 : _b.valueOf())) {
+    endDate.setCustomValidity(endDate.getAttribute('data-compare'));
+    setErrorState(endDate, true, endDate.getAttribute('data-compare'));
+  }
+  else if (((_c = endDate.valueAsDate) === null || _c === void 0 ? void 0 : _c.valueOf()) === ((_d = startDate.valueAsDate) === null || _d === void 0 ? void 0 : _d.valueOf())) {
+    endDate.setCustomValidity('');
+    this.validityCheckWrapper(event);
+    startEndTimeComparator.bind(this)(event);
+  }
+  else {
+    clearTimeComparator.bind(this)(event);
+    this.validityCheckWrapper(event);
+  }
+}
+function startDateComparisonValidator(event) {
+  const startDate = event.target;
+  const compareToName = startDate.getAttribute('data-compare-to');
+  const endDate = startDate.parentElement.parentElement.parentElement.querySelector(`[name=${compareToName}]`);
+  endDateComparisonValidator.bind(this)({ target: endDate }, true);
+  this.validityCheckWrapper(event);
 }
 
 const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label{font-weight:500;font-size:16px;line-height:18.752px;color:#212121}label .optional{color:#757575;font-weight:normal}label .outer-container{position:relative}label .outer-container .left-icons,label .outer-container .right-icons{display:flex;position:absolute;height:24px;gap:8px}label .outer-container .left-icons tttx-icon,label .outer-container .right-icons tttx-icon{height:24px;width:24px}label .outer-container .left-icons{left:8px}label .outer-container .right-icons{right:8px}label .outer-container input,label .outer-container textarea{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px;padding:0;padding-left:16px;padding-right:16px;}label .outer-container input.has-input-icon,label .outer-container textarea.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon,label .outer-container textarea.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon,label .outer-container textarea.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon,label .outer-container textarea.has-right-icon{padding-right:40px}label .outer-container input.invalid,label .outer-container textarea.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]),label .outer-container textarea:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:18.752px}label .outer-container input[type=radio],label .outer-container textarea[type=radio]{width:20px;height:20px}label .outer-container input[type=date],label .outer-container textarea[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly],label .outer-container textarea[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus,label .outer-container textarea:focus{border-color:#1479c6}label .outer-container input:focus-visible,label .outer-container textarea:focus-visible{outline:none}label .outer-container textarea{padding:8px;height:auto;min-height:100px;resize:vertical}label .outer-container textarea.resize-none{resize:none}label .outer-container.inputBlock{display:flex;align-items:center;line-height:21px}label .outer-container.inputBlock .left-icons,label .outer-container.inputBlock .right-icons{margin-top:4px}label .outer-container.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}label .outer-container.inputBlock.radioBlock{display:block}label .outer-container.inputInline{display:flex;white-space:nowrap;align-items:center;margin:0}label .outer-container.inputInline input{margin-top:0}label .secondarylabel{color:#757575;font-size:14px;line-height:16.408px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16.408px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label .errorBubble:not(.visible){display:none}label .errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.blackout{background:#363636;border:1px solid #363636;color:white}.blackout:active{background:#212121;border:1px solid #212121}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.blackout:hover{background:#212121;border:1px solid #212121}}:host{display:block}fieldset{margin:0;padding:0;border:none}label{display:block;position:relative;margin-bottom:16px}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}label.flex-label{display:flex;flex-direction:column;width:346px;box-sizing:border-box}label>.outer-container>input[type=date]{min-width:0;width:200px}label.flex-label input[type=time]{min-width:auto;text-align:center;width:130px;margin-left:16px}label>.outer-container>input[type=date],label.flex-label input[type=time]{line-height:36px}input[type=radio]~span{transform:translateY(-17%);display:inline-block;margin-left:5px}";
 
-const TttxForm = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dataSubmitted = createEvent(this, "dataSubmitted", 7);
-    this.dataChanged = createEvent(this, "dataChanged", 7);
-    this.searchTermChanged = createEvent(this, "searchTermChanged", 7);
-    this.selectToggleOpen = createEvent(this, "selectToggleOpen", 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) {
-    // 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_localcomponent');
-    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 = 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 {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 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);
+    this.searchTermChanged = createEvent(this, "searchTermChanged", 7);
+    this.selectToggleOpen = createEvent(this, "selectToggleOpen", 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) {
+    // 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 = 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 {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 watchers() { return {
+    "formschema": ["onFormSchemaChange"],
+    "data": ["onDataChange"]
+  }; }
+};
 TttxForm.style = tttxFormCss;
 
-export { TttxForm as tttx_form_localcomponent };
+export { TttxForm as tttx_form_1_9_103 };