@schneideress/dashboardframework 0.0.62 → 0.0.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, NgZone, Input, EventEmitter, ViewChild, Output, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, Host, NgModule } from '@angular/core';
1
+ import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, NgZone, Input, EventEmitter, Renderer2, ViewChild, Output, ViewEncapsulation, ElementRef, ChangeDetectorRef, Host, NgModule } from '@angular/core';
2
2
  import { of, Subject } from 'rxjs';
3
3
  import { BaseService } from '@schneideress/ess-util';
4
4
  import { filter, map } from 'rxjs/operators';
@@ -1060,19 +1060,32 @@ class RAWidgetContainer {
1060
1060
  * @param {?} translateService
1061
1061
  * @param {?} ngZone
1062
1062
  * @param {?} notifier
1063
+ * @param {?} renderer
1063
1064
  */
1064
- constructor(dashboardService, ngxService, translateService, ngZone, notifier) {
1065
+ constructor(dashboardService, ngxService, translateService, ngZone, notifier, renderer) {
1065
1066
  this.dashboardService = dashboardService;
1066
1067
  this.ngxService = ngxService;
1067
1068
  this.translateService = translateService;
1068
1069
  this.ngZone = ngZone;
1069
1070
  this.notifier = notifier;
1071
+ this.renderer = renderer;
1072
+ this.showPanel = false;
1070
1073
  this.isWidgetLoaded = false;
1071
1074
  this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
1072
1075
  this.lockClass = "unlocked";
1073
1076
  this.lockStatus = "unlock";
1074
1077
  this.isDownloadIconVisible = false;
1078
+ this.dropDownShown = false;
1075
1079
  this.widgetDeleted = new EventEmitter();
1080
+ this.renderer.listen('window', 'click', (/**
1081
+ * @param {?} e
1082
+ * @return {?}
1083
+ */
1084
+ (e) => {
1085
+ if (e.target !== this.widgetDropdown.nativeElement) {
1086
+ this.dropDownShown = false;
1087
+ }
1088
+ }));
1076
1089
  }
1077
1090
  /**
1078
1091
  * @param {?} changes
@@ -1203,14 +1216,28 @@ class RAWidgetContainer {
1203
1216
  * @return {?}
1204
1217
  */
1205
1218
  () => __awaiter(this, void 0, void 0, /** @this {!RAWidgetContainer} */ function* () {
1206
- console.log('widget initiated' + widgetInfo.widgetInstanceId);
1207
- widgetContainer.isWidgetLoaded = true;
1208
- widgetConfigFilter.appConfig = this.appConfig;
1209
- widgetConfigFilter.widgetInfo = (/** @type {?} */ ({}));
1210
- widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
1211
- widgetContainer.widgetElement.loadContent(widgetConfigFilter);
1212
- yield widgetContainer.setLock(widgetConfigFilter.config);
1213
- yield widgetContainer.setDownloadIcon();
1219
+ setTimeout((/**
1220
+ * @return {?}
1221
+ */
1222
+ () => __awaiter(this, void 0, void 0, /** @this {!RAWidgetContainer} */ function* () {
1223
+ this.widgetElement.addEventListener('on-data-load', (/**
1224
+ * @param {?} e
1225
+ * @return {?}
1226
+ */
1227
+ (e) => {
1228
+ if (e.detail)
1229
+ this.showPanel = true;
1230
+ else
1231
+ this.showPanel = false;
1232
+ }));
1233
+ widgetContainer.isWidgetLoaded = true;
1234
+ widgetConfigFilter.appConfig = this.appConfig;
1235
+ widgetConfigFilter.widgetInfo = (/** @type {?} */ ({}));
1236
+ widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
1237
+ widgetContainer.widgetElement.loadContent(widgetConfigFilter);
1238
+ yield widgetContainer.setLock(widgetConfigFilter.config);
1239
+ yield widgetContainer.setDownloadIcon();
1240
+ })));
1214
1241
  })));
1215
1242
  this.ctlWidget.nativeElement.appendChild(this.widgetElement);
1216
1243
  }));
@@ -1285,12 +1312,27 @@ class RAWidgetContainer {
1285
1312
  downloadClicked() {
1286
1313
  //this.widgetElement.isDownloadVisible();
1287
1314
  }
1315
+ /**
1316
+ * Show dropdown on gear icon click
1317
+ * @return {?}
1318
+ */
1319
+ showDropDown() {
1320
+ this.dropDownShown = !this.dropDownShown;
1321
+ }
1322
+ /**
1323
+ * Hide dropdown on outside click
1324
+ * @return {?}
1325
+ */
1326
+ hideDropDown() {
1327
+ if (this.dropDownShown)
1328
+ this.dropDownShown = false;
1329
+ }
1288
1330
  }
1289
1331
  RAWidgetContainer.decorators = [
1290
1332
  { type: Component, args: [{
1291
1333
  selector: 'ra-widget-container',
1292
- 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>",
1293
- 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}"]
1334
+ 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>",
1335
+ 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}"]
1294
1336
  }] }
1295
1337
  ];
1296
1338
  /** @nocollapse */
@@ -1299,10 +1341,12 @@ RAWidgetContainer.ctorParameters = () => [
1299
1341
  { type: NgxUiLoaderService },
1300
1342
  { type: TranslateService },
1301
1343
  { type: NgZone },
1302
- { type: NotifierService }
1344
+ { type: NotifierService },
1345
+ { type: Renderer2 }
1303
1346
  ];
1304
1347
  RAWidgetContainer.propDecorators = {
1305
1348
  ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
1349
+ widgetDropdown: [{ type: ViewChild, args: ['widgetDropdown', { static: false },] }],
1306
1350
  widgetInstanceId: [{ type: Input, args: ['widget-instance-id',] }],
1307
1351
  globalFilter: [{ type: Input, args: ['global-filter',] }],
1308
1352
  data: [{ type: Input, args: ['data',] }],
@@ -1313,6 +1357,8 @@ RAWidgetContainer.propDecorators = {
1313
1357
  widgetDeleted: [{ type: Output }]
1314
1358
  };
1315
1359
  if (false) {
1360
+ /** @type {?} */
1361
+ RAWidgetContainer.prototype.showPanel;
1316
1362
  /**
1317
1363
  * @type {?}
1318
1364
  * @private
@@ -1342,8 +1388,12 @@ if (false) {
1342
1388
  /** @type {?} */
1343
1389
  RAWidgetContainer.prototype.isDownloadIconVisible;
1344
1390
  /** @type {?} */
1391
+ RAWidgetContainer.prototype.dropDownShown;
1392
+ /** @type {?} */
1345
1393
  RAWidgetContainer.prototype.ctlWidget;
1346
1394
  /** @type {?} */
1395
+ RAWidgetContainer.prototype.widgetDropdown;
1396
+ /** @type {?} */
1347
1397
  RAWidgetContainer.prototype.widgetInstanceId;
1348
1398
  /** @type {?} */
1349
1399
  RAWidgetContainer.prototype.globalFilter;
@@ -1384,6 +1434,11 @@ if (false) {
1384
1434
  * @private
1385
1435
  */
1386
1436
  RAWidgetContainer.prototype.notifier;
1437
+ /**
1438
+ * @type {?}
1439
+ * @private
1440
+ */
1441
+ RAWidgetContainer.prototype.renderer;
1387
1442
  }
1388
1443
 
1389
1444
  /**