@sapudex/web-components 0.111.0

package/dist/TextArea.js

@@ -0,0 +1,207 @@
+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;
+};
+var UDExTextArea_1;
+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 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 { READ_ONLY, TEXTAREA_CHARACTERS_LEFT, 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";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
+// Styles
+import TextAreaCss from "./generated/themes/TextArea.css.js";
+import UDExStatusMessage from "./StatusMessage.js";
+export var FieldState;
+(function (FieldState) {
+    FieldState["Standard"] = "Standard";
+    FieldState["Warning"] = "Warning";
+    FieldState["Error"] = "Error";
+    FieldState["Success"] = "Success";
+})(FieldState || (FieldState = {}));
+/**
+ * @class
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-text-area
+ * @public
+ */
+let UDExTextArea = UDExTextArea_1 = class UDExTextArea extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this._labelActiveClassName = "udex-textarea__label--active";
+        this.handleInput = (event) => {
+            this.value = event.target?.value;
+        };
+        this.handleChange = () => {
+            this.fireEvent("change");
+        };
+        this.handleGrowing = () => {
+            if (this.growing) {
+                const nativeTextArea = this.getInputDomRef();
+                if (!this.rows) {
+                    this.rows = 1;
+                }
+                nativeTextArea.style.height = "auto";
+                // 2px - to avoid an unnecessary scrollbar, the border needs to be taken into account
+                nativeTextArea.style.height = `${nativeTextArea.scrollHeight + 2}px`;
+                if (this.growingMaxLines) {
+                    const style = getComputedStyle(nativeTextArea);
+                    const lineHeight = parseInt(style.lineHeight);
+                    const paddingTop = parseInt(style.paddingTop);
+                    const paddingBottom = parseInt(style.paddingBottom);
+                    const heightRatio = this.growingMaxLines > this.rows ? this.growingMaxLines : this.rows;
+                    const growingMaxHeight = lineHeight * heightRatio + paddingTop + paddingBottom;
+                    // 2px - to avoid an unnecessary scrollbar, the border needs to be taken into account
+                    nativeTextArea.style.maxHeight = `${growingMaxHeight + 2}px`;
+                }
+            }
+        };
+        this.handleFocus = () => {
+            if (!this.disabled && !this.readonly && !this.displayonly) {
+                this.labelActiveClass = this._labelActiveClassName;
+            }
+        };
+        this.handleBlur = () => {
+            if (this.value) {
+                this.labelActiveClass = this._labelActiveClassName;
+            }
+            else {
+                this.labelActiveClass = "";
+            }
+        };
+    }
+    static async onDefine() {
+        UDExTextArea_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    getInputDomRef() {
+        return this.getDomRef().querySelector("textarea");
+    }
+    get hasValueState() {
+        return this.fieldState === FieldState.Error || this.fieldState === FieldState.Warning || this.fieldState === FieldState.Success;
+    }
+    get fieldStateTypeMappings() {
+        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),
+        };
+    }
+    get ariaValueStateHiddenText() {
+        if (!this.hasValueState) {
+            return;
+        }
+        if (this.fieldState === FieldState.Standard) {
+            return;
+        }
+        return `${this.fieldStateTypeMappings[this.fieldState]}`;
+    }
+    get readOnlyText() {
+        return UDExTextArea_1.i18nBundle.getText(READ_ONLY);
+    }
+    get ariaDescribedBy() {
+        const valueStateTextDescId = this.hasValueState ? `${this._id}-valueStateDesc` : "";
+        const readonlyTextDescId = this.readonly ? `${this._id}-readonlyDesc` : "";
+        const supportingTextDescId = this._supportingText ? `${this._id}-supportingTextDesc` : "";
+        return `${valueStateTextDescId} ${supportingTextDescId} ${readonlyTextDescId}`;
+    }
+    get _supportingText() {
+        if (this.supportingText.length) {
+            return this.supportingText;
+        }
+        const maxLength = this.maxlength;
+        if (maxLength !== null && maxLength !== undefined) {
+            const leftCharactersCount = maxLength - this.value.length;
+            if (leftCharactersCount >= 0) {
+                return UDExTextArea_1.i18nBundle.getText(TEXTAREA_CHARACTERS_LEFT, leftCharactersCount);
+            }
+        }
+    }
+    get ariaInvalid() {
+        return this.fieldState === FieldState.Error ? "true" : null;
+    }
+    onBeforeRendering() {
+        if (this.value && this.labelActiveClass === "") {
+            this.labelActiveClass = this._labelActiveClassName;
+        }
+        this.isInputReadonly = this.readonly || this.displayonly;
+        this.labelClasses = `udex-textarea__label ${this.labelActiveClass}`;
+    }
+    onAfterRendering() {
+        this.handleGrowing();
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExTextArea.prototype, "label", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExTextArea.prototype, "value", void 0);
+__decorate([
+    property({ validator: Integer })
+], UDExTextArea.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextArea.prototype, "growing", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 0 })
+], UDExTextArea.prototype, "growingMaxLines", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExTextArea.prototype, "supportingText", void 0);
+__decorate([
+    property({ validator: Integer })
+], UDExTextArea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: FieldState, defaultValue: FieldState.Standard })
+], UDExTextArea.prototype, "fieldState", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextArea.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextArea.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextArea.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextArea.prototype, "displayonly", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExTextArea.prototype, "isInputReadonly", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExTextArea.prototype, "labelClasses", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExTextArea.prototype, "labelActiveClass", void 0);
+__decorate([
+    property()
+], UDExTextArea.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], UDExTextArea.prototype, "accessibleNameRef", void 0);
+UDExTextArea = UDExTextArea_1 = __decorate([
+    customElement({
+        tag: "udex-textarea",
+        renderer: litRender,
+        styles: [TextAreaCss, getEffectiveScrollbarStyle()],
+        template: TextAreaTemplate,
+        dependencies: [UDExStatusMessage],
+    })
+], UDExTextArea);
+UDExTextArea.define();
+export default UDExTextArea;
+//# sourceMappingURL=TextArea.js.map

package/dist/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../src/TextArea.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,0BAA0B,MAAM,iEAAiE,CAAC;AACzG,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,EACL,SAAS,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,wBAAwB,GAC3I,MAAM,mCAAmC,CAAC;AAE3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAEhD,OAAO,gBAAgB,MAAM,+CAA+C,CAAC;AAE7E,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAC7D,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,mCAAqB,CAAA;IACrB,iCAAmB,CAAA;IACnB,6BAAe,CAAA;IACf,iCAAmB,CAAA;AACrB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAED;;;;;;;GAOG;AASH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACE,0BAAqB,GAAG,8BAA8B,CAAC;QAuOvD,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAClC,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,EAAE,KAAK,CAAC;QACzD,CAAC,CAAC;QAEF,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC,CAAA;QAED,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE7C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;oBACd,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;iBACf;gBACD,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBACrC,qFAAqF;gBACrF,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,cAAc,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC;gBAErE,IAAI,IAAI,CAAC,eAAe,EAAE;oBACxB,MAAM,KAAK,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;oBAE/C,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;oBAC9C,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;oBAC9C,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;oBAEpD,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;oBAExF,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAC;oBAE/E,qFAAqF;oBACrF,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,gBAAgB,GAAG,CAAC,IAAI,CAAC;iBAC9D;aACF;QACH,CAAC,CAAC;QAEF,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACzD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,qBAAqB,CAAC;aACpD;QACH,CAAC,CAAC;QAEF,eAAU,GAAG,GAAG,EAAE;YAChB,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,qBAAqB,CAAC;aACpD;iBAAM;gBACL,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;aAC5B;QACH,CAAC,CAAC;IAmBJ,CAAC;IA/HC,MAAM,CAAC,KAAK,CAAC,QAAQ;QACnB,cAAY,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAC/E,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAsB,UAAU,CAAE,CAAC;IAC3E,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,OAAO,CAAC;IAClI,CAAC;IAED,IAAI,sBAAsB;QACxB,OAAO;YACL,SAAS,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC;YACpE,UAAU,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,yBAAyB,CAAC;YACtE,OAAO,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC;YAChE,SAAS,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC;SACrE,CAAC;IACJ,CAAC;IAED,IAAI,wBAAwB;QAC1B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO;SACR;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,QAAQ,EAAE;YAC3C,OAAO;SACR;QAED,OAAO,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;IAC3D,CAAC;IAED,IAAI,YAAY;QACd,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACpD,CAAC;IAED,IAAI,eAAe;QACjB,MAAM,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;QACpF,MAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3E,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1F,OAAO,GAAG,oBAAoB,IAAI,oBAAoB,IAAI,kBAAkB,EAAE,CAAC;IACjF,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;YAC9B,OAAO,IAAI,CAAC,cAAc,CAAC;SAC5B;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAEjC,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,SAAS,EAAE;YACjD,MAAM,mBAAmB,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YAE1D,IAAI,mBAAmB,IAAI,CAAC,EAAE;gBAC5B,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,CAAC;aACvF;SACF;IACH,CAAC;IAoDD,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,KAAK,EAAE,EAAE;YAC9C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,qBAAqB,CAAC;SACpD;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC;QAEzD,IAAI,CAAC,YAAY,GAAG,wBAAwB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACtE,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;CACF,CAAA;AAjSG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;2CAC5B;AAWf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;2CAC5B;AAef;IADD,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;0CACjB;AAUd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACR;AASlB;IADD,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;qDACvB;AASzB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;oDACnB;AAQxB;IADD,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;+CACZ;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC;gDACnC;AAS7B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACP;AAWnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACP;AAYnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACP;AAYnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;qDACnB;AAS1B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;kDACxC;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;sDACpC;AAQ1B;IADD,QAAQ,EAAE;oDACe;AAQxB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;uDACF;AAxKzB,YAAY;IARjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,WAAW,EAAE,0BAA0B,EAAE,CAAC;QACnD,QAAQ,EAAE,gBAAgB;QAC1B,YAAY,EAAE,CAAC,iBAAiB,CAAC;KAClC,CAAC;GAEI,YAAY,CA2SjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,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 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 {\n  READ_ONLY, TEXTAREA_CHARACTERS_LEFT, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_STANDARD, VALUE_STATE_TYPE_SUCCESS, 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 TextAreaTemplate from \"./generated/templates/TextAreaTemplate.lit.js\";\n\n// Styles\nimport TextAreaCss from \"./generated/themes/TextArea.css.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\n\nexport enum FieldState {\n  Standard = \"Standard\",\n  Warning = \"Warning\",\n  Error = \"Error\",\n  Success = \"Success\",\n}\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, defaultValue: \"\" })\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, defaultValue: \"\" })\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, defaultValue: \"\" })\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: FieldState, defaultValue: FieldState.Standard })\n    fieldState!: `${FieldState}`;\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, defaultValue: \"\" })\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, defaultValue: \"\" })\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({ defaultValue: \"\" })\n    accessibleNameRef!: string;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExTextArea.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  getInputDomRef() {\n    return this.getDomRef()!.querySelector<HTMLTextAreaElement>(\"textarea\")!;\n  }\n\n  get hasValueState() {\n    return this.fieldState === FieldState.Error || this.fieldState === FieldState.Warning || this.fieldState === FieldState.Success;\n  }\n\n  get fieldStateTypeMappings() {\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() {\n    if (!this.hasValueState) {\n      return;\n    }\n\n    if (this.fieldState === FieldState.Standard) {\n      return;\n    }\n\n    return `${this.fieldStateTypeMappings[this.fieldState]}`;\n  }\n\n  get readOnlyText() {\n    return UDExTextArea.i18nBundle.getText(READ_ONLY);\n  }\n\n  get ariaDescribedBy() {\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    return `${valueStateTextDescId} ${supportingTextDescId} ${readonlyTextDescId}`;\n  }\n\n  get _supportingText() {\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  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.labelActiveClass = this._labelActiveClassName;\n    }\n  };\n\n  handleBlur = () => {\n    if (this.value) {\n      this.labelActiveClass = this._labelActiveClassName;\n    } else {\n      this.labelActiveClass = \"\";\n    }\n  };\n\n  get ariaInvalid() {\n    return this.fieldState === FieldState.Error ? \"true\" : null;\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\nUDExTextArea.define();\n\nexport default UDExTextArea;\n"]}

package/dist/TextField.d.ts

@@ -0,0 +1,205 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+/**
+ * @class
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-text-field
+ * @public
+ */
+declare class UDExTextField extends UI5Element {
+    _labelActiveClassName: string;
+    /**
+     * 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 the value of the component.
+     * <br><br>
+     * <b>Note:</b> The property is updated upon typing.
+     *
+     * @default ""
+     * @formEvents input
+     * @formProperty
+     * @public
+     */
+    value: string;
+    /**
+     * Sets the maximum number of characters available in the input field.
+     * <br><br>
+     * <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.
+     *
+     * @public
+     */
+    maxlength?: number;
+    /**
+     * Defines label text for the input field.
+     *
+     * @default ""
+     * @public
+     */
+    label: 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;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @default ""
+     * @public
+     */
+    accessibleIconName: string;
+    /**
+     * 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 whether the component is required.
+     *
+     * @default false
+     * @public
+     */
+    required: boolean;
+    /**
+     * Defines the value state of the component.
+     *
+     * @default "Standard"
+     * @public
+     */
+    valueState: "Standard" | "Warning" | "Error" | "Success";
+    /**
+     * Defines supporting text under the input field.
+     *
+     * @default ""
+     * @public
+     */
+    supportingText: string;
+    /**
+     * Defines the icon name in the text-field.
+     *
+     * @default ""
+     * @public
+     */
+    icon: string;
+    /**
+     * Defines if the text-field is active
+     *
+     * @default false
+     * @public
+     */
+    active: boolean;
+    /**
+     * Defines the inner stored class of the label.
+     *
+     * @default ""
+     * @private
+     */
+    labelActiveClass: string;
+    /**
+     * 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 value of the classes of the label.
+     *
+     * @default "text"
+     * @private
+     */
+    type: string;
+    /**
+     * Defines direction of the input.
+     *
+     * @public
+     */
+    direction?: string;
+    /**
+     * Defines the max value for the "number" type of the input.
+     */
+    max?: number;
+    /**
+     * Defines the min value for the "number" type of the input.
+     */
+    min?: number;
+    /**
+     * Defines the step for the "number" type of the input.
+     */
+    step?: number;
+    /**
+     * Allows setting the aria-describedby property on the internal input node.
+     *
+     * @default ""
+     * @public
+     */
+    ariaDescribedBy?: string;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    get valueStateTypeMappings(): {
+        Success: string;
+        Standard: string;
+        Error: string;
+        Warning: string;
+    };
+    get hasValueState(): boolean;
+    get valueStateText(): string | undefined;
+    get readOnlyStateText(): string;
+    get ariaDescribedById(): string;
+    get supportingTextId(): string;
+    get valueStateTextId(): string;
+    get readOnlyStateTextId(): string;
+    get accInfo(): {
+        ariaInvalid: string | undefined;
+        ariaDescribedBy: string | undefined;
+        ariaLabelledBy: string;
+        ariaLabel: string | undefined;
+    };
+    handleChange: () => void;
+    handleInput: (inputEvent: InputEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleKeyDown: (keyboardEvent: KeyboardEvent) => void;
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+}
+export default UDExTextField;

package/dist/TextField.js

@@ -0,0 +1,227 @@
+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;
+};
+var UDExTextField_1;
+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 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 { 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";
+// Template
+import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit";
+// Styles
+import TextFieldCss from "./generated/themes/TextField.css.js";
+import UDExStatusMessage from "./StatusMessage.js";
+/**
+ * @class
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-text-field
+ * @public
+ */
+let UDExTextField = UDExTextField_1 = class UDExTextField extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this._labelActiveClassName = "udex-text-field__label_active";
+        this.handleChange = () => {
+            this.fireEvent("change");
+        };
+        this.handleInput = (inputEvent) => {
+            this.value = inputEvent.target?.value;
+            this.fireEvent("input");
+        };
+        this.handleFocus = () => {
+            if (!this.disabled && !this.readonly && !this.displayonly) {
+                this.labelActiveClass = this._labelActiveClassName;
+                this.active = true;
+            }
+        };
+        this.handleBlur = () => {
+            this.active = false;
+            if (this.value) {
+                this.labelActiveClass = this._labelActiveClassName;
+            }
+            else {
+                this.labelActiveClass = "";
+            }
+        };
+        this.handleKeyDown = (keyboardEvent) => {
+            keyboardEvent.stopPropagation();
+            this.fireEvent("click-trigger", keyboardEvent);
+        };
+    }
+    static async onDefine() {
+        UDExTextField_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    get valueStateTypeMappings() {
+        return {
+            "Success": UDExTextField_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            "Standard": UDExTextField_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
+            "Error": UDExTextField_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            "Warning": UDExTextField_1.i18nBundle.getText(VALUE_STATE_WARNING),
+        };
+    }
+    get hasValueState() {
+        return this.valueState !== ValueState.Standard;
+    }
+    get valueStateText() {
+        return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
+    }
+    get readOnlyStateText() {
+        return UDExTextField_1.i18nBundle.getText(READ_ONLY);
+    }
+    get ariaDescribedById() {
+        return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();
+    }
+    get supportingTextId() {
+        return this.supportingText ? `${this._id}-supportingTextDesc` : "";
+    }
+    get valueStateTextId() {
+        return this.hasValueState ? `${this._id}-valueStateDesc` : "";
+    }
+    get readOnlyStateTextId() {
+        return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
+    }
+    get accInfo() {
+        return {
+            "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
+            "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
+            "ariaLabelledBy": this.accessibleNameRef,
+            "ariaLabel": this.accessibleName || undefined,
+        };
+    }
+    onBeforeRendering() {
+        if ((this.value || this.active) && this.labelActiveClass === "") {
+            this.labelActiveClass = this._labelActiveClassName;
+        }
+        else if (!this.active && !this.value && this.labelActiveClass.length) {
+            this.labelActiveClass = "";
+        }
+        this.isInputReadonly = this.readonly || this.displayonly;
+        this.labelClasses = `udex-text-field__label ${this.labelActiveClass}`;
+    }
+    onAfterRendering() {
+        const directionStyles = window
+            .getComputedStyle(this)
+            .getPropertyValue("direction");
+        if (!directionStyles) {
+            this.direction = "ltr";
+        }
+        else {
+            this.direction = directionStyles;
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UDExTextField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], UDExTextField.prototype, "value", void 0);
+__decorate([
+    property({ validator: Integer })
+], UDExTextField.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String })
+], UDExTextField.prototype, "label", void 0);
+__decorate([
+    property()
+], UDExTextField.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], UDExTextField.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], UDExTextField.prototype, "accessibleIconName", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextField.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextField.prototype, "displayonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextField.prototype, "required", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: "Standard" })
+], UDExTextField.prototype, "valueState", void 0);
+__decorate([
+    property({ type: String })
+], UDExTextField.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: String })
+], UDExTextField.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTextField.prototype, "active", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExTextField.prototype, "labelActiveClass", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExTextField.prototype, "isInputReadonly", void 0);
+__decorate([
+    property({ type: String, noAttribute: true, defaultValue: "" })
+], UDExTextField.prototype, "labelClasses", void 0);
+__decorate([
+    property({ type: String, defaultValue: "text" })
+], UDExTextField.prototype, "type", void 0);
+__decorate([
+    property({ type: String, noAttribute: true })
+], UDExTextField.prototype, "direction", void 0);
+__decorate([
+    property({ validator: Float })
+], UDExTextField.prototype, "max", void 0);
+__decorate([
+    property({ validator: Float })
+], UDExTextField.prototype, "min", void 0);
+__decorate([
+    property({ validator: Float })
+], UDExTextField.prototype, "step", void 0);
+__decorate([
+    property()
+], UDExTextField.prototype, "ariaDescribedBy", void 0);
+UDExTextField = UDExTextField_1 = __decorate([
+    customElement({
+        tag: "udex-text-field",
+        renderer: litRender,
+        styles: TextFieldCss,
+        template: TextFieldTemplate,
+        dependencies: [UDExControlButton, Icon, UDExStatusMessage],
+    })
+    /**
+       * Fired event when the user clicks the trigger.
+       *
+       * @public
+       */
+    ,
+    event("click-trigger")
+    /**
+       * Fired when the value of the component changes at each keystroke.
+       *
+       * @public
+       */
+    ,
+    event("input")
+    /**
+       * Fired when the input operation has finished by pressing Enter or on focusout.
+       *
+       * @public
+       */
+    ,
+    event("change")
+], UDExTextField);
+UDExTextField.define();
+export default UDExTextField;
+//# sourceMappingURL=TextField.js.map