@wavemaker/app-ng-runtime 12.0.0-next.141131 → 12.0.0-next.141134

app-ng-runtime/components/input/default/bundles/index.umd.js

@@ -38,6 +38,7 @@
           ['conditionalstyle', i2.PROP_ANY],
           ['disabled', i2.PROP_BOOLEAN],
           ['hint', i2.PROP_STRING],
+          ['arialabel', i2.PROP_STRING],
           ['iconclass', i2.PROP_STRING],
           ['iconheight', i2.PROP_STRING],
           ['iconmargin', i2.PROP_STRING],
@@ -331,6 +332,8 @@
               return;
           }
           if (this._formControl) {
+              if (this._formControl.valueAccessor["widgetSubType"].startsWith('wm-custom-'))
+                  return;
               this.datavalue = value;
               this.onPropertyChange('datavalue', value);
               this.updatePrevDatavalue(value);
@@ -342,6 +345,9 @@
            */
           (value !== this.datavalue) && this._onChange(this.datavalue);
       }
+      get formControl() {
+          return this._formControl;
+      }
       invokeOnChange(value, $event, valid) {
           // let the angular know about the change
           this._onChange(value);
@@ -383,6 +389,7 @@
       ['datavalue', i2.PROP_STRING],
       ['disabled', i2.PROP_BOOLEAN],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['name', i2.PROP_STRING],
       ['readonly', i2.PROP_BOOLEAN],
       ['required', i2.PROP_BOOLEAN],
@@ -510,7 +517,7 @@
                   i2.provideAs(CheckboxComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(CheckboxComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(CheckboxComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 19, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 18, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0__namespace.ɵɵresetView($event); });
@@ -520,11 +527,11 @@
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵelement(5, "input", 5);
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction3(14, _c2$7, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
+              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction3(13, _c2$7, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
               i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
-              i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(18, _c3$3))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
-              i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
+              i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(17, _c3$3))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
+              i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("accesskey", ctx.shortcutkey);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("innerHtml", ctx._caption, i0__namespace.ɵɵsanitizeHtml);
               i0__namespace.ɵɵadvance(2);
@@ -537,7 +544,7 @@
                       i2.provideAs(CheckboxComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(CheckboxComponent, i2$1.NG_VALIDATORS, true),
                       i2.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           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"arialabel\"\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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Attribute,
                   args: ['checkedvalue']
@@ -591,8 +598,8 @@
           // invoke on datavalue change.
           this.invokeOnChange(val, undefined, true);
       }
-      constructor(inj, config, explicitContext, groupby) {
-          super(inj, config, explicitContext);
+      constructor(inj, config, explicitContext, groupby, initPromise) {
+          super(inj, config, explicitContext, initPromise);
           this.groupby = groupby;
           this.datasetItems = [];
           this.acceptsArray = false; // set to true if proxyModel on widget accepts array type.
@@ -844,7 +851,7 @@
               this.cancelLocaleChangeSubscription();
           }
       }
-      static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8), i0__namespace.ɵɵinjectAttribute('groupby')); }; }
+      static { this.ɵfac = function DatasetAwareFormComponent_Factory(t) { return new (t || DatasetAwareFormComponent)(i0__namespace.ɵɵinject(i0__namespace.Injector), i0__namespace.ɵɵinject(i2.WidgetConfig), i0__namespace.ɵɵinject('EXPLICIT_CONTEXT', 8), i0__namespace.ɵɵinjectAttribute('groupby'), i0__namespace.ɵɵinject(Promise)); }; }
       static { this.ɵprov = /*@__PURE__*/ i0__namespace.ɵɵdefineInjectable({ token: DatasetAwareFormComponent, factory: DatasetAwareFormComponent.ɵfac }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatasetAwareFormComponent, [{
@@ -860,7 +867,7 @@
               }] }, { type: undefined, decorators: [{
                   type: i0.Attribute,
                   args: ['groupby']
-              }] }], null); })();
+              }] }, { type: Promise }], null); })();
 
   const checkboxsetProps = new Map([
       ['class', i2.PROP_STRING],
@@ -909,10 +916,10 @@
       const item_r2 = ctx_r3.$implicit;
       const i_r5 = ctx_r3.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(12, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r5);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("textContent", item_r2.label);
   } }
@@ -925,16 +932,16 @@
       const item_r2 = ctx_r3.$implicit;
       const i_r5 = ctx_r3.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r5);
   } }
   function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
       const _r1 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 5);
       i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
-      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 14, "label", 6)(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 12, "label", 7);
+      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 10, "label", 7);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const item_r2 = ctx.$implicit;
@@ -969,7 +976,7 @@
   } }
   function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 8);
-      i0__namespace.ɵɵelement(1, "input", 26)(2, "span", 10);
+      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r9 = i0__namespace.ɵɵnextContext();
@@ -985,7 +992,7 @@
   } }
   function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 11);
-      i0__namespace.ɵɵelement(1, "input", 26)(2, "span", 27);
+      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 26);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r9 = i0__namespace.ɵɵnextContext();
@@ -1026,10 +1033,15 @@
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
       const groupObj_r7 = ctx.$implicit;
+      const groupindex_r12 = ctx.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3$2, ctx_r2.collapsible));
-      i0__namespace.ɵɵadvance(2);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + groupindex_r12)("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(9, _c3$2, ctx_r2.collapsible));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵattribute("aria-label", "Group " + groupObj_r7.key);
+      i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
       i0__namespace.ɵɵadvance(2);
       i0__namespace.ɵɵproperty("ngIf", ctx_r2.collapsible);
@@ -1039,7 +1051,7 @@
       i0__namespace.ɵɵproperty("ngForOf", groupObj_r7.data);
   } }
   function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 8, "li", 14);
+      i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 11, "li", 14);
   } if (rf & 2) {
       const ctx_r2 = i0__namespace.ɵɵnextContext();
       i0__namespace.ɵɵproperty("ngForOf", ctx_r2.groupedData);
@@ -1056,6 +1068,8 @@
       }
       triggerInvokeOnChange(keys, $event) {
           this.modelByKey = keys;
+          if (this.viewParent.containerWidget)
+              this.viewParent.containerWidget.updateDataValue(this.datavalue);
           this.invokeOnTouched();
           // invoke on datavalue change.
           this.invokeOnChange(this.datavalue, $event || {}, true);
@@ -1114,13 +1128,13 @@
                   i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(CheckboxsetComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "click", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["type", "checkbox", "aria-label", "checkbox group", 3, "name", "tabindex", "disabled", "value", "checked"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], ["aria-hidden", "true", 1, "list-group-header", 3, "click", "id", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
               i0__namespace.ɵɵelement(1, "input", 2);
               i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
           } if (rf & 2) {
-              const groupedListTemplate_r12 = i0__namespace.ɵɵreference(4);
-              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+              const groupedListTemplate_r13 = i0__namespace.ɵɵreference(4);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r13);
               i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
               i0__namespace.ɵɵadvance();
@@ -1133,7 +1147,7 @@
                       i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(CheckboxsetComponent)
-                  ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems; let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n            <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" [attr.aria-label]=\"item.key\"\n                   [tabindex]=\"tabindex\" [attr.aria-checked]=\"item.selected\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\" role=\"presentation\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onCheckboxLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\" aria-label=\"checkbox group\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
+                  ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems; let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n            <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n                   type=\"checkbox\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n            <input [name]=\"'checkboxset_' + widgetId\" [tabindex]=\"tabindex\"\n                   type=\"checkbox\"\n                   [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData; let groupindex = index;\" class=\"app-list-item-group\" role=\"presentation\">\n        <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n            <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['checkbox', 'app-checkbox', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onCheckboxLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" [title]=\"item.label\">\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-checkboxset-label\" [ngClass]=\"{'disabled':disabled || readonly}\" >\n                    <input [name]=\"'checkboxset_' + widgetId\" type=\"checkbox\"\n                           [tabindex]=\"tabindex\"\n                           [disabled]=\"disabled || readonly\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
       }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -1239,6 +1253,7 @@
       ['datavalue', i2.PROP_STRING],
       ['disabled', i2.PROP_BOOLEAN],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['localefilter', i2.PROP_STRING],
       ['minvalue', i2.PROP_NUMBER],
       ['maxvalue', i2.PROP_NUMBER],
@@ -1255,6 +1270,7 @@
       ['trailingzero', { value: false, ...i2.PROP_BOOLEAN }],
       ['updateon', i2.PROP_STRING],
       ['inputmode', { value: 'natural', ...i2.PROP_STRING }],
+      ['decimalplaces', i2.PROP_NUMBER],
       ['conditionalclass', i2.PROP_ANY],
       ['conditionalstyle', i2.PROP_ANY]
   ]);
@@ -1374,7 +1390,7 @@
               const prevDataValue = this.prevDatavalue;
               this.displayValue = input.value = this.proxyModel = null;
               this.resetValidations();
-              if (prevDataValue && !this.isDefaultQuery) {
+              if ((prevDataValue || prevDataValue == 0) && !this.isDefaultQuery) {
                   this.handleChange(value);
                   this._onChange();
               }
@@ -1384,8 +1400,27 @@
           if (this.isDefaultQuery) {
               const isLocalizedNumber = lodashEs.isString(value) && lodashEs.includes(value, this.DECIMAL);
               const parts = isLocalizedNumber ? value.split(this.DECIMAL) : lodashEs.isString(value) && value.split('.');
-              this.decimalValue = parts[1] || '';
-              value = isLocalizedNumber ? value : this.transformNumber(value);
+              let decimalPlacesAttrVal = this.getAttr('decimalplaces');
+              const decimalplaces = decimalPlacesAttrVal !== '' && decimalPlacesAttrVal !== undefined ? Number(decimalPlacesAttrVal) : NaN;
+              if (this.inputmode === i2.INPUTMODE.NATURAL && !isNaN(decimalplaces)) {
+                  if (decimalplaces === 0) {
+                      this.decimalValue = '';
+                      value = isLocalizedNumber ? parts[0] : this.transformNumber(parts[0]);
+                  }
+                  if (decimalplaces > 0) {
+                      this.decimalValue = parts[1] && parts[1].substring(0, decimalplaces) || '';
+                      if (isLocalizedNumber) {
+                          value = this.decimalValue.length ? `${parts[0]}${this.DECIMAL}${this.decimalValue}` : parts[0];
+                      }
+                      else {
+                          value = Number.parseFloat(String(value)).toFixed(decimalplaces);
+                      }
+                  }
+              }
+              else {
+                  this.decimalValue = parts[1] || '';
+                  value = isLocalizedNumber ? value : this.transformNumber(value);
+              }
           }
           const numberReg = /\d/;
           const strVal = value.toString();
@@ -1434,8 +1469,14 @@
        */
       isValid(val) {
           // id number is infinite then consider it as invalid value
-          if (isNaN(val) || !isFinite(val) || (!Number.isInteger(this.step) &&
-              this.countDecimals(val) > this.countDecimals(this.step))) {
+          let invalidDecimalPlaces = false;
+          if (this.inputmode === i2.INPUTMODE.NATURAL && !isNaN(this.decimalplaces) && this.decimalplaces >= 0) {
+              invalidDecimalPlaces = this.countDecimals(val) > this.decimalplaces;
+          }
+          else if (!Number.isInteger(this.step) && this.countDecimals(val) > this.countDecimals(this.step)) {
+              invalidDecimalPlaces = true;
+          }
+          if (isNaN(val) || !isFinite(val) || invalidDecimalPlaces) {
               this.isInvalidNumber = true;
               return false;
           }
@@ -1544,6 +1585,9 @@
       }
       // This function returns the step length set in the studio
       stepLength() {
+          if (this.inputmode === 'INPUTMODE.NATURAL' && !isNaN(this.decimalplaces) && this.decimalplaces >= 0) {
+              return this.decimalplaces;
+          }
           const stepLen = this.step.toString().split('.');
           if (stepLen.length === 1) {
               return;
@@ -1626,11 +1670,10 @@
        * @returns {number}
        */
       countDecimals(value) {
-          if ((value % 1) !== 0) {
-              const decimalValue = value.toString().split('.')[1];
-              return decimalValue && decimalValue.length;
-          }
-          return 0;
+          const valueStr = value.toString();
+          const isLocalizedNumber = lodashEs.includes(valueStr, this.DECIMAL);
+          const parts = isLocalizedNumber ? valueStr.split(this.DECIMAL) : valueStr.split('.');
+          return parts[1] ? parts[1].length : 0;
       }
       /**
        * handles the arrow press event. Increases or decreases the number. triggered fom the template
@@ -1715,7 +1758,7 @@
           const validity = new RegExp(`^[\\d\\s-,.e+${this.GROUP}${this.DECIMAL}]$`, 'i');
           const inputValue = $event.target.value;
           // when input mode is financial, do not restrict user on entering the value when step value limit is reached.
-          const skipStepValidation = this.inputmode === i2.INPUTMODE.FINANCIAL;
+          this.inputmode === i2.INPUTMODE.FINANCIAL;
           // Validates if user eneters more than 16 digits
           if (inputValue) {
               const parsedVal = parseInt(inputValue.toString().replace(/\D/g, ''));
@@ -1732,13 +1775,23 @@
           }
           // validates entering of decimal values only when user provides decimal limit(i.e step contains decimal values).
           // Restrict user from entering only if the decimal limit is reached and the new digit is entered in decimal place
-          if (!skipStepValidation && inputValue && this.countDecimals(this.step) && (this.countDecimals(inputValue) >= this.countDecimals(this.step)) && $event.target.selectionStart >= inputValue.length - 1) {
-              return false;
-          }
+          // if (!skipStepValidation && inputValue && this.countDecimals(this.step) && (this.countDecimals(inputValue) >= this.countDecimals(this.step)) && $event.target.selectionStart >= inputValue.length - 1) {
+          //     return false;
+          // }
           // validates if user entered an invalid character.
           if (!validity.test($event.key)) {
               return false;
           }
+          if (this.inputmode === i2.INPUTMODE.NATURAL && !isNaN(this.decimalplaces)) {
+              if (this.decimalplaces === 0 && this.DECIMAL === $event.key) {
+                  return false;
+              }
+              const parts = lodashEs.includes(inputValue, this.DECIMAL) ? inputValue.split(this.DECIMAL) : inputValue.split('.');
+              const isCursorPositionAtDecimalPlace = $event.target.selectionStart > parts[0].length;
+              if (this.decimalplaces > 0 && this.countDecimals(inputValue) >= this.decimalplaces && isCursorPositionAtDecimalPlace) {
+                  return false;
+              }
+          }
           // comma cannot be entered consecutively
           if (lodashEs.includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
               return false;
@@ -1817,14 +1870,14 @@
                   i2.provideAs(NumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(NumberComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(NumberComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["input", ""], ["inputmode", "decimal", "focus-target", "", "role", "textbox", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown", "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required"]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c1$8, decls: 2, vars: 14, consts: [["input", ""], ["inputmode", "decimal", "focus-target", "", "type", "text", 1, "form-control", "app-textbox", "app-number-input", 3, "ngModelChange", "blur", "focus", "input", "keypress", "keydown.backspace", "keydown.enter", "keydown.ArrowUp", "keydown.ArrowDown", "ngModel", "readonly", "disabled", "pattern", "autofocus", "ngClass", "ngStyle", "ngModelOptions", "required"]], template: function NumberComponent_Template(rf, ctx) { if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 1, 0);
               i0__namespace.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onModelChange($event)); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0__namespace.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("input", function NumberComponent_Template_input_input_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputChange($event.target.value)); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.validateInputEntry($event)); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onBackspace($event)); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onEnter($event)); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event, "UP")); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onArrowPress($event, "DOWN")); });
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
               i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+              i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.PatternValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(NumberComponent, [{
@@ -1833,7 +1886,7 @@
                       i2.provideAs(NumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(NumberComponent, i2$1.NG_VALIDATORS, true),
                       i2.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       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__namespace.Injector }, { type: i1$1__namespace.AbstractI18nService }, { type: i2__namespace.TrailingZeroDecimalPipe }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -1895,10 +1948,10 @@
       const item_r2 = ctx_r3.$implicit;
       const i_r5 = ctx_r3.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
+      i0__namespace.ɵɵproperty("checked", item_r2.selected)("disabled", ctx_r2.disabled || ctx_r2.readonly)("name", "radioset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("value", item_r2.key);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r5);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("textContent", item_r2.label);
   } }
@@ -1911,16 +1964,16 @@
       const item_r2 = ctx_r3.$implicit;
       const i_r5 = ctx_r3.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(7, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
+      i0__namespace.ɵɵproperty("checked", item_r2.selected)("disabled", ctx_r2.disabled || ctx_r2.readonly)("name", "radioset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("value", item_r2.key);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r5);
   } }
   function RadiosetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
       const _r1 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 5);
       i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
-      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6)(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 11, "label", 6);
+      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 10, "label", 6)(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 9, "label", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const item_r2 = ctx.$implicit;
@@ -1955,39 +2008,39 @@
   } }
   function RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
-      i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 9);
+      i0__namespace.ɵɵelement(1, "input", 24)(2, "span", 9);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r9 = i0__namespace.ɵɵnextContext();
       const item_r9 = ctx_r9.$implicit;
       const i_r11 = ctx_r9.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(9, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r11);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("textContent", item_r9.label);
   } }
   function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
       i0__namespace.ɵɵelementStart(0, "label", 7);
-      i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 10);
+      i0__namespace.ɵɵelement(1, "input", 24)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r9 = i0__namespace.ɵɵnextContext();
       const item_r9 = ctx_r9.$implicit;
       const i_r11 = ctx_r9.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(3);
-      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+      i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(7, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r11);
   } }
   function RadiosetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
       const _r8 = i0__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "li", 23);
       i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
-      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 11, "label", 6)(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 6);
+      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 10, "label", 6)(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 9, "label", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const item_r9 = ctx.$implicit;
@@ -2012,10 +2065,15 @@
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
       const groupObj_r7 = ctx.$implicit;
+      const groupindex_r12 = ctx.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-      i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(6, _c3$1, ctx_r2.collapsible));
-      i0__namespace.ɵɵadvance(2);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + groupindex_r12)("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(9, _c3$1, ctx_r2.collapsible));
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵattribute("aria-label", "Group " + groupObj_r7.key);
+      i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
       i0__namespace.ɵɵadvance(2);
       i0__namespace.ɵɵproperty("ngIf", ctx_r2.collapsible);
@@ -2025,7 +2083,7 @@
       i0__namespace.ɵɵproperty("ngForOf", groupObj_r7.data);
   } }
   function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 8, "li", 12);
+      i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 11, "li", 12);
   } if (rf & 2) {
       const ctx_r2 = i0__namespace.ɵɵnextContext();
       i0__namespace.ɵɵproperty("ngForOf", ctx_r2.groupedData);
@@ -2042,6 +2100,8 @@
       }
       triggerInvokeOnChange(key, $event) {
           this.modelByKey = key;
+          if (this.viewParent.containerWidget)
+              this.viewParent.containerWidget.updateDataValue(this.datavalue);
           this.invokeOnTouched();
           // invoke on datavalue change.
           this.invokeOnChange(this.datavalue, $event || {}, true);
@@ -2086,13 +2146,13 @@
                   i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(RadiosetComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", 4, "ngFor", "ngForOf"], [1, "app-list-item-group"], [1, "item-group"], [1, "list-group-header", 3, "click", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "checked", "disabled", "name", "tabindex", "value"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], ["aria-hidden", "true", 1, "list-group-header", 3, "click", "id", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
               i0__namespace.ɵɵelement(1, "input", 2);
               i0__namespace.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 3)(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
           } if (rf & 2) {
-              const groupedListTemplate_r12 = i0__namespace.ɵɵreference(4);
-              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+              const groupedListTemplate_r13 = i0__namespace.ɵɵreference(4);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r13);
               i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
               i0__namespace.ɵɵadvance();
@@ -2105,7 +2165,7 @@
                       i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(RadiosetComponent)
-                  ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems;let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                   [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"\n                   [attr.aria-label]=\"item.key\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData\" class=\"app-list-item-group\">\n        <ul class=\"item-group\">\n            <li class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onRadioLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [name]=\"'radioset_' + widgetId\" type=\"radio\" [attr.aria-checked]=\"item.selected\" [attr.data-attr-index]=\"i\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption customTemplate\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
+                  ], template: "<ng-template [ngIf]=\"!groupby\" [ngIfElse]=\"groupedListTemplate\">\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n        [class.active]=\"item.selected\"\n        *ngFor=\"let item of datasetItems;let i = index\"\n        [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n        (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n        <!-- Default item template -->\n        <label *ngIf=\"!content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [attr.data-attr-index]=\"i\" [checked]=\"item.selected\" [disabled]=\"disabled || readonly\"\n                   [name]=\"'radioset_' + widgetId\" [tabindex]=\"tabindex\" [value]=\"item.key\"\n                   type=\"radio\"/>\n            <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n        <!-- Custom partial template -->\n        <label *ngIf=\"content\" class=\"app-radioset-label\"\n               [ngClass]=\"{'disabled':disabled || readonly}\">\n            <input [attr.data-attr-index]=\"i\" [checked]=\"item.selected\" [disabled]=\"disabled || readonly\"\n                   [name]=\"'radioset_' + widgetId\" [tabindex]=\"tabindex\" [value]=\"item.key\"\n                   type=\"radio\"/>\n            <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n    </li>\n</ng-template>\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n<div *ngIf=\"readonly || disabled\" aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n\n<!-- This template will be displayed when groupby is specified. -->\n<ng-template #groupedListTemplate>\n    <li *ngFor=\"let groupObj of groupedData; let groupindex = index;\" class=\"app-list-item-group\" role=\"presentation\" >\n        <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n            <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n                <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n                    <div class=\"header-action\">\n                        <i class=\"app-icon wi action wi-chevron-up\" *ngIf=\"collapsible\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n                        <span *ngIf=\"showcount\" class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n                    </div>\n                </h4>\n            </li>\n            <li *ngFor=\"let item of groupObj.data; let i = index;\"\n                [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n                [class.active]=\"item.selected\"\n                [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n                (click)=\"onRadioLabelClick($event, item)\">\n                <!-- Default item template -->\n                <label *ngIf=\"!content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [attr.data-attr-index]=\"i\" [name]=\"'radioset_' + widgetId\" type=\"radio\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption\" [textContent]=\"item.label\"></span>\n                </label>\n                <!-- Custom partial template -->\n                <label *ngIf=\"content\" class=\"app-radioset-label\"\n                       [ngClass]=\"{'disabled':disabled || readonly}\">\n                    <input [attr.data-attr-index]=\"i\" [name]=\"'radioset_' + widgetId\" type=\"radio\"\n                           [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                    <span class=\"caption customTemplate\" partial-container-target></span>\n                </label>\n            </li>\n        </ul>\n    </li>\n</ng-template>\n" }]
       }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -2129,6 +2189,7 @@
       ['displayValue', i2.PROP_STRING],
       ['groupby', i2.PROP_STRING],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['match', i2.PROP_STRING],
       ['multiple', { value: false, ...i2.PROP_BOOLEAN }],
       ['name', i2.PROP_STRING],
@@ -2198,10 +2259,38 @@
               this.datavalue = ds.execute(i1$1.DataSource.Operation.GET_DEFAULT_LOCALE);
           }
       }
-      constructor(inj, app, explicitContext) {
+      constructor(inj, explicitContext) {
           super(inj, WIDGET_CONFIG$7, explicitContext);
-          this.app = app;
           this.acceptsArray = true;
+          /*
+          * When the dataset for a select element is updated and no longer includes the previously selected value:
+          * The select element becomes empty, and the ngModel value is updated to reflect this change.
+          * However, the change event is not triggered, preventing the form control from recognizing the update and applying necessary validations.
+          * As this widget implements ControlValueAccessor, manually updating the ngModel (or modelByKey) is necessary to ensure correct form behavior.
+          * */
+          const datasetSubscription = this.dataset$.subscribe(() => {
+              if (i1$1.isIos() || i1$1.isSafari()) {
+                  if (this.datavalue) {
+                      const selectedItem = this.datasetItems.find(item => item.selected);
+                      if (!selectedItem) {
+                          setTimeout(() => {
+                              if (!this.placeholder) {
+                                  this.selectEl.nativeElement.value = '';
+                              }
+                              this.modelByKey = undefined;
+                          }, 100);
+                      }
+                  }
+                  else {
+                      setTimeout(() => {
+                          if (!this.placeholder) {
+                              this.selectEl.nativeElement.value = '';
+                          }
+                      }, 100);
+                  }
+              }
+          });
+          this.registerDestroyListener(() => datasetSubscription.unsubscribe());
       }
       ngAfterViewInit() {
           super.ngAfterViewInit();
@@ -2209,7 +2298,7 @@
       }
       // Change event is registered from the template, Prevent the framework from registering one more event
       handleEvent(node, eventName, eventCallback, locals) {
-          if (!lodashEs.includes(['blur', 'change'], eventName)) {
+          if (!['blur', 'change'].includes(eventName)) {
               super.handleEvent(this.selectEl.nativeElement, eventName, eventCallback, locals);
           }
       }
@@ -2260,36 +2349,40 @@
        */
       checkForFloatingLabel($event) {
           const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');
+          if (!this.placeholder && (i1$1.isIos() || i1$1.isSafari())) {
+              this.removePlaceholderOption();
+          }
           if (captionEl.length > 0) {
-              if ($event.type === 'focus' && (!this.datavalue || (this.datavalue && $(this.selectEl).find('select option:selected').text() === '' && this.placeholder))) {
-                  if (!(this.datavalue || this.placeholder)) {
-                      this.removePlaceholderOption();
-                  }
-                  else {
-                      $(this.selectEl.nativeElement).find('option:first').text(this.placeholder);
+              const placeholderOption = this.selectEl.nativeElement.querySelector('#placeholderOption');
+              if ($event.type === 'mousedown' && (!this.datavalue || (this.datavalue && $(this.selectEl).find('select option:selected').text() === '' && this.placeholder))) {
+                  if (this.placeholder) {
+                      placeholderOption.textContent = this.placeholder;
                   }
               }
               else if (!this.datavalue) {
-                  $(this.selectEl.nativeElement).find('option:selected').text('');
+                  if (this.placeholder) {
+                      placeholderOption.textContent = '';
+                  }
                   captionEl.removeClass('float-active');
               }
           }
-          else if (!(this.datavalue || this.placeholder)) {
-              this.removePlaceholderOption();
-          }
       }
       /*
       * Removing the placeholder option if no placeholder is provided.
-      * In html we are hiding the placeholder option using css but in apple devices and safari option is showing.
+      * In html we are hiding the placeholder option using css but in Apple devices and safari option is showing.
+      * Styles are not allowed on option tag in ios safari
+      * After removing the option, if no datavalue is present and native select element sets value to the first option by default, so we are setting it to empty
       * */
       removePlaceholderOption() {
           const hiddenEle = $(this.selectEl.nativeElement).find('#placeholderOption');
           if (hiddenEle.length) {
               hiddenEle.remove();
-              this.selectEl.nativeElement.value = '';
+              if (!this.datavalue) {
+                  this.selectEl.nativeElement.value = '';
+              }
           }
       }
-      static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+      static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SelectComponent, selectors: [["wm-select"]], viewQuery: function SelectComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0$7, 7, i0.ElementRef);
           } if (rf & 2) {
@@ -2299,11 +2392,11 @@
                   i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(SelectComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 18, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "ngModelOptions", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 18, consts: [["select", ""], ["focus-target", "", 3, "ngModelChange", "change", "mousedown", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "ngModelOptions", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], [3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], [3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "select", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0__namespace.ɵɵresetView($event); });
-              i0__namespace.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onSelectValueChange($event)); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
+              i0__namespace.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onSelectValueChange($event)); })("mousedown", function SelectComponent_Template_select_mousedown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
               i0__namespace.ɵɵelement(2, "option", 2);
               i0__namespace.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
               i0__namespace.ɵɵelementEnd();
@@ -2311,7 +2404,7 @@
               i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
               i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵpureFunction0(17, _c2$4))("multiple", ctx.multiple)("autofocus", ctx.autofocus);
-              i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
+              i0__namespace.ɵɵattribute("accesskey", ctx.shortcutkey)("name", ctx.name)("aria-label", ctx.arialabel);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
               i0__namespace.ɵɵadvance();
@@ -2326,8 +2419,8 @@
                       i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(SelectComponent)
-                  ], template: "<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        (focus)=\"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" }]
-      }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.App }, { type: undefined, decorators: [{
+                  ], template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [attr.accesskey]=\"shortcutkey\"\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        [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            ></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        ></option>\n    </ng-container>\n</select>\n" }]
+      }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
               }, {
@@ -2336,7 +2429,7 @@
               type: i0.ViewChild,
               args: ['select', { static: true, read: i0.ElementRef }]
           }] }); })();
-  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 22 }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 20 }); })();
 
   const switchProps = new Map([
       ['class', i2.PROP_STRING],
@@ -2349,6 +2442,7 @@
       ['displayexpression', i2.PROP_STRING],
       ['displayfield', i2.PROP_STRING],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['iconclass', i2.PROP_STRING],
       ['checkediconclass', { value: 'wm-sl-l sl-check', ...i2.PROP_STRING }],
       ['name', i2.PROP_STRING],
@@ -2391,7 +2485,8 @@
   } if (rf & 2) {
       const opt_r3 = ctx.$implicit;
       const ctx_r4 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0__namespace.ɵɵpureFunction2(5, _c2$3, opt_r3.selected, ctx_r4.disabled));
+      i0__namespace.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0__namespace.ɵɵpureFunction2(6, _c2$3, opt_r3.selected, ctx_r4.disabled));
+      i0__namespace.ɵɵattribute("aria-pressed", opt_r3.selected ? true : false);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass] && !opt_r3.selected);
       i0__namespace.ɵɵadvance();
@@ -2539,9 +2634,9 @@
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAsWidgetRef(SwitchComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 4, vars: 9, consts: [["role", "group", 1, "btn-group", "btn-group-justified", 3, "ngClass"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], ["class", "btn btn-primary app-switch-overlay switch-handle", 3, "title", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", 1, "btn", "btn-default", 3, "click", "name", "ngClass"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"], [1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "ngClass"], [1, "caption"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 4, vars: 9, consts: [["role", "group", 1, "btn-group", "btn-group-justified", 3, "ngClass"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", "role", "button", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], ["aria-hidden", "true", "class", "btn btn-primary app-switch-overlay switch-handle", 3, "title", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", "role", "button", 1, "btn", "btn-default", 3, "click", "name", "ngClass"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"], ["aria-hidden", "true", 1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "ngClass"], [1, "caption"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵelementStart(0, "div", 0);
-              i0__namespace.ɵɵtemplate(1, SwitchComponent_a_1_Template, 4, 8, "a", 1);
+              i0__namespace.ɵɵtemplate(1, SwitchComponent_a_1_Template, 4, 9, "a", 1);
               i0__namespace.ɵɵelementEnd();
               i0__namespace.ɵɵtemplate(2, SwitchComponent_span_2_Template, 4, 5, "span", 2);
               i0__namespace.ɵɵelement(3, "input", 3);
@@ -2560,7 +2655,7 @@
           args: [{ selector: '[wmSwitch]', providers: [
                       i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAsWidgetRef(SwitchComponent)
-                  ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\" [ngClass]=\"{'multi-select': multiple}\">\n    <a *ngFor=\"let opt of datasetItems; let $index = index;\"\n       focus-target\n       href=\"javascript:void(0);\"\n       class=\"btn btn-default\"\n       [name]=\"'wm-switch-' + opt.key\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       (click)=\"selectOpt($event, $index, opt)\"\n    >\n        <i *ngIf=\"opt.dataObject && opt.dataObject[iconclass] && !opt.selected\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <i *ngIf=\"opt.selected\" aria-hidden=\"true\" [ngClass]=\"[checkediconclass]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span [title]=\"selectedItem ? selectedItem.label : modelByKey\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\" *ngIf=\"!multiple\">\n    <i [ngClass]=\"[checkediconclass]\"></i>\n    <span class=\"caption\">{{selectedItem ? selectedItem.label : modelByKey}}</span>\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
+                  ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\" [ngClass]=\"{'multi-select': multiple}\">\n    <a *ngFor=\"let opt of datasetItems; let $index = index;\"\n       focus-target\n       href=\"javascript:void(0);\"\n       class=\"btn btn-default\"\n       [name]=\"'wm-switch-' + opt.key\"\n       role=\"button\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       [attr.aria-pressed]=\"opt.selected ? true : false\"\n       (click)=\"selectOpt($event, $index, opt)\"\n    >\n        <i *ngIf=\"opt.dataObject && opt.dataObject[iconclass] && !opt.selected\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <i *ngIf=\"opt.selected\" aria-hidden=\"true\" [ngClass]=\"[checkediconclass]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span [title]=\"selectedItem ? selectedItem.label : modelByKey\" aria-hidden=\"true\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\" *ngIf=\"!multiple\">\n    <i [ngClass]=\"[checkediconclass]\"></i>\n    <span class=\"caption\">{{selectedItem ? selectedItem.label : modelByKey}}</span>\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
       }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -2578,6 +2673,7 @@
       ['datavalue', i2.PROP_STRING],
       ['disabled', i2.PROP_BOOLEAN],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['maxvalue', i2.PROP_NUMBER],
       ['minvalue', i2.PROP_NUMBER],
       ['name', i2.PROP_STRING],
@@ -2621,7 +2717,7 @@
                   i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputCalendarComponent)
-              ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
@@ -2631,7 +2727,7 @@
               i0__namespace.ɵɵproperty("type", ctx.type);
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
               i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
+              i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel || ctx.type + " field");
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputCalendarComponent, [{
@@ -2640,7 +2736,7 @@
                       i2.provideAs(InputCalendarComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputCalendarComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -2664,6 +2760,7 @@
       ['datavalue', i2.PROP_STRING],
       ['disabled', i2.PROP_BOOLEAN],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['name', i2.PROP_STRING],
       ['placeholder', { value: 'Enter text', ...i2.PROP_STRING }],
       ['readonly', i2.PROP_BOOLEAN],
@@ -2704,7 +2801,7 @@
                   i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputColorComponent)
-              ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
@@ -2714,7 +2811,7 @@
               i0__namespace.ɵɵproperty("type", ctx.type);
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
               i0__namespace.ɵɵproperty("ngModelOptions", i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+              i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputColorComponent, [{
@@ -2723,7 +2820,7 @@
                       i2.provideAs(InputColorComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputColorComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -2747,6 +2844,7 @@
       ['datavalue', i2.PROP_STRING],
       ['disabled', i2.PROP_BOOLEAN],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['maxchars', i2.PROP_NUMBER],
       ['name', i2.PROP_STRING],
       ['placeholder', { value: 'Enter text', ...i2.PROP_STRING }],
@@ -2788,7 +2886,7 @@
                   i2.provideAs(InputEmailComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputEmailComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputEmailComponent)
-              ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
@@ -2798,7 +2896,7 @@
               i0__namespace.ɵɵproperty("type", ctx.type);
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
               i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+              i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.PatternValidator, i2$1__namespace.EmailValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputEmailComponent, [{
@@ -2807,7 +2905,7 @@
                       i2.provideAs(InputEmailComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputEmailComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -2831,6 +2929,7 @@
       ['datavalue', i2.PROP_STRING],
       ['disabled', i2.PROP_BOOLEAN],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['maxchars', i2.PROP_NUMBER],
       ['maxvalue', i2.PROP_NUMBER],
       ['minvalue', i2.PROP_NUMBER],
@@ -2886,7 +2985,7 @@
                   i2.provideAs(InputNumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputNumberComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputNumberComponent)
-              ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
@@ -2896,7 +2995,7 @@
               i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type);
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
               i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+              i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputNumberComponent, [{
@@ -2905,7 +3004,7 @@
                       i2.provideAs(InputNumberComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputNumberComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -2930,6 +3029,7 @@
       ['disabled', i2.PROP_BOOLEAN],
       ['displayformat', i2.PROP_STRING],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['maxchars', i2.PROP_NUMBER],
       ['name', i2.PROP_STRING],
       ['placeholder', { value: 'Enter text', ...i2.PROP_STRING }],
@@ -3053,7 +3153,7 @@
                   i2.provideAs(InputTextComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(InputTextComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(InputTextComponent)
-              ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "input", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
@@ -3063,7 +3163,7 @@
               i0__namespace.ɵɵproperty("type", ctx.type);
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
               i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
+              i0__namespace.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.PatternValidator, i2$1__namespace.NgModel, i3__namespace.IMaskDirective], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(InputTextComponent, [{
@@ -3072,7 +3172,7 @@
                       i2.provideAs(InputTextComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(InputTextComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -3098,6 +3198,7 @@
       ['datavalue', i2.PROP_STRING],
       ['disabled', i2.PROP_BOOLEAN],
       ['hint', i2.PROP_STRING],
+      ['arialabel', i2.PROP_STRING],
       ['maxchars', i2.PROP_NUMBER],
       ['name', i2.PROP_STRING],
       ['placeholder', { value: 'Place your text', ...i2.PROP_STRING }],
@@ -3140,6 +3241,9 @@
       onInputChange() {
           this.charlength = this.inputEl.nativeElement.value.length;
       }
+      ngAfterViewChecked() {
+          this.charlength = this.inputEl.nativeElement.value.length;
+      }
       static { this.ɵfac = function TextareaComponent_Factory(t) { return new (t || TextareaComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: TextareaComponent, selectors: [["wm-textarea"]], viewQuery: function TextareaComponent_Query(rf, ctx) { if (rf & 1) {
               i0__namespace.ɵɵviewQuery(_c0, 7);
@@ -3152,7 +3256,7 @@
                   i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(TextareaComponent)
-              ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "textarea", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
@@ -3162,7 +3266,7 @@
           } if (rf & 2) {
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
               i0__namespace.ɵɵ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__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+              i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("ngIf", ctx.maxchars);
           } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
@@ -3173,7 +3277,7 @@
                       i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -3186,7 +3290,7 @@
               type: i0.ViewChild,
               args: [i2$1.NgModel]
           }] }); })();
-  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 22 }); })();
+  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 23 }); })();
 
   class CaptionPositionDirective {
       constructor(inj, app) {
@@ -3217,9 +3321,10 @@
       }
       // For select widget, display placeholder only on focus else remove the text of the option selected.
       checkForSelectPlaceholder() {
-          if ($(this.nativeEl).find('select option:selected').text() && !$(this.nativeEl).find('select').is(':focus') &&
+          const selectElPlaceholderOption = this.nativeEl.querySelector('#placeholderOption');
+          if (selectElPlaceholderOption && selectElPlaceholderOption.textContent && !$(this.nativeEl).find('select').is(':focus') &&
               !$(this.inputEl.closest('[widget-id]')).attr('datavalue')) {
-              $(this.nativeEl).find('select option:selected').text('');
+              selectElPlaceholderOption.textContent = '';
           }
       }
       setDefaultValueAnimation() {
@@ -3321,10 +3426,10 @@
                   // before placeholder is removed assign it to the placeholder variable
                   // check for placeholder in inputel and selectel
                   if (this.inputEl) {
-                      const selectEl = this.inputEl.find('option:first');
-                      if (this.inputEl.attr('placeholder') || selectEl.text()) {
-                          if (selectEl.length) {
-                              selectEl.text('');
+                      const selectElPlaceholderOption = this.nativeEl.querySelector('#placeholderOption');
+                      if (this.inputEl.attr('placeholder') || selectElPlaceholderOption) {
+                          if (selectElPlaceholderOption) {
+                              selectElPlaceholderOption.textContent = '';
                           }
                           else {
                               this.placeholder = this.inputEl.attr('placeholder');