@schneideress/dashboardframework 0.0.279 → 13.0.0

package/fesm2015/schneideress-dashboardframework.js

@@ -1,4749 +0,0 @@
-import { __decorate, __metadata, __awaiter, __param } from 'tslib';
-import { Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Injectable, EventEmitter, NgZone, Input, Output, ViewChild, ElementRef, Component, Renderer2, ChangeDetectorRef, ViewEncapsulation, Host, NgModule } from '@angular/core';
-import { of, Subject } from 'rxjs';
-import { BaseService, RATranslateService, RAPermissionService, DomService, RACommonModule } from '@schneideress/ra-common';
-import { filter, map } from 'rxjs/operators';
-import { NgxUiLoaderService, NgxUiLoaderModule } from 'ngx-ui-loader';
-import { NotifierService, NotifierModule } from 'angular-notifier';
-import { RaWidgetlockStatus, WidgetViewState, RADownloadType, RADownloadOption } from '@schneideress/widgetframework';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
-import { CommonModule } from '@angular/common';
-import { RAUserControlModule } from '@schneideress/user-controls';
-import { RACommonControlsModule } from '@schneideress/common-controls';
-
-let RaDashboardService = class RaDashboardService extends BaseService {
-    constructor(injector) {
-        super(injector, '');
-        this.loadedScripts = [];
-        this.clientId = undefined;
-    }
-    /*
-      * 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.ctorParameters = () => [
-    { type: Injector }
-];
-RaDashboardService.ngInjectableDef = ɵɵdefineInjectable({ factory: function RaDashboardService_Factory() { return new RaDashboardService(ɵɵinject(INJECTOR)); }, token: RaDashboardService, providedIn: "root" });
-RaDashboardService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    }),
-    __metadata("design:paramtypes", [Injector])
-], RaDashboardService);
-
-let RADashboardEventBus = 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.ngInjectableDef = ɵɵdefineInjectable({ factory: function RADashboardEventBus_Factory() { return new RADashboardEventBus(); }, token: RADashboardEventBus, providedIn: "root" });
-RADashboardEventBus = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], RADashboardEventBus);
-
-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
-};
-
-let RADashboardResponsiveService = 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();
-            }
-        }
-    }
-    get IsDesktopView() {
-        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.substring(0, 4)))
-            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.substring(0, 4)))
-            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) {
-            config.resizable.enabled = false;
-            config.swap = false;
-            config.draggable.enabled = false;
-        }
-        else {
-            config.resizable.enabled = true;
-            config.swap = true;
-            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.ngInjectableDef = ɵɵdefineInjectable({ factory: function RADashboardResponsiveService_Factory() { return new RADashboardResponsiveService(); }, token: RADashboardResponsiveService, providedIn: "root" });
-RADashboardResponsiveService = __decorate([
-    Injectable({ providedIn: "root" }),
-    __metadata("design:paramtypes", [])
-], RADashboardResponsiveService);
-
-let RADashboardArea = 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.isIndicatorDashboard = false;
-        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();
-                    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.gridcellHeight = this.options.api.getCurrentRowHeight();
-                    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 (this.options.api) {
-                this.gridcellHeight = this.options.api.getCurrentRowHeight();
-            }
-        };
-        this.options.itemChangeCallback = (item) => {
-            if (this.responsiveService.IsDesktopView) {
-                if (item.widgetInfo && item.widgetInfo.widgetInstanceId) {
-                    this.updateWidgetPosition(item.widgetInfo.widgetInstanceId);
-                }
-            }
-            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,
-            isIndicatorDashboard: this.isIndicatorDashboard
-        };
-        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.dashboardService.clientId = widgets[0].clientId;
-                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.gridWrapper.nativeElement.clientWidth) {
-                isMobile = true;
-            }
-            let areaScrollHeight = 0;
-            let areaHeight = 0;
-            let curRowHeight = 0;
-            if (this.options.api) {
-                curRowHeight = this.options.api.getCurrentRowHeight();
-            }
-            this.showEmptyDashboard = this.userWidgets.length > 0 ? false : true;
-            this.widgetList.forEach((t) => {
-                let currentHeight = t.y + t.rows;
-                if (currentHeight > areaScrollHeight) {
-                    areaScrollHeight = currentHeight;
-                }
-                if (curRowHeight == 0) {
-                    currentHeight = this.widgetList[0].curRowHeight;
-                }
-                t.widgetInfo.rowHeight = curRowHeight;
-            });
-            this.gridcellHeight = curRowHeight;
-            if (this.options.api) {
-                areaHeight = areaScrollHeight * this.options.api.getCurrentRowHeight() + 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();
-            if (this.options.api) {
-                let curRowHeight = Number(this.options.api.getCurrentRowHeight());
-                if (curRowHeight > 0) {
-                    widget.rowHeight = curRowHeight;
-                    this.gridcellHeight = curRowHeight;
-                }
-            }
-            var widgetInstanceId = 0;
-            if (widget && widget.widgetInstanceId) {
-                widgetInstanceId = widget.widgetInstanceId;
-                /**To save added widget position in db */
-                if (this.responsiveService.IsDesktopView) {
-                    setTimeout(() => {
-                        this.updateWidgetPosition(widgetInstanceId);
-                    });
-                }
-            }
-            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 = 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.ctorParameters = () => [
-    { type: RaDashboardService },
-    { type: NgZone },
-    { type: NgxUiLoaderService },
-    { type: RATranslateService },
-    { type: NotifierService },
-    { type: RADashboardResponsiveService },
-    { type: RAPermissionService }
-];
-__decorate([
-    Input('user-dashboard-id'),
-    __metadata("design:type", Number)
-], RADashboardArea.prototype, "userDashboardId", void 0);
-__decorate([
-    Input('area-key'),
-    __metadata("design:type", String)
-], RADashboardArea.prototype, "areaKey", void 0);
-__decorate([
-    Input('global-filter'),
-    __metadata("design:type", Object)
-], RADashboardArea.prototype, "globalFilter", void 0);
-__decorate([
-    Input('event-bus'),
-    __metadata("design:type", RADashboardEventBus)
-], RADashboardArea.prototype, "raDashboardEventBus", void 0);
-__decorate([
-    Input('widget-height'),
-    __metadata("design:type", Number)
-], RADashboardArea.prototype, "widgetHeight", void 0);
-__decorate([
-    Input('widget-width'),
-    __metadata("design:type", Number)
-], RADashboardArea.prototype, "widgetWidth", void 0);
-__decorate([
-    Input('app-config'),
-    __metadata("design:type", Object)
-], RADashboardArea.prototype, "appConfig", void 0);
-__decorate([
-    Input('isIndicatorDashboard'),
-    __metadata("design:type", Boolean)
-], RADashboardArea.prototype, "isIndicatorDashboard", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], RADashboardArea.prototype, "hideDashboardBanner", void 0);
-__decorate([
-    ViewChild('gridWrapper', { static: false }),
-    __metadata("design:type", ElementRef)
-], RADashboardArea.prototype, "gridWrapper", void 0);
-RADashboardArea = __decorate([
-    Component({
-        selector: 'ra-dashboard-area',
-        template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\" [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n  <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\"\r\n        (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\" [global-filter]=\"globalFilter\"\r\n        [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\" [widget-width]=\"item.cols\"\r\n        [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"\r\n        (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n      </ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n\r\n  <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n    <div class=\"empty-wrapper\">\r\n      <div></div>\r\n      <div class=\"m-1 empty-prefix\">\r\n        <i class=\"fal fa-edit edit-icon\"></i>\r\n        <span class=\"empty-title\">{{'dashboard.emptydashboard'|translate}}</span>\r\n      </div>\r\n      <div class=\"empty-content light\">\r\n        <div>\r\n          <div class=\"col-sm-12 empty-msg\">\r\n            {{'dashboard.emptydashboardmessage'|translate}} <br />\r\n            {{'dashboard.emptydashboardmessage2'|translate}}\r\n          </div>\r\n          <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm m-1 dashboard-button light\" (click)=\"addNewWidget()\">\r\n            <i class=\"fal fa-plus m-1\"></i>{{'dashboard.addawidgets'|translate}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <notifier-container></notifier-container>\r\n</div>",
-        styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#ededed;overflow-y:hidden!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;user-select:text;box-shadow:0 1px 10px rgba(0,0,0,.05)}gridster-item:hover{box-shadow:0 1px 10px rgba(0,0,0,.15)}@media screen and (max-width:685px){.gridster-mobile{height:auto!important;margin-bottom:50px!important}}@media screen and (max-width:350px){.gridster-mobile{min-height:330px!important;margin-bottom:0!important}}.empty-padding{padding:40px 20px 20px;background-color:#ededed;display:flex;justify-content:center;align-content:center}.empty-wrapper{display:flex;background-color:#fff;border-radius:8px;min-height:125px;width:72%}.empty-prefix{color:#32ad3c;font-size:18px;display:flex;align-items:center;padding:10px 30px;min-width:max-content;min-width:-moz-max-content}.empty-content{color:#333;border-left:1px solid #a9afb1;width:100%;display:flex;align-items:center;padding:15px 30px 10px 40px}.empty-msg{padding:0 0 5px;font-size:16px}.dashboard-button{padding:5px 10px 5px 5px!important}.btnLib{background-color:#ededed;color:#333!important}.btn-group-sm>.btn,.btn-sm{padding:5px 20px 5px 5px}.edit-icon{color:#32ad3c;font-size:24px;margin-right:15px}.empty-title{margin-top:10px}@media screen and (max-width:600px){.empty-padding{padding:10px;background-color:#ededed;width:100%;display:block}.empty-wrapper{display:flex;background-color:#fff;border-radius:8px;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:16px;display:flex;height:40px;padding:6px 10px 8px}.empty-content{color:#333;display:flex;padding:5px 10px 10px;margin-top:44px;margin-left:-185px;border-left:none}.empty-msg{padding:12px 10px 10px 5px;font-size:14px;border-top:1px solid #a9afb1}.edit-icon{color:#32ad3c;font-size:20px;margin-right:6px}.empty-title{margin-top:6px}}"]
-    }),
-    __metadata("design:paramtypes", [RaDashboardService,
-        NgZone,
-        NgxUiLoaderService,
-        RATranslateService,
-        NotifierService,
-        RADashboardResponsiveService,
-        RAPermissionService])
-], RADashboardArea);
-
-let LockTooltip = 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.ctorParameters = () => [
-    { type: DomService }
-];
-LockTooltip = __decorate([
-    Component({
-        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 rgba(0,0,0,.2);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}"]
-    }),
-    __metadata("design:paramtypes", [DomService])
-], LockTooltip);
-
-let RAWidgetContainer = 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.getwidgetTitleTranslation(this.data.widgetInfo.widgetTitle);
-        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;
-        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 = function (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();
-                        }));
-                    }.bind(this);
-                    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(() => {
-            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');
-            }
-            document.getElementById('ra-db-widget-menu').addEventListener('mouseenter', () => {
-                window.mouseOverWidgetMenu = true;
-            });
-            document.getElementById('ra-db-widget-menu').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);
-    }
-    getwidgetTitleTranslation(item) {
-        let rKey = 'DBW_' + this.translateService.makeCode(item);
-        let translatedString = '';
-        if (this.dashboardService.clientId) {
-            const translationModule = this.dashboardService.clientId + '_DBW';
-            translatedString = this.translateService.translate(translationModule + '.' + rKey);
-            if (translatedString.toLowerCase() === rKey.toLowerCase()) {
-                return item;
-            }
-            else {
-                return translatedString;
-            }
-        }
-        else
-            return item;
-    }
-};
-RAWidgetContainer.ctorParameters = () => [
-    { type: RaDashboardService },
-    { type: NgxUiLoaderService },
-    { type: RATranslateService },
-    { type: NgZone },
-    { type: NotifierService },
-    { type: Renderer2 },
-    { type: RAPermissionService },
-    { type: DomService }
-];
-__decorate([
-    ViewChild('ctlWidget', { static: false }),
-    __metadata("design:type", ElementRef)
-], RAWidgetContainer.prototype, "ctlWidget", void 0);
-__decorate([
-    ViewChild('widgetDropdown', { static: false }),
-    __metadata("design:type", ElementRef)
-], RAWidgetContainer.prototype, "widgetDropdown", void 0);
-__decorate([
-    ViewChild('searchInput', { static: false }),
-    __metadata("design:type", ElementRef)
-], RAWidgetContainer.prototype, "searchInput", void 0);
-__decorate([
-    ViewChild('wcWrapper', { static: false }),
-    __metadata("design:type", ElementRef)
-], RAWidgetContainer.prototype, "wcWrapper", void 0);
-__decorate([
-    ViewChild('banPopupDiv', { static: false }),
-    __metadata("design:type", ElementRef)
-], RAWidgetContainer.prototype, "banPopupDiv", void 0);
-__decorate([
-    ViewChild('lockPopupDiv', { static: false }),
-    __metadata("design:type", ElementRef)
-], RAWidgetContainer.prototype, "lockPopupDiv", void 0);
-__decorate([
-    Input('widget-instance-id'),
-    __metadata("design:type", Number)
-], RAWidgetContainer.prototype, "widgetInstanceId", void 0);
-__decorate([
-    Input('global-filter'),
-    __metadata("design:type", Object)
-], RAWidgetContainer.prototype, "globalFilter", void 0);
-__decorate([
-    Input('data'),
-    __metadata("design:type", Object)
-], RAWidgetContainer.prototype, "data", void 0);
-__decorate([
-    Input('event-bus'),
-    __metadata("design:type", RADashboardEventBus)
-], RAWidgetContainer.prototype, "raDashboardEventBus", void 0);
-__decorate([
-    Input('app-config'),
-    __metadata("design:type", Object)
-], RAWidgetContainer.prototype, "appConfig", void 0);
-__decorate([
-    Input('widget-width'),
-    __metadata("design:type", Number)
-], RAWidgetContainer.prototype, "width", void 0);
-__decorate([
-    Input('widget-height'),
-    __metadata("design:type", Number)
-], RAWidgetContainer.prototype, "height", void 0);
-__decorate([
-    Input('grid-cell-height'),
-    __metadata("design:type", Number)
-], RAWidgetContainer.prototype, "gridCellHeight", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], RAWidgetContainer.prototype, "widgetDeleted", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], RAWidgetContainer.prototype, "updateAppliedFilters", void 0);
-__decorate([
-    Input('dom-resized'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], RAWidgetContainer.prototype, "setResized", null);
-RAWidgetContainer = __decorate([
-    Component({
-        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>"
-    }),
-    __metadata("design:paramtypes", [RaDashboardService,
-        NgxUiLoaderService,
-        RATranslateService,
-        NgZone,
-        NotifierService,
-        Renderer2,
-        RAPermissionService,
-        DomService])
-], RAWidgetContainer);
-
-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
-    }
-};
-
-var GridType;
-(function (GridType) {
-    GridType["Fit"] = "fit";
-    GridType["ScrollVertical"] = "scrollVertical";
-    GridType["ScrollHorizontal"] = "scrollHorizontal";
-    GridType["Fixed"] = "fixed";
-    GridType["VerticalFixed"] = "verticalFixed";
-    GridType["HorizontalFixed"] = "horizontalFixed";
-})(GridType || (GridType = {}));
-var DisplayGrid;
-(function (DisplayGrid) {
-    DisplayGrid["Always"] = "always";
-    DisplayGrid["OnDragAndResize"] = "onDrag&Resize";
-    DisplayGrid["None"] = "none";
-})(DisplayGrid || (DisplayGrid = {}));
-var CompactType;
-(function (CompactType) {
-    CompactType["None"] = "none";
-    CompactType["CompactUp"] = "compactUp";
-    CompactType["CompactLeft"] = "compactLeft";
-    CompactType["CompactUpAndLeft"] = "compactUp&Left";
-    CompactType["CompactLeftAndUp"] = "compactLeft&Up";
-    CompactType["CompactRight"] = "compactRight";
-    CompactType["CompactUpAndRight"] = "compactUp&Right";
-    CompactType["CompactRightAndUp"] = "compactRight&Up";
-})(CompactType || (CompactType = {}));
-
-const GridsterConfigService = {
-    gridType: GridType.Fit,
-    // 'scrollVertical' will fit on width and height of the items will be the same as the width
-    // 'scrollHorizontal' will fit on height and width of the items will be the same as the height
-    // 'fixed' will set the rows and columns dimensions based on fixedColWidth and fixedRowHeight options
-    // 'verticalFixed' will set the rows to fixedRowHeight and columns width will fit the space available
-    // 'horizontalFixed' will set the columns to fixedColWidth and rows height will fit the space available
-    fixedColWidth: 250,
-    fixedRowHeight: 250,
-    keepFixedHeightInMobile: false,
-    keepFixedWidthInMobile: false,
-    setGridSize: false,
-    compactType: CompactType.None,
-    mobileBreakpoint: 640,
-    minCols: 1,
-    maxCols: 100,
-    minRows: 1,
-    maxRows: 100,
-    defaultItemCols: 1,
-    defaultItemRows: 1,
-    maxItemCols: 50,
-    maxItemRows: 50,
-    minItemCols: 1,
-    minItemRows: 1,
-    minItemArea: 1,
-    maxItemArea: 2500,
-    margin: 10,
-    outerMargin: true,
-    outerMarginTop: null,
-    outerMarginRight: null,
-    outerMarginBottom: null,
-    outerMarginLeft: null,
-    useTransformPositioning: true,
-    scrollSensitivity: 10,
-    scrollSpeed: 20,
-    initCallback: undefined,
-    destroyCallback: undefined,
-    gridSizeChangedCallback: undefined,
-    itemChangeCallback: undefined,
-    // Arguments: gridsterItem, gridsterItemComponent
-    itemResizeCallback: undefined,
-    // Arguments: gridsterItem, gridsterItemComponent
-    itemInitCallback: undefined,
-    // Arguments: gridsterItem, gridsterItemComponent
-    itemRemovedCallback: undefined,
-    // Arguments: gridsterItem, gridsterItemComponent
-    itemValidateCallback: undefined,
-    // Arguments: gridsterItem
-    enableEmptyCellClick: false,
-    enableEmptyCellContextMenu: false,
-    enableEmptyCellDrop: false,
-    enableEmptyCellDrag: false,
-    emptyCellClickCallback: undefined,
-    emptyCellContextMenuCallback: undefined,
-    emptyCellDropCallback: undefined,
-    emptyCellDragCallback: undefined,
-    emptyCellDragMaxCols: 50,
-    emptyCellDragMaxRows: 50,
-    // Arguments: event, gridsterItem{x, y, rows: defaultItemRows, cols: defaultItemCols}
-    ignoreMarginInRow: false,
-    draggable: {
-        delayStart: 0,
-        enabled: false,
-        ignoreContentClass: 'gridster-item-content',
-        ignoreContent: false,
-        dragHandleClass: 'drag-handler',
-        stop: undefined,
-        start: undefined,
-        // Arguments: item, gridsterItem, event
-        dropOverItems: false,
-        dropOverItemsCallback: undefined // callback on drop over another item
-        // Arguments: source, target, gridComponent
-    },
-    resizable: {
-        delayStart: 0,
-        enabled: false,
-        handles: {
-            s: true,
-            e: true,
-            n: true,
-            w: true,
-            se: true,
-            ne: true,
-            sw: true,
-            nw: true
-        },
-        stop: undefined,
-        start: undefined // callback when resizing an item starts.
-        // Arguments: item, gridsterItem, event
-    },
-    swap: true,
-    pushItems: false,
-    disablePushOnDrag: false,
-    disablePushOnResize: false,
-    pushDirections: { north: true, east: true, south: true, west: true },
-    pushResizeItems: false,
-    displayGrid: DisplayGrid.OnDragAndResize,
-    disableWindowResize: false,
-    disableWarnings: false,
-    scrollToNewItems: false,
-    disableAutoPositionOnConflict: false,
-};
-
-var GridsterUtils_1;
-let GridsterUtils = GridsterUtils_1 = class GridsterUtils {
-    static merge(obj1, obj2, properties) {
-        for (const p in obj2) {
-            if (obj2[p] !== void 0 && properties.hasOwnProperty(p)) {
-                if (typeof obj2[p] === 'object') {
-                    obj1[p] = GridsterUtils_1.merge(obj1[p], obj2[p], properties[p]);
-                }
-                else {
-                    obj1[p] = obj2[p];
-                }
-            }
-        }
-        return obj1;
-    }
-    static debounce(func, wait) {
-        let timeout;
-        return function () {
-            const context = this, args = arguments;
-            const later = function () {
-                timeout = null;
-                func.apply(context, args);
-            };
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-        };
-    }
-    static checkTouchEvent(e) {
-        if (e.clientX === undefined && e.touches) {
-            if (e.touches && e.touches.length) {
-                e.clientX = e.touches[0].clientX;
-                e.clientY = e.touches[0].clientY;
-            }
-            else if (e.changedTouches && e.changedTouches.length) {
-                e.clientX = e.changedTouches[0].clientX;
-                e.clientY = e.changedTouches[0].clientY;
-            }
-        }
-    }
-    static checkContentClassForEvent(gridster, e) {
-        if (gridster.$options.draggable.ignoreContent) {
-            if (!GridsterUtils_1.checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.dragHandleClass)) {
-                return true;
-            }
-        }
-        else {
-            if (GridsterUtils_1.checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.ignoreContentClass)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    static checkContentClassForEmptyCellClickEvent(gridster, e) {
-        return GridsterUtils_1.checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.ignoreContentClass)
-            || GridsterUtils_1.checkContentClass(e.target, e.currentTarget, gridster.$options.draggable.dragHandleClass);
-    }
-    static checkContentClass(target, current, contentClass) {
-        if (!target || target === current) {
-            return false;
-        }
-        if (target.hasAttribute('class') && target.getAttribute('class').split(' ').indexOf(contentClass) > -1) {
-            return true;
-        }
-        else {
-            return GridsterUtils_1.checkContentClass(target.parentNode, current, contentClass);
-        }
-    }
-    static compareItems(a, b) {
-        if (a.y > b.y) {
-            return -1;
-        }
-        else if (a.y < b.y) {
-            return 1;
-        }
-        else if (a.x > b.x) {
-            return -1;
-        }
-        else {
-            return 1;
-        }
-    }
-};
-GridsterUtils = GridsterUtils_1 = __decorate([
-    Injectable()
-], GridsterUtils);
-
-class GridsterComponentInterface {
-}
-
-let GridsterEmptyCell = class GridsterEmptyCell {
-    constructor(gridster) {
-        this.gridster = gridster;
-    }
-    destroy() {
-        delete this.initialItem;
-        delete this.gridster.movingItem;
-        if (this.gridster.previewStyle) {
-            this.gridster.previewStyle();
-        }
-        delete this.gridster;
-        if (this.emptyCellExit) {
-            this.emptyCellExit();
-            this.emptyCellExit = null;
-        }
-    }
-    updateOptions() {
-        if (this.gridster.$options.enableEmptyCellClick && !this.emptyCellClick && this.gridster.options.emptyCellClickCallback) {
-            this.emptyCellClick = this.gridster.renderer.listen(this.gridster.el, 'click', this.emptyCellClickCb.bind(this));
-            this.emptyCellClickTouch = this.gridster.renderer.listen(this.gridster.el, 'touchend', this.emptyCellClickCb.bind(this));
-        }
-        else if (!this.gridster.$options.enableEmptyCellClick && this.emptyCellClick && this.emptyCellClickTouch) {
-            this.emptyCellClick();
-            this.emptyCellClickTouch();
-            this.emptyCellClick = null;
-            this.emptyCellClickTouch = null;
-        }
-        if (this.gridster.$options.enableEmptyCellContextMenu && !this.emptyCellContextMenu &&
-            this.gridster.options.emptyCellContextMenuCallback) {
-            this.emptyCellContextMenu = this.gridster.renderer.listen(this.gridster.el, 'contextmenu', this.emptyCellContextMenuCb.bind(this));
-        }
-        else if (!this.gridster.$options.enableEmptyCellContextMenu && this.emptyCellContextMenu) {
-            this.emptyCellContextMenu();
-            this.emptyCellContextMenu = null;
-        }
-        if (this.gridster.$options.enableEmptyCellDrop && !this.emptyCellDrop && this.gridster.options.emptyCellDropCallback) {
-            this.emptyCellDrop = this.gridster.renderer.listen(this.gridster.el, 'drop', this.emptyCellDragDrop.bind(this));
-            this.gridster.zone.runOutsideAngular(() => {
-                this.emptyCellMove = this.gridster.renderer.listen(this.gridster.el, 'dragover', this.emptyCellDragOver.bind(this));
-            });
-            this.emptyCellExit = this.gridster.renderer.listen('document', 'dragend', () => {
-                this.gridster.movingItem = null;
-                this.gridster.previewStyle();
-            });
-        }
-        else if (!this.gridster.$options.enableEmptyCellDrop && this.emptyCellDrop && this.emptyCellMove && this.emptyCellExit) {
-            this.emptyCellDrop();
-            this.emptyCellMove();
-            this.emptyCellExit();
-            this.emptyCellMove = null;
-            this.emptyCellDrop = null;
-            this.emptyCellExit = null;
-        }
-        if (this.gridster.$options.enableEmptyCellDrag && !this.emptyCellDrag && this.gridster.options.emptyCellDragCallback) {
-            this.emptyCellDrag = this.gridster.renderer.listen(this.gridster.el, 'mousedown', this.emptyCellMouseDown.bind(this));
-            this.emptyCellDragTouch = this.gridster.renderer.listen(this.gridster.el, 'touchstart', this.emptyCellMouseDown.bind(this));
-        }
-        else if (!this.gridster.$options.enableEmptyCellDrag && this.emptyCellDrag && this.emptyCellDragTouch) {
-            this.emptyCellDrag();
-            this.emptyCellDragTouch();
-            this.emptyCellDrag = null;
-            this.emptyCellDragTouch = null;
-        }
-    }
-    emptyCellClickCb(e) {
-        if (this.gridster.movingItem || GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
-            return;
-        }
-        const item = this.getValidItemFromEvent(e);
-        if (!item) {
-            return;
-        }
-        if (this.gridster.options.emptyCellClickCallback) {
-            this.gridster.options.emptyCellClickCallback(e, item);
-        }
-        this.gridster.cdRef.markForCheck();
-    }
-    emptyCellContextMenuCb(e) {
-        if (this.gridster.movingItem || GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const item = this.getValidItemFromEvent(e);
-        if (!item) {
-            return;
-        }
-        if (this.gridster.options.emptyCellContextMenuCallback) {
-            this.gridster.options.emptyCellContextMenuCallback(e, item);
-        }
-        this.gridster.cdRef.markForCheck();
-    }
-    emptyCellDragDrop(e) {
-        const item = this.getValidItemFromEvent(e);
-        if (!item) {
-            return;
-        }
-        if (this.gridster.options.emptyCellDropCallback) {
-            this.gridster.options.emptyCellDropCallback(e, item);
-        }
-        this.gridster.cdRef.markForCheck();
-    }
-    emptyCellDragOver(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        const item = this.getValidItemFromEvent(e);
-        if (item) {
-            e.dataTransfer.dropEffect = 'move';
-            this.gridster.movingItem = item;
-        }
-        else {
-            e.dataTransfer.dropEffect = 'none';
-            this.gridster.movingItem = null;
-        }
-        this.gridster.previewStyle();
-    }
-    emptyCellMouseDown(e) {
-        if (GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const item = this.getValidItemFromEvent(e);
-        const leftMouseButtonCode = 1;
-        if (!item || e.buttons !== leftMouseButtonCode) {
-            return;
-        }
-        this.initialItem = item;
-        this.gridster.movingItem = item;
-        this.gridster.previewStyle();
-        this.gridster.zone.runOutsideAngular(() => {
-            this.emptyCellMMove = this.gridster.renderer.listen('window', 'mousemove', this.emptyCellMouseMove.bind(this));
-            this.emptyCellMMoveTouch = this.gridster.renderer.listen('window', 'touchmove', this.emptyCellMouseMove.bind(this));
-        });
-        this.emptyCellUp = this.gridster.renderer.listen('window', 'mouseup', this.emptyCellMouseUp.bind(this));
-        this.emptyCellUpTouch = this.gridster.renderer.listen('window', 'touchend', this.emptyCellMouseUp.bind(this));
-    }
-    emptyCellMouseMove(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        const item = this.getValidItemFromEvent(e, this.initialItem);
-        if (!item) {
-            return;
-        }
-        this.gridster.movingItem = item;
-        this.gridster.previewStyle();
-    }
-    emptyCellMouseUp(e) {
-        this.emptyCellMMove();
-        this.emptyCellMMoveTouch();
-        this.emptyCellUp();
-        this.emptyCellUpTouch();
-        const item = this.getValidItemFromEvent(e, this.initialItem);
-        if (item) {
-            this.gridster.movingItem = item;
-        }
-        if (this.gridster.options.emptyCellDragCallback && this.gridster.movingItem) {
-            this.gridster.options.emptyCellDragCallback(e, this.gridster.movingItem);
-        }
-        setTimeout(() => {
-            this.initialItem = null;
-            if (this.gridster) {
-                this.gridster.movingItem = null;
-                this.gridster.previewStyle();
-            }
-        });
-        this.gridster.cdRef.markForCheck();
-    }
-    getValidItemFromEvent(e, oldItem) {
-        e.preventDefault();
-        e.stopPropagation();
-        GridsterUtils.checkTouchEvent(e);
-        const rect = this.gridster.el.getBoundingClientRect();
-        const x = e.clientX + this.gridster.el.scrollLeft - rect.left - this.gridster.$options.margin;
-        const y = e.clientY + this.gridster.el.scrollTop - rect.top - this.gridster.$options.margin;
-        const item = {
-            x: this.gridster.pixelsToPositionX(x, Math.floor, true),
-            y: this.gridster.pixelsToPositionY(y, Math.floor, true),
-            cols: this.gridster.$options.defaultItemCols,
-            rows: this.gridster.$options.defaultItemRows
-        };
-        if (oldItem) {
-            item.cols = Math.min(Math.abs(oldItem.x - item.x) + 1, this.gridster.$options.emptyCellDragMaxCols);
-            item.rows = Math.min(Math.abs(oldItem.y - item.y) + 1, this.gridster.$options.emptyCellDragMaxRows);
-            if (oldItem.x < item.x) {
-                item.x = oldItem.x;
-            }
-            else if (oldItem.x - item.x > this.gridster.$options.emptyCellDragMaxCols - 1) {
-                item.x = this.gridster.movingItem ? this.gridster.movingItem.x : 0;
-            }
-            if (oldItem.y < item.y) {
-                item.y = oldItem.y;
-            }
-            else if (oldItem.y - item.y > this.gridster.$options.emptyCellDragMaxRows - 1) {
-                item.y = this.gridster.movingItem ? this.gridster.movingItem.y : 0;
-            }
-        }
-        if (this.gridster.checkCollision(item)) {
-            return;
-        }
-        return item;
-    }
-};
-GridsterEmptyCell.ctorParameters = () => [
-    { type: GridsterComponentInterface }
-];
-GridsterEmptyCell = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [GridsterComponentInterface])
-], GridsterEmptyCell);
-
-let GridsterCompact = class GridsterCompact {
-    constructor(gridster) {
-        this.gridster = gridster;
-    }
-    destroy() {
-        delete this.gridster;
-    }
-    checkCompact() {
-        if (this.gridster.$options.compactType !== CompactType.None) {
-            if (this.gridster.$options.compactType === CompactType.CompactUp) {
-                this.checkCompactUp();
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactLeft) {
-                this.checkCompactLeft();
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactUpAndLeft) {
-                this.checkCompactUp();
-                this.checkCompactLeft();
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactLeftAndUp) {
-                this.checkCompactLeft();
-                this.checkCompactUp();
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactRight) {
-                this.checkCompactRight();
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactUpAndRight) {
-                this.checkCompactUp();
-                this.checkCompactRight();
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactRightAndUp) {
-                this.checkCompactRight();
-                this.checkCompactUp();
-            }
-        }
-    }
-    checkCompactItem(item) {
-        if (this.gridster.$options.compactType !== CompactType.None) {
-            if (this.gridster.$options.compactType === CompactType.CompactUp) {
-                this.moveUpTillCollision(item);
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactLeft) {
-                this.moveLeftTillCollision(item);
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactUpAndLeft) {
-                this.moveUpTillCollision(item);
-                this.moveLeftTillCollision(item);
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactLeftAndUp) {
-                this.moveLeftTillCollision(item);
-                this.moveUpTillCollision(item);
-            }
-            else if (this.gridster.$options.compactType === CompactType.CompactUpAndRight) {
-                this.moveUpTillCollision(item);
-                this.moveRightTillCollision(item);
-            }
-        }
-    }
-    checkCompactUp() {
-        let widgetMovedUp = false, widget, moved;
-        const l = this.gridster.grid.length;
-        for (let i = 0; i < l; i++) {
-            widget = this.gridster.grid[i];
-            if (widget.$item.compactEnabled === false) {
-                continue;
-            }
-            moved = this.moveUpTillCollision(widget.$item);
-            if (moved) {
-                widgetMovedUp = true;
-                widget.item.y = widget.$item.y;
-                widget.itemChanged();
-            }
-        }
-        if (widgetMovedUp) {
-            this.checkCompact();
-        }
-    }
-    moveUpTillCollision(item) {
-        item.y -= 1;
-        if (this.gridster.checkCollision(item)) {
-            item.y += 1;
-            return false;
-        }
-        else {
-            this.moveUpTillCollision(item);
-            return true;
-        }
-    }
-    checkCompactLeft() {
-        let widgetMovedUp = false, widget, moved;
-        const l = this.gridster.grid.length;
-        for (let i = 0; i < l; i++) {
-            widget = this.gridster.grid[i];
-            if (widget.$item.compactEnabled === false) {
-                continue;
-            }
-            moved = this.moveLeftTillCollision(widget.$item);
-            if (moved) {
-                widgetMovedUp = true;
-                widget.item.x = widget.$item.x;
-                widget.itemChanged();
-            }
-        }
-        if (widgetMovedUp) {
-            this.checkCompact();
-        }
-    }
-    checkCompactRight() {
-        let widgetMovedUp = false, widget, moved;
-        const l = this.gridster.grid.length;
-        for (let i = 0; i < l; i++) {
-            widget = this.gridster.grid[i];
-            if (widget.$item.compactEnabled === false) {
-                continue;
-            }
-            moved = this.moveRightTillCollision(widget.$item);
-            if (moved) {
-                widgetMovedUp = true;
-                widget.item.x = widget.$item.x;
-                widget.itemChanged();
-            }
-        }
-        if (widgetMovedUp) {
-            this.checkCompact();
-        }
-    }
-    moveLeftTillCollision(item) {
-        item.x -= 1;
-        if (this.gridster.checkCollision(item)) {
-            item.x += 1;
-            return false;
-        }
-        else {
-            this.moveLeftTillCollision(item);
-            return true;
-        }
-    }
-    moveRightTillCollision(item) {
-        item.x += 1;
-        if (this.gridster.checkCollision(item)) {
-            item.x -= 1;
-            return false;
-        }
-        else {
-            this.moveRightTillCollision(item);
-            return true;
-        }
-    }
-};
-GridsterCompact.ctorParameters = () => [
-    { type: GridsterComponentInterface }
-];
-GridsterCompact = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [GridsterComponentInterface])
-], GridsterCompact);
-
-let GridsterRenderer = class GridsterRenderer {
-    constructor(gridster) {
-        this.gridster = gridster;
-    }
-    destroy() {
-        delete this.gridster;
-    }
-    updateItem(el, item, renderer) {
-        if (this.gridster.mobile) {
-            this.clearCellPosition(renderer, el);
-            if (this.gridster.$options.keepFixedHeightInMobile) {
-                renderer.setStyle(el, 'height', (item.rows * this.gridster.$options.fixedRowHeight) + 'px');
-            }
-            else {
-                renderer.setStyle(el, 'height', (this.gridster.curWidth / 2 * item.rows) + 'px');
-            }
-            if (this.gridster.$options.keepFixedWidthInMobile) {
-                renderer.setStyle(el, 'width', this.gridster.$options.fixedColWidth + 'px');
-            }
-            else {
-                renderer.setStyle(el, 'width', '');
-            }
-            renderer.setStyle(el, 'margin-bottom', this.gridster.$options.margin + 'px');
-            renderer.setStyle(el, 'margin-right', '');
-        }
-        else {
-            const x = Math.round(this.gridster.curColWidth * item.x);
-            const y = Math.round(this.gridster.curRowHeight * item.y);
-            const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin;
-            const height = (this.gridster.curRowHeight * item.rows - this.gridster.$options.margin);
-            // set the cell style
-            this.setCellPosition(renderer, el, x, y);
-            renderer.setStyle(el, 'width', width + 'px');
-            renderer.setStyle(el, 'height', height + 'px');
-            let marginBottom = null;
-            let marginRight = null;
-            if (this.gridster.$options.outerMargin) {
-                if (this.gridster.rows === item.rows + item.y) {
-                    if (this.gridster.$options.outerMarginBottom !== null) {
-                        marginBottom = this.gridster.$options.outerMarginBottom + 'px';
-                    }
-                    else {
-                        marginBottom = this.gridster.$options.margin + 'px';
-                    }
-                }
-                if (this.gridster.columns === item.cols + item.x) {
-                    if (this.gridster.$options.outerMarginBottom !== null) {
-                        marginRight = this.gridster.$options.outerMarginRight + 'px';
-                    }
-                    else {
-                        marginRight = this.gridster.$options.margin + 'px';
-                    }
-                }
-            }
-            renderer.setStyle(el, 'margin-bottom', marginBottom);
-            renderer.setStyle(el, 'margin-right', marginRight);
-        }
-    }
-    updateGridster() {
-        let addClass = '';
-        let removeClass1 = '';
-        let removeClass2 = '';
-        let removeClass3 = '';
-        if (this.gridster.$options.gridType === GridType.Fit) {
-            addClass = GridType.Fit;
-            removeClass1 = GridType.ScrollVertical;
-            removeClass2 = GridType.ScrollHorizontal;
-            removeClass3 = GridType.Fixed;
-        }
-        else if (this.gridster.$options.gridType === GridType.ScrollVertical) {
-            this.gridster.curRowHeight = this.gridster.curColWidth;
-            addClass = GridType.ScrollVertical;
-            removeClass1 = GridType.Fit;
-            removeClass2 = GridType.ScrollHorizontal;
-            removeClass3 = GridType.Fixed;
-        }
-        else if (this.gridster.$options.gridType === GridType.ScrollHorizontal) {
-            this.gridster.curColWidth = this.gridster.curRowHeight;
-            addClass = GridType.ScrollHorizontal;
-            removeClass1 = GridType.Fit;
-            removeClass2 = GridType.ScrollVertical;
-            removeClass3 = GridType.Fixed;
-        }
-        else if (this.gridster.$options.gridType === GridType.Fixed) {
-            this.gridster.curColWidth = this.gridster.$options.fixedColWidth +
-                (this.gridster.$options.ignoreMarginInRow ? 0 : this.gridster.$options.margin);
-            this.gridster.curRowHeight = this.gridster.$options.fixedRowHeight +
-                (this.gridster.$options.ignoreMarginInRow ? 0 : this.gridster.$options.margin);
-            addClass = GridType.Fixed;
-            removeClass1 = GridType.Fit;
-            removeClass2 = GridType.ScrollVertical;
-            removeClass3 = GridType.ScrollHorizontal;
-        }
-        else if (this.gridster.$options.gridType === GridType.VerticalFixed) {
-            this.gridster.curRowHeight = this.gridster.$options.fixedRowHeight +
-                (this.gridster.$options.ignoreMarginInRow ? 0 : this.gridster.$options.margin);
-            addClass = GridType.ScrollVertical;
-            removeClass1 = GridType.Fit;
-            removeClass2 = GridType.ScrollHorizontal;
-            removeClass3 = GridType.Fixed;
-        }
-        else if (this.gridster.$options.gridType === GridType.HorizontalFixed) {
-            this.gridster.curColWidth = this.gridster.$options.fixedColWidth +
-                (this.gridster.$options.ignoreMarginInRow ? 0 : this.gridster.$options.margin);
-            addClass = GridType.ScrollHorizontal;
-            removeClass1 = GridType.Fit;
-            removeClass2 = GridType.ScrollVertical;
-            removeClass3 = GridType.Fixed;
-        }
-        if (this.gridster.mobile) {
-            this.gridster.renderer.removeClass(this.gridster.el, addClass);
-        }
-        else {
-            this.gridster.renderer.addClass(this.gridster.el, addClass);
-        }
-        this.gridster.renderer.removeClass(this.gridster.el, removeClass1);
-        this.gridster.renderer.removeClass(this.gridster.el, removeClass2);
-        this.gridster.renderer.removeClass(this.gridster.el, removeClass3);
-    }
-    getGridColumnStyle(i) {
-        return Object.assign({}, this.getLeftPosition(this.gridster.curColWidth * i), { width: this.gridster.curColWidth - this.gridster.$options.margin + 'px', height: this.gridster.gridRows.length * this.gridster.curRowHeight - this.gridster.$options.margin + 'px' });
-    }
-    getGridRowStyle(i) {
-        return Object.assign({}, this.getTopPosition(this.gridster.curRowHeight * i), { width: this.gridster.gridColumns.length * this.gridster.curColWidth - this.gridster.$options.margin + 'px', height: this.gridster.curRowHeight - this.gridster.$options.margin + 'px' });
-    }
-    getLeftPosition(d) {
-        if (this.gridster.$options.useTransformPositioning) {
-            return {
-                transform: 'translateX(' + d + 'px)',
-            };
-        }
-        else {
-            return {
-                left: (this.getLeftMargin() + d) + 'px'
-            };
-        }
-    }
-    getTopPosition(d) {
-        if (this.gridster.$options.useTransformPositioning) {
-            return {
-                transform: 'translateY(' + d + 'px)',
-            };
-        }
-        else {
-            return {
-                top: this.getTopMargin() + d + 'px'
-            };
-        }
-    }
-    clearCellPosition(renderer, el) {
-        if (this.gridster.$options.useTransformPositioning) {
-            renderer.setStyle(el, 'transform', '');
-        }
-        else {
-            renderer.setStyle(el, 'top', '');
-            renderer.setStyle(el, 'left', '');
-        }
-    }
-    setCellPosition(renderer, el, x, y) {
-        if (this.gridster.$options.useTransformPositioning) {
-            const transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
-            renderer.setStyle(el, 'transform', transform);
-        }
-        else {
-            renderer.setStyle(el, 'left', this.getLeftMargin() + x + 'px');
-            renderer.setStyle(el, 'top', this.getTopMargin() + y + 'px');
-        }
-    }
-    getLeftMargin() {
-        if (this.gridster.$options.outerMargin) {
-            if (this.gridster.$options.outerMarginLeft !== null) {
-                return this.gridster.$options.outerMarginLeft;
-            }
-            else {
-                return this.gridster.$options.margin;
-            }
-        }
-        else {
-            return 0;
-        }
-    }
-    getTopMargin() {
-        if (this.gridster.$options.outerMargin) {
-            if (this.gridster.$options.outerMarginTop !== null) {
-                return this.gridster.$options.outerMarginTop;
-            }
-            else {
-                return this.gridster.$options.margin;
-            }
-        }
-        else {
-            return 0;
-        }
-    }
-};
-GridsterRenderer.ctorParameters = () => [
-    { type: GridsterComponentInterface }
-];
-GridsterRenderer = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [GridsterComponentInterface])
-], GridsterRenderer);
-
-var GridsterComponent_1;
-let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
-    constructor(el, renderer, cdRef, zone) {
-        this.renderer = renderer;
-        this.cdRef = cdRef;
-        this.zone = zone;
-        this.gridColumns = [];
-        this.gridRows = [];
-        this.el = el.nativeElement;
-        this.$options = JSON.parse(JSON.stringify(GridsterConfigService));
-        this.calculateLayoutDebounce = GridsterUtils.debounce(this.calculateLayout.bind(this), 0);
-        this.mobile = false;
-        this.curWidth = 0;
-        this.curHeight = 0;
-        this.grid = [];
-        this.curColWidth = 0;
-        this.curRowHeight = 0;
-        this.dragInProgress = false;
-        this.emptyCell = new GridsterEmptyCell(this);
-        this.compact = new GridsterCompact(this);
-        this.gridRenderer = new GridsterRenderer(this);
-    }
-    static checkCollisionTwoItems(item, item2) {
-        return item.x < item2.x + item2.cols
-            && item.x + item.cols > item2.x
-            && item.y < item2.y + item2.rows
-            && item.y + item.rows > item2.y;
-    }
-    ngOnInit() {
-        if (this.options.initCallback) {
-            this.options.initCallback(this);
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.options) {
-            this.setOptions();
-            this.options.api = {
-                optionsChanged: this.optionsChanged.bind(this),
-                resize: this.onResize.bind(this),
-                getNextPossiblePosition: this.getNextPossiblePosition.bind(this),
-                getFirstPossiblePosition: this.getFirstPossiblePosition.bind(this),
-                getLastPossiblePosition: this.getLastPossiblePosition.bind(this),
-                getCurrentRowHeight: this.getCurrentRowHeight.bind(this)
-            };
-            this.columns = this.$options.minCols;
-            this.rows = this.$options.minRows;
-            this.setGridSize();
-            this.calculateLayout();
-        }
-    }
-    getCurrentRowHeight() {
-        return this.curRowHeight;
-    }
-    resize() {
-        let height;
-        let width;
-        if (this.$options.gridType === 'fit' && !this.mobile) {
-            width = this.el.offsetWidth;
-            height = this.el.offsetHeight;
-        }
-        else {
-            width = this.el.clientWidth;
-            height = this.el.clientHeight;
-        }
-        if ((width !== this.curWidth || height !== this.curHeight) && this.checkIfToResize()) {
-            this.onResize();
-        }
-    }
-    setOptions() {
-        this.$options = GridsterUtils.merge(this.$options, this.options, this.$options);
-        if (!this.$options.disableWindowResize && !this.windowResize) {
-            this.windowResize = this.renderer.listen('window', 'resize', this.onResize.bind(this));
-        }
-        else if (this.$options.disableWindowResize && this.windowResize) {
-            this.windowResize();
-            this.windowResize = null;
-        }
-        this.emptyCell.updateOptions();
-    }
-    optionsChanged() {
-        this.setOptions();
-        let widgetsIndex = this.grid.length - 1, widget;
-        for (; widgetsIndex >= 0; widgetsIndex--) {
-            widget = this.grid[widgetsIndex];
-            widget.updateOptions();
-        }
-        this.calculateLayout();
-    }
-    ngOnDestroy() {
-        if (this.windowResize) {
-            this.windowResize();
-        }
-        if (this.options.destroyCallback) {
-            this.options.destroyCallback(this);
-        }
-        //if (this.options.api) {
-        /* this.options.api getting undefined for new dashboard load- temp fix
-        *  on new dashboard area load, old dashboard area gets destroyed, but that leads to
-        *  ondestroy of current this.options.api instance - needs to investigate further
-        */
-        if (false) {
-            this.options.api.resize = undefined;
-            this.options.api.optionsChanged = undefined;
-            this.options.api.getNextPossiblePosition = undefined;
-            this.options.api = undefined;
-        }
-        this.emptyCell.destroy();
-        delete this.emptyCell;
-        this.compact.destroy();
-        delete this.compact;
-    }
-    onResize() {
-        this.setGridSize();
-        this.calculateLayout();
-    }
-    checkIfToResize() {
-        const clientWidth = this.el.clientWidth;
-        const offsetWidth = this.el.offsetWidth;
-        const scrollWidth = this.el.scrollWidth;
-        const clientHeight = this.el.clientHeight;
-        const offsetHeight = this.el.offsetHeight;
-        const scrollHeight = this.el.scrollHeight;
-        const verticalScrollPresent = clientWidth < offsetWidth && scrollHeight > offsetHeight
-            && scrollHeight - offsetHeight < offsetWidth - clientWidth;
-        const horizontalScrollPresent = clientHeight < offsetHeight
-            && scrollWidth > offsetWidth && scrollWidth - offsetWidth < offsetHeight - clientHeight;
-        if (verticalScrollPresent) {
-            return false;
-        }
-        return !horizontalScrollPresent;
-    }
-    setGridSize() {
-        const el = this.el;
-        let width = el.clientWidth;
-        let height = el.clientHeight;
-        if (this.$options.setGridSize || this.$options.gridType === 'fit' && !this.mobile) {
-            width = el.offsetWidth;
-            height = el.offsetHeight;
-        }
-        else {
-            width = el.clientWidth;
-            height = el.clientHeight;
-        }
-        this.curWidth = width;
-        this.curHeight = height;
-    }
-    setGridDimensions() {
-        this.setGridSize();
-        if (!this.mobile && this.$options.mobileBreakpoint > this.curWidth) {
-            this.mobile = !this.mobile;
-            this.renderer.addClass(this.el, 'mobile');
-        }
-        else if (this.mobile && this.$options.mobileBreakpoint < this.curWidth) {
-            this.mobile = !this.mobile;
-            this.renderer.removeClass(this.el, 'mobile');
-        }
-        let rows = this.$options.minRows, columns = this.$options.minCols;
-        let widgetsIndex = this.grid.length - 1, widget;
-        for (; widgetsIndex >= 0; widgetsIndex--) {
-            widget = this.grid[widgetsIndex];
-            if (!widget.notPlaced) {
-                rows = Math.max(rows, widget.$item.y + widget.$item.rows);
-                columns = Math.max(columns, widget.$item.x + widget.$item.cols);
-            }
-        }
-        if (this.columns !== columns || this.rows !== rows) {
-            this.columns = columns;
-            this.rows = rows;
-            if (this.options.gridSizeChangedCallback) {
-                this.options.gridSizeChangedCallback(this);
-            }
-        }
-    }
-    calculateLayout() {
-        if (this.compact) {
-            this.compact.checkCompact();
-        }
-        this.setGridDimensions();
-        if (this.$options.outerMargin) {
-            let marginWidth = -this.$options.margin;
-            if (this.$options.outerMarginLeft !== null) {
-                marginWidth += this.$options.outerMarginLeft;
-                this.renderer.setStyle(this.el, 'padding-left', this.$options.outerMarginLeft + 'px');
-            }
-            else {
-                marginWidth += this.$options.margin;
-                this.renderer.setStyle(this.el, 'padding-left', this.$options.margin + 'px');
-            }
-            if (this.$options.outerMarginRight !== null) {
-                marginWidth += this.$options.outerMarginRight;
-                this.renderer.setStyle(this.el, 'padding-right', this.$options.outerMarginRight + 'px');
-            }
-            else {
-                marginWidth += this.$options.margin;
-                this.renderer.setStyle(this.el, 'padding-right', this.$options.margin + 'px');
-            }
-            this.curColWidth = (this.curWidth - marginWidth) / this.columns;
-            let marginHeight = -this.$options.margin;
-            if (this.$options.outerMarginTop !== null) {
-                marginHeight += this.$options.outerMarginTop;
-                this.renderer.setStyle(this.el, 'padding-top', this.$options.outerMarginTop + 'px');
-            }
-            else {
-                marginHeight += this.$options.margin;
-                this.renderer.setStyle(this.el, 'padding-top', this.$options.margin + 'px');
-            }
-            if (this.$options.outerMarginBottom !== null) {
-                marginHeight += this.$options.outerMarginBottom;
-                this.renderer.setStyle(this.el, 'padding-bottom', this.$options.outerMarginBottom + 'px');
-            }
-            else {
-                marginHeight += this.$options.margin;
-                this.renderer.setStyle(this.el, 'padding-bottom', this.$options.margin + 'px');
-            }
-            this.curRowHeight = (this.curHeight - marginHeight) / this.rows;
-        }
-        else {
-            this.curColWidth = (this.curWidth + this.$options.margin) / this.columns;
-            this.curRowHeight = (this.curHeight + this.$options.margin) / this.rows;
-            this.renderer.setStyle(this.el, 'padding-left', 0 + 'px');
-            this.renderer.setStyle(this.el, 'padding-right', 0 + 'px');
-            this.renderer.setStyle(this.el, 'padding-top', 0 + 'px');
-            this.renderer.setStyle(this.el, 'padding-bottom', 0 + 'px');
-        }
-        this.gridRenderer.updateGridster();
-        this.updateGrid();
-        if (this.$options.setGridSize) {
-            this.renderer.setStyle(this.el, 'width', (this.columns * this.curColWidth + this.$options.margin) + 'px');
-            this.renderer.setStyle(this.el, 'height', (this.rows * this.curRowHeight + this.$options.margin) + 'px');
-        }
-        else {
-            this.renderer.setStyle(this.el, 'width', '');
-            this.renderer.setStyle(this.el, 'height', '');
-        }
-        let widgetsIndex = this.grid.length - 1, widget;
-        for (; widgetsIndex >= 0; widgetsIndex--) {
-            widget = this.grid[widgetsIndex];
-            widget.setSize();
-            widget.drag.toggle();
-            widget.resize.toggle();
-        }
-        setTimeout(this.resize.bind(this), 100);
-    }
-    updateGrid() {
-        if (this.$options.displayGrid === 'always' && !this.mobile) {
-            this.renderer.addClass(this.el, 'display-grid');
-        }
-        else if (this.$options.displayGrid === 'onDrag&Resize' && this.dragInProgress) {
-            this.renderer.addClass(this.el, 'display-grid');
-        }
-        else if (this.$options.displayGrid === 'none' || !this.dragInProgress || this.mobile) {
-            this.renderer.removeClass(this.el, 'display-grid');
-        }
-        this.setGridDimensions();
-        this.gridColumns.length = Math.max(this.columns, Math.floor(this.curWidth / this.curColWidth)) || 0;
-        this.gridRows.length = Math.max(this.rows, Math.floor(this.curHeight / this.curRowHeight)) || 0;
-        this.cdRef.markForCheck();
-    }
-    addItem(itemComponent) {
-        if (itemComponent.$item.cols === undefined) {
-            itemComponent.$item.cols = this.$options.defaultItemCols;
-            itemComponent.item.cols = itemComponent.$item.cols;
-            itemComponent.itemChanged();
-        }
-        if (itemComponent.$item.rows === undefined) {
-            itemComponent.$item.rows = this.$options.defaultItemRows;
-            itemComponent.item.rows = itemComponent.$item.rows;
-            itemComponent.itemChanged();
-        }
-        if (itemComponent.$item.x === -1 || itemComponent.$item.y === -1) {
-            this.autoPositionItem(itemComponent);
-        }
-        else if (this.checkCollision(itemComponent.$item)) {
-            if (!this.$options.disableWarnings) {
-                itemComponent.notPlaced = true;
-                console.warn('Can\'t be placed in the bounds of the dashboard, trying to auto position!/n' +
-                    JSON.stringify(itemComponent.item, ['cols', 'rows', 'x', 'y']));
-            }
-            if (!this.$options.disableAutoPositionOnConflict) {
-                this.autoPositionItem(itemComponent);
-            }
-            else {
-                itemComponent.notPlaced = true;
-            }
-        }
-        this.grid.push(itemComponent);
-        this.calculateLayoutDebounce();
-    }
-    removeItem(itemComponent) {
-        this.grid.splice(this.grid.indexOf(itemComponent), 1);
-        this.calculateLayoutDebounce();
-        if (this.options.itemRemovedCallback) {
-            this.options.itemRemovedCallback(itemComponent.item, itemComponent);
-        }
-    }
-    checkCollision(item) {
-        let collision = false;
-        if (this.options.itemValidateCallback) {
-            collision = !this.options.itemValidateCallback(item);
-        }
-        if (!collision && this.checkGridCollision(item)) {
-            collision = true;
-        }
-        if (!collision) {
-            const c = this.findItemWithItem(item);
-            if (c) {
-                collision = c;
-            }
-        }
-        return collision;
-    }
-    checkGridCollision(item) {
-        const noNegativePosition = item.y > -1 && item.x > -1;
-        const maxGridCols = item.cols + item.x <= this.$options.maxCols;
-        const maxGridRows = item.rows + item.y <= this.$options.maxRows;
-        const maxItemCols = item.maxItemCols === undefined ? this.$options.maxItemCols : item.maxItemCols;
-        const minItemCols = item.minItemCols === undefined ? this.$options.minItemCols : item.minItemCols;
-        const maxItemRows = item.maxItemRows === undefined ? this.$options.maxItemRows : item.maxItemRows;
-        const minItemRows = item.minItemRows === undefined ? this.$options.minItemRows : item.minItemRows;
-        const inColsLimits = item.cols <= maxItemCols && item.cols >= minItemCols;
-        const inRowsLimits = item.rows <= maxItemRows && item.rows >= minItemRows;
-        const minAreaLimit = item.minItemArea === undefined ? this.$options.minItemArea : item.minItemArea;
-        const maxAreaLimit = item.maxItemArea === undefined ? this.$options.maxItemArea : item.maxItemArea;
-        const area = item.cols * item.rows;
-        const inMinArea = minAreaLimit <= area;
-        const inMaxArea = maxAreaLimit >= area;
-        return !(noNegativePosition && maxGridCols && maxGridRows && inColsLimits && inRowsLimits && inMinArea && inMaxArea);
-    }
-    findItemWithItem(item) {
-        let widgetsIndex = this.grid.length - 1, widget;
-        for (; widgetsIndex > -1; widgetsIndex--) {
-            widget = this.grid[widgetsIndex];
-            if (widget.$item !== item && GridsterComponent_1.checkCollisionTwoItems(widget.$item, item)) {
-                return widget;
-            }
-        }
-        return false;
-    }
-    findItemsWithItem(item) {
-        const a = [];
-        let widgetsIndex = this.grid.length - 1, widget;
-        for (; widgetsIndex > -1; widgetsIndex--) {
-            widget = this.grid[widgetsIndex];
-            if (widget.$item !== item && GridsterComponent_1.checkCollisionTwoItems(widget.$item, item)) {
-                a.push(widget);
-            }
-        }
-        return a;
-    }
-    autoPositionItem(itemComponent) {
-        if (this.getNextPossiblePosition(itemComponent.$item)) {
-            itemComponent.notPlaced = false;
-            itemComponent.item.x = itemComponent.$item.x;
-            itemComponent.item.y = itemComponent.$item.y;
-            itemComponent.itemChanged();
-        }
-        else {
-            itemComponent.notPlaced = true;
-            if (!this.$options.disableWarnings) {
-                console.warn('Can\'t be placed in the bounds of the dashboard!/n' +
-                    JSON.stringify(itemComponent.item, ['cols', 'rows', 'x', 'y']));
-            }
-        }
-    }
-    getNextPossiblePosition(newItem, startingFrom = {}) {
-        if (newItem.cols === -1) {
-            newItem.cols = this.$options.defaultItemCols;
-        }
-        if (newItem.rows === -1) {
-            newItem.rows = this.$options.defaultItemRows;
-        }
-        this.setGridDimensions();
-        let rowsIndex = startingFrom.y || 0, colsIndex;
-        for (; rowsIndex < this.rows; rowsIndex++) {
-            newItem.y = rowsIndex;
-            colsIndex = startingFrom.x || 0;
-            for (; colsIndex < this.columns; colsIndex++) {
-                newItem.x = colsIndex;
-                if (!this.checkCollision(newItem)) {
-                    return true;
-                }
-            }
-        }
-        const canAddToRows = this.$options.maxRows >= this.rows + newItem.rows;
-        const canAddToColumns = this.$options.maxCols >= this.columns + newItem.cols;
-        const addToRows = this.rows <= this.columns && canAddToRows;
-        if (!addToRows && canAddToColumns) {
-            newItem.x = this.columns;
-            newItem.y = 0;
-            return true;
-        }
-        else if (canAddToRows) {
-            newItem.y = this.rows;
-            newItem.x = 0;
-            return true;
-        }
-        return false;
-    }
-    getFirstPossiblePosition(item) {
-        const tmpItem = Object.assign({}, item);
-        this.getNextPossiblePosition(tmpItem);
-        return tmpItem;
-    }
-    getLastPossiblePosition(item) {
-        let farthestItem = { y: 0, x: 0 };
-        farthestItem = this.grid.reduce((prev, curr) => {
-            const currCoords = { y: curr.$item.y + curr.$item.rows - 1, x: curr.$item.x + curr.$item.cols - 1 };
-            if (GridsterUtils.compareItems(prev, currCoords) === 1) {
-                return currCoords;
-            }
-            else {
-                return prev;
-            }
-        }, farthestItem);
-        const tmpItem = Object.assign({}, item);
-        this.getNextPossiblePosition(tmpItem, farthestItem);
-        return tmpItem;
-    }
-    pixelsToPositionX(x, roundingMethod, noLimit) {
-        const position = roundingMethod(x / this.curColWidth);
-        if (noLimit) {
-            return position;
-        }
-        else {
-            return Math.max(position, 0);
-        }
-    }
-    pixelsToPositionY(y, roundingMethod, noLimit) {
-        const position = roundingMethod(y / this.curRowHeight);
-        if (noLimit) {
-            return position;
-        }
-        else {
-            return Math.max(position, 0);
-        }
-    }
-    positionXToPixels(x) {
-        return x * this.curColWidth;
-    }
-    positionYToPixels(y) {
-        return y * this.curRowHeight;
-    }
-};
-GridsterComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: ChangeDetectorRef },
-    { type: NgZone }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GridsterComponent.prototype, "options", void 0);
-GridsterComponent = GridsterComponent_1 = __decorate([
-    Component({
-        selector: 'gridster',
-        template: "<div class=\"gridster-column\" *ngFor=\"let column of gridColumns; let i = index;\"\r\n     [ngStyle]=\"gridRenderer.getGridColumnStyle(i)\"></div>\r\n<div class=\"gridster-row\" *ngFor=\"let row of gridRows; let i = index;\"\r\n     [ngStyle]=\"gridRenderer.getGridRowStyle(i)\"></div>\r\n<ng-content></ng-content>\r\n<gridster-preview class=\"gridster-preview\"></gridster-preview>\r\n",
-        encapsulation: ViewEncapsulation.None,
-        styles: ["gridster{clear:both;position:relative;box-sizing:border-box;background:#fff;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:block;overflow:auto}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto;flex-flow:column}gridster.mobile gridster-item{position:relative;width:100%!important;min-height:300px!important}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid #ccc;border-right:1px solid #ccc}gridster .gridster-row{border-top:1px solid #ccc;border-bottom:1px solid #ccc}"]
-    }),
-    __metadata("design:paramtypes", [ElementRef, Renderer2, ChangeDetectorRef, NgZone])
-], GridsterComponent);
-
-class GridsterItemComponentInterface {
-}
-
-let GridsterSwap = class GridsterSwap {
-    constructor(gridsterItem) {
-        this.gridsterItem = gridsterItem;
-        this.gridster = gridsterItem.gridster;
-    }
-    destroy() {
-        delete this.gridster;
-        delete this.gridsterItem;
-        delete this.swapedItem;
-    }
-    swapItems() {
-        if (this.gridster.$options.swap) {
-            this.checkSwapBack();
-            this.checkSwap(this.gridsterItem);
-        }
-    }
-    checkSwapBack() {
-        if (this.swapedItem) {
-            const x = this.swapedItem.$item.x;
-            const y = this.swapedItem.$item.y;
-            this.swapedItem.$item.x = this.swapedItem.item.x || 0;
-            this.swapedItem.$item.y = this.swapedItem.item.y || 0;
-            if (this.gridster.checkCollision(this.swapedItem.$item)) {
-                this.swapedItem.$item.x = x;
-                this.swapedItem.$item.y = y;
-            }
-            else {
-                this.swapedItem.setSize();
-                this.gridsterItem.$item.x = this.gridsterItem.item.x || 0;
-                this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
-                this.swapedItem = undefined;
-            }
-        }
-    }
-    restoreSwapItem() {
-        if (this.swapedItem) {
-            this.swapedItem.$item.x = this.swapedItem.item.x || 0;
-            this.swapedItem.$item.y = this.swapedItem.item.y || 0;
-            this.swapedItem.setSize();
-            this.swapedItem = undefined;
-        }
-    }
-    setSwapItem() {
-        if (this.swapedItem) {
-            this.swapedItem.checkItemChanges(this.swapedItem.$item, this.swapedItem.item);
-            this.swapedItem = undefined;
-        }
-    }
-    checkSwap(pushedBy) {
-        const gridsterItemCollision = this.gridster.checkCollision(pushedBy.$item);
-        if (gridsterItemCollision && gridsterItemCollision !== true && gridsterItemCollision.canBeDragged()) {
-            const gridsterItemCollide = gridsterItemCollision;
-            const copyCollisionX = gridsterItemCollide.$item.x;
-            const copyCollisionY = gridsterItemCollide.$item.y;
-            const copyX = pushedBy.$item.x;
-            const copyY = pushedBy.$item.y;
-            gridsterItemCollide.$item.x = pushedBy.item.x || 0;
-            gridsterItemCollide.$item.y = pushedBy.item.y || 0;
-            pushedBy.$item.x = gridsterItemCollide.item.x || 0;
-            pushedBy.$item.y = gridsterItemCollide.item.y || 0;
-            if (this.gridster.checkCollision(gridsterItemCollide.$item) || this.gridster.checkCollision(pushedBy.$item)) {
-                pushedBy.$item.x = copyX;
-                pushedBy.$item.y = copyY;
-                gridsterItemCollide.$item.x = copyCollisionX;
-                gridsterItemCollide.$item.y = copyCollisionY;
-            }
-            else {
-                gridsterItemCollide.setSize();
-                this.swapedItem = gridsterItemCollide;
-            }
-        }
-    }
-};
-GridsterSwap.ctorParameters = () => [
-    { type: GridsterItemComponentInterface }
-];
-GridsterSwap = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [GridsterItemComponentInterface])
-], GridsterSwap);
-
-let scrollSensitivity;
-let scrollSpeed;
-const intervalDuration = 50;
-let gridsterElement;
-let resizeEvent;
-let resizeEventType;
-let intervalE;
-let intervalW;
-let intervalN;
-let intervalS;
-function scroll(gridster, left, top, width, height, e, lastMouse, calculateItemPosition, resize, resizeEventScrollType) {
-    scrollSensitivity = gridster.$options.scrollSensitivity;
-    scrollSpeed = gridster.$options.scrollSpeed;
-    gridsterElement = gridster.el;
-    resizeEvent = resize;
-    resizeEventType = resizeEventScrollType;
-    const offsetWidth = gridsterElement.offsetWidth;
-    const offsetHeight = gridsterElement.offsetHeight;
-    const offsetLeft = gridsterElement.scrollLeft;
-    const offsetTop = gridsterElement.scrollTop;
-    const elemTopOffset = top - offsetTop;
-    const elemBottomOffset = offsetHeight + offsetTop - top - height;
-    if (lastMouse.clientY < e.clientY && elemBottomOffset < scrollSensitivity) {
-        cancelN();
-        if ((resizeEvent && resizeEventType && !resizeEventType.s) || intervalS) {
-            return;
-        }
-        intervalS = startVertical(1, calculateItemPosition, lastMouse);
-    }
-    else if (lastMouse.clientY > e.clientY && offsetTop > 0 && elemTopOffset < scrollSensitivity) {
-        cancelS();
-        if ((resizeEvent && resizeEventType && !resizeEventType.n) || intervalN) {
-            return;
-        }
-        intervalN = startVertical(-1, calculateItemPosition, lastMouse);
-    }
-    else if (lastMouse.clientY !== e.clientY) {
-        cancelVertical();
-    }
-    const elemRightOffset = offsetLeft + offsetWidth - left - width;
-    const elemLeftOffset = left - offsetLeft;
-    if (lastMouse.clientX < e.clientX && elemRightOffset <= scrollSensitivity) {
-        cancelW();
-        if ((resizeEvent && resizeEventType && !resizeEventType.e) || intervalE) {
-            return;
-        }
-        intervalE = startHorizontal(1, calculateItemPosition, lastMouse);
-    }
-    else if (lastMouse.clientX > e.clientX && offsetLeft > 0 && elemLeftOffset < scrollSensitivity) {
-        cancelE();
-        if ((resizeEvent && resizeEventType && !resizeEventType.w) || intervalW) {
-            return;
-        }
-        intervalW = startHorizontal(-1, calculateItemPosition, lastMouse);
-    }
-    else if (lastMouse.clientX !== e.clientX) {
-        cancelHorizontal();
-    }
-}
-function startVertical(sign, calculateItemPosition, lastMouse) {
-    let clientY = lastMouse.clientY;
-    return setInterval(() => {
-        if (!gridsterElement || sign === -1 && gridsterElement.scrollTop - scrollSpeed < 0) {
-            cancelVertical();
-        }
-        gridsterElement.scrollTop += sign * scrollSpeed;
-        clientY += sign * scrollSpeed;
-        calculateItemPosition({ clientX: lastMouse.clientX, clientY: clientY });
-    }, intervalDuration);
-}
-function startHorizontal(sign, calculateItemPosition, lastMouse) {
-    let clientX = lastMouse.clientX;
-    return setInterval(() => {
-        if (!gridsterElement || sign === -1 && gridsterElement.scrollLeft - scrollSpeed < 0) {
-            cancelHorizontal();
-        }
-        gridsterElement.scrollLeft += sign * scrollSpeed;
-        clientX += sign * scrollSpeed;
-        calculateItemPosition({ clientX: clientX, clientY: lastMouse.clientY });
-    }, intervalDuration);
-}
-function cancelScroll() {
-    cancelHorizontal();
-    cancelVertical();
-    gridsterElement = undefined;
-}
-function cancelHorizontal() {
-    cancelE();
-    cancelW();
-}
-function cancelVertical() {
-    cancelN();
-    cancelS();
-}
-function cancelE() {
-    if (intervalE) {
-        clearInterval(intervalE);
-        intervalE = 0;
-    }
-}
-function cancelW() {
-    if (intervalW) {
-        clearInterval(intervalW);
-        intervalW = 0;
-    }
-}
-function cancelS() {
-    if (intervalS) {
-        clearInterval(intervalS);
-        intervalS = 0;
-    }
-}
-function cancelN() {
-    if (intervalN) {
-        clearInterval(intervalN);
-        intervalN = 0;
-    }
-}
-
-let GridsterPush = class GridsterPush {
-    constructor(gridsterItem) {
-        this.pushedItems = [];
-        this.pushedItemsTemp = [];
-        this.pushedItemsTempPath = [];
-        this.pushedItemsPath = [];
-        this.gridsterItem = gridsterItem;
-        this.gridster = gridsterItem.gridster;
-        this.tryPattern = {
-            fromEast: [this.tryWest, this.trySouth, this.tryNorth, this.tryEast],
-            fromWest: [this.tryEast, this.trySouth, this.tryNorth, this.tryWest],
-            fromNorth: [this.trySouth, this.tryEast, this.tryWest, this.tryNorth],
-            fromSouth: [this.tryNorth, this.tryEast, this.tryWest, this.trySouth]
-        };
-        this.fromSouth = 'fromSouth';
-        this.fromNorth = 'fromNorth';
-        this.fromEast = 'fromEast';
-        this.fromWest = 'fromWest';
-    }
-    destroy() {
-        delete this.gridster;
-        delete this.gridsterItem;
-    }
-    pushItems(direction, disable) {
-        if (this.gridster.$options.pushItems && !disable) {
-            this.pushedItemsOrder = [];
-            const pushed = this.push(this.gridsterItem, direction);
-            if (!pushed) {
-                this.restoreTempItems();
-            }
-            this.pushedItemsOrder = [];
-            this.pushedItemsTemp = [];
-            this.pushedItemsTempPath = [];
-            return pushed;
-        }
-        else {
-            return false;
-        }
-    }
-    restoreTempItems() {
-        let i = this.pushedItemsTemp.length - 1;
-        for (; i > -1; i--) {
-            this.removeFromTempPushed(this.pushedItemsTemp[i]);
-        }
-    }
-    restoreItems() {
-        let i = 0;
-        const l = this.pushedItems.length;
-        let pushedItem;
-        for (; i < l; i++) {
-            pushedItem = this.pushedItems[i];
-            pushedItem.$item.x = pushedItem.item.x || 0;
-            pushedItem.$item.y = pushedItem.item.y || 0;
-            pushedItem.setSize();
-        }
-        this.pushedItems = [];
-        this.pushedItemsPath = [];
-    }
-    setPushedItems() {
-        let i = 0;
-        const l = this.pushedItems.length;
-        let pushedItem;
-        for (; i < l; i++) {
-            pushedItem = this.pushedItems[i];
-            pushedItem.checkItemChanges(pushedItem.$item, pushedItem.item);
-        }
-        this.pushedItems = [];
-        this.pushedItemsPath = [];
-    }
-    checkPushBack() {
-        let i = this.pushedItems.length - 1;
-        let change = false;
-        for (; i > -1; i--) {
-            if (this.checkPushedItem(this.pushedItems[i], i)) {
-                change = true;
-            }
-        }
-        if (change) {
-            this.checkPushBack();
-        }
-    }
-    push(gridsterItem, direction) {
-        if (this.gridster.checkGridCollision(gridsterItem.$item)) {
-            return false;
-        }
-        if (direction === '') {
-            return false;
-        }
-        const a = this.gridster.findItemsWithItem(gridsterItem.$item);
-        let i = a.length - 1, itemCollision;
-        let makePush = true;
-        const b = [];
-        for (; i > -1; i--) {
-            itemCollision = a[i];
-            if (itemCollision === this.gridsterItem) {
-                makePush = false;
-                break;
-            }
-            if (!itemCollision.canBeDragged()) {
-                makePush = false;
-                break;
-            }
-            const compare = this.pushedItemsTemp.find((el) => {
-                return el.$item.x === itemCollision.$item.x && el.$item.y === itemCollision.$item.y;
-            });
-            if (compare) {
-                makePush = false;
-                break;
-            }
-            if (this.tryPattern[direction][0].call(this, itemCollision, gridsterItem)) {
-                this.pushedItemsOrder.push(itemCollision);
-                b.push(itemCollision);
-            }
-            else if (this.tryPattern[direction][1].call(this, itemCollision, gridsterItem)) {
-                this.pushedItemsOrder.push(itemCollision);
-                b.push(itemCollision);
-            }
-            else if (this.tryPattern[direction][2].call(this, itemCollision, gridsterItem)) {
-                this.pushedItemsOrder.push(itemCollision);
-                b.push(itemCollision);
-            }
-            else if (this.tryPattern[direction][3].call(this, itemCollision, gridsterItem)) {
-                this.pushedItemsOrder.push(itemCollision);
-                b.push(itemCollision);
-            }
-            else {
-                makePush = false;
-                break;
-            }
-        }
-        if (!makePush) {
-            i = this.pushedItemsOrder.lastIndexOf(b[0]);
-            if (i > -1) {
-                let j = this.pushedItemsOrder.length - 1;
-                for (; j >= i; j--) {
-                    itemCollision = this.pushedItemsOrder[j];
-                    this.pushedItemsOrder.pop();
-                    this.removeFromTempPushed(itemCollision);
-                    this.removeFromPushedItem(itemCollision);
-                }
-            }
-        }
-        return makePush;
-    }
-    trySouth(gridsterItemCollide, gridsterItem) {
-        if (!this.gridster.$options.pushDirections.south) {
-            return false;
-        }
-        this.addToTempPushed(gridsterItemCollide);
-        gridsterItemCollide.$item.y = gridsterItem.$item.y + gridsterItem.$item.rows;
-        if (this.push(gridsterItemCollide, this.fromNorth)) {
-            gridsterItemCollide.setSize();
-            this.addToPushed(gridsterItemCollide);
-            return true;
-        }
-        else {
-            this.removeFromTempPushed(gridsterItemCollide);
-        }
-        return false;
-    }
-    tryNorth(gridsterItemCollide, gridsterItem) {
-        if (!this.gridster.$options.pushDirections.north) {
-            return false;
-        }
-        this.addToTempPushed(gridsterItemCollide);
-        gridsterItemCollide.$item.y = gridsterItem.$item.y - gridsterItemCollide.$item.rows;
-        if (this.push(gridsterItemCollide, this.fromSouth)) {
-            gridsterItemCollide.setSize();
-            this.addToPushed(gridsterItemCollide);
-            return true;
-        }
-        else {
-            this.removeFromTempPushed(gridsterItemCollide);
-        }
-        return false;
-    }
-    tryEast(gridsterItemCollide, gridsterItem) {
-        if (!this.gridster.$options.pushDirections.east) {
-            return false;
-        }
-        this.addToTempPushed(gridsterItemCollide);
-        gridsterItemCollide.$item.x = gridsterItem.$item.x + gridsterItem.$item.cols;
-        if (this.push(gridsterItemCollide, this.fromWest)) {
-            gridsterItemCollide.setSize();
-            this.addToPushed(gridsterItemCollide);
-            return true;
-        }
-        else {
-            this.removeFromTempPushed(gridsterItemCollide);
-        }
-        return false;
-    }
-    tryWest(gridsterItemCollide, gridsterItem) {
-        if (!this.gridster.$options.pushDirections.west) {
-            return false;
-        }
-        this.addToTempPushed(gridsterItemCollide);
-        gridsterItemCollide.$item.x = gridsterItem.$item.x - gridsterItemCollide.$item.cols;
-        if (this.push(gridsterItemCollide, this.fromEast)) {
-            gridsterItemCollide.setSize();
-            this.addToPushed(gridsterItemCollide);
-            return true;
-        }
-        else {
-            this.removeFromTempPushed(gridsterItemCollide);
-        }
-        return false;
-    }
-    addToTempPushed(gridsterItem) {
-        let i = this.pushedItemsTemp.indexOf(gridsterItem);
-        if (i === -1) {
-            i = this.pushedItemsTemp.push(gridsterItem) - 1;
-            this.pushedItemsTempPath[i] = [];
-        }
-        this.pushedItemsTempPath[i].push({ x: gridsterItem.$item.x, y: gridsterItem.$item.y });
-    }
-    removeFromTempPushed(gridsterItem) {
-        const i = this.pushedItemsTemp.indexOf(gridsterItem);
-        const tempPosition = this.pushedItemsTempPath[i].pop();
-        if (!tempPosition) {
-            return;
-        }
-        gridsterItem.$item.x = tempPosition.x;
-        gridsterItem.$item.y = tempPosition.y;
-        gridsterItem.setSize();
-        if (!this.pushedItemsTempPath[i].length) {
-            this.pushedItemsTemp.splice(i, 1);
-            this.pushedItemsTempPath.splice(i, 1);
-        }
-    }
-    addToPushed(gridsterItem) {
-        if (this.pushedItems.indexOf(gridsterItem) < 0) {
-            this.pushedItems.push(gridsterItem);
-            this.pushedItemsPath.push([{ x: gridsterItem.item.x || 0, y: gridsterItem.item.y || 0 },
-                { x: gridsterItem.$item.x, y: gridsterItem.$item.y }]);
-        }
-        else {
-            const i = this.pushedItems.indexOf(gridsterItem);
-            this.pushedItemsPath[i].push({ x: gridsterItem.$item.x, y: gridsterItem.$item.y });
-        }
-    }
-    removeFromPushed(i) {
-        if (i > -1) {
-            this.pushedItems.splice(i, 1);
-            this.pushedItemsPath.splice(i, 1);
-        }
-    }
-    removeFromPushedItem(gridsterItem) {
-        const i = this.pushedItems.indexOf(gridsterItem);
-        if (i > -1) {
-            this.pushedItemsPath[i].pop();
-            if (!this.pushedItemsPath.length) {
-                this.pushedItems.splice(i, 1);
-                this.pushedItemsPath.splice(i, 1);
-            }
-        }
-    }
-    checkPushedItem(pushedItem, i) {
-        const path = this.pushedItemsPath[i];
-        let j = path.length - 2;
-        let lastPosition, x, y;
-        let change = false;
-        for (; j > -1; j--) {
-            lastPosition = path[j];
-            x = pushedItem.$item.x;
-            y = pushedItem.$item.y;
-            pushedItem.$item.x = lastPosition.x;
-            pushedItem.$item.y = lastPosition.y;
-            if (!this.gridster.findItemWithItem(pushedItem.$item)) {
-                pushedItem.setSize();
-                path.splice(j + 1, path.length - j - 1);
-                change = true;
-            }
-            else {
-                pushedItem.$item.x = x;
-                pushedItem.$item.y = y;
-            }
-        }
-        if (path.length < 2) {
-            this.removeFromPushed(i);
-        }
-        return change;
-    }
-};
-GridsterPush.ctorParameters = () => [
-    { type: GridsterItemComponentInterface }
-];
-GridsterPush = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [GridsterItemComponentInterface])
-], GridsterPush);
-
-let GridsterDraggable = class GridsterDraggable {
-    constructor(gridsterItem, gridster, zone) {
-        this.zone = zone;
-        this.collision = false;
-        this.gridsterItem = gridsterItem;
-        this.gridster = gridster;
-        this.lastMouse = {
-            clientX: 0,
-            clientY: 0
-        };
-        this.path = [];
-    }
-    destroy() {
-        if (this.gridster.previewStyle) {
-            this.gridster.previewStyle(true);
-        }
-        delete this.gridsterItem;
-        delete this.gridster;
-        delete this.collision;
-        if (this.mousedown) {
-            this.mousedown();
-            this.touchstart();
-        }
-    }
-    dragStart(e) {
-        switch (e.which) {
-            case 1:
-                // left mouse button
-                break;
-            case 2:
-            case 3:
-                // right or middle mouse button
-                return;
-        }
-        if (this.gridster.options.draggable && this.gridster.options.draggable.start) {
-            this.gridster.options.draggable.start(this.gridsterItem.item, this.gridsterItem, e);
-        }
-        e.stopPropagation();
-        e.preventDefault();
-        this.dragFunction = this.dragMove.bind(this);
-        this.dragStopFunction = this.dragStop.bind(this);
-        this.zone.runOutsideAngular(() => {
-            this.mousemove = this.gridsterItem.renderer.listen('document', 'mousemove', this.dragFunction);
-            this.touchmove = this.gridster.renderer.listen(this.gridster.el, 'touchmove', this.dragFunction);
-        });
-        this.mouseup = this.gridsterItem.renderer.listen('document', 'mouseup', this.dragStopFunction);
-        this.mouseleave = this.gridsterItem.renderer.listen('document', 'mouseleave', this.dragStopFunction);
-        this.cancelOnBlur = this.gridsterItem.renderer.listen('window', 'blur', this.dragStopFunction);
-        this.touchend = this.gridsterItem.renderer.listen('document', 'touchend', this.dragStopFunction);
-        this.touchcancel = this.gridsterItem.renderer.listen('document', 'touchcancel', this.dragStopFunction);
-        this.gridsterItem.renderer.addClass(this.gridsterItem.el, 'gridster-item-moving');
-        this.margin = this.gridster.$options.margin;
-        this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-        this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-        this.left = this.gridsterItem.left - this.margin;
-        this.top = this.gridsterItem.top - this.margin;
-        this.width = this.gridsterItem.width;
-        this.height = this.gridsterItem.height;
-        this.diffLeft = e.clientX + this.offsetLeft - this.margin - this.left;
-        this.diffTop = e.clientY + this.offsetTop - this.margin - this.top;
-        this.gridster.movingItem = this.gridsterItem.$item;
-        this.gridster.previewStyle(true);
-        this.push = new GridsterPush(this.gridsterItem);
-        this.swap = new GridsterSwap(this.gridsterItem);
-        this.gridster.dragInProgress = true;
-        this.gridster.updateGrid();
-        this.path.push({ x: this.gridsterItem.item.x || 0, y: this.gridsterItem.item.y || 0 });
-    }
-    dragMove(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        GridsterUtils.checkTouchEvent(e);
-        this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-        this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-        scroll(this.gridster, this.left, this.top, this.width, this.height, e, this.lastMouse, this.calculateItemPositionFromMousePosition.bind(this));
-        this.calculateItemPositionFromMousePosition(e);
-    }
-    calculateItemPositionFromMousePosition(e) {
-        this.left = e.clientX + this.offsetLeft - this.diffLeft;
-        this.top = e.clientY + this.offsetTop - this.diffTop;
-        this.calculateItemPosition();
-        this.lastMouse.clientX = e.clientX;
-        this.lastMouse.clientY = e.clientY;
-        this.zone.run(() => {
-            this.gridster.updateGrid();
-        });
-    }
-    dragStop(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        cancelScroll();
-        this.cancelOnBlur();
-        this.mousemove();
-        this.mouseup();
-        this.mouseleave();
-        this.touchmove();
-        this.touchend();
-        this.touchcancel();
-        this.gridsterItem.renderer.removeClass(this.gridsterItem.el, 'gridster-item-moving');
-        this.gridster.dragInProgress = false;
-        this.gridster.updateGrid();
-        this.path = [];
-        if (this.gridster.options.draggable && this.gridster.options.draggable.stop) {
-            Promise.resolve(this.gridster.options.draggable.stop(this.gridsterItem.item, this.gridsterItem, e))
-                .then(this.makeDrag.bind(this), this.cancelDrag.bind(this));
-        }
-        else {
-            this.makeDrag();
-        }
-        setTimeout(() => {
-            if (this.gridster) {
-                this.gridster.movingItem = null;
-                this.gridster.previewStyle(true);
-            }
-        });
-    }
-    cancelDrag() {
-        this.gridsterItem.$item.x = this.gridsterItem.item.x || 0;
-        this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
-        this.gridsterItem.setSize();
-        if (this.push) {
-            this.push.restoreItems();
-        }
-        if (this.swap) {
-            this.swap.restoreSwapItem();
-        }
-        if (this.push) {
-            this.push.destroy();
-            delete this.push;
-        }
-        if (this.swap) {
-            this.swap.destroy();
-            delete this.swap;
-        }
-    }
-    makeDrag() {
-        if (this.gridster.$options.draggable.dropOverItems && this.gridster.options.draggable
-            && this.gridster.options.draggable.dropOverItemsCallback
-            && this.collision && this.collision !== true && this.collision.$item) {
-            this.gridster.options.draggable.dropOverItemsCallback(this.gridsterItem.item, this.collision.item, this.gridster);
-        }
-        this.collision = false;
-        this.gridsterItem.setSize();
-        this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.gridsterItem.item);
-        if (this.push) {
-            this.push.setPushedItems();
-        }
-        if (this.swap) {
-            this.swap.setSwapItem();
-        }
-        if (this.push) {
-            this.push.destroy();
-            delete this.push;
-        }
-        if (this.swap) {
-            this.swap.destroy();
-            delete this.swap;
-        }
-    }
-    checkforavailableSpaceintheArea() {
-        let itemRowsbackup = this.gridsterItem.$item.rows;
-        let itemColsbackup = this.gridsterItem.$item.cols;
-        this.gridsterItem.$item.x = this.positionX;
-        this.gridsterItem.$item.y = this.positionY;
-        /** isCollide = 2 - no collision  */
-        var isCollide = 1;
-        /** To iterate over the width of the gridster iTem and to check for collision */
-        do {
-            this.gridsterItem.$item.rows = itemRowsbackup;
-            /** To iterate over the height of the gridster Item and check for collision */
-            for (let rowcount = this.gridsterItem.$item.rows; rowcount >= 15; rowcount--) {
-                if (!this.gridster.checkCollision(this.gridsterItem.$item)) {
-                    isCollide = 2;
-                    break;
-                }
-                else { /** has collision -  check with x-1 position and*/
-                    let rowbkup = this.gridsterItem.$item.x;
-                    let lastPossiblePositionX = this.gridsterItem.$item.x;
-                    do {
-                        this.gridsterItem.$item.x = this.gridsterItem.$item.x - 1;
-                        if (!this.gridster.checkCollision(this.gridsterItem.$item)) {
-                            lastPossiblePositionX = this.gridsterItem.$item.x;
-                        }
-                        else {
-                            this.gridsterItem.$item.x = lastPossiblePositionX;
-                            let originalCols = this.gridsterItem.$item.cols;
-                            let lastPossibleCols = this.gridsterItem.$item.cols;
-                            do {
-                                this.gridsterItem.$item.cols = this.gridsterItem.$item.cols + 1;
-                                if (this.gridster.checkCollision(this.gridsterItem.$item)) {
-                                    this.gridsterItem.$item.cols = lastPossibleCols;
-                                    break;
-                                }
-                                else {
-                                    lastPossibleCols = this.gridsterItem.$item.cols;
-                                }
-                            } while (this.gridsterItem.$item.cols - originalCols < 15);
-                            break;
-                        }
-                    } while (this.gridsterItem.$item.x > 0);
-                    if (this.gridster.checkCollision(this.gridsterItem.$item)) {
-                        this.gridsterItem.$item.rows = this.gridsterItem.$item.rows - 1;
-                        this.gridsterItem.$item.x = rowbkup;
-                    }
-                    else {
-                        isCollide = 2;
-                        break;
-                    }
-                }
-            }
-            if (isCollide == 2) {
-                break;
-            }
-            this.gridsterItem.$item.cols = this.gridsterItem.$item.cols - 1;
-        } while (this.gridsterItem.$item.cols >= 15);
-        // while (this.gridsterItem.$item.rows>=15 || this.gridsterItem.$item.cols>=15);
-        if (isCollide == 1) {
-            this.gridsterItem.$item.x = this.positionXBackup;
-            this.gridsterItem.$item.y = this.positionYBackup;
-            this.gridsterItem.$item.cols = itemColsbackup;
-            this.gridsterItem.$item.rows = itemRowsbackup;
-        }
-        else {
-            // this.gridsterItem.item.rows=this.gridsterItem.$item.rows;
-            // this.gridsterItem.item.cols=this.gridsterItem.$item.cols;
-        }
-        return this.gridsterItem.$item;
-    }
-    calculateItemPosition() {
-        this.gridster.movingItem = this.gridsterItem.$item;
-        this.positionX = this.gridster.pixelsToPositionX(this.left, Math.round);
-        this.positionY = this.gridster.pixelsToPositionY(this.top, Math.round);
-        this.positionXBackup = this.gridsterItem.$item.x;
-        this.positionYBackup = this.gridsterItem.$item.y;
-        this.gridsterItem.$item.x = this.positionX;
-        if (this.gridster.checkGridCollision(this.gridsterItem.$item)) {
-            this.gridsterItem.$item.x = this.positionXBackup;
-        }
-        this.gridsterItem.$item.y = this.positionY;
-        if (this.gridster.checkGridCollision(this.gridsterItem.$item)) {
-            this.gridsterItem.$item.y = this.positionYBackup;
-        }
-        if (this.gridster.options.autoResizeonDrag) {
-            this.gridsterItem.$item = this.checkforavailableSpaceintheArea();
-            this.gridsterItem.setSize();
-        }
-        this.gridster.gridRenderer.setCellPosition(this.gridsterItem.renderer, this.gridsterItem.el, this.left, this.top);
-        if (this.positionXBackup !== this.gridsterItem.$item.x || this.positionYBackup !== this.gridsterItem.$item.y) {
-            const lastPosition = this.path[this.path.length - 1];
-            let direction = '';
-            if (lastPosition.x < this.gridsterItem.$item.x) {
-                direction = this.push.fromWest;
-            }
-            else if (lastPosition.x > this.gridsterItem.$item.x) {
-                direction = this.push.fromEast;
-            }
-            else if (lastPosition.y < this.gridsterItem.$item.y) {
-                direction = this.push.fromNorth;
-            }
-            else if (lastPosition.y > this.gridsterItem.$item.y) {
-                direction = this.push.fromSouth;
-            }
-            this.push.pushItems(direction, this.gridster.$options.disablePushOnDrag);
-            this.swap.swapItems();
-            this.collision = this.gridster.checkCollision(this.gridsterItem.$item);
-            if (this.collision) {
-                this.gridsterItem.$item.x = this.positionXBackup;
-                this.gridsterItem.$item.y = this.positionYBackup;
-                if (this.gridster.$options.draggable.dropOverItems && this.collision !== true && this.collision.$item) {
-                    this.gridster.movingItem = null;
-                }
-            }
-            else {
-                this.path.push({ x: this.gridsterItem.$item.x, y: this.gridsterItem.$item.y });
-            }
-            this.push.checkPushBack();
-        }
-        this.gridster.previewStyle(true);
-    }
-    toggle() {
-        const enableDrag = this.gridsterItem.canBeDragged();
-        if (!this.enabled && enableDrag) {
-            this.enabled = !this.enabled;
-            this.dragStartFunction = this.dragStartDelay.bind(this);
-            this.mousedown = this.gridsterItem.renderer.listen(this.gridsterItem.el, 'mousedown', this.dragStartFunction);
-            this.touchstart = this.gridsterItem.renderer.listen(this.gridsterItem.el, 'touchstart', this.dragStartFunction);
-        }
-        else if (this.enabled && !enableDrag) {
-            this.enabled = !this.enabled;
-            this.mousedown();
-            this.touchstart();
-        }
-    }
-    dragStartDelay(e) {
-        if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('gridster-item-resizable-handler') > -1) {
-            return;
-        }
-        if (GridsterUtils.checkContentClassForEvent(this.gridster, e)) {
-            return;
-        }
-        GridsterUtils.checkTouchEvent(e);
-        if (!this.gridster.$options.draggable.delayStart) {
-            this.dragStart(e);
-            return;
-        }
-        const timeout = setTimeout(() => {
-            this.dragStart(e);
-            cancelDrag();
-        }, this.gridster.$options.draggable.delayStart);
-        const cancelMouse = this.gridsterItem.renderer.listen('document', 'mouseup', cancelDrag);
-        const cancelMouseLeave = this.gridsterItem.renderer.listen('document', 'mouseleave', cancelDrag);
-        const cancelOnBlur = this.gridsterItem.renderer.listen('window', 'blur', cancelDrag);
-        const cancelTouchMove = this.gridsterItem.renderer.listen('document', 'touchmove', cancelMove);
-        const cancelTouchEnd = this.gridsterItem.renderer.listen('document', 'touchend', cancelDrag);
-        const cancelTouchCancel = this.gridsterItem.renderer.listen('document', 'touchcancel', cancelDrag);
-        function cancelMove(eventMove) {
-            GridsterUtils.checkTouchEvent(eventMove);
-            if (Math.abs(eventMove.clientX - e.clientX) > 9 || Math.abs(eventMove.clientY - e.clientY) > 9) {
-                cancelDrag();
-            }
-        }
-        function cancelDrag() {
-            clearTimeout(timeout);
-            cancelOnBlur();
-            cancelMouse();
-            cancelMouseLeave();
-            cancelTouchMove();
-            cancelTouchEnd();
-            cancelTouchCancel();
-        }
-    }
-};
-GridsterDraggable.ctorParameters = () => [
-    { type: GridsterItemComponentInterface },
-    { type: GridsterComponentInterface },
-    { type: NgZone }
-];
-GridsterDraggable = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [GridsterItemComponentInterface, GridsterComponentInterface, NgZone])
-], GridsterDraggable);
-
-let GridsterPushResize = class GridsterPushResize {
-    constructor(gridsterItem) {
-        this.pushedItems = [];
-        this.pushedItemsPath = [];
-        this.gridsterItem = gridsterItem;
-        this.gridster = gridsterItem.gridster;
-        this.tryPattern = {
-            fromEast: this.tryWest,
-            fromWest: this.tryEast,
-            fromNorth: this.trySouth,
-            fromSouth: this.tryNorth
-        };
-        this.fromSouth = 'fromSouth';
-        this.fromNorth = 'fromNorth';
-        this.fromEast = 'fromEast';
-        this.fromWest = 'fromWest';
-    }
-    destroy() {
-        delete this.gridster;
-        delete this.gridsterItem;
-    }
-    pushItems(direction) {
-        if (this.gridster.$options.pushResizeItems) {
-            return this.push(this.gridsterItem, direction);
-        }
-        else {
-            return false;
-        }
-    }
-    restoreItems() {
-        let i = 0;
-        const l = this.pushedItems.length;
-        let pushedItem;
-        for (; i < l; i++) {
-            pushedItem = this.pushedItems[i];
-            pushedItem.$item.x = pushedItem.item.x || 0;
-            pushedItem.$item.y = pushedItem.item.y || 0;
-            pushedItem.$item.cols = pushedItem.item.cols || 1;
-            pushedItem.$item.row = pushedItem.item.row || 1;
-            pushedItem.setSize();
-        }
-        this.pushedItems = [];
-        this.pushedItemsPath = [];
-    }
-    setPushedItems() {
-        let i = 0;
-        const l = this.pushedItems.length;
-        let pushedItem;
-        for (; i < l; i++) {
-            pushedItem = this.pushedItems[i];
-            pushedItem.checkItemChanges(pushedItem.$item, pushedItem.item);
-        }
-        this.pushedItems = [];
-        this.pushedItemsPath = [];
-    }
-    checkPushBack() {
-        let i = this.pushedItems.length - 1;
-        let change = false;
-        for (; i > -1; i--) {
-            if (this.checkPushedItem(this.pushedItems[i], i)) {
-                change = true;
-            }
-        }
-        if (change) {
-            this.checkPushBack();
-        }
-    }
-    push(gridsterItem, direction) {
-        const gridsterItemCollision = this.gridster.checkCollision(gridsterItem.$item);
-        if (gridsterItemCollision && gridsterItemCollision !== true &&
-            gridsterItemCollision !== this.gridsterItem && gridsterItemCollision.canBeResized()) {
-            if (this.tryPattern[direction].call(this, gridsterItemCollision, gridsterItem, direction)) {
-                return true;
-            }
-        }
-        else if (gridsterItemCollision === false) {
-            return true;
-        }
-        return false;
-    }
-    trySouth(gridsterItemCollide, gridsterItem, direction) {
-        const backUpY = gridsterItemCollide.$item.y;
-        const backUpRows = gridsterItemCollide.$item.rows;
-        gridsterItemCollide.$item.y = gridsterItem.$item.y + gridsterItem.$item.rows;
-        gridsterItemCollide.$item.rows = backUpRows + backUpY - gridsterItemCollide.$item.y;
-        if (!GridsterComponent.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item)
-            && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-            gridsterItemCollide.setSize();
-            this.addToPushed(gridsterItemCollide);
-            this.push(gridsterItem, direction);
-            return true;
-        }
-        else {
-            gridsterItemCollide.$item.y = backUpY;
-            gridsterItemCollide.$item.rows = backUpRows;
-        }
-        return false;
-    }
-    tryNorth(gridsterItemCollide, gridsterItem, direction) {
-        const backUpRows = gridsterItemCollide.$item.rows;
-        gridsterItemCollide.$item.rows = gridsterItem.$item.y - gridsterItemCollide.$item.y;
-        if (!GridsterComponent.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item)
-            && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-            gridsterItemCollide.setSize();
-            this.addToPushed(gridsterItemCollide);
-            this.push(gridsterItem, direction);
-            return true;
-        }
-        else {
-            gridsterItemCollide.$item.rows = backUpRows;
-        }
-        return false;
-    }
-    tryEast(gridsterItemCollide, gridsterItem, direction) {
-        const backUpX = gridsterItemCollide.$item.x;
-        const backUpCols = gridsterItemCollide.$item.cols;
-        gridsterItemCollide.$item.x = gridsterItem.$item.x + gridsterItem.$item.cols;
-        gridsterItemCollide.$item.cols = backUpCols + backUpX - gridsterItemCollide.$item.x;
-        if (!GridsterComponent.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item)
-            && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-            gridsterItemCollide.setSize();
-            this.addToPushed(gridsterItemCollide);
-            this.push(gridsterItem, direction);
-            return true;
-        }
-        else {
-            gridsterItemCollide.$item.x = backUpX;
-            gridsterItemCollide.$item.cols = backUpCols;
-        }
-        return false;
-    }
-    tryWest(gridsterItemCollide, gridsterItem, direction) {
-        const backUpCols = gridsterItemCollide.$item.cols;
-        gridsterItemCollide.$item.cols = gridsterItem.$item.x - gridsterItemCollide.$item.x;
-        if (!GridsterComponent.checkCollisionTwoItems(gridsterItemCollide.$item, gridsterItem.$item)
-            && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-            gridsterItemCollide.setSize();
-            this.addToPushed(gridsterItemCollide);
-            this.push(gridsterItem, direction);
-            return true;
-        }
-        else {
-            gridsterItemCollide.$item.cols = backUpCols;
-        }
-        return false;
-    }
-    addToPushed(gridsterItem) {
-        if (this.pushedItems.indexOf(gridsterItem) < 0) {
-            this.pushedItems.push(gridsterItem);
-            this.pushedItemsPath.push([
-                {
-                    x: gridsterItem.item.x || 0,
-                    y: gridsterItem.item.y || 0,
-                    cols: gridsterItem.item.cols || 0,
-                    rows: gridsterItem.item.rows || 0
-                },
-                {
-                    x: gridsterItem.$item.x,
-                    y: gridsterItem.$item.y,
-                    cols: gridsterItem.$item.cols,
-                    rows: gridsterItem.$item.rows
-                }
-            ]);
-        }
-        else {
-            const i = this.pushedItems.indexOf(gridsterItem);
-            this.pushedItemsPath[i].push({
-                x: gridsterItem.$item.x,
-                y: gridsterItem.$item.y,
-                cols: gridsterItem.$item.cols,
-                rows: gridsterItem.$item.rows
-            });
-        }
-    }
-    removeFromPushed(i) {
-        if (i > -1) {
-            this.pushedItems.splice(i, 1);
-            this.pushedItemsPath.splice(i, 1);
-        }
-    }
-    checkPushedItem(pushedItem, i) {
-        const path = this.pushedItemsPath[i];
-        let j = path.length - 2;
-        let lastPosition, x, y, cols, rows;
-        for (; j > -1; j--) {
-            lastPosition = path[j];
-            x = pushedItem.$item.x;
-            y = pushedItem.$item.y;
-            cols = pushedItem.$item.cols;
-            rows = pushedItem.$item.rows;
-            pushedItem.$item.x = lastPosition.x;
-            pushedItem.$item.y = lastPosition.y;
-            pushedItem.$item.cols = lastPosition.cols;
-            pushedItem.$item.rows = lastPosition.rows;
-            if (!this.gridster.findItemWithItem(pushedItem.$item)) {
-                pushedItem.setSize();
-                path.splice(j + 1, path.length - 1 - j);
-            }
-            else {
-                pushedItem.$item.x = x;
-                pushedItem.$item.y = y;
-                pushedItem.$item.cols = cols;
-                pushedItem.$item.rows = rows;
-            }
-        }
-        if (path.length < 2) {
-            this.removeFromPushed(i);
-            return true;
-        }
-        return false;
-    }
-};
-GridsterPushResize.ctorParameters = () => [
-    { type: GridsterItemComponentInterface }
-];
-GridsterPushResize = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [GridsterItemComponentInterface])
-], GridsterPushResize);
-
-let GridsterResizable = class GridsterResizable {
-    constructor(gridsterItem, gridster, zone) {
-        this.zone = zone;
-        this.gridsterItem = gridsterItem;
-        this.gridster = gridster;
-        this.lastMouse = {
-            clientX: 0,
-            clientY: 0
-        };
-        this.itemBackup = [0, 0, 0, 0];
-        this.resizeEventScrollType = { w: false, e: false, n: false, s: false };
-    }
-    destroy() {
-        if (this.gridster.previewStyle) {
-            this.gridster.previewStyle();
-        }
-        delete this.gridsterItem;
-        delete this.gridster;
-    }
-    dragStart(e) {
-        switch (e.which) {
-            case 1:
-                // left mouse button
-                break;
-            case 2:
-            case 3:
-                // right or middle mouse button
-                return;
-        }
-        if (this.gridster.options.resizable && this.gridster.options.resizable.start) {
-            this.gridster.options.resizable.start(this.gridsterItem.item, this.gridsterItem, e);
-        }
-        e.stopPropagation();
-        e.preventDefault();
-        this.dragFunction = this.dragMove.bind(this);
-        this.dragStopFunction = this.dragStop.bind(this);
-        this.zone.runOutsideAngular(() => {
-            this.mousemove = this.gridsterItem.renderer.listen('document', 'mousemove', this.dragFunction);
-            this.touchmove = this.gridster.renderer.listen(this.gridster.el, 'touchmove', this.dragFunction);
-        });
-        this.mouseup = this.gridsterItem.renderer.listen('document', 'mouseup', this.dragStopFunction);
-        this.mouseleave = this.gridsterItem.renderer.listen('document', 'mouseleave', this.dragStopFunction);
-        this.cancelOnBlur = this.gridsterItem.renderer.listen('window', 'blur', this.dragStopFunction);
-        this.touchend = this.gridsterItem.renderer.listen('document', 'touchend', this.dragStopFunction);
-        this.touchcancel = this.gridsterItem.renderer.listen('document', 'touchcancel', this.dragStopFunction);
-        this.gridsterItem.renderer.addClass(this.gridsterItem.el, 'gridster-item-resizing');
-        this.lastMouse.clientX = e.clientX;
-        this.lastMouse.clientY = e.clientY;
-        this.left = this.gridsterItem.left;
-        this.top = this.gridsterItem.top;
-        this.width = this.gridsterItem.width;
-        this.height = this.gridsterItem.height;
-        this.bottom = this.gridsterItem.top + this.gridsterItem.height;
-        this.right = this.gridsterItem.left + this.gridsterItem.width;
-        this.margin = this.gridster.$options.margin;
-        this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-        this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-        this.diffLeft = e.clientX + this.offsetLeft - this.left;
-        this.diffRight = e.clientX + this.offsetLeft - this.right;
-        this.diffTop = e.clientY + this.offsetTop - this.top;
-        this.diffBottom = e.clientY + this.offsetTop - this.bottom;
-        this.minHeight = this.gridster.positionYToPixels(this.gridsterItem.$item.minItemRows || this.gridster.$options.minItemRows)
-            - this.margin;
-        this.minWidth = this.gridster.positionXToPixels(this.gridsterItem.$item.minItemCols || this.gridster.$options.minItemCols)
-            - this.margin;
-        this.gridster.movingItem = this.gridsterItem.$item;
-        this.gridster.previewStyle();
-        this.push = new GridsterPush(this.gridsterItem);
-        this.pushResize = new GridsterPushResize(this.gridsterItem);
-        this.gridster.dragInProgress = true;
-        this.gridster.updateGrid();
-        if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-n') > -1) {
-            this.resizeEventScrollType.n = true;
-            this.directionFunction = this.handleN;
-        }
-        else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-w') > -1) {
-            this.resizeEventScrollType.w = true;
-            this.directionFunction = this.handleW;
-        }
-        else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-s') > -1) {
-            this.resizeEventScrollType.s = true;
-            this.directionFunction = this.handleS;
-        }
-        else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-e') > -1) {
-            this.resizeEventScrollType.e = true;
-            this.directionFunction = this.handleE;
-        }
-        else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-nw') > -1) {
-            this.resizeEventScrollType.n = true;
-            this.resizeEventScrollType.w = true;
-            this.directionFunction = this.handleNW;
-        }
-        else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-ne') > -1) {
-            this.resizeEventScrollType.n = true;
-            this.resizeEventScrollType.e = true;
-            this.directionFunction = this.handleNE;
-        }
-        else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-sw') > -1) {
-            this.resizeEventScrollType.s = true;
-            this.resizeEventScrollType.w = true;
-            this.directionFunction = this.handleSW;
-        }
-        else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-se') > -1) {
-            this.resizeEventScrollType.s = true;
-            this.resizeEventScrollType.e = true;
-            this.directionFunction = this.handleSE;
-        }
-    }
-    dragMove(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        GridsterUtils.checkTouchEvent(e);
-        this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-        this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-        scroll(this.gridster, this.left, this.top, this.width, this.height, e, this.lastMouse, this.directionFunction.bind(this), true, this.resizeEventScrollType);
-        this.directionFunction(e);
-        this.lastMouse.clientX = e.clientX;
-        this.lastMouse.clientY = e.clientY;
-        this.zone.run(() => {
-            this.gridster.updateGrid();
-        });
-    }
-    dragStop(e) {
-        e.stopPropagation();
-        e.preventDefault();
-        cancelScroll();
-        this.mousemove();
-        this.mouseup();
-        this.mouseleave();
-        this.cancelOnBlur();
-        this.touchmove();
-        this.touchend();
-        this.touchcancel();
-        this.gridster.dragInProgress = false;
-        this.gridster.updateGrid();
-        if (this.gridster.options.resizable && this.gridster.options.resizable.stop) {
-            Promise.resolve(this.gridster.options.resizable.stop(this.gridsterItem.item, this.gridsterItem, e))
-                .then(this.makeResize.bind(this), this.cancelResize.bind(this));
-        }
-        else {
-            this.makeResize();
-        }
-        setTimeout(() => {
-            this.gridsterItem.renderer.removeClass(this.gridsterItem.el, 'gridster-item-resizing');
-            if (this.gridster) {
-                this.gridster.movingItem = null;
-                this.gridster.previewStyle();
-            }
-        });
-    }
-    cancelResize() {
-        this.gridsterItem.$item.cols = this.gridsterItem.item.cols || 1;
-        this.gridsterItem.$item.rows = this.gridsterItem.item.rows || 1;
-        this.gridsterItem.$item.x = this.gridsterItem.item.x || 0;
-        this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
-        this.gridsterItem.setSize();
-        this.push.restoreItems();
-        this.pushResize.restoreItems();
-        this.push.destroy();
-        delete this.push;
-        this.pushResize.destroy();
-        delete this.pushResize;
-    }
-    makeResize() {
-        this.gridsterItem.setSize();
-        this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.gridsterItem.item);
-        this.push.setPushedItems();
-        this.pushResize.setPushedItems();
-        this.push.destroy();
-        delete this.push;
-        this.pushResize.destroy();
-        delete this.pushResize;
-    }
-    handleN(e) {
-        this.top = e.clientY + this.offsetTop - this.diffTop;
-        this.height = this.bottom - this.top;
-        if (this.minHeight > this.height) {
-            this.height = this.minHeight;
-            this.top = this.bottom - this.minHeight;
-        }
-        this.newPosition = this.gridster.pixelsToPositionY(this.top + this.margin, Math.floor);
-        if (this.gridsterItem.$item.y !== this.newPosition) {
-            this.itemBackup[1] = this.gridsterItem.$item.y;
-            this.itemBackup[3] = this.gridsterItem.$item.rows;
-            this.gridsterItem.$item.rows += this.gridsterItem.$item.y - this.newPosition;
-            this.gridsterItem.$item.y = this.newPosition;
-            this.pushResize.pushItems(this.pushResize.fromSouth);
-            this.push.pushItems(this.push.fromSouth, this.gridster.$options.disablePushOnResize);
-            if (this.gridster.checkCollision(this.gridsterItem.$item)) {
-                this.gridsterItem.$item.y = this.itemBackup[1];
-                this.gridsterItem.$item.rows = this.itemBackup[3];
-                this.setItemTop(this.gridster.positionYToPixels(this.gridsterItem.$item.y));
-                this.setItemHeight(this.gridster.positionYToPixels(this.gridsterItem.$item.rows) - this.margin);
-                return;
-            }
-            else {
-                this.gridster.previewStyle();
-            }
-            this.pushResize.checkPushBack();
-            this.push.checkPushBack();
-        }
-        this.setItemTop(this.top);
-        this.setItemHeight(this.height);
-    }
-    handleW(e) {
-        this.left = e.clientX + this.offsetLeft - this.diffLeft;
-        this.width = this.right - this.left;
-        if (this.minWidth > this.width) {
-            this.width = this.minWidth;
-            this.left = this.right - this.minWidth;
-        }
-        this.newPosition = this.gridster.pixelsToPositionX(this.left + this.margin, Math.floor);
-        if (this.gridsterItem.$item.x !== this.newPosition) {
-            this.itemBackup[0] = this.gridsterItem.$item.x;
-            this.itemBackup[2] = this.gridsterItem.$item.cols;
-            this.gridsterItem.$item.cols += this.gridsterItem.$item.x - this.newPosition;
-            this.gridsterItem.$item.x = this.newPosition;
-            this.pushResize.pushItems(this.pushResize.fromEast);
-            this.push.pushItems(this.push.fromEast, this.gridster.$options.disablePushOnResize);
-            if (this.gridster.checkCollision(this.gridsterItem.$item)) {
-                this.gridsterItem.$item.x = this.itemBackup[0];
-                this.gridsterItem.$item.cols = this.itemBackup[2];
-                this.setItemLeft(this.gridster.positionXToPixels(this.gridsterItem.$item.x));
-                this.setItemWidth(this.gridster.positionXToPixels(this.gridsterItem.$item.cols) - this.margin);
-                return;
-            }
-            else {
-                this.gridster.previewStyle();
-            }
-            this.pushResize.checkPushBack();
-            this.push.checkPushBack();
-        }
-        this.setItemLeft(this.left);
-        this.setItemWidth(this.width);
-    }
-    handleS(e) {
-        this.height = e.clientY + this.offsetTop - this.diffBottom - this.top;
-        if (this.minHeight > this.height) {
-            this.height = this.minHeight;
-        }
-        this.bottom = this.top + this.height;
-        this.newPosition = this.gridster.pixelsToPositionY(this.bottom, Math.ceil);
-        if ((this.gridsterItem.$item.y + this.gridsterItem.$item.rows) !== this.newPosition) {
-            this.itemBackup[3] = this.gridsterItem.$item.rows;
-            this.gridsterItem.$item.rows = this.newPosition - this.gridsterItem.$item.y;
-            this.pushResize.pushItems(this.pushResize.fromNorth);
-            this.push.pushItems(this.push.fromNorth, this.gridster.$options.disablePushOnResize);
-            if (this.gridster.checkCollision(this.gridsterItem.$item)) {
-                this.gridsterItem.$item.rows = this.itemBackup[3];
-                this.setItemHeight(this.gridster.positionYToPixels(this.gridsterItem.$item.rows) - this.margin);
-                return;
-            }
-            else {
-                this.gridster.previewStyle();
-            }
-            this.pushResize.checkPushBack();
-            this.push.checkPushBack();
-        }
-        this.setItemHeight(this.height);
-    }
-    handleE(e) {
-        this.width = e.clientX + this.offsetLeft - this.diffRight - this.left;
-        if (this.minWidth > this.width) {
-            this.width = this.minWidth;
-        }
-        this.right = this.left + this.width;
-        this.newPosition = this.gridster.pixelsToPositionX(this.right, Math.ceil);
-        if ((this.gridsterItem.$item.x + this.gridsterItem.$item.cols) !== this.newPosition) {
-            this.itemBackup[2] = this.gridsterItem.$item.cols;
-            this.gridsterItem.$item.cols = this.newPosition - this.gridsterItem.$item.x;
-            this.pushResize.pushItems(this.pushResize.fromWest);
-            this.push.pushItems(this.push.fromWest, this.gridster.$options.disablePushOnResize);
-            if (this.gridster.checkCollision(this.gridsterItem.$item)) {
-                this.gridsterItem.$item.cols = this.itemBackup[2];
-                this.setItemWidth(this.gridster.positionXToPixels(this.gridsterItem.$item.cols) - this.margin);
-                return;
-            }
-            else {
-                this.gridster.previewStyle();
-            }
-            this.pushResize.checkPushBack();
-            this.push.checkPushBack();
-        }
-        this.setItemWidth(this.width);
-    }
-    handleNW(e) {
-        this.handleN(e);
-        this.handleW(e);
-    }
-    handleNE(e) {
-        this.handleN(e);
-        this.handleE(e);
-    }
-    handleSW(e) {
-        this.handleS(e);
-        this.handleW(e);
-    }
-    handleSE(e) {
-        this.handleS(e);
-        this.handleE(e);
-    }
-    toggle() {
-        this.resizeEnabled = this.gridsterItem.canBeResized();
-    }
-    dragStartDelay(e) {
-        GridsterUtils.checkTouchEvent(e);
-        if (!this.gridster.$options.resizable.delayStart) {
-            this.dragStart(e);
-            return;
-        }
-        const timeout = setTimeout(() => {
-            this.dragStart(e);
-            cancelDrag();
-        }, this.gridster.$options.resizable.delayStart);
-        const cancelMouse = this.gridsterItem.renderer.listen('document', 'mouseup', cancelDrag);
-        const cancelMouseLeave = this.gridsterItem.renderer.listen('document', 'mouseleave', cancelDrag);
-        const cancelOnBlur = this.gridsterItem.renderer.listen('window', 'blur', cancelDrag);
-        const cancelTouchMove = this.gridsterItem.renderer.listen('document', 'touchmove', cancelMove);
-        const cancelTouchEnd = this.gridsterItem.renderer.listen('document', 'touchend', cancelDrag);
-        const cancelTouchCancel = this.gridsterItem.renderer.listen('document', 'touchcancel', cancelDrag);
-        function cancelMove(eventMove) {
-            GridsterUtils.checkTouchEvent(eventMove);
-            if (Math.abs(eventMove.clientX - e.clientX) > 9 || Math.abs(eventMove.clientY - e.clientY) > 9) {
-                cancelDrag();
-            }
-        }
-        function cancelDrag() {
-            clearTimeout(timeout);
-            cancelOnBlur();
-            cancelMouse();
-            cancelMouseLeave();
-            cancelTouchMove();
-            cancelTouchEnd();
-            cancelTouchCancel();
-        }
-    }
-    setItemTop(top) {
-        this.gridster.gridRenderer.setCellPosition(this.gridsterItem.renderer, this.gridsterItem.el, this.left, top);
-    }
-    setItemLeft(left) {
-        this.gridster.gridRenderer.setCellPosition(this.gridsterItem.renderer, this.gridsterItem.el, left, this.top);
-    }
-    setItemHeight(height) {
-        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', height + 'px');
-    }
-    setItemWidth(width) {
-        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', width + 'px');
-    }
-};
-GridsterResizable.ctorParameters = () => [
-    { type: GridsterItemComponentInterface },
-    { type: GridsterComponentInterface },
-    { type: NgZone }
-];
-GridsterResizable = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [GridsterItemComponentInterface, GridsterComponentInterface, NgZone])
-], GridsterResizable);
-
-let GridsterItemComponent = class GridsterItemComponent {
-    constructor(el, gridster, renderer, zone) {
-        this.renderer = renderer;
-        this.zone = zone;
-        this.el = el.nativeElement;
-        this.$item = {
-            cols: -1,
-            rows: -1,
-            x: -1,
-            y: -1,
-        };
-        this.gridster = gridster;
-        this.drag = new GridsterDraggable(this, gridster, this.zone);
-        this.resize = new GridsterResizable(this, gridster, this.zone);
-    }
-    ngOnInit() {
-        this.updateOptions();
-        this.gridster.addItem(this);
-    }
-    updateOptions() {
-        this.$item = GridsterUtils.merge(this.$item, this.item, {
-            cols: undefined,
-            rows: undefined,
-            x: undefined,
-            y: undefined,
-            dragEnabled: undefined,
-            resizeEnabled: undefined,
-            compactEnabled: undefined,
-            maxItemRows: undefined,
-            minItemRows: undefined,
-            maxItemCols: undefined,
-            minItemCols: undefined,
-            maxItemArea: undefined,
-            minItemArea: undefined,
-        });
-    }
-    ngOnDestroy() {
-        this.gridster.removeItem(this);
-        this.gridster.movingItem = null;
-        delete this.gridster;
-        this.drag.destroy();
-        delete this.drag;
-        this.resize.destroy();
-        delete this.resize;
-    }
-    setSize() {
-        this.renderer.setStyle(this.el, 'display', this.notPlaced ? '' : 'block');
-        this.gridster.gridRenderer.updateItem(this.el, this.$item, this.renderer);
-        this.updateItemSize();
-    }
-    updateItemSize() {
-        const top = this.$item.y * this.gridster.curRowHeight;
-        const left = this.$item.x * this.gridster.curColWidth;
-        const width = this.$item.cols * this.gridster.curColWidth - this.gridster.$options.margin;
-        const height = this.$item.rows * this.gridster.curRowHeight - this.gridster.$options.margin;
-        if (!this.init && width > 0 && height > 0) {
-            this.init = true;
-            if (this.item.initCallback) {
-                this.item.initCallback(this.item, this);
-            }
-            if (this.gridster.options.itemInitCallback) {
-                this.item.curRowHeight = this.gridster.curRowHeight;
-                this.gridster.options.itemInitCallback(this.item, this);
-            }
-            if (this.gridster.$options.scrollToNewItems) {
-                this.el.scrollIntoView(false);
-            }
-        }
-        if (width !== this.width || height !== this.height) {
-            this.width = width;
-            this.height = height;
-            if (this.gridster.options.itemResizeCallback) {
-                this.gridster.options.itemResizeCallback(this.item, this);
-            }
-        }
-        this.top = top;
-        this.left = left;
-    }
-    itemChanged() {
-        if (this.gridster.options.itemChangeCallback) {
-            this.item.curRowHeight = this.gridster.curRowHeight;
-            this.gridster.options.itemChangeCallback(this.item, this);
-        }
-    }
-    checkItemChanges(newValue, oldValue) {
-        if (newValue.rows === oldValue.rows && newValue.cols === oldValue.cols && newValue.x === oldValue.x && newValue.y === oldValue.y) {
-            return;
-        }
-        if (this.gridster.checkCollision(this.$item)) {
-            this.$item.x = oldValue.x || 0;
-            this.$item.y = oldValue.y || 0;
-            this.$item.cols = oldValue.cols || 1;
-            this.$item.rows = oldValue.rows || 1;
-            this.setSize();
-        }
-        else {
-            this.item.cols = this.$item.cols;
-            this.item.rows = this.$item.rows;
-            this.item.x = this.$item.x;
-            this.item.y = this.$item.y;
-            this.gridster.calculateLayoutDebounce();
-            this.itemChanged();
-        }
-    }
-    canBeDragged() {
-        return !this.gridster.mobile &&
-            (this.$item.dragEnabled === undefined ? this.gridster.$options.draggable.enabled : this.$item.dragEnabled);
-    }
-    canBeResized() {
-        return !this.gridster.mobile &&
-            (this.$item.resizeEnabled === undefined ? this.gridster.$options.resizable.enabled : this.$item.resizeEnabled);
-    }
-};
-GridsterItemComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: GridsterComponent, decorators: [{ type: Host }] },
-    { type: Renderer2 },
-    { type: NgZone }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], GridsterItemComponent.prototype, "item", void 0);
-GridsterItemComponent = __decorate([
-    Component({
-        selector: 'gridster-item',
-        template: "<ng-content></ng-content>\r\n<div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"\r\n     [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"\r\n     class=\"gridster-item-resizable-handler handle-s\"></div>\r\n<div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"\r\n     [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"\r\n     class=\"gridster-item-resizable-handler handle-e\"></div>\r\n<div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"\r\n     [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"\r\n     class=\"gridster-item-resizable-handler handle-n\"></div>\r\n<div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"\r\n     [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"\r\n     class=\"gridster-item-resizable-handler handle-w\"></div>\r\n<div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"\r\n     [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"\r\n     class=\"gridster-item-resizable-handler handle-se\"></div>\r\n<div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"\r\n     [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"\r\n     class=\"gridster-item-resizable-handler handle-ne\"></div>\r\n<div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"\r\n     [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"\r\n     class=\"gridster-item-resizable-handler handle-sw\"></div>\r\n<div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"\r\n     [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"\r\n     class=\"gridster-item-resizable-handler handle-nw\"></div>\r\n",
-        encapsulation: ViewEncapsulation.None,
-        styles: ["gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;user-select:text}gridster-item.gridster-item-moving{cursor:move}gridster-item.gridster-item-moving,gridster-item.gridster-item-resizing{transition:none;z-index:2;box-shadow:0 0 5px 5px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.gridster-item-resizable-handler{position:absolute;z-index:2}.gridster-item-resizable-handler.handle-n{cursor:n-resize;height:10px;right:0;top:0;left:0}.gridster-item-resizable-handler.handle-e{cursor:e-resize;width:10px;bottom:0;right:0;top:0}.gridster-item-resizable-handler.handle-s{cursor:s-resize;height:10px;right:0;bottom:0;left:0}.gridster-item-resizable-handler.handle-w{cursor:w-resize;width:10px;left:0;top:0;bottom:0}.gridster-item-resizable-handler.handle-ne{cursor:ne-resize;width:10px;height:10px;right:0;top:0}.gridster-item-resizable-handler.handle-nw{cursor:nw-resize;width:10px;height:10px;left:0;top:0}.gridster-item-resizable-handler.handle-se{cursor:se-resize;width:0;height:0;right:0;bottom:0;border-style:solid;border-width:0 0 10px 10px;border-color:transparent}.gridster-item-resizable-handler.handle-sw{cursor:sw-resize;width:10px;height:10px;left:0;bottom:0}gridster-item:hover .gridster-item-resizable-handler.handle-se{border-color:transparent transparent #ccc}"]
-    }),
-    __param(1, Host()),
-    __metadata("design:paramtypes", [ElementRef, GridsterComponent, Renderer2, NgZone])
-], GridsterItemComponent);
-
-let GridsterPreviewComponent = class GridsterPreviewComponent {
-    constructor(el, gridster, renderer) {
-        this.renderer = renderer;
-        this.el = el.nativeElement;
-        this.gridster = gridster;
-        this.gridster.previewStyle = this.previewStyle.bind(this);
-    }
-    ngOnDestroy() {
-        delete this.el;
-        delete this.gridster.previewStyle;
-        delete this.gridster;
-    }
-    previewStyle(drag) {
-        if (!this.gridster.movingItem) {
-            this.renderer.setStyle(this.el, 'display', '');
-        }
-        else {
-            if (this.gridster.compact && drag) {
-                this.gridster.compact.checkCompactItem(this.gridster.movingItem);
-            }
-            this.renderer.setStyle(this.el, 'display', 'block');
-            this.gridster.gridRenderer.updateItem(this.el, this.gridster.movingItem, this.renderer);
-        }
-    }
-};
-GridsterPreviewComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: GridsterComponent, decorators: [{ type: Host }] },
-    { type: Renderer2 }
-];
-GridsterPreviewComponent = __decorate([
-    Component({
-        selector: 'gridster-preview',
-        template: '',
-        encapsulation: ViewEncapsulation.None,
-        styles: ["gridster-preview{position:absolute;display:none;background:#42b4e6}"]
-    }),
-    __param(1, Host()),
-    __metadata("design:paramtypes", [ElementRef, GridsterComponent, Renderer2])
-], GridsterPreviewComponent);
-
-let GridsterModule = class GridsterModule {
-};
-GridsterModule = __decorate([
-    NgModule({
-        declarations: [
-            GridsterComponent,
-            GridsterItemComponent,
-            GridsterPreviewComponent
-        ],
-        imports: [
-            CommonModule
-        ],
-        exports: [GridsterComponent, GridsterItemComponent],
-        providers: [],
-        bootstrap: []
-    })
-], GridsterModule);
-
-let DashboardFrameworkModule = class DashboardFrameworkModule {
-};
-DashboardFrameworkModule = __decorate([
-    NgModule({
-        declarations: [
-            RADashboardArea,
-            RAWidgetContainer,
-            LockTooltip
-        ],
-        imports: [
-            BrowserModule,
-            GridsterModule,
-            HttpClientModule,
-            NgxUiLoaderModule,
-            NotifierModule.withConfig(customNotifierOptions),
-            RACommonModule,
-            RAUserControlModule,
-            RACommonControlsModule
-        ],
-        exports: [
-            RADashboardArea
-        ],
-        bootstrap: [RADashboardArea],
-        entryComponents: [
-            LockTooltip
-        ]
-    })
-], DashboardFrameworkModule);
-
-class RaBaseDashboardTemplate {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.initialize = (eventBus, userDashboardId, appConfig, isIndicatorDashboard) => {
-            this.ngZone.run(() => {
-                this.userDashboardId = userDashboardId;
-                this.appConfig = appConfig;
-                this.raDashboardEventBus = eventBus;
-                this.isIndicatorDashboard = isIndicatorDashboard;
-            });
-            this.init();
-        };
-    }
-    ngOnInit() {
-        var myEvent = new CustomEvent("event-template-initiated");
-        document.body.dispatchEvent(myEvent);
-    }
-}
-__decorate([
-    Input('dashboard-id'),
-    __metadata("design:type", Number)
-], RaBaseDashboardTemplate.prototype, "dashboardId", void 0);
-__decorate([
-    Input('global-filter'),
-    __metadata("design:type", Object)
-], RaBaseDashboardTemplate.prototype, "globalFilter", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], RaBaseDashboardTemplate.prototype, "initialize", void 0);
-
-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);
-        };
-        this.showOnlyDateRangeControl = (isIndicatorDashboard) => {
-            debugger;
-            this.showDateRangeControl(isIndicatorDashboard);
-        };
-    }
-    ngOnInit() {
-        var myEvent = new CustomEvent("global-filter-initiated");
-        document.body.dispatchEvent(myEvent);
-    }
-}
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], RaBaseDashboardFilter.prototype, "getAllFilterConfig", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], RaBaseDashboardFilter.prototype, "setInapplicableFilterMsg", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], RaBaseDashboardFilter.prototype, "isValidEntry", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], RaBaseDashboardFilter.prototype, "clearAllData", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], RaBaseDashboardFilter.prototype, "setAllFilterConfig", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], RaBaseDashboardFilter.prototype, "showOnlyDateRangeControl", void 0);
-
-/*
- * Public API Surface of ra-dashboard-framework
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DashboardFrameworkModule, RADashboardArea, RADashboardEventBus, RADashboardResponsiveService, RAEvent, RAEventKey, RAWidgetContainer, RaBaseDashboardFilter, RaBaseDashboardTemplate, RaDashboardService, LockTooltip as ɵa, GridsterModule as ɵb, GridsterComponent as ɵc, GridsterItemComponent as ɵd, GridsterPreviewComponent as ɵe, customNotifierOptions as ɵf };
-//# sourceMappingURL=schneideress-dashboardframework.js.map