@sapudex/web-components 0.111.0

package/dist/TableRowBase.d.ts

@@ -0,0 +1,27 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UDExTableCell from "./TableCell.js";
+import UDExTableHeaderCell from "./TableHeaderCell.js";
+/**
+ * @class
+ * A class to serve as a foundation for the `UDExTableRow` and `UDExTableHeaderRow` classes.
+ * @constructor
+ * @abstract
+ * @extends UI5Element
+ * @public
+ */
+declare abstract class UDExTableRowBase extends UI5Element {
+    /**
+     * Defines the cells of the component.
+     *
+     * @public
+     */
+    cells: Array<UDExTableCell | UDExTableHeaderCell>;
+    /**
+     * Defines the index of the component.
+     *
+     * @private
+     */
+    _index: number;
+    onEnterDOM(): void;
+}
+export default UDExTableRowBase;

package/dist/TableRowBase.js

@@ -0,0 +1,43 @@
+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 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import UDExTableCell from "./TableCell.js";
+// Styles
+import TableRowBase from "./generated/themes/TableRowBase.css.js";
+/**
+ * @class
+ * A class to serve as a foundation for the `UDExTableRow` and `UDExTableHeaderRow` classes.
+ * @constructor
+ * @abstract
+ * @extends UI5Element
+ * @public
+ */
+let UDExTableRowBase = class UDExTableRowBase extends UI5Element {
+    onEnterDOM() {
+        this.setAttribute("role", "row");
+    }
+};
+__decorate([
+    slot({ type: HTMLElement, "default": true, individualSlots: true })
+], UDExTableRowBase.prototype, "cells", void 0);
+__decorate([
+    property({ validator: Integer })
+], UDExTableRowBase.prototype, "_index", void 0);
+UDExTableRowBase = __decorate([
+    customElement({
+        renderer: litRender,
+        styles: TableRowBase,
+        dependencies: [UDExTableCell],
+    })
+], UDExTableRowBase);
+export default UDExTableRowBase;
+//# sourceMappingURL=TableRowBase.js.map

package/dist/TableRowBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRowBase.js","sourceRoot":"","sources":["../src/TableRowBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAG3C,SAAS;AACT,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE;;;;;;;GAOG;AAQH,IAAe,gBAAgB,GAA/B,MAAe,gBAAiB,SAAQ,UAAU;IAiBhD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;CACF,CAAA;AAbG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;+CACf;AAQnD;IADD,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;gDACf;AAfL,gBAAgB;IAN9B,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,YAAY;QACpB,YAAY,EAAE,CAAC,aAAa,CAAC;KAC9B,CAAC;GAEa,gBAAgB,CAoB9B;AAED,eAAe,gBAAgB,CAAC","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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport UDExTableCell from \"./TableCell.js\";\nimport UDExTableHeaderCell from \"./TableHeaderCell.js\";\n\n// Styles\nimport TableRowBase from \"./generated/themes/TableRowBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `UDExTableRow` and `UDExTableHeaderRow` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n  renderer: litRender,\n  styles: TableRowBase,\n  dependencies: [UDExTableCell],\n})\n\nabstract class UDExTableRowBase extends UI5Element {\n  /**\n   * Defines the cells of the component.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    cells!: Array<UDExTableCell | UDExTableHeaderCell>;\n\n  /**\n   * Defines the index of the component.\n   *\n   * @private\n   */\n  @property({ validator: Integer })\n    _index!: number;\n\n  onEnterDOM() {\n    this.setAttribute(\"role\", \"row\");\n  }\n}\n\nexport default UDExTableRowBase;\n"]}

package/dist/Tag.d.ts

@@ -0,0 +1,132 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+export declare enum TagType {
+    Text = "Text",
+    White = "White",
+    Outlined = "Outlined",
+    Grey = "Grey"
+}
+export declare enum IconPlacement {
+    Start = "Start",
+    End = "End"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tag</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Tag.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-tag
+ * @public
+ */
+declare class UDExTag extends UI5Element {
+    /**
+     * Defines the text of the tag
+    *
+    * @default ""
+    * @public
+    */
+    text: string;
+    /**
+     * Defines the design type of tag
+    *
+    * @default "Grey"
+    * @public
+    */
+    design?: `${TagType}`;
+    /**
+     * Defines the size of the component.
+     *
+     * @default "Small"
+     * @public
+     */
+    size: "Small" | "Medium";
+    /**
+     * Defines icon name
+    *
+    * @default ""
+    * @public
+    */
+    icon: string;
+    /**
+     * Defines icon placement if icon was provided
+    *
+    * @default "End"
+    * @public
+    */
+    iconPlacement?: `${IconPlacement}`;
+    /**
+     * Defines if tag is in readonly state
+    *
+    * @default false
+    * @public
+    */
+    readOnly: boolean;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Defines the role attribute of component
+    *
+    * @default "button"
+    * @public
+    */
+    accessibleRole: string;
+    /**
+     * Defines if tag is selected
+    *
+    * @default false
+    * @public
+    */
+    selected: boolean;
+    /**
+     * Defines whether the component is focused or not.
+     *
+     * @default false
+     * @private
+     */
+    focused: boolean;
+    /**
+     * Defines whether the token is being deleted
+     * This flag is used in the udex-select-box
+     *
+     * @default false
+     * @private
+     */
+    toBeDeleted: boolean;
+    /**
+     * Set by the tokenizer when a token is in the "more" area (overflowing)
+     *
+     * @default false
+     * @private
+     */
+    overflows: boolean;
+    singleToken: boolean;
+    onBeforeRendering(): void;
+    onEnterDOM(): void;
+    get tagClasses(): string;
+    get startIcon(): boolean | "";
+    get endIcon(): boolean | "";
+    setSelected(): void;
+    iconClickHandler(e: Event): void;
+    tagClickHandler(): void;
+    tagKeyDown(e: KeyboardEvent): void;
+    _focusin(): void;
+    _focusout(): void;
+    get _tabIndex(): -1 | 0;
+    get textDom(): Element | null | undefined;
+    get isTruncatable(): boolean;
+}
+export default UDExTag;

package/dist/Tag.js

@@ -0,0 +1,177 @@
+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 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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import TagTemplate from "./generated/templates/TagTemplate.lit.js";
+// Styles
+import TagCss from "./generated/themes/Tag.css.js";
+export var TagType;
+(function (TagType) {
+    TagType["Text"] = "Text";
+    TagType["White"] = "White";
+    TagType["Outlined"] = "Outlined";
+    TagType["Grey"] = "Grey";
+})(TagType || (TagType = {}));
+export var IconPlacement;
+(function (IconPlacement) {
+    IconPlacement["Start"] = "Start";
+    IconPlacement["End"] = "End";
+})(IconPlacement || (IconPlacement = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tag</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Tag.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-tag
+ * @public
+ */
+let UDExTag = class UDExTag extends UI5Element {
+    onBeforeRendering() {
+        this.toBeDeleted = false;
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    get tagClasses() {
+        return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} udex-tag-${this.design?.toLowerCase()}
+    ${this.readOnly ? "udex-tag--readonly" : ""}
+    ${this.selected ? "udex-tag--selected" : ""}`;
+    }
+    get startIcon() {
+        return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.Start;
+    }
+    get endIcon() {
+        return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.End;
+    }
+    setSelected() {
+        this.selected = !this.selected;
+    }
+    iconClickHandler(e) {
+        e.stopPropagation();
+        if (!this.readOnly) {
+            this.fireEvent("iconClick");
+        }
+    }
+    tagClickHandler() {
+        if (!this.readOnly && !this.toBeDeleted) {
+            this.setSelected();
+            this.fireEvent("selectionChange");
+        }
+    }
+    tagKeyDown(e) {
+        if (isEnter(e)) {
+            this.tagClickHandler();
+        }
+    }
+    _focusin() {
+        this.focused = true;
+    }
+    _focusout() {
+        this.focused = !this.focused;
+    }
+    get _tabIndex() {
+        if (this.readOnly || this.overflows) {
+            return -1;
+        }
+        return 0;
+    }
+    get textDom() {
+        return this.getDomRef()?.querySelector(".udex-tag__text");
+    }
+    get isTruncatable() {
+        if (!this.textDom) {
+            return false;
+        }
+        return Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);
+    }
+};
+__decorate([
+    property()
+], UDExTag.prototype, "text", void 0);
+__decorate([
+    property({ type: TagType, defaultValue: TagType.Grey })
+], UDExTag.prototype, "design", void 0);
+__decorate([
+    property({ type: String, defaultValue: "Small" })
+], UDExTag.prototype, "size", void 0);
+__decorate([
+    property()
+], UDExTag.prototype, "icon", void 0);
+__decorate([
+    property({ type: IconPlacement, defaultValue: IconPlacement.End })
+], UDExTag.prototype, "iconPlacement", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTag.prototype, "readOnly", void 0);
+__decorate([
+    property()
+], UDExTag.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "button" })
+], UDExTag.prototype, "accessibleRole", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTag.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTag.prototype, "focused", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTag.prototype, "toBeDeleted", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTag.prototype, "overflows", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTag.prototype, "singleToken", void 0);
+UDExTag = __decorate([
+    customElement({
+        tag: "udex-tag",
+        renderer: litRender,
+        styles: TagCss,
+        template: TagTemplate,
+        dependencies: [Icon],
+    })
+    /**
+     * Emitted when tag was clicked
+     *
+     * @event sap.ui.webc.web-components.UDExTag#selectionChange
+     * @public
+     */
+    ,
+    event("selectionChange")
+    /**
+     * Emitted when icon in tag was clicked
+     *
+     * @event sap.ui.webc.web-components.UDExTag#iconClick
+     * @public
+     */
+    ,
+    event("iconClick")
+], UDExTag);
+UDExTag.define();
+export default UDExTag;
+//# sourceMappingURL=Tag.js.map

package/dist/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport TagTemplate from \"./generated/templates/TagTemplate.lit.js\";\n\n// Styles\nimport TagCss from \"./generated/themes/Tag.css.js\";\n\nexport enum TagType {\n    Text = \"Text\",\n    White = \"White\",\n    Outlined = \"Outlined\",\n    Grey = \"Grey\"\n}\n\nexport enum IconPlacement {\n    Start = \"Start\",\n    End = \"End\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-tag</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @udex/web-components/dist/Tag.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-tag\n * @public\n */\n@customElement({\n  tag: \"udex-tag\",\n  renderer: litRender,\n  styles: TagCss,\n  template: TagTemplate,\n  dependencies: [Icon],\n})\n\n/**\n * Emitted when tag was clicked\n *\n * @event sap.ui.webc.web-components.UDExTag#selectionChange\n * @public\n */\n@event(\"selectionChange\")\n/**\n * Emitted when icon in tag was clicked\n *\n * @event sap.ui.webc.web-components.UDExTag#iconClick\n * @public\n */\n@event(\"iconClick\")\nclass UDExTag extends UI5Element {\n  /**\n   * Defines the text of the tag\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    text!: string;\n\n  /**\n   * Defines the design type of tag\n  *\n  * @default \"Grey\"\n  * @public\n  */\n  @property({ type: TagType, defaultValue: TagType.Grey })\n    design?: `${TagType}`;\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Small\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"Small\" })\n    size!: \"Small\" | \"Medium\";\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n  @property({ type: IconPlacement, defaultValue: IconPlacement.End })\n    iconPlacement? : `${IconPlacement}`;\n\n  /**\n   * Defines if tag is in readonly state\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    readOnly!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleName!: string;\n\n  /**\n   * Defines the role attribute of component\n  *\n  * @default \"button\"\n  * @public\n  */\n  @property({ defaultValue: \"button\" })\n    accessibleRole!: string;\n\n  /**\n   * Defines if tag is selected\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines whether the component is focused or not.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    focused!: boolean;\n\n  /**\n   * Defines whether the token is being deleted\n   * This flag is used in the udex-select-box\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    toBeDeleted!: boolean;\n\n  /**\n   * Set by the tokenizer when a token is in the \"more\" area (overflowing)\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    overflows!: boolean;\n\n  @property({ type: Boolean })\n    singleToken!: boolean;\n\n  onBeforeRendering() {\n    this.toBeDeleted = false;\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  get tagClasses() {\n    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} udex-tag-${this.design?.toLowerCase()}\n    ${this.readOnly ? \"udex-tag--readonly\" : \"\"}\n    ${this.selected ? \"udex-tag--selected\" : \"\"}`;\n  }\n\n  get startIcon() {\n    return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.Start;\n  }\n\n  get endIcon() {\n    return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.End;\n  }\n\n  setSelected() {\n    this.selected = !this.selected;\n  }\n\n  iconClickHandler(e: Event) {\n    e.stopPropagation();\n    if (!this.readOnly) {\n      this.fireEvent(\"iconClick\");\n    }\n  }\n\n  tagClickHandler() {\n    if (!this.readOnly && !this.toBeDeleted) {\n      this.setSelected();\n      this.fireEvent(\"selectionChange\");\n    }\n  }\n\n  tagKeyDown(e: KeyboardEvent) {\n    if (isEnter(e)) {\n      this.tagClickHandler();\n    }\n  }\n\n  _focusin() {\n    this.focused = true;\n  }\n\n  _focusout() {\n    this.focused = !this.focused;\n  }\n\n  get _tabIndex() {\n    if (this.readOnly || this.overflows) {\n      return -1;\n    }\n    return 0;\n  }\n\n  get textDom() {\n    return this.getDomRef()?.querySelector(\".udex-tag__text\");\n  }\n\n  get isTruncatable() {\n    if (!this.textDom) {\n      return false;\n    }\n\n    return Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);\n  }\n}\n\nUDExTag.define();\n\nexport default UDExTag;\n"]}

package/dist/TextArea.d.ts

@@ -0,0 +1,179 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+export declare enum FieldState {
+    Standard = "Standard",
+    Warning = "Warning",
+    Error = "Error",
+    Success = "Success"
+}
+/**
+ * @class
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-text-area
+ * @public
+ */
+declare class UDExTextArea extends UI5Element {
+    _labelActiveClassName: string;
+    /**
+     * Defines label text for the textarea field.
+     *
+     * @default ""
+     * @public
+     */
+    label: string;
+    /**
+     * Defines the value of the component.
+     * <br><br>
+     * <b>Note:</b> The property is updated upon typing.
+     *
+     * @default ""
+     * @public
+     */
+    value: string;
+    /**
+     * Defines the number of visible text lines for the component.
+     * <br><br>
+     * <b>Notes:</b>
+     * <ul>
+     * <li>If the <code>growing</code> property is enabled, this property defines the minimum rows to be displayed
+     * in the textarea.</li>
+     * <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li>
+     * </ul>
+     *
+     * @public
+     */
+    rows: number;
+    /**
+     * Enables the component to automatically grow and shrink dynamically with its content.
+     * <br><br>
+     *
+     * @default false
+     * @public
+     */
+    growing: boolean;
+    /**
+     * Defines the maximum number of lines that the component can grow.
+     *
+     * @default 0
+     * @public
+     */
+    growingMaxLines: number;
+    /**
+     * Defines supporting text under the input field.
+     *
+     * @default ""
+     * @public
+     */
+    supportingText: string;
+    /**
+     * Sets the maximum number of characters available in the textarea.
+     *
+     * @public
+     */
+    maxlength?: number;
+    /**
+     * Defines the value state of the component.
+     *
+     * @default "Standard"
+     * @public
+     */
+    fieldState: `${FieldState}`;
+    /**
+     * Defines whether the component is required.
+     *
+     * @default false
+     * @public
+     */
+    required: boolean;
+    /**
+     * Defines whether the component is in disabled state.
+     * <br><br>
+     * <b>Note:</b> A disabled component is completely noninteractive.
+     *
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines whether the component is read-only.
+     * <br><br>
+     * <b>Note:</b> A read-only component is not editable,
+     * but still provides visual feedback upon user interaction.
+     *
+     * @default false
+     * @public
+     */
+    readonly: boolean;
+    /**
+     * Defines whether the component is display-only.
+     * <br><br>
+     * <b>Note:</b> A display-only component is not editable,
+     * but still provides visual feedback upon user interaction, input border is not visible.
+     *
+     * @default false
+     * @public
+     */
+    displayonly: boolean;
+    /**
+     * Defines the inner stored value of the readonly attribute of the input.
+     *
+     * @default false
+     * @private
+     */
+    isInputReadonly: boolean;
+    /**
+     * Defines the inner stored value of the classes of the label.
+     *
+     * @default ""
+     * @private
+     */
+    labelClasses: string;
+    /**
+     * Defines the inner stored class of the label.
+     *
+     * @default ""
+     * @private
+     */
+    labelActiveClass: string;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Receives id (or many ids) of the elements that label the component.
+     * @default ""
+     * @public
+     */
+    accessibleNameRef: string;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    getInputDomRef(): HTMLTextAreaElement;
+    get hasValueState(): boolean;
+    get fieldStateTypeMappings(): {
+        Success: string;
+        Standard: string;
+        Error: string;
+        Warning: string;
+    };
+    get ariaValueStateHiddenText(): string | undefined;
+    get readOnlyText(): string;
+    get ariaDescribedBy(): string;
+    get _supportingText(): string | undefined;
+    handleInput: (event: InputEvent) => void;
+    handleChange: () => void;
+    handleGrowing: () => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    get ariaInvalid(): "true" | null;
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+}
+export default UDExTextArea;