@schneideress/dashboardframework 0.0.87 → 0.0.89

package/fesm5/schneideress-dashboardframework.js

@@ -1,11 +1,11 @@
 import { __extends, __awaiter, __generator, __assign } from 'tslib';
-import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, NgZone, Input, EventEmitter, Renderer2, ViewChild, Output, ViewEncapsulation, ElementRef, ChangeDetectorRef, Host, NgModule } from '@angular/core';
+import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, NgZone, Input, ViewChild, EventEmitter, Renderer2, Output, ViewEncapsulation, ElementRef, ChangeDetectorRef, Host, NgModule } from '@angular/core';
 import { of, Subject } from 'rxjs';
 import { BaseService, RATranslateService, 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 { RADownloadType, RADownloadOption } from '@schneideress/widgetframework';
+import { RaWidgetlockStatus, RADownloadType, RADownloadOption } from '@schneideress/widgetframework';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
@@ -938,6 +938,11 @@ var RADashboardArea = /** @class */ (function () {
     function () {
         var _this = this;
         /** @type {?} */
+        var isMobile = false;
+        if (this.options.mobileBreakpoint > this.gridWrapper.nativeElement.clientWidth) {
+            isMobile = true;
+        }
+        /** @type {?} */
         var areaScrollHeight = 0;
         /** @type {?} */
         var areaHeight = 0;
@@ -964,6 +969,12 @@ var RADashboardArea = /** @class */ (function () {
         if (this.options.api) {
             areaHeight = areaScrollHeight * this.options.api.getCurrentRowHeight() + 100;
         }
+        /** @type {?} */
+        var areaScrollHeightMob = 0;
+        if (isMobile) {
+            areaScrollHeightMob = this.widgetList.length * 300 + 100;
+            areaHeight = areaScrollHeightMob;
+        }
         if (areaHeight < 600) {
             areaHeight = 600;
         }
@@ -1184,7 +1195,8 @@ var RADashboardArea = /** @class */ (function () {
         raDashboardEventBus: [{ type: Input, args: ['event-bus',] }],
         widgetHeight: [{ type: Input, args: ['widget-height',] }],
         widgetWidth: [{ type: Input, args: ['widget-width',] }],
-        appConfig: [{ type: Input, args: ['app-config',] }]
+        appConfig: [{ type: Input, args: ['app-config',] }],
+        gridWrapper: [{ type: ViewChild, args: ['gridWrapper', { static: false },] }]
     };
     return RADashboardArea;
 }());
@@ -1234,6 +1246,8 @@ if (false) {
     RADashboardArea.prototype.widgetWidth;
     /** @type {?} */
     RADashboardArea.prototype.appConfig;
+    /** @type {?} */
+    RADashboardArea.prototype.gridWrapper;
     /**
      * @type {?}
      * @private
@@ -1279,7 +1293,7 @@ var RAWidgetContainer = /** @class */ (function () {
         this.isWidgetLoaded = false;
         this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
         this.lockClass = "unlocked";
-        this.lockStatus = "unlock";
+        this.lockStatus = RaWidgetlockStatus.Unlocked;
         this.isDownloadIconVisible = false;
         this.dropDownShown = false;
         this.isDownloadChartVisible = false;
@@ -1591,7 +1605,7 @@ var RAWidgetContainer = /** @class */ (function () {
                         return [4 /*yield*/, this.widgetElement.loadLockStatus(config)];
                     case 1:
                         _a.lockStatus = _b.sent();
-                        if (this.lockStatus == 'lock') {
+                        if (this.lockStatus == RaWidgetlockStatus.Locked) {
                             this.lockTitle = 'Locked';
                         }
                         else {
@@ -1599,15 +1613,15 @@ var RAWidgetContainer = /** @class */ (function () {
                         }
                         if (this.lockStatus) {
                             switch (this.lockStatus) {
-                                case "lock": {
+                                case RaWidgetlockStatus.Locked: {
                                     this.lockClass = "fas fa-lock locked";
                                     break;
                                 }
-                                case "unlock": {
+                                case RaWidgetlockStatus.Unlocked: {
                                     this.lockClass = "unlocked";
                                     break;
                                 }
-                                case "partiallock": {
+                                case RaWidgetlockStatus.PartiallyLocked: {
                                     this.lockClass = "fas fa-lock partiallocked";
                                     break;
                                 }
@@ -1720,7 +1734,7 @@ var RAWidgetContainer = /** @class */ (function () {
     RAWidgetContainer.decorators = [
         { type: Component, args: [{
                     selector: 'ra-widget-container',
-                    template: "<div class=\"wc-wrapper\" (mouseleave)=\"hideDropDown()\">\r\n  <div class=\"wcheader widget-move\" [ngClass]=\"{'underLine': enableTitleLine}\">\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;padding-right: 0px;\">\r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div class=\"title-bar-icon download download-icon\" *ngIf=\"isDownloadIconVisible\">\r\n              <i class=\"fas fa-download\" (mouseover)=\"setDownloadIcon()\" #widgetDownload\r\n                (click)=\"downloadClicked()\"></i>\r\n              <div class=\"download-content\" [ngClass]=\"{'dropdown-click': isDownloadChartVisible}\">\r\n                <a (click)=\"downloadIconClicked('PNG')\">\r\n                  <i class=\"fal fa-file-image\"></i>\r\n                  <span>{{'PNG'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"downloadIconClicked('JPEG')\">\r\n                  <i class=\"fal fa-file\"></i>\r\n                  <span>{{'JPEG'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"downloadIconClicked('PDF')\">\r\n                  <i class=\"fal fa-file-pdf\"></i>\r\n                  <span>{{'PDF'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"downloadIconClicked('SVG')\">\r\n                  <i class=\"fal fa-file-alt\"></i>\r\n                  <span>{{'SVG'|translate}}</span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n            <div class=\"dropdown\">\r\n              <div class=\"dropbtn title-bar-icon\"> <i #widgetDropdown class=\"fas fa-cog\" (click)=\"showDropDown()\"></i>\r\n              </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            <ra-tooltip [value]=\"lockTitle\" [width]=\"'300px'\">\r\n            <div class=\"title-bar-lock-icon\">\r\n              \r\n                <i [ngClass]=\"lockClass\" ></i>\r\n             \r\n              <!-- <i [ngClass]=\"lockClass\"\r\n                [attr.title]=\"lockStatus=='lock' ? 'Locked' : 'Partially Locked'\"></i> -->\r\n            </div>\r\n          </ra-tooltip>\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>",
+                    template: "<div class=\"wc-wrapper\" (mouseleave)=\"hideDropDown()\">\r\n  <div class=\"wcheader widget-move\" [ngClass]=\"{'underLine': enableTitleLine}\">\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;padding-right: 0px;\">\r\n          <div class=\"float-right\" style=\"display: flex;\">\r\n            <div class=\"title-bar-icon download download-icon\" *ngIf=\"isDownloadIconVisible\">\r\n              <i class=\"fas fa-download\" (mouseover)=\"setDownloadIcon()\" #widgetDownload\r\n                (click)=\"downloadClicked()\"></i>\r\n              <div class=\"download-content\" [ngClass]=\"{'dropdown-click': isDownloadChartVisible}\">\r\n                <a (click)=\"downloadIconClicked('PNG')\">\r\n                  <i class=\"fal fa-file-image\"></i>\r\n                  <span>{{'PNG'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"downloadIconClicked('JPEG')\">\r\n                  <i class=\"fal fa-file\"></i>\r\n                  <span>{{'JPEG'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"downloadIconClicked('PDF')\">\r\n                  <i class=\"fal fa-file-pdf\"></i>\r\n                  <span>{{'PDF'|translate}}</span>\r\n                </a>\r\n                <a (click)=\"downloadIconClicked('SVG')\">\r\n                  <i class=\"fal fa-file-alt\"></i>\r\n                  <span>{{'SVG'|translate}}</span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n            <div class=\"dropdown\">\r\n              <div class=\"dropbtn title-bar-icon\"> <i #widgetDropdown class=\"fas fa-cog\" (click)=\"showDropDown()\"></i>\r\n              </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            <ra-tooltip [value]=\"lockTitle\" [width]=\"'300px'\">\r\n            <div class=\"title-bar-lock-icon\">\r\n              <i [ngClass]=\"lockClass\"></i>\r\n\r\n            </div>\r\n          </ra-tooltip>\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:45px;background:#fff;color:#3dcd58;font-family:\"Arial Rounded MT\";font-size:16px;position:absolute;left:0;top:0}.underLine{border-bottom:2px solid #d4d7d8}.wc-wrapper{height:100%;position:relative;margin:auto 15px}.wc-mover{cursor:all-scroll}.wcBody{width:100%;position:absolute;top:46px;left:0;bottom:15px}.wcBodyBorder{border:1px dashed #e6e2e2}.sp_icon{float:left;margin:0 15% 0 0}.dropbtn{cursor:pointer;color:#42b4e6}.dropdown{visibility:hidden;opacity:0;-webkit-transition:visibility,opacity .5s linear;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!important;-webkit-animation:.3s ease-out slide-down;animation:.3s ease-out slide-down}.download-icon{cursor:pointer}.dropdown:hover .dropdown-content{color:#fff}.wc-wrapper:hover .dropdown{visibility:visible;opacity:1}.title-bar-icon{margin:0 3px;color:#42b4e6}.title-bar-lock-icon{margin:0 3px}.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}.download{visibility:hidden;opacity:0;-webkit-transition:visibility,opacity .5s linear;transition:visibility,opacity .5s linear;position:relative}.wc-wrapper:hover .download{visibility:visible;opacity:1}.download-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}.download-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.download-content a:hover{background-color:#f1f1f1}.download-content a i{font-size:17px;color:#42b4e6}.download-content a span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}"]
                 }] }
     ];