@3t-transform/threeteeui 0.1.65 → 0.1.67

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-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["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-tag.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-43af0e62.js');
+
+const tttxTagCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}button{cursor:pointer}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:inline-block}.tag{border-radius:20px;padding:4px;font-family:\"Roboto\", sans-serif;font-size:14px;font-weight:400}.tag span{margin-left:4px;margin-right:4px;color:#212121}.icon{height:18px;width:18px;font-weight:400}";
+
+const TttxTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.text = undefined;
+    this.color = '#d5d5d5';
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "tag", style: { 'background-color': this.color } }, index.h("span", null, this.text))));
+  }
+};
+TttxTag.style = tttxTagCss;
+
+exports.tttx_tag = TttxTag;

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-tag.cjs",[[1,"tttx-tag",{"text":[1],"color":[1]}]]],["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/collection-manifest.json

@@ -7,6 +7,7 @@
     "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js",
     "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
     "./components/atoms/tttx-qrcode/tttx-qrcode.js",
+    "./components/atoms/tttx-tag/tttx-tag.js",
     "./components/molecules/tttx-dialog-box/tttx-dialog-box.js",
     "./components/molecules/tttx-form/tttx-form.js",
     "./components/molecules/tttx-list/tttx-list.js",

package/dist/collection/components/atoms/tttx-tag/tttx-tag.css

@@ -0,0 +1,180 @@
+.material-symbols-rounded {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+
+button {
+  cursor: pointer;
+}
+
+.button {
+  font-family: Roboto, serif;
+  box-sizing: border-box;
+  height: 36px;
+  min-width: 36px;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: #212121;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.button-content {
+  display: block;
+  padding: 0 16px;
+}
+
+.icon-left,
+.icon-right {
+  margin-top: 4px;
+}
+
+.iconleft {
+  padding-left: 8px;
+}
+
+.iconleft .button-content {
+  padding-left: 4px;
+}
+
+.iconright {
+  padding-right: 8px;
+}
+
+.iconright .button-content {
+  padding-right: 4px;
+}
+
+.notext {
+  padding: 0 6px;
+}
+
+.button:active {
+  background: rgba(17, 17, 17, 0.2);
+  border: 1px solid #d5d5d5;
+}
+
+.primary {
+  background: #1479c6;
+  border: 1px solid #1479c6;
+  color: white;
+}
+
+.primary:active {
+  background: #1464a2;
+  border: 1px solid #1464a2;
+}
+
+.borderless {
+  background: transparent;
+  border: none;
+  color: #212121;
+}
+
+.borderless:active {
+  background: rgba(17, 17, 17, 0.2);
+  border: none;
+}
+
+.borderless-circle {
+  background: transparent;
+  border: none;
+  color: #212121;
+  border-radius: 50%;
+}
+
+.borderless-circle:active {
+  border: none;
+}
+
+.borderless-circle:focus {
+  border-color: transparent;
+}
+
+.danger {
+  background: #dc0000;
+  border: 1px solid #dc0000;
+  color: white;
+}
+
+.danger:active {
+  background: #b00000;
+  border: 1px solid #b00000;
+}
+
+.disabled {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+.disabled:active {
+  background: #aeaeae;
+  border: none;
+  color: #4c4c4c;
+  cursor: not-allowed;
+}
+
+@media (hover: hover) {
+  .button:hover {
+    background: rgba(17, 17, 17, 0.1);
+    border: 1px solid #d5d5d5;
+  }
+
+  .primary:hover {
+    background: #146eb3;
+    border: 1px solid #146eb3;
+  }
+
+  .borderless:hover {
+    background: rgba(17, 17, 17, 0.1);
+    border: none;
+  }
+
+  .borderless-circle:hover {
+    background: rgba(17, 17, 17, 0.1);
+    border: none;
+  }
+
+  .danger:hover {
+    background: #c60000;
+    border: 1px solid #c60000;
+  }
+
+  .disabled:hover {
+    background: #aeaeae;
+    border: none;
+    color: #4c4c4c;
+    cursor: not-allowed;
+  }
+}
+:host {
+  display: inline-block;
+}
+
+.tag {
+  border-radius: 20px;
+  padding: 4px;
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.tag span {
+  margin-left: 4px;
+  margin-right: 4px;
+  color: #212121;
+}
+
+.icon {
+  height: 18px;
+  width: 18px;
+  font-weight: 400;
+}

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

@@ -0,0 +1,62 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Host, h } from '@stencil/core';
+export class TttxTag {
+  constructor() {
+    this.text = undefined;
+    this.color = '#d5d5d5';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "tag", style: { 'background-color': this.color } }, h("span", null, this.text))));
+  }
+  static get is() { return "tttx-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-tag.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-tag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'#d5d5d5'"
+      }
+    };
+  }
+}

package/dist/collection/components/atoms/tttx-tag/tttx-tag.stories.js

@@ -0,0 +1,39 @@
+export default {
+  title: 'Atoms/Tag',
+  component: 'tttx-tag',
+  argTypes: {
+    text: {
+      control: { type: 'text' },
+      default: 'tag',
+    },
+    color: {
+      control: { type: 'text' },
+      default: '#d5d5d5',
+    }
+  },
+};
+const Template = ({ text, color }) => {
+  return `<tttx-tag text="${text}" color="${color}" ></tttx-tag>`;
+};
+export const tag = Template.bind({});
+tag.args = {
+  text: 'tag',
+  color: '#d5d5d5',
+};
+const tagTemplates = () => `
+    <h2>Default</h2>
+    <tttx-tag text="Default" color="#d5d5d5"></tttx-tag>
+    <hr />
+    <h2>Critical</h2>
+    <tttx-tag text="Critical" color="#f2bebe"></tttx-tag>
+    <hr />
+    <h2>Warning</h2>
+    <tttx-tag text="Warning" color="#f9e1be"></tttx-tag>
+    <hr />
+    <h2>Success</h2>
+    <tttx-tag text="Success" color="#e4ebc9"></tttx-tag>
+    <hr />
+    <h2>Info</h2>
+    <tttx-tag text="Info" color="#c2daee"></tttx-tag>
+`;
+export const tags = tagTemplates.bind({});

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"
+      }];
+  }
 }