@wavemaker/app-ng-runtime 11.9.0-next.24942 → 11.9.0-next.24946

app-ng-runtime/components/input/default/fesm2022/index.mjs

@@ -24,6 +24,7 @@ const registerProps$e = () => {
         ['conditionalstyle', PROP_ANY],
         ['disabled', PROP_BOOLEAN],
         ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
         ['iconclass', PROP_STRING],
         ['iconheight', PROP_STRING],
         ['iconmargin', PROP_STRING],
@@ -369,6 +370,7 @@ const checkboxProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['name', PROP_STRING],
     ['readonly', PROP_BOOLEAN],
     ['required', PROP_BOOLEAN],
@@ -510,7 +512,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
             i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c3$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
+            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("innerHtml", ctx._caption, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance(2);
@@ -523,7 +525,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
                     provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(CheckboxComponent)
-                ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
+                ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"arialabel\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['checkedvalue']
@@ -1222,6 +1224,7 @@ const numberProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['localefilter', PROP_STRING],
     ['minvalue', PROP_NUMBER],
     ['maxvalue', PROP_NUMBER],
@@ -1804,7 +1807,7 @@ class NumberComponent extends NumberLocale {
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.PatternValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberComponent, [{
@@ -1813,7 +1816,7 @@ class NumberComponent extends NumberLocale {
                     provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(NumberComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(NumberComponent)
-                ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: i1$1.AbstractI18nService }, { type: i2.TrailingZeroDecimalPipe }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2106,6 +2109,7 @@ const selectProps = new Map([
     ['displayValue', PROP_STRING],
     ['groupby', PROP_STRING],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['match', PROP_STRING],
     ['multiple', { value: false, ...PROP_BOOLEAN }],
     ['name', PROP_STRING],
@@ -2320,7 +2324,7 @@ class SelectComponent extends DatasetAwareFormComponent {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
             i0.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
             i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(17, _c2$4))("multiple", ctx.multiple)("autofocus", ctx.autofocus);
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
+            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("aria-multiselectable", ctx.multiple);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
             i0.ɵɵadvance();
@@ -2335,7 +2339,7 @@ class SelectComponent extends DatasetAwareFormComponent {
                     provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SelectComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(SelectComponent)
-                ], template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (mousedown)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\">\n\n        <option selected\n                value=\"undefined\"\n                [textContent]=\"placeholder\"\n                id=\"placeholderOption\"\n                [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
+                ], template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (mousedown)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"arialabel\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\">\n\n        <option selected\n                value=\"undefined\"\n                [textContent]=\"placeholder\"\n                id=\"placeholderOption\"\n                [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2358,6 +2362,7 @@ const switchProps = new Map([
     ['displayexpression', PROP_STRING],
     ['displayfield', PROP_STRING],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['iconclass', PROP_STRING],
     ['name', PROP_STRING],
     ['orderby', PROP_STRING],
@@ -2560,6 +2565,7 @@ const inputCalendarTypeProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxvalue', PROP_NUMBER],
     ['minvalue', PROP_NUMBER],
     ['name', PROP_STRING],
@@ -2603,7 +2609,7 @@ class InputCalendarComponent extends BaseInput {
                 provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputCalendarComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2613,7 +2619,7 @@ class InputCalendarComponent extends BaseInput {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c2$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel || ctx.type + " field");
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputCalendarComponent, [{
@@ -2622,7 +2628,7 @@ class InputCalendarComponent extends BaseInput {
                     provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputCalendarComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2646,6 +2652,7 @@ const inputColorTypeProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['name', PROP_STRING],
     ['placeholder', { value: 'Enter text', ...PROP_STRING }],
     ['readonly', PROP_BOOLEAN],
@@ -2686,7 +2693,7 @@ class InputColorComponent extends BaseInput {
                 provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputColorComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputColorComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 16, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 16, consts: [["input", ""], ["focus-target", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2696,7 +2703,7 @@ class InputColorComponent extends BaseInput {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(15, _c2$1))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputColorComponent, [{
@@ -2705,7 +2712,7 @@ class InputColorComponent extends BaseInput {
                     provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputColorComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputColorComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2729,6 +2736,7 @@ const inputEmailTypeProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxchars', PROP_NUMBER],
     ['name', PROP_STRING],
     ['placeholder', { value: 'Enter text', ...PROP_STRING }],
@@ -2770,7 +2778,7 @@ class InputEmailComponent extends BaseInput {
                 provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputEmailComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputEmailComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "email", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2780,7 +2788,7 @@ class InputEmailComponent extends BaseInput {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.EmailValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputEmailComponent, [{
@@ -2789,7 +2797,7 @@ class InputEmailComponent extends BaseInput {
                     provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputEmailComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputEmailComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2813,6 +2821,7 @@ const inputNumberTypeProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxchars', PROP_NUMBER],
     ['maxvalue', PROP_NUMBER],
     ['minvalue', PROP_NUMBER],
@@ -2868,7 +2877,7 @@ class InputNumberComponent extends BaseInput {
                 provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputNumberComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputNumberComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress", "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete"]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["input", ""], ["focus-target", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress", "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete"]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2878,7 +2887,7 @@ class InputNumberComponent extends BaseInput {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNumberComponent, [{
@@ -2887,7 +2896,7 @@ class InputNumberComponent extends BaseInput {
                     provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputNumberComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputNumberComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2912,6 +2921,7 @@ const inputTextTypeProps = new Map([
     ['disabled', PROP_BOOLEAN],
     ['displayformat', PROP_STRING],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxchars', PROP_NUMBER],
     ['name', PROP_STRING],
     ['placeholder', { value: 'Enter text', ...PROP_STRING }],
@@ -3035,7 +3045,7 @@ class InputTextComponent extends BaseInput {
                 provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputTextComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputTextComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "focus", "keyup.enter", "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "focus", "keyup.enter", "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -3045,7 +3055,7 @@ class InputTextComponent extends BaseInput {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
+            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.NgModel, i3.IMaskDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputTextComponent, [{
@@ -3054,7 +3064,7 @@ class InputTextComponent extends BaseInput {
                     provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputTextComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputTextComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"hint\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"arialabel\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -3080,6 +3090,7 @@ const textareaProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxchars', PROP_NUMBER],
     ['name', PROP_STRING],
     ['placeholder', { value: 'Place your text', ...PROP_STRING }],
@@ -3137,7 +3148,7 @@ class TextareaComponent extends BaseInput {
                 provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(TextareaComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(TextareaComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "textarea", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -3147,7 +3158,7 @@ class TextareaComponent extends BaseInput {
         } if (rf & 2) {
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.maxchars);
         } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
@@ -3158,7 +3169,7 @@ class TextareaComponent extends BaseInput {
                     provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(TextareaComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(TextareaComponent)
-                ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          role=\"textbox\"\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"hint\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
+                ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"arialabel\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -3171,7 +3182,7 @@ class TextareaComponent extends BaseInput {
             type: ViewChild,
             args: [NgModel]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 23 }); })();
 
 class CaptionPositionDirective {
     constructor(inj, app) {