@3t-transform/threeteeui 1.2.0 → 1.3.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);
   }
   /**
@@ -133,9 +128,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_3_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 +142,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 +384,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 +435,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 +465,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 +535,97 @@ 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));
       }
-      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-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);
       }
     }
   }
-  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;
+  }
   /**
    * 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 +634,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_3_0"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -751,8 +721,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 +764,10 @@ export class TttxForm {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TttxSelectBox": {
+              "location": "import",
+              "path": "../tttx-select-box/tttx-select-box"
             }
           },
           "return": "Promise<void>"

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_3_0 formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_3_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_3_0 formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_3_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_3_0 id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_3_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_3_0 id='form' formSchema='${JSON.stringify(args.formSchema)}' data='${JSON.stringify(args.data)}'></tttx-form_1_3_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_3_0 id='form' formSchema='${JSON.stringify(args.formSchema)}'></tttx-form_1_3_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_3_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_3_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_3_0"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

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

@@ -10,26 +10,26 @@ export default {
   decorators: [withActions],
 };
 const TemplateStringList = ({ data }) => `
-    <tttx-list_1_2_0
+    <tttx-list_1_3_0
         data='${JSON.stringify(data)}'
         id='list'
         name='stringList'
-    ></tttx-list_1_2_0>
+    ></tttx-list_1_3_0>
 `;
 export const BasicStringList = TemplateStringList.bind({});
 BasicStringList.args = {
   data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg"  color="green" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg"  color="green" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg" color="orange" /></span> Lee', clickable: true },
-    { element: '<span><tttx-icon_1_2_0 icon="egg" color="red" /></span> Ben' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg"  color="green" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg"  color="green" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg" color="orange" /></span> Lee', clickable: true },
+    { element: '<span><tttx-icon_1_3_0 icon="egg" color="red" /></span> Ben' },
   ],
 };
 const TemplateObjectList = ({ data }) => `
-    <tttx-list_1_2_0
+    <tttx-list_1_3_0
         id='objectList'
         name='objectList'
-    ></tttx-list_1_2_0>
+    ></tttx-list_1_3_0>
     <script>
         if(!objectList) {
             const objectList = document.getElementId('objectList');
@@ -40,17 +40,17 @@ const TemplateObjectList = ({ data }) => `
 export const BasicObjectList = TemplateObjectList.bind({});
 BasicObjectList.args = {
   data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg" color="red" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="add" /></span> Lee' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg" /></span> Ben' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg" /></span> Ben' },
   ],
 };
 const TemplateClickableList = ({ data }) => `
-    <tttx-list_1_2_0
+    <tttx-list_1_3_0
         id='clickableList'
         name='clickableList'
-    ></tttx-list_1_2_0>
+    ></tttx-list_1_3_0>
     <script>
         if(!clickableList) {
             const clickableList = document.getElementId('clickableList');
@@ -64,21 +64,21 @@ BasicClickableList.args = {
     {
       clickable: true,
       icon: 'chevron_right',
-      element: '<span><tttx-icon_1_2_0 icon="egg" /></span> Demulon 1,000,000',
+      element: '<span><tttx-icon_1_3_0 icon="egg" /></span> Demulon 1,000,000',
       rowData: '[{ "name": "Demulon 1,000,000" }]',
     },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg" color="red" /></span> Patrick' },
-    { clickable: false, icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="add" /></span> Lee ' },
-    { icon: 'chevron_right', element: '<span><tttx-icon_1_2_0 icon="egg" /></span> Ben' },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg" color="red" /></span> Patrick' },
+    { clickable: false, icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="add" /></span> Lee ' },
+    { icon: 'chevron_right', element: '<span><tttx-icon_1_3_0 icon="egg" /></span> Ben' },
   ],
 };
 const TemplateWorkerList = ({ data }) => `
-    <tttx-list_1_2_0
+    <tttx-list_1_3_0
         id='workersList'
         name='workersList'
-    ></tttx-list_1_2_0>
+    ></tttx-list_1_3_0>
     <script>
         if(!workersList) {
             const workersList = document.getElementId('workersList');
@@ -107,17 +107,17 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag_1_2_0 text="Driller" color="#F4DFFF"></tttx-tag_1_2_0>
-                    <tttx-tag_1_2_0 text="Offshore" color="#CEF4EB"></tttx-tag_1_2_0>
-                    <tttx-tag_1_2_0 text="3t Transform" color="#DDE6FA"></tttx-tag_1_2_0>
+                    <tttx-tag_1_3_0 text="Driller" color="#F4DFFF"></tttx-tag_1_3_0>
+                    <tttx-tag_1_3_0 text="Offshore" color="#CEF4EB"></tttx-tag_1_3_0>
+                    <tttx-tag_1_3_0 text="3t Transform" color="#DDE6FA"></tttx-tag_1_3_0>
                 </span>
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_2_0 icon="school" color="gray" /></span><span><tttx-icon_1_2_0 icon="check_circle" color="green" /></span> 80%
+                    <span><tttx-icon_1_3_0 icon="school" color="gray" /></span><span><tttx-icon_1_3_0 icon="check_circle" color="green" /></span> 80%
                 </span>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_2_0 icon="verified_user" color="gray" /></span><span><tttx-icon_1_2_0 icon="warning" color="orange" /></span> 60%
+                    <span><tttx-icon_1_3_0 icon="verified_user" color="gray" /></span><span><tttx-icon_1_3_0 icon="warning" color="orange" /></span> 60%
                 </span>
             </li>
         </ul>
@@ -145,17 +145,17 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag_1_2_0 text="Driller" color="#F4DFFF"></tttx-tag_1_2_0>
-                    <tttx-tag_1_2_0 text="Offshore" color="#CEF4EB"></tttx-tag_1_2_0>
-                    <tttx-tag_1_2_0 text="3t Transform" color="#DDE6FA"></tttx-tag_1_2_0>
+                    <tttx-tag_1_3_0 text="Driller" color="#F4DFFF"></tttx-tag_1_3_0>
+                    <tttx-tag_1_3_0 text="Offshore" color="#CEF4EB"></tttx-tag_1_3_0>
+                    <tttx-tag_1_3_0 text="3t Transform" color="#DDE6FA"></tttx-tag_1_3_0>
                 </span>
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_2_0 icon="school" color="gray" /></span><span><tttx-icon_1_2_0 icon="check_circle" color="green" /></span> 80%
+                    <span><tttx-icon_1_3_0 icon="school" color="gray" /></span><span><tttx-icon_1_3_0 icon="check_circle" color="green" /></span> 80%
                 </span>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_2_0 icon="verified_user" color="gray" /></span><span><tttx-icon_1_2_0 icon="warning" color="orange" /></span> 60%
+                    <span><tttx-icon_1_3_0 icon="verified_user" color="gray" /></span><span><tttx-icon_1_3_0 icon="warning" color="orange" /></span> 60%
                 </span>
             </li>
         </ul>
@@ -184,17 +184,17 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag_1_2_0 text="Driller" color="#F4DFFF"></tttx-tag_1_2_0>
-                    <tttx-tag_1_2_0 text="Offshore" color="#CEF4EB"></tttx-tag_1_2_0>
-                    <tttx-tag_1_2_0 text="3t Transform" color="#DDE6FA"></tttx-tag_1_2_0>
+                    <tttx-tag_1_3_0 text="Driller" color="#F4DFFF"></tttx-tag_1_3_0>
+                    <tttx-tag_1_3_0 text="Offshore" color="#CEF4EB"></tttx-tag_1_3_0>
+                    <tttx-tag_1_3_0 text="3t Transform" color="#DDE6FA"></tttx-tag_1_3_0>
                 </span>
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_2_0 icon="school" color="gray" /></span><span><tttx-icon_1_2_0 icon="check_circle" color="green" /></span> 80%
+                    <span><tttx-icon_1_3_0 icon="school" color="gray" /></span><span><tttx-icon_1_3_0 icon="check_circle" color="green" /></span> 80%
                 </span>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_2_0 icon="verified_user" color="gray" /></span><span><tttx-icon_1_2_0 icon="warning" color="orange" /></span> 60%
+                    <span><tttx-icon_1_3_0 icon="verified_user" color="gray" /></span><span><tttx-icon_1_3_0 icon="warning" color="orange" /></span> 60%
                 </span>
             </li>
         </ul>
@@ -224,17 +224,17 @@ WorkerList.args = {
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <tttx-tag_1_2_0 text="Driller" color="#F4DFFF"></tttx-tag_1_2_0>
-                    <tttx-tag_1_2_0 text="Offshore" color="#CEF4EB"></tttx-tag_1_2_0>
-                    <tttx-tag_1_2_0 text="3t Transform" color="#DDE6FA"></tttx-tag_1_2_0>
+                    <tttx-tag_1_3_0 text="Driller" color="#F4DFFF"></tttx-tag_1_3_0>
+                    <tttx-tag_1_3_0 text="Offshore" color="#CEF4EB"></tttx-tag_1_3_0>
+                    <tttx-tag_1_3_0 text="3t Transform" color="#DDE6FA"></tttx-tag_1_3_0>
                 </span>
             </li>
             <li>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_2_0 icon="school" color="gray" /></span><span><tttx-icon_1_2_0 icon="check_circle" color="green" /></span> 80%
+                    <span><tttx-icon_1_3_0 icon="school" color="gray" /></span><span><tttx-icon_1_3_0 icon="check_circle" color="green" /></span> 80%
                 </span>
                 <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
-                    <span><tttx-icon_1_2_0 icon="verified_user" color="gray" /></span><span><tttx-icon_1_2_0 icon="warning" color="orange" /></span> 60%
+                    <span><tttx-icon_1_3_0 icon="verified_user" color="gray" /></span><span><tttx-icon_1_3_0 icon="warning" color="orange" /></span> 60%
                 </span>
             </li>
         </ul>
@@ -249,9 +249,9 @@ WorkerList.args = {
       icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
-    <span><tttx-icon_1_2_0 icon="check_circle" color="green" /></span> 
+    <span><tttx-icon_1_3_0 icon="check_circle" color="green" /></span> 
     Qualification row 
-    <tttx-tag_1_2_0 text="Vantage" color="#D5D5D5"></tttx-tag_1_2_0>
+    <tttx-tag_1_3_0 text="Vantage" color="#D5D5D5"></tttx-tag_1_3_0>
     <span style="color: #757575;">Awarded:</span> <span style="color: #212121;">10 Jan 2022</span>
     <span style="color: #757575;">Expiry:</span> <span style="color: #212121;">10 Jan 2023</span>
 </div>
@@ -263,9 +263,9 @@ WorkerList.args = {
       icon: 'chevron_right',
       element: `
 <div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
-    <span><tttx-icon_1_2_0 icon="check_circle" color="green" /></span> 
+    <span><tttx-icon_1_3_0 icon="check_circle" color="green" /></span> 
     Qualification row 
-    <tttx-tag_1_2_0 text="Vantage" color="#D5D5D5"></tttx-tag_1_2_0>
+    <tttx-tag_1_3_0 text="Vantage" color="#D5D5D5"></tttx-tag_1_3_0>
     <span style="color: #757575;">Awarded:</span> <span style="color: #212121;">10 Jan 2022</span>
     <span style="color: #757575;">Expiry:</span> <span style="color: #212121;">10 Jan 2023</span>
 </div>