@3t-transform/threeteeui 0.0.24 → 0.0.25

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

@@ -51,6 +51,7 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.blurChanged.emit(target.value);
   }
   handleInvalid(event) {
+    event.preventDefault();
     const target = event.target;
     this.invalidChanged.emit(target.value);
   }

package/dist/esm/{index-901bfd55.js → index-0350f122.js}

@@ -146,10 +146,6 @@ const parsePropertyValue = (propValue, propType) => {
             // but we'll cheat here and say that the string "false" is the boolean false
             return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
-        if (propType & 2 /* MEMBER_FLAGS.Number */) {
-            // force it to be a number
-            return parseFloat(propValue);
-        }
         if (propType & 1 /* MEMBER_FLAGS.String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string
@@ -280,6 +276,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -446,6 +448,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
+            callNodeRefs(vnode);
             // remove the vnode's element from the dom
             elm.remove();
         }
@@ -697,6 +700,12 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+const callNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+    }
+};
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -737,17 +746,13 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
     const instance = hostRef.$lazyInstance$ ;
     let promise;
     if (isInitialLoad) {
-        {
-            hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
-            if (hostRef.$queuedListeners$) {
-                hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
-                hostRef.$queuedListeners$ = null;
-            }
-        }
         {
             promise = safeCall(instance, 'componentWillLoad');
         }
     }
+    {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -815,7 +820,11 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     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 */;
         {
@@ -877,6 +886,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$ ;
@@ -889,6 +899,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
@@ -911,6 +937,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;
@@ -1015,6 +1044,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;
             }
@@ -1038,6 +1073,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) {
@@ -1105,24 +1143,12 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
-        else {
-            // not the first time this has connected
-            // reattach any event listeners to the host
-            // since they would have been removed when disconnected
-            addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-        }
         endConnected();
     }
 };
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
-        const hostRef = getHostRef(elm);
-        {
-            if (hostRef.$rmListeners$) {
-                hostRef.$rmListeners$.map((rmListener) => rmListener());
-                hostRef.$rmListeners$ = undefined;
-            }
-        }
+        getHostRef(elm);
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -1150,7 +1176,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 cmpMeta.$members$ = compactMeta[2];
             }
             {
-                cmpMeta.$listeners$ = compactMeta[3];
+                cmpMeta.$watchers$ = {};
             }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
@@ -1217,40 +1243,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
-const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-    if (listeners) {
-        listeners.map(([flags, name, method]) => {
-            const target = getHostListenerTarget(elm, flags) ;
-            const handler = hostListenerProxy(hostRef, method);
-            const opts = hostListenerOpts(flags);
-            plt.ael(target, name, handler, opts);
-            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
-        });
-    }
-};
-const hostListenerProxy = (hostRef, methodName) => (ev) => {
-    try {
-        {
-            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
-                // instance is ready, let's call it's member method for this event
-                hostRef.$lazyInstance$[methodName](ev);
-            }
-            else {
-                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
-            }
-        }
-    }
-    catch (e) {
-        consoleError(e);
-    }
-};
-const getHostListenerTarget = (elm, flags) => {
-    if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
-        return doc;
-    return elm;
-};
-// prettier-ignore
-const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1266,7 +1258,6 @@ const registerHost = (elm, cmpMeta) => {
         elm['s-p'] = [];
         elm['s-rc'] = [];
     }
-    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
     return hostRefs.set(elm, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-901bfd55.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-0350f122.js';
 
 /*
  Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list",[[1,"tttx-list",{"data":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"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]}]]],["tttx-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]]], options);
+  return bootstrapLazy([["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-list",[[1,"tttx-list",{"data":[1025],"name":[1]}]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"inputAutocapitalize":[1,"input-autocapitalize"],"inputAutofocus":[4,"input-autofocus"],"inputKeyhint":[1,"input-keyhint"],"inputIndex":[8,"input-index"],"inputTitle":[1,"input-title"],"autocomplete":[1],"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]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[1032],"submitValue":[1032,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
   });
 };
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-901bfd55.js';
+import { r as registerInstance, h, H as Host } from './index-0350f122.js';
 
 const tttxButtonCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.button{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;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-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}:host{display:inline-block}.spacingleft{margin-left:8px}";
 

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

@@ -0,0 +1,373 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-0350f122.js';
+
+/**
+ * Validates the input field on focusout event by checking its validity state,
+ * sets an error message if there's an issue, and emits a "dataChanged" event to
+ * the parent component with the field name and its new value.
+ *
+ * @param {Event} event - The focusout event triggered by the input field.
+ * @return {void}
+ */
+function 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('');
+  // Check the validity of the input field and set an error message if needed
+  switch (true) {
+    // The field is required, but has no value
+    case target.validity.valueMissing:
+      errorMessage = (_a = target.dataset.required) !== null && _a !== void 0 ? _a : 'This field is required';
+      break;
+    // The field's value does not match the expected pattern
+    case target.validity.patternMismatch:
+      errorMessage = (_b = target.dataset.pattern) !== null && _b !== void 0 ? _b : 'Incorrect format';
+      break;
+    // The field's value is not of the correct input type
+    case target.validity.badInput:
+      // IE string in a number field
+      errorMessage = (_c = target.dataset.badinput) !== null && _c !== void 0 ? _c : 'Wrong input type';
+      break;
+    // The field's value is above or below the range set in the "min" and "max" attributes
+    case 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';
+      break;
+    // No error detected
+    default:
+      hasError = false;
+  }
+  // Return the error state
+  return { target, hasError, errorMessage };
+}
+
+/**
+ * Sets the error state of an input field by updating its class and error message.
+ * If an error was detected, it sets the input field's class to "invalid" and
+ * displays the error message in an error bubble. If no error was detected,
+ * it removes the "invalid" class from the input field and clears the error bubble.
+ *
+ * @param {HTMLInputElement} target - The input field to update.
+ * @param {boolean} hasError - Whether an error was detected in the field.
+ * @param {string} errorMessage - The error message to display (if any).
+ * @return {void}
+ */
+function setErrorState(target, hasError, errorMessage) {
+  // Find the error bubble element for the input field
+  const errorBubble = target.parentElement.querySelector('.errorBubble');
+  // If an error was detected, set the input field's class to "invalid" and display the error message in the error bubble
+  if (hasError) {
+    target.className = 'invalid';
+    const errorIcon = document.createElement('span');
+    // Set the class of the error icon to a pre-defined CSS class that specifies the icon's appearance
+    errorIcon.className = 'material-symbols-rounded';
+    // Set the text content of the error icon to the word "warning"
+    errorIcon.textContent = 'warning';
+    // errorBubble.replaceChildren cannot be used here because the tests don't support this new feature :(
+    errorBubble.innerHTML = '';
+    errorBubble.append(errorIcon);
+    errorBubble.append(errorMessage);
+    // errorBubble.replaceChildren(errorIcon, errorMessage);
+  }
+  // If no error was detected, remove the "invalid" class from the input field and clear the error bubble
+  else {
+    target.className = '';
+    errorBubble.innerHTML = '';
+  }
+}
+
+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{font-family:Roboto, serif;box-sizing:border-box;height:36px;min-width:36px;padding:0;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-content{display:block;padding:0 16px}.icon-left,.icon-right{margin-top:4px}.iconleft{padding-left:8px}.iconleft .button-content{padding-left:4px}.iconright{padding-right:8px}.iconright .button-content{padding-right:4px}.notext{padding:0 6px}.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #D5D5D5}.button:active{background:rgba(17, 17, 17, 0.2);border:1px solid #D5D5D5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:hover{background:#146EB3;border:1px solid #146EB3}.primary:active{background:#1464A2;border:1px solid #1464A2}.borderless{background:transparent;border:none;color:#212121}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.danger{background:#DC0000;border:1px solid #DC0000;color:white}.danger:hover{background:#C60000;border:1px solid #C60000}.danger:active{background:#B00000;border:1px solid #B00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}: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.dataSubmitted = createEvent(this, "dataSubmitted", 7);
+    this.dataChanged = createEvent(this, "dataChanged", 7);
+    // Create a new template element using the HTMLTemplateElement interface.
+    this.template = document.createElement('template');
+    this.formschema = undefined;
+    this.submitValue = undefined;
+  }
+  // This method is called whenever the "formschema" property changes
+  onFormSchemaChange(newValue) {
+    // Check if the new value is a string, indicating that it needs to be parsed
+    if (typeof newValue === 'string') {
+      // Parse the string and set the "_formSchema" property
+      this._formSchema = JSON.parse(newValue);
+    }
+    else {
+      // If the new value is already an object, set the "_formSchema" property directly
+      this._formSchema = newValue;
+    }
+  }
+  /**
+   * Handles the focus event for a form field and emits a "dataChanged" event
+   * to the parent component with the field name and its new value.
+   *
+   * @param {ChangeEvent} event - The focus event triggered by the field.
+   * @return {void}
+   */
+  fieldChanged(event) {
+    // Extract the name and value of the field from the event
+    const fieldName = event.target.name;
+    const fieldValue = event.target.value;
+    // Emit an event to signal that the field's data has changed
+    this.dataChanged.emit({ name: fieldName, value: fieldValue });
+  }
+  /**
+   * Submits the form data to the server.
+   *
+   * @param {SubmitEvent} event - The event object for the form submission.
+   * @returns {void}
+   *
+   * @example
+   * const form = document.getElementById('myForm');
+   * form.addEventListener('submit', (event) => {
+   *   doSubmit(event);
+   * });
+   */
+  doSubmit(event) {
+    // prevent the form from submitting normally
+    event.preventDefault();
+    // create a new FormData object with the form data
+    const formData = new FormData(event.target);
+    // emit the form data through the `dataSubmitted` event
+    this.dataSubmitted.emit(formData);
+  }
+  // This method is called before the component is loaded into the DOM
+  componentWillLoad() {
+    // Initialize the form schema by calling the "onFormSchemaChange" method with the current "formschema" property
+    this.onFormSchemaChange(this.formschema);
+  }
+  // This method is called before the component is rendered
+  componentWillRender() {
+    // Clear the template to account for a potential re-render scenario
+    this.template = document.createElement('template');
+    // Populate the form from the form schema
+    this.populateFormFromSchema();
+  }
+  /**
+   * Creates a new HTMLInputElement with the specified name, type, and placeholder (if any),
+   * and sets its autocomplete and autocapitalization properties to off.
+   *
+   * @param {string} formKey - The name of the input field, as specified in the form schema.
+   * @param {Object} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
+   * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
+   * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
+   * @return {HTMLInputElement} - The new input element.
+   */
+  createInput(formKey, formProperties) {
+    var _a;
+    // Create a new <input> element with the specified name and type
+    const input = document.createElement('input');
+    input.name = formKey;
+    input.type = formProperties.type;
+    // Set the placeholder attribute to the specified value (if any)
+    input.placeholder = (_a = formProperties.placeholder) !== null && _a !== void 0 ? _a : '';
+    // Disable autocomplete and autocapitalization
+    input.autocomplete = 'off';
+    input.autocapitalize = 'off';
+    // Return the input element
+    return input;
+  }
+  /**
+   * Applies validation attributes to an input element based on the specified validation object.
+   * If a certain property is present in the object, it will set the corresponding attribute on
+   * the input element (e.g., "required" will set the "required" and "data-required" attributes,
+   * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
+   *
+   * @param {HTMLInputElement} input - The input element to apply validation attributes to.
+   * @param {Object} validation - An object containing the validation rules for the input field.
+   * @param {Object} [validation.required] - An object containing a "message" property to display if the field is required.
+   * @param {Object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
+   * @param {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
+   * @param {Object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
+   * @param {string} [validation.maxlength] - The maximum length of the input field.
+   * @return {void}
+   */
+  applyValidation(input, validation) {
+    var _a, _b;
+    // If the "required" property is present, add the "required" attribute to the input element and
+    // set its "data-required" attribute to the specified message (if any)
+    if (validation.required) {
+      input.setAttribute('required', '');
+      input.setAttribute('data-required', (_a = validation.required.message) !== null && _a !== void 0 ? _a : '');
+    }
+    // If the "pattern" property is present, add the "pattern" attribute to the input element and set
+    // its "data-pattern" attribute to the specified message (if any)
+    if (validation.pattern) {
+      input.setAttribute('pattern', validation.pattern.pattern);
+      input.setAttribute('data-pattern', (_b = validation.pattern.message) !== null && _b !== void 0 ? _b : '');
+    }
+    // If the "badInput" property is present, set the input element's "data-badinput" attribute to
+    // the specified message
+    if (validation.badInput) {
+      input.setAttribute('data-badinput', validation.badInput.message);
+    }
+    // If the "minmax" property is present, add the "min" and "max" attributes to the input element
+    // and set its "data-range" attribute to the specified message (if any)
+    if (validation.minmax) {
+      input.setAttribute('min', validation.minmax.min);
+      input.setAttribute('max', validation.minmax.max);
+      input.setAttribute('data-range', validation.minmax.message);
+    }
+    // If the "maxlength" property is present, add the "maxlength" attribute to the input element
+    if (validation.maxlength) {
+      input.setAttribute('maxlength', validation.maxlength);
+    }
+  }
+  // Create a new error bubble element
+  createErrorBubble() {
+    // Create a new <div> element with the "errorBubble" class
+    const errorBubble = document.createElement('div');
+    errorBubble.className = 'errorBubble';
+    // Return the error bubble element
+    return errorBubble;
+  }
+  /**
+   * Creates a new <label> element with the "inputBlock" class and the specified label text,
+   * and appends the input element and error bubble element to it. If the form property has
+   * no validation object, it adds an "optional" span element to the label.
+   *
+   * @param {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
+   * @param {HTMLInputElement} input - The input element to associate with the label.
+   * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
+   * @return {HTMLLabelElement} - The new label element.
+   */
+  createLabel(formProperties, input, errorBubble) {
+    // Create a new <label> element with the "inputBlock" class and the specified text
+    const label = document.createElement('label');
+    label.className = 'inputBlock';
+    label.innerText = formProperties.label;
+    // If the form property has no validation object, add an "optional" span element to the label
+    if (!formProperties.validation) {
+      const optionalSpan = document.createElement('span');
+      optionalSpan.className = 'optional';
+      optionalSpan.innerHTML = '&nbsp;(optional)';
+      label.appendChild(optionalSpan);
+    }
+    // Append the input element and error bubble element to the label
+    label.appendChild(input);
+    label.appendChild(errorBubble);
+    // Return the label element
+    return label;
+  }
+  /**
+   * Creates a new <input> element with the "submit" type, the "primary-blue" class, and the
+   * specified label text (i.e., "Save" by default), and returns the new submit button element.
+   *
+   * @return {HTMLInputElement} - The new submit button element.
+   */
+  createSubmitButton() {
+    // Create a new <input> element with the "submit" type and the specified class and value
+    const submitButton = document.createElement('input');
+    submitButton.type = 'submit';
+    submitButton.className = 'button primary-blue';
+    submitButton.value = 'Save';
+    // Return the submit button element
+    return submitButton;
+  }
+  /**
+   * Populates the form template with input fields and labels based on the properties of the
+   * current form schema. For each property in the schema, it creates an input element, applies
+   * any validation rules to it, creates an error bubble and label element, and appends them
+   * to the form template. Finally, it creates and appends a submit button element to the form.
+   *
+   * @return {void}
+   */
+  populateFormFromSchema() {
+    // If there is no form schema, return early
+    if (!this._formSchema)
+      return;
+    // Get the properties of the form schema and their keys
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    // Loop through each property key and create an input, label, and error bubble for it
+    propertyKeys.forEach(formKey => {
+      const formItem = properties[formKey];
+      const formProperties = formItem.form;
+      const input = this.createInput(formKey, formProperties);
+      // If the form property has validation, apply it to the input
+      if (formProperties.validation) {
+        this.applyValidation(input, formProperties.validation);
+      }
+      // Create an error bubble and label element for the input
+      const errorBubble = this.createErrorBubble();
+      const label = this.createLabel(formProperties, input, errorBubble);
+      // Append the label element to the form template
+      this.template.content.append(label);
+    });
+    // Create and append a submit button element to the form template
+    const submitButton = this.createSubmitButton();
+    this.template.content.append(submitButton);
+  }
+  /**
+   * Clones the form template and binds event listeners to its input elements. First, it checks if
+   * there is a form schema present. If so, it clones the template's content, binds events to form
+   * input elements, and appends the cloned form elements to the fieldset. The event listeners include
+   * "oninvalid" (to check input validity on submit), "onblur" (to check input validity on blur),
+   * "onkeyup" (to handle changes in input fields), and "onchange" (to handle changes in select fields).
+   *
+   * @return {void}
+   */
+  componentDidRender() {
+    // If there's no form schema, return
+    if (!this._formSchema) {
+      return;
+    }
+    // Clone the template's content and store it in a variable
+    const formItems = this.template.content.cloneNode(true);
+    // Bind event listeners to form elements
+    const properties = this._formSchema.properties;
+    const propertyKeys = Object.keys(properties);
+    propertyKeys.forEach((formKey) => {
+      const formInput = formItems.querySelector(`[name=${formKey}]`);
+      // Bind events to form input elements
+      formInput.oninvalid = this.validityCheckWrapper.bind(this);
+      formInput.onblur = this.validityCheckWrapper.bind(this);
+      formInput.onkeyup = this.fieldChanged.bind(this);
+      formInput.onchange = this.fieldChanged.bind(this);
+    });
+    // Append the cloned form elements to the fieldset
+    this.fieldset.appendChild(formItems);
+  }
+  validityCheckWrapper(event) {
+    const { target, hasError, errorMessage } = validityCheck(event);
+    setErrorState(target, hasError, errorMessage);
+  }
+  /**
+   * Renders the component's template as a form element with a fieldset container. The form's
+   * "onSubmit" event is bound to the "doSubmit" function, which handles the form submission
+   * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
+   * to the "fieldset" instance variable using a ref, so it can be populated with form elements
+   * later on.
+   *
+   * @return {JSX.Element} - The rendered form template as a JSX element.
+   */
+  render() {
+    return (h(Host, null, h("form", { onSubmit: this.doSubmit.bind(this) }, h("fieldset", { ref: el => (this.fieldset = el) }))));
+  }
+  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 } from './index-901bfd55.js';
+import { r as registerInstance, h, H as Host } from './index-0350f122.js';
 
 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}";