@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522

package/dist/collection/components/text-field/text-field.js

@@ -0,0 +1,594 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { iconEye, iconEyeCancelled } from "@siemens/ix-icons/icons";
+import { Host, h, } from "@stencil/core";
+import { HookValidationLifecycle, } from "../utils/field";
+import { makeRef } from "../utils/make-ref";
+import { InputElement, PostfixSlot, PrefixSlot } from "./input.fc";
+import { applyPostfixPadding, checkAllowedKeys, getAriaAttributesForInput, mapValidationResult, onInputBlur, } from "./text-field.util";
+let textFieldIds = 0;
+/**
+ * @since 2.4.0
+ * @form-ready 2.4.0
+ */
+export class TextField {
+    constructor() {
+        this.inputRef = makeRef();
+        this.postfixRef = makeRef();
+        this.prefixRef = makeRef();
+        this.textFieldId = `text-field-${textFieldIds++}`;
+        this.type = 'text';
+        this.name = undefined;
+        this.placeholder = undefined;
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.helperText = undefined;
+        this.infoText = undefined;
+        this.showTextAsTooltip = undefined;
+        this.validText = undefined;
+        this.warningText = undefined;
+        this.label = undefined;
+        this.invalidText = undefined;
+        this.pattern = undefined;
+        this.maxLength = undefined;
+        this.minLength = undefined;
+        this.allowedCharactersPattern = undefined;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.isInvalidByRequired = false;
+        this.inputType = 'text';
+    }
+    updateClassMappings(result) {
+        mapValidationResult(this, result);
+    }
+    updateInputType() {
+        this.inputType = this.type;
+    }
+    componentWillLoad() {
+        this.updateFormInternalValue(this.value);
+        this.inputType = this.type;
+    }
+    componentDidRender() {
+        setTimeout(() => this.updatePaddings());
+    }
+    updatePaddings() {
+        var _a, _b;
+        const prefixBoundingRect = (_a = this.prefixRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const postfixBoundingRect = (_b = this.postfixRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        if (prefixBoundingRect) {
+            applyPostfixPadding(this.inputRef.current, prefixBoundingRect.width, {
+                postfix: false,
+            });
+        }
+        if (postfixBoundingRect) {
+            applyPostfixPadding(this.inputRef.current, postfixBoundingRect.width, {
+                postfix: true,
+            });
+        }
+    }
+    updateFormInternalValue(value) {
+        this.formInternals.setFormValue(value);
+        this.value = value;
+    }
+    /** @internal */
+    async getAssociatedFormElement() {
+        return this.formInternals.form;
+    }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(!!this.value);
+    }
+    /**
+     * Returns the native input element used in the text field.
+     */
+    getNativeInputElement() {
+        return this.inputRef.waitForCurrent();
+    }
+    render() {
+        var _a;
+        const inputAria = getAriaAttributesForInput(this);
+        return (h(Host, { key: '69e94d66d7a3739e875d03bcdfd919ac92e7cf67', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+            } }, h("ix-field-wrapper", { key: '76b8f9940fa9e3f326bdbef1f75c24b9465dfc24', htmlForLabel: this.textFieldId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("slot", { key: 'be76706fe20f7ac88ff99884456f93f6dcbd96b4', name: "label", slot: "label" }), h("div", { key: '4f0381e2bc0c52b45058b9985b4a1b9c25e3791f', class: "input-wrapper" }, h(PrefixSlot, { key: 'b1811ecb3b2a26d80bfcee41ed91e25ff700c33f', prefixRef: this.prefixRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '615ddcda6868bd0015bea4f4d2a2c7ee66cdc85c', id: this.textFieldId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => onInputBlur(this, this.inputRef.current), ariaAttributes: inputAria }), h(PostfixSlot, { key: '6a0651d8aa7ce74e93f9ab4b50783f2fac888666', postfixRef: this.postfixRef, onSlotChange: () => this.updatePaddings() }, this.type === 'password' && (h("ix-icon-button", { key: '576f6283a6c05faa6ddae9c622ea358b2c026b0c', color: "color-weak-text", class: 'password-eye', ghost: true, icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
+                if (this.inputType === 'password') {
+                    this.inputType = 'text';
+                    return;
+                }
+                this.inputType = 'password';
+            } })))), this.maxLength && (h("ix-typography", { key: '09455f93522242114026a1bad75f7afc68229446', slot: "bottom-right", color: "weak" }, (_a = this.value) === null || _a === void 0 ? void 0 :
+            _a.length, "/", this.maxLength)))));
+    }
+    static get is() { return "ix-text-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["text-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["text-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password'",
+                    "resolved": "\"email\" | \"password\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the text field. Possible values are 'text', 'email', or 'password'."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the text field."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text for the text field."
+                },
+                "attribute": "placeholder",
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the text field."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether the text field is required."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether the text field is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether the text field is readonly."
+                },
+                "attribute": "readonly",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper text for the text field."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The info text for the text field."
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "showTextAsTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether to show the text as a tooltip."
+                },
+                "attribute": "show-text-as-tooltip",
+                "reflect": false
+            },
+            "validText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The valid text for the text field."
+                },
+                "attribute": "valid-text",
+                "reflect": false
+            },
+            "warningText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The warning text for the text field."
+                },
+                "attribute": "warning-text",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the text field."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error text for the text field."
+                },
+                "attribute": "invalid-text",
+                "reflect": false
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The pattern for the text field."
+                },
+                "attribute": "pattern",
+                "reflect": false
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum length of the text field."
+                },
+                "attribute": "max-length",
+                "reflect": false
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum length of the text field."
+                },
+                "attribute": "min-length",
+                "reflect": false
+            },
+            "allowedCharactersPattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The allowed characters pattern for the text field."
+                },
+                "attribute": "allowed-characters-pattern",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isInvalid": {},
+            "isValid": {},
+            "isInfo": {},
+            "isWarning": {},
+            "isInvalidByRequired": {},
+            "inputType": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the value of the text field changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "validityStateChange",
+                "name": "validityStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the validity state of the text field changes."
+                },
+                "complexType": {
+                    "original": "ValidityState",
+                    "resolved": "ValidityState",
+                    "references": {
+                        "ValidityState": {
+                            "location": "global",
+                            "id": "global::ValidityState"
+                        }
+                    }
+                }
+            }, {
+                "method": "ixBlur",
+                "name": "ixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the text field loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getAssociatedFormElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLFormElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLFormElement"
+                        }
+                    },
+                    "return": "Promise<HTMLFormElement>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "hasValidValue": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getNativeInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLInputElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<HTMLInputElement>"
+                },
+                "docs": {
+                    "text": "Returns the native input element used in the text field.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "updateInputType"
+            }];
+    }
+    static get attachInternalsMemberName() { return "formInternals"; }
+}
+__decorate([
+    HookValidationLifecycle()
+], TextField.prototype, "updateClassMappings", null);
+//# sourceMappingURL=text-field.js.map

package/dist/collection/components/text-field/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/field';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, PostfixSlot, PrefixSlot } from './input.fc';\nimport {\n  applyPostfixPadding,\n  checkAllowedKeys,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './text-field.util';\n\nlet textFieldIds = 0;\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.0\n */\n@Component({\n  tag: 'ix-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class TextField implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxTextFieldElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  @State() inputType = 'text';\n\n  private inputRef = makeRef<HTMLInputElement>();\n  private postfixRef = makeRef<HTMLDivElement>();\n  private prefixRef = makeRef<HTMLDivElement>();\n\n  private textFieldId = `text-field-${textFieldIds++}`;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  componentDidRender() {\n    setTimeout(() => this.updatePaddings());\n  }\n\n  private updatePaddings() {\n    const prefixBoundingRect = this.prefixRef.current?.getBoundingClientRect();\n    const postfixBoundingRect =\n      this.postfixRef.current?.getBoundingClientRect();\n\n    if (prefixBoundingRect) {\n      applyPostfixPadding(this.inputRef.current, prefixBoundingRect.width, {\n        postfix: false,\n      });\n    }\n\n    if (postfixBoundingRect) {\n      applyPostfixPadding(this.inputRef.current, postfixBoundingRect.width, {\n        postfix: true,\n      });\n    }\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.waitForCurrent();\n  }\n\n  render() {\n    const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.textFieldId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <slot name=\"label\" slot=\"label\"></slot>\n          <div class=\"input-wrapper\">\n            <PrefixSlot\n              prefixRef={this.prefixRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></PrefixSlot>\n            <InputElement\n              id={this.textFieldId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => onInputBlur(this, this.inputRef.current)}\n              ariaAttributes={inputAria}\n            ></InputElement>\n            <PostfixSlot\n              postfixRef={this.postfixRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              {this.type === 'password' && (\n                <ix-icon-button\n                  color=\"color-weak-text\"\n                  class={'password-eye'}\n                  ghost\n                  icon={\n                    this.inputType === 'password' ? iconEye : iconEyeCancelled\n                  }\n                  onClick={() => {\n                    if (this.inputType === 'password') {\n                      this.inputType = 'text';\n                      return;\n                    }\n\n                    this.inputType = 'password';\n                  }}\n                ></ix-icon-button>\n              )}\n            </PostfixSlot>\n          </div>\n          {this.maxLength && (\n            <ix-typography slot=\"bottom-right\" color=\"weak\">\n              {this.value?.length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"]}