@schneideress/dashboardframework 0.0.62 → 0.0.64

package/fesm5/schneideress-dashboardframework.js

@@ -1,5 +1,5 @@
 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 { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, NgZone, Input, EventEmitter, Renderer2, ViewChild, Output, ViewEncapsulation, ElementRef, ChangeDetectorRef, Host, NgModule } from '@angular/core';
 import { of, Subject } from 'rxjs';
 import { BaseService } from '@schneideress/ess-util';
 import { filter, map } from 'rxjs/operators';
@@ -1259,18 +1259,31 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var RAWidgetContainer = /** @class */ (function () {
-    function RAWidgetContainer(dashboardService, ngxService, translateService, ngZone, notifier) {
+    function RAWidgetContainer(dashboardService, ngxService, translateService, ngZone, notifier, renderer) {
+        var _this = this;
         this.dashboardService = dashboardService;
         this.ngxService = ngxService;
         this.translateService = translateService;
         this.ngZone = ngZone;
         this.notifier = notifier;
+        this.renderer = renderer;
+        this.showPanel = false;
         this.isWidgetLoaded = false;
         this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
         this.lockClass = "unlocked";
         this.lockStatus = "unlock";
         this.isDownloadIconVisible = false;
+        this.dropDownShown = false;
         this.widgetDeleted = new EventEmitter();
+        this.renderer.listen('window', 'click', (/**
+         * @param {?} e
+         * @return {?}
+         */
+        function (e) {
+            if (e.target !== _this.widgetDropdown.nativeElement) {
+                _this.dropDownShown = false;
+            }
+        }));
     }
     /**
      * @param {?} changes
@@ -1445,23 +1458,42 @@ var RAWidgetContainer = /** @class */ (function () {
                      * @return {?}
                      */
                     function () { return __awaiter(_this, void 0, void 0, function () {
+                        var _this = this;
                         return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    console.log('widget initiated' + 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.setLock(widgetConfigFilter.config)];
-                                case 1:
-                                    _a.sent();
-                                    return [4 /*yield*/, widgetContainer.setDownloadIcon()];
-                                case 2:
-                                    _a.sent();
-                                    return [2 /*return*/];
-                            }
+                            setTimeout((/**
+                             * @return {?}
+                             */
+                            function () { return __awaiter(_this, void 0, void 0, function () {
+                                var _this = this;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            this.widgetElement.addEventListener('on-data-load', (/**
+                                             * @param {?} e
+                                             * @return {?}
+                                             */
+                                            function (e) {
+                                                if (e.detail)
+                                                    _this.showPanel = true;
+                                                else
+                                                    _this.showPanel = false;
+                                            }));
+                                            widgetContainer.isWidgetLoaded = true;
+                                            widgetConfigFilter.appConfig = this.appConfig;
+                                            widgetConfigFilter.widgetInfo = (/** @type {?} */ ({}));
+                                            widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
+                                            widgetContainer.widgetElement.loadContent(widgetConfigFilter);
+                                            return [4 /*yield*/, widgetContainer.setLock(widgetConfigFilter.config)];
+                                        case 1:
+                                            _a.sent();
+                                            return [4 /*yield*/, widgetContainer.setDownloadIcon()];
+                                        case 2:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); }));
+                            return [2 /*return*/];
                         });
                     }); }));
                     _this.ctlWidget.nativeElement.appendChild(_this.widgetElement);
@@ -1579,11 +1611,36 @@ var RAWidgetContainer = /** @class */ (function () {
     function () {
         //this.widgetElement.isDownloadVisible();
     };
+    /**Show dropdown on gear icon click  */
+    /**
+     * Show dropdown on gear icon click
+     * @return {?}
+     */
+    RAWidgetContainer.prototype.showDropDown = /**
+     * Show dropdown on gear icon click
+     * @return {?}
+     */
+    function () {
+        this.dropDownShown = !this.dropDownShown;
+    };
+    /**Hide dropdown on outside click */
+    /**
+     * Hide dropdown on outside click
+     * @return {?}
+     */
+    RAWidgetContainer.prototype.hideDropDown = /**
+     * Hide dropdown on outside click
+     * @return {?}
+     */
+    function () {
+        if (this.dropDownShown)
+            this.dropDownShown = false;
+    };
     RAWidgetContainer.decorators = [
         { type: Component, args: [{
                     selector: 'ra-widget-container',
-                    template: "<div class=\"wc-wrapper\">\r\n  <div class=\"wcheader widget-move\">\r\n    <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;\">\r\n      <div style=\"display:flex;margin-top:10px;\">\r\n        <div class=\"col-md-11 float-left\" style=\"width:96%;padding-left: 0px\">{{data.widgetInfo.widgetTitle}}\r\n        </div>\r\n        <div class=\"col-md-1\" style=\"cursor:default;\">\r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div *ngIf=\"isDownloadIconVisible\"> <i class=\"far fa-download\" (click)=\"downloadClicked\"></i></div>\r\n            <div class=\"pr-3\"><i [ngClass]=\"lockClass\"\r\n                [attr.title]=\"lockStatus=='lock' ? 'Locked' : 'Partially Locked'\"></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    <perfect-scrollbar [scrollIndicators]=\"true\">\r\n      <div #ctlWidget></div>\r\n    </perfect-scrollbar>\r\n  </div>\r\n</div>",
-                    styles: [".wcheader{width:100%;height:24px;background:#fff;color:#3dcd58;font-family:\"Arial Rounded MT\";font-size:16px;position:absolute;left:0;top:0}.wc-wrapper{height:100%;position:relative;margin:auto 15px}.wc-mover{cursor:all-scroll}.wcBody{width:100%;position:absolute;top:46px;left:0;bottom:0}.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:2;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}"]
+                    template: "<div class=\"wc-wrapper\" (mouseleave) =\"hideDropDown()\">\r\n  <div class=\"wcheader widget-move\">\r\n    <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;\">\r\n      <div style=\"display:flex;margin-top:10px;\">\r\n        <div class=\"col-md-11 float-left\" style=\"width:96%;padding-left: 0px\">{{data.widgetInfo.widgetTitle}}\r\n        </div>\r\n        <div class=\"col-md-1\" style=\"cursor:default;\">\r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div *ngIf=\"isDownloadIconVisible\"> <i class=\"far fa-download\" (click)=\"downloadClicked\"></i></div>\r\n            <div class=\"pr-3\"><i [ngClass]=\"lockClass\"\r\n                [attr.title]=\"lockStatus=='lock' ? 'Locked' : 'Partially Locked'\"></i></div>\r\n            <div class=\"dropdown\">\r\n              <div class=\"dropbtn gearIcon\"> <i #widgetDropdown class=\"fal fa-cog\" (click)=\"showDropDown()\"></i></div>\r\n              <div class=\"dropdown-content widget-config-item\" [ngClass]=\"{'dropdown-click': dropDownShown}\">\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=\"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    <perfect-scrollbar [scrollIndicators]=\"true\">\r\n      <div #ctlWidget></div>\r\n    </perfect-scrollbar>\r\n  </div>\r\n</div>",
+                    styles: [".wcheader{width:100%;height:24px;background:#fff;color:#3dcd58;font-family:\"Arial Rounded MT\";font-size:16px;position:absolute;left:0;top:0}.wc-wrapper{height:100%;position:relative;margin:auto 15px}.wc-mover{cursor:all-scroll}.wcBody{width:100%;position:absolute;top:46px;left:0;bottom:0}.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:2;font-size:12px;font-weight:400}.dropdown-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown-click{display:block;-webkit-animation:.3s ease-out slide-down;animation:.3s ease-out slide-down}.dropdown:hover .dropdown-content{color:#fff}.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 */
@@ -1592,10 +1649,12 @@ var RAWidgetContainer = /** @class */ (function () {
         { type: NgxUiLoaderService },
         { type: TranslateService },
         { type: NgZone },
-        { type: NotifierService }
+        { type: NotifierService },
+        { type: Renderer2 }
     ]; };
     RAWidgetContainer.propDecorators = {
         ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
+        widgetDropdown: [{ type: ViewChild, args: ['widgetDropdown', { static: false },] }],
         widgetInstanceId: [{ type: Input, args: ['widget-instance-id',] }],
         globalFilter: [{ type: Input, args: ['global-filter',] }],
         data: [{ type: Input, args: ['data',] }],
@@ -1608,6 +1667,8 @@ var RAWidgetContainer = /** @class */ (function () {
     return RAWidgetContainer;
 }());
 if (false) {
+    /** @type {?} */
+    RAWidgetContainer.prototype.showPanel;
     /**
      * @type {?}
      * @private
@@ -1637,8 +1698,12 @@ if (false) {
     /** @type {?} */
     RAWidgetContainer.prototype.isDownloadIconVisible;
     /** @type {?} */
+    RAWidgetContainer.prototype.dropDownShown;
+    /** @type {?} */
     RAWidgetContainer.prototype.ctlWidget;
     /** @type {?} */
+    RAWidgetContainer.prototype.widgetDropdown;
+    /** @type {?} */
     RAWidgetContainer.prototype.widgetInstanceId;
     /** @type {?} */
     RAWidgetContainer.prototype.globalFilter;
@@ -1679,6 +1744,11 @@ if (false) {
      * @private
      */
     RAWidgetContainer.prototype.notifier;
+    /**
+     * @type {?}
+     * @private
+     */
+    RAWidgetContainer.prototype.renderer;
 }
 
 /**