@3t-transform/threeteeui 0.0.15 → 0.0.16

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

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

package/dist/components/tttx-list.js

@@ -0,0 +1,225 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+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 = TttxList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxList, defineCustomElement };

package/dist/components/tttx-loading-spinner.d.ts

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

package/dist/components/tttx-loading-spinner.js

@@ -0,0 +1,6 @@
+import { T as TttxLoadingSpinner$1, d as defineCustomElement$1 } from './tttx-loading-spinner2.js';
+
+const TttxLoadingSpinner = TttxLoadingSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxLoadingSpinner, defineCustomElement };

package/dist/components/tttx-loading-spinner2.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#d5d5d5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+
+const TttxLoadingSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.loadingMessage = undefined;
+    this.size = 'large';
+  }
+  renderLoadingMessage() {
+    if (!this.loadingMessage)
+      return '';
+    return h("div", { class: "loading-text" }, "Loading, please wait...");
+  }
+  render() {
+    return (h("div", { class: "spinner-container" }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage()));
+  }
+  static get style() { return tttxLoadingSpinnerCss; }
+}, [1, "tttx-loading-spinner", {
+    "loadingMessage": [1028, "loading-message"],
+    "size": [1025]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-loading-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-loading-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxLoadingSpinner);
+      }
+      break;
+  } });
+}
+
+export { TttxLoadingSpinner as T, defineCustomElement as d };

package/dist/components/tttx-popover-content.d.ts

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

package/dist/components/tttx-popover-content.js

@@ -0,0 +1,6 @@
+import { T as TttxPopoverContent$1, d as defineCustomElement$1 } from './tttx-popover-content2.js';
+
+const TttxPopoverContent = TttxPopoverContent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxPopoverContent, defineCustomElement };

package/dist/components/tttx-popover-content2.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tttxPopoverContentCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;max-width:400px}h4{margin:0;font-size:15px;font-weight:700;color:black;margin-bottom:4px}p{margin:0;font-size:14px;font-weight:normal;color:black;margin-bottom:4px}.linky{color:#1479c6;text-decoration:none;cursor:pointer}";
+
+const TttxPopoverContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.header = undefined;
+    this.body = undefined;
+    this.linkcontext = undefined;
+    this.linktext = undefined;
+  }
+  render() {
+    return (h(Host, null, this.header && h("h4", null, this.header), this.body && h("p", null, this.body), this.linkcontext && (h("span", { class: "linky", onClick: evt => console.log(this.linkcontext, evt) }, this.linktext || 'More Information'))));
+  }
+  static get style() { return tttxPopoverContentCss; }
+}, [1, "tttx-popover-content", {
+    "header": [1],
+    "body": [1],
+    "linkcontext": [1],
+    "linktext": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-popover-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-popover-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxPopoverContent);
+      }
+      break;
+  } });
+}
+
+export { TttxPopoverContent as T, defineCustomElement as d };

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

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

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

@@ -0,0 +1,179 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './tttx-icon2.js';
+
+const tttxStandaloneInputCss = ".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}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}";
+
+const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.focusChanged = createEvent(this, "focusChanged", 7);
+    this.blurChanged = createEvent(this, "blurChanged", 7);
+    this.label = undefined;
+    this.showerrormsg = undefined;
+    this.errormsg = undefined;
+    this.iconleft = undefined;
+    this.iconright = undefined;
+    this.autocapitalize = undefined;
+    this.autocomplete = undefined;
+    this.autofocus = undefined;
+    this.checked = undefined;
+    this.disabled = undefined;
+    this.max = undefined;
+    this.maxlength = undefined;
+    this.min = undefined;
+    this.minlength = undefined;
+    this.name = undefined;
+    this.pattern = undefined;
+    this.placeholder = undefined;
+    this.readonly = undefined;
+    this.required = undefined;
+    this.step = undefined;
+    this.type = 'text';
+    this.value = undefined;
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.value = target.value;
+    this.valueChanged.emit(target.value);
+  }
+  handleFocus(event) {
+    const target = event.target;
+    this.focusChanged.emit(target.value);
+  }
+  handleBlur(event) {
+    const target = event.target;
+    this.blurChanged.emit(target.value);
+  }
+  render() {
+    const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
+    return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, colour: "grey" }))), h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
+        this.type === 'search' ||
+        this.type === 'url' ||
+        this.type === 'tel' ||
+        this.type === 'email' ||
+        this.type === 'password' ||
+        this.type === 'datepickers' ||
+        this.type === 'range' ||
+        this.type === 'color'
+        ? this.autocomplete
+        : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
+        this.type === 'month' ||
+        this.type === 'week' ||
+        this.type === 'time' ||
+        this.type === 'datetime-local' ||
+        this.type === 'number' ||
+        this.type === 'range'
+        ? this.max
+        : null, maxlength: this.maxlength, min: this.type === 'date' ||
+        this.type === 'month' ||
+        this.type === 'week' ||
+        this.type === 'time' ||
+        this.type === 'datetime-local' ||
+        this.type === 'number' ||
+        this.type === 'range'
+        ? this.min
+        : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
+        this.type === 'date' ||
+        this.type === 'search' ||
+        this.type === 'url' ||
+        this.type === 'tel' ||
+        this.type === 'email' ||
+        this.type === 'password'
+        ? this.pattern
+        : null, placeholder: this.type === 'text' ||
+        this.type === 'tel' ||
+        this.type === 'email' ||
+        this.type === 'url' ||
+        this.type === 'password' ||
+        this.type === 'search'
+        ? this.placeholder
+        : null, readonly: this.type === 'text' ||
+        this.type === 'search' ||
+        this.type === 'url' ||
+        this.type === 'tel' ||
+        this.type === 'email' ||
+        this.type === 'password' ||
+        this.type === 'date' ||
+        this.type === 'month' ||
+        this.type === 'week' ||
+        this.type === 'time' ||
+        this.type === 'datetime-local' ||
+        this.type === 'number'
+        ? this.readonly
+        : null, required: this.type === 'text' ||
+        this.type === 'search' ||
+        this.type === 'url' ||
+        this.type === 'tel' ||
+        this.type === 'email' ||
+        this.type === 'password' ||
+        this.type === 'date' ||
+        this.type === 'month' ||
+        this.type === 'week' ||
+        this.type === 'time' ||
+        this.type === 'datetime-local' ||
+        this.type === 'number' ||
+        this.type === 'checkbox' ||
+        this.type === 'radio' ||
+        this.type === 'file'
+        ? this.required
+        : null, step: this.type === 'date' ||
+        this.type === 'month' ||
+        this.type === 'week' ||
+        this.type === 'time' ||
+        this.type === 'datetime-local' ||
+        this.type === 'number' ||
+        this.type === 'range'
+        ? this.step
+        : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, colour: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+  }
+  static get style() { return tttxStandaloneInputCss; }
+}, [1, "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]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-standalone-input", "tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-standalone-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxInput);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxStandaloneInput = TttxInput;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxStandaloneInput, defineCustomElement };

package/dist/components/tttx-table.d.ts

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

package/dist/components/tttx-table.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './tttx-icon2.js';
+import { d as defineCustomElement$2 } from './tttx-popover-content2.js';
+
+const tttxTableCss = "// SPACING $spacing-unit: 4px; // REGULAR $horizontal-spacing: $spacing-unit * 4; $vertical-spacing: $spacing-unit * 2; $base-padding: $vertical-spacing $horizontal-spacing; $base-height: $spacing-unit * 9; $component-spacing: $spacing-unit * 4; // SMALL $horizontal-spacing-sm: $spacing-unit * 2; $vertical-spacing-sm: $spacing-unit * 1; $base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm; $base-height-sm: $spacing-unit * 7; // COLOURS $grey-0: #212121; $grey-1: #363636; $grey-2: #4c4c4c; $grey-3: #636363; $grey-4: #757575; $grey-5: #9e9e9e; $grey-6: #aeaeae; $grey-7: #c8c8c8; $grey-8: #e3e3e3; $grey-9: #f0f0f0; $white: white; $black: $grey-0; $transparent: transparent; $blue-0: #00187c; $blue-1: #032e8c; $blue-2: #0849a3; $blue-3: #0951a8; $blue-4: #1169ba; $blue-5: #1479c6; $blue-6: #5194d2; $blue-7: #7aacdd; $blue-8: #b9d5ed; $blue-9: #e7f1f9; $red-0: #7c0000; $red-1: #8c0000; $red-2: #a30000; $red-3: #a80000; $red-4: #ba0000; $red-5: #dc0000; $red-6: #d25151; $red-7: #dd7a7a; $red-8: #edc1c1; $red-9: #f9e7e7; $black-1: #e6e6e6; $brand: $blue-0; $accent: $blue-5; $accent-selected: $blue-9; $error: $red-5; $severity-critical: #dc0000; $severity-warning: #f59500; $severity-success: #a2bb31; $severity-info: $accent; $ui-primary: $black; $ui-secondary: $grey-4; $ui-disabled: $grey-2; $ui-placeholder: $grey-5; $ui-background: $grey-9; $ui-sheet: $white; $ui-border: #d5d5d5; // BORDERS $ui-border-radius: 4px; $ui-border-width: 1px; // TYPOGRAPHY $font-size-default: 16px; $font-size-small: 14px; .material-symbols-rounded{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}.skeleton{animation:skeleton-loading 1s linear infinite alternate;border-radius:4px;width:100%}@keyframes skeleton-loading{0%{background-color:hsl(200, 20%, 80%)}100%{background-color:hsl(200, 20%, 95%)}}:host{display:block}table{box-sizing:border-box;width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #ddd;border-bottom:none}thead tr{height:52px;color:#757575}tbody tr{height:48px;color:#212121}tr{font-family:'Roboto', sans-serif;font-weight:400;font-size:16px;display:flex;align-items:center;border-bottom:1px solid #ddd}.selected{background-color:#F0F0F0}.checked{background-color:#e7f1f9}td,th{min-width:300px;margin-left:16px;display:flex;align-items:left}.skeleton{height:24px;display:block}.align-right{margin-left:auto}";
+
+const TttxTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.rowSelected = createEvent(this, "rowSelected", 7);
+    this.headerClicked = createEvent(this, "headerClicked", 7);
+    this.headers = [];
+    this.data = {};
+    this.loading = false;
+    this.selected = -1;
+  }
+  handleKeyDown(ev) {
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      this.updateSelectedIndex(ev.key);
+      this.emitRowSelected();
+    }
+  }
+  updateSelectedIndex(key) {
+    if (this.selected === -1) {
+      this.selected = 0;
+    }
+    else {
+      const isArrowDown = key === 'ArrowDown';
+      const isArrowUp = key === 'ArrowUp';
+      if (isArrowDown && this.selected < this.data.length - 1) {
+        this.selected++;
+      }
+      else if (isArrowUp && this.selected > 0) {
+        this.selected--;
+      }
+    }
+  }
+  emitRowSelected() {
+    this.rowSelected.emit(this.data[this.selected]);
+  }
+  rowSelectedHandler(row) {
+    this.rowSelected.emit(row);
+    this.selected = this.data.findIndex((item) => item === row);
+  }
+  headerClickedHandler(key) {
+    this.headerClicked.emit(key);
+  }
+  render() {
+    return (h(Host, null, h("table", null, h("thead", null, h("tr", null, this.loading ?
+      [1, 2, 3].map(() => (h("th", null, h("div", { class: "skeleton" })))) :
+      this.headers && this.headers.map((header) => (h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), h("tbody", null, this.loading ?
+      [1, 2, 3].map(() => (h("tr", null, h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" }))))) :
+      Object.keys(this.data).map((key, index) => (h("tr", { class: index === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (h("td", null, this.data[key][header.key], " ", header.actions && h("tttx-icon", { class: "align-right", icon: "more_vert" }, h("div", { slot: "popover" }, h("tttx-popover-content", { header: "The humble egg", body: "Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.", linkcontext: "Wikipedia_egg", linktext: "Learn more about eggs" })))))))))))));
+  }
+  static get style() { return tttxTableCss; }
+}, [1, "tttx-table", {
+    "headers": [8],
+    "data": [8],
+    "loading": [4],
+    "selected": [2]
+  }, [[4, "keydown", "handleKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-table", "tttx-icon", "tttx-popover-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxTable$1);
+      }
+      break;
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tttx-popover-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TttxTable = TttxTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TttxTable, defineCustomElement };