@wavemaker/app-ng-runtime 11.10.3-next.25128 → 11.10.3-rc.6079

package/components/input/default/fesm2022/index.mjs

@@ -44,22 +44,22 @@ 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 });
-function ButtonComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 0);
+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));
 } }
-function ButtonComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 5);
+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));
 } }
-function ButtonComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 2);
+function ButtonComponent_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -67,8 +67,8 @@ function ButtonComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
 } }
-function ButtonComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 4);
+function ButtonComponent_span_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("textContent", ctx_r0.badgevalue);
@@ -91,29 +91,29 @@ class ButtonComponent extends StylableComponent {
             i0.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
         } }, exportAs: ["wmButton"], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(ButtonComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c2$8, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "class", "ngStyle"], [1, "sr-only"], [1, "btn-caption", 3, "innerHTML"], [1, "badge", "pull-right", 3, "textContent"], ["aria-hidden", "true", 3, "ngStyle"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c2$8, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c1$b);
-            i0.ɵɵtemplate(0, ButtonComponent_Conditional_0_Template, 2, 8, "img", 0)(1, ButtonComponent_Conditional_1_Template, 1, 9, "i", 1)(2, ButtonComponent_Conditional_2_Template, 2, 2, "span", 2);
+            i0.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0)(1, ButtonComponent_i_1_Template, 1, 9, "i", 1)(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
             i0.ɵɵelement(3, "span", 3);
             i0.ɵɵprojection(4);
-            i0.ɵɵtemplate(5, ButtonComponent_Conditional_5_Template, 1, 1, "span", 4);
+            i0.ɵɵtemplate(5, ButtonComponent_span_5_Template, 1, 1, "span", 4);
         } if (rf & 2) {
-            i0.ɵɵconditional(ctx.iconurl ? 0 : -1);
+            i0.ɵɵproperty("ngIf", ctx.iconurl);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.iconclass ? 1 : -1);
+            i0.ɵɵproperty("ngIf", ctx.iconclass);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.iconclass ? 2 : -1);
+            i0.ɵɵproperty("ngIf", ctx.iconclass);
             i0.ɵɵadvance();
             i0.ɵɵproperty("innerHTML", ctx.caption, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.badgevalue ? 5 : -1);
-        } }, dependencies: [i1.NgStyle, i2.TextContentDirective, i2.ImagePipe], encapsulation: 2 }); }
+            i0.ɵɵproperty("ngIf", ctx.badgevalue);
+        } }, dependencies: [i1.NgIf, i1.NgStyle, i2.TextContentDirective, i2.ImagePipe], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ButtonComponent, [{
         type: Component,
         args: [{ selector: 'button[wmButton]', providers: [
                     provideAsWidgetRef(ButtonComponent)
-                ], exportAs: 'wmButton', template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"button image\" class=\"button-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin, fontSize:iconwidth}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"btn-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n" }]
+                ], exportAs: 'wmButton', template: "<img data-identifier=\"img\" alt=\"button image\" class=\"button-image-icon\" [src]=\"iconurl | image\" *ngIf=\"iconurl\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n<i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin, fontSize:iconwidth}\" *ngIf=\"iconclass\"></i>\n<span class=\"sr-only\" *ngIf=\"iconclass\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n<span class=\"btn-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n<span *ngIf=\"badgevalue\" class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -901,41 +901,41 @@ 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];
-function CheckboxsetComponent_Conditional_0_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 4);
-    i0.ɵɵelement(1, "input", 6)(2, "span", 7);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     const item_r2 = ctx_r3.$implicit;
-    const ɵ$index_2_r5 = ctx_r3.$index;
+    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))("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("data-attr-index", ɵ$index_2_r5);
+    i0.ɵɵattribute("data-attr-index", i_r5);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", item_r2.label);
 } }
-function CheckboxsetComponent_Conditional_0_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 5);
-    i0.ɵɵelement(1, "input", 6)(2, "span", 8);
+function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 11);
+    i0.ɵɵelement(1, "input", 9)(2, "span", 12);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     const item_r2 = ctx_r3.$implicit;
-    const ɵ$index_2_r5 = ctx_r3.$index;
+    const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     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("data-attr-index", ɵ$index_2_r5);
+    i0.ɵɵattribute("data-attr-index", i_r5);
 } }
-function CheckboxsetComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
+function CheckboxsetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 3);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_Conditional_0_For_1_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_Conditional_0_For_1_Conditional_1_Template, 3, 12, "label", 4)(2, CheckboxsetComponent_Conditional_0_For_1_Conditional_2_Template, 3, 10, "label", 5);
+    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, 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;
@@ -943,63 +943,66 @@ function CheckboxsetComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1
     i0.ɵɵclassProp("active", item_r2.selected);
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1$9, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.content ? 1 : -1);
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.content ? 2 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
-function CheckboxsetComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, CheckboxsetComponent_Conditional_0_For_1_Template, 3, 10, "li", 2, i0.ɵɵrepeaterTrackByIdentity);
+function CheckboxsetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r2.datasetItems);
+    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
 } }
-function CheckboxsetComponent_Conditional_1_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 14);
+function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 13);
+} }
+function CheckboxsetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 23);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
 } }
-function CheckboxsetComponent_Conditional_1_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 15);
+function CheckboxsetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 24);
 } if (rf & 2) {
     const groupObj_r7 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("textContent", groupObj_r7.data.length);
 } }
-function CheckboxsetComponent_Conditional_1_For_1_For_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 4);
-    i0.ɵɵelement(1, "input", 6)(2, "span", 7);
+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", 9)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
     const item_r9 = ctx_r9.$implicit;
-    const ɵ$index_38_r11 = ctx_r9.$index;
+    const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-    i0.ɵɵattribute("data-attr-index", ɵ$index_38_r11);
+    i0.ɵɵattribute("data-attr-index", i_r11);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", item_r9.label);
 } }
-function CheckboxsetComponent_Conditional_1_For_1_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 5);
-    i0.ɵɵelement(1, "input", 6)(2, "span", 18);
+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", 9)(2, "span", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
     const item_r9 = ctx_r9.$implicit;
-    const ɵ$index_38_r11 = ctx_r9.$index;
+    const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
     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_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-    i0.ɵɵattribute("data-attr-index", ɵ$index_38_r11);
+    i0.ɵɵattribute("data-attr-index", i_r11);
 } }
-function CheckboxsetComponent_Conditional_1_For_1_For_9_Template(rf, ctx) { if (rf & 1) {
+function CheckboxsetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 17);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_Conditional_1_For_1_For_9_Template_li_click_0_listener($event) { const item_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
-    i0.ɵɵtemplate(1, CheckboxsetComponent_Conditional_1_For_1_For_9_Conditional_1_Template, 3, 12, "label", 4)(2, CheckboxsetComponent_Conditional_1_For_1_For_9_Conditional_2_Template, 3, 10, "label", 5);
+    i0.ɵɵelementStart(0, "li", 25);
+    i0.ɵɵlistener("click", function CheckboxsetComponent_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.onCheckboxLabelClick($event, item_r9)); });
+    i0.ɵɵtemplate(1, CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 10, "label", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r9 = ctx.$implicit;
@@ -1007,48 +1010,45 @@ function CheckboxsetComponent_Conditional_1_For_1_For_9_Template(rf, ctx) { if (
     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.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.content ? 1 : -1);
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.content ? 2 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
-function CheckboxsetComponent_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
+function CheckboxsetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 9)(1, "ul", 10)(2, "li", 11);
-    i0.ɵɵlistener("click", function CheckboxsetComponent_Conditional_1_For_1_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
-    i0.ɵɵelementStart(3, "h4", 12);
+    i0.ɵɵelementStart(0, "li", 15)(1, "ul", 16)(2, "li", 17);
+    i0.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
+    i0.ɵɵelementStart(3, "h4", 18);
     i0.ɵɵtext(4);
-    i0.ɵɵelementStart(5, "div", 13);
-    i0.ɵɵtemplate(6, CheckboxsetComponent_Conditional_1_For_1_Conditional_6_Template, 1, 3, "i", 14)(7, CheckboxsetComponent_Conditional_1_For_1_Conditional_7_Template, 1, 1, "span", 15);
+    i0.ɵɵelementStart(5, "div", 19);
+    i0.ɵɵtemplate(6, CheckboxsetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 20)(7, CheckboxsetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 21);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵrepeaterCreate(8, CheckboxsetComponent_Conditional_1_For_1_For_9_Template, 3, 10, "li", 16, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵtemplate(8, CheckboxsetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 22);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const groupObj_r7 = ctx.$implicit;
-    const ɵ$index_20_r12 = ctx.$index;
+    const groupindex_r12 = ctx.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + ɵ$index_20_r12);
+    i0.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + ɵ$index_20_r12)("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(8, _c3$2, ctx_r2.collapsible));
+    i0.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + groupindex_r12)("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(9, _c3$2, ctx_r2.collapsible));
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", "Group " + groupObj_r7.key);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.collapsible ? 6 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.showcount ? 7 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(groupObj_r7.data);
+    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
 } }
-function CheckboxsetComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, CheckboxsetComponent_Conditional_1_For_1_Template, 10, 10, "li", 9, i0.ɵɵrepeaterTrackByIdentity);
+function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 11, "li", 14);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r2.groupedData);
-} }
-function CheckboxsetComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 1);
+    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
 } }
 const DEFAULT_CLS$3 = 'app-checkboxset list-group inline';
 const WIDGET_CONFIG$b = { widgetType: 'wm-checkboxset', hostClass: DEFAULT_CLS$3 };
@@ -1122,17 +1122,18 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
                 provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(CheckboxsetComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 4, vars: 3, consts: [["hidden", "", 1, "model-holder", 3, "disabled"], [1, "readonly-wrapper"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], [1, "app-checkboxset-label", 3, "ngClass", "title"], [1, "app-checkboxset-label", 3, "ngClass"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["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"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CheckboxsetComponent_Conditional_0_Template, 2, 0)(1, CheckboxsetComponent_Conditional_1_Template, 2, 0);
-            i0.ɵɵelement(2, "input", 0);
-            i0.ɵɵtemplate(3, CheckboxsetComponent_Conditional_3_Template, 1, 0, "div", 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) {
-            i0.ɵɵconditional(!ctx.groupby ? 0 : 1);
-            i0.ɵɵadvance(2);
+            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();
-            i0.ɵɵconditional(ctx.readonly || ctx.disabled ? 3 : -1);
-        } }, dependencies: [i1.NgClass, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
+            i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckboxsetComponent, [{
         type: Component,
@@ -1140,7 +1141,7 @@ class CheckboxsetComponent extends DatasetAwareFormComponent {
                     provideAs(CheckboxsetComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxsetComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(CheckboxsetComponent)
-                ], template: "@if (!groupby) {\n  @for (item of datasetItems; track item; let i = $index) {\n    <li [ngClass]=\"['checkbox', 'app-checkbox', itemclass, itemsPerRowClass]\"\n      [class.active]=\"item.selected\"\n      [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n      (click)=\"onCheckboxLabelClick($event, item.key)\" role=\"presentation\">\n      <!-- Default item template -->\n      @if (!content) {\n        <label 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      }\n      <!-- Custom partial template -->\n      @if (content) {\n        <label 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      }\n    </li>\n  }\n} @else {\n  @for (groupObj of groupedData; track groupObj; let groupindex = $index) {\n    <li 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              @if (collapsible) {\n                <i class=\"app-icon wi action wi-chevron-up\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n              }\n              @if (showcount) {\n                <span class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n              }\n            </div>\n          </h4>\n        </li>\n        @for (item of groupObj.data; track item; let i = $index) {\n          <li\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            @if (!content) {\n              <label 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            }\n            <!-- Custom partial template -->\n            @if (content) {\n              <label 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            }\n          </li>\n        }\n      </ul>\n    </li>\n  }\n}\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n@if (readonly || disabled) {\n  <div class=\"readonly-wrapper\"></div>\n}\n\n<!-- This template will be displayed when groupby is specified. -->\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']
@@ -1970,41 +1971,41 @@ 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];
-function RadiosetComponent_Conditional_0_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 4);
-    i0.ɵɵelement(1, "input", 5)(2, "span", 6);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     const item_r2 = ctx_r3.$implicit;
-    const ɵ$index_2_r5 = ctx_r3.$index;
+    const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     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", ɵ$index_2_r5);
+    i0.ɵɵattribute("data-attr-index", i_r5);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", item_r2.label);
 } }
-function RadiosetComponent_Conditional_0_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 4);
-    i0.ɵɵelement(1, "input", 5)(2, "span", 7);
+function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "label", 7);
+    i0.ɵɵelement(1, "input", 8)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     const item_r2 = ctx_r3.$implicit;
-    const ɵ$index_2_r5 = ctx_r3.$index;
+    const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     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", ɵ$index_2_r5);
+    i0.ɵɵattribute("data-attr-index", i_r5);
 } }
-function RadiosetComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
+function RadiosetComponent_ng_template_0_li_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 3);
-    i0.ɵɵlistener("click", function RadiosetComponent_Conditional_0_For_1_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_Conditional_0_For_1_Conditional_1_Template, 3, 10, "label", 4)(2, RadiosetComponent_Conditional_0_For_1_Conditional_2_Template, 3, 9, "label", 4);
+    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, 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;
@@ -2012,63 +2013,66 @@ function RadiosetComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("active", item_r2.selected);
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(7, _c1$7, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.content ? 1 : -1);
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.content ? 2 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
-function RadiosetComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, RadiosetComponent_Conditional_0_For_1_Template, 3, 10, "li", 2, i0.ɵɵrepeaterTrackByIdentity);
+function RadiosetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, RadiosetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r2.datasetItems);
+    i0.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
 } }
-function RadiosetComponent_Conditional_1_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 13);
+function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 11);
+} }
+function RadiosetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 21);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵpropertyInterpolate2("title", "", ctx_r2.appLocale.LABEL_COLLAPSE, "/", ctx_r2.appLocale.LABEL_EXPAND, "");
 } }
-function RadiosetComponent_Conditional_1_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 14);
+function RadiosetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 22);
 } if (rf & 2) {
     const groupObj_r7 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("textContent", groupObj_r7.data.length);
 } }
-function RadiosetComponent_Conditional_1_For_1_For_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 4);
-    i0.ɵɵelement(1, "input", 17)(2, "span", 6);
+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", 24)(2, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
     const item_r9 = ctx_r9.$implicit;
-    const ɵ$index_38_r11 = ctx_r9.$index;
+    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.ɵɵ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("data-attr-index", ɵ$index_38_r11);
+    i0.ɵɵattribute("data-attr-index", i_r11);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", item_r9.label);
 } }
-function RadiosetComponent_Conditional_1_For_1_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "label", 4);
-    i0.ɵɵelement(1, "input", 17)(2, "span", 7);
+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", 24)(2, "span", 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext();
     const item_r9 = ctx_r9.$implicit;
-    const ɵ$index_38_r11 = ctx_r9.$index;
+    const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
     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("data-attr-index", ɵ$index_38_r11);
+    i0.ɵɵattribute("data-attr-index", i_r11);
 } }
-function RadiosetComponent_Conditional_1_For_1_For_9_Template(rf, ctx) { if (rf & 1) {
+function RadiosetComponent_ng_template_3_li_0_li_8_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 16);
-    i0.ɵɵlistener("click", function RadiosetComponent_Conditional_1_For_1_For_9_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_Conditional_1_For_1_For_9_Conditional_1_Template, 3, 10, "label", 4)(2, RadiosetComponent_Conditional_1_For_1_For_9_Conditional_2_Template, 3, 9, "label", 4);
+    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, 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;
@@ -2076,48 +2080,45 @@ function RadiosetComponent_Conditional_1_For_1_For_9_Template(rf, ctx) { if (rf
     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.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.content ? 1 : -1);
+    i0.ɵɵproperty("ngIf", !ctx_r2.content);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.content ? 2 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.content);
 } }
-function RadiosetComponent_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
+function RadiosetComponent_ng_template_3_li_0_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 8)(1, "ul", 9)(2, "li", 10);
-    i0.ɵɵlistener("click", function RadiosetComponent_Conditional_1_For_1_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
-    i0.ɵɵelementStart(3, "h4", 11);
+    i0.ɵɵelementStart(0, "li", 13)(1, "ul", 14)(2, "li", 15);
+    i0.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
+    i0.ɵɵelementStart(3, "h4", 16);
     i0.ɵɵtext(4);
-    i0.ɵɵelementStart(5, "div", 12);
-    i0.ɵɵtemplate(6, RadiosetComponent_Conditional_1_For_1_Conditional_6_Template, 1, 3, "i", 13)(7, RadiosetComponent_Conditional_1_For_1_Conditional_7_Template, 1, 1, "span", 14);
+    i0.ɵɵelementStart(5, "div", 17);
+    i0.ɵɵtemplate(6, RadiosetComponent_ng_template_3_li_0_i_6_Template, 1, 3, "i", 18)(7, RadiosetComponent_ng_template_3_li_0_span_7_Template, 1, 1, "span", 19);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵrepeaterCreate(8, RadiosetComponent_Conditional_1_For_1_For_9_Template, 3, 10, "li", 15, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵtemplate(8, RadiosetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 20);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const groupObj_r7 = ctx.$implicit;
-    const ɵ$index_20_r12 = ctx.$index;
+    const groupindex_r12 = ctx.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + ɵ$index_20_r12);
+    i0.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + ɵ$index_20_r12)("title", groupObj_r7.key)("ngClass", i0.ɵɵpureFunction1(8, _c3$1, ctx_r2.collapsible));
+    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.ɵɵconditional(ctx_r2.collapsible ? 6 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.collapsible);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.showcount ? 7 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r2.showcount);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(groupObj_r7.data);
+    i0.ɵɵproperty("ngForOf", groupObj_r7.data);
 } }
-function RadiosetComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, RadiosetComponent_Conditional_1_For_1_Template, 10, 10, "li", 8, i0.ɵɵrepeaterTrackByIdentity);
+function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 11, "li", 12);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r2.groupedData);
-} }
-function RadiosetComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 1);
+    i0.ɵɵproperty("ngForOf", ctx_r2.groupedData);
 } }
 const DEFAULT_CLS$1 = 'app-radioset list-group inline';
 const WIDGET_CONFIG$8 = { widgetType: 'wm-radioset', hostClass: DEFAULT_CLS$1 };
@@ -2177,17 +2178,18 @@ class RadiosetComponent extends DatasetAwareFormComponent {
                 provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(RadiosetComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(RadiosetComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 4, vars: 3, consts: [["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "checked", "disabled", "name", "tabindex", "value"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["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"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams"], ["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_Conditional_0_Template, 2, 0)(1, RadiosetComponent_Conditional_1_Template, 2, 0);
-            i0.ɵɵelement(2, "input", 0);
-            i0.ɵɵtemplate(3, RadiosetComponent_Conditional_3_Template, 1, 0, "div", 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) {
-            i0.ɵɵconditional(!ctx.groupby ? 0 : 1);
-            i0.ɵɵadvance(2);
+            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();
-            i0.ɵɵconditional(ctx.readonly || ctx.disabled ? 3 : -1);
-        } }, dependencies: [i1.NgClass, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
+            i0.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.ItemTemplateDirective, i2.PartialParamHandlerDirective, i2.PartialContainerDirective, i2.TextContentDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadiosetComponent, [{
         type: Component,
@@ -2195,7 +2197,7 @@ class RadiosetComponent extends DatasetAwareFormComponent {
                     provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(RadiosetComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(RadiosetComponent)
-                ], template: "@if (!groupby) {\n  @for (item of datasetItems; track item; let i = $index) {\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n      [class.active]=\"item.selected\"\n      [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n      (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n      <!-- Default item template -->\n      @if (!content) {\n        <label 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      }\n      <!-- Custom partial template -->\n      @if (content) {\n        <label 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      }\n    </li>\n  }\n} @else {\n  @for (groupObj of groupedData; track groupObj; let groupindex = $index) {\n    <li 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              @if (collapsible) {\n                <i class=\"app-icon wi action wi-chevron-up\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n              }\n              @if (showcount) {\n                <span class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n              }\n            </div>\n          </h4>\n        </li>\n        @for (item of groupObj.data; track item; let i = $index) {\n          <li\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            @if (!content) {\n              <label 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            }\n            <!-- Custom partial template -->\n            @if (content) {\n              <label 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            }\n          </li>\n        }\n      </ul>\n    </li>\n  }\n}\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n@if (readonly || disabled) {\n  <div aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n}\n\n<!-- This template will be displayed when groupby is specified. -->\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']
@@ -2241,39 +2243,45 @@ const registerProps$7 = () => {
 const _c0$7 = ["select"];
 const _c1$6 = a0 => ["app-select form-control", a0];
 const _c2$4 = () => ({ standalone: true });
-function SelectComponent_Conditional_3_For_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 4);
+function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "option", 7);
 } if (rf & 2) {
     const item_r2 = ctx.$implicit;
     i0.ɵɵproperty("value", item_r2.key)("selected", item_r2.selected)("textContent", item_r2.label);
 } }
-function SelectComponent_Conditional_3_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "optgroup", 3);
-    i0.ɵɵrepeaterCreate(1, SelectComponent_Conditional_3_For_1_For_2_Template, 1, 3, "option", 4, i0.ɵɵrepeaterTrackByIdentity);
+function SelectComponent_ng_container_3_optgroup_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "optgroup", 5);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const groupObj_r3 = ctx.$implicit;
     i0.ɵɵproperty("label", groupObj_r3.key);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(groupObj_r3.data);
+    i0.ɵɵproperty("ngForOf", groupObj_r3.data);
 } }
-function SelectComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SelectComponent_Conditional_3_For_1_Template, 3, 1, "optgroup", 3, i0.ɵɵrepeaterTrackByIdentity);
+function SelectComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 4);
+    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r3.groupedData);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r3.groupedData);
 } }
-function SelectComponent_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 4);
+function SelectComponent_ng_container_4_option_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "option", 7);
 } if (rf & 2) {
     const item_r5 = ctx.$implicit;
     i0.ɵɵproperty("value", item_r5.key)("selected", item_r5.selected)("textContent", item_r5.label);
 } }
-function SelectComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SelectComponent_Conditional_4_For_1_Template, 1, 3, "option", 4, i0.ɵɵrepeaterTrackByIdentity);
+function SelectComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 6);
+    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r3.datasetItems);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r3.datasetItems);
 } }
 const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
 class SelectComponent extends DatasetAwareFormComponent {
@@ -2416,13 +2424,13 @@ 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", ""], ["focus-target", "", 3, "ngModelChange", "change", "mousedown", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "ngModelOptions", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [3, "label"], [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)); })("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_Conditional_3_Template, 2, 0)(4, SelectComponent_Conditional_4_Template, 2, 0);
+            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();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
@@ -2432,10 +2440,10 @@ class SelectComponent extends DatasetAwareFormComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.groupby ? 3 : -1);
+            i0.ɵɵproperty("ngIf", ctx.groupby);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.groupby ? 4 : -1);
-        } }, dependencies: [i1.NgClass, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.SelectMultipleControlValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel, i2.TextContentDirective], encapsulation: 2 }); }
+            i0.ɵɵproperty("ngIf", !ctx.groupby);
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, i2$1.SelectMultipleControlValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel, i2.TextContentDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectComponent, [{
         type: Component,
@@ -2443,7 +2451,7 @@ class SelectComponent extends DatasetAwareFormComponent {
                     provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SelectComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(SelectComponent)
-                ], template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select #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  @if (groupby) {\n    @for (groupObj of groupedData; track groupObj) {\n      <optgroup\n        [label]=\"groupObj.key\">\n        @for (item of groupObj.data; track item) {\n          <option\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n          ></option>\n        }\n      </optgroup>\n    }\n  }\n\n  @if (!groupby) {\n    @for (item of datasetItems; track item) {\n      <option\n        [value]=\"item.key\"\n        [selected]=\"item.selected\"\n        [textContent]=\"item.label\"\n      ></option>\n    }\n  }\n</select>\n" }]
+                ], 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']
@@ -2486,24 +2494,24 @@ 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];
-function SwitchComponent_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 5);
+function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 7);
 } 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_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 5);
+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));
 } }
-function SwitchComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 4);
-    i0.ɵɵlistener("click", function SwitchComponent_For_2_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_For_2_Conditional_1_Template, 1, 3, "i", 5)(2, SwitchComponent_For_2_Conditional_2_Template, 1, 3, "i", 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.ɵɵelementEnd();
 } if (rf & 2) {
@@ -2512,16 +2520,16 @@ function SwitchComponent_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("title", ctx_r4.hint ? ctx_r4.hint : opt_r3.key)("name", "wm-switch-" + opt_r3.key)("title", (ctx_r4.hint == null ? null : ctx_r4.hint[opt_r3.index - 1]) ? ctx_r4.hint[opt_r3.index - 1] : (ctx_r4.hint == null ? null : ctx_r4.hint[0]) ? ctx_r4.hint[0] : opt_r3[ctx_r4.displayfield] || opt_r3.label)("ngClass", i0.ɵɵpureFunction2(8, _c2$3, opt_r3.selected, ctx_r4.disabled));
     i0.ɵɵattribute("aria-pressed", opt_r3.selected ? true : false);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass] && !opt_r3.selected ? 1 : -1);
+    i0.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass] && !opt_r3.selected);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(opt_r3.selected && ctx_r4.checkediconclass ? 2 : -1);
+    i0.ɵɵproperty("ngIf", opt_r3.selected && ctx_r4.checkediconclass);
     i0.ɵɵadvance();
     i0.ɵɵproperty("textContent", opt_r3[ctx_r4.displayfield] || opt_r3.label);
 } }
-function SwitchComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 2);
-    i0.ɵɵelement(1, "i", 7);
-    i0.ɵɵelementStart(2, "span", 8);
+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()();
 } if (rf & 2) {
@@ -2666,28 +2674,28 @@ 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: 5, vars: 8, consts: [["role", "group", 1, "btn-group", "btn-group-justified", 3, "ngClass"], ["focus-target", "", "href", "javascript:void(0);", "role", "button", 1, "btn", "btn-default", 3, "title", "name", "ngClass"], ["aria-hidden", "true", 1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], ["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", "title", "name", "ngClass"], ["aria-hidden", "true", 3, "ngClass"], [1, "caption", 3, "textContent"], [3, "ngClass"], [1, "caption"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), 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", "role", "button", 3, "title", "name", "ngClass", "click", 4, "ngFor", "ngForOf"], ["aria-hidden", "true", "class", "btn btn-primary app-switch-overlay switch-handle", 3, "title", 4, "ngIf"], ["aria-hidden", "true", 1, "model-holder", "ng-hide", 3, "name", "disabled", "value", "required"], ["focus-target", "", "href", "javascript:void(0);", "role", "button", 1, "btn", "btn-default", 3, "click", "title", "name", "ngClass"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "caption", 3, "textContent"], ["aria-hidden", "true", 3, "ngClass"], ["aria-hidden", "true", 1, "btn", "btn-primary", "app-switch-overlay", "switch-handle", 3, "title"], [3, "ngClass"], [1, "caption"]], template: function SwitchComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵrepeaterCreate(1, SwitchComponent_For_2_Template, 4, 11, "a", 1, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵtemplate(1, SwitchComponent_a_1_Template, 4, 11, "a", 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(3, SwitchComponent_Conditional_3_Template, 4, 5, "span", 2);
-            i0.ɵɵelement(4, "input", 3);
+            i0.ɵɵtemplate(2, SwitchComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵelement(3, "input", 3);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c1$5, ctx.multiple));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$5, ctx.multiple));
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.datasetItems);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.multiple ? 3 : -1);
+            i0.ɵɵproperty("ngForOf", ctx.datasetItems);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.multiple);
             i0.ɵɵadvance();
             i0.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.modelByKey)("required", ctx.required);
-        } }, dependencies: [i1.NgClass, i2.TextContentDirective], encapsulation: 2 }); }
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.TextContentDirective], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwitchComponent, [{
         type: Component,
         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  @for (opt of datasetItems; track opt) {\n    <a\n      focus-target\n      href=\"javascript:void(0);\"\n      class=\"btn btn-default\"\n      [title]=\"hint?hint:opt.key\"\n      [name]=\"'wm-switch-' + opt.key\"\n      role=\"button\"\n      [title]=\"hint?.[opt.index-1]?hint[opt.index-1]:(hint?.[0]?hint[0]:(opt[displayfield]||opt.label))\"\n      [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n      [attr.aria-pressed]=\"opt.selected ? true : false\"\n      (click)=\"selectOpt($event, $index, opt)\"\n      >\n      @if (opt.dataObject && opt.dataObject[iconclass] && !opt.selected) {\n        <i aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n      }\n      @if (opt.selected && checkediconclass) {\n        <i aria-hidden=\"true\" [ngClass]=\"[checkediconclass]\"></i>\n      }\n      <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n  }\n</div>\n@if (!multiple) {\n  <span [title]=\"selectedItem ? selectedItem.label : modelByKey\" aria-hidden=\"true\"\n    class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i [ngClass]=\"[checkediconclass]\"></i>\n    <span class=\"caption\">{{selectedItem ? selectedItem.label : modelByKey}}</span>\n  </span>\n}\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
+                ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\" [ngClass]=\"{'multi-select': multiple}\">\n    <a *ngFor=\"let opt of datasetItems; let $index = index;\"\n       focus-target\n       href=\"javascript:void(0);\"\n       class=\"btn btn-default\"\n       [title]=\"hint?hint:opt.key\"\n       [name]=\"'wm-switch-' + opt.key\"\n       role=\"button\"\n       [title]=\"hint?.[opt.index-1]?hint[opt.index-1]:(hint?.[0]?hint[0]:(opt[displayfield]||opt.label))\"\n       [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n       [attr.aria-pressed]=\"opt.selected ? true : false\"\n       (click)=\"selectOpt($event, $index, opt)\"\n    >\n        <i *ngIf=\"opt.dataObject && opt.dataObject[iconclass] && !opt.selected\" aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n        <i *ngIf=\"opt.selected && checkediconclass\" aria-hidden=\"true\" [ngClass]=\"[checkediconclass]\"></i>\n        <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n</div>\n<span [title]=\"selectedItem ? selectedItem.label : modelByKey\" aria-hidden=\"true\"\n      class=\"btn btn-primary app-switch-overlay switch-handle\" *ngIf=\"!multiple\">\n    <i [ngClass]=\"[checkediconclass]\"></i>\n    <span class=\"caption\">{{selectedItem ? selectedItem.label : modelByKey}}</span>\n</span>\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -3251,8 +3259,8 @@ const registerProps = () => {
 };
 
 const _c0 = ["textarea"];
-function TextareaComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
+function TextareaComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -3288,20 +3296,20 @@ 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", "", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], [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); });
             i0.ɵɵlistener("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur($event)); })("input", function TextareaComponent_Template_textarea_input_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputChange()); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); ctx.handleChange($event); return i0.ɵɵresetView(ctx.onInputChange()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(2, TextareaComponent_Conditional_2_Template, 2, 1, "div", 2);
+            i0.ɵɵtemplate(2, TextareaComponent_div_2_Template, 2, 1, "div", 2);
         } 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.arialabel);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.maxchars ? 2 : -1);
-        } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextareaComponent, [{
         type: Component,
@@ -3309,7 +3317,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  [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@if (maxchars) {\n  <div class=\"textarea-count\"  >{{limitdisplaytext}}</div>\n}\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']