@schneideress/dashboardframework 0.0.33 → 0.0.35

package/fesm5/schneideress-dashboardframework.js

@@ -1,4 +1,4 @@
-import { __extends, __assign } from 'tslib';
+import { __extends, __awaiter, __generator, __assign } from 'tslib';
 import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, NgZone, Input, EventEmitter, ViewChild, Output, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, Host, NgModule } from '@angular/core';
 import { of, Subject } from 'rxjs';
 import { BaseService } from '@schneideress/ess-util';
@@ -8,6 +8,7 @@ import { NotifierService, NotifierModule } from 'angular-notifier';
 import { TranslateService, TranslateModule } from '@schneideress/ess-base';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
+import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -383,6 +384,8 @@ var RAEvent = {
     widgetLibraryDoneClick: "widgetLibraryDoneClick",
     /**refresh favorite icon after srtting and resetting favorites */
     favoriteIconRefresh: "favoriteIconRefresh",
+    /**to refresh menu content */
+    QuickLinkRefresh: "QuickLinkRefresh",
 };
 /** @enum {string} */
 var RAEventKey = {
@@ -919,10 +922,16 @@ var RADashboardArea = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        var _this = this;
         /** @type {?} */
         var areaScrollHeight = 0;
         /** @type {?} */
         var areaHeight = 0;
+        /** @type {?} */
+        var curRowHeight = 0;
+        if (this.options.api) {
+            curRowHeight = this.options.api.getCurrentRowHeight();
+        }
         this.widgetList.forEach((/**
          * @param {?} t
          * @return {?}
@@ -933,6 +942,10 @@ var RADashboardArea = /** @class */ (function () {
             if (currentHeight > areaScrollHeight) {
                 areaScrollHeight = currentHeight;
             }
+            if (curRowHeight == 0) {
+                currentHeight = _this.widgetList[0].curRowHeight;
+            }
+            t.widgetInfo.rowHeight = curRowHeight;
         }));
         if (this.options.api) {
             areaHeight = areaScrollHeight * this.options.api.getCurrentRowHeight() + 2;
@@ -1099,6 +1112,7 @@ var RADashboardArea = /** @class */ (function () {
         widget.width = widgetItem.cols;
         widget.position_x = widgetItem.x;
         widget.position_y = widgetItem.y;
+        widget.rowHeight = widgetItem.curRowHeight;
         return widget;
     };
     /**
@@ -1125,7 +1139,7 @@ var RADashboardArea = /** @class */ (function () {
     RADashboardArea.decorators = [
         { type: Component, args: [{
                     selector: 'ra-dashboard-area',
-                    template: "<div #gridWrapper class=\"wrap gridster\" [style.height.px]=\"gridheight\">\r\n<!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\" (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\"\r\n        [global-filter]=\"globalFilter\" [widget-width]=\"item.cols\" [widget-instance-id]=\"item.widgetInstanceId\"></ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n  <notifier-container></notifier-container>\r\n</div>\r\n\r\n",
+                    template: "<div #gridWrapper class=\"wrap gridster\" [style.height.px]=\"gridheight\">\r\n<!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\" (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\"\r\n        [global-filter]=\"globalFilter\" [widget-width]=\"item.cols\" [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\"></ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n  <notifier-container></notifier-container>\r\n</div>\r\n\r\n",
                     styles: ["gridster{width:inherit;resize:height;display:flex}gridster-item{background:#fff!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}"]
                 }] }
     ];
@@ -1234,8 +1248,7 @@ var RAWidgetContainer = /** @class */ (function () {
         this.notifier = notifier;
         this.isWidgetLoaded = false;
         this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
-        this.lockStatus = "unlock";
-        this.lockClass = "unlock";
+        this.lockClass = "unlocked";
         this.widgetDeleted = new EventEmitter();
     }
     /**
@@ -1265,11 +1278,14 @@ var RAWidgetContainer = /** @class */ (function () {
         if (this.widgetElement && changes.globalFilter && changes.globalFilter.currentValue != changes.globalFilter.previousValue) {
             this.refreshWidget(this.data.widgetInfo);
         }
-        if (changes.widgetWidth && changes.widgetWidth.currentValue != changes.widgetWidth.previousValue) {
+        if (changes.width && changes.width.currentValue != changes.width.previousValue) {
             this.data.widgetInfo.isDimensionUpdate = true;
             this.refreshWidget(this.data.widgetInfo);
             this.data.widgetInfo.isDimensionUpdate = false;
         }
+        if (changes.height && changes.height.currentValue != changes.height.previousValue) {
+            this.setWidgetheight();
+        }
     };
     /**
      * @return {?}
@@ -1375,6 +1391,15 @@ var RAWidgetContainer = /** @class */ (function () {
         this.refreshWidget(this.data.widgetInfo);
         // this.updateWidget(widgetInfo);
     };
+    /**
+     * @return {?}
+     */
+    RAWidgetContainer.prototype.setWidgetheight = /**
+     * @return {?}
+     */
+    function () {
+        this.widgetHeight = this.data.widgetInfo.height * this.data.widgetInfo.rowHeight + 2;
+    };
     /**  To load external custom element to the widget container*/
     /**
      * To load external custom element to the widget container
@@ -1387,32 +1412,47 @@ var RAWidgetContainer = /** @class */ (function () {
      * @return {?}
      */
     function (widgetInfo) {
-        var _this = this;
-        /** @type {?} */
-        var widgetConfigFilter = (/** @type {?} */ ({
-            config: widgetInfo.widgetConfigInfo.config,
-            globalFilter: this.globalFilter
-        }));
-        /** @type {?} */
-        var widgetContainer = this;
-        this.dashboardService.loadExternalScript(widgetInfo.scriptUrl, (/**
-         * @return {?}
-         */
-        function () {
-            widgetContainer.widgetElement = document.createElement(widgetInfo.customTag);
-            widgetContainer.widgetElement.setAttribute("widget-instance-id", widgetInfo.widgetInstanceId);
-            document.body.addEventListener('widgetinitiated' + widgetInfo.widgetInstanceId, (/**
-             * @return {?}
-             */
-            function () {
-                widgetContainer.isWidgetLoaded = true;
-                widgetConfigFilter.appConfig = _this.appConfig;
-                widgetConfigFilter.widgetInfo = (/** @type {?} */ ({}));
-                widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
-                widgetContainer.widgetElement.loadContent(widgetConfigFilter);
-            }));
-            _this.ctlWidget.nativeElement.appendChild(_this.widgetElement);
-        }));
+        return __awaiter(this, void 0, void 0, function () {
+            var widgetConfigFilter, widgetContainer;
+            var _this = this;
+            return __generator(this, function (_a) {
+                widgetConfigFilter = (/** @type {?} */ ({
+                    config: widgetInfo.widgetConfigInfo.config,
+                    globalFilter: this.globalFilter
+                }));
+                widgetContainer = this;
+                this.dashboardService.loadExternalScript(widgetInfo.scriptUrl, (/**
+                 * @return {?}
+                 */
+                function () {
+                    widgetContainer.widgetElement = document.createElement(widgetInfo.customTag);
+                    widgetContainer.widgetElement.setAttribute("widget-instance-id", widgetInfo.widgetInstanceId);
+                    document.body.addEventListener('widgetinitiated' + widgetInfo.widgetInstanceId, (/**
+                     * @return {?}
+                     */
+                    function () { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    console.log('widget initiate' + widgetInfo.widgetInstanceId);
+                                    widgetContainer.isWidgetLoaded = true;
+                                    widgetConfigFilter.appConfig = this.appConfig;
+                                    widgetConfigFilter.widgetInfo = (/** @type {?} */ ({}));
+                                    widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
+                                    widgetContainer.widgetElement.loadContent(widgetConfigFilter);
+                                    return [4 /*yield*/, widgetContainer.setClass()];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); }));
+                    _this.ctlWidget.nativeElement.appendChild(_this.widgetElement);
+                }));
+                this.setWidgetheight();
+                return [2 /*return*/];
+            });
+        });
     };
     /** To refresh widget on input config changes */
     /**
@@ -1437,30 +1477,52 @@ var RAWidgetContainer = /** @class */ (function () {
         }));
         if (widgetContainerContext.isWidgetLoaded) {
             widgetContainerContext.widgetElement.loadContent(widgetConfigFilter);
-            this.lockStatus = widgetContainerContext.widgetElement.loadLockStatus();
-            if (this.lockStatus) {
-                switch (this.lockStatus) {
-                    case "lock": {
-                        this.lockClass = "fa fa-lock locked";
-                    }
-                    case "unlock": {
-                        this.lockClass = "unlock";
-                    }
-                    case "partiallock": {
-                        this.lockClass = "fa fa-lock partiallocked";
-                    }
-                    default: {
-                        this.lockClass = "unlock";
-                    }
-                }
-            }
+            //await this.setClass();
         }
     };
+    /**
+     * @private
+     * @return {?}
+     */
+    RAWidgetContainer.prototype.setClass = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var lockstatus;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.widgetElement.loadLockStatus()];
+                    case 1:
+                        lockstatus = _a.sent();
+                        console.log('lock staus' + lockstatus);
+                        if (lockstatus) {
+                            switch (lockstatus) {
+                                case "lock": {
+                                    this.lockClass = "fa fa-lock locked";
+                                }
+                                case "unlock": {
+                                    this.lockClass = "unlocked";
+                                }
+                                case "partiallock": {
+                                    this.lockClass = "fa fa-lock partiallocked";
+                                }
+                                default: {
+                                    this.lockClass = "unlocked";
+                                }
+                            }
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     RAWidgetContainer.decorators = [
         { type: Component, args: [{
                     selector: 'ra-widget-container',
-                    template: "<div class=\"wc-wrapper\">\r\n  <div class=\"wcheader\">\r\n    <div class=\"col-md-12 wc-mover\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-11 float-left\" style=\"width:96%;\">{{data.widgetInfo.widgetTitle}}\r\n        </div>\r\n        <div class=\"col-md-1\">\r\n          <div class=\"float-right\" style=\"display: flex\">\r\n            <div><i [ngClass]=\"lockClass\"></i></div>\r\n            <div class=\"dropdown\">\r\n              <div class=\"dropbtn gearIcon\"> <i class=\"fal fa-cog\"></i></div>\r\n              <div class=\"dropdown-content widget-config-item\">\r\n                <a (click)=\"editWidget()\">\r\n                  <i class=\"fal fa-edit\"></i>\r\n                  <span>{{'Edit'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"copyWidget()\">\r\n                  <i class=\"fal fa-copy\"></i>\r\n                  <span>{{'Copy'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"moveWidget()\">\r\n                  <i class=\"fal fa-arrows-alt\"></i>\r\n                  <span>{{'Move'|translate}}</span>\r\n                </a>\r\n                <hr class=\"hr\">\r\n                <a (click)=\"deleteWidget()\">\r\n                  <i class=\"fal fa-times\" style=\"padding-left: 3px;\"></i>\r\n                  <span>{{'Delete'|translate}}</span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\">\r\n    <div class=\"wcBodyBorder\" #ctlWidget></div>\r\n  </div>\r\n</div>",
-                    styles: [".wcheader{width:100%;height:26px;background:#fff;color:#3dcd58;padding:7px 7px 0 6px;font-family:\"Arial Rounded MT\";border-bottom:1px solid;border-color:#fff;font-size:16px}.wc-mover{cursor:all-scroll}.wcBody{padding:8px}.wcBodyBorder{border:1px dashed #e6e2e2}.sp_icon{float:left;margin:0 15% 0 0}.dropbtn{cursor:pointer;color:#42b4e6}.dropdown{visibility:hidden;opacity:0;transition:visibility,opacity .5s linear;position:relative}.dropdown hr{margin:0!important}.dropdown-content{display:none;position:absolute;right:0;background-color:#f9f9f9;min-width:100px;box-shadow:0 8px 16px 8px rgba(0,0,0,.2);z-index:1;font-size:12px;font-family:\"Arial Rounded MT\"}.dropdown-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown:hover .dropdown-content{display:block;-webkit-animation:.3s ease-out slide-down;animation:.3s ease-out slide-down}.wc-wrapper:hover .dropdown{visibility:visible;opacity:1}.dropdown:hover .dropbtn{color:#2b7797}.gearIcon{color:#42b4e6}.hr{border:0;border-top:1px solid rgba(0,0,0,.1)}@keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-20%);transform:translateY(-20%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-20%)}100%{opacity:1;-webkit-transform:translateY(0)}}.widget-config-item i{font-size:17px;color:#42b4e6}.widget-config-item span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}.locked{color:#42b4e6}.partiallocked{color:#a0d9f2}.unlock{display:none}"]
+                    template: "<div class=\"wc-wrapper\">\r\n  <div class=\"wcheader\">\r\n    <div class=\"col-md-12 wc-mover\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-10 float-left\" style=\"width:96%;\">{{data.widgetInfo.widgetTitle}}\r\n        </div>\r\n        <div class=\"col-md-2\">\r\n          <div class=\"float-right\" style=\"display: flex\">\r\n            <div class=\"pr-3\"><i [ngClass]=\"lockClass\"></i></div>\r\n            <div class=\"dropdown\">\r\n              <div class=\"dropbtn gearIcon\"> <i class=\"fal fa-cog\"></i></div>\r\n              <div class=\"dropdown-content widget-config-item\">\r\n                <a (click)=\"editWidget()\">\r\n                  <i class=\"fal fa-edit\"></i>\r\n                  <span>{{'Edit'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"copyWidget()\">\r\n                  <i class=\"fal fa-copy\"></i>\r\n                  <span>{{'Copy'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"moveWidget()\">\r\n                  <i class=\"fal fa-arrows-alt\"></i>\r\n                  <span>{{'Move'|translate}}</span>\r\n                </a>\r\n                <hr class=\"hr\">\r\n                <a (click)=\"deleteWidget()\">\r\n                  <i class=\"fal fa-times\" style=\"padding-left: 3px;\"></i>\r\n                  <span>{{'Delete'|translate}}</span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\" [style.height.px]=\"widgetHeight\">\r\n      <perfect-scrollbar [scrollIndicators]=\"true\">\r\n      <div class=\"wcBodyBorder\" #ctlWidget></div>\r\n      </perfect-scrollbar>\r\n  </div>\r\n</div>\r\n",
+                    styles: [".wcheader{width:100%;height:26px;background:#fff;color:#3dcd58;padding:7px 7px 0 6px;font-family:\"Arial Rounded MT\";border-bottom:1px solid;border-color:#fff;font-size:16px}.wc-mover{cursor:all-scroll}.wcBody{padding:8px}.wcBodyBorder{border:1px dashed #e6e2e2}.sp_icon{float:left;margin:0 15% 0 0}.dropbtn{cursor:pointer;color:#42b4e6}.dropdown{visibility:hidden;opacity:0;transition:visibility,opacity .5s linear;position:relative}.dropdown hr{margin:0!important}.dropdown-content{display:none;position:absolute;right:0;background-color:#f9f9f9;min-width:100px;box-shadow:0 8px 16px 8px rgba(0,0,0,.2);z-index:1;font-size:12px;font-family:\"Arial Rounded MT\"}.dropdown-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown:hover .dropdown-content{display:block;-webkit-animation:.3s ease-out slide-down;animation:.3s ease-out slide-down}.wc-wrapper:hover .dropdown{visibility:visible;opacity:1}.dropdown:hover .dropbtn{color:#2b7797}.gearIcon{color:#42b4e6}.hr{border:0;border-top:1px solid rgba(0,0,0,.1)}@keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-20%);transform:translateY(-20%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-20%)}100%{opacity:1;-webkit-transform:translateY(0)}}.widget-config-item i{font-size:17px;color:#42b4e6}.widget-config-item span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}.locked{color:#42b4e6}.partiallocked{color:#a0d9f2}.unlocked{display:none}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1478,7 +1540,8 @@ var RAWidgetContainer = /** @class */ (function () {
         data: [{ type: Input, args: ['data',] }],
         raDashboardEventBus: [{ type: Input, args: ['event-bus',] }],
         appConfig: [{ type: Input, args: ['app-config',] }],
-        widgetWidth: [{ type: Input, args: ['widget-width',] }],
+        width: [{ type: Input, args: ['widget-width',] }],
+        height: [{ type: Input, args: ['widget-height',] }],
         widgetDeleted: [{ type: Output }]
     };
     return RAWidgetContainer;
@@ -1505,7 +1568,7 @@ if (false) {
      */
     RAWidgetContainer.prototype.isIEOrEdge;
     /** @type {?} */
-    RAWidgetContainer.prototype.lockStatus;
+    RAWidgetContainer.prototype.widgetHeight;
     /** @type {?} */
     RAWidgetContainer.prototype.lockClass;
     /** @type {?} */
@@ -1521,7 +1584,9 @@ if (false) {
     /** @type {?} */
     RAWidgetContainer.prototype.appConfig;
     /** @type {?} */
-    RAWidgetContainer.prototype.widgetWidth;
+    RAWidgetContainer.prototype.width;
+    /** @type {?} */
+    RAWidgetContainer.prototype.height;
     /** @type {?} */
     RAWidgetContainer.prototype.widgetDeleted;
     /**
@@ -6608,6 +6673,11 @@ var GridsterModule = /** @class */ (function () {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/** @type {?} */
+var DEFAULT_PERFECT_SCROLLBAR_CONFIG = {
+    suppressScrollX: true
+};
+var ɵ0 = DEFAULT_PERFECT_SCROLLBAR_CONFIG;
 var DashboardFrameworkModule = /** @class */ (function () {
     function DashboardFrameworkModule() {
     }
@@ -6623,13 +6693,17 @@ var DashboardFrameworkModule = /** @class */ (function () {
                         HttpClientModule,
                         NgxUiLoaderModule,
                         TranslateModule,
-                        NotifierModule.withConfig(customNotifierOptions)
+                        NotifierModule.withConfig(customNotifierOptions),
+                        PerfectScrollbarModule
                     ],
                     exports: [
                         RADashboardArea,
                         TranslateModule
                     ],
-                    providers: [],
+                    providers: [{
+                            provide: PERFECT_SCROLLBAR_CONFIG,
+                            useValue: ɵ0
+                        },],
                     bootstrap: [RADashboardArea]
                 },] }
     ];