@sapudex/web-components 0.226.0 → 2.1.0

package/dist/TextArea.js

@@ -10,9 +10,8 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { READ_ONLY, TEXTAREA_CHARACTERS_LEFT, TEXT_FIELD, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_STANDARD, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_WARNING, } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
@@ -35,11 +34,74 @@ let UDExTextArea = UDExTextArea_1 = class UDExTextArea extends UI5Element {
     constructor() {
         super(...arguments);
         this._labelActiveClassName = "udex-textarea__label--active";
+        /**
+         * Defines label text for the textarea field.
+         *
+         * @default ""
+         * @public
+         */
+        this.label = "";
+        /**
+         * Defines the value of the component.
+         * <br><br>
+         * <b>Note:</b> The property is updated upon typing.
+         *
+         * @default ""
+         * @public
+         */
+        this.value = "";
+        /**
+         * Defines the maximum number of lines that the component can grow.
+         *
+         * @default 0
+         * @public
+         */
+        this.growingMaxLines = 0;
+        /**
+         * Defines supporting text under the input field.
+         *
+         * @default ""
+         * @public
+         */
+        this.supportingText = "";
+        /**
+         * Defines the value state of the component.
+         *
+         * @default "Standard"
+         * @public
+         */
+        this.valueState = ValueState.Standard;
+        /**
+         * Defines the inner stored value of the classes of the label.
+         *
+         * @default ""
+         * @private
+         */
+        this.labelClasses = "";
+        /**
+         * Defines the inner stored class of the label.
+         *
+         * @default ""
+         * @private
+         */
+        this.labelActiveClass = "";
+        /**
+         * Defines the accessible ARIA name of the component.
+         * @default ""
+         * @public
+         */
+        this.accessibleName = "";
+        /**
+         * Receives id (or many ids) of the elements that label the component.
+         * @default ""
+         * @public
+         */
+        this.accessibleNameRef = "";
         this.handleInput = (event) => {
             this.value = event.target?.value;
         };
         this.handleChange = () => {
-            this.fireEvent("change");
+            this.fireDecoratorEvent("change");
         };
         this.handleGrowing = () => {
             if (this.growing) {
@@ -79,8 +141,8 @@ let UDExTextArea = UDExTextArea_1 = class UDExTextArea extends UI5Element {
             this.active = false;
         };
     }
-    static async onDefine() {
-        UDExTextArea_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
+    getInputDomRef() {
+        return this.getDomRef().querySelector("textarea");
     }
     onBeforeRendering() {
         if (this.value && this.labelActiveClass === "") {
@@ -97,28 +159,28 @@ let UDExTextArea = UDExTextArea_1 = class UDExTextArea extends UI5Element {
             this._isTouched = true;
         }
     }
-    getInputDomRef() {
-        return this.getDomRef().querySelector("textarea");
+    get ariaInvalid() {
+        return this.valueState === ValueState.Error ? "true" : null;
     }
     get hasValueState() {
-        return this.fieldState === ValueState.Error || this.fieldState === ValueState.Warning || this.fieldState === ValueState.Success;
+        return this.valueState === ValueState.Error || this.valueState === ValueState.Warning || this.valueState === ValueState.Success;
     }
-    get fieldStateTypeMappings() {
+    get valueStateTypeMappings() {
         return {
-            "Success": UDExTextArea_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
-            "Standard": UDExTextArea_1.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
-            "Error": UDExTextArea_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-            "Warning": UDExTextArea_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+            [ValueState.Success]: UDExTextArea_1.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+            [ValueState.Standard]: UDExTextArea_1.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
+            [ValueState.Error]: UDExTextArea_1.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+            [ValueState.Warning]: UDExTextArea_1.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
         };
     }
     get ariaValueStateHiddenText() {
         if (!this.hasValueState) {
             return;
         }
-        if (this.fieldState === ValueState.Standard) {
+        if (this.valueState === ValueState.Standard) {
             return;
         }
-        return `${this.fieldStateTypeMappings[this.fieldState]}`;
+        return `${this.valueStateTypeMappings[this.valueState]}`;
     }
     get readOnlyText() {
         return UDExTextArea_1.i18nBundle.getText(READ_ONLY);
@@ -144,9 +206,6 @@ let UDExTextArea = UDExTextArea_1 = class UDExTextArea extends UI5Element {
             }
         }
     }
-    get ariaInvalid() {
-        return this.fieldState === ValueState.Error ? "true" : null;
-    }
     get textHiddenLabel() {
         return UDExTextArea_1.i18nBundle.getText(TEXT_FIELD);
     }
@@ -158,23 +217,23 @@ __decorate([
     property({ type: String })
 ], UDExTextArea.prototype, "value", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], UDExTextArea.prototype, "rows", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExTextArea.prototype, "growing", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 0 })
+    property({ type: Number })
 ], UDExTextArea.prototype, "growingMaxLines", void 0);
 __decorate([
     property({ type: String })
 ], UDExTextArea.prototype, "supportingText", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], UDExTextArea.prototype, "maxlength", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.Standard })
-], UDExTextArea.prototype, "fieldState", void 0);
+    property()
+], UDExTextArea.prototype, "valueState", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExTextArea.prototype, "required", void 0);
@@ -200,7 +259,7 @@ __decorate([
     property()
 ], UDExTextArea.prototype, "accessibleName", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], UDExTextArea.prototype, "accessibleNameRef", void 0);
 __decorate([
     property({ type: Boolean })
@@ -208,6 +267,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExTextArea.prototype, "_isTouched", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExTextArea, "i18nBundle", void 0);
 UDExTextArea = UDExTextArea_1 = __decorate([
     customElement({
         tag: "udex-textarea",

package/dist/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../src/TextArea.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport {\n  READ_ONLY,\n  TEXTAREA_CHARACTERS_LEFT,\n  TEXT_FIELD,\n  VALUE_STATE_TYPE_ERROR,\n  VALUE_STATE_TYPE_STANDARD,\n  VALUE_STATE_TYPE_SUCCESS,\n  VALUE_STATE_TYPE_WARNING,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\n\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport ValueState from \"./types/common.js\";\nimport TextAreaTemplate from \"./generated/templates/TextAreaTemplate.lit.js\";\n\n// Styles\nimport TextAreaCss from \"./generated/themes/TextArea.css.js\";\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-text-area\n * @public\n */\n@customElement({\n  tag: \"udex-textarea\",\n  renderer: litRender,\n  styles: [TextAreaCss, getEffectiveScrollbarStyle()],\n  template: TextAreaTemplate,\n  dependencies: [UDExStatusMessage],\n})\n\nclass UDExTextArea extends UI5Element {\n  _labelActiveClassName = \"udex-textarea__label--active\";\n\n  /**\n   * Defines label text for the textarea field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines the value of the component.\n   * <br><br>\n   * <b>Note:</b> The property is updated upon typing.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    value!: string;\n\n  /**\n   * Defines the number of visible text lines for the component.\n   * <br><br>\n   * <b>Notes:</b>\n   * <ul>\n   * <li>If the <code>growing</code> property is enabled, this property defines the minimum rows to be displayed\n   * in the textarea.</li>\n   * <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property({ validator: Integer })\n    rows!: number;\n\n  /**\n   * Enables the component to automatically grow and shrink dynamically with its content.\n   * <br><br>\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    growing!: boolean;\n\n  /**\n   * Defines the maximum number of lines that the component can grow.\n   *\n   * @default 0\n   * @public\n   */\n  @property({ validator: Integer, defaultValue: 0 })\n    growingMaxLines!: number;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Sets the maximum number of characters available in the textarea.\n   *\n   * @public\n   */\n  @property({ validator: Integer })\n    maxlength?: number;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property({ type: ValueState, defaultValue: ValueState.Standard })\n    fieldState!: `${ValueState}`;\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is display-only.\n   * <br><br>\n   * <b>Note:</b> A display-only component is not editable,\n   * but still provides visual feedback upon user interaction, input border is not visible.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the inner stored value of the readonly attribute of the input.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isInputReadonly!: boolean;\n\n  /**\n   * Defines the inner stored value of the classes of the label.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    labelClasses!: string;\n\n  /**\n   * Defines the inner stored class of the label.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    labelActiveClass!: string;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleName!: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleNameRef!: string;\n\n  /**\n   * Defines the active (focus)\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    active!: boolean;\n  /**\n   * Defines is it the touch of the textarea (only for mobile devices).\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isTouched!: boolean;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExTextArea.i18nBundle = await getI18nBundle(\"@sapudex/web-components\");\n  }\n\n  onBeforeRendering() {\n    if (this.value && this.labelActiveClass === \"\") {\n      this.labelActiveClass = this._labelActiveClassName;\n    }\n\n    this.isInputReadonly = this.readonly || this.displayonly;\n\n    this.labelClasses = `udex-textarea__label ${this.labelActiveClass}`;\n  }\n\n  onAfterRendering() {\n    this.handleGrowing();\n  }\n\n  handleInput = (event: InputEvent) => {\n    this.value = (event.target as HTMLInputElement)?.value;\n  };\n\n  handleChange = () => {\n    this.fireEvent(\"change\");\n  };\n\n  handleGrowing = () => {\n    if (this.growing) {\n      const nativeTextArea = this.getInputDomRef();\n\n      if (!this.rows) {\n        this.rows = 1;\n      }\n      nativeTextArea.style.height = \"auto\";\n      // 2px - to avoid an unnecessary scrollbar, the border needs to be taken into account\n      nativeTextArea.style.height = `${nativeTextArea.scrollHeight + 2}px`;\n\n      if (this.growingMaxLines) {\n        const style = getComputedStyle(nativeTextArea);\n\n        const lineHeight = parseInt(style.lineHeight);\n        const paddingTop = parseInt(style.paddingTop);\n        const paddingBottom = parseInt(style.paddingBottom);\n\n        const heightRatio = this.growingMaxLines > this.rows ? this.growingMaxLines : this.rows;\n\n        const growingMaxHeight = lineHeight * heightRatio + paddingTop + paddingBottom;\n\n        // 2px - to avoid an unnecessary scrollbar, the border needs to be taken into account\n        nativeTextArea.style.maxHeight = `${growingMaxHeight + 2}px`;\n      }\n    }\n  };\n\n  handleFocus = () => {\n    if (!this.disabled && !this.readonly && !this.displayonly) {\n      this.active = true;\n      this.labelActiveClass = this._labelActiveClassName;\n    }\n  };\n\n  handleClick(): void {\n    if (!isDesktop()) {\n      this._isTouched = true;\n    }\n  }\n\n  handleBlur = () => {\n    this._isTouched = false;\n    if (this.value) {\n      this.labelActiveClass = this._labelActiveClassName;\n    } else {\n      this.labelActiveClass = \"\";\n    }\n    this.active = false;\n  };\n\n  getInputDomRef() {\n    return this.getDomRef()!.querySelector<HTMLTextAreaElement>(\"textarea\")!;\n  }\n\n  get hasValueState(): boolean {\n    return this.fieldState === ValueState.Error || this.fieldState === ValueState.Warning || this.fieldState === ValueState.Success;\n  }\n\n  get fieldStateTypeMappings(): Record<string, string> {\n    return {\n      \"Success\": UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),\n      \"Standard\": UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),\n      \"Error\": UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),\n      \"Warning\": UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),\n    };\n  }\n\n  get ariaValueStateHiddenText(): string | undefined {\n    if (!this.hasValueState) {\n      return;\n    }\n\n    if (this.fieldState === ValueState.Standard) {\n      return;\n    }\n\n    return `${this.fieldStateTypeMappings[this.fieldState]}`;\n  }\n\n  get readOnlyText(): string {\n    return UDExTextArea.i18nBundle.getText(READ_ONLY);\n  }\n\n  get ariaDescribedBy(): string | undefined {\n    const valueStateTextDescId = this.hasValueState ? `${this._id}-valueStateDesc` : \"\";\n    const readonlyTextDescId = this.readonly ? `${this._id}-readonlyDesc` : \"\";\n    const supportingTextDescId = this._supportingText ? `${this._id}-supportingTextDesc` : \"\";\n    if (!valueStateTextDescId && !supportingTextDescId && !readonlyTextDescId) {\n      return;\n    }\n    return `${valueStateTextDescId} ${supportingTextDescId} ${readonlyTextDescId}`;\n  }\n\n  get _supportingText(): string | undefined {\n    if (this.supportingText.length) {\n      return this.supportingText;\n    }\n\n    const maxLength = this.maxlength;\n\n    if (maxLength !== null && maxLength !== undefined) {\n      const leftCharactersCount = maxLength - this.value.length;\n\n      if (leftCharactersCount >= 0) {\n        return UDExTextArea.i18nBundle.getText(TEXTAREA_CHARACTERS_LEFT, leftCharactersCount);\n      }\n    }\n  }\n\n  get ariaInvalid(): string | null {\n    return this.fieldState === ValueState.Error ? \"true\" : null;\n  }\n\n  get textHiddenLabel(): string {\n    return UDExTextArea.i18nBundle.getText(TEXT_FIELD);\n  }\n}\n\nUDExTextArea.define();\n\nexport default UDExTextArea;\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../src/TextArea.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  READ_ONLY,\n  TEXTAREA_CHARACTERS_LEFT,\n  TEXT_FIELD,\n  VALUE_STATE_TYPE_ERROR,\n  VALUE_STATE_TYPE_STANDARD,\n  VALUE_STATE_TYPE_SUCCESS,\n  VALUE_STATE_TYPE_WARNING,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\n\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport ValueState from \"./types/common.js\";\nimport TextAreaTemplate from \"./generated/templates/TextAreaTemplate.lit.js\";\n\n// Styles\nimport TextAreaCss from \"./generated/themes/TextArea.css.js\";\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-text-area\n * @public\n */\n@customElement({\n  tag: \"udex-textarea\",\n  renderer: litRender,\n  styles: [TextAreaCss, getEffectiveScrollbarStyle()],\n  template: TextAreaTemplate,\n  dependencies: [UDExStatusMessage],\n})\n\nclass UDExTextArea extends UI5Element {\n  eventDetails!: {\n    \"change\": void,\n  };\n\n  _labelActiveClassName = \"udex-textarea__label--active\";\n\n  /**\n   * Defines label text for the textarea field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label: string = \"\";\n\n  /**\n   * Defines the value of the component.\n   * <br><br>\n   * <b>Note:</b> The property is updated upon typing.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    value: string = \"\";\n\n  /**\n   * Defines the number of visible text lines for the component.\n   * <br><br>\n   * <b>Notes:</b>\n   * <ul>\n   * <li>If the <code>growing</code> property is enabled, this property defines the minimum rows to be displayed\n   * in the textarea.</li>\n   * <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property({ type: Number })\n    rows!: number;\n\n  /**\n   * Enables the component to automatically grow and shrink dynamically with its content.\n   * <br><br>\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    growing!: boolean;\n\n  /**\n   * Defines the maximum number of lines that the component can grow.\n   *\n   * @default 0\n   * @public\n   */\n  @property({ type: Number })\n    growingMaxLines: number = 0;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText: string = \"\";\n\n  /**\n   * Sets the maximum number of characters available in the textarea.\n   *\n   * @public\n   */\n  @property({ type: Number })\n    maxlength?: number;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${ValueState}` = ValueState.Standard;\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is display-only.\n   * <br><br>\n   * <b>Note:</b> A display-only component is not editable,\n   * but still provides visual feedback upon user interaction, input border is not visible.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the inner stored value of the readonly attribute of the input.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isInputReadonly!: boolean;\n\n  /**\n   * Defines the inner stored value of the classes of the label.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    labelClasses: string = \"\";\n\n  /**\n   * Defines the inner stored class of the label.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    labelActiveClass: string = \"\";\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleName: string = \"\";\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleNameRef: string = \"\";\n\n  /**\n   * Defines the active (focus)\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    active!: boolean;\n  /**\n   * Defines is it the touch of the textarea (only for mobile devices).\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isTouched!: boolean;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  getInputDomRef() {\n    return this.getDomRef()!.querySelector<HTMLTextAreaElement>(\"textarea\")!;\n  }\n\n  onBeforeRendering() {\n    if (this.value && this.labelActiveClass === \"\") {\n      this.labelActiveClass = this._labelActiveClassName;\n    }\n\n    this.isInputReadonly = this.readonly || this.displayonly;\n\n    this.labelClasses = `udex-textarea__label ${this.labelActiveClass}`;\n  }\n\n  onAfterRendering() {\n    this.handleGrowing();\n  }\n\n  handleInput = (event: InputEvent) => {\n    this.value = (event.target as HTMLInputElement)?.value;\n  };\n\n  handleChange = () => {\n    this.fireDecoratorEvent(\"change\");\n  };\n\n  handleGrowing = () => {\n    if (this.growing) {\n      const nativeTextArea = this.getInputDomRef();\n\n      if (!this.rows) {\n        this.rows = 1;\n      }\n      nativeTextArea.style.height = \"auto\";\n      // 2px - to avoid an unnecessary scrollbar, the border needs to be taken into account\n      nativeTextArea.style.height = `${nativeTextArea.scrollHeight + 2}px`;\n\n      if (this.growingMaxLines) {\n        const style = getComputedStyle(nativeTextArea);\n\n        const lineHeight = parseInt(style.lineHeight);\n        const paddingTop = parseInt(style.paddingTop);\n        const paddingBottom = parseInt(style.paddingBottom);\n\n        const heightRatio = this.growingMaxLines > this.rows ? this.growingMaxLines : this.rows;\n\n        const growingMaxHeight = lineHeight * heightRatio + paddingTop + paddingBottom;\n\n        // 2px - to avoid an unnecessary scrollbar, the border needs to be taken into account\n        nativeTextArea.style.maxHeight = `${growingMaxHeight + 2}px`;\n      }\n    }\n  };\n\n  handleFocus = () => {\n    if (!this.disabled && !this.readonly && !this.displayonly) {\n      this.active = true;\n      this.labelActiveClass = this._labelActiveClassName;\n    }\n  };\n\n  handleClick(): void {\n    if (!isDesktop()) {\n      this._isTouched = true;\n    }\n  }\n\n  handleBlur = () => {\n    this._isTouched = false;\n    if (this.value) {\n      this.labelActiveClass = this._labelActiveClassName;\n    } else {\n      this.labelActiveClass = \"\";\n    }\n    this.active = false;\n  };\n\n  get ariaInvalid(): string | null {\n    return this.valueState === ValueState.Error ? \"true\" : null;\n  }\n\n  get hasValueState(): boolean {\n    return this.valueState === ValueState.Error || this.valueState === ValueState.Warning || this.valueState === ValueState.Success;\n  }\n\n  get valueStateTypeMappings() {\n    return {\n      [ValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),\n      [ValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),\n      [ValueState.Error]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),\n      [ValueState.Warning]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),\n    };\n  }\n\n  get ariaValueStateHiddenText(): string | undefined {\n    if (!this.hasValueState) {\n      return;\n    }\n\n    if (this.valueState === ValueState.Standard) {\n      return;\n    }\n\n    return `${this.valueStateTypeMappings[this.valueState]}`;\n  }\n\n  get readOnlyText(): string {\n    return UDExTextArea.i18nBundle.getText(READ_ONLY);\n  }\n\n  get ariaDescribedBy(): string | undefined {\n    const valueStateTextDescId = this.hasValueState ? `${this._id}-valueStateDesc` : \"\";\n    const readonlyTextDescId = this.readonly ? `${this._id}-readonlyDesc` : \"\";\n    const supportingTextDescId = this._supportingText ? `${this._id}-supportingTextDesc` : \"\";\n    if (!valueStateTextDescId && !supportingTextDescId && !readonlyTextDescId) {\n      return;\n    }\n    return `${valueStateTextDescId} ${supportingTextDescId} ${readonlyTextDescId}`;\n  }\n\n  get _supportingText(): string | undefined {\n    if (this.supportingText.length) {\n      return this.supportingText;\n    }\n\n    const maxLength = this.maxlength;\n\n    if (maxLength !== null && maxLength !== undefined) {\n      const leftCharactersCount = maxLength - this.value.length;\n\n      if (leftCharactersCount >= 0) {\n        return UDExTextArea.i18nBundle.getText(TEXTAREA_CHARACTERS_LEFT, leftCharactersCount);\n      }\n    }\n  }\n\n  get textHiddenLabel(): string {\n    return UDExTextArea.i18nBundle.getText(TEXT_FIELD);\n  }\n}\n\nUDExTextArea.define();\n\nexport default UDExTextArea;\n"]}

package/dist/TextField.d.ts

@@ -8,6 +8,9 @@ type AccInfo = {
     ariaLabel?: string;
     ariaHasPopup?: string;
 };
+export type UDExTextFieldKeydownEventDetail = {
+    keyboardEvent: KeyboardEvent;
+};
 /**
  * @class
  *
@@ -17,6 +20,12 @@ type AccInfo = {
  * @public
  */
 declare class UDExTextField extends UI5Element {
+    eventDetails: {
+        "keydown": UDExTextFieldKeydownEventDetail;
+        "input": void;
+        "change": void;
+        "click-icon": void;
+    };
     _labelActiveClassName: string;
     /**
      * Defines whether the component is in disabled state.
@@ -142,12 +151,6 @@ declare class UDExTextField extends UI5Element {
      * @private
      */
     labelActiveClass: string;
-    /**
-     * Defines the behaviour of autocomplete.
-     * @default "off"
-     * @public
-     */
-    autocomplete: string;
     /**
      * Defines the inner stored value of the readonly attribute of the input.
      *
@@ -168,7 +171,7 @@ declare class UDExTextField extends UI5Element {
      * @default "text"
      * @private
      */
-    type: string;
+    type: "Text" | "Email" | "Number" | "Password" | "Tel" | "URL" | "Search";
     /**
      * Defines direction of the input.
      *
@@ -185,6 +188,7 @@ declare class UDExTextField extends UI5Element {
     min?: number;
     /**
      * Defines the step for the "number" type of the input.
+     * @default undefined
      */
     step?: number;
     /**
@@ -206,7 +210,6 @@ declare class UDExTextField extends UI5Element {
      */
     _isTouched: boolean;
     static i18nBundle: I18nBundle;
-    static onDefine(): Promise<void>;
     get valueStateTypeMappings(): Record<string, string>;
     get hasValueState(): boolean;
     get valueStateText(): string | undefined;
@@ -216,8 +219,6 @@ declare class UDExTextField extends UI5Element {
     get valueStateTextId(): string;
     get readOnlyStateTextId(): string;
     get accInfo(): AccInfo;
-    get inputRole(): string | undefined;
-    get isAutoCompleteDisabled(): boolean;
     handleKeydown(e: KeyboardEvent): void;
     handleChange: () => void;
     handleInput: (inputEvent: InputEvent) => void;

package/dist/TextField.js

@@ -9,18 +9,16 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import Float from "@ui5/webcomponents-base/dist/types/Float.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_WARNING, VALUE_STATE_ERROR, READ_ONLY, } from "./generated/i18n/i18n-defaults.js";
 import UDExControlButton from "./ControlButton.js";
 import ValueState from "./types/common.js";
 import UDExStatusMessage from "./StatusMessage.js";
 // Template
-import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit";
+import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit.js";
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
 /**
@@ -35,8 +33,67 @@ let UDExTextField = UDExTextField_1 = class UDExTextField extends UI5Element {
     constructor() {
         super(...arguments);
         this._labelActiveClassName = "udex-text-field__label_active";
+        /**
+         * Defines the value of the component.
+         * <br><br>
+         * <b>Note:</b> The property is updated upon typing.
+         *
+         * @default ""
+         * @formEvents input
+         * @formProperty
+         * @public
+         */
+        this.value = "";
+        /**
+         * Receives id (or many ids) of the elements that label the component.
+         * @default ""
+         * @public
+         */
+        this.accessibleNameRef = "";
+        /**
+         * Defines the accessible ARIA name of the component.
+         *
+         * @default ""
+         * @public
+         */
+        this.accessibleIconName = "";
+        /**
+         * Defines the value state of the component.
+         *
+         * @default "Standard"
+         * @public
+         */
+        this.valueState = ValueState.Standard;
+        /**
+         * Defines the inner stored show password button tooltip.
+         *
+         * @default ""
+         * @private
+         */
+        this.showButtonTooltip = "";
+        /**
+         * Defines the inner stored class of the label.
+         *
+         * @default ""
+         * @private
+         */
+        this.labelActiveClass = "";
+        /**
+         * Defines the inner stored value of the classes of the label.
+         *
+         * @default ""
+         * @private
+         */
+        this.labelClasses = "";
+        /**
+         * Defines the inner stored value of the classes of the label.
+         *
+         * @default "text"
+         * @private
+         */
+        this.type = "Text";
         this.handleChange = () => {
-            this.fireEvent("change");
+            this.fireDecoratorEvent("change");
         };
         this.handleInput = (inputEvent) => {
             this.value = inputEvent.target?.value;
@@ -63,9 +120,6 @@ let UDExTextField = UDExTextField_1 = class UDExTextField extends UI5Element {
             this._isTouched = false;
         };
     }
-    static async onDefine() {
-        UDExTextField_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
-    }
     get valueStateTypeMappings() {
         return {
             "Success": UDExTextField_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
@@ -104,18 +158,12 @@ let UDExTextField = UDExTextField_1 = class UDExTextField extends UI5Element {
             "ariaHasPopup": this._ariaHasPopup || undefined,
         };
     }
-    get inputRole() {
-        return this.isAutoCompleteDisabled ? "presentation" : undefined;
-    }
-    get isAutoCompleteDisabled() {
-        return this.autocomplete === "off" || this.autocomplete === "new-password";
-    }
     handleKeydown(e) {
         e.stopPropagation();
-        this.fireEvent("keydown", e);
+        this.fireDecoratorEvent("keydown", { keyboardEvent: e });
     }
     handleIconClick() {
-        this.fireEvent("click-icon");
+        this.fireDecoratorEvent("click-icon");
     }
     onBeforeRendering() {
         if ((this.value || this.active) && this.labelActiveClass === "") {
@@ -149,7 +197,7 @@ __decorate([
     property({ type: String })
 ], UDExTextField.prototype, "value", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], UDExTextField.prototype, "maxlength", void 0);
 __decorate([
     property({ type: String })
@@ -158,7 +206,7 @@ __decorate([
     property()
 ], UDExTextField.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], UDExTextField.prototype, "accessibleNameRef", void 0);
 __decorate([
     property()
@@ -173,7 +221,7 @@ __decorate([
     property({ type: Boolean })
 ], UDExTextField.prototype, "required", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.Standard })
+    property()
 ], UDExTextField.prototype, "valueState", void 0);
 __decorate([
     property({ type: String })
@@ -185,34 +233,31 @@ __decorate([
     property({ type: Boolean })
 ], UDExTextField.prototype, "active", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExTextField.prototype, "showButtonTooltip", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "" })
+    property({ type: String, noAttribute: true })
 ], UDExTextField.prototype, "labelActiveClass", void 0);
-__decorate([
-    property({ type: String, defaultValue: "off" })
-], UDExTextField.prototype, "autocomplete", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExTextField.prototype, "isInputReadonly", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "" })
+    property({ type: String, noAttribute: true })
 ], UDExTextField.prototype, "labelClasses", void 0);
 __decorate([
-    property({ type: String, defaultValue: "text" })
+    property({ type: String })
 ], UDExTextField.prototype, "type", void 0);
 __decorate([
     property({ type: String, noAttribute: true })
 ], UDExTextField.prototype, "direction", void 0);
 __decorate([
-    property({ validator: Float })
+    property({ type: Number })
 ], UDExTextField.prototype, "max", void 0);
 __decorate([
-    property({ validator: Float })
+    property({ type: Number })
 ], UDExTextField.prototype, "min", void 0);
 __decorate([
-    property({ validator: Float })
+    property({ type: Number })
 ], UDExTextField.prototype, "step", void 0);
 __decorate([
     property()
@@ -223,6 +268,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExTextField.prototype, "_isTouched", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExTextField, "i18nBundle", void 0);
 UDExTextField = UDExTextField_1 = __decorate([
     customElement({
         tag: "udex-text-field",
@@ -237,21 +285,28 @@ UDExTextField = UDExTextField_1 = __decorate([
        * @public
        */
     ,
-    event("input")
+    event("input", { bubbles: true })
     /**
        * Fired when the input operation has finished by pressing Enter or on focusout.
        *
        * @public
        */
     ,
-    event("change")
+    event("change", { bubbles: true })
     /**
      * Fired event when the user clicks the icon.
      *
      * @private
      */
     ,
-    event("click-icon")
+    event("click-icon", { bubbles: true })
+    /**
+     * Fired event when the key is pressed in the input.
+     *
+     * @private
+     */
+    ,
+    event("keydown", { bubbles: true })
 ], UDExTextField);
 UDExTextField.define();
 export default UDExTextField;