@3t-transform/threeteeui 0.1.65 → 0.1.66

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
   });
 };
 

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

@@ -6,37 +6,78 @@ const index = require('./index-43af0e62.js');
 const domsanitiser_options = require('./domsanitiser.options-1dfa7205.js');
 require('./_commonjsHelpers-537d719a.js');
 
-const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight: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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px;display:flex;align-items:center}.item:first-of-type{border-top:1px solid #d5d5d5}.item.clickable:hover{cursor:pointer}.item.clickable:active{background-color:#e6e6e6}.item:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center}";
+const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight: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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.clickable:active{background-color:#e6e6e6}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
 
 const TttxList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.rowClick = index.createEvent(this, "listRowClick", 7);
+    this.rowCheckboxClick = index.createEvent(this, "listRowCheckboxClick", 7);
     this.data = undefined;
+    this._data = undefined;
     this.name = undefined;
   }
+  onDataChange() {
+    if (!this.data) {
+      return;
+    }
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = [...this.data];
+    }
+    for (const data of this._data) {
+      if (data.hasCheckbox && data.checked === undefined) {
+        data.checked = false;
+      }
+    }
+  }
+  componentWillLoad() {
+    // dynamic constructor: any props can be added later
+    this.onDataChange();
+  }
+  onRowCheckboxHandler(event, item) {
+    event.stopPropagation();
+    if (!item.rowData)
+      return;
+    if (item.hasCheckbox) {
+      item.checked = !item.checked;
+    }
+    // re-render component by updating its state
+    this._data = [...this._data];
+    this.rowCheckboxClick.emit({ key: item.key, name: this.name, data: item.rowData, checked: item.checked });
+  }
   onRowClickHandler(item) {
     if (!item.clickable || !item.rowData)
       return;
-    this.rowClick.emit({ name: this.name, data: item.rowData });
+    this.rowClick.emit({ key: item.key, name: this.name, data: item.rowData });
+  }
+  async setAllCheckboxes(check) {
+    for (const data of this._data) {
+      if (data.hasCheckbox) {
+        data.checked = check;
+      }
+    }
+    // re-render component by updating its state
+    this._data = [...this._data];
   }
   renderListItem(item) {
     const cleanHTML = domsanitiser_options.purify.sanitize(item.element, domsanitiser_options.domSanitiserOptions);
     return (index.h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
         this.onRowClickHandler(item);
-      } }, item.element && index.h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && index.h("tttx-icon", { class: "align-right ", icon: item.icon })));
+      } }, item.hasCheckbox && (index.h("div", { class: "checkbox" }, index.h("tttx-icon", { icon: item.checked ? 'check_box' : 'check_box_outline_blank', color: item.checked ? 'blue' : 'grey', onClick: event => {
+        this.onRowCheckboxHandler(event, item);
+      } }))), item.element && index.h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && (index.h("span", { class: "icons" }, index.h("tttx-icon", { class: "align-right", icon: item.icon, color: 'black' })))));
   }
   render() {
-    if (!this.data)
+    if (!this._data)
       return;
-    if (typeof this.data === 'string') {
-      this._data = JSON.parse(this.data);
-    }
-    else {
-      this._data = this.data;
-    }
     return index.h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
   }
+  static get watchers() { return {
+    "data": ["onDataChange"]
+  }; }
 };
 TttxList.style = tttxListCss;
 

package/dist/cjs/tttx.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-dialog-box.cjs",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box.cjs",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view.cjs",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter.cjs",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter.cjs",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode.cjs",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar.cjs",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -29,26 +29,40 @@
   padding: 0;
 }
 
-.item {
+li {
+  display: flex;
+  align-items: flex-start;
+}
+li.item {
   list-style: none;
   margin: 0;
   padding: 8px;
   border-bottom: 1px solid #d5d5d5;
   min-height: 36px;
-  /* center the contents vertically */
-  display: flex;
-  align-items: center;
 }
-.item:first-of-type {
+li.item:first-of-type {
   border-top: 1px solid #d5d5d5;
 }
-.item.clickable:hover {
+li.item.clickable:hover {
   cursor: pointer;
 }
-.item.clickable:active {
+li.item.clickable:active {
   background-color: #e6e6e6;
 }
-.item:hover {
+li.item .icons {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  align-items: center;
+  height: 36px;
+}
+li.item .icons tttx-icon:hover {
+  cursor: pointer;
+}
+li.item .icons * {
+  display: flex;
+}
+li:hover {
   background-color: #1111110D;
 }
 
@@ -59,4 +73,11 @@
 .item-content {
   display: flex;
   align-items: center;
+  flex-grow: 2;
+  min-height: 36px;
+}
+
+.checkbox {
+  padding: 6px;
+  margin-left: -8px;
 }

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

@@ -5,28 +5,65 @@ import domSanitiserOptions from '../../../shared/domsanitiser.options';
 export class TttxList {
   constructor() {
     this.data = undefined;
+    this._data = undefined;
     this.name = undefined;
   }
+  onDataChange() {
+    if (!this.data) {
+      return;
+    }
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = [...this.data];
+    }
+    for (const data of this._data) {
+      if (data.hasCheckbox && data.checked === undefined) {
+        data.checked = false;
+      }
+    }
+  }
+  componentWillLoad() {
+    // dynamic constructor: any props can be added later
+    this.onDataChange();
+  }
+  onRowCheckboxHandler(event, item) {
+    event.stopPropagation();
+    if (!item.rowData)
+      return;
+    if (item.hasCheckbox) {
+      item.checked = !item.checked;
+    }
+    // re-render component by updating its state
+    this._data = [...this._data];
+    this.rowCheckboxClick.emit({ key: item.key, name: this.name, data: item.rowData, checked: item.checked });
+  }
   onRowClickHandler(item) {
     if (!item.clickable || !item.rowData)
       return;
-    this.rowClick.emit({ name: this.name, data: item.rowData });
+    this.rowClick.emit({ key: item.key, name: this.name, data: item.rowData });
+  }
+  async setAllCheckboxes(check) {
+    for (const data of this._data) {
+      if (data.hasCheckbox) {
+        data.checked = check;
+      }
+    }
+    // re-render component by updating its state
+    this._data = [...this._data];
   }
   renderListItem(item) {
     const cleanHTML = DOMPurify.sanitize(item.element, domSanitiserOptions);
     return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
         this.onRowClickHandler(item);
-      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
+      } }, item.hasCheckbox && (h("div", { class: "checkbox" }, h("tttx-icon", { 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", { class: "align-right", icon: item.icon, color: 'black' })))));
   }
   render() {
-    if (!this.data)
+    if (!this._data)
       return;
-    if (typeof this.data === 'string') {
-      this._data = JSON.parse(this.data);
-    }
-    else {
-      this._data = this.data;
-    }
     return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
   }
   static get is() { return "tttx-list"; }
@@ -84,6 +121,11 @@ export class TttxList {
       }
     };
   }
+  static get states() {
+    return {
+      "_data": {}
+    };
+  }
   static get events() {
     return [{
         "method": "rowClick",
@@ -96,10 +138,54 @@ export class TttxList {
           "text": ""
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{ key: string; name: string; data: any }",
+          "resolved": "{ key: string; name: string; data: any; }",
+          "references": {}
+        }
+      }, {
+        "method": "rowCheckboxClick",
+        "name": "listRowCheckboxClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ key: string; name: string; data: any; checked: boolean }",
+          "resolved": "{ key: string; name: string; data: any; checked: boolean; }",
           "references": {}
         }
       }];
   }
+  static get methods() {
+    return {
+      "setAllCheckboxes": {
+        "complexType": {
+          "signature": "(check: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "onDataChange"
+      }];
+  }
 }

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

@@ -4,7 +4,7 @@ export default {
   component: 'tttx-list',
   parameters: {
     actions: {
-      handles: ['listRowClick'],
+      handles: ['listRowClick', 'listRowCheckboxClick'],
     },
   },
   decorators: [withActions],
@@ -21,7 +21,7 @@ BasicStringList.args = {
   data: [
     { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Demulon 1,000,000' },
     { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="orange" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="orange" /></span> Lee', clickable: true },
     { element: '<span><tttx-icon icon="egg" color="red" /></span> Ben' },
   ],
 };
@@ -61,7 +61,12 @@ const TemplateClickableList = ({ data }) => `
 export const BasicClickableList = TemplateClickableList.bind({});
 BasicClickableList.args = {
   data: [
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000', rowData: '[{ "name": "Demulon 1,000,000" }]' },
+    {
+      clickable: true,
+      icon: 'chevron_right',
+      element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000',
+      rowData: '[{ "name": "Demulon 1,000,000" }]',
+    },
     { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
     { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
     { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
@@ -69,3 +74,73 @@ BasicClickableList.args = {
     { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
   ],
 };
+const TemplateWorkerList = ({ data }) => `
+    <tttx-list
+        id='workersList'
+        name='workersList'
+    ></tttx-list>
+    <script>
+        if(!workersList) {
+            const workersList = document.getElementId('workersList');
+        }
+        workersList.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const WorkerList = TemplateWorkerList.bind({});
+WorkerList.args = {
+  data: [
+    {
+      key: '54c5b6fd-12d1-4794-92cb-93f4c2e1a892',
+      hasCheckbox: true,
+      clickable: true,
+      icon: 'chevron_right',
+      element: `
+<div style="display: flex; flex-direction: row; align-items: flex-start;">
+    <label>
+        <ul style="list-style-type: none; padding: 0; margin: 0;">
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center;">
+                    <a style="font-weight: 500; color: #146EB3; text-decoration: none;" href>Worker name</a>
+                </span>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 4px;">
+                    <span style="color: #757575;">ID:</span> <span style="color: #212121;">9125</span>
+                </span>
+            </li>
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span style="font-size: 14px; background-color: #EABFFF; border-radius: 20px; padding: 4px 8px; display: inline-flex; align-items: center;">Driller</span>
+                    <span style="font-size: 14px; background-color: #9BE8D5; border-radius: 20px; padding: 4px 8px; display: inline-flex; align-items: center;">Offshore</span>
+                    <span style="font-size: 14px; background-color: #B9CCF5; border-radius: 20px; padding: 4px 8px; display: inline-flex; align-items: center;">3t Transform</span>
+                </span>
+            </li>
+            <li>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span><tttx-icon icon="school" color="gray" /></span><span><tttx-icon icon="check_circle" color="green" /></span> 80%
+                </span>
+                <span style="padding: 8px; display: inline-flex; align-items: center; gap: 8px;">
+                    <span><tttx-icon icon="verified_user" color="gray" /></span><span><tttx-icon icon="warning" color="orange" /></span> 60%
+                </span>
+            </li>
+        </ul>
+    </label>
+</div>
+`,
+      rowData: '{ "name": "Worker name", "id": 9125, "groups": ["Driller", "Offshore", "3t Transform"], "compliance": 80, "competence": 60 }',
+    },
+    {
+      key: 'a5df3398-2bd0-4e16-83a1-b962b74dc712',
+      clickable: true,
+      icon: 'chevron_right',
+      element: `
+<div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
+    <span><tttx-icon icon="check_circle" color="green" /></span> 
+    Qualification row 
+    <span style="font-size: 14px; background-color: #D5D5D5; border-radius: 20px; padding: 4px 8px; display: inline-flex; align-items: center;">Vantage</span>
+    <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>
+`,
+      rowData: 'any data',
+    },
+  ],
+};

package/dist/components/tttx-list.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options.js';
 import { d as defineCustomElement$2 } from './tttx-icon2.js';
 
-const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight: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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px;display:flex;align-items:center}.item:first-of-type{border-top:1px solid #d5d5d5}.item.clickable:hover{cursor:pointer}.item.clickable:active{background-color:#e6e6e6}.item:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center}";
+const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight: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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.clickable:active{background-color:#e6e6e6}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
 
 const TttxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -10,35 +10,78 @@ const TttxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.rowClick = createEvent(this, "listRowClick", 7);
+    this.rowCheckboxClick = createEvent(this, "listRowCheckboxClick", 7);
     this.data = undefined;
+    this._data = undefined;
     this.name = undefined;
   }
+  onDataChange() {
+    if (!this.data) {
+      return;
+    }
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = [...this.data];
+    }
+    for (const data of this._data) {
+      if (data.hasCheckbox && data.checked === undefined) {
+        data.checked = false;
+      }
+    }
+  }
+  componentWillLoad() {
+    // dynamic constructor: any props can be added later
+    this.onDataChange();
+  }
+  onRowCheckboxHandler(event, item) {
+    event.stopPropagation();
+    if (!item.rowData)
+      return;
+    if (item.hasCheckbox) {
+      item.checked = !item.checked;
+    }
+    // re-render component by updating its state
+    this._data = [...this._data];
+    this.rowCheckboxClick.emit({ key: item.key, name: this.name, data: item.rowData, checked: item.checked });
+  }
   onRowClickHandler(item) {
     if (!item.clickable || !item.rowData)
       return;
-    this.rowClick.emit({ name: this.name, data: item.rowData });
+    this.rowClick.emit({ key: item.key, name: this.name, data: item.rowData });
+  }
+  async setAllCheckboxes(check) {
+    for (const data of this._data) {
+      if (data.hasCheckbox) {
+        data.checked = check;
+      }
+    }
+    // re-render component by updating its state
+    this._data = [...this._data];
   }
   renderListItem(item) {
     const cleanHTML = purify.sanitize(item.element, domSanitiserOptions);
     return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
         this.onRowClickHandler(item);
-      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
+      } }, item.hasCheckbox && (h("div", { class: "checkbox" }, h("tttx-icon", { 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", { class: "align-right", icon: item.icon, color: 'black' })))));
   }
   render() {
-    if (!this.data)
+    if (!this._data)
       return;
-    if (typeof this.data === 'string') {
-      this._data = JSON.parse(this.data);
-    }
-    else {
-      this._data = this.data;
-    }
     return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
   }
+  static get watchers() { return {
+    "data": ["onDataChange"]
+  }; }
   static get style() { return tttxListCss; }
 }, [1, "tttx-list", {
     "data": [1025],
-    "name": [1]
+    "name": [1],
+    "_data": [32],
+    "setAllCheckboxes": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
   });
 };
 

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

@@ -2,37 +2,78 @@ import { r as registerInstance, c as createEvent, h } from './index-1c711ead.js'
 import { p as purify, d as domSanitiserOptions } from './domsanitiser.options-97a33389.js';
 import './_commonjsHelpers-9943807e.js';
 
-const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight: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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px;display:flex;align-items:center}.item:first-of-type{border-top:1px solid #d5d5d5}.item.clickable:hover{cursor:pointer}.item.clickable:active{background-color:#e6e6e6}.item:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center}";
+const tttxListCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight: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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.clickable:active{background-color:#e6e6e6}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}";
 
 const TttxList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.rowClick = createEvent(this, "listRowClick", 7);
+    this.rowCheckboxClick = createEvent(this, "listRowCheckboxClick", 7);
     this.data = undefined;
+    this._data = undefined;
     this.name = undefined;
   }
+  onDataChange() {
+    if (!this.data) {
+      return;
+    }
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = [...this.data];
+    }
+    for (const data of this._data) {
+      if (data.hasCheckbox && data.checked === undefined) {
+        data.checked = false;
+      }
+    }
+  }
+  componentWillLoad() {
+    // dynamic constructor: any props can be added later
+    this.onDataChange();
+  }
+  onRowCheckboxHandler(event, item) {
+    event.stopPropagation();
+    if (!item.rowData)
+      return;
+    if (item.hasCheckbox) {
+      item.checked = !item.checked;
+    }
+    // re-render component by updating its state
+    this._data = [...this._data];
+    this.rowCheckboxClick.emit({ key: item.key, name: this.name, data: item.rowData, checked: item.checked });
+  }
   onRowClickHandler(item) {
     if (!item.clickable || !item.rowData)
       return;
-    this.rowClick.emit({ name: this.name, data: item.rowData });
+    this.rowClick.emit({ key: item.key, name: this.name, data: item.rowData });
+  }
+  async setAllCheckboxes(check) {
+    for (const data of this._data) {
+      if (data.hasCheckbox) {
+        data.checked = check;
+      }
+    }
+    // re-render component by updating its state
+    this._data = [...this._data];
   }
   renderListItem(item) {
     const cleanHTML = purify.sanitize(item.element, domSanitiserOptions);
     return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
         this.onRowClickHandler(item);
-      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
+      } }, item.hasCheckbox && (h("div", { class: "checkbox" }, h("tttx-icon", { 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", { class: "align-right", icon: item.icon, color: 'black' })))));
   }
   render() {
-    if (!this.data)
+    if (!this._data)
       return;
-    if (typeof this.data === 'string') {
-      this._data = JSON.parse(this.data);
-    }
-    else {
-      this._data = this.data;
-    }
     return h("ul", { class: "list" }, this._data.map((item) => this.renderListItem(item)));
   }
+  static get watchers() { return {
+    "data": ["onDataChange"]
+  }; }
 };
 TttxList.style = tttxListCss;
 

package/dist/esm/tttx.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
+  return bootstrapLazy([["tttx-dialog-box",[[1,"tttx-dialog-box",{"data":[1025],"size":[1],"open":[1028],"elementSize":[32]},[[9,"resize","handleResize"]]]]],["tttx-select-box",[[1,"tttx-select-box",{"optionsData":[1,"options-data"],"label":[1],"inline":[4],"placeholder":[1],"searchEnabled":[4,"search-enabled"],"open":[32],"selectedItem":[32],"searchTerm":[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["tttx-tree-view",[[1,"tttx-tree-view",{"data":[1040],"treeData":[32]}]]],["tttx-filter",[[1,"tttx-filter",{"filterKey":[1,"filter-key"],"filterOptions":[1,"filter-options"],"showSelectAll":[4,"show-select-all"],"showSearchField":[4,"show-search-field"],"showOptionIcons":[4,"show-option-icons"],"filterButtonStyle":[1,"filter-button-style"],"filterHeader":[1,"filter-header"],"defaultFilterOptions":[1,"default-filter-options"],"popoverWidth":[1,"popover-width"],"showPopover":[32],"displayedFilterSettings":[32],"selectedFilters":[32],"filterSearchTerm":[32],"allSelected":[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1],"_data":[32],"setAllCheckboxes":[64]}]]],["tttx-sorter",[[1,"tttx-sorter",{"sorterKey":[1,"sorter-key"],"defaultSortDirection":[1,"default-sort-direction"],"fieldOptionsData":[1,"field-options-data"],"defaultOption":[1,"default-option"],"selectedField":[32],"sortDirection":[32],"dropdownExpand":[32],"dropdownOptions":[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"data":[1032],"submit":[64]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-qrcode",[[1,"tttx-qrcode",{"link":[1025],"size":[1026]}]]],["tttx-toolbar",[[1,"tttx-toolbar",{"border":[4]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"secondarylabel":[1],"showerrormsg":[4],"showerrorbubble":[4],"errormsg":[1],"iconleft":[1],"iconleftcolor":[1],"iconright":[1],"iconrightcolor":[1],"inputicon":[1],"inputiconcolor":[1],"inline":[4],"inputautocapitalize":[1],"inputautofocus":[4],"inputkeyhint":[1],"inputindex":[8],"inputtitle":[1],"autocomplete":[1],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"iconcolor":[1025],"design":[1]}]]]], options);
 });

package/dist/tttx/p-40c66a2e.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as e}from"./p-c544551b.js";import{p as o,d as s}from"./p-5ed38d61.js";import"./p-112455b1.js";const n=class{constructor(e){i(this,e),this.rowClick=t(this,"listRowClick",7),this.rowCheckboxClick=t(this,"listRowCheckboxClick",7),this.data=void 0,this._data=void 0,this.name=void 0}onDataChange(){if(this.data){this._data="string"==typeof this.data?JSON.parse(this.data):[...this.data];for(const i of this._data)i.hasCheckbox&&void 0===i.checked&&(i.checked=!1)}}componentWillLoad(){this.onDataChange()}onRowCheckboxHandler(i,t){i.stopPropagation(),t.rowData&&(t.hasCheckbox&&(t.checked=!t.checked),this._data=[...this._data],this.rowCheckboxClick.emit({key:t.key,name:this.name,data:t.rowData,checked:t.checked}))}onRowClickHandler(i){i.clickable&&i.rowData&&this.rowClick.emit({key:i.key,name:this.name,data:i.rowData})}async setAllCheckboxes(i){for(const t of this._data)t.hasCheckbox&&(t.checked=i);this._data=[...this._data]}renderListItem(i){const t=o.sanitize(i.element,s);return e("li",{class:"item  "+(i.clickable?"clickable":""),onClick:()=>{this.onRowClickHandler(i)}},i.hasCheckbox&&e("div",{class:"checkbox"},e("tttx-icon",{icon:i.checked?"check_box":"check_box_outline_blank",color:i.checked?"blue":"grey",onClick:t=>{this.onRowCheckboxHandler(t,i)}})),i.element&&e("span",{class:"item-content",innerHTML:t}),i.icon&&e("span",{class:"icons"},e("tttx-icon",{class:"align-right",icon:i.icon,color:"black"})))}render(){if(this._data)return e("ul",{class:"list"},this._data.map((i=>this.renderListItem(i))))}static get watchers(){return{data:["onDataChange"]}}};n.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight: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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}li{display:flex;align-items:flex-start}li.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px}li.item:first-of-type{border-top:1px solid #d5d5d5}li.item.clickable:hover{cursor:pointer}li.item.clickable:active{background-color:#e6e6e6}li.item .icons{display:flex;justify-content:flex-end;flex-grow:1;align-items:center;height:36px}li.item .icons tttx-icon:hover{cursor:pointer}li.item .icons *{display:flex}li:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center;flex-grow:2;min-height:36px}.checkbox{padding:6px;margin-left:-8px}';export{n as tttx_list}

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-c544551b.js";export{s as setNonce}from"./p-c544551b.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-64479f02",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-ff38d9f3",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-2f066b53",[[1,"tttx-tree-view",{data:[1040],treeData:[32]}]]],["p-a658e1ac",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["p-cec36804",[[1,"tttx-list",{data:[1025],name:[1]}]]],["p-225e6fa6",[[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["p-57621fdb",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-f80ab1d8",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-3467c62e",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-cff962bf",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-4879a614",[[1,"tttx-toolbar",{border:[4]}]]],["p-53fa8b4d",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-e6bbdae3",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-3c7e11d9",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));
+import{p as e,b as t}from"./p-c544551b.js";export{s as setNonce}from"./p-c544551b.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((e=>t([["p-64479f02",[[1,"tttx-dialog-box",{data:[1025],size:[1],open:[1028],elementSize:[32]},[[9,"resize","handleResize"]]]]],["p-ff38d9f3",[[1,"tttx-select-box",{optionsData:[1,"options-data"],label:[1],inline:[4],placeholder:[1],searchEnabled:[4,"search-enabled"],open:[32],selectedItem:[32],searchTerm:[32]},[[0,"closeSelectBox","handleCloseSelectBox"],[0,"blur","handleBlur"]]]]],["p-2f066b53",[[1,"tttx-tree-view",{data:[1040],treeData:[32]}]]],["p-a658e1ac",[[1,"tttx-filter",{filterKey:[1,"filter-key"],filterOptions:[1,"filter-options"],showSelectAll:[4,"show-select-all"],showSearchField:[4,"show-search-field"],showOptionIcons:[4,"show-option-icons"],filterButtonStyle:[1,"filter-button-style"],filterHeader:[1,"filter-header"],defaultFilterOptions:[1,"default-filter-options"],popoverWidth:[1,"popover-width"],showPopover:[32],displayedFilterSettings:[32],selectedFilters:[32],filterSearchTerm:[32],allSelected:[32]},[[0,"closeFilter","handleCloseFilter"]]]]],["p-40c66a2e",[[1,"tttx-list",{data:[1025],name:[1],_data:[32],setAllCheckboxes:[64]}]]],["p-225e6fa6",[[1,"tttx-sorter",{sorterKey:[1,"sorter-key"],defaultSortDirection:[1,"default-sort-direction"],fieldOptionsData:[1,"field-options-data"],defaultOption:[1,"default-option"],selectedField:[32],sortDirection:[32],dropdownExpand:[32],dropdownOptions:[32]},[[0,"closeSorter","handleCloseSorter"]]]]],["p-57621fdb",[[1,"tttx-form",{formschema:[1032],data:[1032],submit:[64]}]]],["p-f80ab1d8",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-3467c62e",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-cff962bf",[[1,"tttx-qrcode",{link:[1025],size:[1026]}]]],["p-4879a614",[[1,"tttx-toolbar",{border:[4]}]]],["p-53fa8b4d",[[1,"tttx-icon",{icon:[1],color:[1]}]]],["p-e6bbdae3",[[2,"tttx-standalone-input",{label:[1],secondarylabel:[1],showerrormsg:[4],showerrorbubble:[4],errormsg:[1],iconleft:[1],iconleftcolor:[1],iconright:[1],iconrightcolor:[1],inputicon:[1],inputiconcolor:[1],inline:[4],inputautocapitalize:[1],inputautofocus:[4],inputkeyhint:[1],inputindex:[8],inputtitle:[1],autocomplete:[1],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-3c7e11d9",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],iconcolor:[1025],design:[1]}]]]],e)));

package/dist/types/components/molecules/tttx-list/interfaces.d.ts

@@ -1,6 +1,9 @@
 export interface ListItem {
-    element: string;
-    icon: string;
-    clickable: boolean;
-    rowData: any;
+    key?: string;
+    hasCheckbox?: boolean;
+    checked?: boolean;
+    element?: string;
+    icon?: string;
+    clickable?: boolean;
+    rowData?: any;
 }

package/dist/types/components/molecules/tttx-list/tttx-list.d.ts

@@ -2,10 +2,24 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { ListItem } from './interfaces';
 export declare class TttxList {
   data: string | ListItem[];
+  _data: ListItem[];
   name: string;
-  rowClick: EventEmitter;
-  private _data;
+  onDataChange(): void;
+  componentWillLoad(): void;
+  rowClick: EventEmitter<{
+    key: string;
+    name: string;
+    data: any;
+  }>;
+  rowCheckboxClick: EventEmitter<{
+    key: string;
+    name: string;
+    data: any;
+    checked: boolean;
+  }>;
+  onRowCheckboxHandler(event: PointerEvent, item: ListItem): void;
   onRowClickHandler(item: ListItem): void;
+  setAllCheckboxes(check: boolean): Promise<void>;
   renderListItem(item: ListItem): any;
   render(): any;
 }

package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts

@@ -12,3 +12,4 @@ export default _default;
 export declare const BasicStringList: any;
 export declare const BasicObjectList: any;
 export declare const BasicClickableList: any;
+export declare const WorkerList: any;

package/dist/types/components.d.ts

@@ -52,6 +52,7 @@ export namespace Components {
     interface TttxList {
         "data": string | ListItem[];
         "name": string;
+        "setAllCheckboxes": (check: boolean) => Promise<void>;
     }
     interface TttxLoadingSpinner {
         "loadingMessage": boolean;
@@ -305,7 +306,8 @@ declare namespace LocalJSX {
     interface TttxList {
         "data"?: string | ListItem[];
         "name"?: string;
-        "onListRowClick"?: (event: TttxListCustomEvent<any>) => void;
+        "onListRowCheckboxClick"?: (event: TttxListCustomEvent<{ key: string; name: string; data: any; checked: boolean }>) => void;
+        "onListRowClick"?: (event: TttxListCustomEvent<{ key: string; name: string; data: any }>) => void;
     }
     interface TttxLoadingSpinner {
         "loadingMessage"?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.1.65",
+    "version": "0.1.66",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/tttx/p-cec36804.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as e}from"./p-c544551b.js";import{p as s,d as o}from"./p-5ed38d61.js";import"./p-112455b1.js";const n=class{constructor(e){t(this,e),this.rowClick=i(this,"listRowClick",7),this.data=void 0,this.name=void 0}onRowClickHandler(t){t.clickable&&t.rowData&&this.rowClick.emit({name:this.name,data:t.rowData})}renderListItem(t){const i=s.sanitize(t.element,o);return e("li",{class:"item  "+(t.clickable?"clickable":""),onClick:()=>{this.onRowClickHandler(t)}},t.element&&e("span",{class:"item-content",innerHTML:i}),t.icon&&e("tttx-icon",{class:"align-right ",icon:t.icon}))}render(){if(this.data)return this._data="string"==typeof this.data?JSON.parse(this.data):this.data,e("ul",{class:"list"},this._data.map((t=>this.renderListItem(t))))}};n.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded{font-family:"Material Symbols Rounded", sans-serif;font-weight: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}:host{display:flex;flex-direction:column}.list{margin:0;padding:0}.item{list-style:none;margin:0;padding:8px;border-bottom:1px solid #d5d5d5;min-height:36px;display:flex;align-items:center}.item:first-of-type{border-top:1px solid #d5d5d5}.item.clickable:hover{cursor:pointer}.item.clickable:active{background-color:#e6e6e6}.item:hover{background-color:#1111110D}.align-right{margin-left:auto}.item-content{display:flex;align-items:center}';export{n as tttx_list}