@3t-transform/threeteeui 1.2.0 → 1.4.0

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

@@ -3,6 +3,7 @@ import * as DOMPurify from 'dompurify';
 import domSanitiserOptions from '../../../shared/domsanitiser.options';
 import validityCheck from './lib/validityCheck';
 import setErrorState from './lib/setErrorState';
+import { endDateComparisonValidator, startEndTimeComparator, startDateComparisonValidator } from './lib/timecomparatorChecks';
 export class TttxForm {
   constructor() {
     // Create a new template element using the HTMLTemplateElement interface.
@@ -12,13 +13,6 @@ export class TttxForm {
   }
   // This method is called whenever the "formschema" property changes
   onFormSchemaChange(newValue) {
-    // If the formSchema changes and the form data is uncontrolled, store the data since the fields will be removed to avoid form duplication
-    if (!this.data && this.form && this._formSchema) {
-      const formData = new FormData(this.form);
-      this._data = Object.fromEntries(Object.keys(this._formSchema.properties).map(formKey => {
-        return [formKey, formData.get(formKey)];
-      }));
-    }
     // Check if the new value is a string, indicating that it needs to be parsed
     if (typeof newValue === 'string') {
       // Parse the string and set the "_formSchema" property
@@ -28,6 +22,7 @@ export class TttxForm {
       // 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') {
@@ -36,6 +31,7 @@ export class TttxForm {
     else {
       this._data = newValue;
     }
+    return this._data;
   }
   /**
    * Handles the focus event for a form field and emits a "dataChanged" event
@@ -75,7 +71,6 @@ export class TttxForm {
     }
     select.replaceChildren(fragment);
     tttxSelect.optionsData = options;
-    //await tttxSelect.setOptionsData(options);
     await tttxSelect.setSelectedItem(options[0].value);
   }
   /**
@@ -87,6 +82,10 @@ export class TttxForm {
   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
@@ -133,9 +132,10 @@ export class TttxForm {
     formProperties.options.forEach(optionProperties => {
       this.appendOption(select, optionProperties);
     });
-    if ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey])
+    if ((_a = this._data) === null || _a === void 0 ? void 0 : _a[formKey]) {
       select.classList.remove('placeholder');
-    const tttxSelect = document.createElement('tttx-select-box_1_2_0');
+    }
+    const tttxSelect = document.createElement('tttx-select-box_1_4_0');
     tttxSelect.optionsData = (_b = formProperties.options) === null || _b === void 0 ? void 0 : _b.filter(o => !o.placeholder);
     tttxSelect.placeholder = (_d = (_c = formProperties.options) === null || _c === void 0 ? void 0 : _c.filter(o => o.placeholder)[0]) === null || _d === void 0 ? void 0 : _d.label;
     tttxSelect.inline = false;
@@ -146,13 +146,18 @@ export class TttxForm {
     const fragment = document.createDocumentFragment();
     fragment.append(tttxSelect);
     select.style.display = 'none';
-    tttxSelect.addEventListener('selectItemEvent', function (ev) {
-      select.value = ev.detail.value;
-      select.onblur({ target: select }); // triggers validator
-      select.onchange({ target: select }); // triggers dataChanged event
-    });
+    tttxSelect.addEventListener('selectItemEvent', this.selectItemEventCallback.bind(select));
     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
    *
@@ -383,7 +388,7 @@ export class TttxForm {
    * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
    * @return {HTMLLabelElement} - The new label element.
    */
-  createLabel(formProperties, input, overlay, errorBubble) {
+  createLabel(formProperties, input, overlay = null, errorBubble) {
     var _a;
     const outerContainer = document.createElement('div');
     let outerContainerClassName = 'outer-container inputBlock';
@@ -434,7 +439,7 @@ export class TttxForm {
    */
   createRadio(formKey, formProperties) {
     var _a, _b;
-    const fragment = new DocumentFragment();
+    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');
@@ -464,8 +469,9 @@ export class TttxForm {
   populateFormFromSchema() {
     var _a;
     // If there is no form schema, return early
-    if (!this._formSchema)
+    if (!this._formSchema) {
       return;
+    }
     // Get the properties of the form schema and their keys
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
@@ -533,129 +539,155 @@ export class TttxForm {
     const properties = this._formSchema.properties;
     const propertyKeys = Object.keys(properties);
     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 (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);
-        }
-      }
+      this.applyValidationFunctionsToFormElement(formItems, formKey, properties);
     }
     // 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[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;
-            default:
-              formItem.value = this._data[key];
-          }
-        }
-      }
+    if ((this._data && Object.keys(this._data).length > 0)) {
+      this.populateFormWithExistingData(formItems);
     }
     // 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);
-        }
+  /**
+   * 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);
       }
-      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);
+      if (properties[formKey].form.type === 'startenddate' && formInput.hasAttribute('data-compare-to')) {
+        formInput.oninvalid = startDateComparisonValidator.bind(this);
+        formInput.onblur = startDateComparisonValidator.bind(this);
       }
     }
   }
-  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);
+  /**
+   * If data exists, set form input values before rendering
+   * @param formItems The document fragment template of form items to be rendered
+   */
+  populateFormWithExistingData(formItems) {
+    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;
+          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, '');
+  }
+  /**
+   * 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;
+    }
+    formField.disabled = true;
+    let parent = formField.parentElement;
+    do {
+      if (parent.nodeName !== 'LABEL') {
+        parent = parent.parentElement;
+      }
+    } while (parent.nodeName !== 'LABEL');
+    parent.style.display = 'none';
+  }
+  /**
+   * 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}]`);
+    formField.disabled = false;
+    let parent = formField.parentElement;
+    do {
+      if (parent.nodeName !== 'LABEL') {
+        parent = parent.parentElement;
+      }
+    } while (parent.nodeName !== 'LABEL');
+    parent.style.display = 'block';
+  }
   /**
    * 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
@@ -664,9 +696,9 @@ export class TttxForm {
    * later on.
    */
   render() {
-    return (h(Host, null, h("form", { ref: el => (this.form = el), onSubmit: this.doSubmit.bind(this) }, h("fieldset", { ref: el => (this.fieldset = el) }), h("input", { type: "submit", ref: el => (this.submitButton = el), style: { display: 'none' } }))));
+    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this) }, h("fieldset", { ref: this.assignFieldsetReference.bind(this) }), h("input", { type: "submit", ref: this.assignButtonReference.bind(this), style: { display: 'none' } }))));
   }
-  static get is() { return "tttx-form_1_2_0"; }
+  static get is() { return "tttx-form_1_4_0"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -751,8 +783,8 @@ export class TttxForm {
           "text": ""
         },
         "complexType": {
-          "original": "{ name: string; value: any }",
-          "resolved": "{ name: string; value: any; }",
+          "original": "{ name: string; value: string }",
+          "resolved": "{ name: string; value: string; }",
           "references": {}
         }
       }];
@@ -794,6 +826,10 @@ export class TttxForm {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TttxSelectBox": {
+              "location": "import",
+              "path": "../tttx-select-box/tttx-select-box"
             }
           },
           "return": "Promise<void>"
@@ -808,6 +844,145 @@ export class TttxForm {
               "text": "options a list of option values and labels"
             }]
         }
+      },
+      "setValidationFor": {
+        "complexType": {
+          "signature": "(fieldName: string, message: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to apply the validation too"
+                }],
+              "text": "The form field name to apply the validation too"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "message The validation message to display under the form field"
+                }],
+              "text": "The validation message to display under the form field"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "An external validation trigger to apply to a form field",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to apply the validation too"
+            }, {
+              "name": "param",
+              "text": "message The validation message to display under the form field"
+            }]
+        }
+      },
+      "clearValidationFor": {
+        "complexType": {
+          "signature": "(fieldName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to clear the validation of"
+                }],
+              "text": "The form field name to clear the validation of"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Clear the validation message on a given form field",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to clear the validation of"
+            }]
+        }
+      },
+      "disableFormField": {
+        "complexType": {
+          "signature": "(fieldName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to disable"
+                }],
+              "text": "The form field name to disable"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Disable a form field and visually remove it from the form.\nIf custom validation is set, this function will return without affecting the form field.",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to disable"
+            }]
+        }
+      },
+      "enableFormField": {
+        "complexType": {
+          "signature": "(fieldName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "fieldName The form field name to enable"
+                }],
+              "text": "The form field name to enable"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLInputElement": {
+              "location": "global"
+            },
+            "HTMLSelectElement": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Enable a form field and visually add it back to the form.",
+          "tags": [{
+              "name": "param",
+              "text": "fieldName The form field name to enable"
+            }]
+        }
       }
     };
   }

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

@@ -169,7 +169,7 @@ const formSchema = {
     }
   },
 };
-export const SingleFormItem = args => `<tttx-form_1_2_0 formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_2_0>`;
+export const SingleFormItem = args => `<tttx-form_1_4_0 formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_4_0>`;
 SingleFormItem.args = {
   formSchema: {
     properties: {
@@ -192,7 +192,7 @@ SingleFormItem.args = {
     },
   },
 };
-export const StartAndEndDateWithoutTime = args => `<tttx-form_1_2_0 formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_2_0>`;
+export const StartAndEndDateWithoutTime = args => `<tttx-form_1_4_0 formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_4_0>`;
 StartAndEndDateWithoutTime.args = {
   formSchema: {
     properties: {
@@ -207,7 +207,7 @@ StartAndEndDateWithoutTime.args = {
     },
   },
 };
-export const ExampleFormFromJSON = args => `<tttx-form_1_2_0 id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_2_0>
+export const ExampleFormFromJSON = args => `<tttx-form_1_4_0 id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_4_0>
 <hr/>
 <button type='button' id='button'>Submit Form</button>
 <script>
@@ -408,7 +408,7 @@ const data = {
   'startend-endtime': '17:00',
   notes: 'Some notes that were entered into this box.'
 };
-export const PrePopulateForm = args => `<tttx-form_1_2_0 id='form' formSchema='${JSON.stringify(args.formSchema)}' data='${JSON.stringify(args.data)}'></tttx-form_1_2_0>
+export const PrePopulateForm = args => `<tttx-form_1_4_0 id='form' formSchema='${JSON.stringify(args.formSchema)}' data='${JSON.stringify(args.data)}'></tttx-form_1_4_0>
 <hr/>
 <button type='button' id='button'>Submit Form</button>
 <script>
@@ -483,7 +483,7 @@ const radioFormSchema = {
     },
   },
 };
-export const FormWithRadio = args => `<tttx-form_1_2_0 id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_2_0>
+export const FormWithRadio = args => `<tttx-form_1_4_0 id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_4_0>
     <hr/>
     <button type='button' id='button'>Submit Form</button>
     <script>

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

@@ -40,10 +40,17 @@ export class TttxList {
     this.rowClick.emit({ key: item.key, name: this.name, data: item.rowData });
   }
   renderListItem(item) {
-    const cleanHTML = DOMPurify.sanitize(item.element, domSanitiserOptions);
-    return (h(Fragment, null, item.hasCheckbox && (h("div", { class: "checkbox" }, h("tttx-icon_1_2_0", { icon: item.checked ? 'check_box' : 'check_box_outline_blank', color: item.checked ? 'blue' : 'grey', onClick: event => {
+    let element;
+    if (typeof item.element === 'string') {
+      const cleanHTML = DOMPurify.sanitize(item.element, domSanitiserOptions);
+      element = h("span", { class: "item-content", innerHTML: cleanHTML });
+    }
+    else {
+      element = h("span", { class: "item-content" }, item.element);
+    }
+    return (h(Fragment, null, item.hasCheckbox && (h("div", { class: "checkbox" }, h("tttx-icon_1_4_0", { icon: item.checked ? 'check_box' : 'check_box_outline_blank', color: item.checked ? 'blue' : 'grey', onClick: event => {
         this.onRowCheckboxHandler(event, item);
-      } }))), item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && (h("span", { class: "icons" }, h("tttx-icon_1_2_0", { class: "align-right", icon: item.icon, color: 'black' })))));
+      } }))), item.element && element, item.icon && (h("span", { class: "icons" }, h("tttx-icon_1_4_0", { class: "align-right", icon: item.icon, color: 'black' })))));
   }
   render() {
     if (!this._data)
@@ -56,7 +63,7 @@ export class TttxList {
         this.onRowClickHandler(item);
       } }, this.renderListItem(item))))));
   }
-  static get is() { return "tttx-list_1_2_0"; }
+  static get is() { return "tttx-list_1_4_0"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {