@schneideress/dashboardframework 0.0.147 → 0.0.149

package/esm5/lib/ra.dashboard.responsive.service.js

@@ -0,0 +1,180 @@
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/ra.dashboard.responsive.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+import { Injectable } from '@angular/core';
+import { GridsterConfigDefaultSettings } from './ra.gridster.config';
+import * as i0 from "@angular/core";
+/** @type {?} */
+var DesktopViewStart = 1367;
+/** @type {?} */
+var GridLockViewEnd = 1024;
+var RADashboardResponsiveService = /** @class */ (function () {
+    function RADashboardResponsiveService() {
+        var _this = this;
+        this.resInfo = [
+            { 'start': 0, 'end': 767, 'minCols': 1, 'maxCols': 1 },
+            { 'start': 768, 'end': GridLockViewEnd, 'minCols': 1, 'maxCols': 2 },
+            { 'start': GridLockViewEnd + 1, 'end': DesktopViewStart - 1, 'minCols': 2, 'maxCols': 6 },
+            { 'start': DesktopViewStart, 'end': 9999999999, 'minCols': 2, 'maxCols': 10 }
+        ];
+        this.setScreenWidth();
+        window.addEventListener('resize', (/**
+         * @return {?}
+         */
+        function () {
+            _this.setScreenWidth();
+        }));
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    RADashboardResponsiveService.prototype.setScreenWidth = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.screenWidth = screen.width;
+        this.currentResInfo = this.resInfo.filter((/**
+         * @param {?} item
+         * @return {?}
+         */
+        function (item) {
+            return item.end >= _this.screenWidth && item.start <= _this.screenWidth;
+        }))[0];
+    };
+    Object.defineProperty(RADashboardResponsiveService.prototype, "IsDesktopView", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.screenWidth >= DesktopViewStart;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(RADashboardResponsiveService.prototype, "IsGridLocked", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.screenWidth <= GridLockViewEnd;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(RADashboardResponsiveService.prototype, "GridsterConfig", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var 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) {
+                config.resizable.enabled = false;
+                config.swap = false;
+                config.draggable.enabled = false;
+            }
+            return config;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**To map IwidgetInfo object to gridsterItem */
+    /**
+     * To map IwidgetInfo object to gridsterItem
+     * @param {?} widget
+     * @return {?}
+     */
+    RADashboardResponsiveService.prototype.getGridsterItem = /**
+     * To map IwidgetInfo object to gridsterItem
+     * @param {?} widget
+     * @return {?}
+     */
+    function (widget) {
+        /** @type {?} */
+        var gridsterItem = (/** @type {?} */ ({
+            cols: this.getWidth(widget.width),
+            rows: this.getHeight(widget.height),
+            x: this.IsDesktopView ? widget.position_x : 0,
+            y: this.IsDesktopView ? widget.position_y : 0,
+            isInitialized: widget.isInitialized,
+            widgetInfo: widget
+        }));
+        return gridsterItem;
+    };
+    /**
+     * @private
+     * @param {?} width
+     * @return {?}
+     */
+    RADashboardResponsiveService.prototype.getWidth = /**
+     * @private
+     * @param {?} width
+     * @return {?}
+     */
+    function (width) {
+        if (!this.IsDesktopView) {
+            width = Math.floor(width / 10 * this.currentResInfo.maxCols);
+            if (width < this.currentResInfo.minCols)
+                width = this.currentResInfo.minCols;
+        }
+        return width;
+    };
+    /**
+     * @private
+     * @param {?} height
+     * @return {?}
+     */
+    RADashboardResponsiveService.prototype.getHeight = /**
+     * @private
+     * @param {?} height
+     * @return {?}
+     */
+    function (height) {
+        if (!this.IsDesktopView) {
+            height = Math.floor(height / 10 * this.currentResInfo.maxCols);
+            if (height < this.currentResInfo.minCols)
+                height = this.currentResInfo.minCols;
+        }
+        return height;
+    };
+    RADashboardResponsiveService.decorators = [
+        { type: Injectable, args: [{ providedIn: 'root' },] }
+    ];
+    /** @nocollapse */
+    RADashboardResponsiveService.ctorParameters = function () { return []; };
+    /** @nocollapse */ RADashboardResponsiveService.ngInjectableDef = i0.ɵɵdefineInjectable({ factory: function RADashboardResponsiveService_Factory() { return new RADashboardResponsiveService(); }, token: RADashboardResponsiveService, providedIn: "root" });
+    return RADashboardResponsiveService;
+}());
+export { RADashboardResponsiveService };
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.screenWidth;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.resInfo;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.currentResInfo;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmEuZGFzaGJvYXJkLnJlc3BvbnNpdmUuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzY2huZWlkZXJlc3MvZGFzaGJvYXJkZnJhbWV3b3JrLyIsInNvdXJjZXMiOlsibGliL3JhLmRhc2hib2FyZC5yZXNwb25zaXZlLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTNDLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLHNCQUFzQixDQUFDOzs7SUFHL0QsZ0JBQWdCLEdBQVcsSUFBSTs7SUFDL0IsZUFBZSxHQUFXLElBQUk7QUFFcEM7SUFZSTtRQUFBLGlCQUtDO1FBYk8sWUFBTyxHQUFHO1lBQ2QsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLEtBQUssRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsQ0FBQyxFQUFFO1lBQ3RELEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsZUFBZSxFQUFFLFNBQVMsRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRTtZQUNwRSxFQUFFLE9BQU8sRUFBRSxlQUFlLEdBQUcsQ0FBQyxFQUFFLEtBQUssRUFBRSxnQkFBZ0IsR0FBRyxDQUFDLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsQ0FBQyxFQUFFO1lBQ3pGLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFO1NBQ2hGLENBQUM7UUFJRSxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdEIsTUFBTSxDQUFDLGdCQUFnQixDQUFDLFFBQVE7OztRQUFFO1lBQzlCLEtBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUMxQixDQUFDLEVBQUMsQ0FBQztJQUNQLENBQUM7Ozs7O0lBRU8s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QUcsRUFBRSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDN0QsSUFBSSxLQUFLLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPO2dCQUNuQyxLQUFLLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUM7U0FDM0M7UUFDRCxPQUFPLEtBQUssQ0FBQztJQUNqQixDQUFDOzs7Ozs7SUFDTyxnREFBUzs7Ozs7SUFBakIsVUFBa0IsTUFBYztRQUM1QixJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUNyQixNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsRUFBRSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDL0QsSUFBSSxNQUFNLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPO2dCQUNwQyxNQUFNLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLENBQUM7U0FDNUM7UUFDRCxPQUFPLE1BQU0sQ0FBQztJQUNsQixDQUFDOztnQkFuRkosVUFBVSxTQUFDLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRTs7Ozs7dUNBUmxDO0NBNEZDLEFBcEZELElBb0ZDO1NBbkZZLDRCQUE0Qjs7Ozs7O0lBRXJDLG1EQUE0Qjs7Ozs7SUFDNUIsK0NBS0U7Ozs7O0lBQ0Ysc0RBQTRCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBHcmlkc3RlckNvbmZpZywgR3JpZHN0ZXJJdGVtIH0gZnJvbSAnLi4vZ3JpZHN0ZXInO1xyXG5pbXBvcnQgeyBHcmlkc3RlckNvbmZpZ0RlZmF1bHRTZXR0aW5ncyB9IGZyb20gJy4vcmEuZ3JpZHN0ZXIuY29uZmlnJztcclxuaW1wb3J0IHsgSVdpZGdldEluZm8gfSBmcm9tICdAc2NobmVpZGVyZXNzL3dpZGdldGZyYW1ld29yayc7XHJcblxyXG5jb25zdCBEZXNrdG9wVmlld1N0YXJ0OiBudW1iZXIgPSAxMzY3O1xyXG5jb25zdCBHcmlkTG9ja1ZpZXdFbmQ6IG51bWJlciA9IDEwMjQ7XHJcblxyXG5ASW5qZWN0YWJsZSh7IHByb3ZpZGVkSW46ICdyb290JyB9KVxyXG5leHBvcnQgY2xhc3MgUkFEYXNoYm9hcmRSZXNwb25zaXZlU2VydmljZSB7XHJcblxyXG4gICAgcHJpdmF0ZSBzY3JlZW5XaWR0aDogbnVtYmVyO1xyXG4gICAgcHJpdmF0ZSByZXNJbmZvID0gW1xyXG4gICAgICAgIHsgJ3N0YXJ0JzogMCwgJ2VuZCc6IDc2NywgJ21pbkNvbHMnOiAxLCAnbWF4Q29scyc6IDEgfSxcclxuICAgICAgICB7ICdzdGFydCc6IDc2OCwgJ2VuZCc6IEdyaWRMb2NrVmlld0VuZCwgJ21pbkNvbHMnOiAxLCAnbWF4Q29scyc6IDIgfSxcclxuICAgICAgICB7ICdzdGFydCc6IEdyaWRMb2NrVmlld0VuZCArIDEsICdlbmQnOiBEZXNrdG9wVmlld1N0YXJ0IC0gMSwgJ21pbkNvbHMnOiAyLCAnbWF4Q29scyc6IDYgfSxcclxuICAgICAgICB7ICdzdGFydCc6IERlc2t0b3BWaWV3U3RhcnQsICdlbmQnOiA5OTk5OTk5OTk5LCAnbWluQ29scyc6IDIsICdtYXhDb2xzJzogMTAgfVxyXG4gICAgXTtcclxuICAgIHByaXZhdGUgY3VycmVudFJlc0luZm86IGFueTtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHtcclxuICAgICAgICB0aGlzLnNldFNjcmVlbldpZHRoKCk7XHJcbiAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsICgpID0+IHtcclxuICAgICAgICAgICAgdGhpcy5zZXRTY3JlZW5XaWR0aCgpO1xyXG4gICAgICAgIH0pO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgc2V0U2NyZWVuV2lkdGgoKSB7XHJcbiAgICAgICAgdGhpcy5zY3JlZW5XaWR0aCA9IHNjcmVlbi53aWR0aDtcclxuICAgICAgICB0aGlzLmN1cnJlbnRSZXNJbmZvID0gdGhpcy5yZXNJbmZvLmZpbHRlcigoaXRlbSkgPT4ge1xyXG4gICAgICAgICAgICByZXR1cm4gaXRlbS5lbmQgPj0gdGhpcy5zY3JlZW5XaWR0aCAmJiBpdGVtLnN0YXJ0IDw9IHRoaXMuc2NyZWVuV2lkdGg7XHJcbiAgICAgICAgfSlbMF07XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGdldCBJc0Rlc2t0b3BWaWV3KCk6IGJvb2xlYW4ge1xyXG4gICAgICAgIHJldHVybiB0aGlzLnNjcmVlbldpZHRoID49IERlc2t0b3BWaWV3U3RhcnQ7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGdldCBJc0dyaWRMb2NrZWQoKTogYm9vbGVhbiB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuc2NyZWVuV2lkdGggPD0gR3JpZExvY2tWaWV3RW5kO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBnZXQgR3JpZHN0ZXJDb25maWcoKTogR3JpZHN0ZXJDb25maWcge1xyXG4gICAgICAgIGxldCBjb25maWc6IEdyaWRzdGVyQ29uZmlnID0gR3JpZHN0ZXJDb25maWdEZWZhdWx0U2V0dGluZ3M7XHJcblxyXG4gICAgICAgIGNvbmZpZy5taW5Db2xzID0gdGhpcy5jdXJyZW50UmVzSW5mby5tYXhDb2xzO1xyXG4gICAgICAgIGNvbmZpZy5tYXhDb2xzID0gdGhpcy5jdXJyZW50UmVzSW5mby5tYXhDb2xzO1xyXG4gICAgICAgIGNvbmZpZy5taW5Sb3dzID0gdGhpcy5jdXJyZW50UmVzSW5mby5taW5Db2xzO1xyXG4gICAgICAgIGNvbmZpZy5tYXhJdGVtQ29scyA9IHRoaXMuY3VycmVudFJlc0luZm8ubWF4Q29scztcclxuICAgICAgICBjb25maWcubWluSXRlbUNvbHMgPSB0aGlzLmN1cnJlbnRSZXNJbmZvLm1pbkNvbHM7XHJcbiAgICAgICAgY29uZmlnLm1pbkl0ZW1Sb3dzID0gdGhpcy5jdXJyZW50UmVzSW5mby5taW5Db2xzO1xyXG4gICAgICAgIGNvbmZpZy5taW5JdGVtQXJlYSA9IHRoaXMuY3VycmVudFJlc0luZm8ubWluQ29scyAqIHRoaXMuY3VycmVudFJlc0luZm8ubWluQ29scztcclxuICAgICAgICBjb25maWcuZGVmYXVsdEl0ZW1Db2xzID0gdGhpcy5jdXJyZW50UmVzSW5mby5taW5Db2xzO1xyXG4gICAgICAgIGNvbmZpZy5kZWZhdWx0SXRlbVJvd3MgPSB0aGlzLmN1cnJlbnRSZXNJbmZvLm1pbkNvbHM7XHJcblxyXG4gICAgICAgIGlmICghdGhpcy5Jc0Rlc2t0b3BWaWV3KSB7XHJcbiAgICAgICAgICAgIGNvbmZpZy5yZXNpemFibGUuZW5hYmxlZCA9IGZhbHNlO1xyXG4gICAgICAgICAgICBjb25maWcuc3dhcCA9IGZhbHNlO1xyXG4gICAgICAgICAgICBjb25maWcuZHJhZ2dhYmxlLmVuYWJsZWQgPSBmYWxzZTtcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIGNvbmZpZztcclxuICAgIH1cclxuXHJcbiAgICAvKipUbyBtYXAgSXdpZGdldEluZm8gb2JqZWN0IHRvIGdyaWRzdGVySXRlbSAqL1xyXG4gICAgcHVibGljIGdldEdyaWRzdGVySXRlbSh3aWRnZXQ6IGFueSkge1xyXG4gICAgICAgIGxldCBncmlkc3Rlckl0ZW0gPSA8R3JpZHN0ZXJJdGVtPntcclxuICAgICAgICAgICAgY29sczogdGhpcy5nZXRXaWR0aCh3aWRnZXQud2lkdGgpLFxyXG4gICAgICAgICAgICByb3dzOiB0aGlzLmdldEhlaWdodCh3aWRnZXQuaGVpZ2h0KSxcclxuICAgICAgICAgICAgeDogdGhpcy5Jc0Rlc2t0b3BWaWV3ID8gd2lkZ2V0LnBvc2l0aW9uX3ggOiAwLFxyXG4gICAgICAgICAgICB5OiB0aGlzLklzRGVza3RvcFZpZXcgPyB3aWRnZXQucG9zaXRpb25feSA6IDAsXHJcbiAgICAgICAgICAgIGlzSW5pdGlhbGl6ZWQ6d2lkZ2V0LmlzSW5pdGlhbGl6ZWQsXHJcbiAgICAgICAgICAgIHdpZGdldEluZm86IHdpZGdldFxyXG4gICAgICAgIH1cclxuICAgICAgICByZXR1cm4gZ3JpZHN0ZXJJdGVtO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgZ2V0V2lkdGgod2lkdGg6IG51bWJlcik6IG51bWJlciB7XHJcbiAgICAgICAgaWYgKCF0aGlzLklzRGVza3RvcFZpZXcpIHtcclxuICAgICAgICAgICAgd2lkdGggPSBNYXRoLmZsb29yKHdpZHRoIC8gMTAgKiB0aGlzLmN1cnJlbnRSZXNJbmZvLm1heENvbHMpO1xyXG4gICAgICAgICAgICBpZiAod2lkdGggPCB0aGlzLmN1cnJlbnRSZXNJbmZvLm1pbkNvbHMpXHJcbiAgICAgICAgICAgICAgICB3aWR0aCA9IHRoaXMuY3VycmVudFJlc0luZm8ubWluQ29scztcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIHdpZHRoO1xyXG4gICAgfVxyXG4gICAgcHJpdmF0ZSBnZXRIZWlnaHQoaGVpZ2h0OiBudW1iZXIpIHtcclxuICAgICAgICBpZiAoIXRoaXMuSXNEZXNrdG9wVmlldykge1xyXG4gICAgICAgICAgICBoZWlnaHQgPSBNYXRoLmZsb29yKGhlaWdodCAvIDEwICogdGhpcy5jdXJyZW50UmVzSW5mby5tYXhDb2xzKTtcclxuICAgICAgICAgICAgaWYgKGhlaWdodCA8IHRoaXMuY3VycmVudFJlc0luZm8ubWluQ29scylcclxuICAgICAgICAgICAgICAgIGhlaWdodCA9IHRoaXMuY3VycmVudFJlc0luZm8ubWluQ29scztcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIGhlaWdodDtcclxuICAgIH1cclxufSJdfQ==

package/esm5/public-api.js

@@ -14,4 +14,5 @@ export { RADashboardEventBus } from './lib/ra.dashbard.event.bus';
 export { RAEvent, RAEventKey } from './lib/ra.event.enum';
 export { RaBaseDashboardTemplate } from './lib/ra.base.dashboard.template';
 export { RaBaseDashboardFilter } from './lib/ra.base.dashboard.filter';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzY2huZWlkZXJlc3MvZGFzaGJvYXJkZnJhbWV3b3JrLyIsInNvdXJjZXMiOlsicHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUlBLG1DQUFjLDRCQUE0QixDQUFDO0FBQzNDLGdDQUFjLDJDQUEyQyxDQUFDO0FBQzFELGtDQUFjLHlEQUF5RCxDQUFDO0FBQ3hFLHlDQUFjLDJCQUEyQixDQUFDO0FBQzFDLG9DQUFjLDZCQUE2QixDQUFDO0FBQzVDLG9DQUFjLHFCQUFxQixDQUFDO0FBQ3BDLHdDQUFjLGtDQUFrQyxDQUFDO0FBQ2pELHNDQUFjLGdDQUFnQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcclxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHJhLWRhc2hib2FyZC1mcmFtZXdvcmtcclxuICovXHJcblxyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5kYXNoYm9hcmQuc2VydmljZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3JhLWRhc2hib2FyZC1hcmVhL3JhLmRhc2hib2FyZC5hcmVhJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvcmEtd2lkZ2V0LWNvbnRhaW5lci9yYS53aWRnZXQuY29udGFpbmVyLmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3JhLmRhc2hib2FyZC5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5kYXNoYmFyZC5ldmVudC5idXMnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5ldmVudC5lbnVtJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvcmEuYmFzZS5kYXNoYm9hcmQudGVtcGxhdGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5iYXNlLmRhc2hib2FyZC5maWx0ZXInOyJdfQ==
+export { RADashboardResponsiveService } from './lib/ra.dashboard.responsive.service';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzY2huZWlkZXJlc3MvZGFzaGJvYXJkZnJhbWV3b3JrLyIsInNvdXJjZXMiOlsicHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUlBLG1DQUFjLDRCQUE0QixDQUFDO0FBQzNDLGdDQUFjLDJDQUEyQyxDQUFDO0FBQzFELGtDQUFjLHlEQUF5RCxDQUFDO0FBQ3hFLHlDQUFjLDJCQUEyQixDQUFDO0FBQzFDLG9DQUFjLDZCQUE2QixDQUFDO0FBQzVDLG9DQUFjLHFCQUFxQixDQUFDO0FBQ3BDLHdDQUFjLGtDQUFrQyxDQUFDO0FBQ2pELHNDQUFjLGdDQUFnQyxDQUFDO0FBQy9DLDZDQUFjLHVDQUF1QyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcclxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIHJhLWRhc2hib2FyZC1mcmFtZXdvcmtcclxuICovXHJcblxyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5kYXNoYm9hcmQuc2VydmljZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3JhLWRhc2hib2FyZC1hcmVhL3JhLmRhc2hib2FyZC5hcmVhJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvcmEtd2lkZ2V0LWNvbnRhaW5lci9yYS53aWRnZXQuY29udGFpbmVyLmNvbXBvbmVudCc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3JhLmRhc2hib2FyZC5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5kYXNoYmFyZC5ldmVudC5idXMnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5ldmVudC5lbnVtJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvcmEuYmFzZS5kYXNoYm9hcmQudGVtcGxhdGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5iYXNlLmRhc2hib2FyZC5maWx0ZXInO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9yYS5kYXNoYm9hcmQucmVzcG9uc2l2ZS5zZXJ2aWNlJztcclxuIl19

package/esm5/schneideress-dashboardframework.js

@@ -6,10 +6,10 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export { RaDashboardService, RADashboardArea, RAWidgetContainer, DashboardFrameworkModule, RADashboardEventBus, RAEvent, RAEventKey, RaBaseDashboardTemplate, RaBaseDashboardFilter } from './public-api';
+export { RaDashboardService, RADashboardArea, RAWidgetContainer, DashboardFrameworkModule, RADashboardEventBus, RAEvent, RAEventKey, RaBaseDashboardTemplate, RaBaseDashboardFilter, RADashboardResponsiveService } from './public-api';
 export { GridsterComponent as ɵb } from './gridster/lib/gridster.component';
 export { GridsterModule as ɵa } from './gridster/lib/gridster.module';
 export { GridsterItemComponent as ɵc } from './gridster/lib/gridsterItem.component';
 export { GridsterPreviewComponent as ɵd } from './gridster/lib/gridsterPreview.component';
 export { customNotifierOptions as ɵe } from './lib/custom.notifier.options';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2NobmVpZGVyZXNzLWRhc2hib2FyZGZyYW1ld29yay5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzY2huZWlkZXJlc3MvZGFzaGJvYXJkZnJhbWV3b3JrLyIsInNvdXJjZXMiOlsic2NobmVpZGVyZXNzLWRhc2hib2FyZGZyYW1ld29yay50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUlBLDJMQUFjLGNBQWMsQ0FBQztBQUU3QixPQUFPLEVBQUMsaUJBQWlCLElBQUksRUFBRSxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDMUUsT0FBTyxFQUFDLGNBQWMsSUFBSSxFQUFFLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNwRSxPQUFPLEVBQUMscUJBQXFCLElBQUksRUFBRSxFQUFDLE1BQU0sdUNBQXVDLENBQUM7QUFDbEYsT0FBTyxFQUFDLHdCQUF3QixJQUFJLEVBQUUsRUFBQyxNQUFNLDBDQUEwQyxDQUFDO0FBQ3hGLE9BQU8sRUFBQyxxQkFBcUIsSUFBSSxFQUFFLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcblxuZXhwb3J0IHtHcmlkc3RlckNvbXBvbmVudCBhcyDJtWJ9IGZyb20gJy4vZ3JpZHN0ZXIvbGliL2dyaWRzdGVyLmNvbXBvbmVudCc7XG5leHBvcnQge0dyaWRzdGVyTW9kdWxlIGFzIMm1YX0gZnJvbSAnLi9ncmlkc3Rlci9saWIvZ3JpZHN0ZXIubW9kdWxlJztcbmV4cG9ydCB7R3JpZHN0ZXJJdGVtQ29tcG9uZW50IGFzIMm1Y30gZnJvbSAnLi9ncmlkc3Rlci9saWIvZ3JpZHN0ZXJJdGVtLmNvbXBvbmVudCc7XG5leHBvcnQge0dyaWRzdGVyUHJldmlld0NvbXBvbmVudCBhcyDJtWR9IGZyb20gJy4vZ3JpZHN0ZXIvbGliL2dyaWRzdGVyUHJldmlldy5jb21wb25lbnQnO1xuZXhwb3J0IHtjdXN0b21Ob3RpZmllck9wdGlvbnMgYXMgybVlfSBmcm9tICcuL2xpYi9jdXN0b20ubm90aWZpZXIub3B0aW9ucyc7Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2NobmVpZGVyZXNzLWRhc2hib2FyZGZyYW1ld29yay5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BzY2huZWlkZXJlc3MvZGFzaGJvYXJkZnJhbWV3b3JrLyIsInNvdXJjZXMiOlsic2NobmVpZGVyZXNzLWRhc2hib2FyZGZyYW1ld29yay50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUlBLHlOQUFjLGNBQWMsQ0FBQztBQUU3QixPQUFPLEVBQUMsaUJBQWlCLElBQUksRUFBRSxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDMUUsT0FBTyxFQUFDLGNBQWMsSUFBSSxFQUFFLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNwRSxPQUFPLEVBQUMscUJBQXFCLElBQUksRUFBRSxFQUFDLE1BQU0sdUNBQXVDLENBQUM7QUFDbEYsT0FBTyxFQUFDLHdCQUF3QixJQUFJLEVBQUUsRUFBQyxNQUFNLDBDQUEwQyxDQUFDO0FBQ3hGLE9BQU8sRUFBQyxxQkFBcUIsSUFBSSxFQUFFLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcblxuZXhwb3J0IHtHcmlkc3RlckNvbXBvbmVudCBhcyDJtWJ9IGZyb20gJy4vZ3JpZHN0ZXIvbGliL2dyaWRzdGVyLmNvbXBvbmVudCc7XG5leHBvcnQge0dyaWRzdGVyTW9kdWxlIGFzIMm1YX0gZnJvbSAnLi9ncmlkc3Rlci9saWIvZ3JpZHN0ZXIubW9kdWxlJztcbmV4cG9ydCB7R3JpZHN0ZXJJdGVtQ29tcG9uZW50IGFzIMm1Y30gZnJvbSAnLi9ncmlkc3Rlci9saWIvZ3JpZHN0ZXJJdGVtLmNvbXBvbmVudCc7XG5leHBvcnQge0dyaWRzdGVyUHJldmlld0NvbXBvbmVudCBhcyDJtWR9IGZyb20gJy4vZ3JpZHN0ZXIvbGliL2dyaWRzdGVyUHJldmlldy5jb21wb25lbnQnO1xuZXhwb3J0IHtjdXN0b21Ob3RpZmllck9wdGlvbnMgYXMgybVlfSBmcm9tICcuL2xpYi9jdXN0b20ubm90aWZpZXIub3B0aW9ucyc7Il19

package/fesm2015/schneideress-dashboardframework.js

@@ -573,6 +573,147 @@ const GridsterConfigDefaultSettings = {
     //itemInitCallback: (item) => this.itemInitCallback(item)
 };
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/ra.dashboard.responsive.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const DesktopViewStart = 1367;
+/** @type {?} */
+const GridLockViewEnd = 1024;
+class RADashboardResponsiveService {
+    constructor() {
+        this.resInfo = [
+            { 'start': 0, 'end': 767, 'minCols': 1, 'maxCols': 1 },
+            { 'start': 768, 'end': GridLockViewEnd, 'minCols': 1, 'maxCols': 2 },
+            { 'start': GridLockViewEnd + 1, 'end': DesktopViewStart - 1, 'minCols': 2, 'maxCols': 6 },
+            { 'start': DesktopViewStart, 'end': 9999999999, 'minCols': 2, 'maxCols': 10 }
+        ];
+        this.setScreenWidth();
+        window.addEventListener('resize', (/**
+         * @return {?}
+         */
+        () => {
+            this.setScreenWidth();
+        }));
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    setScreenWidth() {
+        this.screenWidth = screen.width;
+        this.currentResInfo = this.resInfo.filter((/**
+         * @param {?} item
+         * @return {?}
+         */
+        (item) => {
+            return item.end >= this.screenWidth && item.start <= this.screenWidth;
+        }))[0];
+    }
+    /**
+     * @return {?}
+     */
+    get IsDesktopView() {
+        return this.screenWidth >= DesktopViewStart;
+    }
+    /**
+     * @return {?}
+     */
+    get IsGridLocked() {
+        return this.screenWidth <= GridLockViewEnd;
+    }
+    /**
+     * @return {?}
+     */
+    get GridsterConfig() {
+        /** @type {?} */
+        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) {
+            config.resizable.enabled = false;
+            config.swap = false;
+            config.draggable.enabled = false;
+        }
+        return config;
+    }
+    /**
+     * To map IwidgetInfo object to gridsterItem
+     * @param {?} widget
+     * @return {?}
+     */
+    getGridsterItem(widget) {
+        /** @type {?} */
+        let gridsterItem = (/** @type {?} */ ({
+            cols: this.getWidth(widget.width),
+            rows: this.getHeight(widget.height),
+            x: this.IsDesktopView ? widget.position_x : 0,
+            y: this.IsDesktopView ? widget.position_y : 0,
+            isInitialized: widget.isInitialized,
+            widgetInfo: widget
+        }));
+        return gridsterItem;
+    }
+    /**
+     * @private
+     * @param {?} width
+     * @return {?}
+     */
+    getWidth(width) {
+        if (!this.IsDesktopView) {
+            width = Math.floor(width / 10 * this.currentResInfo.maxCols);
+            if (width < this.currentResInfo.minCols)
+                width = this.currentResInfo.minCols;
+        }
+        return width;
+    }
+    /**
+     * @private
+     * @param {?} height
+     * @return {?}
+     */
+    getHeight(height) {
+        if (!this.IsDesktopView) {
+            height = Math.floor(height / 10 * this.currentResInfo.maxCols);
+            if (height < this.currentResInfo.minCols)
+                height = this.currentResInfo.minCols;
+        }
+        return height;
+    }
+}
+RADashboardResponsiveService.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+/** @nocollapse */
+RADashboardResponsiveService.ctorParameters = () => [];
+/** @nocollapse */ RADashboardResponsiveService.ngInjectableDef = ɵɵdefineInjectable({ factory: function RADashboardResponsiveService_Factory() { return new RADashboardResponsiveService(); }, token: RADashboardResponsiveService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.screenWidth;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.resInfo;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.currentResInfo;
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/ra-dashboard-area/ra.dashboard.area.ts
@@ -585,13 +726,15 @@ class RADashboardArea {
      * @param {?} ngxService
      * @param {?} translateService
      * @param {?} notifier
+     * @param {?} responsiveService
      */
-    constructor(dashboardService, ngZone, ngxService, translateService, notifier) {
+    constructor(dashboardService, ngZone, ngxService, translateService, notifier, responsiveService) {
         this.dashboardService = dashboardService;
         this.ngZone = ngZone;
         this.ngxService = ngxService;
         this.translateService = translateService;
         this.notifier = notifier;
+        this.responsiveService = responsiveService;
         this.widgetList = Array();
         this.gridheight = 300;
         this.gridcellHeight = 0;
@@ -605,15 +748,22 @@ class RADashboardArea {
      * @return {?}
      */
     onResize(event) {
-        /** @type {?} */
-        var areaContext = this;
+        this.widgetList = [];
         setTimeout((/**
          * @return {?}
          */
-        function () {
-            areaContext.setAreaHeight();
-            areaContext.domResized = !areaContext.domResized;
-        }), 1000);
+        () => {
+            this.initiateGridsterConfig();
+            this.options.api.optionsChanged();
+            if (this.userWidgets) {
+                this.widgetList = this.mapObjectListToGridsterItemList(this.userWidgets);
+                this.setAreaHeight();
+            }
+            else {
+                this.loadWidgets(this.userDashboardId, this.areaKey);
+            }
+            this.domResized = !this.domResized;
+        }));
     }
     /**
      * @return {?}
@@ -634,30 +784,38 @@ class RADashboardArea {
             this.inititateEventBusSubscritions();
         }
     }
-    // public invokeResizeEvent() {
-    //   this.widgetContainers.forEach(function(container,i){
-    //     container.invokeWidgetResizedEvent();
-    //   });
-    // }
     /**
      * To set GridsterConfig
      * @return {?}
      */
     initiateGridsterConfig() {
-        /** @type {?} */
-        let areaContext = this;
         /**To override default configuration values to the gridster control */
-        this.options = GridsterConfigDefaultSettings;
+        this.options = this.responsiveService.GridsterConfig;
         this.options.itemChangeCallback = (/**
          * @param {?} item
          * @return {?}
          */
-        function (item) {
-            console.log('in  item change clal back');
-            if (item.widgetInfo && item.widgetInfo.widgetInstanceId) {
-                areaContext.updateWidgetPosition(item.widgetInfo.widgetInstanceId);
+        (item) => {
+            if (item.isInitialized) {
+                if (!this.responsiveService.IsGridLocked) {
+                    if (!this.responsiveService.IsDesktopView) {
+                        this.updateWidgets();
+                    }
+                    else {
+                        if (item.widgetInfo && item.widgetInfo.widgetInstanceId) {
+                            this.updateWidgetPosition(item.widgetInfo.widgetInstanceId);
+                        }
+                    }
+                }
+                this.setAreaHeight();
             }
-            areaContext.setAreaHeight();
+        });
+        this.options.itemInitCallback = (/**
+         * @param {?} item
+         * @return {?}
+         */
+        (item) => {
+            item.isInitialized = true;
         });
     }
     /**
@@ -710,7 +868,6 @@ class RADashboardArea {
              * @return {?}
              */
             () => {
-                console.log('rearrange event bus triggered');
                 this.rearrangeWidgets();
             }));
         }));
@@ -724,9 +881,6 @@ class RADashboardArea {
              */
             () => {
                 if (widgetList) {
-                    // widgetList.forEach(widgetInfo => {
-                    //   this.addWidget(widgetInfo);
-                    // });
                     this.addWidgetListToGridster(widgetList, 0);
                 }
             }));
@@ -782,7 +936,7 @@ class RADashboardArea {
      * @return {?}
      */
     updateWidgets() {
-        this.dashboardService.updateWidgets(this.mapGridsterListToObject(this.widgetList), this.appConfig).subscribe((/**
+        this.dashboardService.updateWidgets(this.formatWidgetDataForPositionDetails(this.mapGridsterListToObject(this.widgetList)), this.appConfig).subscribe((/**
          * @param {?} widgets
          * @return {?}
          */
@@ -848,22 +1002,37 @@ class RADashboardArea {
      * @return {?}
      */
     loadWidgets(userDashboarId, areaKey) {
-        /** @type {?} */
-        let areaContext = this;
         /** @type {?} */
         let widgetInfo = (/** @type {?} */ ({
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey
         }));
-        areaContext.widgetList = [];
+        this.widgetList = [];
         this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe((/**
          * @param {?} widgets
          * @return {?}
          */
         widgets => {
+            //sorting the widgets y, x
+            widgets = widgets.sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            (a, b) => {
+                if (a['position_y'] > b['position_y'])
+                    return 1;
+                if (a['position_y'] < b['position_y'])
+                    return -1;
+                if (a['position_x'] > b['position_x'])
+                    return 1;
+                if (a['position_x'] < b['position_x'])
+                    return -1;
+            }));
+            this.userWidgets = widgets;
             if (widgets && widgets.length > 0) {
-                areaContext.widgetList = this.mapObjectListToGridsterItemList(widgets);
-                areaContext.setAreaHeight();
+                this.widgetList = this.mapObjectListToGridsterItemList(widgets);
+                this.setAreaHeight();
             }
         }));
     }
@@ -915,7 +1084,6 @@ class RADashboardArea {
             areaHeight = 600;
         }
         this.gridheight = areaHeight;
-        console.log('area height adjusted1');
     }
     /**
      * To remove a widget instance from dashboard and to save info in database
@@ -957,20 +1125,12 @@ class RADashboardArea {
      * @return {?}
      */
     addWidget(data) {
-        /** @type {?} */
-        let widgetid = data.widgetId;
         data.height = this.widgetHeight;
         data.width = this.widgetWidth;
         data.position_x = 0;
         data.position_y = 0;
-        /** @type {?} */
-        let gridsterItem = this.mapObjectsToGridsterItem(data);
+        data.isInitialized = true;
         /** to find the available position in gridster, temp commenting the code-returning higher y value than normal */
-        // if (this.options.api) {
-        //   gridsterItem = this.options.api.getFirstPossiblePosition(gridsterItem);
-        // }
-        // data.position_x = gridsterItem.x;
-        // data.position_y = gridsterItem.y;
         data.dashboardAreaKey = this.areaKey;
         data.dashboardId = this.userDashboardId;
         this.ngxService.start();
@@ -979,7 +1139,8 @@ class RADashboardArea {
          * @return {?}
          */
         widget => {
-            gridsterItem = this.mapObjectsToGridsterItem(widget);
+            /** @type {?} */
+            let gridsterItem = this.responsiveService.getGridsterItem(widget);
             this.widgetList.push(gridsterItem);
             this.setAreaHeight();
             if (this.options.api) {
@@ -1011,33 +1172,14 @@ class RADashboardArea {
      * @return {?}
      */
     copyWidget(data) {
+        data.position_x = 0;
+        data.position_y = 0;
+        data.isInitialized = true;
         /** @type {?} */
-        let gridsterItem = this.mapObjectsToGridsterItem(data);
-        if (this.options.api) {
-            gridsterItem = this.options.api.getFirstPossiblePosition(gridsterItem);
-        }
-        data.position_x = gridsterItem.x;
-        data.position_y = gridsterItem.y;
-        gridsterItem = this.mapObjectsToGridsterItem(data);
+        let gridsterItem = this.responsiveService.getGridsterItem(data);
         this.widgetList.push(gridsterItem);
         this.setAreaHeight();
     }
-    /**
-     * To map IwidgetInfo object to gridsterItem
-     * @param {?} widget
-     * @return {?}
-     */
-    mapObjectsToGridsterItem(widget) {
-        /** @type {?} */
-        let gridsterItem = (/** @type {?} */ ({
-            cols: widget.width,
-            rows: widget.height,
-            x: widget.position_x,
-            y: widget.position_y,
-            widgetInfo: widget
-        }));
-        return gridsterItem;
-    }
     /**
      * @param {?} widgetList
      * @return {?}
@@ -1050,7 +1192,7 @@ class RADashboardArea {
          * @return {?}
          */
         widget => {
-            widgetArray.push(this.mapObjectsToGridsterItem(widget));
+            widgetArray.push(this.responsiveService.getGridsterItem(widget));
         }));
         return widgetArray;
     }
@@ -1099,7 +1241,8 @@ RADashboardArea.ctorParameters = () => [
     { type: NgZone },
     { type: NgxUiLoaderService },
     { type: RATranslateService },
-    { type: NotifierService }
+    { type: NotifierService },
+    { type: RADashboardResponsiveService }
 ];
 RADashboardArea.propDecorators = {
     userDashboardId: [{ type: Input, args: ['user-dashboard-id',] }],
@@ -1121,6 +1264,11 @@ if (false) {
     RADashboardArea.prototype.gridheight;
     /** @type {?} */
     RADashboardArea.prototype.gridcellHeight;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardArea.prototype.userWidgets;
     /**
      * @type {?}
      * @private
@@ -1194,6 +1342,11 @@ if (false) {
      * @private
      */
     RADashboardArea.prototype.notifier;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardArea.prototype.responsiveService;
 }
 
 /**
@@ -6661,5 +6814,5 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { DashboardFrameworkModule, RADashboardArea, RADashboardEventBus, RAEvent, RAEventKey, RAWidgetContainer, RaBaseDashboardFilter, RaBaseDashboardTemplate, RaDashboardService, GridsterModule as ɵa, GridsterComponent as ɵb, GridsterItemComponent as ɵc, GridsterPreviewComponent as ɵd, customNotifierOptions as ɵe };
+export { DashboardFrameworkModule, RADashboardArea, RADashboardEventBus, RADashboardResponsiveService, RAEvent, RAEventKey, RAWidgetContainer, RaBaseDashboardFilter, RaBaseDashboardTemplate, RaDashboardService, GridsterModule as ɵa, GridsterComponent as ɵb, GridsterItemComponent as ɵc, GridsterPreviewComponent as ɵd, customNotifierOptions as ɵe };
 //# sourceMappingURL=schneideress-dashboardframework.js.map