@3t-transform/threeteeui 0.2.107 → 0.2.108

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

@@ -32,7 +32,7 @@ const TttxCheckbox = class {
   render() {
     const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
     const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
-    return (index.h(index.Host, null, index.h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, index.h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), index.h("tttx-icon", { color: this.checked ? 'blue' : null, icon: renderedIcon, onClick: this.onClick.bind(this) }), index.h("span", { class: "tttx-checkbox__label" }, this.label))));
+    return (index.h(index.Host, null, index.h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, index.h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), index.h("tttx-icon", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), index.h("span", { class: "tttx-checkbox__label" }, this.label))));
   }
   static get watchers() { return {
     "indeterminate": ["watchIndeterminateChange"]

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

@@ -16,7 +16,9 @@ require('./_commonjsHelpers-537d719a.js');
  */
 function validityCheck(event) {
   var _a, _b, _c, _d;
-  event.preventDefault();
+  if (event.preventDefault) {
+    event.preventDefault();
+  }
   const target = event.target;
   let hasError = true;
   let errorMessage = '';
@@ -129,7 +131,7 @@ function setErrorState(target, hasError, errorMessage, parent = undefined) {
   }
 }
 
-const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label{font-weight:500;font-size:16px;line-height:19px;color:#212121}label .optional{color:#757575;font-weight:normal}label .outer-container{position:relative}label .outer-container .left-icons,label .outer-container .right-icons{display:flex;position:absolute;height:24px;gap:8px}label .outer-container .left-icons tttx-icon,label .outer-container .right-icons tttx-icon{height:24px;width:24px}label .outer-container .left-icons{left:8px}label .outer-container .right-icons{right:8px}label .outer-container input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px;}label .outer-container input.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon{padding-right:40px}label .outer-container input.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label .outer-container input[type=radio]{width:20px;height:20px}label .outer-container input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus{border-color:#1479c6}label .outer-container input:focus-visible{outline:none}label .outer-container.inputBlock{display:flex;align-items:center;line-height:21px}label .outer-container.inputBlock .left-icons,label .outer-container.inputBlock .right-icons{margin-top:4px}label .outer-container.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}label .outer-container.inputBlock.radioBlock{display:block}label .outer-container.inputInline{display:flex;white-space:nowrap;align-items:center;margin:0}label .outer-container.inputInline input{margin-top:0}label .secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label .errorBubble:not(.visible){display:none}label .errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:block}fieldset{margin:0;padding:0;border:none}label{display:block;position:relative;margin-bottom:16px}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}";
+const tttxFormCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}label{font-weight:500;font-size:16px;line-height:19px;color:#212121}label .optional{color:#757575;font-weight:normal}label .outer-container{position:relative}label .outer-container .left-icons,label .outer-container .right-icons{display:flex;position:absolute;height:24px;gap:8px}label .outer-container .left-icons tttx-icon,label .outer-container .right-icons tttx-icon{height:24px;width:24px}label .outer-container .left-icons{left:8px}label .outer-container .right-icons{right:8px}label .outer-container input{color:#212121;box-sizing:border-box;border:1px solid #d5d5d5;border-radius:4px;padding:0;padding-left:16px;padding-right:16px;margin-top:4px;}label .outer-container input.has-input-icon{padding-left:40px}label .outer-container input.has-input-icon.has-left-icon{padding-left:72px}label .outer-container input.has-left-icon{padding-left:40px}label .outer-container input.has-right-icon{padding-right:40px}label .outer-container input.invalid{border:1px solid #dc0000}label .outer-container input:not([type=submit]){font-family:\"Roboto\", serif;width:100%;height:36px;font-size:16px;line-height:19px}label .outer-container input[type=radio]{width:20px;height:20px}label .outer-container input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}label .outer-container input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}label .outer-container input:focus{border-color:#1479c6}label .outer-container input:focus-visible{outline:none}label .outer-container.inputBlock{display:flex;align-items:center;line-height:21px}label .outer-container.inputBlock .left-icons,label .outer-container.inputBlock .right-icons{margin-top:4px}label .outer-container.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}label .outer-container.inputBlock.radioBlock{display:block}label .outer-container.inputInline{display:flex;white-space:nowrap;align-items:center;margin:0}label .outer-container.inputInline input{margin-top:0}label .secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label .errorBubble{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}label .errorBubble:not(.visible){display:none}label .errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:500}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:block}fieldset{margin:0;padding:0;border:none}label{display:block;position:relative;margin-bottom:16px}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}label.flex-label{display:flex;flex-direction:column;width:300px;box-sizing:border-box}label.flex-label input[type=date]{flex-grow:1;min-width:auto}label.flex-label input[type=time]{min-width:auto;text-align:center;width:180px;margin-left:16px}";
 
 const TttxForm = class {
   constructor(hostRef) {
@@ -299,6 +301,59 @@ const TttxForm = class {
     // Return the input element
     return input;
   }
+  createStartEndDateComponent(formKey, formProperties) {
+    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, { required: { message: 'Please enter a start date' }, dateCompare: { to: endDate.name } });
+    this.applyValidation(endDate, { required: { message: 'Please enter an end date' }, dateCompare: { with: startDate.name, message: 'End date cannot be before the start date' } });
+    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, { required: { message: 'Please enter a start time' } });
+      this.applyValidation(endTime, { required: { message: 'Please enter an end time' } });
+    }
+    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
@@ -319,6 +374,7 @@ const TttxForm = class {
    * @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) {
@@ -351,6 +407,16 @@ const TttxForm = class {
     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() {
@@ -467,6 +533,7 @@ const TttxForm = class {
    * @return {void}
    */
   populateFormFromSchema() {
+    var _a;
     // If there is no form schema, return early
     if (!this._formSchema)
       return;
@@ -474,9 +541,17 @@ const TttxForm = class {
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
     // Loop through each property key and create an input, label, and error bubble for it
-    propertyKeys.forEach(formKey => {
+    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 input;
       switch (formProperties.type) {
         case 'select':
@@ -489,15 +564,22 @@ const TttxForm = class {
           input = this.createInput(formKey, formProperties);
       }
       // If the form property has validation, apply it to the input
-      if (formProperties.validation && formProperties.type !== 'radio') {
+      if (formProperties.validation &&
+        formProperties.type !== 'radio') {
         this.applyValidation(input, formProperties.validation);
       }
       // Create an error bubble and label element for the input
       const errorBubble = this.createErrorBubble();
       const label = this.createLabel(formProperties, input, errorBubble);
+      // 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;
+        input.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
+        setErrorState(input, true, errorMessage);
+      }
       // Append the label element to the form template
       this.template.content.append(label);
-    });
+    }
   }
   /**
    * Clones the form template and binds event listeners to its input elements. First, it checks if
@@ -518,47 +600,121 @@ const TttxForm = class {
     // Bind event listeners to form elements
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
-    propertyKeys.forEach(formKey => {
-      var _a, _b;
-      const formInputs = formItems.querySelectorAll(`[name=${formKey}]`);
-      for (const formInput of formInputs) {
+    for (const formKey of propertyKeys) {
+      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 ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) {
-          switch (formInput.type) {
+        if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
+          formInput.addEventListener('change', () => {
+            formInput.classList.remove('placeholder');
+          });
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-with')) {
+          formInput.oninvalid = this.endDateComparisonValidator.bind(this);
+          formInput.onblur = this.endDateComparisonValidator.bind(this);
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.type === 'time') {
+          formInput.oninvalid = this.startEndTimeComparitor.bind(this);
+          formInput.onblur = this.startEndTimeComparitor.bind(this);
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-to')) {
+          formInput.oninvalid = this.startDateComparisonValidator.bind(this);
+          formInput.onblur = this.startDateComparisonValidator.bind(this);
+        }
+      }
+    }
+    // populate with existing form data if available
+    if (this._data && Object.keys(this._data).length > 0) {
+      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[formKey] === 'on') {
-                formInput.checked = true;
+              if (this._data[key] === 'on') {
+                formItem.checked = true;
               }
               break;
             case 'radio':
-              if (formInput.value === this._data[formKey]) {
-                formInput.checked = true;
+              if (formItem.value === this._data[key]) {
+                formItem.checked = true;
               }
               break;
             default:
-              formInput.value = this._data[formKey];
+              formItem.value = this._data[key];
           }
         }
-        // If explicitly setting input as invalid, set invalid state and error message on render
-        if ((_b = properties[formKey].form.validation) === null || _b === void 0 ? void 0 : _b.invalid) {
-          const errorMessage = properties[formKey].form.validation.invalid.message;
-          formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
-          setErrorState(formInput, true, errorMessage);
-        }
-        if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
-          formInput.addEventListener('change', () => {
-            formInput.classList.remove('placeholder');
-          });
-        }
       }
-    });
+    }
     // Append the cloned form elements to the fieldset
     this.fieldset.replaceChildren(formItems);
   }
+  startEndTimeComparitor(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);
+      }
+    }
+  }
+  clearTimeComparitor(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);
+    }
+  }
+  startDateComparisonValidator(event) {
+    const startDate = event.target;
+    const compareToName = startDate.getAttribute('data-compare-to');
+    const endDate = startDate.parentElement.parentElement.parentElement.querySelector(`[name=${compareToName}]`);
+    this.endDateComparisonValidator({ target: endDate }, true);
+    this.validityCheckWrapper(event);
+  }
+  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);
+      this.startEndTimeComparitor(event);
+    }
+    else {
+      this.clearTimeComparitor(event);
+      this.validityCheckWrapper(event);
+    }
+  }
   validityCheckWrapper(event) {
     const { target, hasError, errorMessage } = validityCheck(event);
     setErrorState(target, hasError, errorMessage);

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

@@ -23,7 +23,7 @@ export class TttxCheckbox {
   render() {
     const checkBoxIcon = this.checked ? 'check_box' : 'check_box_outline_blank';
     const renderedIcon = this.indeterminate ? 'indeterminate_check_box' : checkBoxIcon;
-    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon", { color: this.checked ? 'blue' : null, icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
+    return (h(Host, null, h("label", { class: `tttx-checkbox ${this.inline ? '--inline' : ''}` }, h("input", { class: "tttx-checkbox__input", type: "checkbox", id: this.checkboxId, checked: this.checked, ref: (el) => this.checkbox = el }), h("tttx-icon", { color: this.checked ? 'blue' : 'grey', icon: renderedIcon, onClick: this.onClick.bind(this) }), h("span", { class: "tttx-checkbox__label" }, this.label))));
   }
   static get is() { return "tttx-checkbox"; }
   static get originalStyleUrls() {

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

@@ -8,7 +8,9 @@
  */
 function validityCheck(event) {
   var _a, _b, _c, _d;
-  event.preventDefault();
+  if (event.preventDefault) {
+    event.preventDefault();
+  }
   const target = event.target;
   let hasError = true;
   let errorMessage = '';

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

@@ -425,4 +425,23 @@ select:focus-visible {
   display: flex;
   gap: 16px;
   flex-direction: row-reverse;
+}
+
+label.flex-label {
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  box-sizing: border-box;
+}
+
+label.flex-label input[type=date] {
+  flex-grow: 1;
+  min-width: auto;
+}
+
+label.flex-label input[type=time] {
+  min-width: auto;
+  text-align: center;
+  width: 180px;
+  margin-left: 16px;
 }

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

@@ -171,6 +171,59 @@ export class TttxForm {
     // Return the input element
     return input;
   }
+  createStartEndDateComponent(formKey, formProperties) {
+    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, { required: { message: 'Please enter a start date' }, dateCompare: { to: endDate.name } });
+    this.applyValidation(endDate, { required: { message: 'Please enter an end date' }, dateCompare: { with: startDate.name, message: 'End date cannot be before the start date' } });
+    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, { required: { message: 'Please enter a start time' } });
+      this.applyValidation(endTime, { required: { message: 'Please enter an end time' } });
+    }
+    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
@@ -191,6 +244,7 @@ export class TttxForm {
    * @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) {
@@ -223,6 +277,16 @@ export class TttxForm {
     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() {
@@ -339,6 +403,7 @@ export class TttxForm {
    * @return {void}
    */
   populateFormFromSchema() {
+    var _a;
     // If there is no form schema, return early
     if (!this._formSchema)
       return;
@@ -346,9 +411,17 @@ export class TttxForm {
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
     // Loop through each property key and create an input, label, and error bubble for it
-    propertyKeys.forEach(formKey => {
+    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 input;
       switch (formProperties.type) {
         case 'select':
@@ -361,15 +434,22 @@ export class TttxForm {
           input = this.createInput(formKey, formProperties);
       }
       // If the form property has validation, apply it to the input
-      if (formProperties.validation && formProperties.type !== 'radio') {
+      if (formProperties.validation &&
+        formProperties.type !== 'radio') {
         this.applyValidation(input, formProperties.validation);
       }
       // Create an error bubble and label element for the input
       const errorBubble = this.createErrorBubble();
       const label = this.createLabel(formProperties, input, errorBubble);
+      // 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;
+        input.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
+        setErrorState(input, true, errorMessage);
+      }
       // Append the label element to the form template
       this.template.content.append(label);
-    });
+    }
   }
   /**
    * Clones the form template and binds event listeners to its input elements. First, it checks if
@@ -390,47 +470,121 @@ export class TttxForm {
     // Bind event listeners to form elements
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
-    propertyKeys.forEach(formKey => {
-      var _a, _b;
-      const formInputs = formItems.querySelectorAll(`[name=${formKey}]`);
-      for (const formInput of formInputs) {
+    for (const formKey of propertyKeys) {
+      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 ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) {
-          switch (formInput.type) {
+        if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
+          formInput.addEventListener('change', () => {
+            formInput.classList.remove('placeholder');
+          });
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-with')) {
+          formInput.oninvalid = this.endDateComparisonValidator.bind(this);
+          formInput.onblur = this.endDateComparisonValidator.bind(this);
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.type === 'time') {
+          formInput.oninvalid = this.startEndTimeComparitor.bind(this);
+          formInput.onblur = this.startEndTimeComparitor.bind(this);
+        }
+        if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-to')) {
+          formInput.oninvalid = this.startDateComparisonValidator.bind(this);
+          formInput.onblur = this.startDateComparisonValidator.bind(this);
+        }
+      }
+    }
+    // populate with existing form data if available
+    if (this._data && Object.keys(this._data).length > 0) {
+      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[formKey] === 'on') {
-                formInput.checked = true;
+              if (this._data[key] === 'on') {
+                formItem.checked = true;
               }
               break;
             case 'radio':
-              if (formInput.value === this._data[formKey]) {
-                formInput.checked = true;
+              if (formItem.value === this._data[key]) {
+                formItem.checked = true;
               }
               break;
             default:
-              formInput.value = this._data[formKey];
+              formItem.value = this._data[key];
           }
         }
-        // If explicitly setting input as invalid, set invalid state and error message on render
-        if ((_b = properties[formKey].form.validation) === null || _b === void 0 ? void 0 : _b.invalid) {
-          const errorMessage = properties[formKey].form.validation.invalid.message;
-          formInput.setCustomValidity(errorMessage); // Prevents the invalid styling from resetting on blur
-          setErrorState(formInput, true, errorMessage);
-        }
-        if (properties[formKey].form.type === 'select' && formInput.classList.contains('placeholder')) {
-          formInput.addEventListener('change', () => {
-            formInput.classList.remove('placeholder');
-          });
-        }
       }
-    });
+    }
     // Append the cloned form elements to the fieldset
     this.fieldset.replaceChildren(formItems);
   }
+  startEndTimeComparitor(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);
+      }
+    }
+  }
+  clearTimeComparitor(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);
+    }
+  }
+  startDateComparisonValidator(event) {
+    const startDate = event.target;
+    const compareToName = startDate.getAttribute('data-compare-to');
+    const endDate = startDate.parentElement.parentElement.parentElement.querySelector(`[name=${compareToName}]`);
+    this.endDateComparisonValidator({ target: endDate }, true);
+    this.validityCheckWrapper(event);
+  }
+  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);
+      this.startEndTimeComparitor(event);
+    }
+    else {
+      this.clearTimeComparitor(event);
+      this.validityCheckWrapper(event);
+    }
+  }
   validityCheckWrapper(event) {
     const { target, hasError, errorMessage } = validityCheck(event);
     setErrorState(target, hasError, errorMessage);