@schneideress/dashboardframework 0.0.271 → 0.0.273

package/fesm5/schneideress-dashboardframework.js

@@ -1,4 +1,4 @@
-import { __extends, __decorate, __metadata, __awaiter, __generator, __assign, __param } from 'tslib';
+import { __extends, __decorate, __metadata, __spread, __awaiter, __generator, __assign, __param } from 'tslib';
 import { Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Injectable, EventEmitter, NgZone, Input, Output, ViewChild, ElementRef, Component, Renderer2, ChangeDetectorRef, ViewEncapsulation, Host, NgModule } from '@angular/core';
 import { of, Subject } from 'rxjs';
 import { BaseService, RATranslateService, RAPermissionService, DomService, RACommonModule } from '@schneideress/ra-common';
@@ -17,7 +17,6 @@ var RaDashboardService = /** @class */ (function (_super) {
     function RaDashboardService(injector) {
         var _this = _super.call(this, injector, '') || this;
         _this.loadedScripts = [];
-        _this.clientId = undefined;
         return _this;
     }
     /*
@@ -70,6 +69,12 @@ var RaDashboardService = /** @class */ (function (_super) {
     /**To Update widgetInfo in database */
     RaDashboardService.prototype.updateWidget = function (widgetInfo, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
+        var 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*/
@@ -185,6 +190,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) {
@@ -198,9 +209,9 @@ var GridsterConfigDefaultSettings = {
     margin: 10,
     outerMargin: true,
     outerMarginTop: 10,
-    outerMarginRight: 10,
+    outerMarginRight: 0,
     outerMarginBottom: 30,
-    outerMarginLeft: 10,
+    outerMarginLeft: 0,
     useTransformPositioning: true,
     mobileBreakpoint: 640,
     minCols: 10,
@@ -315,7 +326,7 @@ var RADashboardResponsiveService = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    RADashboardResponsiveService.prototype.getGridsterConfig = function (isWidgetMgmnt) {
+    RADashboardResponsiveService.prototype.getGridsterConfig = function (isWidgetMgmnt, resize, canMove) {
         var config = GridsterConfigDefaultSettings;
         config.minCols = this.currentResInfo.maxCols;
         config.maxCols = this.currentResInfo.maxCols;
@@ -337,6 +348,13 @@ var RADashboardResponsiveService = /** @class */ (function () {
             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 */
@@ -344,6 +362,9 @@ var RADashboardResponsiveService = /** @class */ (function () {
         if (widget.widgetSettings) {
             widget.settings = JSON.parse(widget.widgetSettings);
         }
+        if (widget.templateSettings) {
+            widget.templateWidgetSettings = JSON.parse(widget.templateSettings);
+        }
         var gridsterItem = {
             cols: this.getWidth(widget.width),
             rows: this.getHeight(widget.height),
@@ -411,14 +432,21 @@ var RADashboardArea = /** @class */ (function () {
         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();
     }
     RADashboardArea.prototype.ngOnInit = function () {
         var _this = this;
+        window.addEventListener('scroll', function () {
+            _this.loadNext();
+        });
         this.isWidgetMgmnt = this.permissionService.hasPermission('ra.widgetmanagement');
         this.initiateGridsterConfig();
+        this.setEmptyDashboardConfig();
         this.lastViewType = this.responsiveService.IsDesktopView ? 'desktop' : 'mobile';
         this.responsiveService.resized.subscribe(function (isDesktop) {
             if (_this.lastViewType != (isDesktop ? 'desktop' : 'mobile') || !isDesktop) {
@@ -447,6 +475,11 @@ var RADashboardArea = /** @class */ (function () {
                 }, 100);
             }
         });
+        setTimeout(function () {
+            _this.bulkActionClick = _this.raDashboardEventBus.subscribe(RAEvent.BulkActionClick).subscribe(function (data) {
+                _this.bulkActionData = JSON.parse(JSON.stringify(data)); // To create a new reference;
+            });
+        });
     };
     RADashboardArea.prototype.ngOnChanges = function (changes) {
         this.isWidgetMgmnt = this.permissionService.hasPermission('ra.widgetmanagement');
@@ -454,28 +487,44 @@ var RADashboardArea = /** @class */ (function () {
             this.isWidgetLoaded = true;
             this.loadWidgets(this.userDashboardId, this.areaKey);
         }
+        this.initiateGridsterConfig();
         if (changes.raDashboardEventBus && changes.raDashboardEventBus.currentValue != changes.raDashboardEventBus.previousValue) {
             this.inititateEventBusSubscritions();
         }
     };
+    RADashboardArea.prototype.setEmptyDashboardConfig = function () {
+        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 */
     RADashboardArea.prototype.initiateGridsterConfig = function () {
         var _this = this;
-        /**To override default configuration values to the gridster control */
-        this.options = this.responsiveService.getGridsterConfig(this.isWidgetMgmnt);
-        this.options.initCallback = function (gridster) {
-            if (_this.options.api) {
-                _this.gridcellHeight = _this.options.api.getCurrentRowHeight();
-            }
-        };
-        this.options.itemChangeCallback = function (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 = function (gridster) {
+                if (_this.options.api) {
+                    _this.gridcellHeight = _this.options.api.getCurrentRowHeight();
                 }
-            }
-            _this.setAreaHeight();
-        };
+            };
+            this.options.itemChangeCallback = function (item) {
+                if (_this.responsiveService.IsDesktopView) {
+                    if (item.widgetInfo && item.widgetInfo.widgetInstanceId) {
+                        _this.updateWidgetPosition(item.widgetInfo.widgetInstanceId);
+                    }
+                }
+                _this.setAreaHeight();
+            };
+        }
+    };
+    RADashboardArea.prototype.widgetLoaded = function (widget) {
+        widget.canLoadData = true;
     };
     /** To initiate eventbus subsctiptions */
     RADashboardArea.prototype.inititateEventBusSubscritions = function () {
@@ -495,6 +544,11 @@ var RADashboardArea = /** @class */ (function () {
                 _this.addWidget(e);
             });
         });
+        this.curatedFilterChange = this.raDashboardEventBus.subscribe(RAEvent.CuratedFilterChange).subscribe(function (e) {
+            _this.ngZone.run(function () {
+                _this.loadWidgets(_this.userDashboardId, _this.areaKey);
+            });
+        });
         this.rearrangeWidgetClick = this.raDashboardEventBus.subscribe(RAEvent.RearrangeClicked).subscribe(function (e) {
             _this.ngZone.run(function () {
                 _this.rearrangeWidgets();
@@ -543,6 +597,10 @@ var RADashboardArea = /** @class */ (function () {
             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 */
     RADashboardArea.prototype.updateWidgets = function () {
@@ -579,6 +637,12 @@ var RADashboardArea = /** @class */ (function () {
     /** To retrieve widgets based on userDashboardid and area name */
     RADashboardArea.prototype.loadWidgets = function (userDashboarId, areaKey) {
         var _this = this;
+        if (this.templateConfig && this.templateConfig.initialWidgetCount)
+            this.initialWidgetCount = this.templateConfig.initialWidgetCount;
+        if (location.href.indexOf('/kiosk/') > -1)
+            this.initialWidgetCount = 1000;
+        this.currentLoadedIndex = 0;
+        this.loading = false;
         var widgetInfo = {
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey
@@ -586,7 +650,6 @@ var RADashboardArea = /** @class */ (function () {
         this.widgetList = [];
         this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe(function (widgets) {
             _this.userWidgets = widgets;
-            _this.dashboardService.clientId = widgets[0].clientId;
             _this.PAMWidgets = [];
             widgets.forEach(function (element) {
                 var settings = undefined;
@@ -598,8 +661,8 @@ var RADashboardArea = /** @class */ (function () {
             });
             _this.checkPAMWidgets();
             if (widgets && widgets.length > 0) {
-                _this.widgetList = _this.mapObjectListToGridsterItemList(widgets);
-                _this.setAreaHeight();
+                _this.widgetList = [];
+                _this.loadWidgetsDelta();
                 _this.raDashboardEventBus.publish(RAEvent.HideDashboardBanner, false);
             }
             else {
@@ -608,6 +671,45 @@ var RADashboardArea = /** @class */ (function () {
             }
         });
     };
+    RADashboardArea.prototype.loadWidgetsDelta = function () {
+        var _this = this;
+        var _a;
+        if (!this.loading) {
+            this.loading = true;
+            var widgets = this.mapObjectListToGridsterItemList(this.userWidgets.slice(this.currentLoadedIndex, (this.currentLoadedIndex + this.initialWidgetCount)));
+            this.currentLoadedIndex += this.initialWidgetCount;
+            (_a = this.widgetList).push.apply(_a, __spread(widgets));
+            this.setAreaHeight();
+            setTimeout(function () {
+                _this.loading = false;
+            });
+        }
+    };
+    RADashboardArea.prototype.dataLoaded = function (widgetElement) {
+        this.loadNext();
+    };
+    RADashboardArea.prototype.loadNext = function () {
+        if (this.divBottom) {
+            if (this.elementInViewport(this.divBottom.nativeElement)) {
+                this.loadWidgetsDelta();
+            }
+        }
+    };
+    RADashboardArea.prototype.elementInViewport = function (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 */
     RADashboardArea.prototype.setAreaHeight = function () {
         var _this = this;
@@ -651,22 +753,22 @@ var RADashboardArea = /** @class */ (function () {
     /** To remove a widget instance from dashboard and to save info in database */
     RADashboardArea.prototype.deleteWidget = function (widgetInstanceId, isalertDisabled) {
         if (isalertDisabled === void 0) { isalertDisabled = false; }
+        var widget = this.userWidgets.filter(function (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();
+        }
         var gridsterItem = this.widgetList.filter(function (item) {
             return item.widgetInfo.widgetInstanceId === widgetInstanceId;
         });
         if (gridsterItem.length > 0) {
-            var widget = this.userWidgets.filter(function (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) {
@@ -681,11 +783,15 @@ var RADashboardArea = /** @class */ (function () {
     /**To rearrange widgets position in the dashboard, compactLeft&Up,compactLeft,compactUp,etc*/
     RADashboardArea.prototype.rearrangeWidgets = function () {
         var _this = this;
+        this.currentLoadedIndex = 0;
+        this.loading = false;
         for (var 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(function () {
@@ -718,29 +824,31 @@ var RADashboardArea = /** @class */ (function () {
         this.ngxService.start();
         this.dashboardService.addWidget(data, this.appConfig).subscribe(function (widget) {
             _this.userWidgets.push(widget);
-            var gridsterItem = _this.responsiveService.getGridsterItem(widget);
-            _this.widgetList.push(gridsterItem);
-            _this.setAreaHeight();
-            if (_this.options.api) {
-                var curRowHeight = Number(_this.options.api.getCurrentRowHeight());
-                if (curRowHeight > 0) {
-                    widget.rowHeight = curRowHeight;
-                    _this.gridcellHeight = curRowHeight;
+            if (_this.currentLoadedIndex >= _this.userWidgets.length) {
+                var gridsterItem = _this.responsiveService.getGridsterItem(widget);
+                _this.widgetList.push(gridsterItem);
+                _this.setAreaHeight();
+                if (_this.options.api) {
+                    var 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(function () {
-                        _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(function () {
+                            _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);
         });
@@ -770,12 +878,14 @@ var RADashboardArea = /** @class */ (function () {
             });
         }
         this.userWidgets.push(data);
-        var 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) {
+            var gridsterItem = this.responsiveService.getGridsterItem(data);
+            this.widgetList.push(gridsterItem);
+            this.setAreaHeight();
+            if (data.settings && data.settings.isPAMWidget) {
+                this.PAMWidgets.push(data.widgetInstanceId);
+                this.checkPAMWidgets();
+            }
         }
     };
     RADashboardArea.prototype.mapObjectListToGridsterItemList = function (widgetList) {
@@ -804,8 +914,11 @@ var RADashboardArea = /** @class */ (function () {
         });
         return widgetListArray;
     };
-    RADashboardArea.prototype.addNewWidget = function () {
-        this.raDashboardEventBus.publish(RAEvent.AddNewWidgetToDashboard, null);
+    RADashboardArea.prototype.buttonClick = function () {
+        if (this.emptyDashboardButtonAction == "widgets")
+            this.raDashboardEventBus.publish(RAEvent.AddNewWidgetToDashboard, null);
+        else if (this.emptyDashboardButtonAction == "filter")
+            this.raDashboardEventBus.publish(RAEvent.GlobalFilterClick, null);
     };
     RADashboardArea.prototype.updateAppliedFilters = function (data) {
         this.raDashboardEventBus.publish(RAEvent.UpdateAppledFiterForInapplicableFilter, data);
@@ -855,6 +968,14 @@ var RADashboardArea = /** @class */ (function () {
         Input('app-config'),
         __metadata("design:type", Object)
     ], RADashboardArea.prototype, "appConfig", void 0);
+    __decorate([
+        Input('dashboard-info'),
+        __metadata("design:type", Object)
+    ], RADashboardArea.prototype, "dashboardInfo", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], RADashboardArea.prototype, "templateConfig", void 0);
     __decorate([
         Output(),
         __metadata("design:type", Object)
@@ -863,11 +984,15 @@ var RADashboardArea = /** @class */ (function () {
         ViewChild('gridWrapper', { static: false }),
         __metadata("design:type", ElementRef)
     ], RADashboardArea.prototype, "gridWrapper", void 0);
+    __decorate([
+        ViewChild('divBottom', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], RADashboardArea.prototype, "divBottom", void 0);
     RADashboardArea = __decorate([
         Component({
             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;user-select:text;box-shadow:0 1px 10px rgba(0,0,0,.05)}gridster-item:hover{box-shadow:0 1px 10px rgba(0,0,0,.15)}@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:-webkit-max-content;min-width:max-content;min-width:-moz-max-content}.empty-content{color:#333;border-left:1px solid #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-group-sm>.btn,.btn-sm{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:1px solid #a9afb1}.edit-icon{color:#32ad3c;font-size:20px;margin-right:6px}.empty-title{margin-top:6px}}"]
+            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;user-select:text;box-shadow:none}gridster-item:hover{box-shadow:0 1px 10px rgba(0,0,0,.15)!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-group-sm>.btn,.btn-sm{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}}"]
         }),
         __metadata("design:paramtypes", [RaDashboardService,
             NgZone,
@@ -970,8 +1095,11 @@ var RAWidgetContainer = /** @class */ (function () {
         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;
@@ -996,7 +1124,7 @@ var RAWidgetContainer = /** @class */ (function () {
         configurable: true
     });
     RAWidgetContainer.prototype.ngOnInit = function () {
-        this.WidgetDisplayName = this.getwidgetTitleTranslation(this.data.widgetInfo.widgetTitle);
+        this.WidgetDisplayName = this.translateService.translate('Common.' + this.data.widgetInfo.widgetTitle, true);
         this.lockIconTitle = this.translateService.translate('Common.lockedfields');
         this.lockIconFooter = this.translateService.translate('Common.lockedfieldseditinfo');
         this.inapplicableIconTitle = this.translateService.translate('Common.InapplicableFilters');
@@ -1017,19 +1145,32 @@ var RAWidgetContainer = /** @class */ (function () {
                 });
             });
         }
-        if (this.widgetElement && changes.globalFilter && changes.globalFilter.currentValue != changes.globalFilter.previousValue) {
-            var 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) {
+                    var 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);
         }
     };
     RAWidgetContainer.prototype.invokeWidgetResizedEvent = function () {
@@ -1221,6 +1362,10 @@ var RAWidgetContainer = /** @class */ (function () {
                                                             _this.showPanel = true;
                                                         else
                                                             _this.showPanel = false;
+                                                        if (!_this.data.dataLoaded) {
+                                                            _this.data.dataLoaded = true;
+                                                            _this.dataLoaded.emit(_this.widgetElement);
+                                                        }
                                                         break;
                                                     case 'onConfigEditClicked':
                                                         _this.editWidget();
@@ -1293,7 +1438,9 @@ var RAWidgetContainer = /** @class */ (function () {
                                             widgetConfigFilter.configChanges = this.getConfigChanges(false);
                                             widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
                                             widgetConfigFilter.globalFilter = this.globalFilter;
-                                            this.widgetElement.loadContent(widgetConfigFilter);
+                                            widgetConfigFilter.dashboardInfo = me.dashboardInfo;
+                                            //this.widgetElement.loadContent(widgetConfigFilter);
+                                            this.widgetLoaded.emit();
                                             return [4 /*yield*/, this.setLock(widgetConfigFilter.config)];
                                         case 1:
                                             _a.sent();
@@ -1563,9 +1710,12 @@ var RAWidgetContainer = /** @class */ (function () {
         var html = '<div id="ra-db-widget-menu"' + 'style="' + style + '" class="download-content dropdown-content widget-config-item dropdown-click" style="z-index: 1002;">';
         var 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);
         }
         var customPageParams = false;
         if (this.data.widgetInfo && this.data.widgetInfo.widgetSettings) {
@@ -1574,14 +1724,14 @@ var RAWidgetContainer = /** @class */ (function () {
                 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;
@@ -1613,7 +1763,7 @@ var RAWidgetContainer = /** @class */ (function () {
         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>';
@@ -1694,18 +1844,6 @@ var RAWidgetContainer = /** @class */ (function () {
         if (this.currentComponent)
             this.popupInstance.removeMe(this.currentComponent);
     };
-    RAWidgetContainer.prototype.getwidgetTitleTranslation = function (item) {
-        var rKey = 'DBW_' + this.translateService.makeCode(item);
-        var translatedString = '';
-        var translationModule = this.dashboardService.clientId + '_DBW';
-        translatedString = this.translateService.translate(translationModule + '.' + rKey);
-        if (translatedString.toLowerCase() === rKey.toLowerCase()) {
-            return item;
-        }
-        else {
-            return translatedString;
-        }
-    };
     RAWidgetContainer.ctorParameters = function () { return [
         { type: RaDashboardService },
         { type: NgxUiLoaderService },
@@ -1748,6 +1886,10 @@ var RAWidgetContainer = /** @class */ (function () {
         Input('global-filter'),
         __metadata("design:type", Object)
     ], RAWidgetContainer.prototype, "globalFilter", void 0);
+    __decorate([
+        Input('dashboard-info'),
+        __metadata("design:type", Object)
+    ], RAWidgetContainer.prototype, "dashboardInfo", void 0);
     __decorate([
         Input('data'),
         __metadata("design:type", Object)
@@ -1772,6 +1914,14 @@ var RAWidgetContainer = /** @class */ (function () {
         Input('grid-cell-height'),
         __metadata("design:type", Number)
     ], RAWidgetContainer.prototype, "gridCellHeight", void 0);
+    __decorate([
+        Input('bulk-action-data'),
+        __metadata("design:type", Object)
+    ], RAWidgetContainer.prototype, "bulkActionData", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], RAWidgetContainer.prototype, "canLoadData", void 0);
     __decorate([
         Output(),
         __metadata("design:type", Object)
@@ -1780,6 +1930,14 @@ var RAWidgetContainer = /** @class */ (function () {
         Output(),
         __metadata("design:type", Object)
     ], RAWidgetContainer.prototype, "updateAppliedFilters", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], RAWidgetContainer.prototype, "dataLoaded", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], RAWidgetContainer.prototype, "widgetLoaded", void 0);
     __decorate([
         Input('dom-resized'),
         __metadata("design:type", Boolean),
@@ -4778,11 +4936,13 @@ var RaBaseDashboardTemplate = /** @class */ (function () {
     function RaBaseDashboardTemplate(ngZone) {
         var _this = this;
         this.ngZone = ngZone;
-        this.initialize = function (eventBus, userDashboardId, appConfig) {
+        this.initialize = function (eventBus, userDashboardId, appConfig, dashboardInfo, templateConfig) {
             _this.ngZone.run(function () {
                 _this.userDashboardId = userDashboardId;
                 _this.appConfig = appConfig;
                 _this.raDashboardEventBus = eventBus;
+                _this.dashboardInfo = dashboardInfo;
+                _this.templateConfig = templateConfig;
             });
             _this.init();
         };