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

package/components/input/default/bundles/index.umd.js

@@ -58,22 +58,22 @@
   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__namespace.ɵɵelement(0, "img", 0);
+  function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "img", 5);
       i0__namespace.ɵɵpipe(1, "image");
   } if (rf & 2) {
       const ctx_r0 = i0__namespace.ɵɵnextContext();
       i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c3$4, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
   } }
-  function ButtonComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "i", 5);
+  function ButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "i", 6);
   } if (rf & 2) {
       const ctx_r0 = i0__namespace.ɵɵnextContext();
       i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
       i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "span", 2);
+  function ButtonComponent_span_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "span", 7);
       i0__namespace.ɵɵtext(1);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
@@ -81,8 +81,8 @@
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
   } }
-  function ButtonComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "span", 4);
+  function ButtonComponent_span_5_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "span", 8);
   } if (rf & 2) {
       const ctx_r0 = i0__namespace.ɵɵnextContext();
       i0__namespace.ɵɵproperty("textContent", ctx_r0.badgevalue);
@@ -105,29 +105,29 @@
               i0__namespace.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
           } }, exportAs: ["wmButton"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAsWidgetRef(ButtonComponent)
-              ]), i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵprojectionDef(_c1$b);
-              i0__namespace.ɵɵ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__namespace.ɵɵ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__namespace.ɵɵelement(3, "span", 3);
               i0__namespace.ɵɵprojection(4);
-              i0__namespace.ɵɵtemplate(5, ButtonComponent_Conditional_5_Template, 1, 1, "span", 4);
+              i0__namespace.ɵɵtemplate(5, ButtonComponent_span_5_Template, 1, 1, "span", 4);
           } if (rf & 2) {
-              i0__namespace.ɵɵconditional(ctx.iconurl ? 0 : -1);
+              i0__namespace.ɵɵproperty("ngIf", ctx.iconurl);
               i0__namespace.ɵɵadvance();
-              i0__namespace.ɵɵconditional(ctx.iconclass ? 1 : -1);
+              i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
               i0__namespace.ɵɵadvance();
-              i0__namespace.ɵɵconditional(ctx.iconclass ? 2 : -1);
+              i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
               i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("innerHTML", ctx.caption, i0__namespace.ɵɵsanitizeHtml);
               i0__namespace.ɵɵadvance(2);
-              i0__namespace.ɵɵconditional(ctx.badgevalue ? 5 : -1);
-          } }, dependencies: [i1__namespace.NgStyle, i2__namespace.TextContentDirective, i2__namespace.ImagePipe], encapsulation: 2 }); }
+              i0__namespace.ɵɵproperty("ngIf", ctx.badgevalue);
+          } }, dependencies: [i1__namespace.NgIf, i1__namespace.NgStyle, i2__namespace.TextContentDirective, i2__namespace.ImagePipe], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ButtonComponent, [{
           type: i0.Component,
           args: [{ selector: 'button[wmButton]', providers: [
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -915,41 +915,41 @@
   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__namespace.ɵɵelementStart(0, "label", 4);
-      i0__namespace.ɵɵelement(1, "input", 6)(2, "span", 7);
+  function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "label", 8);
+      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r3 = i0__namespace.ɵɵnextContext();
       const item_r2 = ctx_r3.$implicit;
-      const ɵ$index_2_r5 = ctx_r3.$index;
+      const i_r5 = ctx_r3.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", ɵ$index_2_r5);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r5);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("textContent", item_r2.label);
   } }
-  function CheckboxsetComponent_Conditional_0_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 5);
-      i0__namespace.ɵɵelement(1, "input", 6)(2, "span", 8);
+  function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "label", 11);
+      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 12);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r3 = i0__namespace.ɵɵnextContext();
       const item_r2 = ctx_r3.$implicit;
-      const ɵ$index_2_r5 = ctx_r3.$index;
+      const i_r5 = ctx_r3.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", ɵ$index_2_r5);
+      i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-      i0__namespace.ɵɵelementStart(0, "li", 3);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_Conditional_0_For_1_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
-      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_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__namespace.ɵɵelementStart(0, "li", 5);
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r2.key)); });
+      i0__namespace.ɵɵtemplate(1, CheckboxsetComponent_ng_template_0_li_0_label_1_Template, 3, 12, "label", 6)(2, CheckboxsetComponent_ng_template_0_li_0_label_2_Template, 3, 10, "label", 7);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const item_r2 = ctx.$implicit;
@@ -957,63 +957,66 @@
       i0__namespace.ɵɵclassProp("active", item_r2.selected);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c1$9, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(!ctx_r2.content ? 1 : -1);
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(ctx_r2.content ? 2 : -1);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.content);
   } }
-  function CheckboxsetComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵrepeaterCreate(0, CheckboxsetComponent_Conditional_0_For_1_Template, 3, 10, "li", 2, i0__namespace.ɵɵrepeaterTrackByIdentity);
+  function CheckboxsetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
   } if (rf & 2) {
       const ctx_r2 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵrepeater(ctx_r2.datasetItems);
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
   } }
-  function CheckboxsetComponent_Conditional_1_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "i", 14);
+  function CheckboxsetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "div", 13);
+  } }
+  function CheckboxsetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "i", 23);
   } if (rf & 2) {
       const ctx_r2 = i0__namespace.ɵɵnextContext(3);
       i0__namespace.ɵɵ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__namespace.ɵɵelement(0, "span", 15);
+  function CheckboxsetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "span", 24);
   } if (rf & 2) {
       const groupObj_r7 = i0__namespace.ɵɵnextContext().$implicit;
       i0__namespace.ɵɵproperty("textContent", groupObj_r7.data.length);
   } }
-  function CheckboxsetComponent_Conditional_1_For_1_For_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 4);
-      i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "label", 8);
+      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r9 = i0__namespace.ɵɵnextContext();
       const item_r9 = ctx_r9.$implicit;
-      const ɵ$index_38_r11 = ctx_r9.$index;
+      const i_r11 = ctx_r9.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(3);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", ɵ$index_38_r11);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r11);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("textContent", item_r9.label);
   } }
-  function CheckboxsetComponent_Conditional_1_For_1_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 5);
-      i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "label", 11);
+      i0__namespace.ɵɵelement(1, "input", 9)(2, "span", 26);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r9 = i0__namespace.ɵɵnextContext();
       const item_r9 = ctx_r9.$implicit;
-      const ɵ$index_38_r11 = ctx_r9.$index;
+      const i_r11 = ctx_r9.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(3);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", ɵ$index_38_r11);
+      i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-      i0__namespace.ɵɵelementStart(0, "li", 17);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_Conditional_1_For_1_For_9_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
-      i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "li", 25);
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onCheckboxLabelClick($event, item_r9)); });
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const item_r9 = ctx.$implicit;
@@ -1021,48 +1024,45 @@
       i0__namespace.ɵɵclassProp("active", item_r9.selected);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c4$2, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(!ctx_r2.content ? 1 : -1);
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(ctx_r2.content ? 2 : -1);
+      i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-      i0__namespace.ɵɵelementStart(0, "li", 9)(1, "ul", 10)(2, "li", 11);
-      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_Conditional_1_For_1_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
-      i0__namespace.ɵɵelementStart(3, "h4", 12);
+      i0__namespace.ɵɵelementStart(0, "li", 15)(1, "ul", 16)(2, "li", 17);
+      i0__namespace.ɵɵlistener("click", function CheckboxsetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
+      i0__namespace.ɵɵelementStart(3, "h4", 18);
       i0__namespace.ɵɵtext(4);
-      i0__namespace.ɵɵelementStart(5, "div", 13);
-      i0__namespace.ɵɵ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__namespace.ɵɵelementStart(5, "div", 19);
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd()()();
-      i0__namespace.ɵɵrepeaterCreate(8, CheckboxsetComponent_Conditional_1_For_1_For_9_Template, 3, 10, "li", 16, i0__namespace.ɵɵrepeaterTrackByIdentity);
+      i0__namespace.ɵɵtemplate(8, CheckboxsetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 22);
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
       const groupObj_r7 = ctx.$implicit;
-      const ɵ$index_20_r12 = ctx.$index;
+      const groupindex_r12 = ctx.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + ɵ$index_20_r12);
+      i0__namespace.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + ɵ$index_20_r12)("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(8, _c3$2, ctx_r2.collapsible));
+      i0__namespace.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + groupindex_r12)("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(9, _c3$2, ctx_r2.collapsible));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵattribute("aria-label", "Group " + groupObj_r7.key);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵconditional(ctx_r2.collapsible ? 6 : -1);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.collapsible);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(ctx_r2.showcount ? 7 : -1);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.showcount);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵrepeater(groupObj_r7.data);
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r7.data);
   } }
-  function CheckboxsetComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵrepeaterCreate(0, CheckboxsetComponent_Conditional_1_For_1_Template, 10, 10, "li", 9, i0__namespace.ɵɵrepeaterTrackByIdentity);
+  function CheckboxsetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_3_li_0_Template, 9, 11, "li", 14);
   } if (rf & 2) {
       const ctx_r2 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵrepeater(ctx_r2.groupedData);
-  } }
-  function CheckboxsetComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "div", 1);
+      i0__namespace.ɵɵ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 };
@@ -1136,17 +1136,18 @@
                   i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(CheckboxsetComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 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__namespace.ɵɵtemplate(0, CheckboxsetComponent_Conditional_0_Template, 2, 0)(1, CheckboxsetComponent_Conditional_1_Template, 2, 0);
-              i0__namespace.ɵɵelement(2, "input", 0);
-              i0__namespace.ɵɵtemplate(3, CheckboxsetComponent_Conditional_3_Template, 1, 0, "div", 1);
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$a, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-checkboxset-label", 3, "ngClass", "title", 4, "ngIf"], ["class", "app-checkboxset-label", 3, "ngClass", 4, "ngIf"], [1, "app-checkboxset-label", 3, "ngClass", "title"], ["type", "checkbox", 3, "name", "tabindex", "disabled", "value", "checked"], [1, "caption", 3, "textContent"], [1, "app-checkboxset-label", 3, "ngClass"], ["partial-container-target", "", 1, "caption", "customTemplate"], [1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], ["aria-hidden", "true", 1, "list-group-header", 3, "click", "id", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["partial-container-target", "", 1, "caption"]], template: function CheckboxsetComponent_Template(rf, ctx) { if (rf & 1) {
+              i0__namespace.ɵɵtemplate(0, CheckboxsetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+              i0__namespace.ɵɵelement(1, "input", 2);
+              i0__namespace.ɵɵtemplate(2, CheckboxsetComponent_div_2_Template, 1, 0, "div", 3)(3, CheckboxsetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
           } if (rf & 2) {
-              i0__namespace.ɵɵconditional(!ctx.groupby ? 0 : 1);
-              i0__namespace.ɵɵadvance(2);
+              const groupedListTemplate_r13 = i0__namespace.ɵɵreference(4);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r13);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
               i0__namespace.ɵɵadvance();
-              i0__namespace.ɵɵconditional(ctx.readonly || ctx.disabled ? 3 : -1);
-          } }, dependencies: [i1__namespace.NgClass, i2__namespace.ItemTemplateDirective, i2__namespace.PartialParamHandlerDirective, i2__namespace.PartialContainerDirective, i2__namespace.TextContentDirective], encapsulation: 2 }); }
+              i0__namespace.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
+          } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.ItemTemplateDirective, i2__namespace.PartialParamHandlerDirective, i2__namespace.PartialContainerDirective, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CheckboxsetComponent, [{
           type: i0.Component,
@@ -1154,7 +1155,7 @@
                       i2.provideAs(CheckboxsetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(CheckboxsetComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -1984,41 +1985,41 @@
   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__namespace.ɵɵelementStart(0, "label", 4);
-      i0__namespace.ɵɵelement(1, "input", 5)(2, "span", 6);
+  function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "label", 7);
+      i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 9);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r3 = i0__namespace.ɵɵnextContext();
       const item_r2 = ctx_r3.$implicit;
-      const ɵ$index_2_r5 = ctx_r3.$index;
+      const i_r5 = ctx_r3.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("checked", item_r2.selected)("disabled", ctx_r2.disabled || ctx_r2.readonly)("name", "radioset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("value", item_r2.key);
-      i0__namespace.ɵɵattribute("data-attr-index", ɵ$index_2_r5);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r5);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("textContent", item_r2.label);
   } }
-  function RadiosetComponent_Conditional_0_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 4);
-      i0__namespace.ɵɵelement(1, "input", 5)(2, "span", 7);
+  function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "label", 7);
+      i0__namespace.ɵɵelement(1, "input", 8)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r3 = i0__namespace.ɵɵnextContext();
       const item_r2 = ctx_r3.$implicit;
-      const ɵ$index_2_r5 = ctx_r3.$index;
+      const i_r5 = ctx_r3.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(7, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("checked", item_r2.selected)("disabled", ctx_r2.disabled || ctx_r2.readonly)("name", "radioset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("value", item_r2.key);
-      i0__namespace.ɵɵattribute("data-attr-index", ɵ$index_2_r5);
+      i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-      i0__namespace.ɵɵelementStart(0, "li", 3);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_Conditional_0_For_1_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
-      i0__namespace.ɵɵtemplate(1, RadiosetComponent_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__namespace.ɵɵelementStart(0, "li", 5);
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_0_li_0_Template_li_click_0_listener($event) { const item_r2 = i0__namespace.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r2.key)); });
+      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_0_li_0_label_1_Template, 3, 10, "label", 6)(2, RadiosetComponent_ng_template_0_li_0_label_2_Template, 3, 9, "label", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const item_r2 = ctx.$implicit;
@@ -2026,63 +2027,66 @@
       i0__namespace.ɵɵclassProp("active", item_r2.selected);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c1$7, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r2);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(!ctx_r2.content ? 1 : -1);
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(ctx_r2.content ? 2 : -1);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.content);
   } }
-  function RadiosetComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵrepeaterCreate(0, RadiosetComponent_Conditional_0_For_1_Template, 3, 10, "li", 2, i0__namespace.ɵɵrepeaterTrackByIdentity);
+  function RadiosetComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_li_0_Template, 3, 10, "li", 4);
   } if (rf & 2) {
       const ctx_r2 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵrepeater(ctx_r2.datasetItems);
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r2.datasetItems);
   } }
-  function RadiosetComponent_Conditional_1_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "i", 13);
+  function RadiosetComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "div", 11);
+  } }
+  function RadiosetComponent_ng_template_3_li_0_i_6_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "i", 21);
   } if (rf & 2) {
       const ctx_r2 = i0__namespace.ɵɵnextContext(3);
       i0__namespace.ɵɵ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__namespace.ɵɵelement(0, "span", 14);
+  function RadiosetComponent_ng_template_3_li_0_span_7_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "span", 22);
   } if (rf & 2) {
       const groupObj_r7 = i0__namespace.ɵɵnextContext().$implicit;
       i0__namespace.ɵɵproperty("textContent", groupObj_r7.data.length);
   } }
-  function RadiosetComponent_Conditional_1_For_1_For_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 4);
-      i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "label", 7);
+      i0__namespace.ɵɵelement(1, "input", 24)(2, "span", 9);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r9 = i0__namespace.ɵɵnextContext();
       const item_r9 = ctx_r9.$implicit;
-      const ɵ$index_38_r11 = ctx_r9.$index;
+      const i_r11 = ctx_r9.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(3);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", ɵ$index_38_r11);
+      i0__namespace.ɵɵattribute("data-attr-index", i_r11);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("textContent", item_r9.label);
   } }
-  function RadiosetComponent_Conditional_1_For_1_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "label", 4);
-      i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "label", 7);
+      i0__namespace.ɵɵelement(1, "input", 24)(2, "span", 10);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const ctx_r9 = i0__namespace.ɵɵnextContext();
       const item_r9 = ctx_r9.$implicit;
-      const ɵ$index_38_r11 = ctx_r9.$index;
+      const i_r11 = ctx_r9.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(3);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(7, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
-      i0__namespace.ɵɵattribute("data-attr-index", ɵ$index_38_r11);
+      i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-      i0__namespace.ɵɵelementStart(0, "li", 16);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_Conditional_1_For_1_For_9_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
-      i0__namespace.ɵɵtemplate(1, RadiosetComponent_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__namespace.ɵɵelementStart(0, "li", 23);
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_li_8_Template_li_click_0_listener($event) { const item_r9 = i0__namespace.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0__namespace.ɵɵnextContext(3); return i0__namespace.ɵɵresetView(ctx_r2.onRadioLabelClick($event, item_r9)); });
+      i0__namespace.ɵɵtemplate(1, RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template, 3, 10, "label", 6)(2, RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template, 3, 9, "label", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const item_r9 = ctx.$implicit;
@@ -2090,48 +2094,45 @@
       i0__namespace.ɵɵclassProp("active", item_r9.selected);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(7, _c4$1, ctx_r2.itemclass, ctx_r2.itemsPerRowClass))("wmItemTemplate", ctx_r2.content)("userComponentParams", item_r9);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(!ctx_r2.content ? 1 : -1);
+      i0__namespace.ɵɵproperty("ngIf", !ctx_r2.content);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(ctx_r2.content ? 2 : -1);
+      i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
-      i0__namespace.ɵɵelementStart(0, "li", 8)(1, "ul", 9)(2, "li", 10);
-      i0__namespace.ɵɵlistener("click", function RadiosetComponent_Conditional_1_For_1_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
-      i0__namespace.ɵɵelementStart(3, "h4", 11);
+      i0__namespace.ɵɵelementStart(0, "li", 13)(1, "ul", 14)(2, "li", 15);
+      i0__namespace.ɵɵlistener("click", function RadiosetComponent_ng_template_3_li_0_Template_li_click_2_listener($event) { i0__namespace.ɵɵrestoreView(_r6); const ctx_r2 = i0__namespace.ɵɵnextContext(2); return i0__namespace.ɵɵresetView(ctx_r2.handleHeaderClick($event)); });
+      i0__namespace.ɵɵelementStart(3, "h4", 16);
       i0__namespace.ɵɵtext(4);
-      i0__namespace.ɵɵelementStart(5, "div", 12);
-      i0__namespace.ɵɵ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__namespace.ɵɵelementStart(5, "div", 17);
+      i0__namespace.ɵɵ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__namespace.ɵɵelementEnd()()();
-      i0__namespace.ɵɵrepeaterCreate(8, RadiosetComponent_Conditional_1_For_1_For_9_Template, 3, 10, "li", 15, i0__namespace.ɵɵrepeaterTrackByIdentity);
+      i0__namespace.ɵɵtemplate(8, RadiosetComponent_ng_template_3_li_0_li_8_Template, 3, 10, "li", 20);
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
       const groupObj_r7 = ctx.$implicit;
-      const ɵ$index_20_r12 = ctx.$index;
+      const groupindex_r12 = ctx.index;
       const ctx_r2 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + ɵ$index_20_r12);
+      i0__namespace.ɵɵattribute("aria-labelledby", "group_" + ctx_r2.widgetId + "_" + groupindex_r12);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + ɵ$index_20_r12)("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(8, _c3$1, ctx_r2.collapsible));
+      i0__namespace.ɵɵproperty("id", "group_" + ctx_r2.widgetId + "_" + groupindex_r12)("title", groupObj_r7.key)("ngClass", i0__namespace.ɵɵpureFunction1(9, _c3$1, ctx_r2.collapsible));
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵattribute("aria-label", "Group " + groupObj_r7.key);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵtextInterpolate1("", groupObj_r7.key, " ");
       i0__namespace.ɵɵadvance(2);
-      i0__namespace.ɵɵconditional(ctx_r2.collapsible ? 6 : -1);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.collapsible);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(ctx_r2.showcount ? 7 : -1);
+      i0__namespace.ɵɵproperty("ngIf", ctx_r2.showcount);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵrepeater(groupObj_r7.data);
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r7.data);
   } }
-  function RadiosetComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵrepeaterCreate(0, RadiosetComponent_Conditional_1_For_1_Template, 10, 10, "li", 8, i0__namespace.ɵɵrepeaterTrackByIdentity);
+  function RadiosetComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_3_li_0_Template, 9, 11, "li", 12);
   } if (rf & 2) {
       const ctx_r2 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵrepeater(ctx_r2.groupedData);
-  } }
-  function RadiosetComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "div", 1);
+      i0__namespace.ɵɵ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 };
@@ -2191,17 +2192,18 @@
                   i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(RadiosetComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 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__namespace.ɵɵtemplate(0, RadiosetComponent_Conditional_0_Template, 2, 0)(1, RadiosetComponent_Conditional_1_Template, 2, 0);
-              i0__namespace.ɵɵelement(2, "input", 0);
-              i0__namespace.ɵɵtemplate(3, RadiosetComponent_Conditional_3_Template, 1, 0, "div", 1);
+              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$8, decls: 5, vars: 4, consts: [["groupedListTemplate", ""], [3, "ngIf", "ngIfElse"], ["hidden", "", 1, "model-holder", 3, "disabled"], ["aria-readonly", "true", "class", "readonly-wrapper", 4, "ngIf"], ["partialContainer", "", "role", "presentation", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], ["partialContainer", "", "role", "presentation", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["class", "app-radioset-label", 3, "ngClass", 4, "ngIf"], [1, "app-radioset-label", 3, "ngClass"], ["type", "radio", 3, "checked", "disabled", "name", "tabindex", "value"], [1, "caption", 3, "textContent"], ["partial-container-target", "", 1, "caption", "customTemplate"], ["aria-readonly", "true", 1, "readonly-wrapper"], ["class", "app-list-item-group", "role", "presentation", 4, "ngFor", "ngForOf"], ["role", "presentation", 1, "app-list-item-group"], [1, "item-group"], ["aria-hidden", "true", 1, "list-group-header", 3, "click", "id", "title", "ngClass"], [1, "group-title"], [1, "header-action"], ["class", "app-icon wi action wi-chevron-up", 3, "title", 4, "ngIf"], ["class", "label label-default", 3, "textContent", 4, "ngIf"], ["partialContainer", "", 3, "ngClass", "active", "wmItemTemplate", "userComponentParams", "click", 4, "ngFor", "ngForOf"], [1, "app-icon", "wi", "action", "wi-chevron-up", 3, "title"], [1, "label", "label-default", 3, "textContent"], ["partialContainer", "", 3, "click", "ngClass", "wmItemTemplate", "userComponentParams"], ["type", "radio", 3, "name", "value", "disabled", "tabindex", "checked"]], template: function RadiosetComponent_Template(rf, ctx) { if (rf & 1) {
+              i0__namespace.ɵɵtemplate(0, RadiosetComponent_ng_template_0_Template, 1, 1, "ng-template", 1);
+              i0__namespace.ɵɵelement(1, "input", 2);
+              i0__namespace.ɵɵtemplate(2, RadiosetComponent_div_2_Template, 1, 0, "div", 3)(3, RadiosetComponent_ng_template_3_Template, 1, 1, "ng-template", null, 0, i0__namespace.ɵɵtemplateRefExtractor);
           } if (rf & 2) {
-              i0__namespace.ɵɵconditional(!ctx.groupby ? 0 : 1);
-              i0__namespace.ɵɵadvance(2);
+              const groupedListTemplate_r13 = i0__namespace.ɵɵreference(4);
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby)("ngIfElse", groupedListTemplate_r13);
+              i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("disabled", ctx.disabled || ctx.readonly);
               i0__namespace.ɵɵadvance();
-              i0__namespace.ɵɵconditional(ctx.readonly || ctx.disabled ? 3 : -1);
-          } }, dependencies: [i1__namespace.NgClass, i2__namespace.ItemTemplateDirective, i2__namespace.PartialParamHandlerDirective, i2__namespace.PartialContainerDirective, i2__namespace.TextContentDirective], encapsulation: 2 }); }
+              i0__namespace.ɵɵproperty("ngIf", ctx.readonly || ctx.disabled);
+          } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.ItemTemplateDirective, i2__namespace.PartialParamHandlerDirective, i2__namespace.PartialContainerDirective, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(RadiosetComponent, [{
           type: i0.Component,
@@ -2209,7 +2211,7 @@
                       i2.provideAs(RadiosetComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(RadiosetComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -2255,39 +2257,45 @@
   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__namespace.ɵɵelement(0, "option", 4);
+  function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "option", 7);
   } if (rf & 2) {
       const item_r2 = ctx.$implicit;
       i0__namespace.ɵɵ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__namespace.ɵɵelementStart(0, "optgroup", 3);
-      i0__namespace.ɵɵrepeaterCreate(1, SelectComponent_Conditional_3_For_1_For_2_Template, 1, 3, "option", 4, i0__namespace.ɵɵrepeaterTrackByIdentity);
+  function SelectComponent_ng_container_3_optgroup_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "optgroup", 5);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_option_1_Template, 1, 3, "option", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
       const groupObj_r3 = ctx.$implicit;
       i0__namespace.ɵɵproperty("label", groupObj_r3.key);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵrepeater(groupObj_r3.data);
+      i0__namespace.ɵɵproperty("ngForOf", groupObj_r3.data);
   } }
-  function SelectComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵrepeaterCreate(0, SelectComponent_Conditional_3_For_1_Template, 3, 1, "optgroup", 3, i0__namespace.ɵɵrepeaterTrackByIdentity);
+  function SelectComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementContainerStart(0);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_3_optgroup_1_Template, 2, 2, "optgroup", 4);
+      i0__namespace.ɵɵelementContainerEnd();
   } if (rf & 2) {
       const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵrepeater(ctx_r3.groupedData);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.groupedData);
   } }
-  function SelectComponent_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelement(0, "option", 4);
+  function SelectComponent_ng_container_4_option_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "option", 7);
   } if (rf & 2) {
       const item_r5 = ctx.$implicit;
       i0__namespace.ɵɵproperty("value", item_r5.key)("selected", item_r5.selected)("textContent", item_r5.label);
   } }
-  function SelectComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵrepeaterCreate(0, SelectComponent_Conditional_4_For_1_Template, 1, 3, "option", 4, i0__namespace.ɵɵrepeaterTrackByIdentity);
+  function SelectComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementContainerStart(0);
+      i0__namespace.ɵɵtemplate(1, SelectComponent_ng_container_4_option_1_Template, 1, 3, "option", 6);
+      i0__namespace.ɵɵelementContainerEnd();
   } if (rf & 2) {
       const ctx_r3 = i0__namespace.ɵɵnextContext();
-      i0__namespace.ɵɵrepeater(ctx_r3.datasetItems);
+      i0__namespace.ɵɵadvance();
+      i0__namespace.ɵɵproperty("ngForOf", ctx_r3.datasetItems);
   } }
   const WIDGET_CONFIG$7 = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
   class SelectComponent extends DatasetAwareFormComponent {
@@ -2430,13 +2438,13 @@
                   i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(SelectComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 18, consts: [["select", ""], ["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__namespace.ɵɵInheritDefinitionFeature], decls: 5, vars: 18, consts: [["select", ""], ["focus-target", "", 3, "ngModelChange", "change", "mousedown", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "ngModelOptions", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], [3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], [3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "select", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0__namespace.ɵɵresetView($event); });
               i0__namespace.ɵɵlistener("change", function SelectComponent_Template_select_change_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onSelectValueChange($event)); })("mousedown", function SelectComponent_Template_select_mousedown_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); })("blur", function SelectComponent_Template_select_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.invokeOnTouched($event); return i0__namespace.ɵɵresetView(ctx.checkForFloatingLabel($event)); });
               i0__namespace.ɵɵelement(2, "option", 2);
-              i0__namespace.ɵɵtemplate(3, SelectComponent_Conditional_3_Template, 2, 0)(4, SelectComponent_Conditional_4_Template, 2, 0);
+              i0__namespace.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
               i0__namespace.ɵɵelementEnd();
           } if (rf & 2) {
               i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
@@ -2446,10 +2454,10 @@
               i0__namespace.ɵɵadvance(2);
               i0__namespace.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
               i0__namespace.ɵɵadvance();
-              i0__namespace.ɵɵconditional(ctx.groupby ? 3 : -1);
+              i0__namespace.ɵɵproperty("ngIf", ctx.groupby);
               i0__namespace.ɵɵadvance();
-              i0__namespace.ɵɵconditional(!ctx.groupby ? 4 : -1);
-          } }, dependencies: [i1__namespace.NgClass, i2$1__namespace.NgSelectOption, i2$1__namespace.ɵNgSelectMultipleOption, i2$1__namespace.SelectMultipleControlValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel, i2__namespace.TextContentDirective], encapsulation: 2 }); }
+              i0__namespace.ɵɵproperty("ngIf", !ctx.groupby);
+          } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2$1__namespace.NgSelectOption, i2$1__namespace.ɵNgSelectMultipleOption, i2$1__namespace.SelectMultipleControlValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.NgModel, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SelectComponent, [{
           type: i0.Component,
@@ -2457,7 +2465,7 @@
                       i2.provideAs(SelectComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(SelectComponent, i2$1.NG_VALIDATORS, true),
                       i2.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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -2500,24 +2508,24 @@
   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__namespace.ɵɵelement(0, "i", 5);
+  function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "i", 7);
   } if (rf & 2) {
       const opt_r3 = i0__namespace.ɵɵnextContext().$implicit;
       const ctx_r4 = i0__namespace.ɵɵnextContext();
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵ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__namespace.ɵɵelement(0, "i", 5);
+  function SwitchComponent_a_1_i_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelement(0, "i", 7);
   } if (rf & 2) {
       const ctx_r4 = i0__namespace.ɵɵnextContext(2);
       i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵ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__namespace.ɵɵgetCurrentView();
       i0__namespace.ɵɵelementStart(0, "a", 4);
-      i0__namespace.ɵɵlistener("click", function SwitchComponent_For_2_Template_a_click_0_listener($event) { const ctx_r1 = i0__namespace.ɵɵrestoreView(_r1); const opt_r3 = ctx_r1.$implicit; const $index_r4 = ctx_r1.$index; const ctx_r4 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r4.selectOpt($event, $index_r4, opt_r3)); });
-      i0__namespace.ɵɵtemplate(1, SwitchComponent_For_2_Conditional_1_Template, 1, 3, "i", 5)(2, SwitchComponent_For_2_Conditional_2_Template, 1, 3, "i", 5);
+      i0__namespace.ɵɵlistener("click", function SwitchComponent_a_1_Template_a_click_0_listener($event) { const ctx_r1 = i0__namespace.ɵɵrestoreView(_r1); const opt_r3 = ctx_r1.$implicit; const $index_r4 = ctx_r1.index; const ctx_r4 = i0__namespace.ɵɵnextContext(); return i0__namespace.ɵɵresetView(ctx_r4.selectOpt($event, $index_r4, opt_r3)); });
+      i0__namespace.ɵɵtemplate(1, SwitchComponent_a_1_i_1_Template, 1, 3, "i", 5)(2, SwitchComponent_a_1_i_2_Template, 1, 3, "i", 5);
       i0__namespace.ɵɵelement(3, "span", 6);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
@@ -2526,16 +2534,16 @@
       i0__namespace.ɵɵ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__namespace.ɵɵpureFunction2(8, _c2$3, opt_r3.selected, ctx_r4.disabled));
       i0__namespace.ɵɵattribute("aria-pressed", opt_r3.selected ? true : false);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass] && !opt_r3.selected ? 1 : -1);
+      i0__namespace.ɵɵproperty("ngIf", opt_r3.dataObject && opt_r3.dataObject[ctx_r4.iconclass] && !opt_r3.selected);
       i0__namespace.ɵɵadvance();
-      i0__namespace.ɵɵconditional(opt_r3.selected && ctx_r4.checkediconclass ? 2 : -1);
+      i0__namespace.ɵɵproperty("ngIf", opt_r3.selected && ctx_r4.checkediconclass);
       i0__namespace.ɵɵadvance();
       i0__namespace.ɵɵproperty("textContent", opt_r3[ctx_r4.displayfield] || opt_r3.label);
   } }
-  function SwitchComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "span", 2);
-      i0__namespace.ɵɵelement(1, "i", 7);
-      i0__namespace.ɵɵelementStart(2, "span", 8);
+  function SwitchComponent_span_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "span", 8);
+      i0__namespace.ɵɵelement(1, "i", 9);
+      i0__namespace.ɵɵelementStart(2, "span", 10);
       i0__namespace.ɵɵtext(3);
       i0__namespace.ɵɵelementEnd()();
   } if (rf & 2) {
@@ -2680,28 +2688,28 @@
       static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SwitchComponent, selectors: [["", "wmSwitch", ""]], exportAs: ["wmSwitch"], features: [i0__namespace.ɵɵProvidersFeature([
                   i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAsWidgetRef(SwitchComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 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__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 4, vars: 9, consts: [["role", "group", 1, "btn-group", "btn-group-justified", 3, "ngClass"], ["focus-target", "", "href", "javascript:void(0);", "class", "btn btn-default", "role", "button", 3, "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__namespace.ɵɵelementStart(0, "div", 0);
-              i0__namespace.ɵɵrepeaterCreate(1, SwitchComponent_For_2_Template, 4, 11, "a", 1, i0__namespace.ɵɵrepeaterTrackByIdentity);
+              i0__namespace.ɵɵtemplate(1, SwitchComponent_a_1_Template, 4, 11, "a", 1);
               i0__namespace.ɵɵelementEnd();
-              i0__namespace.ɵɵtemplate(3, SwitchComponent_Conditional_3_Template, 4, 5, "span", 2);
-              i0__namespace.ɵɵelement(4, "input", 3);
+              i0__namespace.ɵɵtemplate(2, SwitchComponent_span_2_Template, 4, 5, "span", 2);
+              i0__namespace.ɵɵelement(3, "input", 3);
           } if (rf & 2) {
-              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(6, _c1$5, ctx.multiple));
+              i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction1(7, _c1$5, ctx.multiple));
               i0__namespace.ɵɵadvance();
-              i0__namespace.ɵɵrepeater(ctx.datasetItems);
-              i0__namespace.ɵɵadvance(2);
-              i0__namespace.ɵɵconditional(!ctx.multiple ? 3 : -1);
+              i0__namespace.ɵɵproperty("ngForOf", ctx.datasetItems);
+              i0__namespace.ɵɵadvance();
+              i0__namespace.ɵɵproperty("ngIf", !ctx.multiple);
               i0__namespace.ɵɵadvance();
               i0__namespace.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.modelByKey)("required", ctx.required);
-          } }, dependencies: [i1__namespace.NgClass, i2__namespace.TextContentDirective], encapsulation: 2 }); }
+          } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgForOf, i1__namespace.NgIf, i2__namespace.TextContentDirective], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SwitchComponent, [{
           type: i0.Component,
           args: [{ selector: '[wmSwitch]', providers: [
                       i2.provideAs(SwitchComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAsWidgetRef(SwitchComponent)
-                  ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\" [ngClass]=\"{'multi-select': multiple}\">\n  @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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']
@@ -3265,8 +3273,8 @@
   };
 
   const _c0 = ["textarea"];
-  function TextareaComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-      i0__namespace.ɵɵelementStart(0, "div", 2);
+  function TextareaComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+      i0__namespace.ɵɵelementStart(0, "div", 3);
       i0__namespace.ɵɵtext(1);
       i0__namespace.ɵɵelementEnd();
   } if (rf & 2) {
@@ -3302,20 +3310,20 @@
                   i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
                   i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                   i2.provideAsWidgetRef(TextareaComponent)
-              ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "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__namespace.ɵɵInheritDefinitionFeature], decls: 3, vars: 15, consts: [["textarea", ""], ["focus-target", "", "aria-multiline", "true", 1, "form-control", "app-textarea", 3, "ngModelChange", "blur", "input", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"], ["class", "textarea-count", 4, "ngIf"], [1, "textarea-count"]], template: function TextareaComponent_Template(rf, ctx) { if (rf & 1) {
               const _r1 = i0__namespace.ɵɵgetCurrentView();
               i0__namespace.ɵɵelementStart(0, "textarea", 1, 0);
               i0__namespace.ɵɵtwoWayListener("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); i0__namespace.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0__namespace.ɵɵresetView($event); });
               i0__namespace.ɵɵlistener("blur", function TextareaComponent_Template_textarea_blur_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.handleBlur($event)); })("input", function TextareaComponent_Template_textarea_input_0_listener() { i0__namespace.ɵɵrestoreView(_r1); return i0__namespace.ɵɵresetView(ctx.onInputChange()); })("ngModelChange", function TextareaComponent_Template_textarea_ngModelChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r1); ctx.handleChange($event); return i0__namespace.ɵɵresetView(ctx.onInputChange()); });
               i0__namespace.ɵɵelementEnd();
-              i0__namespace.ɵɵtemplate(2, TextareaComponent_Conditional_2_Template, 2, 1, "div", 2);
+              i0__namespace.ɵɵtemplate(2, TextareaComponent_div_2_Template, 2, 1, "div", 2);
           } if (rf & 2) {
               i0__namespace.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
               i0__namespace.ɵɵproperty("ngModelOptions", ctx.ngModelOptions)("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
               i0__namespace.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.arialabel);
               i0__namespace.ɵɵadvance(2);
-              i0__namespace.ɵɵconditional(ctx.maxchars ? 2 : -1);
-          } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
+              i0__namespace.ɵɵproperty("ngIf", ctx.maxchars);
+          } }, dependencies: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace.NgStyle, i2$1__namespace.DefaultValueAccessor, i2$1__namespace.NgControlStatus, i2$1__namespace.RequiredValidator, i2$1__namespace.MaxLengthValidator, i2$1__namespace.NgModel], encapsulation: 2 }); }
   }
   (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(TextareaComponent, [{
           type: i0.Component,
@@ -3323,7 +3331,7 @@
                       i2.provideAs(TextareaComponent, i2$1.NG_VALUE_ACCESSOR, true),
                       i2.provideAs(TextareaComponent, i2$1.NG_VALIDATORS, true),
                       i2.provideAsWidgetRef(TextareaComponent)
-                  ], template: "<textarea class=\"form-control app-textarea\"\n  focus-target\n  [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__namespace.Injector }, { type: undefined, decorators: [{
                   type: i0.Inject,
                   args: ['EXPLICIT_CONTEXT']