@schneideress/dashboardframework 17.0.4 → 17.0.5

package/fesm2022/schneideress-dashboardframework.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, Input, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, NgZone, Inject, Output, HostBinding, ViewChild, NgModule, Directive } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, Input, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, NgZone, Inject, Output, HostBinding, ViewContainerRef, ViewChild, NgModule, Directive } from '@angular/core';
 import { of, Subject, debounceTime, takeUntil, switchMap, timer } from 'rxjs';
 import * as i3 from '@schneideress/ra-common';
 import { BaseService, RACommonModule } from '@schneideress/ra-common';
@@ -10,6 +10,7 @@ import { NotifierModule } from 'angular-notifier';
 import * as i2 from '@angular/common';
 import { NgForOf, NgStyle, NgIf } from '@angular/common';
 import { RaWidgetlockStatus, WidgetViewState, RADownloadType, RADownloadOption } from '@schneideress/widgetframework';
+import { loadRemoteModule } from '@angular-architects/module-federation';
 import * as i6 from '@schneideress/common-controls';
 import { RACommonControlsModule } from '@schneideress/common-controls';
 import { BrowserModule } from '@angular/platform-browser';
@@ -72,6 +73,12 @@ class RaDashboardService extends BaseService {
     /**To Update widgetInfo in database */
     updateWidget(widgetInfo, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
+        let info = {};
+        info.widgetConfigInfo = widgetInfo.widgetConfigInfo;
+        info.widgetInstanceId = widgetInfo.widgetInstanceId;
+        info.widgetTitle = widgetInfo.widgetTitle;
+        info.widgetType = widgetInfo.widgetType;
+        info.widgetId = widgetInfo.widgetId;
         return this.post('widget/UpdateUserWidget', widgetInfo);
     }
     /** To Move or change position if current widget container*/
@@ -80,10 +87,10 @@ class RaDashboardService extends BaseService {
     /** To Copy Current widget with same configuration*/
     copyWidget(widgetInfo) {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RaDashboardService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RaDashboardService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RaDashboardService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RaDashboardService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RaDashboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RaDashboardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -143,6 +150,12 @@ var RAEvent;
     RAEvent["UpdateAppledFiterForInapplicableFilter"] = "UpdateAppledFiterForInapplicableFilter";
     /**show inapplicable filter message in global filter flyout */
     RAEvent["ShowInapplicableFilterMessage"] = "ShowInapplicableFilterMessage";
+    /** Bulk Action Clicked */
+    RAEvent["BulkActionClick"] = "BulkActionClick";
+    /** Global Filter Clicked */
+    /** When user change the curated filter(eg:data streams), system will create/delete widgets */
+    RAEvent["CuratedFilterChange"] = "CuratedFilterChange";
+    RAEvent["GlobalFilterClick"] = "GlobalFilterClick";
 })(RAEvent || (RAEvent = {}));
 var RAEventKey;
 (function (RAEventKey) {
@@ -156,9 +169,9 @@ const GridsterConfigDefaultSettings = {
     margin: 10,
     outerMargin: true,
     outerMarginTop: 10,
-    outerMarginRight: 10,
+    outerMarginRight: 0,
     outerMarginBottom: 30,
-    outerMarginLeft: 10,
+    outerMarginLeft: 0,
     useTransformPositioning: true,
     mobileBreakpoint: 640,
     minCols: 10,
@@ -263,7 +276,7 @@ class RADashboardResponsiveService {
             check = true;
         return check;
     }
-    getGridsterConfig(isWidgetMgmnt) {
+    getGridsterConfig(isWidgetMgmnt, resize, canMove) {
         let config = GridsterConfigDefaultSettings;
         config.minCols = this.currentResInfo.maxCols;
         config.maxCols = this.currentResInfo.maxCols;
@@ -285,6 +298,13 @@ class RADashboardResponsiveService {
             config.swap = true;
             config.draggable.enabled = true;
         }
+        if (!resize) {
+            config.resizable.enabled = false;
+            config.swap = false;
+        }
+        if (!canMove) {
+            config.draggable.enabled = false;
+        }
         return config;
     }
     /**To map IwidgetInfo object to gridsterItem */
@@ -292,6 +312,9 @@ class RADashboardResponsiveService {
         if (widget.widgetSettings) {
             widget.settings = JSON.parse(widget.widgetSettings);
         }
+        if (widget.templateSettings) {
+            widget.templateWidgetSettings = JSON.parse(widget.templateSettings);
+        }
         let gridsterItem = {
             cols: this.getWidth(widget.width),
             rows: this.getHeight(widget.height),
@@ -333,10 +356,10 @@ class RADashboardResponsiveService {
         }
         return height;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RADashboardResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RADashboardResponsiveService, providedIn: "root" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RADashboardResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RADashboardResponsiveService, providedIn: "root" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RADashboardResponsiveService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RADashboardResponsiveService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
         }], ctorParameters: () => [] });
@@ -988,10 +1011,10 @@ class GridsterPreviewComponent {
             this.renderer.setStyle(this.el, 'display', '');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterPreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: GridsterPreviewComponent, isStandalone: true, selector: "gridster-preview", inputs: { previewStyle$: "previewStyle$", gridRenderer: "gridRenderer" }, ngImport: i0, template: '', isInline: true, styles: ["gridster-preview{position:absolute;display:none;background:#00000026}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterPreviewComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: GridsterPreviewComponent, isStandalone: true, selector: "gridster-preview", inputs: { previewStyle$: "previewStyle$", gridRenderer: "gridRenderer" }, ngImport: i0, template: '', isInline: true, styles: ["gridster-preview{position:absolute;display:none;background:#00000026}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gridster-preview', template: '', encapsulation: ViewEncapsulation.None, standalone: true, styles: ["gridster-preview{position:absolute;display:none;background:#00000026}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { previewStyle$: [{
@@ -1867,10 +1890,10 @@ class GridsterComponent {
         }
         return 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterComponent, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: ChangeDetectorRef }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: GridsterComponent, isStandalone: true, selector: "gridster", inputs: { options: "options" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"gridster-column\"\r\n  *ngFor=\"let column of gridColumns; let i = index;\"\r\n  [ngStyle]=\"gridRenderer.getGridColumnStyle(i)\"\r\n></div>\r\n<div\r\n  class=\"gridster-row\"\r\n  *ngFor=\"let row of gridRows; let i = index;\"\r\n  [ngStyle]=\"gridRenderer.getGridRowStyle(i)\"\r\n></div>\r\n<ng-content></ng-content>\r\n<gridster-preview\r\n  [gridRenderer]=\"gridRenderer\"\r\n  [previewStyle$]=\"previewStyle$\"\r\n  class=\"gridster-preview\"\r\n></gridster-preview>\r\n", styles: ["gridster{position:relative;box-sizing:border-box;background:gray;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:block}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto}gridster.mobile gridster-item{position:relative}gridster.gridSize{height:initial;width:initial}gridster.gridSize.fit{height:100%;width:100%}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid white;border-right:1px solid white}gridster .gridster-row{border-top:1px solid white;border-bottom:1px solid white}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: GridsterPreviewComponent, selector: "gridster-preview", inputs: ["previewStyle$", "gridRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterComponent, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: ChangeDetectorRef }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: GridsterComponent, isStandalone: true, selector: "gridster", inputs: { options: "options" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"gridster-column\"\r\n  *ngFor=\"let column of gridColumns; let i = index;\"\r\n  [ngStyle]=\"gridRenderer.getGridColumnStyle(i)\"\r\n></div>\r\n<div\r\n  class=\"gridster-row\"\r\n  *ngFor=\"let row of gridRows; let i = index;\"\r\n  [ngStyle]=\"gridRenderer.getGridRowStyle(i)\"\r\n></div>\r\n<ng-content></ng-content>\r\n<gridster-preview\r\n  [gridRenderer]=\"gridRenderer\"\r\n  [previewStyle$]=\"previewStyle$\"\r\n  class=\"gridster-preview\"\r\n></gridster-preview>\r\n", styles: ["gridster{position:relative;box-sizing:border-box;background:gray;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:block}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto}gridster.mobile gridster-item{position:relative}gridster.gridSize{height:initial;width:initial}gridster.gridSize.fit{height:100%;width:100%}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid white;border-right:1px solid white}gridster .gridster-row{border-top:1px solid white;border-bottom:1px solid white}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: GridsterPreviewComponent, selector: "gridster-preview", inputs: ["previewStyle$", "gridRenderer"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gridster', encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgForOf, NgStyle, GridsterPreviewComponent], template: "<div\r\n  class=\"gridster-column\"\r\n  *ngFor=\"let column of gridColumns; let i = index;\"\r\n  [ngStyle]=\"gridRenderer.getGridColumnStyle(i)\"\r\n></div>\r\n<div\r\n  class=\"gridster-row\"\r\n  *ngFor=\"let row of gridRows; let i = index;\"\r\n  [ngStyle]=\"gridRenderer.getGridRowStyle(i)\"\r\n></div>\r\n<ng-content></ng-content>\r\n<gridster-preview\r\n  [gridRenderer]=\"gridRenderer\"\r\n  [previewStyle$]=\"previewStyle$\"\r\n  class=\"gridster-preview\"\r\n></gridster-preview>\r\n", styles: ["gridster{position:relative;box-sizing:border-box;background:gray;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:block}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto}gridster.mobile gridster-item{position:relative}gridster.gridSize{height:initial;width:initial}gridster.gridSize.fit{height:100%;width:100%}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid white;border-right:1px solid white}gridster .gridster-row{border-top:1px solid white;border-bottom:1px solid white}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
@@ -3581,6 +3604,7 @@ class GridsterItemComponent {
     }
     ngOnDestroy() {
         this.gridster.removeItem(this);
+        this.gridster.movingItem = null;
         this.drag.destroy();
         this.resize.destroy();
         this.gridster = this.drag = this.resize = null;
@@ -3605,6 +3629,7 @@ class GridsterItemComponent {
                 this.item.initCallback(this.item, this);
             }
             if (this.gridster.options.itemInitCallback) {
+                this.item.curRowHeight = this.gridster.curRowHeight;
                 this.gridster.options.itemInitCallback(this.item, this);
             }
             this.itemInit.next({ item: this.item, itemComponent: this });
@@ -3623,6 +3648,7 @@ class GridsterItemComponent {
     }
     itemChanged() {
         if (this.gridster.options.itemChangeCallback) {
+            this.item.curRowHeight = this.gridster.curRowHeight;
             this.gridster.options.itemChangeCallback(this.item, this);
         }
         this.itemChange.next({ item: this.item, itemComponent: this });
@@ -3709,10 +3735,10 @@ class GridsterItemComponent {
         }
         return 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterItemComponent, deps: [{ token: ElementRef }, { token: GridsterComponent }, { token: Renderer2 }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: GridsterItemComponent, isStandalone: true, selector: "gridster-item", inputs: { item: "item" }, outputs: { itemInit: "itemInit", itemChange: "itemChange", itemResize: "itemResize" }, host: { properties: { "style.z-index": "this.zIndex" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.s && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-s\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.e && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-e\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.n && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-n\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.w && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-w\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.se && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-se\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.ne && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-ne\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.sw && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-sw\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.nw && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-nw\"\r\n></div>\r\n", styles: ["gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;user-select:text}gridster-item.gridster-item-moving{cursor:move}gridster-item.gridster-item-resizing,gridster-item.gridster-item-moving{transition:0s;z-index:2;box-shadow:0 0 5px 5px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.gridster-item-resizable-handler{position:absolute;z-index:2}.gridster-item-resizable-handler.handle-n{cursor:ns-resize;height:10px;right:0;top:0;left:0}.gridster-item-resizable-handler.handle-e{cursor:ew-resize;width:10px;bottom:0;right:0;top:0}.gridster-item-resizable-handler.handle-s{cursor:ns-resize;height:10px;right:0;bottom:0;left:0}.gridster-item-resizable-handler.handle-w{cursor:ew-resize;width:10px;left:0;top:0;bottom:0}.gridster-item-resizable-handler.handle-ne{cursor:ne-resize;width:10px;height:10px;right:0;top:0}.gridster-item-resizable-handler.handle-nw{cursor:nw-resize;width:10px;height:10px;left:0;top:0}.gridster-item-resizable-handler.handle-se{cursor:se-resize;width:0;height:0;right:0;bottom:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent}.gridster-item-resizable-handler.handle-sw{cursor:sw-resize;width:10px;height:10px;left:0;bottom:0}gridster-item:hover .gridster-item-resizable-handler.handle-se{border-color:transparent transparent #ccc}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterItemComponent, deps: [{ token: ElementRef }, { token: GridsterComponent }, { token: Renderer2 }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: GridsterItemComponent, isStandalone: true, selector: "gridster-item", inputs: { item: "item" }, outputs: { itemInit: "itemInit", itemChange: "itemChange", itemResize: "itemResize" }, host: { properties: { "style.z-index": "this.zIndex" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.s && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-s\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.e && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-e\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.n && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-n\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.w && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-w\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.se && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-se\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.ne && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-ne\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.sw && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-sw\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.nw && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-nw\"\r\n></div>\r\n", styles: ["gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;user-select:text}gridster-item.gridster-item-moving{cursor:move}gridster-item.gridster-item-resizing,gridster-item.gridster-item-moving{transition:0s;z-index:2;box-shadow:0 0 5px 5px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.gridster-item-resizable-handler{position:absolute;z-index:2}.gridster-item-resizable-handler.handle-n{cursor:ns-resize;height:10px;right:0;top:0;left:0}.gridster-item-resizable-handler.handle-e{cursor:ew-resize;width:10px;bottom:0;right:0;top:0}.gridster-item-resizable-handler.handle-s{cursor:ns-resize;height:10px;right:0;bottom:0;left:0}.gridster-item-resizable-handler.handle-w{cursor:ew-resize;width:10px;left:0;top:0;bottom:0}.gridster-item-resizable-handler.handle-ne{cursor:ne-resize;width:10px;height:10px;right:0;top:0}.gridster-item-resizable-handler.handle-nw{cursor:nw-resize;width:10px;height:10px;left:0;top:0}.gridster-item-resizable-handler.handle-se{cursor:se-resize;width:0;height:0;right:0;bottom:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent}.gridster-item-resizable-handler.handle-sw{cursor:sw-resize;width:10px;height:10px;left:0;bottom:0}gridster-item:hover .gridster-item-resizable-handler.handle-se{border-color:transparent transparent #ccc}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gridster-item', encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgIf], template: "<ng-content></ng-content>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.s && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-s\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.e && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-e\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.n && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-n\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.w && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-w\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.se && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-se\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.ne && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-ne\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.sw && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-sw\"\r\n></div>\r\n<div\r\n  (mousedown)=\"resize.dragStartDelay($event)\"\r\n  (touchstart)=\"resize.dragStartDelay($event)\"\r\n  *ngIf=\"resize.resizableHandles?.nw && resize.resizeEnabled\"\r\n  class=\"gridster-item-resizable-handler handle-nw\"\r\n></div>\r\n", styles: ["gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;user-select:text}gridster-item.gridster-item-moving{cursor:move}gridster-item.gridster-item-resizing,gridster-item.gridster-item-moving{transition:0s;z-index:2;box-shadow:0 0 5px 5px #0003,0 6px 10px #00000024,0 1px 18px #0000001f}.gridster-item-resizable-handler{position:absolute;z-index:2}.gridster-item-resizable-handler.handle-n{cursor:ns-resize;height:10px;right:0;top:0;left:0}.gridster-item-resizable-handler.handle-e{cursor:ew-resize;width:10px;bottom:0;right:0;top:0}.gridster-item-resizable-handler.handle-s{cursor:ns-resize;height:10px;right:0;bottom:0;left:0}.gridster-item-resizable-handler.handle-w{cursor:ew-resize;width:10px;left:0;top:0;bottom:0}.gridster-item-resizable-handler.handle-ne{cursor:ne-resize;width:10px;height:10px;right:0;top:0}.gridster-item-resizable-handler.handle-nw{cursor:nw-resize;width:10px;height:10px;left:0;top:0}.gridster-item-resizable-handler.handle-se{cursor:se-resize;width:0;height:0;right:0;bottom:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent}.gridster-item-resizable-handler.handle-sw{cursor:sw-resize;width:10px;height:10px;left:0;bottom:0}gridster-item:hover .gridster-item-resizable-handler.handle-se{border-color:transparent transparent #ccc}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
@@ -3768,10 +3794,10 @@ class LockTooltip {
             this.domService.removeComponent(comp);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: LockTooltip, deps: [{ token: i3.DomService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: LockTooltip, selector: "ra-lock-tooltip", ngImport: i0, template: "<div class=\"lock-popup-content light widget-config-item\"\r\n    [ngStyle]=\"{'top': containerTop,'bottom':containerBottom,'position':'fixed','left':containerLeft,'z-index': '9999','width':'250px','min-height':'fit-content'}\">\r\n    <div *ngIf=\"data && !template\">\r\n        <label style=\"color: #D9F0FA;\">\r\n            {{title}}:\r\n        </label>\r\n        <div style=\"color: white;\">\r\n            <label class=\"bold\" style=\"margin-bottom: 0px;width: 100%;\" *ngFor=\"let item of data\">\r\n                {{item}}\r\n            </label>\r\n        </div>\r\n        <hr style=\"background-color: white;\">\r\n        <div style=\"color: #D9F0FA;\">\r\n            <label>{{footer}}</label>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!data && template\">\r\n        <ng-container *ngTemplateOutlet=\"template\">\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".lock-popup-content{margin-top:8px;position:absolute;right:0;top:79%;box-shadow:0 8px 16px 8px #0003;z-index:899;font-size:12px;min-width:220px!important;min-height:112px;background-color:#219bfd;opacity:.9;padding:15px;color:#fff}.widget-config-item i{font-size:17px;color:#42b4e6}.widget-config-item span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: LockTooltip, deps: [{ token: i3.DomService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: LockTooltip, selector: "ra-lock-tooltip", ngImport: i0, template: "<div class=\"lock-popup-content light widget-config-item\"\r\n    [ngStyle]=\"{'top': containerTop,'bottom':containerBottom,'position':'fixed','left':containerLeft,'z-index': '9999','width':'250px','min-height':'fit-content'}\">\r\n    <div *ngIf=\"data && !template\">\r\n        <label style=\"color: #D9F0FA;\">\r\n            {{title}}:\r\n        </label>\r\n        <div style=\"color: white;\">\r\n            <label class=\"bold\" style=\"margin-bottom: 0px;width: 100%;\" *ngFor=\"let item of data\">\r\n                {{item}}\r\n            </label>\r\n        </div>\r\n        <hr style=\"background-color: white;\">\r\n        <div style=\"color: #D9F0FA;\">\r\n            <label>{{footer}}</label>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!data && template\">\r\n        <ng-container *ngTemplateOutlet=\"template\">\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".lock-popup-content{margin-top:8px;position:absolute;right:0;top:79%;box-shadow:0 8px 16px 8px #0003;z-index:899;font-size:12px;min-width:220px!important;min-height:112px;background-color:#219bfd;opacity:.9;padding:15px;color:#fff}.widget-config-item i{font-size:17px;color:#42b4e6}.widget-config-item span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: LockTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: LockTooltip, decorators: [{
             type: Component,
             args: [{ selector: 'ra-lock-tooltip', template: "<div class=\"lock-popup-content light widget-config-item\"\r\n    [ngStyle]=\"{'top': containerTop,'bottom':containerBottom,'position':'fixed','left':containerLeft,'z-index': '9999','width':'250px','min-height':'fit-content'}\">\r\n    <div *ngIf=\"data && !template\">\r\n        <label style=\"color: #D9F0FA;\">\r\n            {{title}}:\r\n        </label>\r\n        <div style=\"color: white;\">\r\n            <label class=\"bold\" style=\"margin-bottom: 0px;width: 100%;\" *ngFor=\"let item of data\">\r\n                {{item}}\r\n            </label>\r\n        </div>\r\n        <hr style=\"background-color: white;\">\r\n        <div style=\"color: #D9F0FA;\">\r\n            <label>{{footer}}</label>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!data && template\">\r\n        <ng-container *ngTemplateOutlet=\"template\">\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".lock-popup-content{margin-top:8px;position:absolute;right:0;top:79%;box-shadow:0 8px 16px 8px #0003;z-index:899;font-size:12px;min-width:220px!important;min-height:112px;background-color:#219bfd;opacity:.9;padding:15px;color:#fff}.widget-config-item i{font-size:17px;color:#42b4e6}.widget-config-item span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}\n"] }]
         }], ctorParameters: () => [{ type: i3.DomService }] });
@@ -3822,8 +3848,11 @@ class RAWidgetContainer {
         this.showExcell = true;
         this.hideTitle = false;
         this.inapplicableFilters = [];
+        this.canLoadData = false;
         this.widgetDeleted = new EventEmitter();
         this.updateAppliedFilters = new EventEmitter();
+        this.dataLoaded = new EventEmitter();
+        this.widgetLoaded = new EventEmitter();
         this.isWidgetStateApplicable = false;
         this.widgetEmptyState = '';
         this.lockVisible = false;
@@ -3857,19 +3886,32 @@ class RAWidgetContainer {
                 });
             });
         }
-        if (this.widgetElement && changes['globalFilter'] && changes['globalFilter'].currentValue != changes['globalFilter'].previousValue) {
-            let filterObj = this.getParsedConfig(this.globalFilter);
-            if (filterObj.WidgetInstanceId) {
-                if (this.data.widgetInfo.widgetInstanceId != filterObj.WidgetInstanceId)
-                    this.refreshWidget(this.data.widgetInfo);
+        if (this.widgetElement) {
+            if (changes.bulkActionData && changes.bulkActionData.currentValue != changes.bulkActionData.previousValue) {
+                if (typeof this.widgetElement.bulkActionClicked === "function") {
+                    this.widgetElement.bulkActionClicked(this.bulkActionData);
+                }
             }
-            else {
-                this.refreshWidget(this.data.widgetInfo);
+            if (changes.globalFilter && changes.globalFilter.currentValue != changes.globalFilter.previousValue) {
+                if (!this.dashboardInfo.curatedFilters) {
+                    let filterObj = this.getParsedConfig(this.globalFilter);
+                    if (filterObj.WidgetInstanceId) {
+                        if (this.data.widgetInfo.widgetInstanceId != filterObj.WidgetInstanceId)
+                            this.refreshWidget(this.data.widgetInfo);
+                    }
+                    else {
+                        //this.refreshWidget(this.data.widgetInfo);
+                    }
+                }
+            }
+            if (changes['width'] && changes['width'].currentValue != changes['width'].previousValue ||
+                (changes['height'] && changes['height'].currentValue != changes['height'].previousValue)) {
+                this.invokeWidgetResizedEvent();
             }
         }
-        if (changes['width'] && changes['width'].currentValue != changes['width'].previousValue ||
-            (changes['height'] && changes['height'].currentValue != changes['height'].previousValue)) {
-            this.invokeWidgetResizedEvent();
+        if (changes.canLoadData && changes.canLoadData.currentValue != changes.canLoadData.previousValue) {
+            if (this.canLoadData)
+                this.refreshWidget(this.data.widgetInfo);
         }
     }
     invokeWidgetResizedEvent() {
@@ -4028,107 +4070,228 @@ class RAWidgetContainer {
         }
         this.detailPageUrl = widgetInfo.detailPageUrl;
         let me = this;
-        this.dashboardService.loadExternalScript(widgetInfo.scriptUrl, () => {
-            this.setNotConfiguredState(widgetInfo);
-            let appModule = this.data.widgetInfo.widgetName;
-            if (this.data.widgetInfo.applicationModule && this.data.widgetInfo.applicationModule.length > 0) {
-                appModule = this.data.widgetInfo.applicationModule;
-            }
-            this.translateService.loadTranslations(this.appConfig.appManagementBaseUrl, appModule, false).then(() => {
-                me.widgetElement = document.createElement(widgetInfo.customTag);
-                me.widgetElement.setAttribute("widget-instance-id", widgetInfo.widgetInstanceId);
-                let handler = function (event) {
-                    setTimeout(async () => {
-                        me.widgetElement.addEventListener('on-widget-respond', (e) => {
-                            var type = e.detail.type;
-                            switch (type) {
-                                case 'onDataLoad':
-                                    if (e.detail.data)
-                                        me.showPanel = true;
-                                    else
-                                        me.showPanel = false;
-                                    break;
-                                case 'onConfigEditClicked':
-                                    me.editWidget();
-                                    break;
-                                case 'onEnableDefaultState':
-                                    me.setEmptyState(e.detail.data);
-                                    break;
-                                case 'onSetTitleUnderline':
-                                    if (e.detail.data == true)
-                                        me.enableTitleLine = true;
-                                    else
-                                        me.enableTitleLine = me.enableTitleLineActual;
-                                    break;
-                                case 'onWidgetTitleHidden':
-                                    if (e.detail.data == true)
-                                        me.hideTitle = true;
-                                    else
-                                        me.hideTitle = false;
-                                    break;
-                                case 'onUpdateLockData':
-                                    me.setLock(e.detail.data);
-                                    break;
-                                case 'onGlobalFilterApplicableCheck':
-                                    me.setInapplicableFilters(e.detail.data, widgetInfo.widgetInstanceId);
-                                    break;
-                                default:
-                                    break;
+        this.isCustomElement = false;
+        if (this.isCustomElement) {
+            this.dashboardService.loadExternalScript(widgetInfo.scriptUrl, () => {
+                this.setNotConfiguredState(widgetInfo);
+                let appModule = this.data.widgetInfo.widgetName;
+                if (this.data.widgetInfo.applicationModule && this.data.widgetInfo.applicationModule.length > 0) {
+                    appModule = this.data.widgetInfo.applicationModule;
+                }
+                this.translateService.loadTranslations(this.appConfig.appManagementBaseUrl, appModule, false).then(() => {
+                    me.widgetElement = document.createElement(widgetInfo.customTag);
+                    me.widgetElement.setAttribute("widget-instance-id", widgetInfo.widgetInstanceId);
+                    let handler = function (event) {
+                        setTimeout(async () => {
+                            me.widgetElement.addEventListener('on-widget-respond', (e) => {
+                                var type = e.detail.type;
+                                switch (type) {
+                                    case 'onDataLoad':
+                                        if (e.detail.data)
+                                            me.showPanel = true;
+                                        else
+                                            me.showPanel = false;
+                                        if (!me.data.dataLoaded) {
+                                            me.data.dataLoaded = true;
+                                            me.dataLoaded.emit(me.widgetElement);
+                                        }
+                                        break;
+                                    case 'onConfigEditClicked':
+                                        me.editWidget();
+                                        break;
+                                    case 'onEnableDefaultState':
+                                        me.setEmptyState(e.detail.data);
+                                        break;
+                                    case 'onSetTitleUnderline':
+                                        if (e.detail.data == true)
+                                            me.enableTitleLine = true;
+                                        else
+                                            me.enableTitleLine = me.enableTitleLineActual;
+                                        break;
+                                    case 'onWidgetTitleHidden':
+                                        if (e.detail.data == true)
+                                            me.hideTitle = true;
+                                        else
+                                            me.hideTitle = false;
+                                        break;
+                                    case 'onUpdateLockData':
+                                        me.setLock(e.detail.data);
+                                        break;
+                                    case 'onGlobalFilterApplicableCheck':
+                                        me.setInapplicableFilters(e.detail.data, widgetInfo.widgetInstanceId);
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            });
+                            if (typeof (me.widgetElement.titleLineEnabled) != 'undefined') {
+                                let titleLineEnabled = me.widgetElement.titleLineEnabled();
+                                if (titleLineEnabled) {
+                                    me.enableTitleLine = titleLineEnabled;
+                                    me.enableTitleLineActual = titleLineEnabled;
+                                }
+                            }
+                            me.editText = me.translateService.translate('Common.edit');
+                            if (me.translateService.translate('Common.edit').length > 6) {
+                                me.editText = (me.translateService.translate('Common.edit').substring(0, 6) + '...');
+                                me.editToolTipValue = me.translateService.translate('Common.edit');
+                                me.editToolTipWidth = "300px";
+                            }
+                            me.copyText = me.translateService.translate('Common.copy');
+                            if (me.translateService.translate('Common.copy').length > 6) {
+                                me.copyText = (me.translateService.translate('Common.copy').substring(0, 6) + '...');
+                                me.copyToolTipValue = me.translateService.translate('Common.copy');
+                                me.copyToolTipWidth = "300px";
+                            }
+                            me.moveText = me.translateService.translate('Common.move');
+                            if (me.translateService.translate('Common.move').length > 6) {
+                                me.moveText = (me.translateService.translate('Common.move').substring(0, 6) + '...');
+                                me.moveToolTipValue = me.translateService.translate('Common.move');
+                                me.moveToolTipWidth = "300px";
+                            }
+                            me.excelText = me.translateService.translate('Common.excel');
+                            if (me.translateService.translate('Common.excel').length > 6) {
+                                me.excelText = (me.translateService.translate('Common.excel').substring(0, 6) + '...');
+                                me.excelToolTipValue = me.translateService.translate('Common.excel');
+                                me.excelToolTipWidth = "300px";
                             }
+                            me.deleteText = me.translateService.translate('Common.delete');
+                            if (me.translateService.translate('Common.delete').length > 6) {
+                                me.deleteText = (me.translateService.translate('Common.delete').substring(0, 6) + '...');
+                                me.deleteToolTipValue = me.translateService.translate('Common.delete');
+                                me.deleteToolTipWidth = "300px";
+                            }
+                            me.isWidgetLoaded = true;
+                            widgetConfigFilter.appConfig = me.appConfig;
+                            widgetConfigFilter.widgetInfo = widgetInfo;
+                            widgetConfigFilter.configChanges = me.getConfigChanges(false);
+                            widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
+                            widgetConfigFilter.globalFilter = me.globalFilter;
+                            widgetConfigFilter.dashboardInfo = me.dashboardInfo;
+                            //this.widgetElement.loadContent(widgetConfigFilter);
+                            me.widgetLoaded.emit();
+                            await me.setLock(widgetConfigFilter.config);
+                            await me.setDownloadIcon();
                         });
-                        if (typeof (me.widgetElement.titleLineEnabled) != 'undefined') {
-                            let titleLineEnabled = me.widgetElement.titleLineEnabled();
-                            if (titleLineEnabled) {
-                                me.enableTitleLine = titleLineEnabled;
-                                me.enableTitleLineActual = titleLineEnabled;
+                    }.bind(this);
+                    this.widgetElementHandler = handler;
+                    document.body.addEventListener('widgetinitiated' + widgetInfo.widgetInstanceId, handler);
+                    this.ctlWidget.nativeElement.appendChild(this.widgetElement);
+                });
+            });
+        }
+        else {
+            widgetInfo.scriptUrl = '/assets/widgets/document/ra-document-widget/main.js';
+            widgetInfo.component = 'RADocumentwidgetComponent';
+            loadRemoteModule({
+                type: 'module',
+                remoteEntry: widgetInfo.scriptUrl,
+                exposedModule: './' + widgetInfo.component
+            }).then((m) => {
+                var component = me.ctlWidgetModule.createComponent(m[widgetInfo.component]);
+                let instance = component.instance;
+                let widgetElement = component.location.nativeElement;
+                this.setNotConfiguredState(widgetInfo);
+                let appModule = this.data.widgetInfo.widgetName;
+                if (this.data.widgetInfo.applicationModule && this.data.widgetInfo.applicationModule.length > 0) {
+                    appModule = this.data.widgetInfo.applicationModule;
+                }
+                this.translateService.loadTranslations(this.appConfig.appManagementBaseUrl, appModule, false).then(() => {
+                    me.widgetElement = widgetElement;
+                    me.widgetElement.setAttribute("widget-instance-id", widgetInfo.widgetInstanceId);
+                    instance.widgetInstanceId = widgetInfo.widgetInstanceId;
+                    let handler = function (event) {
+                        setTimeout(async () => {
+                            instance.onWidgetRespond.subscribe((e) => {
+                                var type = e.type;
+                                switch (type) {
+                                    case 'onDataLoad':
+                                        if (e.data)
+                                            me.showPanel = true;
+                                        else
+                                            me.showPanel = false;
+                                        break;
+                                    case 'onConfigEditClicked':
+                                        me.editWidget();
+                                        break;
+                                    case 'onEnableDefaultState':
+                                        me.setEmptyState(e.data);
+                                        break;
+                                    case 'onSetTitleUnderline':
+                                        if (e.data == true)
+                                            me.enableTitleLine = true;
+                                        else
+                                            me.enableTitleLine = me.enableTitleLineActual;
+                                        break;
+                                    case 'onWidgetTitleHidden':
+                                        if (e.data == true)
+                                            me.hideTitle = true;
+                                        else
+                                            me.hideTitle = false;
+                                        break;
+                                    case 'onUpdateLockData':
+                                        me.setLock(e.data);
+                                        break;
+                                    case 'onGlobalFilterApplicableCheck':
+                                        me.setInapplicableFilters(e.data, widgetInfo.widgetInstanceId);
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            });
+                            if (typeof (me.widgetElement.titleLineEnabled) != 'undefined') {
+                                let titleLineEnabled = me.widgetElement.titleLineEnabled();
+                                if (titleLineEnabled) {
+                                    me.enableTitleLine = titleLineEnabled;
+                                    me.enableTitleLineActual = titleLineEnabled;
+                                }
                             }
-                        }
-                        me.editText = me.translateService.translate('Common.edit');
-                        if (me.translateService.translate('Common.edit').length > 6) {
-                            me.editText = (me.translateService.translate('Common.edit').substring(0, 6) + '...');
-                            me.editToolTipValue = me.translateService.translate('Common.edit');
-                            me.editToolTipWidth = "300px";
-                        }
-                        me.copyText = me.translateService.translate('Common.copy');
-                        if (me.translateService.translate('Common.copy').length > 6) {
-                            me.copyText = (me.translateService.translate('Common.copy').substring(0, 6) + '...');
-                            me.copyToolTipValue = me.translateService.translate('Common.copy');
-                            me.copyToolTipWidth = "300px";
-                        }
-                        me.moveText = me.translateService.translate('Common.move');
-                        if (me.translateService.translate('Common.move').length > 6) {
-                            me.moveText = (me.translateService.translate('Common.move').substring(0, 6) + '...');
-                            me.moveToolTipValue = me.translateService.translate('Common.move');
-                            me.moveToolTipWidth = "300px";
-                        }
-                        me.excelText = me.translateService.translate('Common.excel');
-                        if (me.translateService.translate('Common.excel').length > 6) {
-                            me.excelText = (me.translateService.translate('Common.excel').substring(0, 6) + '...');
-                            me.excelToolTipValue = me.translateService.translate('Common.excel');
-                            me.excelToolTipWidth = "300px";
-                        }
-                        me.deleteText = me.translateService.translate('Common.delete');
-                        if (me.translateService.translate('Common.delete').length > 6) {
-                            me.deleteText = (me.translateService.translate('Common.delete').substring(0, 6) + '...');
-                            me.deleteToolTipValue = me.translateService.translate('Common.delete');
-                            me.deleteToolTipWidth = "300px";
-                        }
-                        me.isWidgetLoaded = true;
-                        widgetConfigFilter.appConfig = me.appConfig;
-                        widgetConfigFilter.widgetInfo = widgetInfo;
-                        widgetConfigFilter.configChanges = me.getConfigChanges(false);
-                        widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
-                        widgetConfigFilter.globalFilter = me.globalFilter;
-                        me.widgetElement.loadContent(widgetConfigFilter);
-                        await me.setLock(widgetConfigFilter.config);
-                        await me.setDownloadIcon();
-                    });
-                }.bind(this);
-                this.widgetElementHandler = handler;
-                document.body.addEventListener('widgetinitiated' + widgetInfo.widgetInstanceId, handler);
-                this.ctlWidget.nativeElement.appendChild(this.widgetElement);
+                            me.editText = me.translateService.translate('Common.edit');
+                            if (me.translateService.translate('Common.edit').length > 6) {
+                                me.editText = (me.translateService.translate('Common.edit').substring(0, 6) + '...');
+                                me.editToolTipValue = me.translateService.translate('Common.edit');
+                                me.editToolTipWidth = "300px";
+                            }
+                            me.copyText = me.translateService.translate('Common.copy');
+                            if (me.translateService.translate('Common.copy').length > 6) {
+                                me.copyText = (me.translateService.translate('Common.copy').substring(0, 6) + '...');
+                                me.copyToolTipValue = me.translateService.translate('Common.copy');
+                                me.copyToolTipWidth = "300px";
+                            }
+                            me.moveText = me.translateService.translate('Common.move');
+                            if (me.translateService.translate('Common.move').length > 6) {
+                                me.moveText = (me.translateService.translate('Common.move').substring(0, 6) + '...');
+                                me.moveToolTipValue = me.translateService.translate('Common.move');
+                                me.moveToolTipWidth = "300px";
+                            }
+                            me.excelText = me.translateService.translate('Common.excel');
+                            if (me.translateService.translate('Common.excel').length > 6) {
+                                me.excelText = (me.translateService.translate('Common.excel').substring(0, 6) + '...');
+                                me.excelToolTipValue = me.translateService.translate('Common.excel');
+                                me.excelToolTipWidth = "300px";
+                            }
+                            me.deleteText = me.translateService.translate('Common.delete');
+                            if (me.translateService.translate('Common.delete').length > 6) {
+                                me.deleteText = (me.translateService.translate('Common.delete').substring(0, 6) + '...');
+                                me.deleteToolTipValue = me.translateService.translate('Common.delete');
+                                me.deleteToolTipWidth = "300px";
+                            }
+                            me.isWidgetLoaded = true;
+                            widgetConfigFilter.appConfig = me.appConfig;
+                            widgetConfigFilter.widgetInfo = widgetInfo;
+                            widgetConfigFilter.configChanges = me.getConfigChanges(false);
+                            widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
+                            widgetConfigFilter.globalFilter = me.globalFilter;
+                            instance.loadContent(widgetConfigFilter);
+                            await me.setLock(widgetConfigFilter.config);
+                            await me.setDownloadIcon();
+                        });
+                    }.bind(this);
+                    this.widgetElementHandler = handler;
+                    document.body.addEventListener('widgetinitiated' + widgetInfo.widgetInstanceId, handler);
+                });
             });
-        });
+        }
     }
     /**To set Default State for the widget when it is not configured */
     setNotConfiguredState(widgetInfo, forceEnable = false) {
@@ -4184,7 +4347,8 @@ class RAWidgetContainer {
             globalFilter: this.globalFilter,
             appConfig: this.appConfig,
             widgetInfo: widgetInfo,
-            configChanges: this.getConfigChanges(configChanged)
+            configChanges: this.getConfigChanges(configChanged),
+            dashboardInfo: this.dashboardInfo
         };
         if (widgetContainerContext.isWidgetLoaded) {
             if (this.widgetElement && typeof (this.widgetElement.setConfigFilter) == 'function') {
@@ -4346,9 +4510,12 @@ class RAWidgetContainer {
         let html = '<div id="ra-db-widget-menu"' + 'style="' + style + '" class="download-content dropdown-content widget-config-item dropdown-click" style="z-index: 1002;">';
         let settings = '';
         if (this.isWidgetMgmnt) {
-            settings += this.getHtmlForButton('wcEditWidget', 'fal fa-edit', this.editText);
-            settings += this.getHtmlForButton('wcCopyWidget', 'fal fa-copy', this.copyText);
-            settings += this.getHtmlForButton('wcMoveWidget', 'fal fa-arrows-alt', this.moveText);
+            if (!this.data.widgetInfo.templateWidgetSettings || !this.data.widgetInfo.templateWidgetSettings.hideEdit)
+                settings += this.getHtmlForButton('wcEditWidget', 'fal fa-edit', this.editText);
+            if (!this.data.widgetInfo.templateWidgetSettings || !this.data.widgetInfo.templateWidgetSettings.hideCopy)
+                settings += this.getHtmlForButton('wcCopyWidget', 'fal fa-copy', this.copyText);
+            if (!this.data.widgetInfo.templateWidgetSettings || !this.data.widgetInfo.templateWidgetSettings.hideMove)
+                settings += this.getHtmlForButton('wcMoveWidget', 'fal fa-arrows-alt', this.moveText);
         }
         let customPageParams = false;
         if (this.data.widgetInfo && this.data.widgetInfo.widgetSettings) {
@@ -4357,14 +4524,14 @@ class RAWidgetContainer {
                 customPageParams = true;
             }
         }
-        if ((this.detailPageUrl || customPageParams) && this.checkVisitLinkVisiblity()) {
+        if (!this.data.widgetInfo.templateWidgetSettings || !this.data.widgetInfo.templateWidgetSettings.hideVisitPage && (this.detailPageUrl || customPageParams) && this.checkVisitLinkVisiblity()) {
             settings += '<a style="max-height: 30px;align-items: center;align-content: center; display: flex;" id="wcVisitWidget">';
             settings += '<i style="padding-left: 4px;font-size: 27px !important;" class="fal fa-angle-right"></i> ';
             settings += '<span style="padding-left: 11px;margin-top: 2px;" style="padding-left: 6px;">';
             settings += this.translateService.translate('Common.visitpage');
             settings += '</span></a>';
         }
-        if ((this.detailPageUrl && this.checkVisitLinkVisiblity()) || this.isWidgetMgmnt) {
+        if (!this.data.widgetInfo.templateWidgetSettings || !this.data.widgetInfo.templateWidgetSettings.hideVisitPage && (this.detailPageUrl && this.checkVisitLinkVisiblity()) || this.isWidgetMgmnt) {
             html += '<div style="color: #9FA0A4;font-size: 12px;padding-top: 8px;padding-left: 12px;">';
             html += this.translateService.translate('Common.settings') + '</div>';
             html += settings;
@@ -4396,7 +4563,7 @@ class RAWidgetContainer {
         if (this.isDownloadIconVisible && this.isWidgetMgmnt && this.showExcell) {
             html += this.getHr();
         }
-        if (this.isWidgetMgmnt) {
+        if (this.isWidgetMgmnt && !this.data.widgetInfo.templateWidgetSettings || !this.data.widgetInfo.templateWidgetSettings.hideDelete) {
             html += '<a id="wcWidgetDelete"><i class="fal fa-times" style="padding-left: 3px;color: red;"></i><span>';
             html += this.deleteText;
             html += '</span></a>';
@@ -4491,15 +4658,18 @@ class RAWidgetContainer {
         else
             return item;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RAWidgetContainer, deps: [{ token: RaDashboardService }, { token: i2$1.NgxUiLoaderService }, { token: i3.RATranslateService }, { token: i0.NgZone }, { token: i4.NotifierService }, { token: i0.Renderer2 }, { token: i3.RAPermissionService }, { token: i3.DomService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: RAWidgetContainer, selector: "ra-widget-container", inputs: { widgetInstanceId: ["widget-instance-id", "widgetInstanceId"], globalFilter: ["global-filter", "globalFilter"], data: "data", raDashboardEventBus: ["event-bus", "raDashboardEventBus"], appConfig: ["app-config", "appConfig"], width: ["widget-width", "width"], height: ["widget-height", "height"], gridCellHeight: ["grid-cell-height", "gridCellHeight"], setResized: ["dom-resized", "setResized"] }, outputs: { widgetDeleted: "widgetDeleted", updateAppliedFilters: "updateAppliedFilters" }, viewQueries: [{ propertyName: "ctlWidget", first: true, predicate: ["ctlWidget"], descendants: true }, { propertyName: "widgetDropdown", first: true, predicate: ["widgetDropdown"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "wcWrapper", first: true, predicate: ["wcWrapper"], descendants: true }, { propertyName: "banPopupDiv", first: true, predicate: ["banPopupDiv"], descendants: true }, { propertyName: "lockPopupDiv", first: true, predicate: ["lockPopupDiv"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #wcWrapper class=\"wc-wrapper\" (mouseenter)=\"mouseHover(true)\" (mouseleave)=\"mouseHover(false)\"\r\n  [ngStyle]=\"{'margin-left': noPadding?'0px':'15px','margin-right': noPadding?'0px':'15px'}\">\r\n  <div class=\"wcheader widget-move\" *ngIf=\"!hideTitle\"\r\n    [ngClass]=\"{'underLine': enableTitleLine || isWidgetStateApplicable}\">\r\n    <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;padding-right: 0px;\">\r\n      <div style=\"display:flex;margin-top:10px;\"\r\n        [ngStyle]=\"{'margin-left': noPadding?'15px':'0px','margin-right': noPadding?'15px':'0px'}\">\r\n        <div class=\"col-9 float-left title-label\">\r\n          <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n            <div [hidden]=\"hideTitle\" style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\"\r\n              (mouseover)=\"mouseOver($event)\" #searchInput>{{WidgetDisplayName}}</div>\r\n          </ra-tooltip>\r\n        </div>\r\n        <div class=\"col-3\" style=\"cursor:default;padding-right: 0px;\">        \r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div  #banPopupDiv (mouseover)=\"openPopup(inapplicableIconTitle,inapplicableFilters,inapplicableIconFooter,'innaplicable')\" (mouseout)=\"closePopup()\" class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!inapplicableFilters || inapplicableFilters.length == 0 || !globalFilter || globalFilter == '{}'\">\r\n              <i class=\"fal fa-ban lock\"></i>            \r\n            </div>\r\n            <div #lockPopupDiv (mouseover)=\"openPopup(lockIconTitle,lockDetails,lockIconFooter,'lock',lockTemplateInfo)\" (mouseout)=\"closePopup()\" class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!lockDetails && !lockTemplateInfo\">\r\n              <i class=\"fal fa-lock lock\"></i>             \r\n            </div>\r\n            <div class=\"widget-menu\" style=\"width:10px;\"\r\n              [ngClass]=\"{'widget-menu-show': isMouseHover && showSettingsLink}\">\r\n              <div class=\"dropbtn title-bar-icon\">\r\n                <i (click)=\"showDropDown($event)\" #widgetDropdown class=\"fal fa-ellipsis-v widget-menu-ellipse\"></i>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"hideTitle\" class=\"wcheader widget-move\"\r\n    style=\"height: 45px;width: 95%;cursor: move;z-index: 99;opacity: 0;\">\r\n  </div>\r\n  <div  *ngIf=\"hideTitle\" class=\"widget-menu widget-menu-title-hidden\" [ngClass]=\"{'widget-menu-show': isMouseHover && showSettingsLink}\">\r\n    <div class=\"dropbtn title-bar-icon\">\r\n      <i (click)=\"showDropDown($event)\" class=\"fal fa-ellipsis-v\" style=\"text-align: center;\"></i>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\" [ngStyle]=\"{'bottom': noPadding?'0px':'10px','top':hideTitle?'10px':'46px'}\">\r\n    <div [hidden]=\"isWidgetStateApplicable\" class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn':  showPanel}\">\r\n      <div class=\"lds-roller\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"wc\" [hidden]=\"isWidgetStateApplicable\">\r\n      <div #ctlWidget></div>\r\n    </div>\r\n    <div *ngIf=\"isWidgetStateApplicable\" class=\"defaultConfig\">\r\n      <ra-widget-state style=\"width: 100%;height: 100%;\" [isWidgetStateApplicable]=\"isWidgetStateApplicable\"\r\n        [isGlobalFilterApplied]=\"isGlobalFilterApplied\" [widgetEmptyState]=\"widgetEmptyState\"\r\n        (editWidgetClicked)=editWidget() [widthCol]=\"width\" [heightCol]=\"height\">\r\n      </ra-widget-state>\r\n    </div>\r\n    <div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.TooltipControl, selector: "ra-tooltip", inputs: ["data", "url", "value", "key", "dataField", "position", "width", "count", "moreItemText", "reset", "disable-tooltip", "set-top-padding"], outputs: ["dataLoaded"] }, { kind: "component", type: i6.WidgetStateControl, selector: "ra-widget-state", inputs: ["isWidgetStateApplicable", "isGlobalFilterApplied", "widgetEmptyState", "widgetEmptyDataText", "widthCol", "heightCol"], outputs: ["editWidgetClicked"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RAWidgetContainer, deps: [{ token: RaDashboardService }, { token: i2$1.NgxUiLoaderService }, { token: i3.RATranslateService }, { token: i0.NgZone }, { token: i4.NotifierService }, { token: i0.Renderer2 }, { token: i3.RAPermissionService }, { token: i3.DomService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: RAWidgetContainer, selector: "ra-widget-container", inputs: { widgetInstanceId: ["widget-instance-id", "widgetInstanceId"], globalFilter: ["global-filter", "globalFilter"], dashboardInfo: ["dashboard-info", "dashboardInfo"], data: "data", raDashboardEventBus: ["event-bus", "raDashboardEventBus"], appConfig: ["app-config", "appConfig"], width: ["widget-width", "width"], height: ["widget-height", "height"], gridCellHeight: ["grid-cell-height", "gridCellHeight"], bulkActionData: ["bulk-action-data", "bulkActionData"], canLoadData: "canLoadData", setResized: ["dom-resized", "setResized"] }, outputs: { widgetDeleted: "widgetDeleted", updateAppliedFilters: "updateAppliedFilters", dataLoaded: "dataLoaded", widgetLoaded: "widgetLoaded" }, viewQueries: [{ propertyName: "ctlWidget", first: true, predicate: ["ctlWidget"], descendants: true }, { propertyName: "ctlWidgetModule", first: true, predicate: ["ctlWidgetModule"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "widgetDropdown", first: true, predicate: ["widgetDropdown"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "wcWrapper", first: true, predicate: ["wcWrapper"], descendants: true }, { propertyName: "banPopupDiv", first: true, predicate: ["banPopupDiv"], descendants: true }, { propertyName: "lockPopupDiv", first: true, predicate: ["lockPopupDiv"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #wcWrapper class=\"wc-wrapper\" (mouseenter)=\"mouseHover(true)\" (mouseleave)=\"mouseHover(false)\"\r\n  [ngStyle]=\"{'margin-left': noPadding?'0px':'15px','margin-right': noPadding?'0px':'15px'}\">\r\n  <div class=\"wcheader widget-move\" *ngIf=\"!hideTitle\"\r\n    [ngClass]=\"{'underLine': enableTitleLine || isWidgetStateApplicable}\">\r\n    <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;padding-right: 0px;\">\r\n      <div style=\"display:flex;margin-top:10px;\"\r\n        [ngStyle]=\"{'margin-left': noPadding?'15px':'0px','margin-right': noPadding?'15px':'0px'}\">\r\n        <div class=\"col-9 float-left title-label\">\r\n          <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n            <div [hidden]=\"hideTitle\" style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\"\r\n              (mouseover)=\"mouseOver($event)\" #searchInput>{{WidgetDisplayName}}</div>\r\n          </ra-tooltip>\r\n        </div>\r\n        <div class=\"col-3\" style=\"cursor:default;padding-right: 0px;\">        \r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div  #banPopupDiv (mouseover)=\"openPopup(inapplicableIconTitle,inapplicableFilters,inapplicableIconFooter,'innaplicable')\" (mouseout)=\"closePopup()\" class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!inapplicableFilters || inapplicableFilters.length == 0 || !globalFilter || globalFilter == '{}'\">\r\n              <i class=\"fal fa-ban lock\"></i>            \r\n            </div>\r\n            <div #lockPopupDiv (mouseover)=\"openPopup(lockIconTitle,lockDetails,lockIconFooter,'lock',lockTemplateInfo)\" (mouseout)=\"closePopup()\" class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!lockDetails && !lockTemplateInfo\">\r\n              <i class=\"fal fa-lock lock\"></i>             \r\n            </div>\r\n            <div class=\"widget-menu\" style=\"width:10px;\"\r\n              [ngClass]=\"{'widget-menu-show': isMouseHover && showSettingsLink}\">\r\n              <div class=\"dropbtn title-bar-icon\">\r\n                <i (click)=\"showDropDown($event)\" #widgetDropdown class=\"fal fa-ellipsis-v widget-menu-ellipse\"></i>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"hideTitle\" class=\"wcheader widget-move\"\r\n    style=\"height: 45px;width: 95%;cursor: move;z-index: 99;opacity: 0;\">\r\n  </div>\r\n  <div  *ngIf=\"hideTitle\" class=\"widget-menu widget-menu-title-hidden\" [ngClass]=\"{'widget-menu-show': isMouseHover && showSettingsLink}\">\r\n    <div class=\"dropbtn title-bar-icon\">\r\n      <i (click)=\"showDropDown($event)\" class=\"fal fa-ellipsis-v\" style=\"text-align: center;\"></i>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\" [ngStyle]=\"{'bottom': noPadding?'0px':'10px','top':hideTitle?'10px':'46px'}\">\r\n    <div [hidden]=\"isWidgetStateApplicable\" class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn':  showPanel}\">\r\n      <div class=\"lds-roller\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"wc\" [hidden]=\"isWidgetStateApplicable\">\r\n      <div [hidden]=\"!isCustomElement\" #ctlWidget></div>\r\n      <div [hidden]=\"isCustomElement\">\r\n        <ng-container #ctlWidgetModule></ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"isWidgetStateApplicable\" class=\"defaultConfig\">\r\n      <ra-widget-state style=\"width: 100%;height: 100%;\" [isWidgetStateApplicable]=\"isWidgetStateApplicable\"\r\n        [isGlobalFilterApplied]=\"isGlobalFilterApplied\" [widgetEmptyState]=\"widgetEmptyState\"\r\n        (editWidgetClicked)=editWidget() [widthCol]=\"width\" [heightCol]=\"height\">\r\n      </ra-widget-state>\r\n    </div>\r\n    <div>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.TooltipControl, selector: "ra-tooltip", inputs: ["data", "url", "value", "key", "dataField", "position", "width", "count", "moreItemText", "reset", "disable-tooltip", "set-top-padding"], outputs: ["dataLoaded"] }, { kind: "component", type: i6.WidgetStateControl, selector: "ra-widget-state", inputs: ["isWidgetStateApplicable", "isGlobalFilterApplied", "widgetEmptyState", "widgetEmptyDataText", "widthCol", "heightCol"], outputs: ["editWidgetClicked"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RAWidgetContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RAWidgetContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'ra-widget-container', template: "<div #wcWrapper class=\"wc-wrapper\" (mouseenter)=\"mouseHover(true)\" (mouseleave)=\"mouseHover(false)\"\r\n  [ngStyle]=\"{'margin-left': noPadding?'0px':'15px','margin-right': noPadding?'0px':'15px'}\">\r\n  <div class=\"wcheader widget-move\" *ngIf=\"!hideTitle\"\r\n    [ngClass]=\"{'underLine': enableTitleLine || isWidgetStateApplicable}\">\r\n    <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;padding-right: 0px;\">\r\n      <div style=\"display:flex;margin-top:10px;\"\r\n        [ngStyle]=\"{'margin-left': noPadding?'15px':'0px','margin-right': noPadding?'15px':'0px'}\">\r\n        <div class=\"col-9 float-left title-label\">\r\n          <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n            <div [hidden]=\"hideTitle\" style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\"\r\n              (mouseover)=\"mouseOver($event)\" #searchInput>{{WidgetDisplayName}}</div>\r\n          </ra-tooltip>\r\n        </div>\r\n        <div class=\"col-3\" style=\"cursor:default;padding-right: 0px;\">        \r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div  #banPopupDiv (mouseover)=\"openPopup(inapplicableIconTitle,inapplicableFilters,inapplicableIconFooter,'innaplicable')\" (mouseout)=\"closePopup()\" class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!inapplicableFilters || inapplicableFilters.length == 0 || !globalFilter || globalFilter == '{}'\">\r\n              <i class=\"fal fa-ban lock\"></i>            \r\n            </div>\r\n            <div #lockPopupDiv (mouseover)=\"openPopup(lockIconTitle,lockDetails,lockIconFooter,'lock',lockTemplateInfo)\" (mouseout)=\"closePopup()\" class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!lockDetails && !lockTemplateInfo\">\r\n              <i class=\"fal fa-lock lock\"></i>             \r\n            </div>\r\n            <div class=\"widget-menu\" style=\"width:10px;\"\r\n              [ngClass]=\"{'widget-menu-show': isMouseHover && showSettingsLink}\">\r\n              <div class=\"dropbtn title-bar-icon\">\r\n                <i (click)=\"showDropDown($event)\" #widgetDropdown class=\"fal fa-ellipsis-v widget-menu-ellipse\"></i>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"hideTitle\" class=\"wcheader widget-move\"\r\n    style=\"height: 45px;width: 95%;cursor: move;z-index: 99;opacity: 0;\">\r\n  </div>\r\n  <div  *ngIf=\"hideTitle\" class=\"widget-menu widget-menu-title-hidden\" [ngClass]=\"{'widget-menu-show': isMouseHover && showSettingsLink}\">\r\n    <div class=\"dropbtn title-bar-icon\">\r\n      <i (click)=\"showDropDown($event)\" class=\"fal fa-ellipsis-v\" style=\"text-align: center;\"></i>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\" [ngStyle]=\"{'bottom': noPadding?'0px':'10px','top':hideTitle?'10px':'46px'}\">\r\n    <div [hidden]=\"isWidgetStateApplicable\" class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn':  showPanel}\">\r\n      <div class=\"lds-roller\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"wc\" [hidden]=\"isWidgetStateApplicable\">\r\n      <div #ctlWidget></div>\r\n    </div>\r\n    <div *ngIf=\"isWidgetStateApplicable\" class=\"defaultConfig\">\r\n      <ra-widget-state style=\"width: 100%;height: 100%;\" [isWidgetStateApplicable]=\"isWidgetStateApplicable\"\r\n        [isGlobalFilterApplied]=\"isGlobalFilterApplied\" [widgetEmptyState]=\"widgetEmptyState\"\r\n        (editWidgetClicked)=editWidget() [widthCol]=\"width\" [heightCol]=\"height\">\r\n      </ra-widget-state>\r\n    </div>\r\n    <div>\r\n    </div>\r\n  </div>\r\n</div>" }]
+            args: [{ selector: 'ra-widget-container', template: "<div #wcWrapper class=\"wc-wrapper\" (mouseenter)=\"mouseHover(true)\" (mouseleave)=\"mouseHover(false)\"\r\n  [ngStyle]=\"{'margin-left': noPadding?'0px':'15px','margin-right': noPadding?'0px':'15px'}\">\r\n  <div class=\"wcheader widget-move\" *ngIf=\"!hideTitle\"\r\n    [ngClass]=\"{'underLine': enableTitleLine || isWidgetStateApplicable}\">\r\n    <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;padding-right: 0px;\">\r\n      <div style=\"display:flex;margin-top:10px;\"\r\n        [ngStyle]=\"{'margin-left': noPadding?'15px':'0px','margin-right': noPadding?'15px':'0px'}\">\r\n        <div class=\"col-9 float-left title-label\">\r\n          <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n            <div [hidden]=\"hideTitle\" style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\"\r\n              (mouseover)=\"mouseOver($event)\" #searchInput>{{WidgetDisplayName}}</div>\r\n          </ra-tooltip>\r\n        </div>\r\n        <div class=\"col-3\" style=\"cursor:default;padding-right: 0px;\">        \r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div  #banPopupDiv (mouseover)=\"openPopup(inapplicableIconTitle,inapplicableFilters,inapplicableIconFooter,'innaplicable')\" (mouseout)=\"closePopup()\" class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!inapplicableFilters || inapplicableFilters.length == 0 || !globalFilter || globalFilter == '{}'\">\r\n              <i class=\"fal fa-ban lock\"></i>            \r\n            </div>\r\n            <div #lockPopupDiv (mouseover)=\"openPopup(lockIconTitle,lockDetails,lockIconFooter,'lock',lockTemplateInfo)\" (mouseout)=\"closePopup()\" class=\"title-bar-lock-icon lock-dropdown\" [hidden]=\"!lockDetails && !lockTemplateInfo\">\r\n              <i class=\"fal fa-lock lock\"></i>             \r\n            </div>\r\n            <div class=\"widget-menu\" style=\"width:10px;\"\r\n              [ngClass]=\"{'widget-menu-show': isMouseHover && showSettingsLink}\">\r\n              <div class=\"dropbtn title-bar-icon\">\r\n                <i (click)=\"showDropDown($event)\" #widgetDropdown class=\"fal fa-ellipsis-v widget-menu-ellipse\"></i>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"hideTitle\" class=\"wcheader widget-move\"\r\n    style=\"height: 45px;width: 95%;cursor: move;z-index: 99;opacity: 0;\">\r\n  </div>\r\n  <div  *ngIf=\"hideTitle\" class=\"widget-menu widget-menu-title-hidden\" [ngClass]=\"{'widget-menu-show': isMouseHover && showSettingsLink}\">\r\n    <div class=\"dropbtn title-bar-icon\">\r\n      <i (click)=\"showDropDown($event)\" class=\"fal fa-ellipsis-v\" style=\"text-align: center;\"></i>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\" [ngStyle]=\"{'bottom': noPadding?'0px':'10px','top':hideTitle?'10px':'46px'}\">\r\n    <div [hidden]=\"isWidgetStateApplicable\" class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn':  showPanel}\">\r\n      <div class=\"lds-roller\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n    <div class=\"wc\" [hidden]=\"isWidgetStateApplicable\">\r\n      <div [hidden]=\"!isCustomElement\" #ctlWidget></div>\r\n      <div [hidden]=\"isCustomElement\">\r\n        <ng-container #ctlWidgetModule></ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"isWidgetStateApplicable\" class=\"defaultConfig\">\r\n      <ra-widget-state style=\"width: 100%;height: 100%;\" [isWidgetStateApplicable]=\"isWidgetStateApplicable\"\r\n        [isGlobalFilterApplied]=\"isGlobalFilterApplied\" [widgetEmptyState]=\"widgetEmptyState\"\r\n        (editWidgetClicked)=editWidget() [widthCol]=\"width\" [heightCol]=\"height\">\r\n      </ra-widget-state>\r\n    </div>\r\n    <div>\r\n    </div>\r\n  </div>\r\n</div>" }]
         }], ctorParameters: () => [{ type: RaDashboardService }, { type: i2$1.NgxUiLoaderService }, { type: i3.RATranslateService }, { type: i0.NgZone }, { type: i4.NotifierService }, { type: i0.Renderer2 }, { type: i3.RAPermissionService }, { type: i3.DomService }], propDecorators: { ctlWidget: [{
                 type: ViewChild,
                 args: ['ctlWidget', { static: false }]
+            }], ctlWidgetModule: [{
+                type: ViewChild,
+                args: ['ctlWidgetModule', { read: ViewContainerRef, static: true }]
             }], widgetDropdown: [{
                 type: ViewChild,
                 args: ['widgetDropdown', { static: false }]
@@ -4521,6 +4691,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
             }], globalFilter: [{
                 type: Input,
                 args: ['global-filter']
+            }], dashboardInfo: [{
+                type: Input,
+                args: ['dashboard-info']
             }], data: [{
                 type: Input,
                 args: ['data']
@@ -4539,10 +4712,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
             }], gridCellHeight: [{
                 type: Input,
                 args: ['grid-cell-height']
+            }], bulkActionData: [{
+                type: Input,
+                args: ['bulk-action-data']
+            }], canLoadData: [{
+                type: Input
             }], widgetDeleted: [{
                 type: Output
             }], updateAppliedFilters: [{
                 type: Output
+            }], dataLoaded: [{
+                type: Output
+            }], widgetLoaded: [{
+                type: Output
             }], setResized: [{
                 type: Input,
                 args: ['dom-resized']
@@ -4566,13 +4748,20 @@ class RADashboardArea {
         this.domResized = false;
         this.showEmptyDashboard = false;
         this.isWidgetMgmnt = false;
+        this.initialWidgetCount = 10;
+        this.currentLoadedIndex = 0;
+        this.loading = false;
         this.widgetHeight = 2;
         this.widgetWidth = 4;
         this.hideDashboardBanner = new EventEmitter();
     }
     ngOnInit() {
+        window.addEventListener('scroll', () => {
+            this.loadNext();
+        });
         this.isWidgetMgmnt = this.permissionService.hasPermission('ra.widgetmanagement');
         this.initiateGridsterConfig();
+        this.setEmptyDashboardConfig();
         this.lastViewType = this.responsiveService.IsDesktopView ? 'desktop' : 'mobile';
         this.responsiveService.resized.subscribe((isDesktop) => {
             if (this.lastViewType != (isDesktop ? 'desktop' : 'mobile') || !isDesktop) {
@@ -4601,6 +4790,11 @@ class RADashboardArea {
                 }, 100);
             }
         });
+        setTimeout(() => {
+            this.bulkActionClick = this.raDashboardEventBus.subscribe(RAEvent.BulkActionClick).subscribe((data) => {
+                this.bulkActionData = JSON.parse(JSON.stringify(data)); // To create a new reference;
+            });
+        });
     }
     ngOnChanges(changes) {
         this.isWidgetMgmnt = this.permissionService.hasPermission('ra.widgetmanagement');
@@ -4608,27 +4802,43 @@ class RADashboardArea {
             this.isWidgetLoaded = true;
             this.loadWidgets(this.userDashboardId, this.areaKey);
         }
+        this.initiateGridsterConfig();
         if (changes['raDashboardEventBus'] && changes['raDashboardEventBus'].currentValue != changes['raDashboardEventBus'].previousValue) {
             this.inititateEventBusSubscritions();
         }
     }
+    setEmptyDashboardConfig() {
+        if (this.dashboardInfo && this.dashboardInfo.templateConfig.emptyDashboardHeader) {
+            this.emptyDashboardTitle = this.translateService.translate("dashboard." + this.dashboardInfo.templateConfig.emptyDashboardHeader.titleKey);
+            this.emptyDashboardMsg1 = this.translateService.translate("dashboard." + this.dashboardInfo.templateConfig.emptyDashboardHeader.descriptionKey1);
+            this.emptyDashboardMsg2 = (this.dashboardInfo.templateConfig.emptyDashboardHeader.descriptionKey2) ? this.translateService.translate("dashboard." + this.dashboardInfo.templateConfig.emptyDashboardHeader.descriptionKey2) : '';
+            this.emptyDashboardButtonText = this.translateService.translate("dashboard." + this.dashboardInfo.templateConfig.emptyDashboardHeader.buttonTextKey);
+            this.emptyDashboardButtonIcon = this.dashboardInfo.templateConfig.emptyDashboardHeader.buttonIcon ? this.dashboardInfo.templateConfig.emptyDashboardHeader.buttonIcon : '';
+            this.emptyDashboardButtonAction = this.dashboardInfo.templateConfig.emptyDashboardHeader.buttonAction ? this.dashboardInfo.templateConfig.emptyDashboardHeader.buttonAction : '';
+        }
+    }
     /**To set GridsterConfig */
     initiateGridsterConfig() {
-        /**To override default configuration values to the gridster control */
-        this.options = this.responsiveService.getGridsterConfig(this.isWidgetMgmnt);
-        this.options.initCallback = (gridster) => {
-            if (this.options.api) {
-                this.gridcellHeight = this.options.api.getCurrentRowHeight();
-            }
-        };
-        this.options.itemChangeCallback = (item) => {
-            if (this.responsiveService.IsDesktopView) {
-                if (item.widgetInfo && item.widgetInfo.widgetInstanceId) {
-                    this.updateWidgetPosition(item.widgetInfo.widgetInstanceId);
+        if (this.dashboardInfo) {
+            /**To override default configuration values to the gridster control */
+            this.options = this.responsiveService.getGridsterConfig(this.isWidgetMgmnt, this.dashboardInfo.templateConfig.widget.canResize, this.dashboardInfo.templateConfig.widget.canMove);
+            this.options.initCallback = (gridster) => {
+                if (this.options.api) {
+                    this.gridcellHeight = this.options.api.getCurrentRowHeight();
                 }
-            }
-            this.setAreaHeight();
-        };
+            };
+            this.options.itemChangeCallback = (item) => {
+                if (this.responsiveService.IsDesktopView) {
+                    if (item.widgetInfo && item.widgetInfo.widgetInstanceId) {
+                        this.updateWidgetPosition(item.widgetInfo.widgetInstanceId);
+                    }
+                }
+                this.setAreaHeight();
+            };
+        }
+    }
+    widgetLoaded(widget) {
+        widget.canLoadData = true;
     }
     /** To initiate eventbus subsctiptions */
     inititateEventBusSubscritions() {
@@ -4647,6 +4857,11 @@ class RADashboardArea {
                 this.addWidget(e);
             });
         });
+        this.curatedFilterChange = this.raDashboardEventBus.subscribe(RAEvent.CuratedFilterChange).subscribe((e) => {
+            this.ngZone.run(() => {
+                this.loadWidgets(this.userDashboardId, this.areaKey);
+            });
+        });
         this.rearrangeWidgetClick = this.raDashboardEventBus.subscribe(RAEvent.RearrangeClicked).subscribe((e) => {
             this.ngZone.run(() => {
                 this.rearrangeWidgets();
@@ -4695,6 +4910,10 @@ class RADashboardArea {
             this.widgetLibraryDoneClick.unsubscribe();
         if (this.rearrangeWidgetClick)
             this.rearrangeWidgetClick.unsubscribe();
+        if (this.curatedFilterChange)
+            this.curatedFilterChange.unsubscribe();
+        if (this.bulkActionClick)
+            this.bulkActionClick.unsubscribe();
     }
     /**To update position/dimention of all widgets in the area */
     updateWidgets() {
@@ -4730,6 +4949,13 @@ class RADashboardArea {
     }
     /** To retrieve widgets based on userDashboardid and area name */
     loadWidgets(userDashboarId, areaKey) {
+        if (this.templateConfig && this.templateConfig.initialWidgetCount)
+            this.initialWidgetCount = this.templateConfig.initialWidgetCount;
+        window.scrollTo(0, 0);
+        if (location.href.indexOf('/kiosk/') > -1)
+            this.initialWidgetCount = 1000;
+        this.currentLoadedIndex = 0;
+        this.loading = false;
         let widgetInfo = {
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey
@@ -4749,8 +4975,7 @@ class RADashboardArea {
             this.checkPAMWidgets();
             if (widgets && widgets.length > 0) {
                 this.dashboardService.clientId = widgets[0].clientId;
-                this.widgetList = this.mapObjectListToGridsterItemList(widgets);
-                this.setAreaHeight();
+                this.loadWidgetsDelta();
                 this.raDashboardEventBus.publish(RAEvent.HideDashboardBanner, false);
             }
             else {
@@ -4759,6 +4984,43 @@ class RADashboardArea {
             }
         });
     }
+    loadWidgetsDelta() {
+        if (!this.loading) {
+            this.loading = true;
+            let widgets = this.mapObjectListToGridsterItemList(this.userWidgets.slice(this.currentLoadedIndex, (this.currentLoadedIndex + this.initialWidgetCount)));
+            this.currentLoadedIndex += this.initialWidgetCount;
+            this.widgetList.push(...widgets);
+            this.setAreaHeight();
+            setTimeout(() => {
+                this.loading = false;
+            });
+        }
+    }
+    dataLoaded(widgetElement) {
+        this.loadNext();
+    }
+    loadNext() {
+        if (this.divBottom) {
+            if (this.elementInViewport(this.divBottom.nativeElement)) {
+                this.loadWidgetsDelta();
+            }
+        }
+    }
+    elementInViewport(el) {
+        var top = el.offsetTop;
+        var left = el.offsetLeft;
+        var width = el.offsetWidth;
+        var height = el.offsetHeight;
+        while (el.offsetParent) {
+            el = el.offsetParent;
+            top += el.offsetTop;
+            left += el.offsetLeft;
+        }
+        return (top >= window.scrollY &&
+            left >= window.scrollX &&
+            (top + height) <= (window.scrollY + window.innerHeight) &&
+            (left + width) <= (window.scrollX + window.innerWidth));
+    }
     /** To set Area(Gridster) height dynamically as widgets are added/removed */
     setAreaHeight() {
         setTimeout(() => {
@@ -4800,22 +5062,22 @@ class RADashboardArea {
     }
     /** To remove a widget instance from dashboard and to save info in database */
     deleteWidget(widgetInstanceId, isalertDisabled = false) {
+        let widget = this.userWidgets.filter((item) => {
+            return item.widgetInstanceId === widgetInstanceId;
+        });
+        if (widget.length > 0) {
+            this.userWidgets.splice(this.userWidgets.indexOf(widget[0]), 1);
+        }
+        if (this.PAMWidgets.length > 0) {
+            var indx = this.PAMWidgets.indexOf(widgetInstanceId);
+            if (indx > -1)
+                this.PAMWidgets.splice(indx, 1);
+            this.checkPAMWidgets();
+        }
         let gridsterItem = this.widgetList.filter((item) => {
             return item.widgetInfo.widgetInstanceId === widgetInstanceId;
         });
         if (gridsterItem.length > 0) {
-            let widget = this.userWidgets.filter((item) => {
-                return item.widgetInstanceId === widgetInstanceId;
-            });
-            if (widget.length > 0) {
-                this.userWidgets.splice(this.userWidgets.indexOf(widget[0]), 1);
-            }
-            if (this.PAMWidgets.length > 0) {
-                var indx = this.PAMWidgets.indexOf(widgetInstanceId);
-                if (indx > -1)
-                    this.PAMWidgets.splice(indx, 1);
-                this.checkPAMWidgets();
-            }
             this.widgetList.splice(this.widgetList.indexOf(gridsterItem[0]), 1);
             this.setAreaHeight();
             if (!isalertDisabled) {
@@ -4829,11 +5091,15 @@ class RADashboardArea {
     }
     /**To rearrange widgets position in the dashboard, compactLeft&Up,compactLeft,compactUp,etc*/
     rearrangeWidgets() {
+        this.currentLoadedIndex = 0;
+        this.loading = false;
         for (let i = 0; i < this.userWidgets.length; i++) {
             this.userWidgets[i].position_x = 0;
             this.userWidgets[i].position_y = 0;
         }
-        this.widgetList = this.mapObjectListToGridsterItemList(this.userWidgets);
+        this.widgetList = [];
+        this.loadWidgetsDelta();
+        this.raDashboardEventBus.publish(RAEvent.HideDashboardBanner, false);
         if (this.widgetList.length > 0)
             this.updateWidgetPosition(this.widgetList[0].widgetInfo.widgetInstanceId);
         setTimeout(() => {
@@ -4865,29 +5131,32 @@ class RADashboardArea {
         this.ngxService.start();
         this.dashboardService.addWidget(data, this.appConfig).subscribe(widget => {
             this.userWidgets.push(widget);
-            let gridsterItem = this.responsiveService.getGridsterItem(widget);
-            this.widgetList.push(gridsterItem);
-            this.setAreaHeight();
-            if (this.options.api) {
-                let curRowHeight = Number(this.options.api.getCurrentRowHeight());
-                if (curRowHeight > 0) {
-                    widget.rowHeight = curRowHeight;
-                    this.gridcellHeight = curRowHeight;
+            if (this.currentLoadedIndex >= (this.userWidgets.length - 1)) {
+                this.currentLoadedIndex++;
+                let gridsterItem = this.responsiveService.getGridsterItem(widget);
+                this.widgetList.push(gridsterItem);
+                this.setAreaHeight();
+                if (this.options.api) {
+                    let curRowHeight = Number(this.options.api.getCurrentRowHeight());
+                    if (curRowHeight > 0) {
+                        widget.rowHeight = curRowHeight;
+                        this.gridcellHeight = curRowHeight;
+                    }
                 }
-            }
-            var widgetInstanceId = 0;
-            if (widget && widget.widgetInstanceId) {
-                widgetInstanceId = widget.widgetInstanceId;
-                /**To save added widget position in db */
-                if (this.responsiveService.IsDesktopView) {
-                    setTimeout(() => {
-                        this.updateWidgetPosition(widgetInstanceId);
-                    });
+                var widgetInstanceId = 0;
+                if (widget && widget.widgetInstanceId) {
+                    widgetInstanceId = widget.widgetInstanceId;
+                    /**To save added widget position in db */
+                    if (this.responsiveService.IsDesktopView) {
+                        setTimeout(() => {
+                            this.updateWidgetPosition(widgetInstanceId);
+                        });
+                    }
+                }
+                if (widget.settings && widget.settings.isPAMWidget) {
+                    this.PAMWidgets.push(widget.widgetInstanceId);
+                    this.checkPAMWidgets();
                 }
-            }
-            if (widget.settings && widget.settings.isPAMWidget) {
-                this.PAMWidgets.push(widget.widgetInstanceId);
-                this.checkPAMWidgets();
             }
             this.raDashboardEventBus.publish(RAEvent.WidgetAdded, widget);
         });
@@ -4917,12 +5186,15 @@ class RADashboardArea {
             });
         }
         this.userWidgets.push(data);
-        let gridsterItem = this.responsiveService.getGridsterItem(data);
-        this.widgetList.push(gridsterItem);
-        this.setAreaHeight();
-        if (data.settings && data.settings.isPAMWidget) {
-            this.PAMWidgets.push(data.widgetInstanceId);
-            this.checkPAMWidgets();
+        if (this.currentLoadedIndex >= (this.userWidgets.length - 1)) {
+            this.currentLoadedIndex++;
+            let gridsterItem = this.responsiveService.getGridsterItem(data);
+            this.widgetList.push(gridsterItem);
+            this.setAreaHeight();
+            if (data.settings && data.settings.isPAMWidget) {
+                this.PAMWidgets.push(data.widgetInstanceId);
+                this.checkPAMWidgets();
+            }
         }
     }
     mapObjectListToGridsterItemList(widgetList) {
@@ -4949,8 +5221,11 @@ class RADashboardArea {
         });
         return widgetListArray;
     }
-    addNewWidget() {
-        this.raDashboardEventBus.publish(RAEvent.AddNewWidgetToDashboard, null);
+    buttonClick() {
+        if (this.emptyDashboardButtonAction == "widgets")
+            this.raDashboardEventBus.publish(RAEvent.AddNewWidgetToDashboard, null);
+        else if (this.emptyDashboardButtonAction == "filter")
+            this.raDashboardEventBus.publish(RAEvent.GlobalFilterClick, null);
     }
     updateAppliedFilters(data) {
         this.raDashboardEventBus.publish(RAEvent.UpdateAppledFiterForInapplicableFilter, data);
@@ -4963,12 +5238,12 @@ class RADashboardArea {
             this.raDashboardEventBus.publish(RAEvent.ShowInapplicableFilterMessage, false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RADashboardArea, deps: [{ token: RaDashboardService }, { token: i0.NgZone }, { token: i2$1.NgxUiLoaderService }, { token: i3.RATranslateService }, { token: i4.NotifierService }, { token: RADashboardResponsiveService }, { token: i3.RAPermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: RADashboardArea, selector: "ra-dashboard-area", inputs: { userDashboardId: ["user-dashboard-id", "userDashboardId"], areaKey: ["area-key", "areaKey"], globalFilter: ["global-filter", "globalFilter"], raDashboardEventBus: ["event-bus", "raDashboardEventBus"], widgetHeight: ["widget-height", "widgetHeight"], widgetWidth: ["widget-width", "widgetWidth"], appConfig: ["app-config", "appConfig"] }, outputs: { hideDashboardBanner: "hideDashboardBanner" }, viewQueries: [{ propertyName: "gridWrapper", first: true, predicate: ["gridWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\" [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n  <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\"\r\n        (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\" [global-filter]=\"globalFilter\"\r\n        [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\" [widget-width]=\"item.cols\"\r\n        [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"\r\n        (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n      </ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n\r\n  <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n    <div class=\"empty-wrapper\">\r\n      <div></div>\r\n      <div class=\"m-1 empty-prefix\">\r\n        <i class=\"fal fa-edit edit-icon\"></i>\r\n        <span class=\"empty-title\">{{'dashboard.emptydashboard'|translate}}</span>\r\n      </div>\r\n      <div class=\"empty-content light\">\r\n        <div>\r\n          <div class=\"col-sm-12 empty-msg\">\r\n            {{'dashboard.emptydashboardmessage'|translate}} <br />\r\n            {{'dashboard.emptydashboardmessage2'|translate}}\r\n          </div>\r\n          <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm m-1 dashboard-button light\" (click)=\"addNewWidget()\">\r\n            <i class=\"fal fa-plus m-1\"></i>{{'dashboard.addawidgets'|translate}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <notifier-container></notifier-container>\r\n</div>", styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#ededed;overflow-y:hidden!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;box-shadow:0 1px 10px #0000000d}gridster-item:hover{box-shadow:0 1px 10px #00000026}@media screen and (max-width: 685px){.gridster-mobile{height:auto!important;margin-bottom:50px!important}}@media screen and (max-width: 350px){.gridster-mobile{min-height:330px!important;margin-bottom:0!important}}.empty-padding{padding:40px 20px 20px;background-color:#ededed;display:flex;justify-content:center;align-content:center}.empty-wrapper{display:flex;background-color:#fff;border-radius:8px;min-height:125px;width:72%}.empty-prefix{color:#32ad3c;font-size:18px;display:flex;align-items:center;padding:10px 30px;min-width:max-content;min-width:-moz-max-content}.empty-content{color:#333;border-left:solid 1px #a9afb1;width:100%;display:flex;align-items:center;padding:15px 30px 10px 40px}.empty-msg{padding:0 0 5px;font-size:16px}.dashboard-button{padding:5px 10px 5px 5px!important}.btnLib{background-color:#ededed;color:#333!important}.btn-sm,.btn-group-sm>.btn{padding:5px 20px 5px 5px}.edit-icon{color:#32ad3c;font-size:24px;margin-right:15px}.empty-title{margin-top:10px}@media screen and (max-width: 600px){.empty-padding{padding:10px;background-color:#ededed;width:100%;display:block}.empty-wrapper{display:flex;background-color:#fff;border-radius:8px;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:16px;display:flex;height:40px;padding:6px 10px 8px}.empty-content{color:#333;display:flex;padding:5px 10px 10px;margin-top:44px;margin-left:-185px;border-left:none}.empty-msg{padding:12px 10px 10px 5px;font-size:14px;border-top:solid 1px #a9afb1}.edit-icon{color:#32ad3c;font-size:20px;margin-right:6px}.empty-title{margin-top:6px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: i4.NotifierContainerComponent, selector: "notifier-container" }, { kind: "component", type: RAWidgetContainer, selector: "ra-widget-container", inputs: ["widget-instance-id", "global-filter", "data", "event-bus", "app-config", "widget-width", "widget-height", "grid-cell-height", "dom-resized"], outputs: ["widgetDeleted", "updateAppliedFilters"] }, { kind: "pipe", type: i3.RATranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RADashboardArea, deps: [{ token: RaDashboardService }, { token: i0.NgZone }, { token: i2$1.NgxUiLoaderService }, { token: i3.RATranslateService }, { token: i4.NotifierService }, { token: RADashboardResponsiveService }, { token: i3.RAPermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: RADashboardArea, selector: "ra-dashboard-area", inputs: { userDashboardId: ["user-dashboard-id", "userDashboardId"], areaKey: ["area-key", "areaKey"], globalFilter: ["global-filter", "globalFilter"], raDashboardEventBus: ["event-bus", "raDashboardEventBus"], widgetHeight: ["widget-height", "widgetHeight"], widgetWidth: ["widget-width", "widgetWidth"], appConfig: ["app-config", "appConfig"], dashboardInfo: ["dashboard-info", "dashboardInfo"], templateConfig: "templateConfig" }, outputs: { hideDashboardBanner: "hideDashboardBanner" }, viewQueries: [{ propertyName: "gridWrapper", first: true, predicate: ["gridWrapper"], descendants: true }, { propertyName: "divBottom", first: true, predicate: ["divBottom"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\"\r\n  [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n  <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container (widgetLoaded)=\"widgetLoaded(item)\" [canLoadData]=\"item.canLoadData\" (dataLoaded)=\"dataLoaded($event)\"\r\n        [bulk-action-data]=\"bulkActionData\" [dashboard-info]=\"dashboardInfo\" [app-config]=\"appConfig\"\r\n        [event-bus]=\"raDashboardEventBus\" (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\"\r\n        [global-filter]=\"globalFilter\" [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\"\r\n        [widget-width]=\"item.cols\" [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\"\r\n        [dom-resized]=\"domResized\" (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n      </ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n\r\n  <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n    <div class=\"empty-wrapper\">\r\n      <div></div>\r\n      <div class=\"empty-prefix\">\r\n        <!-- <i class=\"fal fa-edit edit-icon\"></i> -->\r\n        <span>{{emptyDashboardTitle}}</span>\r\n      </div>\r\n      <hr class=\"horizontalLine-solid\" />\r\n      <div class=\"empty-content light\">\r\n        <div>\r\n          <div class=\"col-sm-12 empty-msg\">\r\n            {{emptyDashboardMsg1}} <br />\r\n            {{emptyDashboardMsg2}}\r\n          </div>\r\n          <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm dashboard-button light\" (click)=\"buttonClick()\">\r\n            <i class=\"{{emptyDashboardButtonIcon}}\"></i>{{emptyDashboardButtonText}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <notifier-container></notifier-container>\r\n</div>\r\n<div #divBottom></div>", styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#fff;overflow-y:hidden!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;box-shadow:none}gridster-item:hover{box-shadow:0 1px 10px #00000026!important}@media screen and (max-width: 685px){.gridster-mobile{height:auto!important;margin-bottom:50px!important}}@media screen and (max-width: 350px){.gridster-mobile{min-height:330px!important;margin-bottom:0!important}}.empty-padding{padding:15px 0;background-color:#fff;display:flex}.empty-wrapper{background-color:#fff;border:1px solid #9FA0A4;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:18px;padding:15px}.empty-content{color:#626469;width:100%;padding:15px}.empty-msg{padding:0 0 15px;font-size:16px}.horizontalLine-solid{border-top:1px solid #cbcbcb;margin:0 15px}.dashboard-button{padding:5px 10px 5px 5px!important}.btnLib{background-color:#ededed;color:#333!important}.btn-sm,.btn-group-sm>.btn{padding:5px 20px 5px 5px}.edit-icon{color:#32ad3c;font-size:24px;margin-right:15px}.empty-title{margin-top:10px}@media screen and (max-width: 600px){.empty-padding{padding:15px 0;background-color:#fff;width:100%;display:block}.empty-wrapper{display:flex;background-color:#fff;border:1px solid #9FA0A4;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:16px;display:flex;height:40px;padding:15px}.empty-content{color:#333;display:flex;padding:15px}.empty-msg{padding:0 0 15px;font-size:14px}.edit-icon{color:#32ad3c;font-size:20px;margin-right:6px}.empty-title{margin-top:6px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: i4.NotifierContainerComponent, selector: "notifier-container" }, { kind: "component", type: RAWidgetContainer, selector: "ra-widget-container", inputs: ["widget-instance-id", "global-filter", "dashboard-info", "data", "event-bus", "app-config", "widget-width", "widget-height", "grid-cell-height", "bulk-action-data", "canLoadData", "dom-resized"], outputs: ["widgetDeleted", "updateAppliedFilters", "dataLoaded", "widgetLoaded"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RADashboardArea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RADashboardArea, decorators: [{
             type: Component,
-            args: [{ selector: 'ra-dashboard-area', template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\" [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n  <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\"\r\n        (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\" [global-filter]=\"globalFilter\"\r\n        [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\" [widget-width]=\"item.cols\"\r\n        [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"\r\n        (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n      </ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n\r\n  <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n    <div class=\"empty-wrapper\">\r\n      <div></div>\r\n      <div class=\"m-1 empty-prefix\">\r\n        <i class=\"fal fa-edit edit-icon\"></i>\r\n        <span class=\"empty-title\">{{'dashboard.emptydashboard'|translate}}</span>\r\n      </div>\r\n      <div class=\"empty-content light\">\r\n        <div>\r\n          <div class=\"col-sm-12 empty-msg\">\r\n            {{'dashboard.emptydashboardmessage'|translate}} <br />\r\n            {{'dashboard.emptydashboardmessage2'|translate}}\r\n          </div>\r\n          <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm m-1 dashboard-button light\" (click)=\"addNewWidget()\">\r\n            <i class=\"fal fa-plus m-1\"></i>{{'dashboard.addawidgets'|translate}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <notifier-container></notifier-container>\r\n</div>", styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#ededed;overflow-y:hidden!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;box-shadow:0 1px 10px #0000000d}gridster-item:hover{box-shadow:0 1px 10px #00000026}@media screen and (max-width: 685px){.gridster-mobile{height:auto!important;margin-bottom:50px!important}}@media screen and (max-width: 350px){.gridster-mobile{min-height:330px!important;margin-bottom:0!important}}.empty-padding{padding:40px 20px 20px;background-color:#ededed;display:flex;justify-content:center;align-content:center}.empty-wrapper{display:flex;background-color:#fff;border-radius:8px;min-height:125px;width:72%}.empty-prefix{color:#32ad3c;font-size:18px;display:flex;align-items:center;padding:10px 30px;min-width:max-content;min-width:-moz-max-content}.empty-content{color:#333;border-left:solid 1px #a9afb1;width:100%;display:flex;align-items:center;padding:15px 30px 10px 40px}.empty-msg{padding:0 0 5px;font-size:16px}.dashboard-button{padding:5px 10px 5px 5px!important}.btnLib{background-color:#ededed;color:#333!important}.btn-sm,.btn-group-sm>.btn{padding:5px 20px 5px 5px}.edit-icon{color:#32ad3c;font-size:24px;margin-right:15px}.empty-title{margin-top:10px}@media screen and (max-width: 600px){.empty-padding{padding:10px;background-color:#ededed;width:100%;display:block}.empty-wrapper{display:flex;background-color:#fff;border-radius:8px;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:16px;display:flex;height:40px;padding:6px 10px 8px}.empty-content{color:#333;display:flex;padding:5px 10px 10px;margin-top:44px;margin-left:-185px;border-left:none}.empty-msg{padding:12px 10px 10px 5px;font-size:14px;border-top:solid 1px #a9afb1}.edit-icon{color:#32ad3c;font-size:20px;margin-right:6px}.empty-title{margin-top:6px}}\n"] }]
+            args: [{ selector: 'ra-dashboard-area', template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\"\r\n  [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n  <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container (widgetLoaded)=\"widgetLoaded(item)\" [canLoadData]=\"item.canLoadData\" (dataLoaded)=\"dataLoaded($event)\"\r\n        [bulk-action-data]=\"bulkActionData\" [dashboard-info]=\"dashboardInfo\" [app-config]=\"appConfig\"\r\n        [event-bus]=\"raDashboardEventBus\" (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\"\r\n        [global-filter]=\"globalFilter\" [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\"\r\n        [widget-width]=\"item.cols\" [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\"\r\n        [dom-resized]=\"domResized\" (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n      </ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n\r\n  <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n    <div class=\"empty-wrapper\">\r\n      <div></div>\r\n      <div class=\"empty-prefix\">\r\n        <!-- <i class=\"fal fa-edit edit-icon\"></i> -->\r\n        <span>{{emptyDashboardTitle}}</span>\r\n      </div>\r\n      <hr class=\"horizontalLine-solid\" />\r\n      <div class=\"empty-content light\">\r\n        <div>\r\n          <div class=\"col-sm-12 empty-msg\">\r\n            {{emptyDashboardMsg1}} <br />\r\n            {{emptyDashboardMsg2}}\r\n          </div>\r\n          <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm dashboard-button light\" (click)=\"buttonClick()\">\r\n            <i class=\"{{emptyDashboardButtonIcon}}\"></i>{{emptyDashboardButtonText}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <notifier-container></notifier-container>\r\n</div>\r\n<div #divBottom></div>", styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#fff;overflow-y:hidden!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;box-shadow:none}gridster-item:hover{box-shadow:0 1px 10px #00000026!important}@media screen and (max-width: 685px){.gridster-mobile{height:auto!important;margin-bottom:50px!important}}@media screen and (max-width: 350px){.gridster-mobile{min-height:330px!important;margin-bottom:0!important}}.empty-padding{padding:15px 0;background-color:#fff;display:flex}.empty-wrapper{background-color:#fff;border:1px solid #9FA0A4;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:18px;padding:15px}.empty-content{color:#626469;width:100%;padding:15px}.empty-msg{padding:0 0 15px;font-size:16px}.horizontalLine-solid{border-top:1px solid #cbcbcb;margin:0 15px}.dashboard-button{padding:5px 10px 5px 5px!important}.btnLib{background-color:#ededed;color:#333!important}.btn-sm,.btn-group-sm>.btn{padding:5px 20px 5px 5px}.edit-icon{color:#32ad3c;font-size:24px;margin-right:15px}.empty-title{margin-top:10px}@media screen and (max-width: 600px){.empty-padding{padding:15px 0;background-color:#fff;width:100%;display:block}.empty-wrapper{display:flex;background-color:#fff;border:1px solid #9FA0A4;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:16px;display:flex;height:40px;padding:15px}.empty-content{color:#333;display:flex;padding:15px}.empty-msg{padding:0 0 15px;font-size:14px}.edit-icon{color:#32ad3c;font-size:20px;margin-right:6px}.empty-title{margin-top:6px}}\n"] }]
         }], ctorParameters: () => [{ type: RaDashboardService }, { type: i0.NgZone }, { type: i2$1.NgxUiLoaderService }, { type: i3.RATranslateService }, { type: i4.NotifierService }, { type: RADashboardResponsiveService }, { type: i3.RAPermissionService }], propDecorators: { userDashboardId: [{
                 type: Input,
                 args: ['user-dashboard-id']
@@ -4990,11 +5265,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
             }], appConfig: [{
                 type: Input,
                 args: ['app-config']
+            }], dashboardInfo: [{
+                type: Input,
+                args: ['dashboard-info']
+            }], templateConfig: [{
+                type: Input
             }], hideDashboardBanner: [{
                 type: Output
             }], gridWrapper: [{
                 type: ViewChild,
                 args: ['gridWrapper', { static: false }]
+            }], divBottom: [{
+                type: ViewChild,
+                args: ['divBottom', { static: false }]
             }] } });
 
 const customNotifierOptions = {
@@ -5039,11 +5322,11 @@ const customNotifierOptions = {
 };
 
 class GridsterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: GridsterModule, imports: [GridsterComponent, GridsterItemComponent], exports: [GridsterComponent, GridsterItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: GridsterModule, imports: [GridsterComponent, GridsterItemComponent], exports: [GridsterComponent, GridsterItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: GridsterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: GridsterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [GridsterComponent, GridsterItemComponent],
@@ -5052,15 +5335,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
         }] });
 
 class DashboardFrameworkModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DashboardFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DashboardFrameworkModule, bootstrap: [RADashboardArea], declarations: [RADashboardArea,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DashboardFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: DashboardFrameworkModule, bootstrap: [RADashboardArea], declarations: [RADashboardArea,
             RAWidgetContainer,
             LockTooltip], imports: [BrowserModule,
             GridsterModule,
             HttpClientModule,
             NgxUiLoaderModule, i4.NotifierModule, RACommonModule,
             RACommonControlsModule], exports: [RADashboardArea] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DashboardFrameworkModule, imports: [BrowserModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DashboardFrameworkModule, imports: [BrowserModule,
             GridsterModule,
             HttpClientModule,
             NgxUiLoaderModule,
@@ -5068,7 +5351,7 @@ class DashboardFrameworkModule {
             RACommonModule,
             RACommonControlsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DashboardFrameworkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DashboardFrameworkModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -5124,10 +5407,10 @@ class RADashboardEventBus {
             return event.eventName == eventName && event.key == key && event.value == value;
         }), map(event => event.data));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RADashboardEventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RADashboardEventBus, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RADashboardEventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RADashboardEventBus, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RADashboardEventBus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RADashboardEventBus, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5137,11 +5420,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
 class RaBaseDashboardTemplate {
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this.initialize = (eventBus, userDashboardId, appConfig) => {
+        this.initialize = (eventBus, userDashboardId, appConfig, dashboardInfo, templateConfig) => {
             this.ngZone.run(() => {
                 this.userDashboardId = userDashboardId;
                 this.appConfig = appConfig;
                 this.raDashboardEventBus = eventBus;
+                this.dashboardInfo = dashboardInfo;
+                this.templateConfig = templateConfig;
             });
             this.init();
         };
@@ -5150,10 +5435,10 @@ class RaBaseDashboardTemplate {
         var myEvent = new CustomEvent("event-template-initiated");
         document.body.dispatchEvent(myEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RaBaseDashboardTemplate, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: RaBaseDashboardTemplate, inputs: { dashboardId: ["dashboard-id", "dashboardId"], globalFilter: ["global-filter", "globalFilter"], initialize: "initialize" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RaBaseDashboardTemplate, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: RaBaseDashboardTemplate, inputs: { dashboardId: ["dashboard-id", "dashboardId"], globalFilter: ["global-filter", "globalFilter"], initialize: "initialize" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RaBaseDashboardTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RaBaseDashboardTemplate, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { dashboardId: [{
                 type: Input,
@@ -5187,10 +5472,10 @@ class RaBaseDashboardFilter {
         var myEvent = new CustomEvent("global-filter-initiated");
         document.body.dispatchEvent(myEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RaBaseDashboardFilter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: RaBaseDashboardFilter, inputs: { getAllFilterConfig: "getAllFilterConfig", setInapplicableFilterMsg: "setInapplicableFilterMsg", isValidEntry: "isValidEntry", clearAllData: "clearAllData", setAllFilterConfig: "setAllFilterConfig" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RaBaseDashboardFilter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: RaBaseDashboardFilter, inputs: { getAllFilterConfig: "getAllFilterConfig", setInapplicableFilterMsg: "setInapplicableFilterMsg", isValidEntry: "isValidEntry", clearAllData: "clearAllData", setAllFilterConfig: "setAllFilterConfig" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: RaBaseDashboardFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: RaBaseDashboardFilter, decorators: [{
             type: Directive
         }], propDecorators: { getAllFilterConfig: [{
                 type: Input