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

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

@@ -9,7 +9,7 @@ import { IMaskDirective, IMaskModule } from 'angular-imask';
 import * as i2 from '@wm/components/base';
 import { PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, register, DISPLAY_TYPE, StylableComponent, styler, provideAsWidgetRef, APPLY_STYLES_TYPE, WidgetConfig, registerFormWidget, provideAs, extractDataAsArray, ToDatePipe, ALLFIELDS, convertDataToObject, getOrderedDataset, transformDataWithKeys, transformFormData, getUniqObjsByDataField, groupData, handleHeaderClick, toggleAllHeaders, WidgetRef, INPUTMODE, TrailingZeroDecimalPipe, WmComponentsModule } from '@wm/components/base';
 import * as i1$1 from '@wm/core';
-import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, $appDigest, debounce as debounce$1, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, AbstractI18nService, setAttr, removeAttr, setCSS } from '@wm/core';
+import { DataSource, FormWidgetType, isDefined, toggleClass, AppDefaults, $appDigest, debounce as debounce$1, noop, isEqualWithFields, toBoolean, setListClass, switchClass, addForIdAttributes, addClass, AbstractI18nService, isIos, isSafari, setAttr, removeAttr, setCSS } from '@wm/core';
 import { has, set, isArray, debounce, toString, find, isNull, isObject, isEqual, isEmpty, forEach, includes, isString, get, isUndefined, round, toArray, intersection, findIndex } from 'lodash-es';
 import { Subject } from 'rxjs';
 import { __param, __metadata, __decorate } from 'tslib';
@@ -24,6 +24,7 @@ const registerProps$e = () => {
         ['conditionalstyle', PROP_ANY],
         ['disabled', PROP_BOOLEAN],
         ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
         ['iconclass', PROP_STRING],
         ['iconheight', PROP_STRING],
         ['iconmargin', PROP_STRING],
@@ -41,21 +42,21 @@ const registerProps$e = () => {
 const _c0$c = ["wmButton", ""];
 const _c1$b = [[["", 8, "caret"]]];
 const _c2$8 = [".caret"];
-const _c3$4 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
-const _c4$3 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
+const _c3$3 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
+const _c4$2 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
 function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 5);
     i0.ɵɵpipe(1, "image");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c3$4, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
+    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c3$3, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
 } }
 function ButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 6);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction4(4, _c4$3, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin, ctx_r0.iconwidth));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction4(4, _c4$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin, ctx_r0.iconwidth));
 } }
 function ButtonComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
@@ -369,6 +370,7 @@ const checkboxProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['name', PROP_STRING],
     ['readonly', PROP_BOOLEAN],
     ['required', PROP_BOOLEAN],
@@ -386,7 +388,7 @@ const registerProps$c = () => {
 const _c0$b = ["checkbox"];
 const _c1$a = ["wmCheckbox", ""];
 const _c2$7 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
-const _c3$3 = () => ({ standalone: true });
+const _c3$2 = () => ({ standalone: true });
 const DEFAULT_CLS$4 = 'app-checkbox checkbox';
 const WIDGET_CONFIG$c = {
     widgetType: 'wm-checkbox',
@@ -496,7 +498,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
                 provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(CheckboxComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(CheckboxComponent)
-            ]), i0.ɵɵ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.ɵɵ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.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0.ɵɵresetView($event); });
@@ -506,11 +508,11 @@ class CheckboxComponent extends BaseFormCustomComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵelement(5, "input", 5);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(14, _c2$7, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(13, _c2$7, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
-            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c3$3))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(17, _c3$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
+            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("accesskey", ctx.shortcutkey);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("innerHtml", ctx._caption, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance(2);
@@ -523,7 +525,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
                     provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(CheckboxComponent)
-                ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
+                ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           #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.Injector }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['checkedvalue']
@@ -884,8 +886,8 @@ const registerProps$b = () => {
 const _c0$a = ["wmCheckboxset", ""];
 const _c1$9 = (a0, a1) => ["checkbox", "app-checkbox", a0, a1];
 const _c2$6 = a0 => ({ "disabled": a0 });
-const _c3$2 = a0 => ({ "collapsible-content": a0 });
-const _c4$2 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
+const _c3$1 = a0 => ({ "collapsible-content": a0 });
+const _c4$1 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
 function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 8);
     i0.ɵɵelement(1, "input", 9)(2, "span", 10);
@@ -895,10 +897,10 @@ function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if
     const item_r2 = ctx_r3.$implicit;
     const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
     i0.ɵɵadvance();
     i0.ɵɵ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.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
+    i0.ɵɵattribute("data-attr-index", i_r5);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", item_r2.label);
 } }
@@ -911,16 +913,16 @@ function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if
     const item_r2 = ctx_r3.$implicit;
     const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵ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.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
+    i0.ɵɵattribute("data-attr-index", i_r5);
 } }
 function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 5);
     i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
-    i0.ɵɵ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.ɵɵ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.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r2 = ctx.$implicit;
@@ -955,7 +957,7 @@ function CheckboxsetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (
 } }
 function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 8);
-    i0.ɵɵelement(1, "input", 26)(2, "span", 10);
+    i0.ɵɵelement(1, "input", 9)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
@@ -971,7 +973,7 @@ function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx)
 } }
 function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 11);
-    i0.ɵɵelement(1, "input", 26)(2, "span", 27);
+    i0.ɵɵelement(1, "input", 9)(2, "span", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
@@ -993,7 +995,7 @@ function CheckboxsetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf
     const item_r9 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵclassProp("active", item_r9.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4$2, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4$1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.content);
     i0.ɵɵadvance();
@@ -1012,10 +1014,15 @@ function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const groupObj_r7 = ctx.$implicit;
+    const groupindex_r12 = ctx.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(6, _c3$2, ctx_r2.collapsible));
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + groupindex_r12)("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(9, _c3$1, ctx_r2.collapsible));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Group " + groupObj_r7.key);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
@@ -1025,7 +1032,7 @@ function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵproperty("ngForOf", groupObj_r7.data);
 } }
 function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 8, "li", 14);
+    i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 11, "li", 14);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
@@ -1040,12 +1047,6 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
         styler(this.nativeElement, this);
         this.multiple = true;
     }
-    triggerInvokeOnChange(keys, $event) {
-        this.modelByKey = keys;
-        this.invokeOnTouched();
-        // invoke on datavalue change.
-        this.invokeOnChange(this.datavalue, $event || {}, true);
-    }
     onCheckboxLabelClick($event, key) {
         if (!$($event.target).is('input')) {
             return;
@@ -1057,7 +1058,10 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
             // @ts-ignore
             keys.push($el.value);
         });
-        this.triggerInvokeOnChange(keys, $event);
+        this.modelByKey = keys;
+        this.invokeOnTouched();
+        // invoke on datavalue change.
+        this.invokeOnChange(this.datavalue, $event || {}, true);
     }
     // change and blur events are added from the template
     handleEvent(node, eventName, callback, locals) {
@@ -1100,13 +1104,13 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
                 provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(CheckboxsetComponent)
-            ]), i0.ɵɵ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.ɵɵ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.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
             i0.ɵɵelement(1, "input", 2);
             i0.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const groupedListTemplate_r12 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+            const groupedListTemplate_r13 = i0.ɵɵreference(4);
+            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r13);
             i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
             i0.ɵɵadvance();
@@ -1119,7 +1123,7 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
                     provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                     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.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -1225,6 +1229,7 @@ const numberProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['localefilter', PROP_STRING],
     ['minvalue', PROP_NUMBER],
     ['maxvalue', PROP_NUMBER],
@@ -1241,6 +1246,7 @@ const numberProps = new Map([
     ['trailingzero', { value: false, ...PROP_BOOLEAN }],
     ['updateon', PROP_STRING],
     ['inputmode', { value: 'natural', ...PROP_STRING }],
+    ['decimalplaces', PROP_NUMBER],
     ['conditionalclass', PROP_ANY],
     ['conditionalstyle', PROP_ANY]
 ]);
@@ -1259,9 +1265,6 @@ class BaseInput extends BaseFormCustomComponent {
             /* WMS-18269 | Update Angular about the required attr value change */
             this._onChange(this.datavalue);
         }
-        if (key === 'updateon') {
-            this.ngModelOptions.updateOn = nv === 'default' ? 'change' : ov;
-        }
         if (key === 'class') {
             if (this.inputEl.nativeElement) {
                 switchClass(this.inputEl.nativeElement, nv, ov);
@@ -1360,7 +1363,7 @@ let NumberLocale = class NumberLocale extends BaseInput {
             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();
             }
@@ -1370,8 +1373,27 @@ let NumberLocale = class NumberLocale extends BaseInput {
         if (this.isDefaultQuery) {
             const isLocalizedNumber = isString(value) && includes(value, this.DECIMAL);
             const parts = isLocalizedNumber ? value.split(this.DECIMAL) : 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 === 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();
@@ -1420,8 +1442,14 @@ let NumberLocale = class NumberLocale extends BaseInput {
      */
     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 === 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;
         }
@@ -1530,6 +1558,9 @@ let NumberLocale = class NumberLocale extends BaseInput {
     }
     // 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;
@@ -1612,11 +1643,10 @@ let NumberLocale = class NumberLocale extends BaseInput {
      * @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 = 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
@@ -1718,13 +1748,23 @@ let NumberLocale = class NumberLocale extends BaseInput {
         }
         // 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 === INPUTMODE.NATURAL && !isNaN(this.decimalplaces)) {
+            if (this.decimalplaces === 0 && this.DECIMAL === $event.key) {
+                return false;
+            }
+            const parts = 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 (includes(inputValue, ',') && inputValue[inputValue.length - 1] === ',' && $event.key === ',') {
             return false;
@@ -1803,14 +1843,14 @@ class NumberComponent extends NumberLocale {
                 provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(NumberComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(NumberComponent)
-            ]), i0.ɵɵ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.ɵɵ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.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵlistener("ngModelChange", function NumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModelChange($event)); })("blur", function NumberComponent_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleBlur($event); return i0.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("focus", function NumberComponent_Template_input_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForTrailingZeros($event)); })("input", function NumberComponent_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputChange($event.target.value)); })("keypress", function NumberComponent_Template_input_keypress_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.validateInputEntry($event)); })("keydown.backspace", function NumberComponent_Template_input_keydown_backspace_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBackspace($event)); })("keydown.enter", function NumberComponent_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnter($event)); })("keydown.ArrowUp", function NumberComponent_Template_input_keydown_ArrowUp_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event, "UP")); })("keydown.ArrowDown", function NumberComponent_Template_input_keydown_ArrowDown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onArrowPress($event, "DOWN")); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("ngModel", ctx.displayValue)("readonly", ctx.readonly)("disabled", ctx.disabled)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("ngModelOptions", ctx.ngModelOptions)("required", ctx.required);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.PatternValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberComponent, [{
@@ -1819,7 +1859,7 @@ class NumberComponent extends NumberLocale {
                     provideAs(NumberComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(NumberComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(NumberComponent)
-                ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       role=\"textbox\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox app-number-input\"\n       inputmode=\"decimal\"\n       focus-target\n       [attr.name]=\"name\"\n       type=\"text\"\n       [ngModel]=\"displayValue\"\n       [readonly]=\"readonly\"\n       [disabled]=\"disabled\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"onModelChange($event)\"\n       (blur)=\"handleBlur($event); checkForTrailingZeros($event);\"\n       (focus)=\"checkForTrailingZeros($event)\"\n       (input)=\"onInputChange($event.target.value)\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [required]=\"required\"\n       (keypress)=\"validateInputEntry($event)\"\n       (keydown.backspace)=\"onBackspace($event)\"\n       (keydown.enter)=\"onEnter($event)\"\n       (keydown.ArrowUp)=\"onArrowPress($event, 'UP')\"\n       (keydown.ArrowDown)=\"onArrowPress($event, 'DOWN')\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: i1$1.AbstractI18nService }, { type: i2.TrailingZeroDecimalPipe }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -1870,8 +1910,8 @@ const registerProps$8 = () => {
 const _c0$8 = ["wmRadioset", ""];
 const _c1$7 = (a0, a1) => ["radio", "app-radio", a0, a1];
 const _c2$5 = a0 => ({ "disabled": a0 });
-const _c3$1 = a0 => ({ "collapsible-content": a0 });
-const _c4$1 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
+const _c3 = a0 => ({ "collapsible-content": a0 });
+const _c4 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
 function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
     i0.ɵɵelement(1, "input", 8)(2, "span", 9);
@@ -1881,10 +1921,10 @@ function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf
     const item_r2 = ctx_r3.$implicit;
     const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
-    i0.ɵɵ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.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
+    i0.ɵɵ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.ɵɵattribute("data-attr-index", i_r5);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", item_r2.label);
 } }
@@ -1897,16 +1937,16 @@ function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf
     const item_r2 = ctx_r3.$implicit;
     const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
-    i0.ɵɵ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.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
+    i0.ɵɵ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.ɵɵattribute("data-attr-index", i_r5);
 } }
 function RadiosetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 5);
     i0.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
-    i0.ɵɵ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.ɵɵ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.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r2 = ctx.$implicit;
@@ -1941,45 +1981,45 @@ function RadiosetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf
 } }
 function RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
-    i0.ɵɵelement(1, "input", 8)(2, "span", 9);
+    i0.ɵɵelement(1, "input", 24)(2, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
     const item_r9 = ctx_r9.$implicit;
     const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵ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.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
+    i0.ɵɵattribute("data-attr-index", i_r11);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", item_r9.label);
 } }
 function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 7);
-    i0.ɵɵelement(1, "input", 8)(2, "span", 10);
+    i0.ɵɵelement(1, "input", 24)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
     const item_r9 = ctx_r9.$implicit;
     const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵ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.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
+    i0.ɵɵattribute("data-attr-index", i_r11);
 } }
 function RadiosetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 23);
     i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
-    i0.ɵɵ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.ɵɵ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.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r9 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵclassProp("active", item_r9.selected);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4$1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c4, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.content);
     i0.ɵɵadvance();
@@ -1998,10 +2038,15 @@ function RadiosetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const groupObj_r7 = ctx.$implicit;
+    const groupindex_r12 = ctx.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(6, _c3$1, ctx_r2.collapsible));
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + groupindex_r12)("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(9, _c3, ctx_r2.collapsible));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", "Group " + groupObj_r7.key);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
@@ -2011,7 +2056,7 @@ function RadiosetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", groupObj_r7.data);
 } }
 function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 8, "li", 12);
+    i0.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 11, "li", 12);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
@@ -2026,12 +2071,6 @@ class RadiosetComponent extends DatasetAwareFormComponent {
         styler(this.nativeElement, this);
         this.multiple = false;
     }
-    triggerInvokeOnChange(key, $event) {
-        this.modelByKey = key;
-        this.invokeOnTouched();
-        // invoke on datavalue change.
-        this.invokeOnChange(this.datavalue, $event || {}, true);
-    }
     /**
      * On click of the option, update the datavalue
      */
@@ -2039,7 +2078,10 @@ class RadiosetComponent extends DatasetAwareFormComponent {
         if (!$($event.target).is('input')) {
             return;
         }
-        this.triggerInvokeOnChange(key, $event);
+        this.modelByKey = key;
+        this.invokeOnTouched();
+        // invoke on datavalue change.
+        this.invokeOnChange(this.datavalue, $event || {}, true);
     }
     // change and blur events are added from the template
     handleEvent(node, eventName, callback, locals) {
@@ -2072,13 +2114,13 @@ class RadiosetComponent extends DatasetAwareFormComponent {
                 provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(RadiosetComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(RadiosetComponent)
-            ]), i0.ɵɵ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.ɵɵ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.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
             i0.ɵɵelement(1, "input", 2);
             i0.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 3)(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            const groupedListTemplate_r12 = i0.ɵɵreference(4);
-            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r12);
+            const groupedListTemplate_r13 = i0.ɵɵreference(4);
+            i0.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r13);
             i0.ɵɵadvance();
             i0.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
             i0.ɵɵadvance();
@@ -2091,7 +2133,7 @@ class RadiosetComponent extends DatasetAwareFormComponent {
                     provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(RadiosetComponent, NG_VALIDATORS, true),
                     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.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2115,6 +2157,7 @@ const selectProps = new Map([
     ['displayValue', PROP_STRING],
     ['groupby', PROP_STRING],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['match', PROP_STRING],
     ['multiple', { value: false, ...PROP_BOOLEAN }],
     ['name', PROP_STRING],
@@ -2184,10 +2227,38 @@ class SelectComponent extends DatasetAwareFormComponent {
             this.datavalue = ds.execute(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 (isIos() || 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();
@@ -2195,7 +2266,7 @@ class SelectComponent extends DatasetAwareFormComponent {
     }
     // Change event is registered from the template, Prevent the framework from registering one more event
     handleEvent(node, eventName, eventCallback, locals) {
-        if (!includes(['blur', 'change'], eventName)) {
+        if (!['blur', 'change'].includes(eventName)) {
             super.handleEvent(this.selectEl.nativeElement, eventName, eventCallback, locals);
         }
     }
@@ -2246,36 +2317,40 @@ class SelectComponent extends DatasetAwareFormComponent {
      */
     checkForFloatingLabel($event) {
         const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');
+        if (!this.placeholder && (isIos() || 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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
+    static { this.ɵfac = function SelectComponent_Factory(t) { return new (t || SelectComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectComponent, selectors: [["wm-select"]], viewQuery: function SelectComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$7, 7, ElementRef);
         } if (rf & 2) {
@@ -2285,11 +2360,11 @@ class SelectComponent extends DatasetAwareFormComponent {
                 provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(SelectComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(SelectComponent)
-            ]), i0.ɵɵ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.ɵɵ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.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "select", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectValueChange($event)); })("focus", function SelectComponent_Template_select_focus_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
+            i0.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSelectValueChange($event)); })("mousedown", function SelectComponent_Template_select_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
             i0.ɵɵelement(2, "option", 2);
             i0.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
             i0.ɵɵelementEnd();
@@ -2297,7 +2372,7 @@ class SelectComponent extends DatasetAwareFormComponent {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
             i0.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
             i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(17, _c2$4))("multiple", ctx.multiple)("autofocus", ctx.autofocus);
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
+            i0.ɵɵattribute("accesskey", ctx.shortcutkey)("name", ctx.name)("aria-label", ctx.arialabel);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
             i0.ɵɵadvance();
@@ -2312,8 +2387,8 @@ class SelectComponent extends DatasetAwareFormComponent {
                     provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SelectComponent, NG_VALIDATORS, true),
                     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.Injector }, { type: i1$1.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.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
             }, {
@@ -2322,7 +2397,7 @@ class SelectComponent extends DatasetAwareFormComponent {
             type: ViewChild,
             args: ['select', { static: true, read: ElementRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "select/select.component.ts", lineNumber: 20 }); })();
 
 const switchProps = new Map([
     ['class', PROP_STRING],
@@ -2335,8 +2410,8 @@ const switchProps = new Map([
     ['displayexpression', PROP_STRING],
     ['displayfield', PROP_STRING],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['iconclass', PROP_STRING],
-    ['checkediconclass', { value: 'wm-sl-l sl-check', ...PROP_STRING }],
     ['name', PROP_STRING],
     ['orderby', PROP_STRING],
     ['required', PROP_BOOLEAN],
@@ -2350,54 +2425,37 @@ const registerProps$6 = () => {
 };
 
 const _c0$6 = ["wmSwitch", ""];
-const _c1$5 = a0 => ({ "multi-select": a0 });
-const _c2$3 = (a0, a1) => ({ "selected": a0, "disabled": a1 });
-const _c3 = a0 => ["app-icon", a0];
-const _c4 = a0 => [a0];
+const _c1$5 = (a0, a1) => ({ "selected": a0, "disabled": a1 });
+const _c2$3 = a0 => ["app-icon", a0];
 function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 7);
+    i0.ɵɵelement(0, "i", 8);
 } if (rf & 2) {
     const opt_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c3, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
-} }
-function SwitchComponent_a_1_i_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 7);
-} if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c4, ctx_r4.checkediconclass));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c2$3, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
 } }
 function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 4);
+    i0.ɵɵelementStart(0, "a", 5);
     i0.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const ctx_r1 = i0.ɵɵrestoreView(_r1); const opt_r3 = ctx_r1.$implicit; const $index_r4 = ctx_r1.index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.selectOpt($event, $index_r4, opt_r3)); });
-    i0.ɵɵtemplate(1, SwitchComponent_a_1_i_1_Template, 1, 3, "i", 5)(2, SwitchComponent_a_1_i_2_Template, 1, 3, "i", 5);
-    i0.ɵɵelement(3, "span", 6);
+    i0.ɵɵtemplate(1, SwitchComponent_a_1_i_1_Template, 1, 3, "i", 6);
+    i0.ɵɵelement(2, "span", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const opt_r3 = ctx.$implicit;
     const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0.ɵɵpureFunction2(5, _c2$3, opt_r3.selected, ctx_r4.disabled));
+    i0.ɵɵproperty("name", "wm-switch-" + opt_r3.key)("ngClass", i0.ɵɵpureFunction2(5, _c1$5, opt_r3.selected, ctx_r4.disabled));
+    i0.ɵɵattribute("aria-pressed", opt_r3.selected ? true : false);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass] && !opt_r3.selected);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", opt_r3.selected);
+    i0.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass]);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", opt_r3[ctx_r4.displayfield] || opt_r3.label);
 } }
-function SwitchComponent_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 8);
-    i0.ɵɵelement(1, "i", 9);
-    i0.ɵɵelementStart(2, "span", 10);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+function SwitchComponent_i_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("title", ctx_r4.selectedItem ? ctx_r4.selectedItem.label : ctx_r4.modelByKey);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c4, ctx_r4.checkediconclass));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r4.selectedItem ? ctx_r4.selectedItem.label : ctx_r4.modelByKey);
+    i0.ɵɵclassMapInterpolate1("app-icon ", ctx_r4.selectedItem && ctx_r4.selectedItem.dataObject && ctx_r4.selectedItem.dataObject[ctx_r4.iconclass], "");
 } }
 const DEFAULT_CLS = 'app-switch';
 const WIDGET_CONFIG$6 = { widgetType: 'wm-switch', hostClass: DEFAULT_CLS };
@@ -2406,8 +2464,6 @@ class SwitchComponent extends DatasetAwareFormComponent {
     constructor(inj, explicitContext) {
         super(inj, WIDGET_CONFIG$6, explicitContext);
         this.options = [];
-        this.multiple = this.getAttr("multiple") === "true";
-        this.checkediconclass = this.getAttr("checkediconclass") || 'wm-sl-l sl-check';
         this._debounceSetSelectedValue = debounce$1((val) => {
             this.setSelectedValue();
             this.updateHighlighter(val);
@@ -2447,7 +2503,7 @@ class SwitchComponent extends DatasetAwareFormComponent {
     // set the css for switch overlay element.
     // set the selected index from the datasetItems and highlight the datavalue on switch.
     updateSwitchOptions() {
-        if (this.datasetItems.length && !this.multiple) {
+        if (this.datasetItems.length) {
             this.btnwidth = (100 / this.datasetItems.length);
             setCSS(this.nativeElement.querySelector('.app-switch-overlay'), 'width', this.btnwidth + '%');
         }
@@ -2485,30 +2541,18 @@ class SwitchComponent extends DatasetAwareFormComponent {
         if (this.disabled) {
             return;
         }
-        if (this.multiple) {
-            const keys = [];
-            this.datasetItems[$index].selected = !this.datasetItems[$index].selected;
-            forEach(this.datasetItems, (item) => {
-                if (item.selected)
-                    keys.push(item.key);
-            });
-            this.modelByKey = keys;
-            this.selectedItem = find(this.datasetItems, { selected: true });
-        }
-        else {
-            this.modelByKey = option.key;
-            if (!this.multiple && this.selectedItem && $index === findIndex(this.datasetItems, { key: this.selectedItem.key })) {
-                if (this.datasetItems.length === 2) {
-                    $index = $index === 1 ? 0 : 1;
-                }
-                else {
-                    return;
-                }
+        this.modelByKey = option.key;
+        this.invokeOnTouched();
+        if (this.selectedItem && $index === findIndex(this.datasetItems, { key: this.selectedItem.key })) {
+            if (this.datasetItems.length === 2) {
+                $index = $index === 1 ? 0 : 1;
+            }
+            else {
+                return;
             }
-            this.selectedItem = this.datasetItems[$index];
-            this.updateHighlighter();
         }
-        this.invokeOnTouched();
+        this.selectedItem = this.datasetItems[$index];
+        this.updateHighlighter();
         // invoke on datavalue change.
         this.invokeOnChange(this.datavalue, $event || {}, true);
         $appDigest();
@@ -2525,18 +2569,24 @@ class SwitchComponent extends DatasetAwareFormComponent {
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0.ɵɵProvidersFeature([
                 provideAs(SwitchComponent, NG_VALUE_ACCESSOR, true),
                 provideAsWidgetRef(SwitchComponent)
-            ]), i0.ɵɵ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.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 6, vars: 8, consts: [[1, "btn-group", "btn-group-justified"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", "role", "button", 3, "name", "ngClass", "click", 4, "ngFor", "ngForOf"], ["aria-hidden", "true", 1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "class", 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"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, SwitchComponent_a_1_Template, 4, 8, "a", 1);
+            i0.ɵɵtemplate(1, SwitchComponent_a_1_Template, 3, 8, "a", 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "span", 2);
+            i0.ɵɵtemplate(3, SwitchComponent_i_3_Template, 1, 3, "i", 3);
+            i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(2, SwitchComponent_span_2_Template, 4, 5, "span", 2);
-            i0.ɵɵelement(3, "input", 3);
+            i0.ɵɵelement(5, "input", 4);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$5, ctx.multiple));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.datasetItems);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.multiple);
+            i0.ɵɵproperty("title", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.iconclass);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.selectedItem ? ctx.selectedItem.label : ctx.modelByKey, "\n");
             i0.ɵɵadvance();
             i0.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.modelByKey)("required", ctx.required);
         } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.TextContentDirective], encapsulation: 2 }); }
@@ -2546,7 +2596,7 @@ class SwitchComponent extends DatasetAwareFormComponent {
         args: [{ selector: '[wmSwitch]', providers: [
                     provideAs(SwitchComponent, NG_VALUE_ACCESSOR, true),
                     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 class=\"btn-group btn-group-justified\">\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]\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span aria-hidden=\"true\" [title]=\"selectedItem ? selectedItem.label : modelByKey\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i *ngIf=\"iconclass\"\n       class=\"app-icon {{(selectedItem && selectedItem.dataObject) && selectedItem.dataObject[iconclass]}}\"></i>\n    {{selectedItem ? selectedItem.label : modelByKey}}\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2564,6 +2614,7 @@ const inputCalendarTypeProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxvalue', PROP_NUMBER],
     ['minvalue', PROP_NUMBER],
     ['name', PROP_STRING],
@@ -2607,7 +2658,7 @@ class InputCalendarComponent extends BaseInput {
                 provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputCalendarComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2617,7 +2668,7 @@ class InputCalendarComponent extends BaseInput {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c2$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel || ctx.type + " field");
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputCalendarComponent, [{
@@ -2626,7 +2677,7 @@ class InputCalendarComponent extends BaseInput {
                     provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputCalendarComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2650,6 +2701,7 @@ const inputColorTypeProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['name', PROP_STRING],
     ['placeholder', { value: 'Enter text', ...PROP_STRING }],
     ['readonly', PROP_BOOLEAN],
@@ -2690,7 +2742,7 @@ class InputColorComponent extends BaseInput {
                 provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputColorComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputColorComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 16, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 16, consts: [["input", ""], ["focus-target", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2700,7 +2752,7 @@ class InputColorComponent extends BaseInput {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(15, _c2$1))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputColorComponent, [{
@@ -2709,7 +2761,7 @@ class InputColorComponent extends BaseInput {
                     provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputColorComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputColorComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2733,6 +2785,7 @@ const inputEmailTypeProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxchars', PROP_NUMBER],
     ['name', PROP_STRING],
     ['placeholder', { value: 'Enter text', ...PROP_STRING }],
@@ -2774,7 +2827,7 @@ class InputEmailComponent extends BaseInput {
                 provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputEmailComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputEmailComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", "email", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$2, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "email", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputEmailComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputEmailComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2784,7 +2837,7 @@ class InputEmailComponent extends BaseInput {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.EmailValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputEmailComponent, [{
@@ -2793,7 +2846,7 @@ class InputEmailComponent extends BaseInput {
                     provideAs(InputEmailComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputEmailComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputEmailComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       email\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2817,6 +2870,7 @@ const inputNumberTypeProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxchars', PROP_NUMBER],
     ['maxvalue', PROP_NUMBER],
     ['minvalue', PROP_NUMBER],
@@ -2872,7 +2926,7 @@ class InputNumberComponent extends BaseInput {
                 provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputNumberComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputNumberComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress", "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete"]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, decls: 2, vars: 22, consts: [["input", ""], ["focus-target", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "keyup.enter", "keydown.ArrowUp", "keydown.ArrowDown", "keypress", "ngClass", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "min", "max", "step", "autofocus", "ngStyle", "autocomplete"]], template: function InputNumberComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputNumberComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2882,7 +2936,7 @@ class InputNumberComponent extends BaseInput {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c2, ctx.step === 0))("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNumberComponent, [{
@@ -2891,7 +2945,7 @@ class InputNumberComponent extends BaseInput {
                     provideAs(InputNumberComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputNumberComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputNumberComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       [ngClass]=\"{'step-hidden': step === 0}\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"arialabel\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       (keydown.ArrowUp)=\"onArrowPress($event)\"\n       (keydown.ArrowDown)=\"onArrowPress($event)\"\n       (keypress)=\"validateInputEntry($event)\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2916,6 +2970,7 @@ const inputTextTypeProps = new Map([
     ['disabled', PROP_BOOLEAN],
     ['displayformat', PROP_STRING],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxchars', PROP_NUMBER],
     ['name', PROP_STRING],
     ['placeholder', { value: 'Enter text', ...PROP_STRING }],
@@ -3039,7 +3094,7 @@ class InputTextComponent extends BaseInput {
                 provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputTextComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputTextComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "focus", "keyup.enter", "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "focus", "keyup.enter", "type", "ngModel", "imask", "unmask", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "pattern", "autofocus", "ngClass", "ngStyle", "autocomplete"]], template: function InputTextComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputTextComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -3049,7 +3104,7 @@ class InputTextComponent extends BaseInput {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("imask", ctx.mask)("unmask", true)("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("pattern", ctx.regexp)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle)("autocomplete", ctx.autocomplete ? "on" : "off");
-            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
+            i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.arialabel)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.NgModel, i3.IMaskDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputTextComponent, [{
@@ -3058,7 +3113,7 @@ class InputTextComponent extends BaseInput {
                     provideAs(InputTextComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputTextComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputTextComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"hint\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [attr.aria-label]=\"arialabel\"\n       [(ngModel)]=\"datavalue\"\n       [imask]=\"mask\"\n       [unmask]=\"true\"\n       [ngModelOptions]=\"ngModelOptions\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [pattern]=\"regexp\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (ngModelChange)=\"handleChange($event)\"\n       (blur)=\"handleBlur($event); checkForDisplayFormat($event)\"\n       (focus)=\"checkForDisplayFormat($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       (keyup.enter)=\"flushViewChanges(input.value)\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -3084,6 +3139,7 @@ const textareaProps = new Map([
     ['datavalue', PROP_STRING],
     ['disabled', PROP_BOOLEAN],
     ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
     ['maxchars', PROP_NUMBER],
     ['name', PROP_STRING],
     ['placeholder', { value: 'Place your text', ...PROP_STRING }],
@@ -3126,6 +3182,9 @@ class TextareaComponent extends BaseInput {
     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.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextareaComponent, selectors: [["wm-textarea"]], viewQuery: function TextareaComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 7);
@@ -3138,7 +3197,7 @@ class TextareaComponent extends BaseInput {
                 provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(TextareaComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(TextareaComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "role", "textbox", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "textarea", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -3148,7 +3207,7 @@ class TextareaComponent extends BaseInput {
         } if (rf & 2) {
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
             i0.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
-            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
+            i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.maxchars);
         } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
@@ -3159,7 +3218,7 @@ class TextareaComponent extends BaseInput {
                     provideAs(TextareaComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(TextareaComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(TextareaComponent)
-                ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          role=\"textbox\"\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"hint\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
+                ], template: "<textarea class=\"form-control app-textarea\"\n          focus-target\n          [attr.name]=\"name\"\n          [(ngModel)]=\"datavalue\"\n          [ngModelOptions]=\"ngModelOptions\"\n          [readonly]=\"readonly\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [maxlength]=\"maxchars\"\n          [attr.tabindex]=\"tabindex\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.accesskey]=\"shortcutkey\"\n          [attr.aria-label]=\"arialabel\"\n          aria-multiline=\"true\"\n          [autofocus]=\"autofocus\"\n          [ngClass]=\"conditionalclass\"\n          [ngStyle]=\"conditionalstyle\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"onInputChange()\"\n          (ngModelChange)=\"handleChange($event); onInputChange();\"\n          #textarea\n></textarea>\n\n<div *ngIf=\"maxchars\" class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -3172,7 +3231,7 @@ class TextareaComponent extends BaseInput {
             type: ViewChild,
             args: [NgModel]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextareaComponent, { className: "TextareaComponent", filePath: "textarea/textarea.component.ts", lineNumber: 23 }); })();
 
 class CaptionPositionDirective {
     constructor(inj, app) {
@@ -3203,9 +3262,10 @@ class CaptionPositionDirective {
     }
     // 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() {
@@ -3307,10 +3367,10 @@ class CaptionPositionDirective {
                 // 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');