@schneideress/dashboardframework 17.0.21 → 17.0.23

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, ViewContainerRef, ViewChild, NgModule, Directive } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, Input, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, NgZone, Inject, Output, HostBinding, ViewContainerRef, ViewChild, HostListener, 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';
@@ -1062,7 +1062,7 @@ class GridsterRenderer {
         else {
             const x = Math.round(this.gridster.curColWidth * item.x);
             const y = Math.round(this.gridster.curRowHeight * item.y);
-            const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin;
+            const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin - 1; // added -1 to avoid the right side of widgets not showing borders
             const height = this.gridster.curRowHeight * item.rows - this.gridster.$options.margin;
             // set the cell style
             this.setCellPosition(renderer, el, x, y);
@@ -3912,7 +3912,7 @@ class RAWidgetContainer {
         }
         if (changes['canLoadData'] && (changes['canLoadData'].currentValue != changes['canLoadData'].previousValue)) {
             if (this.canLoadData)
-                this.refreshWidget(this.data.widgetInfo);
+                this.loadWidget(this.data.widgetInfo);
         }
     }
     invokeWidgetResizedEvent() {
@@ -3943,7 +3943,7 @@ class RAWidgetContainer {
     }
     ngAfterViewInit() {
         setTimeout(() => {
-            this.loadWidget(this.data.widgetInfo);
+            this.widgetLoaded.emit(this.wcWrapper.nativeElement);
         });
         document.addEventListener("scroll", () => {
             this.removeMenu();
@@ -4169,8 +4169,7 @@ class RAWidgetContainer {
                             widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
                             widgetConfigFilter.globalFilter = me.globalFilter;
                             widgetConfigFilter.dashboardInfo = me.dashboardInfo;
-                            //this.widgetElement.loadContent(widgetConfigFilter);
-                            me.widgetLoaded.emit(me.wcWrapper.nativeElement);
+                            me.widgetElement.loadContent(widgetConfigFilter);
                             await me.setLock(widgetConfigFilter.config);
                             await me.setDownloadIcon();
                         });
@@ -4289,8 +4288,7 @@ class RAWidgetContainer {
                             widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
                             widgetConfigFilter.globalFilter = me.globalFilter;
                             widgetConfigFilter.dashboardInfo = me.dashboardInfo;
-                            //me.widgetElement.loadContent(widgetConfigFilter);
-                            me.widgetLoaded.emit(me.wcWrapper.nativeElement);
+                            me.widgetElement.loadContent(widgetConfigFilter);
                             await me.setLock(widgetConfigFilter.config);
                             await me.setDownloadIcon();
                         });
@@ -4760,20 +4758,19 @@ class RADashboardArea {
         this.isWidgetMgmnt = false;
         this.initialWidgetCount = 10;
         this.currentLoadingCount = 0;
-        this.loading = false;
-        this.widgetsLoaded = false;
         this.widgetHeight = 2;
         this.widgetWidth = 4;
         this.isIndicatorDashboard = false;
         this.hideDashboardBanner = new EventEmitter();
-        this.widgets = [];
+    }
+    scroll() {
+        if (this.scrollTrigger)
+            clearTimeout(this.scrollTrigger);
+        this.scrollTrigger = setTimeout(() => {
+            this.loadData();
+        }, 500);
     }
     ngOnInit() {
-        window.addEventListener('scroll', () => {
-            if (this.widgets.length > 0) {
-                this.loadData();
-            }
-        });
         this.isWidgetMgmnt = this.permissionService.hasPermission('ra.widgetmanagement');
         this.initiateGridsterConfig();
         this.setEmptyDashboardConfig();
@@ -4787,9 +4784,7 @@ class RADashboardArea {
                     this.options.api.optionsChanged();
                     if (this.userWidgets) {
                         let widgets = this.mapObjectListToGridsterItemList(this.userWidgets);
-                        for (let i = 0; i < widgets.length; i++) {
-                            this.widgets.push({ 'widget': widgets[i] });
-                        }
+                        this.currentLoadingCount = 0;
                         this.widgetList = widgets;
                         setTimeout(() => {
                             this.setAreaHeight();
@@ -4827,7 +4822,7 @@ class RADashboardArea {
         }
     }
     ngAfterViewChecked() {
-        this.cdr.detectChanges();
+        //this.cdr.detectChanges();
     }
     setEmptyDashboardConfig() {
         if (this.dashboardInfo && this.dashboardInfo.templateConfig.emptyDashboardHeader) {
@@ -4860,30 +4855,46 @@ class RADashboardArea {
         }
     }
     widgetLoaded(widgetElement, widget) {
-        let items = this.widgets.filter((item) => item.widget.widgetInfo.widgetInstanceId == widget.widgetInfo.widgetInstanceId);
+        widget.widgetElement = widgetElement;
+        let items = this.widgetList.filter((item) => item.widgetInfo.widgetInstanceId == widget.widgetInfo.widgetInstanceId);
         if (items.length > 0) {
-            items[0].widgetElement = widgetElement;
             this.loadData(items[0]);
         }
     }
     loadData(item) {
-        if (this.initialWidgetCount > this.currentLoadingCount && this.widgets.length > 0) {
-            if (!item)
-                item = this.widgets[0];
-            if (this.elementInViewport(item.widgetElement) || this.widgetList.filter((w => w.canLoadData)).length <= this.initialWidgetCount) {
-                this.currentLoadingCount++;
-                item.widget.canLoadData = true;
-                this.widgets.splice(this.widgets.indexOf(item), 1);
+        let items = [];
+        let totalLoadedCount = this.widgetList.filter((w => w.canLoadData)).length;
+        if (!item)
+            items = this.widgetList.filter((w => !w.canLoadData));
+        else
+            items.push(item);
+        if (items.length > 0) {
+            if (this.initialWidgetCount > this.currentLoadingCount) {
+                for (let i = 0; i < items.length; i++) {
+                    if (this.isElementLoaded(items[i].widgetElement) ||
+                        (totalLoadedCount <= this.initialWidgetCount)) {
+                        this.currentLoadingCount++;
+                        items[i].canLoadData = true;
+                        totalLoadedCount = this.widgetList.filter((w => w.canLoadData)).length;
+                    }
+                }
             }
         }
     }
     dataLoaded(widgetInfo) {
         this.currentLoadingCount--;
-        this.loadData();
+        // this.loadData()
+    }
+    isElementLoaded(el) {
+        if (el) {
+            let rect = el.getBoundingClientRect();
+            return rect && rect.top < window.innerHeight;
+        }
     }
-    elementInViewport(el) {
-        let rect = el.getBoundingClientRect();
-        return rect && rect.top < window.innerHeight;
+    loadWidgetWrappers(isInitialLoad = true) {
+        let widgets = this.mapObjectListToGridsterItemList(this.userWidgets);
+        this.widgetList.push(...widgets);
+        this.setAreaHeight();
     }
     /** To initiate eventbus subsctiptions */
     inititateEventBusSubscritions() {
@@ -4999,7 +5010,6 @@ class RADashboardArea {
         window.scrollTo(0, 0);
         if (location.href.indexOf('/kiosk/') > -1)
             this.initialWidgetCount = 1000;
-        this.loading = false;
         let widgetInfo = {
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey,
@@ -5008,7 +5018,6 @@ class RADashboardArea {
         this.widgetList = [];
         this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe(widgets => {
             this.userWidgets = widgets;
-            this.widgetsLoaded = true;
             this.PAMWidgets = [];
             widgets.forEach((element) => {
                 var settings = undefined;
@@ -5030,21 +5039,6 @@ class RADashboardArea {
             }
         });
     }
-    loadWidgetWrappers() {
-        if (!this.loading) {
-            this.loading = true;
-            let widgets = this.mapObjectListToGridsterItemList(this.userWidgets);
-            this.widgets = [];
-            for (let i = 0; i < widgets.length; i++) {
-                this.widgets.push({ 'widget': widgets[i] });
-            }
-            this.widgetList.push(...widgets);
-            this.setAreaHeight();
-            setTimeout(() => {
-                this.loading = false;
-            });
-        }
-    }
     /** To set Area(Gridster) height dynamically as widgets are added/removed */
     setAreaHeight() {
         setTimeout(() => {
@@ -5115,7 +5109,6 @@ class RADashboardArea {
     }
     /**To rearrange widgets position in the dashboard, compactLeft&Up,compactLeft,compactUp,etc*/
     rearrangeWidgets() {
-        this.loading = false;
         for (let i = 0; i < this.userWidgets.length; i++) {
             this.userWidgets[i].position_x = 0;
             this.userWidgets[i].position_y = 0;
@@ -5155,7 +5148,6 @@ class RADashboardArea {
         this.dashboardService.addWidget(data, this.appConfig).subscribe(widget => {
             this.userWidgets.push(widget);
             let gridsterItem = this.responsiveService.getGridsterItem(widget);
-            this.widgets.push({ 'widget': gridsterItem });
             this.widgetList.push(gridsterItem);
             this.setAreaHeight();
             if (this.options.api) {
@@ -5208,7 +5200,6 @@ class RADashboardArea {
         }
         this.userWidgets.push(data);
         let gridsterItem = this.responsiveService.getGridsterItem(data);
-        this.widgets.push({ 'widget': gridsterItem });
         this.widgetList.push(gridsterItem);
         this.setAreaHeight();
         if (data.settings && data.settings.isPAMWidget) {
@@ -5258,11 +5249,11 @@ class RADashboardArea {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RADashboardArea, deps: [{ token: RaDashboardService }, { token: i0.NgZone }, { token: i2$1.NgxUiLoaderService }, { token: i3.RATranslateService }, { token: i4.NotifierService }, { token: i0.ChangeDetectorRef }, { token: RADashboardResponsiveService }, { token: i3.RAPermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"], isIndicatorDashboard: "isIndicatorDashboard", templateConfig: "templateConfig" }, outputs: { hideDashboardBanner: "hideDashboardBanner" }, viewQueries: [{ propertyName: "gridWrapper", first: true, predicate: ["gridWrapper"], 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($event,  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", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"], isIndicatorDashboard: "isIndicatorDashboard", templateConfig: "templateConfig" }, outputs: { hideDashboardBanner: "hideDashboardBanner" }, host: { listeners: { "document:scroll": "scroll()" } }, viewQueries: [{ propertyName: "gridWrapper", first: true, predicate: ["gridWrapper"], 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($event,  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", styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#fff;overflow-y:hidden!important;flex-direction:column}.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.3.11", ngImport: i0, type: RADashboardArea, decorators: [{
             type: Component,
-            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($event,  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", 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"] }]
+            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($event,  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", styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#fff;overflow-y:hidden!important;flex-direction:column}.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: i0.ChangeDetectorRef }, { type: RADashboardResponsiveService }, { type: i3.RAPermissionService }], propDecorators: { userDashboardId: [{
                 type: Input,
                 args: ['user-dashboard-id']
@@ -5297,6 +5288,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], gridWrapper: [{
                 type: ViewChild,
                 args: ['gridWrapper', { static: false }]
+            }], scroll: [{
+                type: HostListener,
+                args: ['document:scroll']
             }] } });
 
 const customNotifierOptions = {