@3t-transform/threeteeui 0.1.65 → 0.1.67

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;">
+                    <tttx-tag text="Driller" color="#EABFFF"></tttx-tag>
+                    <tttx-tag text="Offshore" color="#9BE8D5"></tttx-tag>
+                    <tttx-tag text="3t Transform" color="#B9CCF5"></tttx-tag>
+                </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 
+    <tttx-tag text="Vantage" color="#D5D5D5"></tttx-tag>
+    <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/index.d.ts

@@ -11,6 +11,7 @@ export { TttxQrCode as TttxQrcode } from '../types/components/atoms/tttx-qrcode/
 export { TttxSelectBox as TttxSelectBox } from '../types/components/molecules/tttx-select-box/tttx-select-box';
 export { TttxSorter as TttxSorter } from '../types/components/molecules/tttx-sorter/tttx-sorter';
 export { TttxInput as TttxStandaloneInput } from '../types/components/molecules/tttx-standalone-input/tttx-standalone-input';
+export { TttxTag as TttxTag } from '../types/components/atoms/tttx-tag/tttx-tag';
 export { TttxToolbar as TttxToolbar } from '../types/components/molecules/tttx-toolbar/tttx-toolbar';
 export { TttxTreeView as TttxTreeView } from '../types/components/molecules/tttx-tree-view/tttx-tree-view';
 

package/dist/components/index.js

@@ -11,5 +11,6 @@ export { TttxQrcode, defineCustomElement as defineCustomElementTttxQrcode } from
 export { TttxSelectBox, defineCustomElement as defineCustomElementTttxSelectBox } from './tttx-select-box.js';
 export { TttxSorter, defineCustomElement as defineCustomElementTttxSorter } from './tttx-sorter.js';
 export { TttxStandaloneInput, defineCustomElement as defineCustomElementTttxStandaloneInput } from './tttx-standalone-input.js';
+export { TttxTag, defineCustomElement as defineCustomElementTttxTag } from './tttx-tag.js';
 export { TttxToolbar, defineCustomElement as defineCustomElementTttxToolbar } from './tttx-toolbar.js';
 export { TttxTreeView, defineCustomElement as defineCustomElementTttxTreeView } from './tttx-tree-view.js';

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/components/tttx-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TttxTag extends Components.TttxTag, HTMLElement {}
+export const TttxTag: {
+  prototype: TttxTag;
+  new (): TttxTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tttx-tag.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 style() { return tttxTagCss; }
+}, [1, "tttx-tag", {
+    "text": [1],
+    "color": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-tag"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-tag":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxTag$1);
+      }
+      break;
+  } });
+}
+
+const TttxTag = TttxTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxTag, defineCustomElement };

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

@@ -0,0 +1,17 @@
+import { r as registerInstance, h, H as Host } from './index-1c711ead.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) {
+    registerInstance(this, hostRef);
+    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))));
+  }
+};
+TttxTag.style = tttxTagCss;
+
+export { TttxTag as tttx_tag };

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

@@ -0,0 +1 @@
+import{r,h as o,H as e}from"./p-c544551b.js";const n=class{constructor(o){r(this,o),this.text=void 0,this.color="#d5d5d5"}render(){return o(e,null,o("div",{class:"tag",style:{"background-color":this.color}},o("span",null,this.text)))}};n.style='.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}';export{n as tttx_tag}

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-68680d65",[[1,"tttx-tag",{text:[1],color:[1]}]]],["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/atoms/tttx-tag/tttx-tag.d.ts

@@ -0,0 +1,5 @@
+export declare class TttxTag {
+  text: string;
+  color: string;
+  render(): any;
+}

package/dist/types/components/atoms/tttx-tag/tttx-tag.stories.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    text: {
+      control: {
+        type: string;
+      };
+      default: string;
+    };
+    color: {
+      control: {
+        type: string;
+      };
+      default: string;
+    };
+  };
+};
+export default _default;
+export declare const tag: any;
+export declare const tags: any;

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;
@@ -119,6 +120,10 @@ export namespace Components {
         "type": string;
         "value": string | number;
     }
+    interface TttxTag {
+        "color": string;
+        "text": string;
+    }
     interface TttxToolbar {
         "border": boolean;
     }
@@ -231,6 +236,12 @@ declare global {
         prototype: HTMLTttxStandaloneInputElement;
         new (): HTMLTttxStandaloneInputElement;
     };
+    interface HTMLTttxTagElement extends Components.TttxTag, HTMLStencilElement {
+    }
+    var HTMLTttxTagElement: {
+        prototype: HTMLTttxTagElement;
+        new (): HTMLTttxTagElement;
+    };
     interface HTMLTttxToolbarElement extends Components.TttxToolbar, HTMLStencilElement {
     }
     var HTMLTttxToolbarElement: {
@@ -256,6 +267,7 @@ declare global {
         "tttx-select-box": HTMLTttxSelectBoxElement;
         "tttx-sorter": HTMLTttxSorterElement;
         "tttx-standalone-input": HTMLTttxStandaloneInputElement;
+        "tttx-tag": HTMLTttxTagElement;
         "tttx-toolbar": HTMLTttxToolbarElement;
         "tttx-tree-view": HTMLTttxTreeViewElement;
     }
@@ -305,7 +317,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;
@@ -384,6 +397,10 @@ declare namespace LocalJSX {
         "type"?: string;
         "value"?: string | number;
     }
+    interface TttxTag {
+        "color"?: string;
+        "text"?: string;
+    }
     interface TttxToolbar {
         "border"?: boolean;
     }
@@ -404,6 +421,7 @@ declare namespace LocalJSX {
         "tttx-select-box": TttxSelectBox;
         "tttx-sorter": TttxSorter;
         "tttx-standalone-input": TttxStandaloneInput;
+        "tttx-tag": TttxTag;
         "tttx-toolbar": TttxToolbar;
         "tttx-tree-view": TttxTreeView;
     }
@@ -424,6 +442,7 @@ declare module "@stencil/core" {
             "tttx-select-box": LocalJSX.TttxSelectBox & JSXBase.HTMLAttributes<HTMLTttxSelectBoxElement>;
             "tttx-sorter": LocalJSX.TttxSorter & JSXBase.HTMLAttributes<HTMLTttxSorterElement>;
             "tttx-standalone-input": LocalJSX.TttxStandaloneInput & JSXBase.HTMLAttributes<HTMLTttxStandaloneInputElement>;
+            "tttx-tag": LocalJSX.TttxTag & JSXBase.HTMLAttributes<HTMLTttxTagElement>;
             "tttx-toolbar": LocalJSX.TttxToolbar & JSXBase.HTMLAttributes<HTMLTttxToolbarElement>;
             "tttx-tree-view": LocalJSX.TttxTreeView & JSXBase.HTMLAttributes<HTMLTttxTreeViewElement>;
         }

package/package.json

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