@3t-transform/threeteeui 0.0.16 → 0.0.18

package/dist/components/tttx-input-calendar.d.ts

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

package/dist/components/tttx-input-calendar.js

@@ -0,0 +1,157 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './tttx-button2.js';
+import { d as defineCustomElement$2 } from './tttx-icon2.js';
+
+const tttxInputCalendarCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;--border-radius:4px;position:relative}.calcontainer{-webkit-perspective:500px;perspective:500px}.lefty{float:left}.righty{float:right}.calendar{display:none;position:absolute;box-sizing:border-box;width:312px;height:332px;background-color:white;padding:16px;box-shadow:0px 1px 5px rgba(17, 17, 17, 0.3);border-radius:var(--border-radius)}.calendar-header{display:flex;justify-content:space-between;margin-bottom:8px}.date-display{margin-top:8px}.calendar-header select{border:none;padding:5px}.calendar-table{width:100%;border-collapse:collapse}.calendar-table th{text-align:center;padding:4px;text-transform:uppercase;font-size:14px;color:#757575;border-bottom:1px solid #d5d5d5;margin-bottom:8px}.calendar .calendar-table td{padding:0;margin:0;width:14.2%;text-align:center;height:36px;line-height:36px}.calendar .calendar-table td span:hover{background-color:#f0f0f0}.calendar .calendar-table td span{display:block;text-align:center;padding:4px;cursor:pointer;border-radius:var(--border-radius)}.calendar-visible{display:block}.calendar-table thead tr{border-bottom:1px solid #d5d5d5}";
+
+const TttxInputCalendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    // an array of month numbers mapped to their names
+    this.monthNames = Array.from({ length: 12 }, (_, i) => i + 1).map((month) => {
+      const date = new Date(0);
+      date.setUTCMonth(month - 1);
+      return date.toLocaleString('default', { month: 'long' });
+    });
+    this.onClickOutside = (event) => {
+      if (!this.el.contains(event.target) && this.showCalendar) {
+        this.showCalendar = false;
+      }
+    };
+    this.onFocusIn = (event) => {
+      if (!this.el.contains(event.target) && this.showCalendar) {
+        this.showCalendar = false;
+      }
+    };
+    this.previousHandler = () => {
+      if (this.selectedMonth === 1) {
+        this.selectedMonth = 12;
+        this.selectedYear--;
+      }
+      else {
+        this.selectedMonth--;
+      }
+    };
+    this.nextHandler = () => {
+      if (this.selectedMonth === 12) {
+        this.selectedMonth = 1;
+        this.selectedYear++;
+      }
+      else {
+        this.selectedMonth++;
+      }
+    };
+    this.months = false;
+    this.years = false;
+    this.showCalendar = false;
+    this.selectedYear = new Date().getFullYear();
+    this.selectedMonth = new Date().getMonth() + 1;
+  }
+  componentDidLoad() {
+    const slot = this.el.shadowRoot.querySelector('slot');
+    if (slot) {
+      const assignedElements = slot.assignedElements();
+      if (assignedElements[0]) {
+        assignedElements[0].addEventListener('click', (event) => {
+          event.preventDefault();
+          this.showCalendar = !this.showCalendar;
+        });
+      }
+    }
+    document.addEventListener('click', this.onClickOutside);
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this.onClickOutside);
+  }
+  getDaysAndDates(year, month) {
+    const firstDayOfMonth = new Date(year, month - 1, 1);
+    const lastDayOfMonth = new Date(year, month, 0);
+    const daysAndDates = [];
+    for (let day = firstDayOfMonth; day <= lastDayOfMonth; day.setDate(day.getDate() + 1)) {
+      const weekDay = day.getDay();
+      const date = day.getDate();
+      const dayAndDate = {
+        day: weekDay,
+        date: date
+      };
+      daysAndDates.push(dayAndDate);
+    }
+    return daysAndDates;
+  }
+  clickDateHandler(event) {
+    const { year, month, day } = event;
+    const selectedDate = new Date(year, month - 1, day + 1);
+    this.inputElement.valueAsDate = selectedDate;
+    this.showCalendar = false;
+  }
+  render() {
+    const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const daysAndDates = this.getDaysAndDates(this.selectedYear, this.selectedMonth);
+    const currentYear = new Date().getFullYear();
+    const years = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);
+    const calendarGrid = [];
+    let currentWeek = [];
+    // Fill empty days before the first day of the month
+    for (let i = 0; i < daysAndDates[0].day; i++) {
+      currentWeek.push(h("td", null));
+    }
+    // Fill the calendar with days and dates
+    daysAndDates.forEach(({ day, date }) => {
+      currentWeek.push(h("td", null, h("span", { onClick: () => this.clickDateHandler({ year: this.selectedYear, month: this.selectedMonth, day: date }) }, date)));
+      if (day === 6) {
+        calendarGrid.push(h("tr", null, currentWeek));
+        currentWeek = [];
+      }
+    });
+    // Fill the remaining empty days in the last week
+    if (currentWeek.length > 0) {
+      while (currentWeek.length < 7) {
+        currentWeek.push(h("td", null));
+      }
+      calendarGrid.push(h("tr", null, currentWeek));
+    }
+    return (h(Host, null, h("div", { class: "calcontainer" }, h("slot", null), h("div", { class: `calendar ${this.showCalendar ? 'calendar-visible' : ''}` }, h("div", { class: "calendar-header" }, h("tttx-button", { onClick: this.previousHandler, design: "borderless", icon: "chevron_left", notext: true }), this.months && h("select", { id: "month-select", onInput: (event) => {
+        this.selectedMonth = parseInt(event.target.value);
+      } }, Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (h("option", { value: month, selected: month === this.selectedMonth }, this.monthNames[month - 1])))), this.years && h("select", { id: "year-select", onInput: (event) => {
+        this.selectedYear = parseInt(event.target.value);
+      } }, years.map((year) => (h("option", { value: year, selected: year === this.selectedYear }, year)))), h("div", { class: "date-display" }, this.monthNames[this.selectedMonth - 1], " ", this.selectedYear), h("tttx-button", { onClick: this.nextHandler, design: "borderless", icon: "chevron_right", notext: true })), h("table", { class: "calendar-table" }, h("thead", null, h("tr", null, daysOfWeek.map((day) => (h("th", null, day))))), h("tbody", null, calendarGrid))))));
+  }
+  get el() { return this; }
+  static get style() { return tttxInputCalendarCss; }
+}, [1, "tttx-input-calendar", {
+    "months": [4],
+    "years": [4],
+    "showCalendar": [32],
+    "selectedYear": [32],
+    "selectedMonth": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-input-calendar", "tttx-button", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-input-calendar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxInputCalendar$1);
+      }
+      break;
+    case "tttx-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxInputCalendar = TttxInputCalendar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxInputCalendar, defineCustomElement };

package/dist/components/tttx-keyvalue-block.d.ts

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

package/dist/components/tttx-keyvalue-block.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tttxKeyvalueBlockCss = ":host{display:block}dl{margin:0;padding:0;font-family:\"Roboto\", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px;color:#757575}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}";
+
+const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.keyvalues = undefined;
+  }
+  render() {
+    let values;
+    if (typeof this.keyvalues === 'string') {
+      values = JSON.parse(this.keyvalues);
+    }
+    else {
+      values = this.keyvalues;
+    }
+    const keys = Object.keys(values);
+    const elements = [];
+    for (let i = 0; i < keys.length; i++) {
+      elements.push(h("dt", null, keys[i]));
+      elements.push(h("dd", null, values[keys[i]]));
+    }
+    return (h(Host, null, h("dl", null, elements)));
+  }
+  static get style() { return tttxKeyvalueBlockCss; }
+}, [1, "tttx-keyvalue-block", {
+    "keyvalues": [8]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-keyvalue-block"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-keyvalue-block":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxKeyvalueBlock$1);
+      }
+      break;
+  } });
+}
+
+const TttxKeyvalueBlock = TttxKeyvalueBlock$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxKeyvalueBlock, defineCustomElement };

package/dist/components/tttx-list.js

@@ -3,220 +3,220 @@ import { d as defineCustomElement$2 } from './tttx-loading-spinner2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.listPaginate = createEvent(this, "listPaginate", 7);
-    this.listSelectedEvent = createEvent(this, "listSelectedEvent", 7);
-    this.listItemClick = 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 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()));
-  }
-  get host() { return this; }
-  static get style() { return tttxListCss; }
-}, [1, "tttx-list", {
-    "name": [1],
-    "selectable": [4],
-    "items": [32],
-    "selectedIds": [32],
-    "loading": [32],
-    "lastPage": [32]
-  }, [[4, "listPageLoad", "listLoadHandler"], [4, "listClearDataCache", "listClearDataCacheHandler"], [4, "listActionSelectedEvent", "listActionSelectedEventHandler"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-list", "tttx-loading-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxList$1);
-      }
-      break;
-    case "tttx-loading-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const TttxList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.listPaginate = createEvent(this, "listPaginate", 7);
+    this.listSelectedEvent = createEvent(this, "listSelectedEvent", 7);
+    this.listItemClick = 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 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()));
+  }
+  get host() { return this; }
+  static get style() { return tttxListCss; }
+}, [1, "tttx-list", {
+    "name": [1],
+    "selectable": [4],
+    "items": [32],
+    "selectedIds": [32],
+    "loading": [32],
+    "lastPage": [32]
+  }, [[4, "listPageLoad", "listLoadHandler"], [4, "listClearDataCache", "listClearDataCacheHandler"], [4, "listActionSelectedEvent", "listActionSelectedEventHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-list", "tttx-loading-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxList$1);
+      }
+      break;
+    case "tttx-loading-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const TttxList = TttxList$1;