@wavemaker/app-ng-runtime 11.7.5-rc.5649 → 11.8.0-next.1417111

app-ng-runtime/components/data/form/fesm2022/index.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { ViewContainerRef, Component, Optional, SkipSelf, Attribute, ViewChild, ContentChildren, HostBinding, HostListener, Directive, Inject, Self, ContentChild, NgModule } from '@angular/core';
+import { ViewContainerRef, Component, Optional, SkipSelf, Attribute, Inject, ViewChild, ContentChildren, HostBinding, HostListener, Directive, Self, ContentChild, NgModule } from '@angular/core';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5 from '@wm/components/base';
-import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, StylableComponent, styler, getFieldLayoutConfig, Live_Operations, performDataOperation, parseValueByType, WidgetRef, MessageComponent, provideAsWidgetRef, BaseComponent, getWidgetPropsByType, getEvaluatedData, BaseFieldValidations, getDefaultViewModeWidget, Context, provideAs, fetchDistinctValues, applyFilterOnField, isDataSetWidget, getDistinctValuesForField, getRangeFieldValue, getRangeMatchMode, getEnableEmptyFilter, getEmptyMatchMode, fetchRelatedFieldData, ALLFIELDS, WmComponentsModule } from '@wm/components/base';
+import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, StylableComponent, styler, getFieldLayoutConfig, Live_Operations, performDataOperation, parseValueByType, WidgetRef, MessageComponent, provideAsWidgetRef, BaseComponent, getWidgetPropsByType, getEvaluatedData, BaseFieldValidations, getDefaultViewModeWidget, Context, provideAs, fetchDistinctValues, applyFilterOnField, isDataSetWidget, getDistinctValuesForField, getRangeFieldValue, getRangeMatchMode, getEnableEmptyFilter, getEmptyMatchMode, ALLFIELDS, fetchRelatedFieldData, WmComponentsModule } from '@wm/components/base';
 import * as i6 from '@wm/components/basic';
 import { BasicModule } from '@wm/components/basic';
 import * as i8 from '@wm/components/input';
@@ -92,6 +92,11 @@ const registerLiveFilterProps = () => {
 
 const _c0$1 = ["dynamicForm"];
 const _c1$1 = ["wmForm", ""];
+const _c2 = ["*"];
+const _c3 = (a0, a1) => ({ "form-elements": a0, "form-body": a1 });
+const _c4 = (a0, a1) => ({ "form-elements": a0, "form-content": a1 });
+const _c5 = a0 => ({ "modal-footer": a0 });
+const _c6 = a0 => ({ btn: a0 });
 function FormComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
@@ -101,27 +106,27 @@ function FormComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 function FormComponent_ng_template_3_div_0_i_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 22);
 } if (rf & 2) {
-    const ctx_r16 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r16.iconclass);
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r0.iconclass);
 } }
-const _c2 = function (a0) { return { btn: a0 }; };
 function FormComponent_ng_template_3_div_0_ng_container_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 23);
 } if (rf & 2) {
-    const btn_r19 = ctx.$implicit;
-    i0.ɵɵnextContext(3);
-    const _r7 = i0.ɵɵreference(8);
-    const _r9 = i0.ɵɵreference(10);
-    i0.ɵɵproperty("ngTemplateOutlet", btn_r19.widgetType === "button" ? _r7 : _r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, btn_r19));
+    const btn_r2 = ctx.$implicit;
+    const index_r3 = ctx.index;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    const buttonRef_r4 = i0.ɵɵreference(8);
+    const anchorRef_r5 = i0.ɵɵreference(10);
+    i0.ɵɵproperty("ngTemplateOutlet", btn_r2.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c6, btn_r2))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("action_header_" + index_r3, i0.ɵɵpureFunction1(5, _c6, btn_r2)));
 } }
 function FormComponent_ng_template_3_div_0_button_10_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 24);
-    i0.ɵɵlistener("click", function FormComponent_ng_template_3_div_0_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r20.expandCollapsePanel()); });
+    i0.ɵɵlistener("click", function FormComponent_ng_template_3_div_0_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.expandCollapsePanel()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r18 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r18.expanded ? "wi-minus" : "wi-plus");
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r0.expanded ? "wi-minus" : "wi-plus");
 } }
 function FormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 14)(1, "h3", 15)(2, "div", 16);
@@ -131,28 +136,28 @@ function FormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(5, "div", 18)(6, "div", 19);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "div", 20);
-    i0.ɵɵtemplate(8, FormComponent_ng_template_3_div_0_ng_container_8_Template, 1, 4, "ng-container", 13);
+    i0.ɵɵtemplate(8, FormComponent_ng_template_3_div_0_ng_container_8_Template, 1, 7, "ng-container", 13);
     i0.ɵɵpipe(9, "filter");
     i0.ɵɵtemplate(10, FormComponent_ng_template_3_div_0_button_10_Template, 1, 1, "button", 21);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r12 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r12.iconclass);
+    i0.ɵɵproperty("ngIf", ctx_r0.iconclass);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("innerHTML", ctx_r12.title, i0.ɵɵsanitizeHtml);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("innerHTML", ctx_r12.subheading, i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r0.title, i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r0.subheading, i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind3(9, 5, ctx_r12.buttonArray, "position", "header"));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind3(9, 5, ctx_r0.buttonArray, "position", "header"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r12.collapsible);
+    i0.ɵɵproperty("ngIf", ctx_r0.collapsible);
 } }
 function FormComponent_ng_template_3_p_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "p", 25);
 } if (rf & 2) {
-    const ctx_r13 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("aria-hidden", !ctx_r13.statusMessage.caption)("aria-label", ctx_r13.statusMessage.caption);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("aria-hidden", !ctx_r0.statusMessage.caption)("aria-label", ctx_r0.statusMessage.caption);
 } }
 function FormComponent_ng_template_3_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -160,15 +165,13 @@ function FormComponent_ng_template_3_ng_container_4_Template(rf, ctx) { if (rf &
 function FormComponent_ng_template_3_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 23);
 } if (rf & 2) {
-    const btn_r22 = ctx.$implicit;
-    i0.ɵɵnextContext(2);
-    const _r7 = i0.ɵɵreference(8);
-    const _r9 = i0.ɵɵreference(10);
-    i0.ɵɵproperty("ngTemplateOutlet", btn_r22.widgetType === "button" ? _r7 : _r9)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, btn_r22));
+    const btn_r7 = ctx.$implicit;
+    const index_r8 = ctx.index;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    const buttonRef_r4 = i0.ɵɵreference(8);
+    const anchorRef_r5 = i0.ɵɵreference(10);
+    i0.ɵɵproperty("ngTemplateOutlet", btn_r7.widgetType === "button" ? buttonRef_r4 : anchorRef_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c6, btn_r7))("ngTemplateOutletInjector", ctx_r0.createCustomInjector("action_footer_" + index_r8, i0.ɵɵpureFunction1(5, _c6, btn_r7)));
 } }
-const _c3 = function (a0, a1) { return { "form-elements": a0, "form-body": a1 }; };
-const _c4 = function (a0, a1) { return { "form-elements": a0, "form-content": a1 }; };
-const _c5 = function (a0) { return { "modal-footer": a0 }; };
 function FormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, FormComponent_ng_template_3_div_0_Template, 11, 9, "div", 7);
     i0.ɵɵelementStart(1, "div", 8);
@@ -177,27 +180,27 @@ function FormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(4, FormComponent_ng_template_3_ng_container_4_Template, 1, 0, "ng-container", 11);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "div", 12);
-    i0.ɵɵtemplate(6, FormComponent_ng_template_3_ng_container_6_Template, 1, 4, "ng-container", 13);
+    i0.ɵɵtemplate(6, FormComponent_ng_template_3_ng_container_6_Template, 1, 7, "ng-container", 13);
     i0.ɵɵpipe(7, "filter");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    const _r0 = i0.ɵɵreference(1);
-    i0.ɵɵproperty("ngIf", !ctx_r4.isLayoutDialog && (ctx_r4.title || ctx_r4.subheading || ctx_r4.iconclass || ctx_r4.showButtons("header")));
-    i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("hidden", !ctx_r4.expanded);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(15, _c3, ctx_r4.isLayoutDialog, !ctx_r4.isLayoutDialog));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !!ctx_r4.statusMessage.caption);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c4, !ctx_r4.isLayoutDialog, ctx_r4.isLayoutDialog));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r0);
-    i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("hidden", !ctx_r4.expanded || !ctx_r4.showButtons("footer"));
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c5, ctx_r4.isLayoutDialog));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind3(7, 11, ctx_r4.buttonArray, "position", "footer"));
+    const ctx_r0 = i0.ɵɵnextContext();
+    const content_r9 = i0.ɵɵreference(1);
+    i0.ɵɵproperty("ngIf", !ctx_r0.isLayoutDialog && (ctx_r0.title || ctx_r0.subheading || ctx_r0.iconclass || ctx_r0.showButtons("header")));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("hidden", !ctx_r0.expanded);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(15, _c3, ctx_r0.isLayoutDialog, !ctx_r0.isLayoutDialog));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !!ctx_r0.statusMessage.caption);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(18, _c4, !ctx_r0.isLayoutDialog, ctx_r0.isLayoutDialog));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", content_r9);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("hidden", !ctx_r0.expanded || !ctx_r0.showButtons("footer"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c5, ctx_r0.isLayoutDialog));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind3(7, 11, ctx_r0.buttonArray, "position", "footer"));
 } }
 function FormComponent_ng_template_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -206,33 +209,32 @@ function FormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, FormComponent_ng_template_5_ng_container_0_Template, 1, 0, "ng-container", 11);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const _r0 = i0.ɵɵreference(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r0);
+    const content_r9 = i0.ɵɵreference(1);
+    i0.ɵɵproperty("ngTemplateOutlet", content_r9);
 } }
 function FormComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function FormComponent_ng_template_7_Template_button_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r26); const btn_r24 = restoredCtx.btn; const ctx_r25 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r25.invokeActionEvent($event, btn_r24.action)); });
+    i0.ɵɵlistener("click", function FormComponent_ng_template_7_Template_button_click_0_listener($event) { const btn_r11 = i0.ɵɵrestoreView(_r10).btn; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.invokeActionEvent($event, btn_r11.action)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const btn_r24 = ctx.btn;
-    const ctx_r8 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("hidden", btn_r24.updateMode ? !ctx_r8.isUpdateMode : ctx_r8.isUpdateMode);
-    i0.ɵɵpropertyInterpolate("name", btn_r24.key);
-    i0.ɵɵattribute("aria-label", btn_r24.displayName);
+    const btn_r11 = ctx.btn;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("hidden", btn_r11.updateMode ? !ctx_r0.isUpdateMode : ctx_r0.isUpdateMode);
+    i0.ɵɵpropertyInterpolate("name", btn_r11.key);
+    i0.ɵɵattribute("aria-label", btn_r11.displayName);
 } }
 function FormComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
+    const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 27);
-    i0.ɵɵlistener("click", function FormComponent_ng_template_9_Template_a_click_0_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r29); const btn_r27 = restoredCtx.btn; const ctx_r28 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r28.invokeActionEvent($event, btn_r27.action)); });
+    i0.ɵɵlistener("click", function FormComponent_ng_template_9_Template_a_click_0_listener($event) { const btn_r13 = i0.ɵɵrestoreView(_r12).btn; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.invokeActionEvent($event, btn_r13.action)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const btn_r27 = ctx.btn;
-    const ctx_r10 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("hidden", btn_r27.updateMode ? !ctx_r10.isUpdateMode : ctx_r10.isUpdateMode);
-    i0.ɵɵpropertyInterpolate("name", btn_r27.key);
+    const btn_r13 = ctx.btn;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("hidden", btn_r13.updateMode ? !ctx_r0.isUpdateMode : ctx_r0.isUpdateMode);
+    i0.ɵɵpropertyInterpolate("name", btn_r13.key);
 } }
-const _c6 = ["*"];
 const WIDGET_CONFIG$1 = { widgetType: 'wm-form', hostClass: 'panel app-panel app-form' };
 const LOGIN_FORM_CONFIG = { widgetType: 'wm-form', hostClass: 'app-form app-login-form' };
 const LIVE_FORM_CONFIG = { widgetType: 'wm-liveform', hostClass: 'panel app-panel app-liveform liveform-inline' };
@@ -357,8 +359,8 @@ class FormComponent extends StylableComponent {
         }
         return isDefined(this._formIsInList) ? this._formIsInList : this.parentList;
     }
-    constructor(inj, fb, app, dialogService, dynamicComponentProvider, ngZone, parentList, parentForm, parentPrefab, parentPartial, onBeforeSubmitEvt, onSubmitEvt, onBeforeRenderEvt, binddataset, bindformdata, isLiveForm, isLiveFilter, role, key, name) {
-        super(inj, getWidgetConfig(isLiveForm, isLiveFilter, role));
+    constructor(inj, fb, app, dialogService, dynamicComponentProvider, ngZone, parentList, parentForm, parentPrefab, parentPartial, onBeforeSubmitEvt, onSubmitEvt, onBeforeRenderEvt, binddataset, bindformdata, isLiveForm, isLiveFilter, role, key, name, explicitContext) {
+        super(inj, getWidgetConfig(isLiveForm, isLiveFilter, role), explicitContext);
         this.fb = fb;
         this.app = app;
         this.dialogService = dialogService;
@@ -1320,7 +1322,7 @@ class FormComponent extends StylableComponent {
         }
         super.ngOnDestroy();
     }
-    static { this.ɵfac = function FormComponent_Factory(t) { return new (t || FormComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject(i1$1.AbstractDialogService), i0.ɵɵdirectiveInject(i1$1.DynamicComponentRefProvider), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i3.ListComponent, 8), i0.ɵɵdirectiveInject(FormComponent, 12), i0.ɵɵdirectiveInject(i4.PrefabDirective, 12), i0.ɵɵdirectiveInject(i5.PartialDirective, 12), i0.ɵɵinjectAttribute('beforesubmit.event'), i0.ɵɵinjectAttribute('submit.event'), i0.ɵɵinjectAttribute('beforerender.event'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('formdata.bind'), i0.ɵɵinjectAttribute('wmLiveForm'), i0.ɵɵinjectAttribute('wmLiveFilter'), i0.ɵɵinjectAttribute('data-role'), i0.ɵɵinjectAttribute('key'), i0.ɵɵinjectAttribute('name')); }; }
+    static { this.ɵfac = function FormComponent_Factory(t) { return new (t || FormComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject(i1$1.AbstractDialogService), i0.ɵɵdirectiveInject(i1$1.DynamicComponentRefProvider), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i3.ListComponent, 8), i0.ɵɵdirectiveInject(FormComponent, 12), i0.ɵɵdirectiveInject(i4.PrefabDirective, 12), i0.ɵɵdirectiveInject(i5.PartialDirective, 12), i0.ɵɵinjectAttribute('beforesubmit.event'), i0.ɵɵinjectAttribute('submit.event'), i0.ɵɵinjectAttribute('beforerender.event'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('formdata.bind'), i0.ɵɵinjectAttribute('wmLiveForm'), i0.ɵɵinjectAttribute('wmLiveFilter'), i0.ɵɵinjectAttribute('data-role'), i0.ɵɵinjectAttribute('key'), i0.ɵɵinjectAttribute('name'), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormComponent, selectors: [["form", "wmForm", ""]], contentQueries: function FormComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, WidgetRef, 5);
         } if (rf & 2) {
@@ -1339,28 +1341,23 @@ class FormComponent extends StylableComponent {
             i0.ɵɵhostProperty("action", ctx.action, i0.ɵɵsanitizeUrl);
         } }, features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(FormComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, ngContentSelectors: _c6, decls: 13, vars: 3, consts: [["content", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["defaultTemplate", ""], ["pageLayoutTemplate", ""], ["buttonRef", ""], ["anchorRef", ""], ["dynamicForm", ""], ["class", "panel-heading", 4, "ngIf"], [1, "panel-body", 3, "ngClass"], ["wmMessage", "", "caption.bind", "statusMessage.caption", "type.bind", "statusMessage.type", 4, "ngIf"], [3, "ngClass"], [4, "ngTemplateOutlet"], [1, "basic-btn-grp", "form-action", "panel-footer", "clearfix", 3, "ngClass"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngFor", "ngForOf"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], ["class", "app-icon panel-icon", "aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], [1, "form-action", "panel-actions", "basic-btn-grp"], ["type", "button", "class", "app-icon wi panel-action", "title", "Collapse/Expand", 3, "ngClass", "click", 4, "ngIf"], ["aria-hidden", "true", 1, "app-icon", "panel-icon", 3, "ngClass"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "button", "title", "Collapse/Expand", 1, "app-icon", "wi", "panel-action", 3, "ngClass", "click"], ["wmMessage", "", "caption.bind", "statusMessage.caption", "type.bind", "statusMessage.type"], ["wmButton", "", "caption.bind", "btn.displayName", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "show.bind", "btn.show", "type.bind", "btn.type", "hint.bind", "btn.title", "shortcutkey.bind", "btn.shortcutkey", "disabled.bind", "ngform.status === 'PENDING' || btn.disabled", "tabindex.bind", "btn.tabindex", 3, "name", "click"], ["wmAnchor", "", "caption.bind", "btn.displayName", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "show.bind", "btn.show", "hint.bind", "btn.title", "shortcutkey.bind", "btn.shortcutkey", "hyperlink.bind", "btn.hyperlink", "target.bind", "btn.target", "tabindex.bind", "btn.tabindex", 3, "name", "click"]], template: function FormComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$1, ngContentSelectors: _c2, decls: 13, vars: 3, consts: [["content", ""], ["defaultTemplate", ""], ["pageLayoutTemplate", ""], ["buttonRef", ""], ["anchorRef", ""], ["dynamicForm", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], ["class", "panel-heading", 4, "ngIf"], [1, "panel-body", 3, "ngClass"], ["wmMessage", "", "caption.bind", "statusMessage.caption", "type.bind", "statusMessage.type", 4, "ngIf"], [3, "ngClass"], [4, "ngTemplateOutlet"], [1, "basic-btn-grp", "form-action", "panel-footer", "clearfix", 3, "ngClass"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector", 4, "ngFor", "ngForOf"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], ["class", "app-icon panel-icon", "aria-hidden", "true", 3, "ngClass", 4, "ngIf"], [1, "heading", 3, "innerHTML"], [1, "description", 3, "innerHTML"], [1, "form-action", "panel-actions", "basic-btn-grp"], ["type", "button", "class", "app-icon wi panel-action", "title", "Collapse/Expand", 3, "ngClass", "click", 4, "ngIf"], ["aria-hidden", "true", 1, "app-icon", "panel-icon", 3, "ngClass"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", "ngTemplateOutletInjector"], ["type", "button", "title", "Collapse/Expand", 1, "app-icon", "wi", "panel-action", 3, "click", "ngClass"], ["wmMessage", "", "caption.bind", "statusMessage.caption", "type.bind", "statusMessage.type"], ["wmButton", "", "caption.bind", "btn.displayName", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "show.bind", "btn.show", "type.bind", "btn.type", "hint.bind", "btn.title", "shortcutkey.bind", "btn.shortcutkey", "disabled.bind", "ngform.status === 'PENDING' || btn.disabled", "tabindex.bind", "btn.tabindex", 3, "click", "name"], ["wmAnchor", "", "caption.bind", "btn.displayName", "class.bind", "btn.class", "iconclass.bind", "btn.iconclass", "show.bind", "btn.show", "hint.bind", "btn.title", "shortcutkey.bind", "btn.shortcutkey", "hyperlink.bind", "btn.hyperlink", "target.bind", "btn.target", "tabindex.bind", "btn.tabindex", 3, "click", "name"]], template: function FormComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵtemplate(0, FormComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(2, FormComponent_ng_container_2_Template, 1, 0, "ng-container", 1);
-            i0.ɵɵtemplate(3, FormComponent_ng_template_3_Template, 8, 23, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(5, FormComponent_ng_template_5_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(7, FormComponent_ng_template_7_Template, 1, 4, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵtemplate(9, FormComponent_ng_template_9_Template, 1, 3, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementContainer(11, null, 6);
+            i0.ɵɵtemplate(0, FormComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, FormComponent_ng_container_2_Template, 1, 0, "ng-container", 6)(3, FormComponent_ng_template_3_Template, 8, 23, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(5, FormComponent_ng_template_5_Template, 1, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(7, FormComponent_ng_template_7_Template, 1, 4, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor)(9, FormComponent_ng_template_9_Template, 1, 3, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementContainer(11, null, 5);
         } if (rf & 2) {
-            const _r3 = i0.ɵɵreference(4);
-            const _r5 = i0.ɵɵreference(6);
+            const defaultTemplate_r14 = i0.ɵɵreference(4);
+            const pageLayoutTemplate_r15 = i0.ɵɵreference(6);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.formlayout === "page")("ngIfThen", _r5)("ngIfElse", _r3);
+            i0.ɵɵproperty("ngIf", ctx.formlayout === "page")("ngIfThen", pageLayoutTemplate_r15)("ngIfElse", defaultTemplate_r14);
         } }, dependencies: [i6.AnchorComponent, i7.NgClass, i7.NgForOf, i7.NgIf, i7.NgTemplateOutlet, i8.ButtonComponent, i5.MessageComponent, i5.FilterPipe], encapsulation: 2 }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormComponent, [{
         type: Component,
         args: [{ selector: 'form[wmForm]', providers: [
                     provideAsWidgetRef(FormComponent)
-                ], template: "<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-container *ngIf=\"formlayout === 'page'; then pageLayoutTemplate else defaultTemplate\">\n</ng-container>\n\n<ng-template #defaultTemplate>\n    <div class=\"panel-heading\" *ngIf=\"!isLayoutDialog && (title || subheading || iconclass || showButtons('header'))\">\n        <h3 class=\"panel-title\">\n            <div class=\"pull-left\">\n                <i class=\"app-icon panel-icon\" aria-hidden=\"true\" [ngClass]=\"iconclass\" *ngIf=\"iconclass\"></i>\n            </div>\n            <div class=\"pull-left\">\n                <div class=\"heading\" [innerHTML]=\"title\"></div>\n                <div class=\"description\" [innerHTML]=\"subheading\"></div>\n            </div>\n            <div class=\"form-action panel-actions basic-btn-grp\">\n                <ng-container *ngFor=\"let btn of buttonArray | filter : 'position' : 'header'\"\n                              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\" [ngTemplateOutletContext]=\"{btn:btn}\">\n                </ng-container>\n                <button type=\"button\" class=\"app-icon wi panel-action\" *ngIf=\"collapsible\" title=\"Collapse/Expand\"\n                        [ngClass]=\"expanded ? 'wi-minus': 'wi-plus'\" (click)=\"expandCollapsePanel();\"></button>\n            </div>\n        </h3>\n    </div>\n    <div class=\"panel-body\" [ngClass]=\"{'form-elements': isLayoutDialog, 'form-body': !isLayoutDialog}\" [class.hidden]=\"!expanded\">\n        <p wmMessage *ngIf=\"!!statusMessage.caption\" [attr.aria-hidden]=\"!statusMessage.caption\" [attr.aria-label]=\"statusMessage.caption\" caption.bind=\"statusMessage.caption\" type.bind=\"statusMessage.type\"></p>\n        <div [ngClass]=\"{'form-elements': !isLayoutDialog, 'form-content': isLayoutDialog}\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n        <div class=\"basic-btn-grp form-action panel-footer clearfix\" [ngClass]=\"{'modal-footer': isLayoutDialog}\" [class.hidden]=\"!expanded || !showButtons('footer')\">\n            <ng-container *ngFor=\"let btn of buttonArray | filter : 'position' : 'footer'\"\n                          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\" [ngTemplateOutletContext]=\"{btn:btn}\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #pageLayoutTemplate>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-template>\n\n<ng-template #buttonRef let-btn=\"btn\">\n    <button  wmButton name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n             (click)=\"invokeActionEvent($event, btn.action)\" type.bind=\"btn.type\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\" disabled.bind=\"ngform.status === 'PENDING' || btn.disabled\"\n             tabindex.bind=\"btn.tabindex\" [attr.aria-label]=\"btn.displayName\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n    <a wmAnchor name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n             (click)=\"invokeActionEvent($event, btn.action)\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\"\n             hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\"\n             tabindex.bind=\"btn.tabindex\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></a>\n</ng-template>\n\n<ng-container #dynamicForm></ng-container>\n" }]
-    }], function () { return [{ type: i0.Injector }, { type: i1.FormBuilder }, { type: i1$1.App }, { type: i1$1.AbstractDialogService }, { type: i1$1.DynamicComponentRefProvider }, { type: i0.NgZone }, { type: i3.ListComponent, decorators: [{
+                ], template: "<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-container *ngIf=\"formlayout === 'page'; then pageLayoutTemplate else defaultTemplate\">\n</ng-container>\n\n<ng-template #defaultTemplate>\n    <div class=\"panel-heading\" *ngIf=\"!isLayoutDialog && (title || subheading || iconclass || showButtons('header'))\">\n        <h3 class=\"panel-title\">\n            <div class=\"pull-left\">\n                <i class=\"app-icon panel-icon\" aria-hidden=\"true\" [ngClass]=\"iconclass\" *ngIf=\"iconclass\"></i>\n            </div>\n            <div class=\"pull-left\">\n                <div class=\"heading\" [innerHTML]=\"title\"></div>\n                <div class=\"description\" [innerHTML]=\"subheading\"></div>\n            </div>\n            <div class=\"form-action panel-actions basic-btn-grp\">\n                <ng-container *ngFor=\"let btn of buttonArray | filter : 'position' : 'header'; let index = index\"\n                              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n                              [ngTemplateOutletContext]=\"{btn:btn}\"\n                              [ngTemplateOutletInjector]=\"createCustomInjector('action_header_' + index, {btn:btn})\">\n                </ng-container>\n                <button type=\"button\" class=\"app-icon wi panel-action\" *ngIf=\"collapsible\" title=\"Collapse/Expand\"\n                        [ngClass]=\"expanded ? 'wi-minus': 'wi-plus'\" (click)=\"expandCollapsePanel();\"></button>\n            </div>\n        </h3>\n    </div>\n    <div class=\"panel-body\" [ngClass]=\"{'form-elements': isLayoutDialog, 'form-body': !isLayoutDialog}\" [class.hidden]=\"!expanded\">\n        <p wmMessage *ngIf=\"!!statusMessage.caption\" [attr.aria-hidden]=\"!statusMessage.caption\" [attr.aria-label]=\"statusMessage.caption\" caption.bind=\"statusMessage.caption\" type.bind=\"statusMessage.type\"></p>\n        <div [ngClass]=\"{'form-elements': !isLayoutDialog, 'form-content': isLayoutDialog}\">\n            <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n        <div class=\"basic-btn-grp form-action panel-footer clearfix\" [ngClass]=\"{'modal-footer': isLayoutDialog}\" [class.hidden]=\"!expanded || !showButtons('footer')\">\n            <ng-container *ngFor=\"let btn of buttonArray | filter : 'position' : 'footer'; let index = index\"\n                          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n                          [ngTemplateOutletContext]=\"{btn:btn}\"\n                          [ngTemplateOutletInjector]=\"createCustomInjector('action_footer_' + index, {btn:btn})\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #pageLayoutTemplate>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-template>\n\n<ng-template #buttonRef let-btn=\"btn\">\n    <button  wmButton name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n             (click)=\"invokeActionEvent($event, btn.action)\" type.bind=\"btn.type\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\" disabled.bind=\"ngform.status === 'PENDING' || btn.disabled\"\n             tabindex.bind=\"btn.tabindex\" [attr.aria-label]=\"btn.displayName\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></button>\n</ng-template>\n\n<ng-template #anchorRef let-btn=\"btn\">\n    <a wmAnchor name=\"{{btn.key}}\" caption.bind=\"btn.displayName\" class.bind=\"btn.class\" iconclass.bind=\"btn.iconclass\" show.bind=\"btn.show\"\n             (click)=\"invokeActionEvent($event, btn.action)\" hint.bind=\"btn.title\" shortcutkey.bind=\"btn.shortcutkey\"\n             hyperlink.bind=\"btn.hyperlink\" target.bind=\"btn.target\"\n             tabindex.bind=\"btn.tabindex\" [class.hidden]=\"btn.updateMode ? !isUpdateMode : isUpdateMode\"></a>\n</ng-template>\n\n<ng-container #dynamicForm></ng-container>\n" }]
+    }], () => [{ type: i0.Injector }, { type: i1.FormBuilder }, { type: i1$1.App }, { type: i1$1.AbstractDialogService }, { type: i1$1.DynamicComponentRefProvider }, { type: i0.NgZone }, { type: i3.ListComponent, decorators: [{
                 type: Optional
             }] }, { type: FormComponent, decorators: [{
                 type: SkipSelf
@@ -1404,7 +1401,12 @@ class FormComponent extends StylableComponent {
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['name']
-            }] }]; }, { dynamicFormRef: [{
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { dynamicFormRef: [{
             type: ViewChild,
             args: ['dynamicForm', { static: true, read: ViewContainerRef }]
         }], messageRef: [{
@@ -1426,6 +1428,7 @@ class FormComponent extends StylableComponent {
             type: HostListener,
             args: ['keydown', ['$event']]
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormComponent, { className: "FormComponent", filePath: "form.component.ts", lineNumber: 145 }); })();
 
 class FormWidgetDirective {
     constructor(form, table, componentInstance, fb, name, key) {
@@ -1467,12 +1470,12 @@ class FormWidgetDirective {
     static { this.ɵfac = function FormWidgetDirective_Factory(t) { return new (t || FormWidgetDirective)(i0.ɵɵdirectiveInject(FormComponent, 8), i0.ɵɵdirectiveInject(TableComponent, 8), i0.ɵɵdirectiveInject(WidgetRef, 2), i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵinjectAttribute('name'), i0.ɵɵinjectAttribute('key')); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FormWidgetDirective, selectors: [["", "wmFormWidget", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormWidgetDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormWidgetDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmFormWidget]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Optional
             }, {
                 type: Inject,
@@ -1493,7 +1496,7 @@ class FormWidgetDirective {
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['key']
-            }] }]; }, null); })();
+            }] }], null); })();
 
 const registerProps$1 = () => {
     register('wm-form-action', new Map([
@@ -1522,8 +1525,8 @@ const registerProps$1 = () => {
 const WIDGET_CONFIG = { widgetType: 'wm-form-action', hostClass: '' };
 class FormActionDirective extends BaseComponent {
     static { this.initializeProps = registerProps$1(); }
-    constructor(inj, form) {
-        super(inj, WIDGET_CONFIG);
+    constructor(inj, form, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.form = form;
     }
     populateAction() {
@@ -1566,12 +1569,12 @@ class FormActionDirective extends BaseComponent {
                 break;
         }
     }
-    static { this.ɵfac = function FormActionDirective_Factory(t) { return new (t || FormActionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(FormComponent, 8)); }; }
+    static { this.ɵfac = function FormActionDirective_Factory(t) { return new (t || FormActionDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(FormComponent, 8), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FormActionDirective, selectors: [["", "wmFormAction", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(FormActionDirective)
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormActionDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormActionDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmFormAction]',
@@ -1579,9 +1582,14 @@ class FormActionDirective extends BaseComponent {
                     provideAsWidgetRef(FormActionDirective)
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: FormComponent, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: FormComponent, decorators: [{
                 type: Optional
-            }] }]; }, null); })();
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], null); })();
 
 const registerProps = () => {
     const formFieldMap = new Map([
@@ -1652,14 +1660,14 @@ class FormFieldDirective extends StylableComponent {
     handleClick(event) {
         this._clicktriggeredByUser = true;
     }
-    constructor(inj, form, fb, viewport, app, parentList, bindChipclass, binddataset, binddisplayexpression, binddisplaylabel, _widgetType, name, binddisplayimagesrc, key, isRange, pcDisplay, mobileDisplay, tabletDisplay, contexts) {
+    constructor(inj, form, fb, viewport, app, parentList, bindChipclass, binddataset, binddisplayexpression, binddisplaylabel, _widgetType, name, binddisplayimagesrc, key, isRange, pcDisplay, mobileDisplay, tabletDisplay, contexts, explicitContext) {
         const WIDGET_CONFIG = {
             widgetType: 'wm-form-field',
             hostClass: '',
             widgetSubType: 'wm-form-field-' + (_widgetType || FormWidgetType.TEXT).trim()
         };
         let resolveFn = noop$1;
-        super(inj, WIDGET_CONFIG, new Promise(res => resolveFn = res));
+        super(inj, WIDGET_CONFIG, explicitContext, new Promise(res => resolveFn = res));
         this._initPropsRes = resolveFn;
         this.app = app;
         this.fieldDefConfig = {};
@@ -1927,6 +1935,7 @@ class FormFieldDirective extends StylableComponent {
                 // explicitly checking for input value or -webkit-autofill to see whether there are any autofilled fields - WMS-20141
                 const hasValue = ((isDefined(val) && val !== '' && val !== null) || captionEl.find('input').val()) || captionEl.find('input:-webkit-autofill').length;
                 this.app.notify('captionPositionAnimate', {
+                    isSelect: true,
                     displayVal: hasValue,
                     nativeEl: captionEl,
                     isSelectMultiple: this.formWidget && this.formWidget.multiple,
@@ -2103,7 +2112,7 @@ class FormFieldDirective extends StylableComponent {
             this.setReadOnlyState();
         });
     }
-    static { this.ɵfac = function FormFieldDirective_Factory(t) { return new (t || FormFieldDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(FormComponent), i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i1$1.Viewport), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject(i3.ListComponent, 8), i0.ɵɵinjectAttribute('chipclass.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('displayexpression.bind'), i0.ɵɵinjectAttribute('displaylabel.bind'), i0.ɵɵinjectAttribute('widgettype'), i0.ɵɵinjectAttribute('name'), i0.ɵɵinjectAttribute('displayimagesrc.bind'), i0.ɵɵinjectAttribute('key'), i0.ɵɵinjectAttribute('is-range'), i0.ɵɵinjectAttribute('pc-display'), i0.ɵɵinjectAttribute('mobile-display'), i0.ɵɵinjectAttribute('tablet-display'), i0.ɵɵdirectiveInject(Context, 2)); }; }
+    static { this.ɵfac = function FormFieldDirective_Factory(t) { return new (t || FormFieldDirective)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(FormComponent), i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i1$1.Viewport), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject(i3.ListComponent, 8), i0.ɵɵinjectAttribute('chipclass.bind'), i0.ɵɵinjectAttribute('dataset.bind'), i0.ɵɵinjectAttribute('displayexpression.bind'), i0.ɵɵinjectAttribute('displaylabel.bind'), i0.ɵɵinjectAttribute('widgettype'), i0.ɵɵinjectAttribute('name'), i0.ɵɵinjectAttribute('displayimagesrc.bind'), i0.ɵɵinjectAttribute('key'), i0.ɵɵinjectAttribute('is-range'), i0.ɵɵinjectAttribute('pc-display'), i0.ɵɵinjectAttribute('mobile-display'), i0.ɵɵinjectAttribute('tablet-display'), i0.ɵɵdirectiveInject(Context, 2), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FormFieldDirective, selectors: [["", "wmFormField", ""]], contentQueries: function FormFieldDirective_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, _c0, 7);
             i0.ɵɵcontentQuery(dirIndex, _c1, 5);
@@ -2119,7 +2128,7 @@ class FormFieldDirective extends StylableComponent {
                 { provide: Context, useFactory: () => { return {}; }, multi: true }
             ]), i0.ɵɵInheritDefinitionFeature] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmFormField]',
@@ -2130,7 +2139,7 @@ class FormFieldDirective extends StylableComponent {
                     { provide: Context, useFactory: () => { return {}; }, multi: true }
                 ]
             }]
-    }], function () { return [{ type: i0.Injector }, { type: FormComponent }, { type: i1.FormBuilder }, { type: i1$1.Viewport }, { type: i1$1.App }, { type: i3.ListComponent, decorators: [{
+    }], () => [{ type: i0.Injector }, { type: FormComponent }, { type: i1.FormBuilder }, { type: i1$1.Viewport }, { type: i1$1.App }, { type: i3.ListComponent, decorators: [{
                 type: Optional
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
@@ -2173,7 +2182,12 @@ class FormFieldDirective extends StylableComponent {
             }, {
                 type: Inject,
                 args: [Context]
-            }] }]; }, { formWidget: [{
+            }] }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { formWidget: [{
             type: ContentChild,
             args: ['formWidget', { static: true }]
         }], formWidgetMax: [{
@@ -2335,17 +2349,17 @@ class LiveActionsDirective {
     static { this.ɵfac = function LiveActionsDirective_Factory(t) { return new (t || LiveActionsDirective)(i0.ɵɵdirectiveInject(ListComponent, 2), i0.ɵɵdirectiveInject(i1$1.App), i0.ɵɵdirectiveInject(i1$1.AbstractDialogService)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LiveActionsDirective, selectors: [["", "wmLiveActions", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LiveActionsDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LiveActionsDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmLiveActions]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Self
             }, {
                 type: Inject,
                 args: [ListComponent]
-            }] }, { type: i1$1.App }, { type: i1$1.AbstractDialogService }]; }, null); })();
+            }] }, { type: i1$1.App }, { type: i1$1.AbstractDialogService }], null); })();
 
 class DependsonDirective {
     constructor(dialogId, dependson, dialogService, app) {
@@ -2480,18 +2494,18 @@ class DependsonDirective {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.formChildren = _t);
         } } }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DependsonDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DependsonDirective, [{
         type: Directive,
         args: [{
                 selector: '[dependson]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Attribute,
                 args: ['dialogid']
             }] }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['dependson']
-            }] }, { type: i1$1.AbstractDialogService }, { type: i1$1.App }]; }, { formChildren: [{
+            }] }, { type: i1$1.AbstractDialogService }, { type: i1$1.App }], { formChildren: [{
             type: ContentChildren,
             args: [FormComponent, { descendants: true }]
         }] }); })();
@@ -2776,7 +2790,7 @@ class LiveFilterDirective {
             orderBy: orderBy,
             page: page,
             pagesize: this.form.pagesize || 20,
-            skipDataSetUpdate: true,
+            skipDataSetUpdate: true, // dont update the actual variable dataset,
             inFlightBehavior: 'executeAll'
         }).then(response => {
             const data = response.data;
@@ -2820,17 +2834,17 @@ class LiveFilterDirective {
     static { this.ɵfac = function LiveFilterDirective_Factory(t) { return new (t || LiveFilterDirective)(i0.ɵɵdirectiveInject(FormComponent, 2)); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LiveFilterDirective, selectors: [["", "wmLiveFilter", ""]] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LiveFilterDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LiveFilterDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmLiveFilter]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Self
             }, {
                 type: Inject,
                 args: [FormComponent]
-            }] }]; }, null); })();
+            }] }], null); })();
 
 const isTimeType = field => field.widgettype === DataType.TIME || (field.type === DataType.TIME && !field.widgettype);
 const getValidTime = val => {
@@ -2853,10 +2867,8 @@ class LiveFormDirective {
             this.savePrevDataValues();
         }, 250);
         // If parent live table is present and this form is first child of live table, set this form instance on livetable
-        if (liveTable) {
-            if (!this.form.parentForm) {
-                this.form._liveTableParent = liveTable;
-            }
+        if (liveTable && !this.form.parentForm) {
+            this.form._liveTableParent = liveTable;
             this.form.isLayoutDialog = liveTable.isLayoutDialog;
             liveTable.onFormReady(this.form);
         }
@@ -3299,12 +3311,12 @@ class LiveFormDirective {
             i0.ɵɵlistener("keydown", function LiveFormDirective_keydown_HostBindingHandler($event) { return ctx.onKeydownHandler($event); });
         } } }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LiveFormDirective, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LiveFormDirective, [{
         type: Directive,
         args: [{
                 selector: '[wmLiveForm]'
             }]
-    }], function () { return [{ type: undefined, decorators: [{
+    }], () => [{ type: undefined, decorators: [{
                 type: Self
             }, {
                 type: Inject,
@@ -3314,7 +3326,7 @@ class LiveFormDirective {
             }] }, { type: i5.ToDatePipe }, { type: i1$1.AbstractDialogService }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['formlayout']
-            }] }]; }, { onKeydownHandler: [{
+            }] }], { onKeydownHandler: [{
             type: HostListener,
             args: ['keydown', ['$event']]
         }] }); })();
@@ -3338,7 +3350,7 @@ class FormModule {
             InputModule,
             WmComponentsModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormModule, [{
         type: NgModule,
         args: [{
                 imports: [