@3t-transform/threeteeui 0.2.74 → 0.2.76

package/dist/types/components/molecules/tttx-form/tttx-form.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+export type FormField = HTMLButtonElement | HTMLInputElement | HTMLOutputElement | HTMLSelectElement | HTMLTextAreaElement;
 export declare class TttxForm {
   private form;
   private fieldset;
@@ -6,23 +7,23 @@ export declare class TttxForm {
   private template;
   private _formSchema;
   private _data;
-  formschema: any;
+  formschema: Record<string, any> | string;
   data: any;
   dataSubmitted: EventEmitter<FormData>;
   dataChanged: EventEmitter<{
     name: string;
     value: any;
   }>;
-  onFormSchemaChange(newValue: any): void;
+  onFormSchemaChange(newValue: Record<string, any> | string): void;
   onDataChange(newValue: any): void;
   /**
    * 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.
+   * @param {KeyboardEvent | Event} event - The focus event triggered by the field.
    * @return {void}
    */
-  fieldChanged(event: any): void;
+  fieldChanged(event: KeyboardEvent | Event): void;
   submit(): Promise<void>;
   /**
    * Submits the form data to the server.
@@ -43,62 +44,108 @@ export declare class TttxForm {
    * Creates a new HTMLSelectElement with a set of options.
    *
    * @param {string} formKey - The name of the dropdown field, as specified in the form schema.
-   * @param {Object} formProperties - An object containing additional properties, such as the field type and options properties.
+   * @param {object} formProperties - An object containing additional properties, such as the field type and options properties.
    * @param {'select'} formProperties.type - The type of form field. In this case, it will always be "select".
-   * @param {Object} formProperties.validation - A set of validation rules for the field.
-   * @param {Object[]} formProperties.options - A list of properties to pass to the select options.
-   * @param {string} formProperties.options.label - The visible value of the option.
-   * @param {string} formProperties.options.value - The actual value of the option.
+   * @param {object} formProperties.validation - A set of validation rules for the field.
+   * @param {Array<{label:string, value:string, placeholder?:boolean}>} formProperties.options - A list of properties to pass to the select options.
+   * @param {string} formProperties.options[].label - The visible value of the option.
+   * @param {string} formProperties.options[].value - The actual value of the option.
+   * @param {boolean} [formProperties.options[].placeholder]
    */
-  createSelect(formKey: string, formProperties: any): HTMLSelectElement;
+  createSelect(formKey: string, formProperties: {
+    type: 'select';
+    validation: object;
+    options: Array<{
+      label: string;
+      value: string;
+      placeholder?: boolean;
+    }>;
+  }): HTMLSelectElement;
   /**
    * Appends an option to a select element
    *
    * @param {HTMLSelectElement} select - The select elements to attach the option to.
-   * @param {value} value - The value of the option.
-   * @param {label} label - The label which will be displayed on the form for the option.
+   * @param {Object} optionProperties
+   * @param {string} optionProperties.value - The value of the option.
+   * @param {string} optionProperties.label - The label which will be displayed on the form for the option.
+   * @param {boolean} [optionProperties.placeholder]
    */
-  appendOption(select: any, optionProperties: any): void;
+  appendOption(select: HTMLSelectElement, optionProperties: {
+    value: string;
+    label: string;
+    placeholder?: boolean;
+  }): void;
   /**
    * 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 {Record<string, any>} 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: any, formProperties: any): HTMLInputElement;
+  createInput(formKey: string, formProperties: Record<string, any>): HTMLInputElement;
   /**
    * 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 {FormField} 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 {string} [validation.required.message]
+   * @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 {string} [validation.pattern.pattern]
+   * @param {string} [validation.pattern.message]
+   * @param {object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
+   * @param {string} [validation.badInput.message]
+   * @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.minmax.min]
+   * @param {string} [validation.minmax.max]
+   * @param {string} [validation.minmax.message]
    * @param {string} [validation.maxlength] - The maximum length of the input field.
    * @return {void}
    */
-  applyValidation(input: any, validation: any): void;
+  applyValidation(input: FormField, validation: {
+    required?: {
+      message?: string;
+    };
+    pattern?: {
+      pattern?: string;
+      message?: string;
+    };
+    badInput?: {
+      message?: string;
+    };
+    minmax?: {
+      min?: string;
+      max?: string;
+      message?: string;
+    };
+    maxlength?: string;
+  }): void;
   createErrorBubble(): HTMLDivElement;
-  appendCheckboxInput(formProperties: any, input: any, label: any): void;
+  /**
+   *
+   * @param {Record<string, any>} formProperties
+   * @param {HTMLInputElement | HTMLSelectElement} input
+   * @param {HTMLLabelElement} label
+   * @returns {void}
+   */
+  appendCheckboxInput(formProperties: Record<string, any>, input: HTMLInputElement | HTMLSelectElement, label: HTMLLabelElement): void;
   /**
    * 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 {Record<string, any>} formProperties - An object containing properties for the form field, including its label text and validation rules.
+   * @param {HTMLInputElement | HTMLSelectElement} 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: any, input: any, errorBubble: any): HTMLLabelElement;
+  createLabel(formProperties: Record<string, any>, input: HTMLInputElement | HTMLSelectElement, errorBubble: HTMLDivElement): HTMLLabelElement;
   /**
    * 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
@@ -118,15 +165,13 @@ export declare class TttxForm {
    * @return {void}
    */
   componentDidRender(): void;
-  validityCheckWrapper(event: any): void;
+  validityCheckWrapper(event: Event | FocusEvent): void;
   /**
    * 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(): any;
 }

package/dist/types/components/molecules/tttx-multiselect-box/interfaces.d.ts

@@ -0,0 +1,6 @@
+export interface SelectItem {
+  value: string;
+  label: string;
+  html?: string;
+  selected: boolean;
+}

package/dist/types/components/molecules/tttx-multiselect-box/tttx-multiselect-box.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SelectItem } from './interfaces';
+export declare class TttxMultiselectBox {
+  optionsData: string | SelectItem[];
+  label: string;
+  inline: boolean;
+  placeholder: string;
+  searchEnabled: boolean;
+  htmlVisibleValue: boolean;
+  visibleValue: string;
+  open: boolean;
+  unsavedSelectedItems: SelectItem[];
+  searchTerm: string;
+  private _optionsData;
+  private bodyOffset;
+  el: any;
+  selectItemEvent: EventEmitter<SelectItem>;
+  toggleOpen: EventEmitter<boolean>;
+  changesApplied: EventEmitter<SelectItem[]>;
+  handleCloseSelectBox(): void;
+  handleBlur(): void;
+  /**
+   * We want to generally clone instances of optionsData, _optionsData and unsavedSelectedItems
+   * This is because they may be assigned from each other, but have different purposes
+   * If we don't clone them, changing one may propagate to the others
+   * JSON.parse/stringify will deep clone them, so the references of the array elements will also change
+   */
+  safelyCloneArray(arr: Array<any>): any;
+  onDropdownClicked(): void;
+  onCancel(): void;
+  applyChanges(): void;
+  onItemSelected(option: SelectItem): void;
+  dropdownSelectorContent(): any;
+  dropdownOption(option: SelectItem): any;
+  handleSearchInput(event: InputEvent): void;
+  calculateDropdownMenuOffset(): void;
+  render(): any;
+}

package/dist/types/components/molecules/tttx-multiselect-box/tttx-multiselect-box.stories.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+  title: string;
+  component: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  decorators: (<T extends import("@storybook/types").Renderer>(storyFn: import("@storybook/types").PartialStoryFn<T, import("@storybook/types").Args>) => T["storyResult"])[];
+};
+export default _default;
+export declare const BasicMultiselectBox: any;
+export declare const HtmlVisibleValueWrap: any;
+export declare const HtmlVisibleValue: any;
+export declare const DialogBoxWithDropdown: any;

package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.stories.d.ts

@@ -1,6 +1,12 @@
 declare const _default: {
   title: string;
   component: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  decorators: (<T extends import("@storybook/types").Renderer>(storyFn: import("@storybook/types").PartialStoryFn<T, import("@storybook/types").Args>) => T["storyResult"])[];
   argTypes: {
     iconleft: {
       options: string[];
@@ -141,3 +147,4 @@ declare const _default: {
 export default _default;
 export declare const InputField: any;
 export declare const searchField: any;
+export declare const dateField: any;

package/dist/types/components.d.ts

@@ -7,8 +7,10 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { DialogItems } from "./components/molecules/tttx-dialog-box/interfaces";
 import { FilterChangeEvent, FilterSettings } from "./components/molecules/tttx-filter/tttx-filter";
+import { KeyBlockValues } from "./components/atoms/tttx-keyvalue-block/tttx-keyvalue-block";
 import { ListItem } from "./components/molecules/tttx-list/interfaces";
-import { SelectItem } from "./components/molecules/tttx-select-box/interfaces";
+import { SelectItem } from "./components/molecules/tttx-multiselect-box/interfaces";
+import { SelectItem as SelectItem1 } from "./components/molecules/tttx-select-box/interfaces";
 import { SorterChangeEvent, SorterData } from "./components/molecules/tttx-sorter/interfaces";
 import { MinMaxDates } from "./components/molecules/tttx-standalone-input/tttx-standalone-input";
 import { Tab } from "./components/molecules/tttx-tabs/interfaces";
@@ -40,7 +42,7 @@ export namespace Components {
     }
     interface TttxForm {
         "data": any;
-        "formschema": any;
+        "formschema": Record<string, any> | string;
         "submit": () => Promise<void>;
     }
     interface TttxIcon {
@@ -49,7 +51,8 @@ export namespace Components {
     }
     interface TttxKeyvalueBlock {
         "horizontal": boolean;
-        "keyvalues": any | any[] | string;
+        "keyvalues": KeyBlockValues | KeyBlockValues[] | string;
+        "spacedout": boolean;
     }
     interface TttxList {
         "data": string | ListItem[];
@@ -59,6 +62,15 @@ export namespace Components {
         "loadingMessage": boolean;
         "size": 'small' | 'large';
     }
+    interface TttxMultiselectBox {
+        "htmlVisibleValue": boolean;
+        "inline": boolean;
+        "label": string;
+        "optionsData": string | SelectItem[];
+        "placeholder": string;
+        "searchEnabled": boolean;
+        "visibleValue": string;
+    }
     interface TttxQrcode {
         "link": string;
         "size": number;
@@ -66,7 +78,7 @@ export namespace Components {
     interface TttxSelectBox {
         "inline": boolean;
         "label": string;
-        "optionsData": string | SelectItem[];
+        "optionsData": string | SelectItem1[];
         "placeholder": string;
         "searchEnabled": boolean;
         "selectedValue": string;
@@ -155,6 +167,10 @@ export interface TttxListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxListElement;
 }
+export interface TttxMultiselectBoxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLTttxMultiselectBoxElement;
+}
 export interface TttxSelectBoxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxSelectBoxElement;
@@ -224,6 +240,12 @@ declare global {
         prototype: HTMLTttxLoadingSpinnerElement;
         new (): HTMLTttxLoadingSpinnerElement;
     };
+    interface HTMLTttxMultiselectBoxElement extends Components.TttxMultiselectBox, HTMLStencilElement {
+    }
+    var HTMLTttxMultiselectBoxElement: {
+        prototype: HTMLTttxMultiselectBoxElement;
+        new (): HTMLTttxMultiselectBoxElement;
+    };
     interface HTMLTttxQrcodeElement extends Components.TttxQrcode, HTMLStencilElement {
     }
     var HTMLTttxQrcodeElement: {
@@ -281,6 +303,7 @@ declare global {
         "tttx-keyvalue-block": HTMLTttxKeyvalueBlockElement;
         "tttx-list": HTMLTttxListElement;
         "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
+        "tttx-multiselect-box": HTMLTttxMultiselectBoxElement;
         "tttx-qrcode": HTMLTttxQrcodeElement;
         "tttx-select-box": HTMLTttxSelectBoxElement;
         "tttx-sorter": HTMLTttxSorterElement;
@@ -322,7 +345,7 @@ declare namespace LocalJSX {
     }
     interface TttxForm {
         "data"?: any;
-        "formschema"?: any;
+        "formschema"?: Record<string, any> | string;
         "onDataChanged"?: (event: TttxFormCustomEvent<{ name: string; value: any }>) => void;
         "onDataSubmitted"?: (event: TttxFormCustomEvent<FormData>) => void;
     }
@@ -332,7 +355,8 @@ declare namespace LocalJSX {
     }
     interface TttxKeyvalueBlock {
         "horizontal"?: boolean;
-        "keyvalues"?: any | any[] | string;
+        "keyvalues"?: KeyBlockValues | KeyBlockValues[] | string;
+        "spacedout"?: boolean;
     }
     interface TttxList {
         "data"?: string | ListItem[];
@@ -344,6 +368,18 @@ declare namespace LocalJSX {
         "loadingMessage"?: boolean;
         "size"?: 'small' | 'large';
     }
+    interface TttxMultiselectBox {
+        "htmlVisibleValue"?: boolean;
+        "inline"?: boolean;
+        "label"?: string;
+        "onChangesApplied"?: (event: TttxMultiselectBoxCustomEvent<SelectItem[]>) => void;
+        "onSelectItemEvent"?: (event: TttxMultiselectBoxCustomEvent<SelectItem>) => void;
+        "onToggleOpen"?: (event: TttxMultiselectBoxCustomEvent<boolean>) => void;
+        "optionsData"?: string | SelectItem[];
+        "placeholder"?: string;
+        "searchEnabled"?: boolean;
+        "visibleValue"?: string;
+    }
     interface TttxQrcode {
         "link"?: string;
         "size"?: number;
@@ -351,9 +387,9 @@ declare namespace LocalJSX {
     interface TttxSelectBox {
         "inline"?: boolean;
         "label"?: string;
-        "onSelectItemEvent"?: (event: TttxSelectBoxCustomEvent<SelectItem>) => void;
+        "onSelectItemEvent"?: (event: TttxSelectBoxCustomEvent<SelectItem1>) => void;
         "onToggleOpen"?: (event: TttxSelectBoxCustomEvent<boolean>) => void;
-        "optionsData"?: string | SelectItem[];
+        "optionsData"?: string | SelectItem1[];
         "placeholder"?: string;
         "searchEnabled"?: boolean;
         "selectedValue"?: string;
@@ -447,6 +483,7 @@ declare namespace LocalJSX {
         "tttx-keyvalue-block": TttxKeyvalueBlock;
         "tttx-list": TttxList;
         "tttx-loading-spinner": TttxLoadingSpinner;
+        "tttx-multiselect-box": TttxMultiselectBox;
         "tttx-qrcode": TttxQrcode;
         "tttx-select-box": TttxSelectBox;
         "tttx-sorter": TttxSorter;
@@ -469,6 +506,7 @@ declare module "@stencil/core" {
             "tttx-keyvalue-block": LocalJSX.TttxKeyvalueBlock & JSXBase.HTMLAttributes<HTMLTttxKeyvalueBlockElement>;
             "tttx-list": LocalJSX.TttxList & JSXBase.HTMLAttributes<HTMLTttxListElement>;
             "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
+            "tttx-multiselect-box": LocalJSX.TttxMultiselectBox & JSXBase.HTMLAttributes<HTMLTttxMultiselectBoxElement>;
             "tttx-qrcode": LocalJSX.TttxQrcode & JSXBase.HTMLAttributes<HTMLTttxQrcodeElement>;
             "tttx-select-box": LocalJSX.TttxSelectBox & JSXBase.HTMLAttributes<HTMLTttxSelectBoxElement>;
             "tttx-sorter": LocalJSX.TttxSorter & JSXBase.HTMLAttributes<HTMLTttxSorterElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.2.74",
+    "version": "0.2.76",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",

package/dist/tttx/p-6fe0af4e.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,H as l}from"./p-3f1b6013.js";const d=class{constructor(i){t(this,i),this.keyvalues=void 0,this.horizontal=void 0}renderSingleElements(t){const l=Object.keys(t),d=[],o=(100/l.length).toString()+"%";for(let r=0;r<l.length;r++)this.horizontal?d.push(i("div",{style:{maxWidth:o}},i("dt",null,l[r]),i("dd",null,t[l[r]]))):(d.push(i("dt",null,l[r])),d.push(i("dd",null,t[l[r]])));return d}renderArrayElements(t){const l=[],d=(100/t.length).toString()+"%";for(let o=0;o<t.length;o++){const r=t[o];this.horizontal?l.push(i("div",{style:{maxWidth:d}},i("dt",{class:"mainTitle"},r.title),i("dt",{class:"subTitle"},r.subTitle),i("dd",null,r.data))):(l.push(i("dt",{class:"mainTitle"},r.title)),l.push(i("dt",{class:"subTitle"},r.subTitle)),l.push(i("dd",null,r.data)))}return l}render(){if(!this.keyvalues)return;let t,d;return t="string"==typeof this.keyvalues?JSON.parse(this.keyvalues):this.keyvalues,d=Array.isArray(t)?this.renderArrayElements(t):this.renderSingleElements(t),i(l,null,i("dl",{class:this.horizontal?"horizontal":null},d))}};d.style=':host{display:block}dl{margin:0;padding:0;font-family:"Roboto", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dt,dd{overflow-wrap:anywhere}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%;max-width:50% !important}}@media (max-width: 600px){dl.horizontal div{width:100%;max-width:100% !important}}';export{d as tttx_keyvalue_block}

package/dist/tttx/p-818574fe.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as n,H as s}from"./p-3f1b6013.js";const o=class{constructor(n){t(this,n),this.valueChanged=i(this,"valueChanged",7),this.focusChanged=i(this,"focusChanged",7),this.blurChanged=i(this,"blurChanged",7),this.invalidChanged=i(this,"invalidChanged",7),this.inputIconClick=i(this,"inputIconClick",7),this.leftIconClick=i(this,"leftIconClick",7),this.rightIconClick=i(this,"rightIconClick",7),this.label=void 0,this.secondarylabel=void 0,this.showerrormsg=void 0,this.showerrorbubble=!0,this.errormsg=void 0,this.iconleft=void 0,this.iconleftcolor="grey",this.iconright=void 0,this.iconrightcolor="grey",this.inputicon=void 0,this.inputiconcolor="grey",this.inline=void 0,this.inputautocapitalize=void 0,this.inputautofocus=void 0,this.inputkeyhint=void 0,this.inputindex=void 0,this.inputtitle=void 0,this.autocomplete=void 0,this.checked=void 0,this.disabled=void 0,this.max=void 0,this.maxlength=void 0,this.min=void 0,this.minlength=void 0,this.name=void 0,this.pattern=void 0,this.placeholder=void 0,this.readonly=void 0,this.required=void 0,this.step=void 0,this.type="text",this.value=void 0}handleChange(t){const i=t.target;this.value=i.value,this.valueChanged.emit(i.value)}handleFocus(t){this.focusChanged.emit(t.target.value)}handleBlur(t){this.blurChanged.emit(t.target.value)}handleInvalid(t){t.preventDefault(),this.invalidChanged.emit(t.target.value)}handleInputIconClick(t){t.preventDefault(),this.inputIconClick.emit()}handleLeftIconClick(t){t.preventDefault(),this.leftIconClick.emit()}handleRightIconClick(t){t.preventDefault(),this.rightIconClick.emit()}render(){const t=["standalone",this.showerrormsg?"invalid":""].join(" ");return n(s,null,n("label",{class:this.inline?"inputInline":"inputBlock"},this.label,this.required?"":n("span",{class:"optional"}," (optional)"),n("div",{class:"input-container"},this.inputicon&&n("tttx-icon",{class:"input-icon",icon:this.inputicon,color:this.inputiconcolor,onClick:this.handleInputIconClick.bind(this)}),this.iconleft&&n("tttx-icon",{id:"icon-left",icon:this.iconleft,color:this.iconleftcolor,onClick:this.handleLeftIconClick.bind(this)}),this.iconright&&n("tttx-icon",{id:"icon-right",icon:this.iconright,color:this.iconrightcolor,onClick:this.handleRightIconClick.bind(this)}),n("input",{class:t,autocapitalize:this.inputautocapitalize,autofocus:this.inputautofocus,enterkeyhint:this.inputkeyhint,tabindex:this.inputindex,title:this.inputtitle,autocomplete:this.autocomplete,checked:this.checked,disabled:this.disabled,max:this.max,maxlength:this.maxlength,min:this.min,minlength:this.minlength,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readonly:this.readonly,required:this.required,step:this.step,type:this.type,value:this.value,onBlur:this.handleBlur.bind(this),onFocus:this.handleFocus.bind(this),onInput:this.handleChange.bind(this),onInvalid:this.handleInvalid.bind(this)}),this.secondarylabel&&n("span",{class:"secondarylabel"},this.secondarylabel),this.showerrorbubble&&n("span",{class:["errorBubble",this.showerrormsg&&this.errormsg?"visible":""].join(" ")},n("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg))))}};o.style='.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-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:normal;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}.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}.input-icon.sc-tttx-standalone-input{position:absolute;margin-top:9px;margin-left:4px}.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;line-height:16px;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;line-height:19px;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.inputInline.sc-tttx-standalone-input{display:flex;white-space:nowrap;align-items:center}label.inputInline.sc-tttx-standalone-input .input-container.sc-tttx-standalone-input{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label.sc-tttx-standalone-input{font-weight:500;font-size:16px;line-height:19px;margin-bottom: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;line-height:19px;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}@media (max-width: 600px){input[type=date].sc-tttx-standalone-input{padding-top:6px}}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}.input-icon.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding:0 32px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){display:none}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px}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}input.sc-tttx-standalone-input:focus{border-color:#1479c6}input.sc-tttx-standalone-input:focus-visible{outline:none}.secondarylabel.sc-tttx-standalone-input{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.inputBlock.readonly.sc-tttx-standalone-input{pointer-events:none;user-select:none;color:gray}input[readonly].sc-tttx-standalone-input{cursor:default;pointer-events:none;user-select:none;color:gray}.sc-tttx-standalone-input-h{display:block}.input-container.sc-tttx-standalone-input{position:relative}#icon-left.sc-tttx-standalone-input{position:absolute;left:8px;top:10px}#icon-left.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-left:36px}#icon-right.sc-tttx-standalone-input{position:absolute;right:8px;top:10px}#icon-right.sc-tttx-standalone-input~input.sc-tttx-standalone-input{padding-right:36px}';export{o as tttx_standalone_input}

package/dist/tttx/p-895526aa.entry.js

@@ -1 +0,0 @@
-import{r as e,c as i,h as t,H as o}from"./p-3f1b6013.js";import{p as n,d as r}from"./p-5ed38d61.js";import"./p-112455b1.js";function a(e,i,t){const o=e.parentElement.querySelector(".errorBubble");if(i){e.classList.add("invalid"),o.classList.add("visible");const i=document.createElement("span");i.className="material-symbols-rounded",i.textContent="warning",o.innerHTML="",o.append(i),o.append(t)}else o.classList.remove("visible"),e.classList.remove("invalid"),o.innerHTML=""}const l=class{constructor(t){e(this,t),this.dataSubmitted=i(this,"dataSubmitted",7),this.dataChanged=i(this,"dataChanged",7),this.template=document.createElement("template"),this.formschema=void 0,this.data=void 0}onFormSchemaChange(e){if(!this.data&&this.form&&this._formSchema){const e=new FormData(this.form);this._data=Object.fromEntries(Object.keys(this._formSchema.properties).map((i=>[i,e.get(i)])))}this._formSchema="string"==typeof e?JSON.parse(e):e}onDataChange(e){this._data="string"==typeof e?JSON.parse(e):e}fieldChanged(e){this.dataChanged.emit({name:e.target.name,value:e.target.value})}async submit(){this.submitButton.click()}doSubmit(e){e.preventDefault();const i=new FormData(e.target);this.dataSubmitted.emit(i)}componentWillLoad(){this.onFormSchemaChange(this.formschema),this.data&&this.onDataChange(this.data)}componentWillRender(){this.template=document.createElement("template"),this.populateFormFromSchema()}createSelect(e,i){const t=document.createElement("select");return t.setAttribute("name",e),i.options.forEach((e=>{this.appendOption(t,e)})),this._data&&this._data[e]&&t.classList.remove("placeholder"),t}appendOption(e,i){const t=document.createElement("option");t.setAttribute("value",i.value),i.placeholder&&(t.setAttribute("disabled",""),t.setAttribute("selected",""),t.setAttribute("hidden",""),e.classList.add("placeholder")),i.label&&(t.innerHTML=n.sanitize(i.label,r)),e.appendChild(t)}createInput(e,i){var t;const o=document.createElement("input");return o.name=e,o.type=i.type,o.placeholder=null!==(t=i.placeholder)&&void 0!==t?t:"",o.autocomplete="off",o.autocapitalize="off",i.readonly&&(o.readOnly=!0),o}applyValidation(e,i){var t,o;i.required&&(e.setAttribute("required",""),e.setAttribute("data-required",null!==(t=i.required.message)&&void 0!==t?t:"")),i.pattern&&(e.setAttribute("pattern",i.pattern.pattern),e.setAttribute("data-pattern",null!==(o=i.pattern.message)&&void 0!==o?o:"")),i.badInput&&e.setAttribute("data-badinput",i.badInput.message),i.minmax&&(e.setAttribute("min",i.minmax.min),e.setAttribute("max",i.minmax.max),e.setAttribute("data-range",i.minmax.message)),i.maxlength&&e.setAttribute("maxlength",i.maxlength)}createErrorBubble(){const e=document.createElement("div");return e.className="errorBubble",e}appendCheckboxInput(e,i,t){if(e.label){const e=document.createElement("br");t.appendChild(e)}if(t.appendChild(i),!e.inlineLabel)return;const o=document.createElement("span");o.className="inlineLabel",o.textContent=e.inlineLabel,t.appendChild(o)}createLabel(e,i,t){const o=document.createElement("label");if(o.className="inputBlock",o.innerText=e.label,!e.validation){const e=document.createElement("span");e.className="optional",e.innerHTML=" (optional)",o.appendChild(e)}return e.readonly&&o.classList.add("readonly"),"checkbox"===e.type?(o.className+=" inlineBlock",this.appendCheckboxInput(e,i,o)):o.appendChild(i),o.appendChild(t),o}populateFormFromSchema(){if(!this._formSchema)return;const e=this._formSchema.properties;Object.keys(e).forEach((i=>{const t=e[i].form,o="select"===t.type?this.createSelect(i,t):this.createInput(i,t);t.validation&&this.applyValidation(o,t.validation);const n=this.createErrorBubble(),r=this.createLabel(t,o,n);this.template.content.append(r)}))}componentDidRender(){if(!this._formSchema)return;const e=this.template.content.cloneNode(!0),i=this._formSchema.properties;Object.keys(i).forEach((t=>{var o;const n=e.querySelector(`[name=${t}]`);if(n.oninvalid=this.validityCheckWrapper.bind(this),n.onblur=this.validityCheckWrapper.bind(this),n.onkeyup=this.fieldChanged.bind(this),n.onchange=this.fieldChanged.bind(this),this._data&&null!=this._data[t]&&(n.value=this._data[t]),null===(o=i[t].form.validation)||void 0===o?void 0:o.invalid){const e=i[t].form.validation.invalid.message;n.setCustomValidity(e),a(n,!0,e)}"select"===i[t].form.type&&n.classList.contains("placeholder")&&n.addEventListener("change",(()=>{n.classList.remove("placeholder")}))})),this.fieldset.replaceChildren(e)}validityCheckWrapper(e){const{target:i,hasError:t,errorMessage:o}=function(e){var i,t,o,n;e.preventDefault();const r=e.target;let a=!0,l="";switch(!0){case r.validity.valueMissing:l=null!==(i=r.dataset.required)&&void 0!==i?i:"This field is required";break;case r.validity.patternMismatch:l=null!==(t=r.dataset.pattern)&&void 0!==t?t:"Incorrect format";break;case r.validity.badInput:l=null!==(o=r.dataset.badinput)&&void 0!==o?o:"Wrong input type";break;case r.validity.rangeOverflow||r.validity.rangeUnderflow:l=null!==(n=r.dataset.range)&&void 0!==n?n:"Invalid value";break;case r.validity.customError:l=r.validationMessage;break;default:a=!1}return{target:r,hasError:a,errorMessage:l}}(e);a(i,t,o)}render(){return t(o,null,t("form",{ref:e=>this.form=e,onSubmit:this.doSubmit.bind(this)},t("fieldset",{ref:e=>this.fieldset=e}),t("input",{type:"submit",ref:e=>this.submitButton=e,style:{display:"none"}})))}static get watchers(){return{formschema:["onFormSchemaChange"],data:["onDataChange"]}}};l.style='.material-symbols-rounded{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.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:normal;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}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.input-icon{position:absolute;margin-top:9px;margin-left:4px}.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;line-height:16px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;line-height:19px;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.inputInline{display:flex;white-space:nowrap;align-items:center}label.inputInline .input-container{margin:0 4px;width:100%;display:flex;align-items:center;gap:4px;position:relative}label{font-weight:500;font-size:16px;line-height:19px;margin-bottom:16px}input:not([type=submit]){font-family:"Roboto", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;line-height:19px;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}@media (max-width: 600px){input[type=date]{padding-top:6px}}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}.input-icon~input{padding:0 32px}input~.errorBubble{position:relative;font-size:14px;line-height:16px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center;margin-top:4px}input~.errorBubble:not(.visible){display:none}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000}input:focus{border-color:#1479c6}input:focus-visible{outline:none}.secondarylabel{color:#757575;font-size:14px;line-height:16px;font-weight:normal;display:flex;margin-top:4px}label.inputBlock.readonly{pointer-events:none;user-select:none;color:gray}input[readonly]{cursor:default;pointer-events:none;user-select:none;color:gray}button{cursor:pointer}.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:active{background:rgba(17, 17, 17, 0.2);border:1px solid #d5d5d5}.primary{background:#1479c6;border:1px solid #1479c6;color:white}.primary:active{background:#1464a2;border:1px solid #1464a2}.borderless{background:transparent;border:none;color:#212121}.borderless:active{background:rgba(17, 17, 17, 0.2);border:none}.borderless-circle{background:transparent;border:none;color:#212121;border-radius:50%}.borderless-circle:active{border:none}.borderless-circle:focus{border-color:transparent}.danger{background:#dc0000;border:1px solid #dc0000;color:white}.danger:active{background:#b00000;border:1px solid #b00000}.disabled{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}.disabled:active{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}@media (hover: hover){.button:hover{background:rgba(17, 17, 17, 0.1);border:1px solid #d5d5d5}.primary:hover{background:#146eb3;border:1px solid #146eb3}.borderless:hover{background:rgba(17, 17, 17, 0.1);border:none}.borderless-circle:hover{background:rgba(17, 17, 17, 0.1);border:none}.danger:hover{background:#c60000;border:1px solid #c60000}.disabled:hover{background:#aeaeae;border:none;color:#4c4c4c;cursor:not-allowed}}:host{display:block}fieldset{margin:0;padding:0;border:none}label.inputBlock.inlineBlock{display:inline-block}.inlineLabel{font-weight:400;display:inline-block;vertical-align:top;padding-top:4px}input[type=checkbox]{width:18px;height:18px}input~label{font-weight:400}select{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}.placeholder{color:#9e9e9e}.placeholder option{color:initial}select.invalid:invalid{border:1px solid #dc0000}select~.errorBubble{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}select~.errorBubble:not(.visible){visibility:hidden}select~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}select.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;visibility:visible}select:focus{border-color:#1479c6}select:focus-visible{outline:none}.button{padding:0 16px}.footer{display:flex;gap:16px;flex-direction:row-reverse}';export{l as tttx_form}