@3t-transform/threeteeui 0.0.19 → 0.0.20

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autofocus":[4],"inputIndex":[8,"input-index"],"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-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
   });
 };
 

package/dist/cjs/tttx-keyvalue-block.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bf777121.js');
 
-const tttxKeyvalueBlockCss = ":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}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: 1025px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
+const tttxKeyvalueBlockCss = ":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}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%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
 
 const TttxKeyvalueBlock = class {
   constructor(hostRef) {

package/dist/cjs/tttx-standalone-input.cjs.entry.js

@@ -12,14 +12,16 @@ const TttxInput = class {
     this.valueChanged = index.createEvent(this, "valueChanged", 7);
     this.focusChanged = index.createEvent(this, "focusChanged", 7);
     this.blurChanged = index.createEvent(this, "blurChanged", 7);
+    this.invalidChanged = index.createEvent(this, "invalidChanged", 7);
     this.label = undefined;
     this.showerrormsg = undefined;
     this.errormsg = undefined;
     this.iconleft = undefined;
     this.iconright = undefined;
     this.autocapitalize = undefined;
-    this.autocomplete = undefined;
     this.autofocus = undefined;
+    this.inputIndex = undefined;
+    this.autocomplete = undefined;
     this.checked = undefined;
     this.disabled = undefined;
     this.max = undefined;
@@ -48,87 +50,13 @@ const TttxInput = class {
     const target = event.target;
     this.blurChanged.emit(target.value);
   }
+  handleInvalid(event) {
+    const target = event.target;
+    this.invalidChanged.emit(target.value);
+  }
   render() {
     const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (index.h(index.Host, null, index.h("label", { class: 'inputBlock' }, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.iconleft, color: "grey" }))), index.h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'datepickers' ||
-        this.type === 'range' ||
-        this.type === 'color'
-        ? this.autocomplete
-        : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.max
-        : null, maxlength: this.maxlength, min: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.min
-        : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
-        this.type === 'date' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password'
-        ? this.pattern
-        : null, placeholder: this.type === 'text' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'url' ||
-        this.type === 'password' ||
-        this.type === 'search'
-        ? this.placeholder
-        : null, readonly: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number'
-        ? this.readonly
-        : null, required: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'checkbox' ||
-        this.type === 'radio' ||
-        this.type === 'file'
-        ? this.required
-        : null, step: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.step
-        : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.iconright, color: "grey" }))), index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+    return (index.h(index.Host, null, index.h("label", { class: 'inputBlock' }, this.label, !this.required ? index.h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.iconleft, color: "grey" }))), index.h("input", { class: classNames, autocapitalize: this.autocapitalize, autofocus: this.autofocus, tabindex: this.inputIndex, 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.iconright && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.iconright, color: "grey" }))), index.h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
   }
 };
 TttxInput.style = tttxStandaloneInputCss;

package/dist/cjs/tttx.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["tttx-input-calendar.cjs",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table.cjs",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list.cjs",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input.cjs",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autofocus":[4],"inputIndex":[8,"input-index"],"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-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block.cjs",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button.cjs",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.css

@@ -42,7 +42,7 @@ dl.horizontal div {
   flex-grow: 1;
 }
 
-@media (max-width: 1025px) {
+@media (max-width: 769px) {
   dl.horizontal {
     flex-wrap: wrap;
   }

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

@@ -8,8 +8,9 @@ export class TttxInput {
     this.iconleft = undefined;
     this.iconright = undefined;
     this.autocapitalize = undefined;
-    this.autocomplete = undefined;
     this.autofocus = undefined;
+    this.inputIndex = undefined;
+    this.autocomplete = undefined;
     this.checked = undefined;
     this.disabled = undefined;
     this.max = undefined;
@@ -38,87 +39,13 @@ export class TttxInput {
     const target = event.target;
     this.blurChanged.emit(target.value);
   }
+  handleInvalid(event) {
+    const target = event.target;
+    this.invalidChanged.emit(target.value);
+  }
   render() {
     const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'datepickers' ||
-        this.type === 'range' ||
-        this.type === 'color'
-        ? this.autocomplete
-        : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.max
-        : null, maxlength: this.maxlength, min: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.min
-        : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
-        this.type === 'date' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password'
-        ? this.pattern
-        : null, placeholder: this.type === 'text' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'url' ||
-        this.type === 'password' ||
-        this.type === 'search'
-        ? this.placeholder
-        : null, readonly: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number'
-        ? this.readonly
-        : null, required: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'checkbox' ||
-        this.type === 'radio' ||
-        this.type === 'file'
-        ? this.required
-        : null, step: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.step
-        : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+    return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.autocapitalize, autofocus: this.autofocus, tabindex: this.inputIndex, 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.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
   }
   static get is() { return "tttx-standalone-input"; }
   static get encapsulation() { return "scoped"; }
@@ -236,12 +163,12 @@ export class TttxInput {
         "attribute": "autocapitalize",
         "reflect": false
       },
-      "autocomplete": {
-        "type": "string",
+      "autofocus": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "'off' | 'on'",
-          "resolved": "\"off\" | \"on\"",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -250,15 +177,38 @@ export class TttxInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "autocomplete",
+        "attribute": "autofocus",
         "reflect": false
       },
-      "autofocus": {
-        "type": "boolean",
+      "inputIndex": {
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": "<caption>In HTML (like `index.html`)</caption>\n<tttx-standalone-input input-index=\"1\" />"
+            }, {
+              "name": "example",
+              "text": "<caption>In TSX files</caption>\n<tttx-standalone-input inputIndex={1} />"
+            }],
+          "text": "tabindex - Allows the HTML elements to be focusable"
+        },
+        "attribute": "input-index",
+        "reflect": false
+      },
+      "autocomplete": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'off' | 'on'",
+          "resolved": "\"off\" | \"on\"",
           "references": {}
         },
         "required": false,
@@ -267,7 +217,7 @@ export class TttxInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "autofocus",
+        "attribute": "autocomplete",
         "reflect": false
       },
       "checked": {
@@ -565,6 +515,21 @@ export class TttxInput {
           "resolved": "string",
           "references": {}
         }
+      }, {
+        "method": "invalidChanged",
+        "name": "invalidChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
       }];
   }
 }

package/dist/components/tttx-keyvalue-block.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const tttxKeyvalueBlockCss = ":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}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: 1025px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
+const tttxKeyvalueBlockCss = ":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}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%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
 
 const TttxKeyvalueBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -10,14 +10,16 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.valueChanged = createEvent(this, "valueChanged", 7);
     this.focusChanged = createEvent(this, "focusChanged", 7);
     this.blurChanged = createEvent(this, "blurChanged", 7);
+    this.invalidChanged = createEvent(this, "invalidChanged", 7);
     this.label = undefined;
     this.showerrormsg = undefined;
     this.errormsg = undefined;
     this.iconleft = undefined;
     this.iconright = undefined;
     this.autocapitalize = undefined;
-    this.autocomplete = undefined;
     this.autofocus = undefined;
+    this.inputIndex = undefined;
+    this.autocomplete = undefined;
     this.checked = undefined;
     this.disabled = undefined;
     this.max = undefined;
@@ -46,87 +48,13 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const target = event.target;
     this.blurChanged.emit(target.value);
   }
+  handleInvalid(event) {
+    const target = event.target;
+    this.invalidChanged.emit(target.value);
+  }
   render() {
     const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'datepickers' ||
-        this.type === 'range' ||
-        this.type === 'color'
-        ? this.autocomplete
-        : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.max
-        : null, maxlength: this.maxlength, min: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.min
-        : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
-        this.type === 'date' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password'
-        ? this.pattern
-        : null, placeholder: this.type === 'text' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'url' ||
-        this.type === 'password' ||
-        this.type === 'search'
-        ? this.placeholder
-        : null, readonly: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number'
-        ? this.readonly
-        : null, required: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'checkbox' ||
-        this.type === 'radio' ||
-        this.type === 'file'
-        ? this.required
-        : null, step: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.step
-        : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+    return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.autocapitalize, autofocus: this.autofocus, tabindex: this.inputIndex, 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.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
   }
   static get style() { return tttxStandaloneInputCss; }
 }, [2, "tttx-standalone-input", {
@@ -136,8 +64,9 @@ const TttxInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "iconleft": [1],
     "iconright": [1],
     "autocapitalize": [1],
-    "autocomplete": [1],
     "autofocus": [4],
+    "inputIndex": [8, "input-index"],
+    "autocomplete": [1],
     "checked": [4],
     "disabled": [4],
     "max": [8],

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["tttx-input-calendar",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  return bootstrapLazy([["tttx-input-calendar",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autofocus":[4],"inputIndex":[8,"input-index"],"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-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
   });
 };
 

package/dist/esm/tttx-keyvalue-block.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-a05bd606.js';
 
-const tttxKeyvalueBlockCss = ":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}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: 1025px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
+const tttxKeyvalueBlockCss = ":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}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%}}@media (max-width: 600px){dl.horizontal div{width:100%}}";
 
 const TttxKeyvalueBlock = class {
   constructor(hostRef) {

package/dist/esm/tttx-standalone-input.entry.js

@@ -8,14 +8,16 @@ const TttxInput = class {
     this.valueChanged = createEvent(this, "valueChanged", 7);
     this.focusChanged = createEvent(this, "focusChanged", 7);
     this.blurChanged = createEvent(this, "blurChanged", 7);
+    this.invalidChanged = createEvent(this, "invalidChanged", 7);
     this.label = undefined;
     this.showerrormsg = undefined;
     this.errormsg = undefined;
     this.iconleft = undefined;
     this.iconright = undefined;
     this.autocapitalize = undefined;
-    this.autocomplete = undefined;
     this.autofocus = undefined;
+    this.inputIndex = undefined;
+    this.autocomplete = undefined;
     this.checked = undefined;
     this.disabled = undefined;
     this.max = undefined;
@@ -44,87 +46,13 @@ const TttxInput = class {
     const target = event.target;
     this.blurChanged.emit(target.value);
   }
+  handleInvalid(event) {
+    const target = event.target;
+    this.invalidChanged.emit(target.value);
+  }
   render() {
     const classNames = ['standalone', this.showerrormsg ? 'invalid' : ''].join(' ');
-    return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.type === 'url' || this.type === 'email' || this.type === 'password' ? this.autocapitalize : null, autofocus: this.autofocus, autocomplete: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'datepickers' ||
-        this.type === 'range' ||
-        this.type === 'color'
-        ? this.autocomplete
-        : null, checked: this.type === 'checkbox' || this.type === 'radio' ? this.checked : null, disabled: !this.required ? this.disabled : null, max: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.max
-        : null, maxlength: this.maxlength, min: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.min
-        : null, minlength: this.minlength, name: this.name, pattern: this.type === 'text' ||
-        this.type === 'date' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password'
-        ? this.pattern
-        : null, placeholder: this.type === 'text' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'url' ||
-        this.type === 'password' ||
-        this.type === 'search'
-        ? this.placeholder
-        : null, readonly: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number'
-        ? this.readonly
-        : null, required: this.type === 'text' ||
-        this.type === 'search' ||
-        this.type === 'url' ||
-        this.type === 'tel' ||
-        this.type === 'email' ||
-        this.type === 'password' ||
-        this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'checkbox' ||
-        this.type === 'radio' ||
-        this.type === 'file'
-        ? this.required
-        : null, step: this.type === 'date' ||
-        this.type === 'month' ||
-        this.type === 'week' ||
-        this.type === 'time' ||
-        this.type === 'datetime-local' ||
-        this.type === 'number' ||
-        this.type === 'range'
-        ? this.step
-        : null, type: this.type, value: this.value, onBlur: this.handleBlur.bind(this), onFocus: this.handleFocus.bind(this), onInput: this.handleChange.bind(this) }), this.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
+    return (h(Host, null, h("label", { class: 'inputBlock' }, this.label, !this.required ? h("span", { class: "optional" }, "\u00A0(optional)") : '', this.iconleft && (h("div", { class: "icon-left" }, h("tttx-icon", { icon: this.iconleft, color: "grey" }))), h("input", { class: classNames, autocapitalize: this.autocapitalize, autofocus: this.autofocus, tabindex: this.inputIndex, 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.iconright && (h("div", { class: "icon-right" }, h("tttx-icon", { icon: this.iconright, color: "grey" }))), h("span", { class: ['errorBubble', this.showerrormsg && this.errormsg ? 'visible' : ''].join(' ') }, h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
   }
 };
 TttxInput.style = tttxStandaloneInputCss;

package/dist/esm/tttx.js

@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["tttx-input-calendar",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autocomplete":[1],"autofocus":[4],"checked":[4],"disabled":[4],"max":[8],"maxlength":[8],"min":[8],"minlength":[8],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[8],"required":[4],"step":[8],"type":[1],"value":[1032]}]]],["tttx-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
+  return bootstrapLazy([["tttx-input-calendar",[[1,"tttx-input-calendar",{"months":[4],"years":[4],"showCalendar":[32],"selectedYear":[32],"selectedMonth":[32]}]]],["tttx-table",[[1,"tttx-table",{"headers":[16],"data":[16],"loading":[4],"selected":[2]},[[4,"keydown","handleKeyDown"]]]]],["tttx-list",[[1,"tttx-list",{"name":[1],"selectable":[4],"items":[32],"selectedIds":[32],"loading":[32],"lastPage":[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["tttx-standalone-input",[[2,"tttx-standalone-input",{"label":[1],"showerrormsg":[4],"errormsg":[1],"iconleft":[1],"iconright":[1],"autocapitalize":[1],"autofocus":[4],"inputIndex":[8,"input-index"],"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-checkbox",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form",[[1,"tttx-form",{"formschema":[8],"submitValue":[8,"submit-value"]}]]],["tttx-keyvalue-block",[[1,"tttx-keyvalue-block",{"keyvalues":[8],"horizontal":[4]}]]],["tttx-button",[[1,"tttx-button",{"notext":[4],"icon":[1],"iconposition":[1],"design":[1]}]]],["tttx-loading-spinner",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon",[[1,"tttx-icon",{"icon":[1],"color":[1]}]]]], options);
 });

package/dist/tttx/p-08790243.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as n,H as s}from"./p-07b134af.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.label=void 0,this.showerrormsg=void 0,this.errormsg=void 0,this.iconleft=void 0,this.iconright=void 0,this.autocapitalize=void 0,this.autofocus=void 0,this.inputIndex=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){this.invalidChanged.emit(t.target.value)}render(){const t=["standalone",this.showerrormsg?"invalid":""].join(" ");return n(s,null,n("label",{class:"inputBlock"},this.label,this.required?"":n("span",{class:"optional"}," (optional)"),this.iconleft&&n("div",{class:"icon-left"},n("tttx-icon",{icon:this.iconleft,color:"grey"})),n("input",{class:t,autocapitalize:this.autocapitalize,autofocus:this.autofocus,tabindex:this.inputIndex,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.iconright&&n("div",{class:"icon-right"},n("tttx-icon",{icon:this.iconright,color:"grey"})),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-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:"Roboto", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}';export{o as tttx_standalone_input}

package/dist/tttx/{p-224213ae.entry.js → p-9536b8c4.entry.js}

@@ -1 +1 @@
-import{r as t,h as l,H as i}from"./p-07b134af.js";const d=class{constructor(l){t(this,l),this.keyvalues=void 0,this.horizontal=void 0}renderSingleElements(t){const i=Object.keys(t),d=[];for(let o=0;o<i.length;o++)this.horizontal?d.push(l("div",null,l("dt",null,i[o]),l("dd",null,t[i[o]]))):(d.push(l("dt",null,i[o])),d.push(l("dd",null,t[i[o]])));return d}renderArrayElements(t){const i=[];for(let d=0;d<t.length;d++){const o=t[d];this.horizontal?i.push(l("div",null,l("dt",{class:"mainTitle"},o.title),l("dt",{class:"subTitle"},o.subTitle),l("dd",null,o.data))):(i.push(l("dt",{class:"mainTitle"},o.title)),i.push(l("dt",{class:"subTitle"},o.subTitle)),i.push(l("dd",null,o.data)))}return i}render(){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),l(i,null,l("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}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: 1025px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%}}@media (max-width: 600px){dl.horizontal div{width:100%}}';export{d as tttx_keyvalue_block}
+import{r as t,h as l,H as i}from"./p-07b134af.js";const d=class{constructor(l){t(this,l),this.keyvalues=void 0,this.horizontal=void 0}renderSingleElements(t){const i=Object.keys(t),d=[];for(let o=0;o<i.length;o++)this.horizontal?d.push(l("div",null,l("dt",null,i[o]),l("dd",null,t[i[o]]))):(d.push(l("dt",null,i[o])),d.push(l("dd",null,t[i[o]])));return d}renderArrayElements(t){const i=[];for(let d=0;d<t.length;d++){const o=t[d];this.horizontal?i.push(l("div",null,l("dt",{class:"mainTitle"},o.title),l("dt",{class:"subTitle"},o.subTitle),l("dd",null,o.data))):(i.push(l("dt",{class:"mainTitle"},o.title)),i.push(l("dt",{class:"subTitle"},o.subTitle)),i.push(l("dd",null,o.data)))}return i}render(){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),l(i,null,l("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}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%}}@media (max-width: 600px){dl.horizontal div{width:100%}}';export{d as tttx_keyvalue_block}

package/dist/tttx/tttx.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-07b134af.js";export{s as setNonce}from"./p-07b134af.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-45afb84c",[[1,"tttx-input-calendar",{months:[4],years:[4],showCalendar:[32],selectedYear:[32],selectedMonth:[32]}]]],["p-a96ca037",[[1,"tttx-table",{headers:[16],data:[16],loading:[4],selected:[2]},[[4,"keydown","handleKeyDown"]]]]],["p-a92ca87e",[[1,"tttx-list",{name:[1],selectable:[4],items:[32],selectedIds:[32],loading:[32],lastPage:[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["p-e3cc75bb",[[2,"tttx-standalone-input",{label:[1],showerrormsg:[4],errormsg:[1],iconleft:[1],iconright:[1],autocapitalize:[1],autocomplete:[1],autofocus:[4],checked:[4],disabled:[4],max:[8],maxlength:[8],min:[8],minlength:[8],name:[1],pattern:[1],placeholder:[1],readonly:[8],required:[4],step:[8],type:[1],value:[1032]}]]],["p-f579ed1e",[[1,"tttx-checkbox",{value:[4],label:[1],required:[4]}]]],["p-1b63f16a",[[1,"tttx-form",{formschema:[8],submitValue:[8,"submit-value"]}]]],["p-224213ae",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-68ff0f39",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],design:[1]}]]],["p-93763d3c",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-037d286f",[[1,"tttx-popover-content",{header:[1],body:[1],linkcontext:[1],linktext:[1]}]]],["p-a5808741",[[1,"tttx-icon",{icon:[1],color:[1]}]]]],e)));
+import{p as e,b as t}from"./p-07b134af.js";export{s as setNonce}from"./p-07b134af.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-45afb84c",[[1,"tttx-input-calendar",{months:[4],years:[4],showCalendar:[32],selectedYear:[32],selectedMonth:[32]}]]],["p-a96ca037",[[1,"tttx-table",{headers:[16],data:[16],loading:[4],selected:[2]},[[4,"keydown","handleKeyDown"]]]]],["p-a92ca87e",[[1,"tttx-list",{name:[1],selectable:[4],items:[32],selectedIds:[32],loading:[32],lastPage:[32]},[[4,"listPageLoad","listLoadHandler"],[4,"listClearDataCache","listClearDataCacheHandler"],[4,"listActionSelectedEvent","listActionSelectedEventHandler"]]]]],["p-08790243",[[2,"tttx-standalone-input",{label:[1],showerrormsg:[4],errormsg:[1],iconleft:[1],iconright:[1],autocapitalize:[1],autofocus:[4],inputIndex:[8,"input-index"],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]}]]],["p-f579ed1e",[[1,"tttx-checkbox",{value:[4],label:[1],required:[4]}]]],["p-1b63f16a",[[1,"tttx-form",{formschema:[8],submitValue:[8,"submit-value"]}]]],["p-9536b8c4",[[1,"tttx-keyvalue-block",{keyvalues:[8],horizontal:[4]}]]],["p-68ff0f39",[[1,"tttx-button",{notext:[4],icon:[1],iconposition:[1],design:[1]}]]],["p-93763d3c",[[1,"tttx-loading-spinner",{loadingMessage:[1028,"loading-message"],size:[1025]}]]],["p-037d286f",[[1,"tttx-popover-content",{header:[1],body:[1],linkcontext:[1],linktext:[1]}]]],["p-a5808741",[[1,"tttx-icon",{icon:[1],color:[1]}]]]],e)));

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

@@ -12,8 +12,16 @@ export declare class TttxInput {
   iconleft: string;
   iconright: string;
   autocapitalize: string;
-  autocomplete: 'off' | 'on';
   autofocus: boolean;
+  /**
+   * tabindex - Allows the HTML elements to be focusable
+   * @example <caption>In HTML (like `index.html`)</caption>
+   * <tttx-standalone-input input-index="1" />
+   * @example <caption>In TSX files</caption>
+   * <tttx-standalone-input inputIndex={1} />
+   */
+  inputIndex: string | number;
+  autocomplete: 'off' | 'on';
   checked: boolean;
   disabled: boolean;
   max: MinMaxDates | number;
@@ -34,5 +42,7 @@ export declare class TttxInput {
   handleFocus(event: Event | InputEvent): void;
   blurChanged: EventEmitter<string>;
   handleBlur(event: Event | InputEvent): void;
+  invalidChanged: EventEmitter<string>;
+  handleInvalid(event: Event | InputEvent): void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -57,6 +57,12 @@ export namespace Components {
         "errormsg": string;
         "iconleft": string;
         "iconright": string;
+        /**
+          * tabindex - Allows the HTML elements to be focusable
+          * @example <caption>In HTML (like `index.html`)</caption> <tttx-standalone-input input-index="1" />
+          * @example <caption>In TSX files</caption> <tttx-standalone-input inputIndex={1} />
+         */
+        "inputIndex": string | number;
         "label": string;
         "max": MinMaxDates | number;
         "maxlength": string | number;
@@ -237,6 +243,12 @@ declare namespace LocalJSX {
         "errormsg"?: string;
         "iconleft"?: string;
         "iconright"?: string;
+        /**
+          * tabindex - Allows the HTML elements to be focusable
+          * @example <caption>In HTML (like `index.html`)</caption> <tttx-standalone-input input-index="1" />
+          * @example <caption>In TSX files</caption> <tttx-standalone-input inputIndex={1} />
+         */
+        "inputIndex"?: string | number;
         "label"?: string;
         "max"?: MinMaxDates | number;
         "maxlength"?: string | number;
@@ -245,6 +257,7 @@ declare namespace LocalJSX {
         "name"?: string;
         "onBlurChanged"?: (event: TttxStandaloneInputCustomEvent<string>) => void;
         "onFocusChanged"?: (event: TttxStandaloneInputCustomEvent<string>) => void;
+        "onInvalidChanged"?: (event: TttxStandaloneInputCustomEvent<string>) => void;
         "onValueChanged"?: (event: TttxStandaloneInputCustomEvent<string>) => void;
         "pattern"?: string;
         "placeholder"?: string;

package/package.json

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

package/dist/tttx/p-e3cc75bb.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,H as n}from"./p-07b134af.js";const e=class{constructor(s){t(this,s),this.valueChanged=i(this,"valueChanged",7),this.focusChanged=i(this,"focusChanged",7),this.blurChanged=i(this,"blurChanged",7),this.label=void 0,this.showerrormsg=void 0,this.errormsg=void 0,this.iconleft=void 0,this.iconright=void 0,this.autocapitalize=void 0,this.autocomplete=void 0,this.autofocus=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)}render(){const t=["standalone",this.showerrormsg?"invalid":""].join(" ");return s(n,null,s("label",{class:"inputBlock"},this.label,this.required?"":s("span",{class:"optional"}," (optional)"),this.iconleft&&s("div",{class:"icon-left"},s("tttx-icon",{icon:this.iconleft,color:"grey"})),s("input",{class:t,autocapitalize:"url"===this.type||"email"===this.type||"password"===this.type?this.autocapitalize:null,autofocus:this.autofocus,autocomplete:"text"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type||"datepickers"===this.type||"range"===this.type||"color"===this.type?this.autocomplete:null,checked:"checkbox"===this.type||"radio"===this.type?this.checked:null,disabled:this.required?null:this.disabled,max:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.max:null,maxlength:this.maxlength,min:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.min:null,minlength:this.minlength,name:this.name,pattern:"text"===this.type||"date"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type?this.pattern:null,placeholder:"text"===this.type||"tel"===this.type||"email"===this.type||"url"===this.type||"password"===this.type||"search"===this.type?this.placeholder:null,readonly:"text"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type||"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type?this.readonly:null,required:"text"===this.type||"search"===this.type||"url"===this.type||"tel"===this.type||"email"===this.type||"password"===this.type||"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"checkbox"===this.type||"radio"===this.type||"file"===this.type?this.required:null,step:"date"===this.type||"month"===this.type||"week"===this.type||"time"===this.type||"datetime-local"===this.type||"number"===this.type||"range"===this.type?this.step:null,type:this.type,value:this.value,onBlur:this.handleBlur.bind(this),onFocus:this.handleFocus.bind(this),onInput:this.handleChange.bind(this)}),this.iconright&&s("div",{class:"icon-right"},s("tttx-icon",{icon:this.iconright,color:"grey"})),s("span",{class:["errorBubble",this.showerrormsg&&this.errormsg?"visible":""].join(" ")},s("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg)))}};e.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-family:"Material Symbols Rounded", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-input:not([type=submit]){font-family:"Roboto", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}';export{e as tttx_standalone_input}