@3t-transform/threeteeui 0.0.10 → 0.0.12

package/dist/components/tttx-icon2.js

@@ -1797,7 +1797,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-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:block}.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}.clickable{cursor:pointer}";
+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:block}.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}.clickable{cursor:pointer}";
 
 const TttxIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {

package/dist/components/{tttx-input.d.ts → tttx-list.d.ts}

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

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

@@ -1,41 +1,4 @@
-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$1 = /*@__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$1() {
-  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$1);
-      }
-      break;
-  } });
-}
+import { T as TttxLoadingSpinner$1, d as defineCustomElement$1 } from './tttx-loading-spinner2.js';
 
 const TttxLoadingSpinner = TttxLoadingSpinner$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -13,7 +13,7 @@ const TttxPopoverContent$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     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')));
+    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", {

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,178 @@
+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.sc-tttx-standalone-input{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded.sc-tttx-standalone-input{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.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{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.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-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].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{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.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}";
+
+const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.isfocused = false;
+    this.label = undefined;
+    this.valid = 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() {
+    this.isfocused = true;
+  }
+  handleBlur() {
+    this.isfocused = false;
+  }
+  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.maxlength, 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; }
+}, [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]
+  }]);
+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 };