@3t-transform/threeteeui 0.0.15 → 0.0.17

package/dist/components/tttx-icon2.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tttxIconCss = ".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:inline-block;cursor:default;user-select:none}.icon-size{width:24px;height:24px}.tooltip{background:#ffffff;color:#343434;font-weight:bold;padding:8px 16px;font-size:13px;border-radius:4px;box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.3);display:none}.tooltip[data-show]{display:block}.arrow,.arrow::before{position:absolute;width:8px;height:8px;background:inherit}.arrow{visibility:hidden}.arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}.tooltip[data-popper-placement^=left]>.arrow{right:-4px}.tooltip[data-popper-placement^=right]>.arrow{left:-4px}.red{color:#dc0000}.orange{color:#f59500}.blue{color:#1479c6}.green{color:#a2bb31}.gray{color:#757575}.black{color:#212121}.white{color:white}";
+
+const TttxIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.icon = undefined;
+    this.color = 'grey';
+  }
+  render() {
+    return (h(Host, null, h("span", { class: `material-symbols-rounded ${this.color ? this.color : ''}` }, this.icon)));
+  }
+  static get style() { return tttxIconCss; }
+}, [1, "tttx-icon", {
+    "icon": [1],
+    "color": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tttx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tttx-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TttxIcon);
+      }
+      break;
+  } });
+}
+
+export { TttxIcon as T, defineCustomElement as d };

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.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;