@3t-transform/threeteeui 0.0.10 → 0.0.11

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

@@ -1,6 +1,6 @@
 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 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() {
@@ -13,10 +13,10 @@ const TttxLoadingSpinner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   renderLoadingMessage() {
     if (!this.loadingMessage)
       return '';
-    return h("div", { class: 'loading-text' }, "Loading, please wait...");
+    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());
+    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", {

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-input.d.ts → tttx-standalone-input.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 TttxStandaloneInput extends Components.TttxStandaloneInput, HTMLElement {}
+export const TttxStandaloneInput: {
+  prototype: TttxStandaloneInput;
+  new (): TttxStandaloneInput;
 };
 /**
  * Used to define this component and all nested components recursively.

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

package/dist/esm/{index-9654537d.js → index-63c4d25e.js}

@@ -281,6 +281,9 @@ const attachStyles = (hostRef) => {
         // DOM WRITE!!
         elm['s-sc'] = scopeId;
         elm.classList.add(scopeId + '-h');
+        if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+            elm.classList.add(scopeId + '-s');
+        }
     }
     endAttachStyles();
 };
@@ -826,6 +829,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             promise = safeCall(instance, 'componentWillLoad');
         }
     }
+    {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -895,6 +901,9 @@ const postUpdateComponent = (hostRef) => {
     const endPostUpdate = createTime('postUpdate', tagName);
     const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* HOST_FLAGS.hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* HOST_FLAGS.hasLoadedComponent */;
         {
@@ -959,6 +968,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
     const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$ ;
     const oldVal = hostRef.$instanceValues$.get(propName);
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
@@ -971,6 +981,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
         if (instance) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ && flags & 128 /* HOST_FLAGS.isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.map((watchMethodName) => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e, elm);
+                        }
+                    });
+                }
+            }
             if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
@@ -993,6 +1019,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
@@ -1097,6 +1126,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
+                // we've never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
                 proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);
                 Cstr.isProxied = true;
             }
@@ -1120,6 +1155,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
+            }
             endNewInstance();
         }
         if (Cstr.style) {
@@ -1239,6 +1277,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-9654537d.js';
-export { s as setNonce } from './index-9654537d.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-63c4d25e.js';
+export { s as setNonce } from './index-63c4d25e.js';
 
 /*
  Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-input",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-button",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
+  return bootstrapLazy([["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032],"isfocused":[32]}]]],["tttx-button",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
   });
 };
 

package/dist/esm/tttx-button.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9654537d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-63c4d25e.js';
 
-const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{height:36px;padding:8px 16px;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:inline-block}.spacingleft{margin-left:8px}.font-white{color:white}.font-black{color:#212121}";
+const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{height:36px;padding:8px 16px;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6;color:white}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:inline-block}.spacingleft{margin-left:8px}.font-white{color:white}.font-black{color:#212121}";
 
 const TttxButton = class {
   constructor(hostRef) {

package/dist/esm/tttx-checkbox.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-9654537d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-63c4d25e.js';
 
-const tttxCheckboxCss = ".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}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.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}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.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}:host{display:block}.spacing{margin-bottom:16px}";
+const tttxCheckboxCss = ".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}.spacing{margin-bottom:16px}";
 
 const TttxCheckbox = class {
   constructor(hostRef) {
@@ -16,7 +16,7 @@ const TttxCheckbox = class {
     this.valueChanged.emit(target.checked);
   }
   render() {
-    return (h(Host, null, h("div", { class: "field spacing" }, this.label && h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : ''), h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
+    return (h(Host, null, h("div", { class: "field spacing" }, this.label && (h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : '')), h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
   }
 };
 TttxCheckbox.style = tttxCheckboxCss;

package/dist/esm/tttx-form.entry.js

@@ -1,54 +1,182 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-9654537d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-63c4d25e.js';
+
+const tttxFormCss = ".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}.button{height:36px;padding:8px 16px;margin:0;background:transparent;color:#212121;border:1px solid #c8c8c8;border-radius:4px;text-transform:uppercase;display:flex;justify-content:left;align-items:center;font-size:14px;font-weight:400}.button:hover{background:#f0f0f0}.button:active{background:#e3e3e3}.primary-blue{background:#1479c6;border:1px solid #1479c6;color:white}.primary-blue:hover{background:#1169ba}.primary-blue:active{background:#0951a8}.secondary-white{background:white;border:1px solid #212121}:host{display:block}fieldset{margin:0;padding:0;border:none}input[type=submit]{margin-left:auto}";
 
 const TttxForm = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.formSubmit = createEvent(this, "formSubmit", 7);
-    this.fetchFormData = () => {
-      let validForm = true;
-      const formData = {};
-      const elements = this.el.querySelectorAll(`[${this.dataAttribute}]`);
-      elements.forEach((element) => {
-        const inputElement = element;
-        validForm = validForm ? this.validateFormField(inputElement) : false;
-        formData[inputElement.getAttribute(this.dataAttribute)] = inputElement.value;
-      });
-      return validForm ? formData : null;
-    };
-    this.dataAttribute = 'form-data';
-    this.functionAttribute = 'function-data';
-  }
-  validateFormField(element) {
-    let isValid = true;
-    const isRequired = element.hasAttribute("required");
-    if (isRequired && !element.value) {
-      // required and not set, show error
-      element.setAttribute("showerrormsg", "true");
-      isValid = false;
+    this.submitEvent = createEvent(this, "submitEvent", 7);
+    this.template = document.createElement('template');
+    this.formschema = undefined;
+    this.submitValue = undefined;
+  }
+  onFormSchemaChange(newValue) {
+    if (typeof newValue === 'string') {
+      this._formSchema = JSON.parse(newValue);
+    }
+    else {
+      this._formSchema = newValue;
+    }
+  }
+  validityCheck(event) {
+    var _a, _b, _c, _d;
+    event.preventDefault();
+    const target = event.target;
+    let hasError = true;
+    let errorMessage = '';
+    // validity object on HTML5 inputs has the following options
+    // badInput
+    // customError
+    // patternMismatch
+    // rangeOverflow
+    // rangeUnderflow
+    // stepMismatch
+    // tooLong
+    // tooShort
+    // typeMismatch
+    // valid
+    // valueMissing
+    // customErrors can be set with
+    // target.setCustomValidity('custom error!');
+    // and cleared with
+    // target.setCustomValidity('');
+    if (target.validity.valueMissing) {
+      errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
+    }
+    else if (target.validity.patternMismatch) {
+      errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
+    }
+    else if (target.validity.badInput) {
+      // IE string in a number field
+      errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
+    }
+    else if (target.validity.rangeOverflow || target.validity.rangeUnderflow) {
+      // IE date or number is above or below value set in min or max tags
+      errorMessage = (_d = target.dataset.range) !== null && _d !== void 0 ? _d : 'Invalid value';
+    }
+    else {
+      // no error
+      hasError = false;
+    }
+    if (hasError) {
+      target.className = 'invalid';
+      const errorIcon = document.createElement('span');
+      errorIcon.className = 'material-symbols-rounded';
+      errorIcon.textContent = 'warning';
+      target.parentElement.querySelector('.errorBubble').replaceChildren();
+      target.parentElement.querySelector('.errorBubble').append(errorIcon);
+      target.parentElement.querySelector('.errorBubble').append(errorMessage);
     }
     else {
-      // required and set, ensure error does not show
-      element.removeAttribute("showerrormsg");
-    }
-    return isValid;
-  }
-  componentDidLoad() {
-    const elements = this.el.querySelectorAll(`[${this.functionAttribute}]`);
-    elements.forEach((element) => {
-      element.addEventListener('click', event => {
-        event.preventDefault();
-        const formData = this.fetchFormData();
-        if (formData) {
-          // only emit event if form data is valid
-          this.formSubmit.emit(this.fetchFormData());
+      target.className = '';
+      target.parentElement.querySelector('.errorBubble').replaceChildren();
+    }
+  }
+  doSubmit(event) {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    // Key value pair matching the key names given by the JSON schema will be output line by line
+    // TODO: Emit an event so external components can handle the resulting form data
+    // let output = "";
+    // for (var [key, value] of formData.entries()) {
+    //     output += `${key} -> ${value}\n`;
+    // }
+    // console.log(output);
+    this.submitEvent.emit(formData);
+  }
+  fieldsetChange(event) {
+    console.log(event.target.name + ' has changed');
+    // The correct input box will always be the target of the incoming event
+    // TODO: Emit an event so external components can change based on form values input
+  }
+  componentWillLoad() {
+    // set proper on initial render
+    this.onFormSchemaChange(this.formschema);
+  }
+  componentWillRender() {
+    this.template.content.replaceChildren(); // clear the template to account for a potential re-render scenario
+    this.populateFormFromSchema();
+  }
+  populateFormFromSchema() {
+    if (!this._formSchema)
+      return;
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    propertyKeys.forEach(formKey => {
+      var _a, _b, _c;
+      const formItem = properties[formKey];
+      const formProperties = formItem.form;
+      const input = document.createElement('input');
+      input.name = formKey;
+      input.type = formProperties.type;
+      input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
+      input.autocomplete = 'off';
+      input.autocapitalize = 'off';
+      if (formProperties.validation) {
+        const validation = formProperties.validation;
+        if (validation.required) {
+          input.setAttribute('required', '');
+          input.setAttribute('data-required', (_b = validation.required.message) !== null && _b !== void 0 ? _b : '');
         }
-      });
+        if (validation.pattern) {
+          input.setAttribute('pattern', validation.pattern.pattern);
+          input.setAttribute('data-pattern', (_c = validation.pattern.message) !== null && _c !== void 0 ? _c : '');
+        }
+        if (validation.badInput) {
+          input.setAttribute('data-badinput', validation.badInput.message);
+        }
+        if (validation.minmax) {
+          input.setAttribute('min', validation.minmax.min);
+          input.setAttribute('max', validation.minmax.max);
+          input.setAttribute('data-range', validation.minmax.message);
+        }
+        if (validation.maxlength) {
+          input.setAttribute('maxlength', validation.maxlength);
+        }
+      }
+      const errorBubble = document.createElement('div');
+      errorBubble.className = 'errorBubble';
+      const label = document.createElement('label');
+      label.className = 'inputBlock';
+      label.innerText = formProperties.label;
+      if (!formProperties.validation) {
+        const optionalSpan = document.createElement('span');
+        optionalSpan.className = 'optional';
+        optionalSpan.innerHTML = ' (optional)';
+        label.appendChild(optionalSpan);
+      }
+      label.appendChild(input);
+      label.appendChild(errorBubble);
+      this.template.content.append(label);
+    });
+    const submitButton = document.createElement('input');
+    submitButton.type = 'submit';
+    submitButton.className = 'button primary-blue';
+    console.log(this.submitValue);
+    submitButton.value = 'Save';
+    this.template.content.append(submitButton);
+  }
+  componentDidRender() {
+    if (!this._formSchema)
+      return;
+    const formItems = this.template.content.cloneNode(true);
+    // bind to events here as you can't do it in a template in stencil
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    propertyKeys.forEach(formKey => {
+      formItems.querySelector(`[name=${formKey}]`).oninvalid = this.validityCheck.bind(this);
+      formItems.querySelector(`[name=${formKey}]`).onblur = this.validityCheck.bind(this);
     });
+    // append to the fieldset
+    this.fieldset.appendChild(formItems);
   }
   render() {
-    return (h("div", null, h("slot", null)));
+    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this) }, h("fieldset", { onChange: this.fieldsetChange, ref: el => (this.fieldset = el) }))));
   }
-  get el() { return getElement(this); }
-};
+  static get watchers() { return {
+    "formschema": ["onFormSchemaChange"]
+  }; }
+};
+TttxForm.style = tttxFormCss;
 
 export { TttxForm as tttx_form };

package/dist/esm/tttx-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-9654537d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-63c4d25e.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -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 = class {
   constructor(hostRef) {