@wavemaker/app-ng-runtime 11.8.0-next.141688 → 11.8.0-next.141689

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

@@ -40,15 +40,15 @@ const registerProps$e = () => {
 
 const _c0$c = ["wmButton", ""];
 const _c1$b = [[["", 8, "caret"]]];
-const _c2$5 = [".caret"];
-const _c3$2 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
+const _c2$8 = [".caret"];
+const _c3$3 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
 const _c4$2 = (a0, a1, a2, a3) => ({ width: a0, height: a1, margin: a2, fontSize: a3 });
 function ButtonComponent_img_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 5);
     i0.ɵɵpipe(1, "image");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c3$2, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
+    i0.ɵɵproperty("src", i0.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", i0.ɵɵpureFunction3(4, _c3$3, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
 } }
 function ButtonComponent_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 6);
@@ -90,7 +90,7 @@ class ButtonComponent extends StylableComponent {
             i0.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
         } }, exportAs: ["wmButton"], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(ButtonComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c2$5, 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.ɵɵInheritDefinitionFeature], attrs: _c0$c, ngContentSelectors: _c2$8, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "button image", "class", "button-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "btn-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "button image", 1, "button-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function ButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c1$b);
             i0.ɵɵtemplate(0, ButtonComponent_img_0_Template, 2, 8, "img", 0)(1, ButtonComponent_i_1_Template, 1, 9, "i", 1)(2, ButtonComponent_span_2_Template, 2, 2, "span", 2);
             i0.ɵɵelement(3, "span", 3);
@@ -385,7 +385,8 @@ const registerProps$c = () => {
 
 const _c0$b = ["checkbox"];
 const _c1$a = ["wmCheckbox", ""];
-const _c2$4 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
+const _c2$7 = (a0, a1, a2) => ({ "unchecked": a0, "disabled": a1, "required": a2 });
+const _c3$2 = () => ({ standalone: true });
 const DEFAULT_CLS$4 = 'app-checkbox checkbox';
 const WIDGET_CONFIG$c = {
     widgetType: 'wm-checkbox',
@@ -495,7 +496,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
                 provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(CheckboxComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(CheckboxComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 17, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$a, decls: 6, vars: 19, consts: [["checkbox", ""], [3, "ngClass"], ["type", "checkbox", "role", "checkbox", "focus-target", "", 3, "ngModelChange", "blur", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "tabindex"], [1, "caption", 3, "innerHtml"], ["alt", "Checkbox Image", "aria-hidden", "true", "src", "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==", 1, "switch"], ["type", "hidden", "aria-hidden", "true", "tabindex", "-1", 1, "ng-hide", "model-holder", 3, "disabled", "value"]], template: function CheckboxComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "label", 1)(1, "input", 2, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function CheckboxComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.proxyModel, $event) || (ctx.proxyModel = $event); return i0.ɵɵresetView($event); });
@@ -505,10 +506,10 @@ class CheckboxComponent extends BaseFormCustomComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵelement(5, "input", 5);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(13, _c2$4, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction3(14, _c2$7, !ctx.proxyModel, ctx.disabled || ctx.readonly, ctx.required && ctx._caption));
             i0.ɵɵadvance();
             i0.ɵɵtwoWayProperty("ngModel", ctx.proxyModel);
-            i0.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c3$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled || ctx.readonly)("tabindex", ctx.tabindex);
             i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-checked", !!ctx.proxyModel)("accesskey", ctx.shortcutkey);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("innerHtml", ctx._caption, i0.ɵɵsanitizeHtml);
@@ -522,7 +523,7 @@ class CheckboxComponent extends BaseFormCustomComponent {
                     provideAs(CheckboxComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(CheckboxComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(CheckboxComponent)
-                ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
+                ], template: "<label [ngClass]=\"{'unchecked': !proxyModel, 'disabled': (disabled || readonly), 'required': (required && _caption)}\">\n    <input type=\"checkbox\"\n           role=\"checkbox\"\n           #checkbox\n           [attr.name]=\"name\"\n           [attr.aria-label]=\"hint\"\n           [attr.aria-checked]=\"!!proxyModel\"\n           focus-target\n           [(ngModel)]=\"proxyModel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [disabled]=\"disabled || readonly\"\n           [attr.accesskey]=\"shortcutkey\"\n           [tabindex]=\"tabindex\"\n           (blur)=\"invokeOnTouched($event)\"\n           (ngModelChange)=\"handleChange($event)\">\n    <span class=\"caption\" [innerHtml]=\"_caption\"></span>\n    <img alt=\"Checkbox Image\" aria-hidden=\"true\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"switch\"/>\n</label>\n<input type=\"hidden\" class=\"ng-hide model-holder\" aria-hidden=\"true\" tabindex=\"-1\" [disabled]=\"disabled\" [value]=\"proxyModel\">\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Attribute,
                 args: ['checkedvalue']
@@ -882,7 +883,7 @@ const registerProps$b = () => {
 
 const _c0$a = ["wmCheckboxset", ""];
 const _c1$9 = (a0, a1) => ["checkbox", "app-checkbox", a0, a1];
-const _c2$3 = a0 => ({ "disabled": a0 });
+const _c2$6 = a0 => ({ "disabled": a0 });
 const _c3$1 = a0 => ({ "collapsible-content": a0 });
 const _c4$1 = (a0, a1) => ["checkbox", "app-checkbox", "group-list-item", a0, a1];
 function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
@@ -894,7 +895,7 @@ function CheckboxsetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if
     const item_r2 = ctx_r3.$implicit;
     const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r2.label);
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
     i0.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
@@ -910,7 +911,7 @@ function CheckboxsetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if
     const item_r2 = ctx_r3.$implicit;
     const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r2.key)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
     i0.ɵɵattribute("aria-label", item_r2.key)("aria-checked", item_r2.selected)("data-attr-index", i_r5);
@@ -961,7 +962,7 @@ function CheckboxsetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx)
     const item_r9 = ctx_r9.$implicit;
     const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$3, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$6, ctx_r2.disabled || ctx_r2.readonly))("title", item_r9.label);
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
     i0.ɵɵattribute("data-attr-index", i_r11);
@@ -977,7 +978,7 @@ function CheckboxsetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx)
     const item_r9 = ctx_r9.$implicit;
     const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$3, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$6, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "checkboxset_" + ctx_r2.widgetId)("tabindex", ctx_r2.tabindex)("disabled", ctx_r2.disabled || ctx_r2.readonly)("value", item_r9.key)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
     i0.ɵɵattribute("data-attr-index", i_r11);
@@ -1307,7 +1308,8 @@ class BaseInput extends BaseFormCustomComponent {
         // possible values for ngModelOptions are 'blur' and 'change'
         // default is 'blur'
         this.ngModelOptions = {
-            updateOn: ''
+            updateOn: '',
+            standalone: true
         };
         let updateOn = this.nativeElement.getAttribute('updateon') || 'blur';
         updateOn = updateOn === 'default' ? 'change' : updateOn;
@@ -1861,7 +1863,7 @@ const registerProps$8 = () => {
 
 const _c0$8 = ["wmRadioset", ""];
 const _c1$7 = (a0, a1) => ["radio", "app-radio", a0, a1];
-const _c2$2 = a0 => ({ "disabled": a0 });
+const _c2$5 = a0 => ({ "disabled": a0 });
 const _c3 = a0 => ({ "collapsible-content": a0 });
 const _c4 = (a0, a1) => ["radio", "app-radio", "group-list-item", a0, a1];
 function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf & 1) {
@@ -1873,7 +1875,7 @@ function RadiosetComponent_ng_template_0_li_0_label_1_Template(rf, ctx) { if (rf
     const item_r2 = ctx_r3.$implicit;
     const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
     i0.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
@@ -1889,7 +1891,7 @@ function RadiosetComponent_ng_template_0_li_0_label_2_Template(rf, ctx) { if (rf
     const item_r2 = ctx_r3.$implicit;
     const i_r5 = ctx_r3.index;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r2.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r2.selected);
     i0.ɵɵattribute("aria-checked", item_r2.selected)("data-attr-index", i_r5)("aria-label", item_r2.key);
@@ -1940,7 +1942,7 @@ function RadiosetComponent_ng_template_3_li_0_li_8_label_1_Template(rf, ctx) { i
     const item_r9 = ctx_r9.$implicit;
     const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
     i0.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
@@ -1956,7 +1958,7 @@ function RadiosetComponent_ng_template_3_li_0_li_8_label_2_Template(rf, ctx) { i
     const item_r9 = ctx_r9.$implicit;
     const i_r11 = ctx_r9.index;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$2, ctx_r2.disabled || ctx_r2.readonly));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$5, ctx_r2.disabled || ctx_r2.readonly));
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", "radioset_" + ctx_r2.widgetId)("value", item_r9.key)("disabled", ctx_r2.disabled || ctx_r2.readonly)("tabindex", ctx_r2.tabindex)("checked", item_r9.selected);
     i0.ɵɵattribute("aria-checked", item_r9.selected)("data-attr-index", i_r11);
@@ -2124,6 +2126,7 @@ const registerProps$7 = () => {
 
 const _c0$7 = ["select"];
 const _c1$6 = a0 => ["app-select form-control", a0];
+const _c2$4 = () => ({ standalone: true });
 function SelectComponent_ng_container_3_optgroup_1_option_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "option", 7);
 } if (rf & 2) {
@@ -2273,7 +2276,7 @@ class SelectComponent extends DatasetAwareFormComponent {
                 provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(SelectComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(SelectComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 16, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 18, consts: [["select", ""], ["role", "listbox", "aria-haspopup", "true", "aria-expanded", "false", "focus-target", "", 3, "ngModelChange", "change", "focus", "blur", "ngClass", "disabled", "required", "tabindex", "ngModel", "ngModelOptions", "multiple", "autofocus"], ["selected", "", "value", "undefined", "id", "placeholderOption", 3, "textContent", "hidden"], [4, "ngIf"], [3, "label", 4, "ngFor", "ngForOf"], [3, "label"], ["role", "option", 3, "value", "selected", "textContent", 4, "ngFor", "ngForOf"], ["role", "option", 3, "value", "selected", "textContent"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "select", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function SelectComponent_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.modelByKey, $event) || (ctx.modelByKey = $event); return i0.ɵɵresetView($event); });
@@ -2282,9 +2285,9 @@ class SelectComponent extends DatasetAwareFormComponent {
             i0.ɵɵtemplate(3, SelectComponent_ng_container_3_Template, 2, 1, "ng-container", 3)(4, SelectComponent_ng_container_4_Template, 2, 1, "ng-container", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c1$6, ctx.class))("disabled", ctx.disabled)("required", ctx.required)("tabindex", ctx.tabindex);
             i0.ɵɵtwoWayProperty("ngModel", ctx.modelByKey);
-            i0.ɵɵproperty("multiple", ctx.multiple)("autofocus", ctx.autofocus);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(17, _c2$4))("multiple", ctx.multiple)("autofocus", ctx.autofocus);
             i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.hint)("aria-multiselectable", ctx.multiple);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("textContent", ctx.placeholder)("hidden", !ctx.placeholder);
@@ -2300,7 +2303,7 @@ class SelectComponent extends DatasetAwareFormComponent {
                     provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(SelectComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(SelectComponent)
-                ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\">\n\n        <option selected\n                value=\"undefined\"\n                [textContent]=\"placeholder\"\n                id=\"placeholderOption\"\n                [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
+                ], template: "<select role=\"listbox\" aria-haspopup=\"true\" aria-expanded=\"false\" #select\n        focus-target\n        [ngClass]=\"['app-select form-control', class]\"\n        [disabled]=\"disabled\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        [(ngModel)]=\"modelByKey\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [multiple]=\"multiple\"\n        (change)=\"onSelectValueChange($event)\"\n        (focus)=\"checkForFloatingLabel($event)\"\n        (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"hint\"\n        [attr.aria-multiselectable]=\"multiple\"\n        [autofocus]=\"autofocus\">\n\n        <option selected\n                value=\"undefined\"\n                [textContent]=\"placeholder\"\n                id=\"placeholderOption\"\n                [hidden]=\"!placeholder\"></option>\n\n    <ng-container *ngIf=\"groupby\">\n        <optgroup *ngFor=\"let groupObj of groupedData\"\n            [label]=\"groupObj.key\">\n            <option *ngFor=\"let item of groupObj.data;\"\n                [value]=\"item.key\"\n                [selected]=\"item.selected\"\n                [textContent]=\"item.label\"\n                role=\"option\"></option>\n        </optgroup>\n    </ng-container>\n\n    <ng-container *ngIf=\"!groupby\">\n        <option *ngFor=\"let item of datasetItems\"\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n            role=\"option\"></option>\n    </ng-container>\n</select>\n" }]
     }], () => [{ type: i0.Injector }, { type: i1$1.App }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2338,13 +2341,13 @@ const registerProps$6 = () => {
 
 const _c0$6 = ["wmSwitch", ""];
 const _c1$5 = (a0, a1) => ({ "selected": a0, "disabled": a1 });
-const _c2$1 = a0 => ["app-icon", a0];
+const _c2$3 = a0 => ["app-icon", a0];
 function SwitchComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 8);
 } if (rf & 2) {
     const opt_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c2$1, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c2$3, opt_r3.dataObject[ctx_r4.iconclass] || opt_r3["icon"]));
 } }
 function SwitchComponent_a_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -2546,6 +2549,7 @@ const registerProps$5 = () => {
 
 const _c0$5 = ["input"];
 const _c1$4 = ["type", "date"];
+const _c2$2 = () => ({ standalone: true });
 const WIDGET_CONFIG$5 = {
     widgetType: 'wm-input-calendar',
     hostClass: 'app-input-wrapper'
@@ -2567,7 +2571,7 @@ class InputCalendarComponent extends BaseInput {
                 provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputCalendarComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 17, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$4, decls: 2, vars: 19, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "min", "max", "step", "autofocus", "autocomplete", "ngClass", "ngStyle"]], template: function InputCalendarComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputCalendarComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2576,7 +2580,7 @@ class InputCalendarComponent extends BaseInput {
         } if (rf & 2) {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-            i0.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(18, _c2$2))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("min", ctx.minvalue)("max", ctx.maxvalue)("step", ctx.step)("autofocus", ctx.autofocus)("autocomplete", ctx.autocomplete ? "on" : "off")("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
             i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint || ctx.type + " field");
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
@@ -2586,7 +2590,7 @@ class InputCalendarComponent extends BaseInput {
                     provideAs(InputCalendarComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputCalendarComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputCalendarComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       role=\"textbox\"\n       [type]=\"type\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [min]=\"minvalue\"\n       [max]=\"maxvalue\"\n       [step]=\"step\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint || type + ' field'\"\n       [autofocus]=\"autofocus\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       [autocomplete]=\"autocomplete ? 'on' : 'off'\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -2628,6 +2632,7 @@ const registerProps$4 = () => {
 
 const _c0$4 = ["input"];
 const _c1$3 = ["type", "color"];
+const _c2$1 = () => ({ standalone: true });
 const WIDGET_CONFIG$4 = {
     widgetType: 'wm-input-color',
     hostClass: 'app-input-wrapper'
@@ -2649,7 +2654,7 @@ class InputColorComponent extends BaseInput {
                 provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                 provideAs(InputColorComponent, NG_VALIDATORS, true),
                 provideAsWidgetRef(InputColorComponent)
-            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 14, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c1$3, decls: 2, vars: 16, consts: [["input", ""], ["focus-target", "", "role", "textbox", 1, "form-control", "app-textbox", 3, "ngModelChange", "blur", "type", "ngModel", "ngModelOptions", "readonly", "required", "disabled", "maxlength", "autofocus", "ngClass", "ngStyle"]], template: function InputColorComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "input", 1, 0);
             i0.ɵɵtwoWayListener("ngModelChange", function InputColorComponent_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.datavalue, $event) || (ctx.datavalue = $event); return i0.ɵɵresetView($event); });
@@ -2658,7 +2663,7 @@ class InputColorComponent extends BaseInput {
         } if (rf & 2) {
             i0.ɵɵproperty("type", ctx.type);
             i0.ɵɵtwoWayProperty("ngModel", ctx.datavalue);
-            i0.ɵɵproperty("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
+            i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(15, _c2$1))("readonly", ctx.readonly)("required", ctx.required)("disabled", ctx.disabled)("maxlength", ctx.maxchars)("autofocus", ctx.autofocus)("ngClass", ctx.conditionalclass)("ngStyle", ctx.conditionalstyle);
             i0.ɵɵattribute("name", ctx.name)("tabindex", ctx.tabindex)("placeholder", ctx.placeholder)("accesskey", ctx.shortcutkey)("aria-label", ctx.hint);
         } }, dependencies: [i1.NgClass, i1.NgStyle, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.RequiredValidator, i2$1.MaxLengthValidator, i2$1.NgModel], encapsulation: 2 }); }
 }
@@ -2668,7 +2673,7 @@ class InputColorComponent extends BaseInput {
                     provideAs(InputColorComponent, NG_VALUE_ACCESSOR, true),
                     provideAs(InputColorComponent, NG_VALIDATORS, true),
                     provideAsWidgetRef(InputColorComponent)
-                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
+                ], template: "<input class=\"form-control app-textbox\"\n       focus-target\n       [type]=\"type\"\n       role=\"textbox\"\n       [attr.name]=\"name\"\n       [(ngModel)]=\"datavalue\"\n       [ngModelOptions]=\"{standalone: true}\"\n       [readonly]=\"readonly\"\n       [required]=\"required\"\n       [disabled]=\"disabled\"\n       [maxlength]=\"maxchars\"\n       [attr.tabindex]=\"tabindex\"\n       [attr.placeholder]=\"placeholder\"\n       [attr.accesskey]=\"shortcutkey\"\n       [attr.aria-label]=\"hint\"\n       [autofocus]=\"autofocus\"\n       [ngClass]=\"conditionalclass\"\n       [ngStyle]=\"conditionalstyle\"\n       (blur)=\"handleBlur($event)\"\n       (ngModelChange)=\"handleChange($event)\"\n       #input>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']