@schneideress/dashboardframework 0.0.278 → 13.0.0

package/fesm2015/schneideress-dashboardframework.mjs

@@ -0,0 +1,1800 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, EventEmitter, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { of, Subject } from 'rxjs';
+import * as i3 from '@schneideress/ra-common';
+import { BaseService, RACommonModule } from '@schneideress/ra-common';
+import * as i2$1 from 'ngx-ui-loader';
+import { NgxUiLoaderModule } from 'ngx-ui-loader';
+import * as i4 from 'angular-notifier';
+import { NotifierModule } from 'angular-notifier';
+import * as i6 from 'angular-gridster2';
+import { GridsterModule } from 'angular-gridster2';
+import { __awaiter } from 'tslib';
+import { RaWidgetlockStatus, WidgetViewState, RADownloadType, RADownloadOption } from '@schneideress/widgetframework';
+import * as i2 from '@angular/common';
+import * as i5 from '@schneideress/common-controls';
+import { RACommonControlsModule } from '@schneideress/common-controls';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
+import { RAUserControlModule } from '@schneideress/user-controls';
+import { filter, map } from 'rxjs/operators';
+
+class RaDashboardService extends BaseService {
+    constructor(injector) {
+        super(injector, '');
+        this.loadedScripts = [];
+    }
+    /*
+      * To load external scripts in the dom
+      */
+    loadExternalScript(scriptPath, callback) {
+        if (this.loadedScripts.indexOf(scriptPath) == -1) {
+            const script = document.createElement('script');
+            script.src = scriptPath;
+            // script.addEventListener("load", callback(), true);
+            script.onload = function () {
+                callback();
+            };
+            document.body.appendChild(script);
+            this.loadedScripts.push(scriptPath);
+        }
+        else {
+            callback();
+        }
+    }
+    /*
+      * To retrieve the list of widgets based on dashboard id & areaId
+      */
+    getWidgetsByDashboardArea(widgetInfo, appConfig) {
+        this.baseUrl = appConfig.apiBaseUrl;
+        return this.post('widget/GetWidgetByArea', widgetInfo);
+    }
+    updateWidgets(widgetList, appConfig) {
+        this.baseUrl = appConfig.apiBaseUrl;
+        return this.post('widget/UpdateAreaWidgets', widgetList);
+    }
+    getWidgetConfigInfo(widgetInfo) {
+        return of();
+    }
+    /*
+      * To update the configuration of a widget.
+      */
+    updateConfig(config, widgetInstanceId) {
+    }
+    /**To add widget to the database */
+    addWidget(widgetInfo, appConfig) {
+        this.baseUrl = appConfig.apiBaseUrl;
+        return this.post('widget/AddWidgetUser', widgetInfo);
+    }
+    /** To Delete current widget from DOM*/
+    deleteWidget(widgetInfo, appConfig) {
+        this.baseUrl = appConfig.apiBaseUrl;
+        return this.delete('widget/DeleteWidgetUser?widgetInstanceId=' + widgetInfo.widgetInstanceId);
+    }
+    /**To Update widgetInfo in database */
+    updateWidget(widgetInfo, appConfig) {
+        this.baseUrl = appConfig.apiBaseUrl;
+        return this.post('widget/UpdateUserWidget', widgetInfo);
+    }
+    /** To Move or change position if current widget container*/
+    moveWidget(widgetInfo) {
+    }
+    /** To Copy Current widget with same configuration*/
+    copyWidget(widgetInfo) {
+    }
+}
+RaDashboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RaDashboardService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+RaDashboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RaDashboardService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RaDashboardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+var RAEvent;
+(function (RAEvent) {
+    /** widget selection click on widget library */
+    RAEvent["WidgetSelected"] = "widgetSelected";
+    /** triggers when user click on the edit link in widget container */
+    RAEvent["WidgetEditClicked"] = "widgetEditClicked";
+    /** triggers when user clicks the cancel button on widget configuration window */
+    RAEvent["ConfigCancelClick"] = "configCancelClick";
+    /** triggers when user click on the close button on widget configuration window */
+    RAEvent["ConfigCloseClick"] = "configCloseClick";
+    /** add button click on widget configuration window */
+    RAEvent["ConfigAddClick"] = "configAddClick";
+    /** triggers when a user click on the save button in widget configuration window */
+    RAEvent["ConfigChanged"] = "configChanged";
+    /**To rearrange widgets in a dashboard */
+    RAEvent["RearrangeClicked"] = "rearrangeClicked";
+    /**dashboard customize button click */
+    RAEvent["DashboardCustomizeClick"] = "dashboardCustomizeClick";
+    /**triggers when user clicks on the dashboard change icon in header section */
+    RAEvent["DashboardChanged"] = "dashboardChanged";
+    /** triggers when user clicks the close button on library */
+    RAEvent["WidgetLibraryCloseBtnClicked"] = "WidgetLibraryCloseBtnClicked";
+    /** triggers when user clicks on view dashboard*/
+    RAEvent["LoadDashboard"] = "LoadDashboard";
+    /** triggers when user clicks on copywidget */
+    RAEvent["CopyWidget"] = "CopyWidget";
+    /**triggers when user clicks on Move widget */
+    RAEvent["MoveWidget"] = "MoveWidget";
+    /**triggers when user raise delete widget event */
+    RAEvent["WidgetDelete"] = "WidgetDelete";
+    /** used to add widget to widgetlist when user copies a widget to current dashboard */
+    RAEvent["AddWidget"] = "AddWidget";
+    /** done button click on widget library flyout */
+    RAEvent["widgetLibraryDoneClick"] = "widgetLibraryDoneClick";
+    /**refresh favorite icon after srtting and resetting favorites */
+    RAEvent["favoriteIconRefresh"] = "favoriteIconRefresh";
+    /**to refresh menu content */
+    RAEvent["QuickLinkRefresh"] = "QuickLinkRefresh";
+    /**To raise widget added event */
+    RAEvent["WidgetAdded"] = "WidgetAdded";
+    /**To update global filter site from map widget selected site */
+    RAEvent["UpdateGlobalFilterFromMapWidget"] = "UpdateGlobalFilterFromMapWidget";
+    /**To add widget on empty dashboard */
+    RAEvent["AddWidgetEmptyDashboard"] = "AddWidgetEmptyDashboard";
+    /**To raise new widget add click event */
+    RAEvent["AddNewWidgetToDashboard"] = "AddNewWidgetToDashboard";
+    RAEvent["HideDashboardBanner"] = "HideDashboardBanner";
+    /**To launch flyout from custom widget library */
+    RAEvent["LaunchCustomWidgetFlyout"] = "LaunchCustomWidgetFlyout";
+    /**update applied filter badge for inaplicable filters */
+    RAEvent["UpdateAppledFiterForInapplicableFilter"] = "UpdateAppledFiterForInapplicableFilter";
+    /**show inapplicable filter message in global filter flyout */
+    RAEvent["ShowInapplicableFilterMessage"] = "ShowInapplicableFilterMessage";
+})(RAEvent || (RAEvent = {}));
+var RAEventKey;
+(function (RAEventKey) {
+    /** on edit widget click */
+    RAEventKey["WidgetInstanceId"] = "widgetInstanceId";
+})(RAEventKey || (RAEventKey = {}));
+
+const GridsterConfigDefaultSettings = {
+    gridType: 'scrollVertical',
+    compactType: 'none',
+    margin: 10,
+    outerMargin: true,
+    outerMarginTop: 10,
+    outerMarginRight: 10,
+    outerMarginBottom: 30,
+    outerMarginLeft: 10,
+    useTransformPositioning: true,
+    mobileBreakpoint: 640,
+    minCols: 10,
+    maxCols: 10,
+    minRows: 1,
+    maxRows: 100,
+    maxItemCols: 10,
+    minItemCols: 1,
+    maxItemRows: 1000,
+    minItemRows: 1,
+    maxItemArea: 1000,
+    minItemArea: 1,
+    defaultItemCols: 1,
+    defaultItemRows: 1,
+    keepFixedHeightInMobile: false,
+    keepFixedWidthInMobile: false,
+    scrollSensitivity: 10,
+    scrollSpeed: 20,
+    enableEmptyCellClick: false,
+    enableEmptyCellContextMenu: false,
+    enableEmptyCellDrop: false,
+    enableEmptyCellDrag: false,
+    emptyCellDragMaxCols: 50,
+    emptyCellDragMaxRows: 50,
+    ignoreMarginInRow: true,
+    draggable: {
+        enabled: true,
+        dragHandleClass: 'widget-move',
+        ignoreContent: true
+    },
+    resizable: {
+        enabled: true,
+    },
+    swap: true,
+    pushItems: true,
+    disablePushOnDrag: false,
+    disablePushOnResize: false,
+    pushDirections: { north: true, east: true, south: true, west: true },
+    pushResizeItems: false,
+    displayGrid: 'none',
+    disableWindowResize: false,
+    disableWarnings: false,
+    scrollToNewItems: true,
+    autoResizeonDrag: false,
+    setGridSize: false
+};
+
+class RADashboardResponsiveService {
+    constructor() {
+        this.resized = new Subject();
+        this.maxColsDesktop = 8;
+        this.resInfo = [
+            { 'id': 1, 'start': 0, 'end': 767, 'minCols': 1, 'maxCols': 1 },
+            { 'id': 2, 'start': 768, 'end': 1024, 'minCols': 1, 'maxCols': 2 },
+            { 'id': 3, 'start': 1025, 'end': 1366, 'minCols': 1, 'maxCols': 6 },
+            { 'id': 4, 'start': 1367, 'end': 9999999999, 'minCols': 1, 'maxCols': this.maxColsDesktop }
+        ];
+        this.setScreenWidth();
+        window.addEventListener('resize', () => {
+            var context = this;
+            if (this.screenWidthAdjusted)
+                clearTimeout(this.screenWidthAdjusted);
+            this.screenWidthAdjusted = setTimeout(() => {
+                context.setScreenWidth();
+            }, 500);
+        });
+    }
+    setScreenWidth() {
+        this.screenWidth = window.outerWidth;
+        if (this.IsDesktopView) {
+            this.currentResInfo = this.resInfo[3];
+            this.resized.next(true);
+        }
+        else {
+            let resInfo = this.resInfo.filter((item) => {
+                return item.end >= this.screenWidth && item.start <= this.screenWidth;
+            })[0];
+            if (!this.currentResInfo || this.currentResInfo.id != resInfo.id) {
+                this.currentResInfo = resInfo;
+                this.resized.next(this.currentResInfo);
+            }
+        }
+    }
+    get IsDesktopView() {
+        let agent = navigator.userAgent || navigator.vendor || window.opera;
+        if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|realme|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(agent) ||
+            /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent))
+            return false;
+        return true;
+    }
+    get IsMobile() {
+        let check = false;
+        let agent = navigator.userAgent || navigator.vendor || window.opera;
+        if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(agent)
+            || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent))
+            check = true;
+        return check;
+    }
+    getGridsterConfig(isWidgetMgmnt) {
+        let config = GridsterConfigDefaultSettings;
+        config.minCols = this.currentResInfo.maxCols;
+        config.maxCols = this.currentResInfo.maxCols;
+        config.minRows = this.currentResInfo.minCols;
+        config.maxItemCols = this.currentResInfo.maxCols;
+        config.minItemCols = this.currentResInfo.minCols;
+        config.minItemRows = this.currentResInfo.minCols;
+        config.minItemArea = this.currentResInfo.minCols * this.currentResInfo.minCols;
+        config.defaultItemCols = this.currentResInfo.minCols;
+        config.defaultItemRows = this.currentResInfo.minCols;
+        if (!this.IsDesktopView || !isWidgetMgmnt) {
+            if (config.resizable)
+                config.resizable.enabled = false;
+            config.swap = false;
+            if (config.draggable)
+                config.draggable.enabled = false;
+        }
+        else {
+            if (config.resizable)
+                config.resizable.enabled = true;
+            config.swap = true;
+            if (config.draggable)
+                config.draggable.enabled = true;
+        }
+        return config;
+    }
+    /**To map IwidgetInfo object to gridsterItem */
+    getGridsterItem(widget) {
+        if (widget.widgetSettings) {
+            widget.settings = JSON.parse(widget.widgetSettings);
+        }
+        let gridsterItem = {
+            cols: this.getWidth(widget.width),
+            rows: this.getHeight(widget.height),
+            x: this.IsDesktopView ? widget.position_x : 0,
+            y: this.IsDesktopView ? widget.position_y : 0,
+            widgetInfo: widget,
+            minItemRows: this.getMinItemRows(widget),
+            minItemCols: this.getMinItemCols(widget)
+        };
+        return gridsterItem;
+    }
+    getWidth(width) {
+        if (!this.IsDesktopView) {
+            width = Math.floor(width / this.maxColsDesktop * this.currentResInfo.maxCols);
+            if (width < this.currentResInfo.minCols)
+                width = this.currentResInfo.minCols;
+        }
+        return width;
+    }
+    getMinItemRows(widget) {
+        if (this.IsDesktopView) {
+            if (widget.settings && widget.settings.minRows) {
+                return widget.settings.minRows;
+            }
+        }
+    }
+    getMinItemCols(widget) {
+        if (this.IsDesktopView) {
+            if (widget.settings && widget.settings.minCols) {
+                return widget.settings.minCols;
+            }
+        }
+    }
+    getHeight(height) {
+        if (!this.IsDesktopView) {
+            height = Math.floor(height / this.maxColsDesktop * this.currentResInfo.maxCols);
+            if (height < this.currentResInfo.minCols)
+                height = this.currentResInfo.minCols;
+        }
+        return height;
+    }
+}
+RADashboardResponsiveService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RADashboardResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RADashboardResponsiveService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RADashboardResponsiveService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RADashboardResponsiveService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+class LockTooltip {
+    constructor(domService) {
+        this.domService = domService;
+    }
+    ngOnInit() {
+        if (this.element) {
+            this.setPopupPosition();
+        }
+    }
+    setPopupPosition() {
+        let rect = this.element.getBoundingClientRect();
+        if ((rect.left + 250) > window.innerWidth) {
+            this.containerLeft = (rect.left - ((rect.left + 270) - window.innerWidth)) + 'px';
+        }
+        else {
+            this.containerLeft = rect.left + 'px';
+        }
+        if (rect.bottom + 100 < window.innerHeight) {
+            this.containerTop = (rect.bottom) + 'px';
+            this.containerBottom = null;
+        }
+        else {
+            this.containerTop = null;
+            this.containerBottom = (window.innerHeight - rect.top) + 'px';
+        }
+    }
+    removeMe(comp) {
+        setTimeout(() => {
+            this.domService.removeComponent(comp);
+        });
+    }
+}
+LockTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: LockTooltip, deps: [{ token: i3.DomService }], target: i0.ɵɵFactoryTarget.Component });
+LockTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", 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: function () { return [{ type: i3.DomService }]; } });
+
+class RAWidgetContainer {
+    constructor(dashboardService, ngxService, translateService, ngZone, notifier, renderer, raPermissionService, domService) {
+        this.dashboardService = dashboardService;
+        this.ngxService = ngxService;
+        this.translateService = translateService;
+        this.ngZone = ngZone;
+        this.notifier = notifier;
+        this.renderer = renderer;
+        this.raPermissionService = raPermissionService;
+        this.domService = domService;
+        this.showPanel = true;
+        this.isWidgetLoaded = false;
+        this.lockClass = "unlocked";
+        this.lockStatus = RaWidgetlockStatus.Unlocked;
+        this.isDownloadIconVisible = false;
+        this.isChartDownloadVisible = false;
+        this.isGridDownloadVisible = false;
+        this.enableTitleLine = false;
+        this.isGlobalFilterApplied = false;
+        this.toolTipValue = '  ';
+        this.toolTipWidth = '0px';
+        this.editToolTipValue = ' ';
+        this.copyToolTipValue = ' ';
+        this.moveToolTipValue = ' ';
+        this.excelToolTipValue = ' ';
+        this.deleteToolTipValue = ' ';
+        this.editText = '';
+        this.copyText = '';
+        this.moveText = '';
+        this.excelText = '';
+        this.deleteText = '';
+        this.editToolTipWidth = '0px';
+        this.copyToolTipWidth = '0px';
+        this.moveToolTipWidth = '0px';
+        this.excelToolTipWidth = '0px';
+        this.deleteToolTipWidth = '0px';
+        this.noPadding = false;
+        this.isMouseHover = false;
+        this.showSettingsLink = true;
+        this.isKpiView = false;
+        this.showExcell = true;
+        this.hideTitle = false;
+        this.inapplicableFilters = [];
+        this.widgetDeleted = new EventEmitter();
+        this.updateAppliedFilters = new EventEmitter();
+        this.isWidgetStateApplicable = false;
+        this.widgetEmptyState = '';
+        this.lockVisible = false;
+        this.isWidgetMgmnt = false;
+        this.enableTitleLineActual = false;
+        this.renderer.listen('window', 'click', (e) => {
+            if (e.target.className) {
+                if (e.target.className != 'fal fa-ellipsis-v widget-menu-ellipse') {
+                    this.removeMenu();
+                }
+            }
+            else {
+                this.removeMenu();
+            }
+        });
+    }
+    set setResized(resized) {
+        this.invokeWidgetResizedEvent();
+    }
+    ngOnInit() {
+        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');
+        this.inapplicableIconFooter = this.translateService.translate('Common.InapplicableFiltersDesc');
+    }
+    get widgetViewState() { return WidgetViewState; }
+    ngOnChanges(changes) {
+        this.isWidgetMgmnt = this.raPermissionService.hasPermission('ra.widgetmanagement');
+        if (changes['raDashboardEventBus'] && changes['raDashboardEventBus'].currentValue != changes['raDashboardEventBus'].previousValue) {
+            this.configChanged = this.raDashboardEventBus.subscribeWithKey(RAEvent.ConfigChanged, RAEventKey.WidgetInstanceId, this.data.widgetInfo.widgetInstanceId.toString()).subscribe((e) => {
+                this.ngZone.run(() => {
+                    this.configChangeEventHandler(e);
+                });
+            });
+        }
+        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);
+            }
+            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();
+        }
+    }
+    invokeWidgetResizedEvent() {
+        if (this.widgetElement) {
+            if (typeof this.widgetElement.widgetResized === "function") {
+                let size = {};
+                size.height = this.height;
+                size.width = this.width;
+                size.cellHeight = this.gridCellHeight;
+                this.widgetElement.widgetResized(size);
+                if (this.height == 1 || this.width == 1)
+                    this.isKpiView = true;
+                else
+                    this.isKpiView = false;
+            }
+        }
+    }
+    mouseHover(isHover = true) {
+        this.isMouseHover = isHover;
+        if (this.widgetElement) {
+            if (typeof this.widgetElement.hoverStatus === "function") {
+                this.widgetElement.hoverStatus(isHover);
+            }
+            else {
+                console.warn('widget framework outdated, please update to version 0.0.96');
+            }
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.loadWidget(this.data.widgetInfo);
+        });
+        document.addEventListener("scroll", () => {
+            this.removeMenu();
+            this.closePopup();
+        });
+        setTimeout(() => {
+            let item = jQuery(this.wcWrapper.nativeElement).closest('gridster-item');
+            item.bind('mouseenter', () => {
+                window.gridsterItemEnter = true;
+            });
+            item.bind('mouseleave', () => {
+                window.gridsterItemEnter = false;
+                setTimeout(() => {
+                    if (!window.mouseOverWidgetMenu) {
+                        this.removeMenu();
+                    }
+                });
+            });
+        });
+    }
+    ngOnDestroy() {
+        if (this.configChanged)
+            this.configChanged.unsubscribe();
+        if (this.widgetElementHandler && this.data && this.data.widgetInfo && this.data.widgetInfo.widgetInstanceId) {
+            document.body.removeEventListener('widgetinitiated' + this.data.widgetInfo.widgetInstanceId, this.widgetElementHandler);
+        }
+    }
+    /** To Edit current widget configuration*/
+    editWidget() {
+        let widgetConfigFilter = null;
+        if (this.widgetElement && typeof (this.widgetElement.getConfigFilter) == 'function') {
+            let configData = this.widgetElement.getConfigFilter();
+            if (configData) {
+                widgetConfigFilter = configData;
+            }
+        }
+        if (widgetConfigFilter) {
+            this.raDashboardEventBus.publish(RAEvent.WidgetEditClicked, widgetConfigFilter);
+        }
+        else {
+            let widgetConfigFilterData = this.generateConfigFilter(false);
+            this.raDashboardEventBus.publish(RAEvent.WidgetEditClicked, widgetConfigFilterData);
+        }
+    }
+    /** To Delete current widget from DOM*/
+    deleteWidget() {
+        let widgetContainerContext = this;
+        widgetContainerContext.ngxService.start();
+        widgetContainerContext.dashboardService.deleteWidget(this.data.widgetInfo, this.appConfig).subscribe(status => {
+            widgetContainerContext.ngxService.stop();
+            if (status) {
+                widgetContainerContext.widgetDeleted.emit(this.data.widgetInfo.widgetInstanceId);
+                this.setInapplicableFilters(undefined, this.data.widgetInfo.widgetInstanceId);
+            }
+            else {
+                widgetContainerContext.notifier.notify('error', " " + this.translateService.translate('FailedToRemoveWidget') + "  (" + this.translateService.translate('Common.' + this.data.widgetInfo.widgetTitle, true) + ")!");
+            }
+        });
+    }
+    /** To Move or change position if current widget container*/
+    moveWidget() {
+        this.raDashboardEventBus.publish(RAEvent.MoveWidget, this.data.widgetInfo);
+        this.setInapplicableFilters(undefined, this.data.widgetInfo.widgetInstanceId);
+        // this.dashboardService.moveWidget(widgetInfo);
+    }
+    /** To Copy Current widget with same configuration*/
+    copyWidget() {
+        this.raDashboardEventBus.publish(RAEvent.CopyWidget, this.data.widgetInfo);
+        //this.dashboardService.copyWidget(widgetInfo);
+    }
+    visitPage() {
+        this.baseUrl = this.getHostUrl();
+        let url = this.baseUrl + this.detailPageUrl;
+        if (this.data.widgetInfo && this.data.widgetInfo.widgetSettings) {
+            this.widgetSettings = this.getParsedConfig(this.data.widgetInfo.widgetSettings);
+            if (this.widgetSettings.customPageParams || this.widgetSettings.customPageURL) {
+                let params = this.widgetElement.getPageParamsClicked();
+                if (params) {
+                    if (this.data.widgetInfo.widgetType == 'AV Widget' || this.widgetSettings.customPageURL)
+                        url = url + params;
+                    else
+                        url = url + '?' + params;
+                }
+            }
+        }
+        window.open(url, '_blank');
+    }
+    getHostUrl() {
+        return window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+    }
+    configChangeEventHandler(widgetInfo) {
+        this.data.widgetInfo = widgetInfo;
+        if (this.gridCellHeight > 0) {
+            this.data.widgetInfo.rowHeight = this.gridCellHeight;
+        }
+        if (this.widgetElement && typeof (this.widgetElement.setConfigFilter) == 'function') {
+            this.widgetElement.setConfigFilter(this.generateConfigFilter(true));
+        }
+        else {
+            console.warn('widget framework outdated, please update to version 0.0.98');
+        }
+        this.refreshWidget(this.data.widgetInfo, true);
+    }
+    generateConfigFilter(configChanged = false) {
+        let widgetConfigFilterData = {
+            appConfig: this.appConfig,
+            globalFilter: this.globalFilter,
+            widgetInfo: this.data.widgetInfo,
+            config: this.data.widgetInfo.widgetConfigInfo.config,
+            configChanges: this.getConfigChanges(configChanged)
+        };
+        return widgetConfigFilterData;
+    }
+    /**  To load external custom element to the widget container*/
+    loadWidget(widgetInfo) {
+        return __awaiter(this, void 0, void 0, function* () {
+            widgetInfo.rowHeight = this.gridCellHeight;
+            let widgetConfigFilter = {
+                config: widgetInfo.widgetConfigInfo.config,
+                globalFilter: this.globalFilter,
+                configChanges: this.getConfigChanges(false)
+            };
+            if (widgetInfo.widgetSettings) {
+                this.widgetSettings = this.getParsedConfig(widgetInfo.widgetSettings);
+                this.applayWidgetSettings(this.widgetSettings);
+            }
+            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 = (event) => {
+                        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                            this.widgetElement.addEventListener('on-widget-respond', (e) => {
+                                var type = e.detail.type;
+                                switch (type) {
+                                    case 'onDataLoad':
+                                        if (e.detail.data)
+                                            this.showPanel = true;
+                                        else
+                                            this.showPanel = false;
+                                        break;
+                                    case 'onConfigEditClicked':
+                                        this.editWidget();
+                                        break;
+                                    case 'onEnableDefaultState':
+                                        this.setEmptyState(e.detail.data);
+                                        break;
+                                    case 'onSetTitleUnderline':
+                                        if (e.detail.data == true)
+                                            this.enableTitleLine = true;
+                                        else
+                                            this.enableTitleLine = this.enableTitleLineActual;
+                                        break;
+                                    case 'onWidgetTitleHidden':
+                                        if (e.detail.data == true)
+                                            this.hideTitle = true;
+                                        else
+                                            this.hideTitle = false;
+                                        break;
+                                    case 'onUpdateLockData':
+                                        this.setLock(e.detail.data);
+                                        break;
+                                    case 'onGlobalFilterApplicableCheck':
+                                        this.setInapplicableFilters(e.detail.data, widgetInfo.widgetInstanceId);
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            });
+                            if (typeof (this.widgetElement.titleLineEnabled) != 'undefined') {
+                                let titleLineEnabled = this.widgetElement.titleLineEnabled();
+                                if (titleLineEnabled) {
+                                    this.enableTitleLine = titleLineEnabled;
+                                    this.enableTitleLineActual = titleLineEnabled;
+                                }
+                            }
+                            this.editText = this.translateService.translate('Common.edit');
+                            if (this.translateService.translate('Common.edit').length > 6) {
+                                this.editText = (this.translateService.translate('Common.edit').substring(0, 6) + '...');
+                                this.editToolTipValue = this.translateService.translate('Common.edit');
+                                this.editToolTipWidth = "300px";
+                            }
+                            this.copyText = this.translateService.translate('Common.copy');
+                            if (this.translateService.translate('Common.copy').length > 6) {
+                                this.copyText = (this.translateService.translate('Common.copy').substring(0, 6) + '...');
+                                this.copyToolTipValue = this.translateService.translate('Common.copy');
+                                this.copyToolTipWidth = "300px";
+                            }
+                            this.moveText = this.translateService.translate('Common.move');
+                            if (this.translateService.translate('Common.move').length > 6) {
+                                this.moveText = (this.translateService.translate('Common.move').substring(0, 6) + '...');
+                                this.moveToolTipValue = this.translateService.translate('Common.move');
+                                this.moveToolTipWidth = "300px";
+                            }
+                            this.excelText = this.translateService.translate('Common.excel');
+                            if (this.translateService.translate('Common.excel').length > 6) {
+                                this.excelText = (this.translateService.translate('Common.excel').substring(0, 6) + '...');
+                                this.excelToolTipValue = this.translateService.translate('Common.excel');
+                                this.excelToolTipWidth = "300px";
+                            }
+                            this.deleteText = this.translateService.translate('Common.delete');
+                            if (this.translateService.translate('Common.delete').length > 6) {
+                                this.deleteText = (this.translateService.translate('Common.delete').substring(0, 6) + '...');
+                                this.deleteToolTipValue = this.translateService.translate('Common.delete');
+                                this.deleteToolTipWidth = "300px";
+                            }
+                            this.isWidgetLoaded = true;
+                            widgetConfigFilter.appConfig = this.appConfig;
+                            widgetConfigFilter.widgetInfo = widgetInfo;
+                            widgetConfigFilter.configChanges = this.getConfigChanges(false);
+                            widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
+                            widgetConfigFilter.globalFilter = this.globalFilter;
+                            this.widgetElement.loadContent(widgetConfigFilter);
+                            yield this.setLock(widgetConfigFilter.config);
+                            yield this.setDownloadIcon();
+                        }));
+                    };
+                    this.widgetElementHandler = handler;
+                    document.body.addEventListener('widgetinitiated' + widgetInfo.widgetInstanceId, handler);
+                    this.ctlWidget.nativeElement.appendChild(this.widgetElement);
+                });
+            });
+        });
+    }
+    /**To set Default State for the widget when it is not configured */
+    setNotConfiguredState(widgetInfo, forceEnable = false) {
+        if ((widgetInfo.showDefaultState && (widgetInfo.widgetConfigInfo.config == "" || Object.keys(JSON.parse(widgetInfo.widgetConfigInfo.config)).length == 0)) || (forceEnable)) {
+            this.isWidgetStateApplicable = true;
+            this.widgetEmptyState = WidgetViewState.emptyConfig.toString();
+        }
+        else {
+            this.widgetEmptyState = '';
+            this.isWidgetStateApplicable = false;
+        }
+    }
+    /**To configure empty state for the widget  */
+    setEmptyState(widgetState) {
+        if (this.height == 1 || this.width == 1)
+            this.isKpiView = true;
+        else
+            this.isKpiView = false;
+        this.widgetEmptyState = widgetState.widgetViewState;
+        this.isGlobalFilterApplied = widgetState.isGlobalFilterApplied;
+        if (widgetState != WidgetViewState.normal) {
+            this.isWidgetStateApplicable = true;
+            this.isDownloadIconVisible = false;
+        }
+        else {
+            this.isWidgetStateApplicable = false;
+        }
+        switch (widgetState) {
+            case WidgetViewState.emptyConfig:
+                this.setNotConfiguredState(this.data.widgetInfo, true);
+                break;
+            case WidgetViewState.emptyData:
+                break;
+            case WidgetViewState.error:
+                break;
+        }
+    }
+    getConfigChanges(configChanged = false) {
+        let configChanges = {
+            isConfigUpdated: configChanged,
+            updatedConfigProperty: []
+        };
+        return configChanges;
+    }
+    /** To refresh widget on input config changes */
+    refreshWidget(widgetInfo, configChanged = false) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.WidgetDisplayName = this.translateService.translate('Common.' + this.data.widgetInfo.widgetTitle, true);
+            widgetInfo.rowHeight = this.gridCellHeight;
+            this.setNotConfiguredState(widgetInfo);
+            let widgetContainerContext = this;
+            let widgetConfigFilter = {
+                config: widgetInfo.widgetConfigInfo.config,
+                globalFilter: this.globalFilter,
+                appConfig: this.appConfig,
+                widgetInfo: widgetInfo,
+                configChanges: this.getConfigChanges(configChanged)
+            };
+            if (widgetContainerContext.isWidgetLoaded) {
+                if (this.widgetElement && typeof (this.widgetElement.setConfigFilter) == 'function') {
+                    widgetContainerContext.widgetElement.setConfigFilter(widgetConfigFilter);
+                }
+                widgetContainerContext.widgetElement.loadContent(widgetConfigFilter);
+                yield this.setLock(widgetConfigFilter.config);
+                yield this.setDownloadIcon();
+            }
+        });
+    }
+    mouseOver(event) {
+        this.toolTipValue = ' ';
+        this.toolTipWidth = '0px';
+        let element = this.searchInput.nativeElement;
+        if (element.offsetWidth < element.scrollWidth) {
+            this.toolTipValue = element.innerHTML;
+            this.toolTipWidth = '300px';
+        }
+        else {
+            this.toolTipWidth = '0px';
+        }
+    }
+    setLock(config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.lockTemplateInfo = this.widgetElement.loadLockInfo();
+            var configObj;
+            if (config) {
+                configObj = JSON.parse(config);
+                if (configObj && configObj.Locks != undefined) {
+                    if (configObj.Locks.IsDateLocked || configObj.Locks.IsDatesLocked || configObj.Locks.IsParticipantLocked || configObj.Locks.IsSourceLocked) {
+                        this.lockDetails = [];
+                        if (configObj.Locks.IsDateLocked || configObj.Locks.IsDatesLocked)
+                            this.lockDetails.push(this.translateService.translate('Common.DateRange'));
+                        if (configObj.Locks.IsParticipantLocked) {
+                            this.lockDetails.push(this.translateService.translate('Common.DivisionOrGrouporSite'));
+                        }
+                        if (configObj.Locks.IsSourceLocked)
+                            this.lockDetails.push(this.translateService.translate('Common.DataStream'));
+                    }
+                    else {
+                        this.lockDetails = undefined;
+                    }
+                }
+                else {
+                    this.lockDetails = undefined;
+                }
+            }
+        });
+    }
+    setDownloadIcon() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let downloadType = yield this.widgetElement.getDownloadType();
+            this.downloadIconType = downloadType;
+            this.isDownloadIconVisible = false;
+            this.isChartDownloadVisible = false;
+            this.isGridDownloadVisible = false;
+            this.showExcell = true;
+            if (downloadType != RADownloadType.None) {
+                this.isDownloadIconVisible = true;
+            }
+            else {
+                if (!this.isWidgetMgmnt && !this.detailPageUrl) {
+                    this.showSettingsLink = false;
+                }
+            }
+            if (downloadType == RADownloadType.Chart) {
+                this.isChartDownloadVisible = true;
+            }
+            if (downloadType == RADownloadType.Grid) {
+                this.isGridDownloadVisible = true;
+            }
+            if (downloadType == RADownloadType.Statistics) {
+                this.isGridDownloadVisible = true;
+                this.showExcell = false;
+            }
+        });
+    }
+    downloadIconClicked(type) {
+        switch (type) {
+            case "CSV":
+                this.widgetElement.downloadClicked(this.downloadIconType, RADownloadOption.CSV);
+                break;
+            case "PNG":
+                this.widgetElement.downloadClicked(this.downloadIconType, RADownloadOption.PNG);
+                break;
+            case "PDF":
+                this.widgetElement.downloadClicked(this.downloadIconType, RADownloadOption.PDF);
+                break;
+            case "SVG":
+                this.widgetElement.downloadClicked(this.downloadIconType, RADownloadOption.SVG);
+                break;
+            case "JPEG":
+                this.widgetElement.downloadClicked(this.downloadIconType, RADownloadOption.JPEG);
+                break;
+        }
+    }
+    removeMenu() {
+        jQuery('#ra-db-widget-menu').remove();
+    }
+    checkVisitLinkVisiblity() {
+        let isVisitApplicable = true;
+        if (this.widgetElement && typeof this.widgetElement.getVisitLinkVisibilityStatus === "function") {
+            isVisitApplicable = this.widgetElement.getVisitLinkVisibilityStatus();
+        }
+        return isVisitApplicable;
+    }
+    /**Show dropdown on gear icon click  */
+    showDropDown(e) {
+        this.setDownloadIcon();
+        this.removeMenu();
+        setTimeout(() => {
+            var _a, _b;
+            let targetPos = e.target.getBoundingClientRect();
+            let style = "position:fixed;top:" + (targetPos.y + 15) + 'px' + ';left:' + (e.pageX - 122) + 'px;z-index:1000;';
+            let html = this.getContenxtHtml(style);
+            jQuery(html).appendTo('body');
+            if (this.isWidgetMgmnt) {
+                this.addEventListener('wcEditWidget', this.editWidget);
+                this.addEventListener('wcCopyWidget', this.copyWidget);
+                this.addEventListener('wcMoveWidget', this.moveWidget);
+                this.addEventListener('wcWidgetDelete', this.deleteWidget);
+            }
+            let customPageParams = false;
+            if (this.data.widgetInfo && this.data.widgetInfo.widgetSettings) {
+                this.widgetSettings = this.getParsedConfig(this.data.widgetInfo.widgetSettings);
+                if (this.widgetSettings.customPageParams || this.widgetSettings.customPageURL) {
+                    customPageParams = true;
+                }
+            }
+            if ((this.detailPageUrl || customPageParams) && this.checkVisitLinkVisiblity()) {
+                this.addEventListener('wcVisitWidget', this.visitPage);
+            }
+            if (this.isChartDownloadVisible) {
+                this.addEventListener('wcDownloadPng', this.downloadIconClicked, 'PNG');
+                this.addEventListener('wcDownloadJpg', this.downloadIconClicked, 'JPEG');
+                this.addEventListener('wcDownloadPdf', this.downloadIconClicked, 'PDF');
+                this.addEventListener('wcDownloadSvg', this.downloadIconClicked, 'SVG');
+            }
+            if (this.isGridDownloadVisible && this.showExcell) {
+                this.addEventListener('wcDownloadExcel', this.downloadIconClicked, 'CSV');
+            }
+            (_a = document.getElementById('ra-db-widget-menu')) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', () => {
+                window.mouseOverWidgetMenu = true;
+            });
+            (_b = document.getElementById('ra-db-widget-menu')) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', () => {
+                window.mouseOverWidgetMenu = false;
+                setTimeout(() => {
+                    if (!window.gridsterItemEnter) {
+                        this.removeMenu();
+                    }
+                });
+            });
+        });
+    }
+    addEventListener(id, event, params) {
+        let element = document.getElementById(id);
+        if (element) {
+            element.addEventListener('click', () => {
+                event.call(this, params);
+            });
+        }
+    }
+    getContenxtHtml(style) {
+        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);
+        }
+        let customPageParams = false;
+        if (this.data.widgetInfo && this.data.widgetInfo.widgetSettings) {
+            this.widgetSettings = this.getParsedConfig(this.data.widgetInfo.widgetSettings);
+            if (this.widgetSettings.customPageParams || this.widgetSettings.customPageURL) {
+                customPageParams = true;
+            }
+        }
+        if ((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) {
+            html += '<div style="color: #9FA0A4;font-size: 12px;padding-top: 8px;padding-left: 12px;">';
+            html += this.translateService.translate('Common.settings') + '</div>';
+            html += settings;
+            html += this.getHr();
+        }
+        if (this.isDownloadIconVisible) {
+            if (this.showExcell) {
+                if (this.detailPageUrl || this.isWidgetMgmnt)
+                    html += '<span style="color: #9FA0A4;font-size: 12px;">';
+                else
+                    html += '<span style="color: #9FA0A4;font-size: 12px;padding-top:5px;display:block;">';
+                html += this.translateService.translate('Common.downloads');
+                html += '</span>';
+            }
+            if (this.isChartDownloadVisible) {
+                html += '<div style="padding-top: 10px;" class="chartDownload">';
+                html += this.getHtmlForButton('wcDownloadPng', 'fal fa-file-image', this.translateService.translate('Common.png'));
+                html += this.getHtmlForButton('wcDownloadJpg', 'fal fa-file-image', this.translateService.translate('Common.jpeg'));
+                html += this.getHtmlForButton('wcDownloadPdf', 'fal fa-file-pdf', this.translateService.translate('Common.pdf'));
+                html += this.getHtmlForButton('wcDownloadSvg', 'fal fa-file-alt', this.translateService.translate('Common.svg'));
+                html += '</div>';
+            }
+            if (this.isGridDownloadVisible && this.showExcell) {
+                html += '<div class="gridDownload">';
+                html += this.getHtmlForButton('wcDownloadExcel', 'fal fa-download', this.excelText);
+                html += '</div>';
+            }
+        }
+        if (this.isDownloadIconVisible && this.isWidgetMgmnt && this.showExcell) {
+            html += this.getHr();
+        }
+        if (this.isWidgetMgmnt) {
+            html += '<a id="wcWidgetDelete"><i class="fal fa-times" style="padding-left: 3px;color: red;"></i><span>';
+            html += this.deleteText;
+            html += '</span></a>';
+        }
+        html += '</div>';
+        return html;
+    }
+    getHr() {
+        return '<hr class="hr" style="margin-top: 5px;margin-bottom: 5px;">';
+    }
+    getHtmlForButton(id, fontClass, text) {
+        let html = '<a id="' + id + '"><i style="width:16px" class="' + fontClass + '"></i> <span style="padding-left: 6px;">';
+        html += text;
+        html += '</span></a>';
+        return html;
+    }
+    getParsedConfig(config) {
+        let parsedConfig;
+        if (config) {
+            if (typeof config === 'string') {
+                try {
+                    parsedConfig = JSON.parse(config);
+                }
+                catch (_a) {
+                    parsedConfig = {};
+                }
+                return parsedConfig;
+            }
+        }
+        return config;
+    }
+    applayWidgetSettings(settings) {
+        if (settings.NoPadding)
+            this.noPadding = true;
+        else
+            this.noPadding = false;
+    }
+    setInapplicableFilters(data, instanceId) {
+        var widgetData = {};
+        this.inapplicableFilters = [];
+        widgetData.instanceId = instanceId;
+        if (data && data.length > 0) {
+            data.forEach((element) => {
+                if (element == 'dateRange')
+                    this.inapplicableFilters.push(this.translateService.translate('Common.DateRange'));
+                else if (element == 'participant') {
+                    this.inapplicableFilters.push(this.translateService.translate('Common.DivisionGroup'));
+                }
+                else if (element == 'source')
+                    this.inapplicableFilters.push(this.translateService.translate('Common.DataStream'));
+                else
+                    this.inapplicableFilters.push(element);
+            });
+            widgetData.data = data;
+        }
+        else {
+            widgetData.data = undefined;
+        }
+        this.updateAppliedFilters.emit(widgetData);
+    }
+    openPopup(title, data, footer, type, template = undefined) {
+        let props = {};
+        if (type == 'innaplicable' && this.banPopupDiv)
+            props.element = this.banPopupDiv.nativeElement;
+        if (type == 'lock' && this.lockPopupDiv)
+            props.element = this.lockPopupDiv.nativeElement;
+        props.title = title;
+        props.data = data;
+        props.footer = footer;
+        if (template)
+            props.template = template;
+        this.currentComponent = this.domService.appendComponent(LockTooltip, document.body, props);
+        this.popupInstance = this.currentComponent.instance;
+    }
+    closePopup() {
+        if (this.currentComponent)
+            this.popupInstance.removeMe(this.currentComponent);
+    }
+}
+RAWidgetContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", 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 });
+RAWidgetContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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>", components: [{ type: i5.TooltipControl, selector: "ra-tooltip", inputs: ["data", "url", "value", "key", "dataField", "position", "width", "count", "moreItemText", "reset", "disable-tooltip", "set-top-padding"], outputs: ["dataLoaded"] }, { type: i5.WidgetStateControl, selector: "ra-widget-state", inputs: ["isWidgetStateApplicable", "isGlobalFilterApplied", "widgetEmptyState", "widgetEmptyDataText", "widthCol", "heightCol"], outputs: ["editWidgetClicked"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", 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>" }]
+        }], ctorParameters: function () { return [{ 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 }]
+            }], widgetDropdown: [{
+                type: ViewChild,
+                args: ['widgetDropdown', { static: false }]
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput', { static: false }]
+            }], wcWrapper: [{
+                type: ViewChild,
+                args: ['wcWrapper', { static: false }]
+            }], banPopupDiv: [{
+                type: ViewChild,
+                args: ['banPopupDiv', { static: false }]
+            }], lockPopupDiv: [{
+                type: ViewChild,
+                args: ['lockPopupDiv', { static: false }]
+            }], widgetInstanceId: [{
+                type: Input,
+                args: ['widget-instance-id']
+            }], globalFilter: [{
+                type: Input,
+                args: ['global-filter']
+            }], data: [{
+                type: Input,
+                args: ['data']
+            }], raDashboardEventBus: [{
+                type: Input,
+                args: ['event-bus']
+            }], appConfig: [{
+                type: Input,
+                args: ['app-config']
+            }], width: [{
+                type: Input,
+                args: ['widget-width']
+            }], height: [{
+                type: Input,
+                args: ['widget-height']
+            }], gridCellHeight: [{
+                type: Input,
+                args: ['grid-cell-height']
+            }], widgetDeleted: [{
+                type: Output
+            }], updateAppliedFilters: [{
+                type: Output
+            }], setResized: [{
+                type: Input,
+                args: ['dom-resized']
+            }] } });
+
+class RADashboardArea {
+    constructor(dashboardService, ngZone, ngxService, translateService, notifier, responsiveService, permissionService) {
+        this.dashboardService = dashboardService;
+        this.ngZone = ngZone;
+        this.ngxService = ngxService;
+        this.translateService = translateService;
+        this.notifier = notifier;
+        this.responsiveService = responsiveService;
+        this.permissionService = permissionService;
+        this.widgetList = Array();
+        this.gridheight = 300;
+        this.gridcellHeight = 0;
+        this.userWidgets = [];
+        this.PAMWidgets = [];
+        this.isWidgetLoaded = false;
+        this.domResized = false;
+        this.showEmptyDashboard = false;
+        this.isWidgetMgmnt = false;
+        this.widgetHeight = 2;
+        this.widgetWidth = 4;
+        this.hideDashboardBanner = new EventEmitter();
+    }
+    ngOnInit() {
+        this.isWidgetMgmnt = this.permissionService.hasPermission('ra.widgetmanagement');
+        this.initiateGridsterConfig();
+        this.lastViewType = this.responsiveService.IsDesktopView ? 'desktop' : 'mobile';
+        this.responsiveService.resized.subscribe((isDesktop) => {
+            if (this.lastViewType != (isDesktop ? 'desktop' : 'mobile') || !isDesktop) {
+                this.lastViewType = (isDesktop ? 'desktop' : 'mobile');
+                this.widgetList = [];
+                setTimeout(() => {
+                    this.initiateGridsterConfig();
+                    if (this.options && this.options.api && this.options.api.optionsChanged)
+                        this.options.api.optionsChanged();
+                    if (this.userWidgets) {
+                        this.widgetList = this.mapObjectListToGridsterItemList(this.userWidgets);
+                        setTimeout(() => {
+                            this.setAreaHeight();
+                        });
+                    }
+                    else {
+                        this.loadWidgets(this.userDashboardId, this.areaKey);
+                    }
+                    this.domResized = !this.domResized;
+                });
+            }
+            else {
+                setTimeout(() => {
+                    this.domResized = !this.domResized;
+                    this.setAreaHeight();
+                }, 100);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        this.isWidgetMgmnt = this.permissionService.hasPermission('ra.widgetmanagement');
+        if (this.raDashboardEventBus && this.appConfig && !this.isWidgetLoaded) {
+            this.isWidgetLoaded = true;
+            this.loadWidgets(this.userDashboardId, this.areaKey);
+        }
+        if (changes['raDashboardEventBus'] && changes['raDashboardEventBus'].currentValue != changes['raDashboardEventBus'].previousValue) {
+            this.inititateEventBusSubscritions();
+        }
+    }
+    /**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 (gridster && gridster.curColWidth) {
+                this.gridcellHeight = gridster.curColWidth;
+            }
+        };
+        this.options.itemChangeCallback = (item) => {
+            if (this.responsiveService.IsDesktopView) {
+                // if (item.widgetInfo && item.widgetInfo.widgetInstanceId) {
+                //   this.updateWidgetPosition(item.widgetInfo.widgetInstanceId);
+                // }
+            }
+            this.setAreaHeight();
+        };
+    }
+    /** To initiate eventbus subsctiptions */
+    inititateEventBusSubscritions() {
+        this.widgetDeleteEvent = this.raDashboardEventBus.subscribe(RAEvent.WidgetDelete).subscribe((instanceId) => {
+            this.ngZone.run(() => {
+                this.deleteWidget(instanceId, true);
+            });
+        });
+        this.widgetAddEvent = this.raDashboardEventBus.subscribe(RAEvent.AddWidget).subscribe((widgetInfo) => {
+            this.ngZone.run(() => {
+                this.copyWidget(widgetInfo);
+            });
+        });
+        this.conifgAddClick = this.raDashboardEventBus.subscribe(RAEvent.ConfigAddClick).subscribe((e) => {
+            this.ngZone.run(() => {
+                this.addWidget(e);
+            });
+        });
+        this.rearrangeWidgetClick = this.raDashboardEventBus.subscribe(RAEvent.RearrangeClicked).subscribe((e) => {
+            this.ngZone.run(() => {
+                this.rearrangeWidgets();
+            });
+        });
+        this.widgetLibraryDoneClick = this.raDashboardEventBus.subscribe(RAEvent.widgetLibraryDoneClick).subscribe((widgetList) => {
+            this.ngZone.run(() => {
+                if (widgetList) {
+                    this.addWidgetListToGridster(widgetList, 0);
+                }
+            });
+        });
+    }
+    /**
+     * temp fix- recursive method to iterate over the list of items
+     * and add them to gridster in the given order
+     * @param widgetList  -list of widgets
+     * @param index -index of the current value to be added
+     */
+    addWidgetListToGridster(widgetList, index) {
+        let areaContext = this;
+        let indexVal = index + 1;
+        if (index > widgetList.length - 1)
+            return;
+        else {
+            if (index == 0) {
+                areaContext.addWidget(widgetList[index]);
+                areaContext.addWidgetListToGridster(widgetList, indexVal);
+            }
+            else {
+                setTimeout(() => {
+                    areaContext.addWidget(widgetList[index]);
+                    areaContext.addWidgetListToGridster(widgetList, indexVal);
+                }, 1000);
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.conifgAddClick)
+            this.conifgAddClick.unsubscribe();
+        if (this.widgetAddEvent)
+            this.widgetAddEvent.unsubscribe();
+        if (this.widgetDeleteEvent)
+            this.widgetDeleteEvent.unsubscribe();
+        if (this.widgetLibraryDoneClick)
+            this.widgetLibraryDoneClick.unsubscribe();
+        if (this.rearrangeWidgetClick)
+            this.rearrangeWidgetClick.unsubscribe();
+    }
+    /**To update position/dimention of all widgets in the area */
+    updateWidgets() {
+        this.dashboardService.updateWidgets(this.formatWidgetDataForPositionDetails(this.mapGridsterListToObject(this.widgetList)), this.appConfig).subscribe(widgets => {
+        });
+        return true;
+    }
+    /**To update widget dimensions */
+    updateWidgetPosition(widgetInstanceId) {
+        let widgetFilteredList = [];
+        let widget = this.widgetList.filter(filtered => filtered['widgetInfo'] && filtered['widgetInfo'].widgetInstanceId == widgetInstanceId);
+        if (widget && widget.length > 0) {
+            widgetFilteredList.push(widget[0]);
+            let widgetList = this.mapGridsterListToObject(widgetFilteredList);
+            this.dashboardService.updateWidgets(this.formatWidgetDataForPositionDetails(widgetList), this.appConfig).subscribe(widgets => {
+            });
+        }
+        return true;
+    }
+    /**To restrict request payload to be of min size (position & size details) */
+    formatWidgetDataForPositionDetails(widgetItemList) {
+        let itemList = [];
+        widgetItemList.forEach(function (widgetItem) {
+            let item = {};
+            item.widgetInstanceId = widgetItem.widgetInstanceId;
+            item.position_x = widgetItem.position_x;
+            item.position_y = widgetItem.position_y;
+            item.width = widgetItem.width;
+            item.height = widgetItem.height;
+            itemList.push(item);
+        });
+        return itemList;
+    }
+    /** To retrieve widgets based on userDashboardid and area name */
+    loadWidgets(userDashboarId, areaKey) {
+        let widgetInfo = {
+            dashboardId: userDashboarId.toString(),
+            dashboardAreaKey: areaKey
+        };
+        this.widgetList = [];
+        this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe(widgets => {
+            this.userWidgets = widgets;
+            this.PAMWidgets = [];
+            widgets.forEach((element) => {
+                var settings = undefined;
+                if (element.widgetSettings) {
+                    settings = JSON.parse(element.widgetSettings);
+                    if (settings && settings.isPAMWidget)
+                        this.PAMWidgets.push(element.widgetInstanceId);
+                }
+            });
+            this.checkPAMWidgets();
+            if (widgets && widgets.length > 0) {
+                this.widgetList = this.mapObjectListToGridsterItemList(widgets);
+                this.setAreaHeight();
+                this.raDashboardEventBus.publish(RAEvent.HideDashboardBanner, false);
+            }
+            else {
+                this.showEmptyDashboard = true;
+                this.raDashboardEventBus.publish(RAEvent.HideDashboardBanner, this.showEmptyDashboard);
+            }
+        });
+    }
+    /** To set Area(Gridster) height dynamically as widgets are added/removed */
+    setAreaHeight() {
+        setTimeout(() => {
+            let isMobile = false;
+            if (this.options.mobileBreakpoint && (this.options.mobileBreakpoint > this.gridWrapper.nativeElement.clientWidth)) {
+                isMobile = true;
+            }
+            let areaScrollHeight = 0;
+            let areaHeight = 0;
+            this.showEmptyDashboard = this.userWidgets.length > 0 ? false : true;
+            this.widgetList.forEach((t) => {
+                let currentHeight = t.y + t.rows;
+                if (currentHeight > areaScrollHeight) {
+                    areaScrollHeight = currentHeight;
+                }
+                t['widgetInfo'].rowHeight = this.gridcellHeight;
+            });
+            if (this.gridcellHeight > 0) {
+                areaHeight = areaScrollHeight * this.gridcellHeight + 100;
+            }
+            let areaScrollHeightMob = 0;
+            if (isMobile) {
+                areaScrollHeightMob = this.widgetList.length * 300 + 200;
+                areaHeight = areaScrollHeightMob;
+            }
+            if (areaHeight < 600) {
+                areaHeight = 600;
+            }
+            this.gridheight = areaHeight;
+        });
+    }
+    /** To remove a widget instance from dashboard and to save info in database */
+    deleteWidget(widgetInstanceId, isalertDisabled = false) {
+        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) {
+                this.notifier.notify('success', " " + this.translateService.translate('Common.Widgettext') + " " + gridsterItem[0]['widgetInfo'].widgetTitle + " " + this.translateService.translate('Common.deletedSuccesfully') + " ");
+            }
+        }
+        this.showEmptyDashboard = this.userWidgets.length > 0 ? false : true;
+        if (this.showEmptyDashboard == true) {
+            this.raDashboardEventBus.publish(RAEvent.HideDashboardBanner, this.showEmptyDashboard);
+        }
+    }
+    /**To rearrange widgets position in the dashboard, compactLeft&Up,compactLeft,compactUp,etc*/
+    rearrangeWidgets() {
+        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);
+        if (this.widgetList.length > 0)
+            this.updateWidgetPosition(this.widgetList[0]['widgetInfo'].widgetInstanceId);
+        setTimeout(() => {
+            this.setAreaHeight();
+        });
+    }
+    /**To add widget instance to the database with the next available position and to make changes in
+     * dashboard area.
+     */
+    addWidget(data) {
+        data.height = this.widgetHeight;
+        data.width = this.widgetWidth;
+        this.raDashboardEventBus.publish(RAEvent.HideDashboardBanner, false);
+        if (data.widgetSettings) {
+            if (typeof data.widgetSettings === 'string')
+                data.widgetSettings = JSON.parse(data.widgetSettings);
+            if (data.widgetSettings.defaultCols) {
+                data.width = data.widgetSettings.defaultCols;
+            }
+            if (data.widgetSettings.defaultRows) {
+                data.height = data.widgetSettings.defaultRows;
+            }
+            data.widgetSettings = null;
+        }
+        data = this.setPositions(data);
+        /** to find the available position in gridster, temp commenting the code-returning higher y value than normal */
+        data.dashboardAreaKey = this.areaKey;
+        data.dashboardId = this.userDashboardId;
+        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();
+            widget.rowHeight = this.gridcellHeight;
+            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();
+            }
+            this.raDashboardEventBus.publish(RAEvent.WidgetAdded, widget);
+        });
+    }
+    setPositions(data) {
+        data.position_x = 0;
+        data.position_y = 0;
+        if (!this.responsiveService.IsDesktopView) {
+            if (this.userWidgets.length > 0) {
+                let widget = this.userWidgets[this.userWidgets.length - 1];
+                if (widget.position_x + widget.width > (this.responsiveService.maxColsDesktop / 2)) {
+                    data.position_y = widget.position_y + 1;
+                }
+                else {
+                    data.position_y = widget.position_y;
+                    data.position_x = this.responsiveService.maxColsDesktop - (widget.position_x + widget.width);
+                }
+            }
+        }
+        return data;
+    }
+    /** To add widget to current widget list ,invoked from copy widget window*/
+    copyWidget(data) {
+        data = this.setPositions(data);
+        if (!this.responsiveService.IsDesktopView) {
+            this.dashboardService.updateWidgets(this.formatWidgetDataForPositionDetails([data]), this.appConfig).subscribe(widgets => {
+            });
+        }
+        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();
+        }
+    }
+    mapObjectListToGridsterItemList(widgetList) {
+        let widgetArray = Array();
+        widgetList.forEach(widget => {
+            widgetArray.push(this.responsiveService.getGridsterItem(widget));
+        });
+        return widgetArray;
+    }
+    mapGridsterItemToObject(widgetItem) {
+        let widget;
+        widget = widgetItem['widgetInfo'];
+        widget.height = widgetItem.rows;
+        widget.width = widgetItem.cols;
+        widget.position_x = widgetItem.x;
+        widget.position_y = widgetItem.y;
+        //widget.rowHeight = <any>widgetItem.curRowHeight;
+        return widget;
+    }
+    mapGridsterListToObject(widgetItemList) {
+        let widgetListArray = Array();
+        widgetItemList.forEach(widget => {
+            widgetListArray.push(this.mapGridsterItemToObject(widget));
+        });
+        return widgetListArray;
+    }
+    addNewWidget() {
+        this.raDashboardEventBus.publish(RAEvent.AddNewWidgetToDashboard, null);
+    }
+    updateAppliedFilters(data) {
+        this.raDashboardEventBus.publish(RAEvent.UpdateAppledFiterForInapplicableFilter, data);
+    }
+    checkPAMWidgets() {
+        if (this.PAMWidgets.length > 0) {
+            this.raDashboardEventBus.publish(RAEvent.ShowInapplicableFilterMessage, true);
+        }
+        else {
+            this.raDashboardEventBus.publish(RAEvent.ShowInapplicableFilterMessage, false);
+        }
+    }
+}
+RADashboardArea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", 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 });
+RADashboardArea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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:black;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;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"], components: [{ type: i6.GridsterComponent, selector: "gridster", inputs: ["options"] }, { type: i6.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { 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"] }, { type: i4.NotifierContainerComponent, selector: "notifier-container" }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i3.RATranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", 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:black;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;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"] }]
+        }], ctorParameters: function () { return [{ 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']
+            }], areaKey: [{
+                type: Input,
+                args: ['area-key']
+            }], globalFilter: [{
+                type: Input,
+                args: ['global-filter']
+            }], raDashboardEventBus: [{
+                type: Input,
+                args: ['event-bus']
+            }], widgetHeight: [{
+                type: Input,
+                args: ['widget-height']
+            }], widgetWidth: [{
+                type: Input,
+                args: ['widget-width']
+            }], appConfig: [{
+                type: Input,
+                args: ['app-config']
+            }], hideDashboardBanner: [{
+                type: Output
+            }], gridWrapper: [{
+                type: ViewChild,
+                args: ['gridWrapper', { static: false }]
+            }] } });
+
+const customNotifierOptions = {
+    position: {
+        horizontal: {
+            position: 'right',
+            distance: 12
+        },
+        vertical: {
+            position: 'top',
+            distance: 12,
+            gap: 10
+        }
+    },
+    theme: 'material',
+    behaviour: {
+        autoHide: 5000,
+        onClick: 'hide',
+        onMouseover: 'pauseAutoHide',
+        showDismissButton: true,
+        stacking: 4
+    },
+    animations: {
+        enabled: true,
+        show: {
+            preset: 'slide',
+            speed: 300,
+            easing: 'ease'
+        },
+        hide: {
+            preset: 'fade',
+            speed: 300,
+            easing: 'ease',
+            offset: 50
+        },
+        shift: {
+            speed: 300,
+            easing: 'ease'
+        },
+        overlap: 150
+    }
+};
+
+class DashboardFrameworkModule {
+}
+DashboardFrameworkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashboardFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DashboardFrameworkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashboardFrameworkModule, bootstrap: [RADashboardArea], declarations: [RADashboardArea,
+        RAWidgetContainer,
+        LockTooltip], imports: [BrowserModule,
+        GridsterModule,
+        HttpClientModule,
+        NgxUiLoaderModule, i4.NotifierModule, RACommonModule,
+        RAUserControlModule,
+        RACommonControlsModule], exports: [RADashboardArea] });
+DashboardFrameworkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashboardFrameworkModule, imports: [[
+            BrowserModule,
+            GridsterModule,
+            HttpClientModule,
+            NgxUiLoaderModule,
+            NotifierModule.withConfig(customNotifierOptions),
+            RACommonModule,
+            RAUserControlModule,
+            RACommonControlsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DashboardFrameworkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        RADashboardArea,
+                        RAWidgetContainer,
+                        LockTooltip
+                    ],
+                    imports: [
+                        BrowserModule,
+                        GridsterModule,
+                        HttpClientModule,
+                        NgxUiLoaderModule,
+                        NotifierModule.withConfig(customNotifierOptions),
+                        RACommonModule,
+                        RAUserControlModule,
+                        RACommonControlsModule
+                    ],
+                    exports: [
+                        RADashboardArea
+                    ],
+                    bootstrap: [RADashboardArea],
+                    entryComponents: [
+                        LockTooltip
+                    ]
+                }]
+        }] });
+
+class RADashboardEventBus {
+    constructor() {
+        this.eventQueue = new Subject();
+    }
+    /**
+     * To emit an event with the name & data
+     */
+    publish(eventName, data) {
+        this.eventQueue.next({ eventName, data });
+    }
+    /**
+    * To emit an event with the name, data, key & value
+    */
+    publishWithKey(eventName, data, key, value) {
+        this.eventQueue.next({ eventName, data, key, value });
+    }
+    /**
+    * To subscribe to an event with the name
+    */
+    subscribe(eventName) {
+        return this.eventQueue.asObservable().pipe(filter((event) => {
+            return event.eventName == eventName;
+        }), map(event => event.data));
+    }
+    /**
+    * To subscribe to an event with the name key & value
+    */
+    subscribeWithKey(eventName, key, value) {
+        return this.eventQueue.asObservable().pipe(filter((event) => {
+            return event.eventName == eventName && event.key == key && event.value == value;
+        }), map(event => event.data));
+    }
+}
+RADashboardEventBus.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RADashboardEventBus, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RADashboardEventBus.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RADashboardEventBus, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RADashboardEventBus, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class RaBaseDashboardTemplate {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.initialize = (eventBus, userDashboardId, appConfig) => {
+            this.ngZone.run(() => {
+                this.userDashboardId = userDashboardId;
+                this.appConfig = appConfig;
+                this.raDashboardEventBus = eventBus;
+            });
+            this.init();
+        };
+    }
+    ngOnInit() {
+        var myEvent = new CustomEvent("event-template-initiated");
+        document.body.dispatchEvent(myEvent);
+    }
+}
+RaBaseDashboardTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RaBaseDashboardTemplate, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+RaBaseDashboardTemplate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RaBaseDashboardTemplate, selector: "ng-component", inputs: { dashboardId: ["dashboard-id", "dashboardId"], globalFilter: ["global-filter", "globalFilter"], initialize: "initialize" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RaBaseDashboardTemplate, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { dashboardId: [{
+                type: Input,
+                args: ['dashboard-id']
+            }], globalFilter: [{
+                type: Input,
+                args: ['global-filter']
+            }], initialize: [{
+                type: Input
+            }] } });
+
+class RaBaseDashboardFilter {
+    constructor() {
+        this.getAllFilterConfig = (async) => {
+            return this.getFilterConfig();
+        };
+        this.setInapplicableFilterMsg = (status) => {
+            this.showHideInapplicableMsg(status);
+        };
+        this.isValidEntry = () => {
+            return this.isValid();
+        };
+        this.clearAllData = () => {
+            this.clearData();
+        };
+        this.setAllFilterConfig = (globalFilter, appConfig) => {
+            this.setFilterConfig(globalFilter, appConfig);
+        };
+    }
+    ngOnInit() {
+        var myEvent = new CustomEvent("global-filter-initiated");
+        document.body.dispatchEvent(myEvent);
+    }
+}
+RaBaseDashboardFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RaBaseDashboardFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RaBaseDashboardFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RaBaseDashboardFilter, selector: "ng-component", inputs: { getAllFilterConfig: "getAllFilterConfig", setInapplicableFilterMsg: "setInapplicableFilterMsg", isValidEntry: "isValidEntry", clearAllData: "clearAllData", setAllFilterConfig: "setAllFilterConfig" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RaBaseDashboardFilter, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], propDecorators: { getAllFilterConfig: [{
+                type: Input
+            }], setInapplicableFilterMsg: [{
+                type: Input
+            }], isValidEntry: [{
+                type: Input
+            }], clearAllData: [{
+                type: Input
+            }], setAllFilterConfig: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ra-dashboard-framework
+ */
+// export * from './gridster/lib/gridster.component';
+// export * from './gridster/lib/gridsterPreview.component';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DashboardFrameworkModule, RADashboardArea, RADashboardEventBus, RADashboardResponsiveService, RAEvent, RAEventKey, RAWidgetContainer, RaBaseDashboardFilter, RaBaseDashboardTemplate, RaDashboardService };
+//# sourceMappingURL=schneideress-dashboardframework.mjs.map