@3t-transform/threeteeui 0.0.22 → 0.0.23

package/dist/types/components.d.ts

@@ -13,41 +13,18 @@ export namespace Components {
         "iconposition": 'left' | 'right';
         "notext": boolean;
     }
-    interface TttxCheckbox {
-        "label": string;
-        "required": boolean;
-        "value": boolean;
-    }
-    interface TttxForm {
-        "formschema": any;
-        "submitValue": any;
-    }
     interface TttxIcon {
         "color": string;
         "icon": string;
     }
-    interface TttxInputCalendar {
-        "months": boolean;
-        "years": boolean;
-    }
     interface TttxKeyvalueBlock {
         "horizontal": boolean;
         "keyvalues": any | any[] | string;
     }
-    interface TttxList {
-        "name": string;
-        "selectable": boolean;
-    }
     interface TttxLoadingSpinner {
         "loadingMessage": boolean;
         "size": 'small' | 'large';
     }
-    interface TttxPopoverContent {
-        "body": string;
-        "header": string;
-        "linkcontext": string;
-        "linktext": string;
-    }
     interface TttxStandaloneInput {
         "autocomplete": 'off' | 'on';
         "checked": boolean;
@@ -83,33 +60,11 @@ export namespace Components {
         "type": string;
         "value": string | number;
     }
-    interface TttxTable {
-        "data": any[];
-        "headers": any[];
-        "loading": boolean;
-        "selected": number;
-    }
-}
-export interface TttxCheckboxCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLTttxCheckboxElement;
-}
-export interface TttxFormCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLTttxFormElement;
-}
-export interface TttxListCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLTttxListElement;
 }
 export interface TttxStandaloneInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxStandaloneInputElement;
 }
-export interface TttxTableCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLTttxTableElement;
-}
 declare global {
     interface HTMLTttxButtonElement extends Components.TttxButton, HTMLStencilElement {
     }
@@ -117,78 +72,36 @@ declare global {
         prototype: HTMLTttxButtonElement;
         new (): HTMLTttxButtonElement;
     };
-    interface HTMLTttxCheckboxElement extends Components.TttxCheckbox, HTMLStencilElement {
-    }
-    var HTMLTttxCheckboxElement: {
-        prototype: HTMLTttxCheckboxElement;
-        new (): HTMLTttxCheckboxElement;
-    };
-    interface HTMLTttxFormElement extends Components.TttxForm, HTMLStencilElement {
-    }
-    var HTMLTttxFormElement: {
-        prototype: HTMLTttxFormElement;
-        new (): HTMLTttxFormElement;
-    };
     interface HTMLTttxIconElement extends Components.TttxIcon, HTMLStencilElement {
     }
     var HTMLTttxIconElement: {
         prototype: HTMLTttxIconElement;
         new (): HTMLTttxIconElement;
     };
-    interface HTMLTttxInputCalendarElement extends Components.TttxInputCalendar, HTMLStencilElement {
-    }
-    var HTMLTttxInputCalendarElement: {
-        prototype: HTMLTttxInputCalendarElement;
-        new (): HTMLTttxInputCalendarElement;
-    };
     interface HTMLTttxKeyvalueBlockElement extends Components.TttxKeyvalueBlock, HTMLStencilElement {
     }
     var HTMLTttxKeyvalueBlockElement: {
         prototype: HTMLTttxKeyvalueBlockElement;
         new (): HTMLTttxKeyvalueBlockElement;
     };
-    interface HTMLTttxListElement extends Components.TttxList, HTMLStencilElement {
-    }
-    var HTMLTttxListElement: {
-        prototype: HTMLTttxListElement;
-        new (): HTMLTttxListElement;
-    };
     interface HTMLTttxLoadingSpinnerElement extends Components.TttxLoadingSpinner, HTMLStencilElement {
     }
     var HTMLTttxLoadingSpinnerElement: {
         prototype: HTMLTttxLoadingSpinnerElement;
         new (): HTMLTttxLoadingSpinnerElement;
     };
-    interface HTMLTttxPopoverContentElement extends Components.TttxPopoverContent, HTMLStencilElement {
-    }
-    var HTMLTttxPopoverContentElement: {
-        prototype: HTMLTttxPopoverContentElement;
-        new (): HTMLTttxPopoverContentElement;
-    };
     interface HTMLTttxStandaloneInputElement extends Components.TttxStandaloneInput, HTMLStencilElement {
     }
     var HTMLTttxStandaloneInputElement: {
         prototype: HTMLTttxStandaloneInputElement;
         new (): HTMLTttxStandaloneInputElement;
     };
-    interface HTMLTttxTableElement extends Components.TttxTable, HTMLStencilElement {
-    }
-    var HTMLTttxTableElement: {
-        prototype: HTMLTttxTableElement;
-        new (): HTMLTttxTableElement;
-    };
     interface HTMLElementTagNameMap {
         "tttx-button": HTMLTttxButtonElement;
-        "tttx-checkbox": HTMLTttxCheckboxElement;
-        "tttx-form": HTMLTttxFormElement;
         "tttx-icon": HTMLTttxIconElement;
-        "tttx-input-calendar": HTMLTttxInputCalendarElement;
         "tttx-keyvalue-block": HTMLTttxKeyvalueBlockElement;
-        "tttx-list": HTMLTttxListElement;
         "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
-        "tttx-popover-content": HTMLTttxPopoverContentElement;
         "tttx-standalone-input": HTMLTttxStandaloneInputElement;
-        "tttx-table": HTMLTttxTableElement;
     }
 }
 declare namespace LocalJSX {
@@ -198,47 +111,18 @@ declare namespace LocalJSX {
         "iconposition"?: 'left' | 'right';
         "notext"?: boolean;
     }
-    interface TttxCheckbox {
-        "label"?: string;
-        "onValueChanged"?: (event: TttxCheckboxCustomEvent<boolean>) => void;
-        "required"?: boolean;
-        "value"?: boolean;
-    }
-    interface TttxForm {
-        "formschema"?: any;
-        "onDataChanged"?: (event: TttxFormCustomEvent<{ name: string, value: any }>) => void;
-        "onDataSubmitted"?: (event: TttxFormCustomEvent<FormData>) => void;
-        "submitValue"?: any;
-    }
     interface TttxIcon {
         "color"?: string;
         "icon"?: string;
     }
-    interface TttxInputCalendar {
-        "months"?: boolean;
-        "years"?: boolean;
-    }
     interface TttxKeyvalueBlock {
         "horizontal"?: boolean;
         "keyvalues"?: any | any[] | string;
     }
-    interface TttxList {
-        "name"?: string;
-        "onListItemClick"?: (event: TttxListCustomEvent<any>) => void;
-        "onListPaginate"?: (event: TttxListCustomEvent<any>) => void;
-        "onListSelectedEvent"?: (event: TttxListCustomEvent<any>) => void;
-        "selectable"?: boolean;
-    }
     interface TttxLoadingSpinner {
         "loadingMessage"?: boolean;
         "size"?: 'small' | 'large';
     }
-    interface TttxPopoverContent {
-        "body"?: string;
-        "header"?: string;
-        "linkcontext"?: string;
-        "linktext"?: string;
-    }
     interface TttxStandaloneInput {
         "autocomplete"?: 'off' | 'on';
         "checked"?: boolean;
@@ -278,26 +162,12 @@ declare namespace LocalJSX {
         "type"?: string;
         "value"?: string | number;
     }
-    interface TttxTable {
-        "data"?: any[];
-        "headers"?: any[];
-        "loading"?: boolean;
-        "onHeaderClicked"?: (event: TttxTableCustomEvent<any>) => void;
-        "onRowSelected"?: (event: TttxTableCustomEvent<any>) => void;
-        "selected"?: number;
-    }
     interface IntrinsicElements {
         "tttx-button": TttxButton;
-        "tttx-checkbox": TttxCheckbox;
-        "tttx-form": TttxForm;
         "tttx-icon": TttxIcon;
-        "tttx-input-calendar": TttxInputCalendar;
         "tttx-keyvalue-block": TttxKeyvalueBlock;
-        "tttx-list": TttxList;
         "tttx-loading-spinner": TttxLoadingSpinner;
-        "tttx-popover-content": TttxPopoverContent;
         "tttx-standalone-input": TttxStandaloneInput;
-        "tttx-table": TttxTable;
     }
 }
 export { LocalJSX as JSX };
@@ -305,16 +175,10 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "tttx-button": LocalJSX.TttxButton & JSXBase.HTMLAttributes<HTMLTttxButtonElement>;
-            "tttx-checkbox": LocalJSX.TttxCheckbox & JSXBase.HTMLAttributes<HTMLTttxCheckboxElement>;
-            "tttx-form": LocalJSX.TttxForm & JSXBase.HTMLAttributes<HTMLTttxFormElement>;
             "tttx-icon": LocalJSX.TttxIcon & JSXBase.HTMLAttributes<HTMLTttxIconElement>;
-            "tttx-input-calendar": LocalJSX.TttxInputCalendar & JSXBase.HTMLAttributes<HTMLTttxInputCalendarElement>;
             "tttx-keyvalue-block": LocalJSX.TttxKeyvalueBlock & JSXBase.HTMLAttributes<HTMLTttxKeyvalueBlockElement>;
-            "tttx-list": LocalJSX.TttxList & JSXBase.HTMLAttributes<HTMLTttxListElement>;
             "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
-            "tttx-popover-content": LocalJSX.TttxPopoverContent & JSXBase.HTMLAttributes<HTMLTttxPopoverContentElement>;
             "tttx-standalone-input": LocalJSX.TttxStandaloneInput & JSXBase.HTMLAttributes<HTMLTttxStandaloneInputElement>;
-            "tttx-table": LocalJSX.TttxTable & JSXBase.HTMLAttributes<HTMLTttxTableElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.0.22",
+    "version": "0.0.23",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -18,7 +18,7 @@
         "build": "stencil build --docs",
         "start": "stencil build --watch --serve",
         "test": "stencil test --spec --e2e",
-        "coverage": "yarn test -- --coverage --no-cache",
+        "coverage": "yarn test --coverage --no-cache",
         "test.watch": "stencil test --spec --e2e --watchAll",
         "generate": "stencil generate",
         "storybook": "storybook dev -p 6006",

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

@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf777121.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}.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) {
-    index.registerInstance(this, hostRef);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.value = undefined;
-    this.label = undefined;
-    this.required = undefined;
-  }
-  handleClick(event) {
-    const target = event.target;
-    this.value = target.checked;
-    this.valueChanged.emit(target.checked);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && (index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : '')), index.h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
-  }
-};
-TttxCheckbox.style = tttxCheckboxCss;
-
-exports.tttx_checkbox = TttxCheckbox;

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

@@ -1,374 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf777121.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{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) {
-    index.registerInstance(this, hostRef);
-    this.dataSubmitted = index.createEvent(this, "dataSubmitted", 7);
-    this.dataChanged = index.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 {FocusEvent} 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 });
-  }
-  /**
-   * 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 {FocusEvent} event - The focusout event triggered by the input field.
-   * @return {void}
-   */
-  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;
-    }
-    // Set the error state of the input field based on the error message and whether an error was detected
-    this.setErrorState(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}
-   */
-  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 = this.createErrorIcon();
-      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.replaceChildren();
-    }
-  }
-  // Create an error icon element to display in the error bubble of an input field
-  createErrorIcon() {
-    // Create a new <span> element to serve as the error icon
-    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';
-    // Return the error icon element
-    return errorIcon;
-  }
-  /**
-   * 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.validityCheck.bind(this);
-      formInput.onblur = this.validityCheck.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);
-  }
-  /**
-   * 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 (index.h(index.Host, null, index.h("form", { onSubmit: this.doSubmit.bind(this) }, index.h("fieldset", { ref: el => (this.fieldset = el) }))));
-  }
-  static get watchers() { return {
-    "formschema": ["onFormSchemaChange"]
-  }; }
-};
-TttxForm.style = tttxFormCss;
-
-exports.tttx_form = TttxForm;