@wavemaker-ai/app-ng-runtime 1.0.0-rc.330 → 1.0.0-rc.334

package/components/data/form/bundles/index.umd.js

@@ -1274,12 +1274,12 @@
             this._debouncedSubmitForm = null;
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.EnvironmentInjector }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.DynamicComponentRefProvider }, { token: i0__namespace.NgZone }, { token: i3__namespace.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4__namespace.PrefabDirective, optional: true, skipSelf: true }, { token: i5__namespace.PartialDirective, optional: true, skipSelf: true }, { token: 'beforesubmit.event', attribute: true }, { token: 'submit.event', attribute: true }, { token: 'beforerender.event', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'formdata.bind', attribute: true }, { token: 'wmLiveForm', attribute: true }, { token: 'wmLiveFilter', attribute: true }, { token: 'data-role', attribute: true }, { token: 'key', attribute: true }, { token: 'name', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
-        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormComponent, isStandalone: true, selector: "form[wmForm]", host: { listeners: { "submit": "submit($event)", "reset": "onReset()", "keydown": "onKeydownHandler($event)" }, properties: { "action": "this.action" } }, providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: FormComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.EnvironmentInjector }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.DynamicComponentRefProvider }, { token: i0__namespace.NgZone }, { token: i3__namespace.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4__namespace.PrefabDirective, optional: true, skipSelf: true }, { token: i5__namespace.PartialDirective, optional: true, skipSelf: true }, { token: 'beforesubmit.event', attribute: true }, { token: 'submit.event', attribute: true }, { token: 'beforerender.event', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'formdata.bind', attribute: true }, { token: 'wmLiveForm', attribute: true }, { token: 'wmLiveFilter', attribute: true }, { token: 'data-role', attribute: true }, { token: 'key', attribute: true }, { token: 'name', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: FormComponent, isStandalone: true, selector: "form[wmForm]", host: { listeners: { "submit": "submit($event)", "reset": "onReset()", "keydown": "onKeydownHandler($event)" }, properties: { "action": "this.action" } }, providers: [
                 i5.provideAsWidgetRef(FormComponent)
             ], queries: [{ propertyName: "componentRefs", predicate: i5.WidgetRef, descendants: true }], viewQueries: [{ propertyName: "dynamicFormRef", first: true, predicate: ["dynamicForm"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "messageRef", first: true, predicate: i5.MessageComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #content><ng-content></ng-content></ng-template>\n\n@if (formlayout === 'page') {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  @if (!isLayoutDialog && (title || subheading || iconclass || iconurl || showButtons('header'))) {\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n          @if (iconclass || iconurl) {\n            <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Form icon\"></wm-app-icon>\n          }\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          @for (btn of buttonArray | filter : 'position' : 'header'; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('action_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (collapsible) {\n            <button type=\"button\" class=\"app-icon wi panel-action\" [title]=\"expanded? (appLocale?.LABEL_COLLAPSE||'Collapse'):(appLocale?.LABEL_EXPAND||'Expand')\"\n            [ngClass]=\"expanded ? 'wi-minus': 'wi-plus'\" (click)=\"expandCollapsePanel();\"></button>\n          }\n        </div>\n      </h3>\n    </div>\n  }\n  <div class=\"panel-body\" [ngClass]=\"{'form-elements': isLayoutDialog, 'form-body': !isLayoutDialog}\" [class.hidden]=\"!expanded\">\n    @if (!!statusMessage.caption) {\n      <p wmMessage [attr.aria-hidden]=\"!statusMessage.caption\" [attr.aria-label]=\"statusMessage.caption\" caption.bind=\"statusMessage.caption\" type.bind=\"statusMessage.type\"></p>\n    }\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      @for (btn of buttonArray | filter : 'position' : 'footer'; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('action_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  </div>\n}\n\n\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", dependencies: [{ kind: "ngmodule", type: i6.CommonModule }, { kind: "directive", type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: anchor.AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: button.ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "component", type: i5.MessageComponent, selector: "[wmMessage]", exportAs: ["wmMessage"] }, { kind: "component", type: i5.WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }, { kind: "pipe", type: i5.FilterPipe, name: "filter" }] }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: FormComponent, decorators: [{
                 type: i0.Component,
                 args: [{ standalone: true, imports: [i6.CommonModule, i5.FilterPipe, anchor.AnchorComponent, button.ButtonComponent, i5.MessageComponent, i5.WmAppIconComponent], selector: 'form[wmForm]', providers: [
                             i5.provideAsWidgetRef(FormComponent)
@@ -1400,10 +1400,10 @@
             this.parent = null;
             this.componentInstance = null;
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: table.TableComponent, optional: true }, { token: i5.WidgetRef, self: true }, { token: i1__namespace.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: table.TableComponent, optional: true }, { token: i5.WidgetRef, self: true }, { token: i1__namespace.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormWidgetDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: FormWidgetDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -1512,12 +1512,12 @@
             this.buttonDef = null;
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormActionDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: FormActionDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
                 i5.provideAsWidgetRef(FormActionDirective)
             ], usesInheritance: true, ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormActionDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: FormActionDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -2103,14 +2103,14 @@
             // Call parent ngOnDestroy (StylableComponent extends BaseComponent which has cleanup)
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormFieldDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.Viewport }, { token: i1$1__namespace.App }, { token: i3__namespace.ListComponent, optional: true }, { token: 'chipclass.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'displayexpression.bind', attribute: true }, { token: 'displaylabel.bind', attribute: true }, { token: 'widgettype', attribute: true }, { token: 'name', attribute: true }, { token: 'displayimagesrc.bind', attribute: true }, { token: 'key', attribute: true }, { token: 'is-range', attribute: true }, { token: 'pc-display', attribute: true }, { token: 'mobile-display', attribute: true }, { token: 'tablet-display', attribute: true }, { token: i5.Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: FormFieldDirective, deps: [{ token: i0__namespace.Injector }, { token: FormComponent }, { token: i1__namespace.FormBuilder }, { token: i1$1__namespace.Viewport }, { token: i1$1__namespace.App }, { token: i3__namespace.ListComponent, optional: true }, { token: 'chipclass.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'displayexpression.bind', attribute: true }, { token: 'displaylabel.bind', attribute: true }, { token: 'widgettype', attribute: true }, { token: 'name', attribute: true }, { token: 'displayimagesrc.bind', attribute: true }, { token: 'key', attribute: true }, { token: 'is-range', attribute: true }, { token: 'pc-display', attribute: true }, { token: 'mobile-display', attribute: true }, { token: 'tablet-display', attribute: true }, { token: i5.Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
                 i5.provideAsWidgetRef(FormFieldDirective),
                 i5.provideAs(FormFieldDirective, i1.NG_VALUE_ACCESSOR, true),
                 { provide: i5.Context, useFactory: () => { return {}; }, multi: true }
             ], queries: [{ propertyName: "formWidget", first: true, predicate: ["formWidget"], descendants: true, static: true }, { propertyName: "formWidgetMax", first: true, predicate: ["formWidgetMax"], descendants: true }], exportAs: ["wmFormField"], usesInheritance: true, ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: FormFieldDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: FormFieldDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -2335,10 +2335,10 @@
             this.app = null;
             this.dialogService = null;
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveActionsDirective, deps: [{ token: i3.ListComponent, self: true }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: LiveActionsDirective, deps: [{ token: i3.ListComponent, self: true }, { token: i1$1__namespace.App }, { token: i1$1__namespace.AbstractDialogService }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveActionsDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: LiveActionsDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -2476,10 +2476,10 @@
                 this.eventSubscription();
             }
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.App }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1__namespace.AbstractDialogService }, { token: i1$1__namespace.App }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: DependsonDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: DependsonDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -2828,10 +2828,10 @@
             this._options = null;
             this.orderBy = null;
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveFilterDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: LiveFilterDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -3311,10 +3311,10 @@
             // MEMORY LEAK FIX: Clear form reference
             this.form = null;
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2__namespace.LiveTableComponent, optional: true }, { token: i5__namespace.ToDatePipe }, { token: i1$1__namespace.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2__namespace.LiveTableComponent, optional: true }, { token: i5__namespace.ToDatePipe }, { token: i1$1__namespace.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0__namespace }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveFormDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: LiveFormDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,

package/components/data/form/fesm2022/index.mjs

@@ -1265,12 +1265,12 @@ class FormComponent extends StylableComponent {
         this._debouncedSubmitForm = null;
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormComponent, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: i1.FormBuilder }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }, { token: i1$1.DynamicComponentRefProvider }, { token: i0.NgZone }, { token: i3.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4.PrefabDirective, optional: true, skipSelf: true }, { token: i5.PartialDirective, optional: true, skipSelf: true }, { token: 'beforesubmit.event', attribute: true }, { token: 'submit.event', attribute: true }, { token: 'beforerender.event', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'formdata.bind', attribute: true }, { token: 'wmLiveForm', attribute: true }, { token: 'wmLiveFilter', attribute: true }, { token: 'data-role', attribute: true }, { token: 'key', attribute: true }, { token: 'name', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormComponent, isStandalone: true, selector: "form[wmForm]", host: { listeners: { "submit": "submit($event)", "reset": "onReset()", "keydown": "onKeydownHandler($event)" }, properties: { "action": "this.action" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FormComponent, deps: [{ token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: i1.FormBuilder }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }, { token: i1$1.DynamicComponentRefProvider }, { token: i0.NgZone }, { token: i3.ListComponent, optional: true }, { token: FormComponent, optional: true, skipSelf: true }, { token: i4.PrefabDirective, optional: true, skipSelf: true }, { token: i5.PartialDirective, optional: true, skipSelf: true }, { token: 'beforesubmit.event', attribute: true }, { token: 'submit.event', attribute: true }, { token: 'beforerender.event', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'formdata.bind', attribute: true }, { token: 'wmLiveForm', attribute: true }, { token: 'wmLiveFilter', attribute: true }, { token: 'data-role', attribute: true }, { token: 'key', attribute: true }, { token: 'name', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: FormComponent, isStandalone: true, selector: "form[wmForm]", host: { listeners: { "submit": "submit($event)", "reset": "onReset()", "keydown": "onKeydownHandler($event)" }, properties: { "action": "this.action" } }, providers: [
             provideAsWidgetRef(FormComponent)
         ], queries: [{ propertyName: "componentRefs", predicate: WidgetRef, descendants: true }], viewQueries: [{ propertyName: "dynamicFormRef", first: true, predicate: ["dynamicForm"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "messageRef", first: true, predicate: MessageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #content><ng-content></ng-content></ng-template>\n\n@if (formlayout === 'page') {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n  @if (!isLayoutDialog && (title || subheading || iconclass || iconurl || showButtons('header'))) {\n    <div class=\"panel-heading\">\n      <h3 class=\"panel-title\">\n        <div class=\"pull-left\">\n          @if (iconclass || iconurl) {\n            <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [iconClasses]=\"iconurl ? 'panel-image-icon' : 'panel-icon'\" alt=\"Form icon\"></wm-app-icon>\n          }\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          @for (btn of buttonArray | filter : 'position' : 'header'; track btn; let index = $index) {\n            <ng-container\n              [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n              [ngTemplateOutletContext]=\"{btn:btn}\"\n              [ngTemplateOutletInjector]=\"createCustomInjector('action_header_' + index, {btn:btn})\">\n            </ng-container>\n          }\n          @if (collapsible) {\n            <button type=\"button\" class=\"app-icon wi panel-action\" [title]=\"expanded? (appLocale?.LABEL_COLLAPSE||'Collapse'):(appLocale?.LABEL_EXPAND||'Expand')\"\n            [ngClass]=\"expanded ? 'wi-minus': 'wi-plus'\" (click)=\"expandCollapsePanel();\"></button>\n          }\n        </div>\n      </h3>\n    </div>\n  }\n  <div class=\"panel-body\" [ngClass]=\"{'form-elements': isLayoutDialog, 'form-body': !isLayoutDialog}\" [class.hidden]=\"!expanded\">\n    @if (!!statusMessage.caption) {\n      <p wmMessage [attr.aria-hidden]=\"!statusMessage.caption\" [attr.aria-label]=\"statusMessage.caption\" caption.bind=\"statusMessage.caption\" type.bind=\"statusMessage.type\"></p>\n    }\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      @for (btn of buttonArray | filter : 'position' : 'footer'; track btn; let index = $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"btn.widgetType === 'button' ? buttonRef : anchorRef\"\n          [ngTemplateOutletContext]=\"{btn:btn}\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('action_footer_' + index, {btn:btn})\">\n        </ng-container>\n      }\n    </div>\n  </div>\n}\n\n\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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AnchorComponent, selector: "a[wmAnchor]", exportAs: ["wmAnchor"] }, { kind: "component", type: ButtonComponent, selector: "button[wmButton]", exportAs: ["wmButton"] }, { kind: "component", type: MessageComponent, selector: "[wmMessage]", exportAs: ["wmMessage"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }, { kind: "pipe", type: FilterPipe, name: "filter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, FilterPipe, AnchorComponent, ButtonComponent, MessageComponent, WmAppIconComponent], selector: 'form[wmForm]', providers: [
                         provideAsWidgetRef(FormComponent)
@@ -1391,10 +1391,10 @@ class FormWidgetDirective {
         this.parent = null;
         this.componentInstance = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: TableComponent, optional: true }, { token: WidgetRef, self: true }, { token: i1.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FormWidgetDirective, deps: [{ token: FormComponent, optional: true }, { token: TableComponent, optional: true }, { token: WidgetRef, self: true }, { token: i1.FormBuilder }, { token: 'name', attribute: true }, { token: 'key', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: FormWidgetDirective, isStandalone: true, selector: "[wmFormWidget]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormWidgetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FormWidgetDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1503,12 +1503,12 @@ class FormActionDirective extends BaseComponent {
         this.buttonDef = null;
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormActionDirective, deps: [{ token: i0.Injector }, { token: FormComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FormActionDirective, deps: [{ token: i0.Injector }, { token: FormComponent, optional: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: FormActionDirective, isStandalone: true, selector: "[wmFormAction]", providers: [
             provideAsWidgetRef(FormActionDirective)
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FormActionDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2094,14 +2094,14 @@ class FormFieldDirective extends StylableComponent {
         // Call parent ngOnDestroy (StylableComponent extends BaseComponent which has cleanup)
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.Injector }, { token: FormComponent }, { token: i1.FormBuilder }, { token: i1$1.Viewport }, { token: i1$1.App }, { token: i3.ListComponent, optional: true }, { token: 'chipclass.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'displayexpression.bind', attribute: true }, { token: 'displaylabel.bind', attribute: true }, { token: 'widgettype', attribute: true }, { token: 'name', attribute: true }, { token: 'displayimagesrc.bind', attribute: true }, { token: 'key', attribute: true }, { token: 'is-range', attribute: true }, { token: 'pc-display', attribute: true }, { token: 'mobile-display', attribute: true }, { token: 'tablet-display', attribute: true }, { token: Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FormFieldDirective, deps: [{ token: i0.Injector }, { token: FormComponent }, { token: i1.FormBuilder }, { token: i1$1.Viewport }, { token: i1$1.App }, { token: i3.ListComponent, optional: true }, { token: 'chipclass.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'displayexpression.bind', attribute: true }, { token: 'displaylabel.bind', attribute: true }, { token: 'widgettype', attribute: true }, { token: 'name', attribute: true }, { token: 'displayimagesrc.bind', attribute: true }, { token: 'key', attribute: true }, { token: 'is-range', attribute: true }, { token: 'pc-display', attribute: true }, { token: 'mobile-display', attribute: true }, { token: 'tablet-display', attribute: true }, { token: Context, self: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: FormFieldDirective, isStandalone: true, selector: "[wmFormField]", host: { listeners: { "keydown": "onKeydownHandler($event)", "click": "handleClick($event)" } }, providers: [
             provideAsWidgetRef(FormFieldDirective),
             provideAs(FormFieldDirective, NG_VALUE_ACCESSOR, true),
             { provide: Context, useFactory: () => { return {}; }, multi: true }
         ], queries: [{ propertyName: "formWidget", first: true, predicate: ["formWidget"], descendants: true, static: true }, { propertyName: "formWidgetMax", first: true, predicate: ["formWidgetMax"], descendants: true }], exportAs: ["wmFormField"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FormFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2326,10 +2326,10 @@ class LiveActionsDirective {
         this.app = null;
         this.dialogService = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveActionsDirective, deps: [{ token: ListComponent, self: true }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: LiveActionsDirective, deps: [{ token: ListComponent, self: true }, { token: i1$1.App }, { token: i1$1.AbstractDialogService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: LiveActionsDirective, isStandalone: true, selector: "[wmLiveActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: LiveActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2467,10 +2467,10 @@ class DependsonDirective {
             this.eventSubscription();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1.AbstractDialogService }, { token: i1$1.App }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: DependsonDirective, deps: [{ token: 'dialogid', attribute: true }, { token: 'dependson', attribute: true }, { token: i1$1.AbstractDialogService }, { token: i1$1.App }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: DependsonDirective, isStandalone: true, selector: "[dependson]", queries: [{ propertyName: "formChildren", predicate: FormComponent, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DependsonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: DependsonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2820,10 +2820,10 @@ class LiveFilterDirective {
         this._options = null;
         this.orderBy = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: LiveFilterDirective, deps: [{ token: FormComponent, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: LiveFilterDirective, isStandalone: true, selector: "[wmLiveFilter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: LiveFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3303,10 +3303,10 @@ class LiveFormDirective {
         // MEMORY LEAK FIX: Clear form reference
         this.form = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2.LiveTableComponent, optional: true }, { token: i5.ToDatePipe }, { token: i1$1.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: LiveFormDirective, deps: [{ token: FormComponent, self: true }, { token: i1$2.LiveTableComponent, optional: true }, { token: i5.ToDatePipe }, { token: i1$1.AbstractDialogService }, { token: 'formlayout', attribute: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: LiveFormDirective, isStandalone: true, selector: "[wmLiveForm]", host: { listeners: { "keydown": "onKeydownHandler($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: LiveFormDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,

package/components/data/list/bundles/index.umd.js

@@ -298,14 +298,14 @@
             }
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: ListItemDirective, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ElementRef }, { token: i2__namespace.App }, { token: i0__namespace.Renderer2 }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
-        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], usesInheritance: true, ngImport: i0__namespace }); }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: ListItemDirective, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ElementRef }, { token: i2__namespace.App }, { token: i0__namespace.Renderer2 }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], usesInheritance: true, ngImport: i0__namespace }); }
     };
     exports.ListItemDirective = tslib.__decorate([
         i1.AutoLayout({ bindParent: 'listComponent.viewParent' }),
         tslib.__metadata("design:paramtypes", [i0.Injector, i0.ElementRef, i2.App, i0.Renderer2, Object])
     ], exports.ListItemDirective);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: exports.ListItemDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: exports.ListItemDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         standalone: true,
@@ -1546,8 +1546,8 @@
                 this.itemAttrsMap = {};
             }
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: ListComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.ToDatePipe }, { token: i2__namespace.App }, { token: i2__namespace.AppDefaults }, { token: i0__namespace.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2__namespace.StatePersistence }, { token: i2__namespace.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
-        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ListComponent, isStandalone: true, selector: "div[wmList]", providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: ListComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.ToDatePipe }, { token: i2__namespace.App }, { token: i2__namespace.AppDefaults }, { token: i0__namespace.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2__namespace.StatePersistence }, { token: i2__namespace.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: ListComponent, isStandalone: true, selector: "div[wmList]", providers: [
                 i1.provideAsWidgetRef(ListComponent)
             ], queries: [{ propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "listLeftActionTemplate", first: true, predicate: ["listLeftActionTemplate"], descendants: true }, { propertyName: "listRightActionTemplate", first: true, predicate: ["listRightActionTemplate"], descendants: true }, { propertyName: "btnComponents", predicate: button.ButtonComponent }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: pagination.PaginationComponent, descendants: true }, { propertyName: "listItems", predicate: exports.ListItemDirective, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "@if (title || subheading || iconclass || iconurl) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [defaultClasses]=\"'panel-icon'\" alt=\"List icon\"></wm-app-icon>\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n    </h3>\n  </div>\n}\n\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\" aria-label=\"Page navigation\">\n    <ul class=\"pager\">\n      <li class=\"previous\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisablePrevious : true)}\">\n        <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('prev', $event)\"\n          [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\">\n          <i class=\"wi wi-chevron-left\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">Go to Previous page {{dataNavigator.isDisablePrevious ? ', Disabled' : ''}}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n}\n@if (navigation === 'Inline' && !noDataFound) {\n  <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\"> {{'Page ' + dataNavigator.dn.currentPage + ' of ' + dataNavigator.pageCount }}</div>\n}\n\n<div>\n  @if (enablereorder) {\n    <div id={{titleId}} class=\"sr-only\">\n      Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n  }\n\n  @if (listItems && enablereorder && currentIndex) {\n    <div aria-live=\"assertive\" class=\"sr-only\" >\n      {{ariaText + currentIndex + ' of ' +  listItems.length}}\n    </div>\n  }\n</div>\n\n<ul [attr.tabindex]=\"tabindex\"  class=\"list-group app-livelist-container clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}} {{listclass}}\" role=\"list\"\n  [class.list-group-autolayout]=\"hasAutolayout\"\n  (keydown.enter)=\"handleKeyDown($event, 'select')\"\n\n  (keydown.space)=\"handleKeyDown($event, 'space')\"\n\n  (keydown.arrowup)=\"handleKeyDown($event, 'focusPrev')\"\n  (keydown.arrowdown)=\"handleKeyDown($event, 'focusNext')\"\n  (keydown.arrowleft)=\"handleKeyDown($event, 'focusPrev')\"\n  (keydown.arrowright)=\"handleKeyDown($event, 'focusNext')\"\n\n  (keydown.shift.arrowup)=\"handleKeyDown($event, 'selectPrev')\"\n  (keydown.shift.arrowdown)=\"handleKeyDown($event, 'selectNext')\"\n  (keydown.shift.arrowleft)=\"handleKeyDown($event, 'selectPrev')\"\n  (keydown.shift.arrowright)=\"handleKeyDown($event, 'selectNext')\"\n  [hidden]=\"noDataFound && !variableInflight\"\n  >\n  @if (!groupby) {\n    @for (item of fieldDefs; track item) {\n      <li class=\"app-list-item {{direction === 'horizontal' ? '' : itemsPerRowClass}}\" [ngClass]=\"listItemRef.itemClass\"\n        [wmListItem]=\"item\"\n        #listItemRef=\"listItemRef\"\n        [attr.tabindex]=\"tabindex\"\n        role=\"listitem\">\n        <ng-container [ngTemplateOutlet]=\"listTemplate\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('falt_' + listItemRef.trackId, {item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n        [ngTemplateOutletContext]=\"{item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n      </li>\n    }\n  } @else {\n    @for (groupObj of groupedData; track groupObj; let groupIndex = $index) {\n      <li class=\"app-list-item-group clearfix\">\n        <ul [attr.tabindex]=\"tabindex\" class=\"list-group item-group\" [ngClass]=\"listclass\" [class.list-group-autolayout]=\"hasAutolayout\">\n          <li class=\"app-list-item-header list-item list-group-header\" (click)=\"handleHeaderClick($event)\" [ngClass]=\"{'collapsible-content': collapsible}\">\n            <h4>{{groupObj.key}}\n              <div class=\"header-action\">\n                @if (collapsible) {\n                  <i class=\"app-icon wi action wi-chevron-up\"></i>\n                }\n                @if (showcount) {\n                  <span class=\"label label-default\">{{groupObj.data.length}}</span>\n                }\n              </div>\n            </h4>\n          </li>\n          <li class=\"list-group-container\">\n            <ul class=\"list-group clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}}\" [class.list-group-autolayout]=\"hasAutolayout\">\n              @for (item of groupObj.data; track trackByFn($index, item)) {\n                <li [attr.tabindex]=\"tabindex\"\n                  class=\"app-list-item group-list-item {{itemsPerRowClass}}\"\n                  [ngClass]=\"listItemRef.itemClass\"\n                  [wmListItem]=\"item\" #listItemRef=\"listItemRef\">\n                  <ng-container [ngTemplateOutlet]=\"listTemplate\"\n                    [ngTemplateOutletInjector]=\"createCustomInjector('group_' + listItemRef.trackId, {item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n                  [ngTemplateOutletContext]=\"{item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n                </li>\n              }\n            </ul>\n          </li>\n        </ul>\n      </li>\n    }\n  }\n  <ng-container [ngTemplateOutlet]=\"listLeftActionTemplate\"></ng-container>\n  <ng-container [ngTemplateOutlet]=\"listRightActionTemplate\"></ng-container>\n</ul>\n\n@if (noDataFound && !variableInflight) {\n  <div class=\"no-data-msg\" [textContent]=\"nodatamessage\"></div>\n}\n\n@if (variableInflight && !pulltorefresh) {\n  <div class=\"loading-data-msg\">\n    <span>\n      <wm-app-icon [iconclass]=\"loadingicon\" [iconurl]=\"loadingiconurl\" [defaultClasses]=\"'panel-icon'\" alt=\"loading icon\"></wm-app-icon>\n      <span class=\"sr-only\">Loading</span>\n      <span class=\"loading-text\" [textContent]=\"loadingdatamsg\"></span>\n    </span>\n  </div>\n}\n\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n    <ul class=\"pager\">\n      <li class=\"next\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisableNext  : true)}\">\n        <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('next', $event)\"\n          [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n          <i class=\"wi wi-chevron-right\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">Go to Next page {{dataNavigator.isDisableNext ? ', Disabled' : ''}}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n}\n\n@if (navigation !== 'None') {\n  <div class=\"panel-footer\" [hidden]=\"!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator?.dataSize <= pagesize && !allowpagesizechange) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)\">\n    <nav wmPagination\n      navigationalign.bind=\"navigationalign\"\n      navigation.bind=\"navControls\"\n      showrecordcount.bind=\"showrecordcount\"\n      maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n      forceellipses.bind=\"forceellipses\"\n      directionlinks.bind=\"directionlinks\"\n      show.bind=\"!onDemandLoad\"\n      paginationchange.event=\"beforePaginationChange($event, $index)\"\n    ></nav>\n    @if (onDemandLoad) {\n      <a href=\"javascript:void(0);\"\n        (click)=\"dataNavigator.navigatePage('next', $event)\"\n        class=\"app-button btn btn-block\"\n        [ngClass]=\"paginationclass\"\n        [textContent]=\"ondemandmessage\"\n      ></a>\n    }\n  </div>\n}\n\n<!--This template will be displayed when groupby is specified-->\n", dependencies: [{ kind: "ngmodule", type: i3.CommonModule }, { kind: "directive", type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: pagination.PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "directive", type: exports.ListItemDirective, selector: "[wmListItem]", inputs: ["wmListItem"], exportAs: ["listItemRef"] }, { kind: "component", type: i1.WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
     };
@@ -1561,7 +1561,7 @@
             i0.NgZone, String, String, String, String, String, String, i2.StatePersistence,
             i2.PaginationService, Object])
     ], exports.ListComponent);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: exports.ListComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: exports.ListComponent, decorators: [{
                 type: i0.Component,
                 args: [{ standalone: true, imports: [i3.CommonModule, i1.TextContentDirective, pagination.PaginationComponent, exports.ListItemDirective, i1.WmAppIconComponent], selector: 'div[wmList]', providers: [
                             i1.provideAsWidgetRef(exports.ListComponent)

package/components/data/list/fesm2022/index.mjs

@@ -285,14 +285,14 @@ let ListItemDirective = class ListItemDirective extends StylableComponent {
         }
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.App }, { token: i0.Renderer2 }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.App }, { token: i0.Renderer2 }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.28", type: ListItemDirective, isStandalone: true, selector: "[wmListItem]", inputs: { wmListItem: "wmListItem" }, host: { listeners: { "focus": "onFocus()" }, properties: { "class.active": "this.isActive", "class.disable-item": "this.disableItem" } }, exportAs: ["listItemRef"], usesInheritance: true, ngImport: i0 }); }
 };
 ListItemDirective = __decorate([
     AutoLayout({ bindParent: 'listComponent.viewParent' }),
     __metadata("design:paramtypes", [Injector, ElementRef, App, Renderer2, Object])
 ], ListItemDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ListItemDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1533,8 +1533,8 @@ let ListComponent = class ListComponent extends StylableComponent {
             this.itemAttrsMap = {};
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.ToDatePipe }, { token: i2.App }, { token: i2.AppDefaults }, { token: i0.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2.StatePersistence }, { token: i2.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ListComponent, isStandalone: true, selector: "div[wmList]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ListComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.ToDatePipe }, { token: i2.App }, { token: i2.AppDefaults }, { token: i0.NgZone }, { token: 'itemclass.bind', attribute: true }, { token: 'disableitem.bind', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'datasource.bind', attribute: true }, { token: 'mouseenter.event', attribute: true }, { token: 'mouseleave.event', attribute: true }, { token: i2.StatePersistence }, { token: i2.PaginationService }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: ListComponent, isStandalone: true, selector: "div[wmList]", providers: [
             provideAsWidgetRef(ListComponent)
         ], queries: [{ propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "listLeftActionTemplate", first: true, predicate: ["listLeftActionTemplate"], descendants: true }, { propertyName: "listRightActionTemplate", first: true, predicate: ["listRightActionTemplate"], descendants: true }, { propertyName: "btnComponents", predicate: ButtonComponent }], viewQueries: [{ propertyName: "dataNavigator", first: true, predicate: PaginationComponent, descendants: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (title || subheading || iconclass || iconurl) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [defaultClasses]=\"'panel-icon'\" alt=\"List icon\"></wm-app-icon>\n      </div>\n      <div class=\"pull-left\">\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      </div>\n    </h3>\n  </div>\n}\n\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\" aria-label=\"Page navigation\">\n    <ul class=\"pager\">\n      <li class=\"previous\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisablePrevious : true)}\">\n        <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('prev', $event)\"\n          [attr.aria-disabled]=\"dataNavigator.isDisablePrevious\">\n          <i class=\"wi wi-chevron-left\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">Go to Previous page {{dataNavigator.isDisablePrevious ? ', Disabled' : ''}}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n}\n@if (navigation === 'Inline' && !noDataFound) {\n  <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\"> {{'Page ' + dataNavigator.dn.currentPage + ' of ' + dataNavigator.pageCount }}</div>\n}\n\n<div>\n  @if (enablereorder) {\n    <div id={{titleId}} class=\"sr-only\">\n      Press space bar to toggle drag drop mode, use arrow keys to move selected elements.\n    </div>\n  }\n\n  @if (listItems && enablereorder && currentIndex) {\n    <div aria-live=\"assertive\" class=\"sr-only\" >\n      {{ariaText + currentIndex + ' of ' +  listItems.length}}\n    </div>\n  }\n</div>\n\n<ul [attr.tabindex]=\"tabindex\"  class=\"list-group app-livelist-container clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}} {{listclass}}\" role=\"list\"\n  [class.list-group-autolayout]=\"hasAutolayout\"\n  (keydown.enter)=\"handleKeyDown($event, 'select')\"\n\n  (keydown.space)=\"handleKeyDown($event, 'space')\"\n\n  (keydown.arrowup)=\"handleKeyDown($event, 'focusPrev')\"\n  (keydown.arrowdown)=\"handleKeyDown($event, 'focusNext')\"\n  (keydown.arrowleft)=\"handleKeyDown($event, 'focusPrev')\"\n  (keydown.arrowright)=\"handleKeyDown($event, 'focusNext')\"\n\n  (keydown.shift.arrowup)=\"handleKeyDown($event, 'selectPrev')\"\n  (keydown.shift.arrowdown)=\"handleKeyDown($event, 'selectNext')\"\n  (keydown.shift.arrowleft)=\"handleKeyDown($event, 'selectPrev')\"\n  (keydown.shift.arrowright)=\"handleKeyDown($event, 'selectNext')\"\n  [hidden]=\"noDataFound && !variableInflight\"\n  >\n  @if (!groupby) {\n    @for (item of fieldDefs; track item) {\n      <li class=\"app-list-item {{direction === 'horizontal' ? '' : itemsPerRowClass}}\" [ngClass]=\"listItemRef.itemClass\"\n        [wmListItem]=\"item\"\n        #listItemRef=\"listItemRef\"\n        [attr.tabindex]=\"tabindex\"\n        role=\"listitem\">\n        <ng-container [ngTemplateOutlet]=\"listTemplate\"\n          [ngTemplateOutletInjector]=\"createCustomInjector('falt_' + listItemRef.trackId, {item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n        [ngTemplateOutletContext]=\"{item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n      </li>\n    }\n  } @else {\n    @for (groupObj of groupedData; track groupObj; let groupIndex = $index) {\n      <li class=\"app-list-item-group clearfix\">\n        <ul [attr.tabindex]=\"tabindex\" class=\"list-group item-group\" [ngClass]=\"listclass\" [class.list-group-autolayout]=\"hasAutolayout\">\n          <li class=\"app-list-item-header list-item list-group-header\" (click)=\"handleHeaderClick($event)\" [ngClass]=\"{'collapsible-content': collapsible}\">\n            <h4>{{groupObj.key}}\n              <div class=\"header-action\">\n                @if (collapsible) {\n                  <i class=\"app-icon wi action wi-chevron-up\"></i>\n                }\n                @if (showcount) {\n                  <span class=\"label label-default\">{{groupObj.data.length}}</span>\n                }\n              </div>\n            </h4>\n          </li>\n          <li class=\"list-group-container\">\n            <ul class=\"list-group clearfix {{direction === 'horizontal' ? 'app-horizontal-list': ''}}\" [class.list-group-autolayout]=\"hasAutolayout\">\n              @for (item of groupObj.data; track trackByFn($index, item)) {\n                <li [attr.tabindex]=\"tabindex\"\n                  class=\"app-list-item group-list-item {{itemsPerRowClass}}\"\n                  [ngClass]=\"listItemRef.itemClass\"\n                  [wmListItem]=\"item\" #listItemRef=\"listItemRef\">\n                  <ng-container [ngTemplateOutlet]=\"listTemplate\"\n                    [ngTemplateOutletInjector]=\"createCustomInjector('group_' + listItemRef.trackId, {item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets})\"\n                  [ngTemplateOutletContext]=\"{item: item, row: item, $index: $index, itemRef: listItemRef, $first: $first, $last: $last, currentItemWidgets: listItemRef.currentItemWidgets}\"></ng-container>\n                </li>\n              }\n            </ul>\n          </li>\n        </ul>\n      </li>\n    }\n  }\n  <ng-container [ngTemplateOutlet]=\"listLeftActionTemplate\"></ng-container>\n  <ng-container [ngTemplateOutlet]=\"listRightActionTemplate\"></ng-container>\n</ul>\n\n@if (noDataFound && !variableInflight) {\n  <div class=\"no-data-msg\" [textContent]=\"nodatamessage\"></div>\n}\n\n@if (variableInflight && !pulltorefresh) {\n  <div class=\"loading-data-msg\">\n    <span>\n      <wm-app-icon [iconclass]=\"loadingicon\" [iconurl]=\"loadingiconurl\" [defaultClasses]=\"'panel-icon'\" alt=\"loading icon\"></wm-app-icon>\n      <span class=\"sr-only\">Loading</span>\n      <span class=\"loading-text\" [textContent]=\"loadingdatamsg\"></span>\n    </span>\n  </div>\n}\n\n@if (navigation === 'Inline' && !noDataFound) {\n  <div class=\"app-datanavigator\" [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n    <ul class=\"pager\">\n      <li class=\"next\" [ngClass]=\"{'disabled': (dataNavigator ? dataNavigator.isDisableNext  : true)}\">\n        <a href=\"javascript:void(0);\" (click)=\"dataNavigator.navigatePage('next', $event)\"\n          [attr.aria-disabled]=\"dataNavigator.isDisableNext\">\n          <i class=\"wi wi-chevron-right\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">Go to Next page {{dataNavigator.isDisableNext ? ', Disabled' : ''}}</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n}\n\n@if (navigation !== 'None') {\n  <div class=\"panel-footer\" [hidden]=\"!showNavigation || (onDemandLoad && dataNavigator.isDisableNext) || (dataNavigator?.dataSize <= pagesize && !allowpagesizechange) || (!dataNavigator.dataSize && !dataNavigator.datasource?.pagination?.next)\">\n    <nav wmPagination\n      navigationalign.bind=\"navigationalign\"\n      navigation.bind=\"navControls\"\n      showrecordcount.bind=\"showrecordcount\"\n      maxsize.bind=\"maxsize\"\n      boundarylinks.bind=\"boundarylinks\"\n      forceellipses.bind=\"forceellipses\"\n      directionlinks.bind=\"directionlinks\"\n      show.bind=\"!onDemandLoad\"\n      paginationchange.event=\"beforePaginationChange($event, $index)\"\n    ></nav>\n    @if (onDemandLoad) {\n      <a href=\"javascript:void(0);\"\n        (click)=\"dataNavigator.navigatePage('next', $event)\"\n        class=\"app-button btn btn-block\"\n        [ngClass]=\"paginationclass\"\n        [textContent]=\"ondemandmessage\"\n      ></a>\n    }\n  </div>\n}\n\n<!--This template will be displayed when groupby is specified-->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: PaginationComponent, selector: "[wmPagination]", outputs: ["resultEmitter", "maxResultsEmitter"] }, { kind: "directive", type: ListItemDirective, selector: "[wmListItem]", inputs: ["wmListItem"], exportAs: ["listItemRef"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
 };
@@ -1548,7 +1548,7 @@ ListComponent = __decorate([
         NgZone, String, String, String, String, String, String, StatePersistence,
         PaginationService, Object])
 ], ListComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, TextContentDirective, PaginationComponent, ListItemDirective, WmAppIconComponent], selector: 'div[wmList]', providers: [
                         provideAsWidgetRef(ListComponent)

package/components/data/live-table/bundles/index.umd.js

@@ -252,12 +252,12 @@
             this.$queue = [];
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveTableComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.AbstractDialogService }, { token: i1__namespace.App }, { token: 'formlayout', attribute: true }, { token: 'dialogid', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
-        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: LiveTableComponent, isStandalone: true, selector: "[wmLiveTable]", providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: LiveTableComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.AbstractDialogService }, { token: i1__namespace.App }, { token: 'formlayout', attribute: true }, { token: 'dialogid', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: LiveTableComponent, isStandalone: true, selector: "[wmLiveTable]", providers: [
                 base.provideAsWidgetRef(LiveTableComponent)
             ], queries: [{ propertyName: "table", first: true, predicate: table.TableComponent, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-content></ng-content>" }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: LiveTableComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: LiveTableComponent, decorators: [{
                 type: i0.Component,
                 args: [{ standalone: true, selector: '[wmLiveTable]', providers: [
                             base.provideAsWidgetRef(LiveTableComponent)

package/components/data/live-table/fesm2022/index.mjs

@@ -234,12 +234,12 @@ class LiveTableComponent extends StylableComponent {
         this.$queue = [];
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveTableComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AbstractDialogService }, { token: i1.App }, { token: 'formlayout', attribute: true }, { token: 'dialogid', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: LiveTableComponent, isStandalone: true, selector: "[wmLiveTable]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: LiveTableComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.AbstractDialogService }, { token: i1.App }, { token: 'formlayout', attribute: true }, { token: 'dialogid', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.28", type: LiveTableComponent, isStandalone: true, selector: "[wmLiveTable]", providers: [
             provideAsWidgetRef(LiveTableComponent)
         ], queries: [{ propertyName: "table", first: true, predicate: TableComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LiveTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: LiveTableComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: '[wmLiveTable]', providers: [
                         provideAsWidgetRef(LiveTableComponent)

package/components/data/pagination/bundles/index.umd.js

@@ -854,12 +854,12 @@
             // Call parent ngOnDestroy (sets isDestroyed = true)
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: PaginationComponent, deps: [{ token: i0__namespace.Injector }, { token: base.WidgetRef, skipSelf: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
-        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: PaginationComponent, isStandalone: true, selector: "[wmPagination]", outputs: { resultEmitter: "resultEmitter", maxResultsEmitter: "maxResultsEmitter" }, providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: PaginationComponent, deps: [{ token: i0__namespace.Injector }, { token: base.WidgetRef, skipSelf: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: PaginationComponent, isStandalone: true, selector: "[wmPagination]", outputs: { resultEmitter: "resultEmitter", maxResultsEmitter: "maxResultsEmitter" }, providers: [
                 base.provideAsWidgetRef(PaginationComponent)
             ], viewQueries: [{ propertyName: "bsDropdown", first: true, predicate: i4.BsDropdownDirective, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n@if (navcontrols === 'Classic') {\n<ul class=\"pagination advanced {{navigationClass}}\">\n    @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n        <li class=\"items-per-page\">\n          <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE}} :</label>\n\n            <div class=\"btn-group\" dropdown  container=\"body\" (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n                <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\">\n                    {{maxResults}} <span class=\"caret\"></span>\n                </button>\n                <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                    role=\"menu\" aria-labelledby=\"button-basic\">\n                    @for (option of pageSizeOptions; track option; let i = $index) {\n                            <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                                <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                                   [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                            </li>\n                            }\n                </ul>\n            </div>\n        </li>\n        @if (rowSummary?.totalRecords) {\n        <li class=\"item-range\">\n        <div>\n            <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n            <span>of</span>\n            <span>{{rowSummary.totalRecords}}</span>\n            </div>\n        </li>\n        }\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableFirst}\">\n        <a [title]=\"appLocale.LABEL_FIRST\" name=\"first\" href=\"javascript:void(0);\"\n           [attr.aria-disabled]=\"isDisableFirst\"\n           (click)=\"navigatePage('first', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-first-page\"></i></span>\n            <span class=\"sr-only\">Go to first page {{ isDisableFirst ? ' , Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisablePrevious}\">\n        <a [title]=\"appLocale.LABEL_PREVIOUS\" name=\"prev\" href=\"javascript:void(0);\"\n            [attr.aria-disabled]=\"isDisablePrevious\"\n            (click)=\"navigatePage('prev', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-chevron-left\"></i></span>\n            <span class=\"sr-only\">Go to previous page {{ isDisablePrevious ? ', Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li class=\"pagecount disabled\">\n        <a href=\"javascript:void(0);\" aria-label=\"Change Page Number\">\n            <input [(ngModel)]=\"dn.currentPage\" [attr.aria-label]=\"'Showing Page ' + dn.currentPage + ' of ' + pageCount\" [disabled]=\"isDisableCurrent\"\n                   [ngModelOptions]=\"{standalone: true}\"\n                   type=\"number\"\n                  (keydown)=\"onKeyDown($event)\" (change)=\"onModelChange($event)\" class=\"form-control\"/>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li class=\"disabled\">\n        <a [hidden]=\"isDisableCount\"> / {{pageCount}}</a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableNext}\">\n        <a [title]=\"appLocale.LABEL_NEXT\" name=\"next\" href=\"javascript:void(0);\"\n           [attr.aria-disabled]=\"isDisableNext\"\n           (click)=\"navigatePage('next', $event)\">\n            <span aria-hidden=\"true\"><i class=\"wi wi-chevron-right\"></i></span>\n            <span class=\"sr-only\">Go to next page {{ isDisableNext ? ' , Disabled' : ''}}</span>\n        </a>\n    </li>\n    }\n    @if (!(dataSize<=maxResults)) {\n    <li [ngClass]=\"{'disabled':isDisableLast}\">\n      <a [title]=\"appLocale.LABEL_LAST\" name=\"last\" href=\"javascript:void(0);\"\n        [attr.aria-disabled]=\"isDisableLast\"\n        (click)=\"navigatePage('last', $event)\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-last-page\"></i></span>\n        <span class=\"sr-only\">Go to last page {{ isDisableLast ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n    }\n    @if (showrecordcount) {\n      <li class=\"totalcount disabled\">\n        <a href=\"javascript:void(0);\" tabindex=\"-1\" aria-disabled=\"true\">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n      </li>\n    }\n</ul>\n}\n@if (navcontrols === 'Pager') {\n  <ul class=\"pager {{navigationClass}}\">\n        @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n        <li class=\"items-per-page\">\n          <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE}} :</label>\n\n            <div class=\"btn-group\" dropdown container=\"body\" (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n                <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                        aria-controls=\"dropdown-basic\">\n                    {{maxResults}} <span class=\"caret\"></span>\n                </button>\n                <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                    role=\"menu\" aria-labelledby=\"button-basic\">\n                    @for (option of pageSizeOptions; track option; let i = $index) {\n                        <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                            <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                         [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                        </li>\n                        }\n                </ul>\n            </div>\n        </li>\n        @if (rowSummary?.totalRecords) {\n        <li class=\"item-range\">\n            <div>\n                <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n                <span>of</span>\n                <span>{{rowSummary.totalRecords}}</span>\n            </div>\n        </li>\n        }\n    }\n@if (!(dataSize<=maxResults)) {\n    <li class=\"previous\" [ngClass]=\"{'disabled':isDisablePrevious}\">\n      <a href=\"javascript:void(0);\" (click)=\"navigatePage('prev', $event)\"\n        [attr.aria-disabled]=\"isDisablePrevious\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-chevron-left\"></i></span>\n        {{appLocale.LABEL_PREVIOUS}}\n        <span class=\"sr-only\">{{ isDisablePrevious ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n    <li class=\"next\" [ngClass]=\"{'disabled':isDisableNext}\">\n      <a href=\"javascript:void(0);\" (click)=\"navigatePage('next', $event)\"\n        [attr.aria-disabled]=\"isDisableNext\">\n        <span aria-hidden=\"true\"><i class=\"wi wi-chevron-right\"></i></span>\n        {{appLocale.LABEL_NEXT}}\n        <span class=\"sr-only\">{{ isDisableNext ? ' , Disabled' : ''}}</span>\n      </a>\n    </li>\n  }\n  </ul>\n}\n\n@if (navcontrols === 'Basic') {\n    @if (allowpagesizechange &&  pageSizeOptions?.[0]<rowSummary?.totalRecords) {\n      <div class=\"items-per-page\">\n        <label [title]=\"appLocale.LABEL_ITEMS_PER_PAGE\" class=\"app-label\">{{appLocale.LABEL_ITEMS_PER_PAGE }} :</label>\n\n        <div class=\"btn-group\" dropdown container=\"body\"  (onShown)=\"onDropDownShown($event)\" (onHidden)=\"onDropdownHidden()\" (isOpenChange)=\"onOpenChange($event)\">\n            <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn app-button dropdown-toggle\"\n                    aria-controls=\"dropdown-basic\">\n                {{maxResults}} <span class=\"caret\"></span>\n            </button>\n            <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu pagesize-options\"\n                role=\"menu\" aria-labelledby=\"button-basic\">\n                @for (option of pageSizeOptions; track option; let i = $index) {\n                    <li role=\"menuitem\" [ngClass]=\"{ 'active': option == maxResults }\">\n                        <a class=\"dropdown-item\" (click)=\"onPageSizeChange($event, option)\" (keydown)=\"onDropdownKeydown($event, i)\"\n                         [attr.tabindex]=\"i === focusedIndex ? 0 : -1\">{{option}}</a>\n                    </li>\n                    }\n            </ul>\n        </div>\n      </div>\n        @if (rowSummary?.totalRecords) {\n        <div class=\"item-range\">\n        <div>\n            <span>{{rowSummary.startIndex}} - {{rowSummary.endIndex}}</span>\n            <span>of</span>\n            <span>{{rowSummary.totalRecords}}</span>\n        </div>\n        </div>\n        }\n    }\n    @if (!(dataSize<=maxResults)) {\n      <pagination class=\"pagination basic\" [ngClass]=\"navigationClass\" role=\"navigation\"\n        [itemsPerPage]=\"maxResults\" [totalItems]=\"dataSize\"\n        (pageChanged)=\"pageChanged($event)\" [ngModelOptions]=\"{standalone:true}\" [ngModel]=\"dn.currentPage\"\n        [attr.aria-label]=\"'Showing Page ' + dn.currentPage + ' of ' + pageCount + ' pages'\"\n        [boundaryLinks]=\"boundarylinks\" [maxSize]=\"maxsize\"\n        [directionLinks]=\"directionlinks\"\n        firstText=\"Firtst\" lastText=\"Last\"\n        [customPreviousTemplate]=\"prevTemplate\"\n        [customNextTemplate]=\"nextTemplate\"\n        [customPageTemplate]=\"pageTemplate\"></pagination>\n    }\n}\n\n@if (navcontrols === 'Basic' && showrecordcount) {\n  <ul class=\"pagination\">\n    <li class=\"totalcount disabled basiccount\">\n      <a href=\"javascript:void(0);\" tabindex=\"-1\" aria-disabled=\"true\">{{appLocale.LABEL_TOTAL_RECORDS}}: {{dataSize}}</a>\n    </li>\n  </ul>\n}\n\n<ng-template #pageTemplate let-page>\n  <span class=\"sr-only\" [attr.data-isacitvepage]=\"page.active\">{{'Page '}}</span>\n  {{page.number}}\n  @if (page.active) {\n    <span class=\"sr-only\"> {{', Showing page ' + page.number + ' of ' + pageCount}}</span>\n  }\n</ng-template>\n<ng-template #prevTemplate let-disabled=\"disabled\">\n  <span class=\"sr-only\" [attr.data-isdisabled]=\"disabled\">Go to Previous page {{disabled ? ', Disabled' : ''}}</span>\n</ng-template>\n<ng-template #nextTemplate let-disabled=\"disabled\">\n  <span class=\"sr-only\" [attr.data-isdisabled]=\"disabled\">Go to Next page {{disabled ? ', Disabled' : ''}}</span>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2__namespace.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i3.PaginationModule }, { kind: "component", type: i3__namespace.PaginationComponent, selector: "pagination", inputs: ["align", "maxSize", "boundaryLinks", "directionLinks", "firstText", "previousText", "nextText", "lastText", "rotate", "pageBtnClass", "disabled", "customPageTemplate", "customNextTemplate", "customPreviousTemplate", "customFirstTemplate", "customLastTemplate", "itemsPerPage", "totalItems"], outputs: ["numPages", "pageChanged"] }, { kind: "ngmodule", type: i4.BsDropdownModule }, { kind: "directive", type: i4__namespace.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i4__namespace.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i4__namespace.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }] }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: PaginationComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0__namespace, type: PaginationComponent, decorators: [{
                 type: i0.Component,
                 args: [{ standalone: true, imports: [i1.CommonModule, i2.FormsModule, i3.PaginationModule, i4.BsDropdownModule], selector: '[wmPagination]', providers: [
                             base.provideAsWidgetRef(PaginationComponent)