@3t-transform/threeteeui 0.0.11 → 0.0.13

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-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"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],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
+  return index.bootstrapLazy([["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"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",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]]], options);
   });
 };
 

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

@@ -0,0 +1,198 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bf39be87.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}.tttx-list__row{min-height:52px;line-height:36px;padding:8px;display:flex;flex-direction:row;align-items:center;cursor:pointer;border-bottom:1px solid #d5d5d5}.tttx-list__row .generic-template__content{width:100%;display:flex;align-items:center;gap:8px}.tttx-list__row:first-of-type{border-top:1px solid #d5d5d5}.tttx-list__row:focus,.tttx-list__row:active{background-color:#e6e6e6}.tttx-list__row.selected{background-color:#e7f1f9}.load-indicator{display:flex;justify-content:center}";
+
+const TttxList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.listPaginate = index.createEvent(this, "listPaginate", 7);
+    this.listSelectedEvent = index.createEvent(this, "listSelectedEvent", 7);
+    this.listItemClick = index.createEvent(this, "listItemClick", 7);
+    this.rowCount = 0;
+    this.name = undefined;
+    this.selectable = undefined;
+    this.items = [];
+    this.selectedIds = [];
+    this.loading = true;
+    this.lastPage = false;
+  }
+  listLoadHandler(event) {
+    if (event.detail.name !== this.name)
+      return;
+    this.items = [...this.items, ...event.detail.items];
+    this.loading = false;
+    this.lastPage = event.detail.lastPage;
+    this.renderRows(event.detail.items);
+    if (this.scrollableParent.clientHeight === this.scrollableParent.scrollHeight)
+      this.listPaginateHandler();
+  }
+  listPaginateHandler() {
+    // We don't want to emit an event to load the next page if this is the last page, or if we're already loading
+    if (this.lastPage || this.loading)
+      return;
+    this.loading = true;
+    this.listPaginate.emit({ name: this.name });
+  }
+  listClearDataCacheHandler(event) {
+    if (event.detail.name !== this.name)
+      return;
+    this.items = [];
+    this.selectedIds = [];
+    this.listItemContainer()
+      .querySelectorAll(".tttx-list__row")
+      .forEach((node) => {
+      node.remove();
+    });
+    this.rowCount = 0;
+    this.lastPage = false;
+    this.loading = false;
+  }
+  listActionSelectedEventHandler(event) {
+    if (event.detail.name !== this.name || !this.selectable || this.selectedIds.length === 0)
+      return;
+    const selectedRows = this.selectedIds.map(id => {
+      return this.items[id];
+    });
+    if (event.detail.removeRows)
+      this.removeSelectedRows();
+    this.listSelectedEvent.emit({
+      name: this.name,
+      eventName: event.detail.eventName,
+      selectedRows,
+    });
+  }
+  removeSelectedRows() {
+    const orderedSelectedIds = [...this.selectedIds].sort((a, b) => {
+      return b - a;
+    });
+    orderedSelectedIds.forEach(itemIndex => {
+      this.items.splice(itemIndex, 1);
+      this.listItemContainer().removeChild(this.listItemContainer().querySelector(`[data-row-id="${itemIndex}"]`));
+      // If this removes the scrollbar and we're not on the last page, load in a new page
+      if (this.scrollableParent.clientHeight === this.scrollableParent.scrollHeight)
+        this.listPaginateHandler();
+    });
+    // Empty selected ids with mutation rather than assignment to avoid unecessary component rerender
+    this.selectedIds.splice(0, this.selectedIds.length);
+  }
+  listItemClickHandler(itemData) {
+    if (this.selectedIds.length !== 0)
+      return;
+    this.listItemClick.emit({ itemData, name: this.name });
+  }
+  componentWillLoad() {
+    this.template = this.host.querySelector("template");
+    this.scrollableParent = this.getScrollableParent(this.host);
+    const scrollableContext = this.scrollableParent === document.scrollingElement ? document : this.scrollableParent;
+    scrollableContext.addEventListener("scroll", this.scrollHandler.bind(this));
+    window.addEventListener("resize", this.scrollHandler.bind(this));
+  }
+  componentDidLoad() {
+    // Emit event to load first page
+    this.listPaginate.emit({ name: this.name });
+  }
+  listItemContainer() {
+    return this.host.shadowRoot.querySelector(".list-item-container");
+  }
+  async scrollHandler() {
+    const { clientHeight, scrollTop, scrollHeight } = this.scrollableParent;
+    if (Math.abs(scrollHeight - clientHeight - scrollTop) < 26)
+      this.listPaginateHandler();
+  }
+  isScrollable(node) {
+    const hasScrollbar = ["scroll", "auto"].includes(node.style.overflowY);
+    return hasScrollbar;
+  }
+  getScrollableParent(node) {
+    if (!node || node === document.body) {
+      return document.scrollingElement;
+    }
+    else {
+      return this.isScrollable(node) ? node : this.getScrollableParent(node.parentElement);
+    }
+  }
+  appendRowCheckbox(rowContainer) {
+    if (!this.selectable)
+      return;
+    const rowId = this.rowCount;
+    const checkbox = document.createElement("input");
+    checkbox.setAttribute("type", "checkbox");
+    checkbox.addEventListener("click", e => {
+      e.stopPropagation();
+      if (e.target.checked) {
+        this.selectedIds = [...this.selectedIds, rowId];
+        rowContainer.classList.add("selected");
+      }
+      else {
+        this.selectedIds = this.selectedIds.filter(id => {
+          return id !== rowId;
+        });
+        rowContainer.classList.remove("selected");
+      }
+    });
+    rowContainer.setAttribute("data-row-id", `${rowId}`);
+    this.rowCount++;
+    rowContainer.appendChild(checkbox);
+  }
+  appendSeededTemplate(rowData, rowContainer) {
+    this.template.childNodes.forEach(child => {
+      const clone = child.cloneNode(false);
+      if (clone.getAttribute("data-fields")) {
+        const fields = clone.getAttribute("data-fields").replace(/\s/g, "").split(",");
+        const filteredRowData = Object.fromEntries(fields.map((field) => {
+          return [field, rowData[field]];
+        }));
+        clone.setAttribute("row-data", JSON.stringify(filteredRowData));
+      }
+      else {
+        clone.setAttribute("row-data", JSON.stringify(rowData));
+      }
+      rowContainer.appendChild(clone);
+    });
+  }
+  appendGenericTemplate(rowData, rowContainer) {
+    const row = document.createElement("div");
+    row.classList.add("generic-template__content");
+    row.textContent = rowData.text;
+    rowContainer.appendChild(row);
+    if (!rowData.icon)
+      return;
+    const icon = document.createElement("span");
+    icon.classList.add("material-symbols-rounded");
+    icon.textContent = rowData.icon;
+    if (rowData.iconColor)
+      icon.style["color"] = rowData.iconColor;
+    row.prepend(icon);
+  }
+  row(rowData) {
+    const rowContainer = document.createElement("div");
+    rowContainer.classList.add("tttx-list__row");
+    rowContainer.addEventListener("click", () => {
+      this.listItemClickHandler(rowData);
+    });
+    this.appendRowCheckbox(rowContainer);
+    this.template ? this.appendSeededTemplate(rowData, rowContainer) : this.appendGenericTemplate(rowData, rowContainer);
+    return rowContainer;
+  }
+  renderRows(batchData) {
+    batchData.forEach(rowData => {
+      this.listItemContainer().appendChild(this.row(rowData));
+    });
+  }
+  loadIndicator() {
+    if (!this.loading)
+      return;
+    return index.h("div", { class: "load-indicator" }, index.h("tttx-loading-spinner", { size: 'large' }));
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "list-item-container", tabindex: "0" }, !this.loading && this.items.length === 0 ? "No data to display" : undefined), this.loadIndicator()));
+  }
+  get host() { return index.getElement(this); }
+};
+TttxList.style = tttxListCss;
+
+exports.tttx_list = TttxList;

package/dist/cjs/tttx-standalone-input.cjs.entry.js

@@ -10,9 +10,9 @@ const TttxInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.isfocused = false;
+    this.focusChanged = index.createEvent(this, "focusChanged", 7);
+    this.blurChanged = index.createEvent(this, "blurChanged", 7);
     this.label = undefined;
-    this.valid = undefined;
     this.showerrormsg = undefined;
     this.errormsg = undefined;
     this.iconleft = undefined;
@@ -40,11 +40,13 @@ const TttxInput = class {
     this.value = target.value;
     this.valueChanged.emit(target.value);
   }
-  handleFocus() {
-    this.isfocused = true;
+  handleFocus(event) {
+    const target = event.target;
+    this.valueChanged.emit(target.value);
   }
-  handleBlur() {
-    this.isfocused = false;
+  handleBlur(event) {
+    const target = event.target;
+    this.valueChanged.emit(target.value);
   }
   render() {
     const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
@@ -74,7 +76,7 @@ const TttxInput = class {
         this.type === 'number' ||
         this.type === 'range'
         ? this.min
-        : null, minlength: this.maxlength, name: this.name, pattern: this.type === 'text' ||
+        : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
         this.type === 'date' ||
         this.type === 'search' ||
         this.type === 'url' ||

package/dist/cjs/tttx.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"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],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
+  return index.bootstrapLazy([["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"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",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -6,7 +6,8 @@
     "./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
     "./components/atoms/tttx-popover-content/tttx-popover-content.js",
     "./components/atoms/ttx-checkbox/tttx-checkbox.js",
-    "./components/molecules/tttx-form/tttx-form.js"
+    "./components/molecules/tttx-form/tttx-form.js",
+    "./components/molecules/tttx-list/tttx-list.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -0,0 +1,56 @@
+.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;
+}
+
+.tttx-list__row {
+  min-height: 52px;
+  line-height: 36px;
+  padding: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  border-bottom: 1px solid #d5d5d5;
+}
+.tttx-list__row .generic-template__content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tttx-list__row:first-of-type {
+  border-top: 1px solid #d5d5d5;
+}
+.tttx-list__row:focus, .tttx-list__row:active {
+  background-color: #e6e6e6;
+}
+.tttx-list__row.selected {
+  background-color: #e7f1f9;
+}
+
+.load-indicator {
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,311 @@
+import { h, Host } from "@stencil/core";
+export class TttxList {
+  constructor() {
+    this.rowCount = 0;
+    this.name = undefined;
+    this.selectable = undefined;
+    this.items = [];
+    this.selectedIds = [];
+    this.loading = true;
+    this.lastPage = false;
+  }
+  listLoadHandler(event) {
+    if (event.detail.name !== this.name)
+      return;
+    this.items = [...this.items, ...event.detail.items];
+    this.loading = false;
+    this.lastPage = event.detail.lastPage;
+    this.renderRows(event.detail.items);
+    if (this.scrollableParent.clientHeight === this.scrollableParent.scrollHeight)
+      this.listPaginateHandler();
+  }
+  listPaginateHandler() {
+    // We don't want to emit an event to load the next page if this is the last page, or if we're already loading
+    if (this.lastPage || this.loading)
+      return;
+    this.loading = true;
+    this.listPaginate.emit({ name: this.name });
+  }
+  listClearDataCacheHandler(event) {
+    if (event.detail.name !== this.name)
+      return;
+    this.items = [];
+    this.selectedIds = [];
+    this.listItemContainer()
+      .querySelectorAll(".tttx-list__row")
+      .forEach((node) => {
+      node.remove();
+    });
+    this.rowCount = 0;
+    this.lastPage = false;
+    this.loading = false;
+  }
+  listActionSelectedEventHandler(event) {
+    if (event.detail.name !== this.name || !this.selectable || this.selectedIds.length === 0)
+      return;
+    const selectedRows = this.selectedIds.map(id => {
+      return this.items[id];
+    });
+    if (event.detail.removeRows)
+      this.removeSelectedRows();
+    this.listSelectedEvent.emit({
+      name: this.name,
+      eventName: event.detail.eventName,
+      selectedRows,
+    });
+  }
+  removeSelectedRows() {
+    const orderedSelectedIds = [...this.selectedIds].sort((a, b) => {
+      return b - a;
+    });
+    orderedSelectedIds.forEach(itemIndex => {
+      this.items.splice(itemIndex, 1);
+      this.listItemContainer().removeChild(this.listItemContainer().querySelector(`[data-row-id="${itemIndex}"]`));
+      // If this removes the scrollbar and we're not on the last page, load in a new page
+      if (this.scrollableParent.clientHeight === this.scrollableParent.scrollHeight)
+        this.listPaginateHandler();
+    });
+    // Empty selected ids with mutation rather than assignment to avoid unecessary component rerender
+    this.selectedIds.splice(0, this.selectedIds.length);
+  }
+  listItemClickHandler(itemData) {
+    if (this.selectedIds.length !== 0)
+      return;
+    this.listItemClick.emit({ itemData, name: this.name });
+  }
+  componentWillLoad() {
+    this.template = this.host.querySelector("template");
+    this.scrollableParent = this.getScrollableParent(this.host);
+    const scrollableContext = this.scrollableParent === document.scrollingElement ? document : this.scrollableParent;
+    scrollableContext.addEventListener("scroll", this.scrollHandler.bind(this));
+    window.addEventListener("resize", this.scrollHandler.bind(this));
+  }
+  componentDidLoad() {
+    // Emit event to load first page
+    this.listPaginate.emit({ name: this.name });
+  }
+  listItemContainer() {
+    return this.host.shadowRoot.querySelector(".list-item-container");
+  }
+  async scrollHandler() {
+    const { clientHeight, scrollTop, scrollHeight } = this.scrollableParent;
+    if (Math.abs(scrollHeight - clientHeight - scrollTop) < 26)
+      this.listPaginateHandler();
+  }
+  isScrollable(node) {
+    const hasScrollbar = ["scroll", "auto"].includes(node.style.overflowY);
+    return hasScrollbar;
+  }
+  getScrollableParent(node) {
+    if (!node || node === document.body) {
+      return document.scrollingElement;
+    }
+    else {
+      return this.isScrollable(node) ? node : this.getScrollableParent(node.parentElement);
+    }
+  }
+  appendRowCheckbox(rowContainer) {
+    if (!this.selectable)
+      return;
+    const rowId = this.rowCount;
+    const checkbox = document.createElement("input");
+    checkbox.setAttribute("type", "checkbox");
+    checkbox.addEventListener("click", e => {
+      e.stopPropagation();
+      if (e.target.checked) {
+        this.selectedIds = [...this.selectedIds, rowId];
+        rowContainer.classList.add("selected");
+      }
+      else {
+        this.selectedIds = this.selectedIds.filter(id => {
+          return id !== rowId;
+        });
+        rowContainer.classList.remove("selected");
+      }
+    });
+    rowContainer.setAttribute("data-row-id", `${rowId}`);
+    this.rowCount++;
+    rowContainer.appendChild(checkbox);
+  }
+  appendSeededTemplate(rowData, rowContainer) {
+    this.template.childNodes.forEach(child => {
+      const clone = child.cloneNode(false);
+      if (clone.getAttribute("data-fields")) {
+        const fields = clone.getAttribute("data-fields").replace(/\s/g, "").split(",");
+        const filteredRowData = Object.fromEntries(fields.map((field) => {
+          return [field, rowData[field]];
+        }));
+        clone.setAttribute("row-data", JSON.stringify(filteredRowData));
+      }
+      else {
+        clone.setAttribute("row-data", JSON.stringify(rowData));
+      }
+      rowContainer.appendChild(clone);
+    });
+  }
+  appendGenericTemplate(rowData, rowContainer) {
+    const row = document.createElement("div");
+    row.classList.add("generic-template__content");
+    row.textContent = rowData.text;
+    rowContainer.appendChild(row);
+    if (!rowData.icon)
+      return;
+    const icon = document.createElement("span");
+    icon.classList.add("material-symbols-rounded");
+    icon.textContent = rowData.icon;
+    if (rowData.iconColor)
+      icon.style["color"] = rowData.iconColor;
+    row.prepend(icon);
+  }
+  row(rowData) {
+    const rowContainer = document.createElement("div");
+    rowContainer.classList.add("tttx-list__row");
+    rowContainer.addEventListener("click", () => {
+      this.listItemClickHandler(rowData);
+    });
+    this.appendRowCheckbox(rowContainer);
+    this.template ? this.appendSeededTemplate(rowData, rowContainer) : this.appendGenericTemplate(rowData, rowContainer);
+    return rowContainer;
+  }
+  renderRows(batchData) {
+    batchData.forEach(rowData => {
+      this.listItemContainer().appendChild(this.row(rowData));
+    });
+  }
+  loadIndicator() {
+    if (!this.loading)
+      return;
+    return h("div", { class: "load-indicator" }, h("tttx-loading-spinner", { size: 'large' }));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "list-item-container", tabindex: "0" }, !this.loading && this.items.length === 0 ? "No data to display" : undefined), this.loadIndicator()));
+  }
+  static get is() { return "tttx-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selectable",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "items": {},
+      "selectedIds": {},
+      "loading": {},
+      "lastPage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "listPaginate",
+        "name": "listPaginate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "listSelectedEvent",
+        "name": "listSelectedEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "listItemClick",
+        "name": "listItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "listPageLoad",
+        "method": "listLoadHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "listClearDataCache",
+        "method": "listClearDataCacheHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "listActionSelectedEvent",
+        "method": "listActionSelectedEventHandler",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,37 @@
+export default {
+  title: "molecules/List",
+  component: "tttx-list",
+  argTypes: {
+    selectable: {
+      control: {
+        type: "boolean"
+      }
+    }
+  }
+};
+export const ListWithGenericTemplate = (args) => {
+  return `
+<script>
+  function loadPage (event) {
+    const page = new CustomEvent('listPageLoad', {
+      detail: {
+        name: 'listWithGenericTemplate',
+        lastPage: true,
+        items: [
+          { text: 'Row with only text' },
+          { text: 'Row with text and an icon', icon: 'sentiment_calm' },
+          { text: 'Row with text and a coloured icon', icon: 'check_circle', iconColor: 'blue' },
+        ]
+      }
+    });
+    document.dispatchEvent(page);
+
+    // Stop this event handler from being duplicated every time the storybook iframe is reloaded
+    document.removeEventListener("listPaginate", loadPage);
+  }
+  document.addEventListener("listPaginate", loadPage);
+</script>
+
+<tttx-list ${args.selectable ? "selectable" : ""} name='listWithGenericTemplate' />
+  `;
+};