@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.
@@ -1449,18 +1449,31 @@
1449
1449
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1450
1450
  */
1451
1451
  var RAWidgetContainer = /** @class */ (function () {
1452
- function RAWidgetContainer(dashboardService, ngxService, translateService, ngZone, notifier) {
1452
+ function RAWidgetContainer(dashboardService, ngxService, translateService, ngZone, notifier, renderer) {
1453
+ var _this = this;
1453
1454
  this.dashboardService = dashboardService;
1454
1455
  this.ngxService = ngxService;
1455
1456
  this.translateService = translateService;
1456
1457
  this.ngZone = ngZone;
1457
1458
  this.notifier = notifier;
1459
+ this.renderer = renderer;
1460
+ this.showPanel = false;
1458
1461
  this.isWidgetLoaded = false;
1459
1462
  this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
1460
1463
  this.lockClass = "unlocked";
1461
1464
  this.lockStatus = "unlock";
1462
1465
  this.isDownloadIconVisible = false;
1466
+ this.dropDownShown = false;
1463
1467
  this.widgetDeleted = new core.EventEmitter();
1468
+ this.renderer.listen('window', 'click', (/**
1469
+ * @param {?} e
1470
+ * @return {?}
1471
+ */
1472
+ function (e) {
1473
+ if (e.target !== _this.widgetDropdown.nativeElement) {
1474
+ _this.dropDownShown = false;
1475
+ }
1476
+ }));
1464
1477
  }
1465
1478
  /**
1466
1479
  * @param {?} changes
@@ -1635,23 +1648,42 @@
1635
1648
  * @return {?}
1636
1649
  */
1637
1650
  function () { return __awaiter(_this, void 0, void 0, function () {
1651
+ var _this = this;
1638
1652
  return __generator(this, function (_a) {
1639
- switch (_a.label) {
1640
- case 0:
1641
- console.log('widget initiated' + widgetInfo.widgetInstanceId);
1642
- widgetContainer.isWidgetLoaded = true;
1643
- widgetConfigFilter.appConfig = this.appConfig;
1644
- widgetConfigFilter.widgetInfo = (/** @type {?} */ ({}));
1645
- widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
1646
- widgetContainer.widgetElement.loadContent(widgetConfigFilter);
1647
- return [4 /*yield*/, widgetContainer.setLock(widgetConfigFilter.config)];
1648
- case 1:
1649
- _a.sent();
1650
- return [4 /*yield*/, widgetContainer.setDownloadIcon()];
1651
- case 2:
1652
- _a.sent();
1653
- return [2 /*return*/];
1654
- }
1653
+ setTimeout((/**
1654
+ * @return {?}
1655
+ */
1656
+ function () { return __awaiter(_this, void 0, void 0, function () {
1657
+ var _this = this;
1658
+ return __generator(this, function (_a) {
1659
+ switch (_a.label) {
1660
+ case 0:
1661
+ this.widgetElement.addEventListener('on-data-load', (/**
1662
+ * @param {?} e
1663
+ * @return {?}
1664
+ */
1665
+ function (e) {
1666
+ if (e.detail)
1667
+ _this.showPanel = true;
1668
+ else
1669
+ _this.showPanel = false;
1670
+ }));
1671
+ widgetContainer.isWidgetLoaded = true;
1672
+ widgetConfigFilter.appConfig = this.appConfig;
1673
+ widgetConfigFilter.widgetInfo = (/** @type {?} */ ({}));
1674
+ widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
1675
+ widgetContainer.widgetElement.loadContent(widgetConfigFilter);
1676
+ return [4 /*yield*/, widgetContainer.setLock(widgetConfigFilter.config)];
1677
+ case 1:
1678
+ _a.sent();
1679
+ return [4 /*yield*/, widgetContainer.setDownloadIcon()];
1680
+ case 2:
1681
+ _a.sent();
1682
+ return [2 /*return*/];
1683
+ }
1684
+ });
1685
+ }); }));
1686
+ return [2 /*return*/];
1655
1687
  });
1656
1688
  }); }));
1657
1689
  _this.ctlWidget.nativeElement.appendChild(_this.widgetElement);
@@ -1769,11 +1801,36 @@
1769
1801
  function () {
1770
1802
  //this.widgetElement.isDownloadVisible();
1771
1803
  };
1804
+ /**Show dropdown on gear icon click */
1805
+ /**
1806
+ * Show dropdown on gear icon click
1807
+ * @return {?}
1808
+ */
1809
+ RAWidgetContainer.prototype.showDropDown = /**
1810
+ * Show dropdown on gear icon click
1811
+ * @return {?}
1812
+ */
1813
+ function () {
1814
+ this.dropDownShown = !this.dropDownShown;
1815
+ };
1816
+ /**Hide dropdown on outside click */
1817
+ /**
1818
+ * Hide dropdown on outside click
1819
+ * @return {?}
1820
+ */
1821
+ RAWidgetContainer.prototype.hideDropDown = /**
1822
+ * Hide dropdown on outside click
1823
+ * @return {?}
1824
+ */
1825
+ function () {
1826
+ if (this.dropDownShown)
1827
+ this.dropDownShown = false;
1828
+ };
1772
1829
  RAWidgetContainer.decorators = [
1773
1830
  { type: core.Component, args: [{
1774
1831
  selector: 'ra-widget-container',
1775
- 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>",
1776
- 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}"]
1832
+ 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>",
1833
+ 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}"]
1777
1834
  }] }
1778
1835
  ];
1779
1836
  /** @nocollapse */
@@ -1782,10 +1839,12 @@
1782
1839
  { type: ngxUiLoader.NgxUiLoaderService },
1783
1840
  { type: essBase.TranslateService },
1784
1841
  { type: core.NgZone },
1785
- { type: angularNotifier.NotifierService }
1842
+ { type: angularNotifier.NotifierService },
1843
+ { type: core.Renderer2 }
1786
1844
  ]; };
1787
1845
  RAWidgetContainer.propDecorators = {
1788
1846
  ctlWidget: [{ type: core.ViewChild, args: ['ctlWidget', { static: false },] }],
1847
+ widgetDropdown: [{ type: core.ViewChild, args: ['widgetDropdown', { static: false },] }],
1789
1848
  widgetInstanceId: [{ type: core.Input, args: ['widget-instance-id',] }],
1790
1849
  globalFilter: [{ type: core.Input, args: ['global-filter',] }],
1791
1850
  data: [{ type: core.Input, args: ['data',] }],
@@ -1798,6 +1857,8 @@
1798
1857
  return RAWidgetContainer;
1799
1858
  }());
1800
1859
  if (false) {
1860
+ /** @type {?} */
1861
+ RAWidgetContainer.prototype.showPanel;
1801
1862
  /**
1802
1863
  * @type {?}
1803
1864
  * @private
@@ -1827,8 +1888,12 @@
1827
1888
  /** @type {?} */
1828
1889
  RAWidgetContainer.prototype.isDownloadIconVisible;
1829
1890
  /** @type {?} */
1891
+ RAWidgetContainer.prototype.dropDownShown;
1892
+ /** @type {?} */
1830
1893
  RAWidgetContainer.prototype.ctlWidget;
1831
1894
  /** @type {?} */
1895
+ RAWidgetContainer.prototype.widgetDropdown;
1896
+ /** @type {?} */
1832
1897
  RAWidgetContainer.prototype.widgetInstanceId;
1833
1898
  /** @type {?} */
1834
1899
  RAWidgetContainer.prototype.globalFilter;
@@ -1869,6 +1934,11 @@
1869
1934
  * @private
1870
1935
  */
1871
1936
  RAWidgetContainer.prototype.notifier;
1937
+ /**
1938
+ * @type {?}
1939
+ * @private
1940
+ */
1941
+ RAWidgetContainer.prototype.renderer;
1872
1942
  }
1873
1943
 
1874
1944
  /**