@schneideress/dashboardframework 0.0.98 → 0.0.100

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.
@@ -638,13 +638,13 @@ var GridsterConfigDefaultSettings = {
638
638
  minRows: 2,
639
639
  maxRows: 100,
640
640
  maxItemCols: 10,
641
- minItemCols: 3,
641
+ minItemCols: 2,
642
642
  maxItemRows: 1000,
643
- minItemRows: 3,
643
+ minItemRows: 2,
644
644
  maxItemArea: 1000,
645
- minItemArea: 3,
646
- defaultItemCols: 3,
647
- defaultItemRows: 3,
645
+ minItemArea: 4,
646
+ defaultItemCols: 2,
647
+ defaultItemRows: 2,
648
648
  // fixedColWidth: 105,
649
649
  // fixedRowHeight: 105,
650
650
  keepFixedHeightInMobile: false,
@@ -698,6 +698,7 @@ var RADashboardArea = /** @class */ (function () {
698
698
  this.widgetList = Array();
699
699
  this.gridheight = 300;
700
700
  this.isWidgetLoaded = false;
701
+ this.domResized = false;
701
702
  this.widgetHeight = 3;
702
703
  this.widgetWidth = 5;
703
704
  }
@@ -717,6 +718,7 @@ var RADashboardArea = /** @class */ (function () {
717
718
  */
718
719
  function () {
719
720
  areaContext.setAreaHeight();
721
+ areaContext.domResized = !areaContext.domResized;
720
722
  }), 1000);
721
723
  };
722
724
  /**
@@ -745,12 +747,28 @@ var RADashboardArea = /** @class */ (function () {
745
747
  this.inititateEventBusSubscritions();
746
748
  }
747
749
  };
750
+ // public invokeResizeEvent() {
751
+ // this.widgetContainers.forEach(function(container,i){
752
+ // container.invokeWidgetResizedEvent();
753
+ // });
754
+ // }
748
755
  /**To set GridsterConfig */
756
+ // public invokeResizeEvent() {
757
+ // this.widgetContainers.forEach(function(container,i){
758
+ // container.invokeWidgetResizedEvent();
759
+ // });
760
+ // }
749
761
  /**
750
762
  * To set GridsterConfig
751
763
  * @return {?}
752
764
  */
753
- RADashboardArea.prototype.initiateGridsterConfig = /**
765
+ RADashboardArea.prototype.initiateGridsterConfig =
766
+ // public invokeResizeEvent() {
767
+ // this.widgetContainers.forEach(function(container,i){
768
+ // container.invokeWidgetResizedEvent();
769
+ // });
770
+ // }
771
+ /**
754
772
  * To set GridsterConfig
755
773
  * @return {?}
756
774
  */
@@ -997,7 +1015,7 @@ var RADashboardArea = /** @class */ (function () {
997
1015
  areaHeight = 600;
998
1016
  }
999
1017
  this.gridheight = areaHeight;
1000
- console.log('area height adjusted');
1018
+ console.log('area height adjusted1');
1001
1019
  };
1002
1020
  /** To remove a widget instance from dashboard and to save info in database */
1003
1021
  /**
@@ -1195,7 +1213,7 @@ var RADashboardArea = /** @class */ (function () {
1195
1213
  RADashboardArea.decorators = [
1196
1214
  { type: Component, args: [{
1197
1215
  selector: 'ra-dashboard-area',
1198
- 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\" [grid-cell-height]=\"item.widgetInfo.rowHeight\" [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",
1216
+ 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\" [grid-cell-height]=\"item.widgetInfo.rowHeight\" [widget-width]=\"item.cols\" [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"></ra-widget-container>\r\n </gridster-item>\r\n </gridster>\r\n <notifier-container></notifier-container>\r\n</div>\r\n\r\n",
1199
1217
  styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#ededed;overflow-y:hidden!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;box-shadow:0 1px 10px rgba(0,0,0,.05)}gridster-item:hover{box-shadow:0 1px 10px rgba(0,0,0,.15)}"]
1200
1218
  }] }
1201
1219
  ];
@@ -1253,6 +1271,8 @@ if (false) {
1253
1271
  */
1254
1272
  RADashboardArea.prototype.isWidgetLoaded;
1255
1273
  /** @type {?} */
1274
+ RADashboardArea.prototype.domResized;
1275
+ /** @type {?} */
1256
1276
  RADashboardArea.prototype.userDashboardId;
1257
1277
  /** @type {?} */
1258
1278
  RADashboardArea.prototype.areaKey;
@@ -1318,6 +1338,8 @@ var RAWidgetContainer = /** @class */ (function () {
1318
1338
  this.dropDownShown = false;
1319
1339
  this.isDownloadChartVisible = false;
1320
1340
  this.enableTitleLine = false;
1341
+ this.toolTipValue = ' ';
1342
+ this.toolTipWidth = '0px';
1321
1343
  this.widgetDeleted = new EventEmitter();
1322
1344
  this.renderer.listen('window', 'click', (/**
1323
1345
  * @param {?} e
@@ -1338,6 +1360,17 @@ var RAWidgetContainer = /** @class */ (function () {
1338
1360
  }
1339
1361
  }));
1340
1362
  }
1363
+ Object.defineProperty(RAWidgetContainer.prototype, "setResized", {
1364
+ set: /**
1365
+ * @param {?} resized
1366
+ * @return {?}
1367
+ */
1368
+ function (resized) {
1369
+ this.invokeWidgetResizedEvent();
1370
+ },
1371
+ enumerable: true,
1372
+ configurable: true
1373
+ });
1341
1374
  /**
1342
1375
  * @param {?} changes
1343
1376
  * @return {?}
@@ -1367,14 +1400,23 @@ var RAWidgetContainer = /** @class */ (function () {
1367
1400
  }
1368
1401
  if (changes.width && changes.width.currentValue != changes.width.previousValue ||
1369
1402
  (changes.height && changes.height.currentValue != changes.height.previousValue)) {
1370
- if (this.widgetElement) {
1371
- /** @type {?} */
1372
- var size = {};
1373
- size.height = this.height;
1374
- size.width = this.width;
1375
- size.cellHeight = this.gridCellHeight;
1376
- this.widgetElement.widgetResized(size);
1377
- }
1403
+ this.invokeWidgetResizedEvent();
1404
+ }
1405
+ };
1406
+ /**
1407
+ * @return {?}
1408
+ */
1409
+ RAWidgetContainer.prototype.invokeWidgetResizedEvent = /**
1410
+ * @return {?}
1411
+ */
1412
+ function () {
1413
+ if (this.widgetElement) {
1414
+ /** @type {?} */
1415
+ var size = {};
1416
+ size.height = this.height;
1417
+ size.width = this.width;
1418
+ size.cellHeight = this.gridCellHeight;
1419
+ this.widgetElement.widgetResized(size);
1378
1420
  }
1379
1421
  };
1380
1422
  /**
@@ -1605,6 +1647,27 @@ var RAWidgetContainer = /** @class */ (function () {
1605
1647
  });
1606
1648
  });
1607
1649
  };
1650
+ /**
1651
+ * @param {?} event
1652
+ * @return {?}
1653
+ */
1654
+ RAWidgetContainer.prototype.mouseOver = /**
1655
+ * @param {?} event
1656
+ * @return {?}
1657
+ */
1658
+ function (event) {
1659
+ this.toolTipValue = ' ';
1660
+ this.toolTipWidth = '0px';
1661
+ /** @type {?} */
1662
+ var element = this.searchInput.nativeElement;
1663
+ if (element.offsetWidth < element.scrollWidth) {
1664
+ this.toolTipValue = element.innerHTML;
1665
+ this.toolTipWidth = '300px';
1666
+ }
1667
+ else {
1668
+ this.toolTipWidth = '0px';
1669
+ }
1670
+ };
1608
1671
  /**
1609
1672
  * @private
1610
1673
  * @param {?} config
@@ -1754,7 +1817,7 @@ var RAWidgetContainer = /** @class */ (function () {
1754
1817
  RAWidgetContainer.decorators = [
1755
1818
  { type: Component, args: [{
1756
1819
  selector: 'ra-widget-container',
1757
- 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\r\n <div class=\"col-md-11 float-left title-label\">\r\n <ra-tooltip [value]=\"data.widgetInfo.widgetTitle\" [width]=\"'300px'\">\r\n <span>{{data.widgetInfo.widgetTitle}}</span>\r\n </ra-tooltip>\r\n </div>\r\n\r\n\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>",
1820
+ 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\r\n <div class=\"col-md-11 float-left title-label\">\r\n <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n <div style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\" (mouseover)=\"mouseOver($event)\"\r\n #searchInput>{{data.widgetInfo.widgetTitle}}</div>\r\n </ra-tooltip>\r\n </div>\r\n\r\n\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=\"fal 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=\"fal 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>",
1758
1821
  styles: [".wcheader{width:100%;height:45px;background:#fff;color:#3dcd58;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;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;transform:translateY(-20%)}100%{opacity:1;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;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}.title-label{width:96%;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}"]
1759
1822
  }] }
1760
1823
  ];
@@ -1771,6 +1834,7 @@ var RAWidgetContainer = /** @class */ (function () {
1771
1834
  ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
1772
1835
  widgetDropdown: [{ type: ViewChild, args: ['widgetDropdown', { static: false },] }],
1773
1836
  widgetDownload: [{ type: ViewChild, args: ['widgetDownload', { static: false },] }],
1837
+ searchInput: [{ type: ViewChild, args: ['searchInput', { static: false },] }],
1774
1838
  widgetInstanceId: [{ type: Input, args: ['widget-instance-id',] }],
1775
1839
  globalFilter: [{ type: Input, args: ['global-filter',] }],
1776
1840
  data: [{ type: Input, args: ['data',] }],
@@ -1779,7 +1843,8 @@ var RAWidgetContainer = /** @class */ (function () {
1779
1843
  width: [{ type: Input, args: ['widget-width',] }],
1780
1844
  height: [{ type: Input, args: ['widget-height',] }],
1781
1845
  gridCellHeight: [{ type: Input, args: ['grid-cell-height',] }],
1782
- widgetDeleted: [{ type: Output }]
1846
+ widgetDeleted: [{ type: Output }],
1847
+ setResized: [{ type: Input, args: ['dom-resized',] }]
1783
1848
  };
1784
1849
  return RAWidgetContainer;
1785
1850
  }());
@@ -1823,12 +1888,18 @@ if (false) {
1823
1888
  /** @type {?} */
1824
1889
  RAWidgetContainer.prototype.enableTitleLine;
1825
1890
  /** @type {?} */
1891
+ RAWidgetContainer.prototype.toolTipValue;
1892
+ /** @type {?} */
1893
+ RAWidgetContainer.prototype.toolTipWidth;
1894
+ /** @type {?} */
1826
1895
  RAWidgetContainer.prototype.ctlWidget;
1827
1896
  /** @type {?} */
1828
1897
  RAWidgetContainer.prototype.widgetDropdown;
1829
1898
  /** @type {?} */
1830
1899
  RAWidgetContainer.prototype.widgetDownload;
1831
1900
  /** @type {?} */
1901
+ RAWidgetContainer.prototype.searchInput;
1902
+ /** @type {?} */
1832
1903
  RAWidgetContainer.prototype.widgetInstanceId;
1833
1904
  /** @type {?} */
1834
1905
  RAWidgetContainer.prototype.globalFilter;
@@ -1848,6 +1919,8 @@ if (false) {
1848
1919
  RAWidgetContainer.prototype.widgetDeleted;
1849
1920
  /** @type {?} */
1850
1921
  RAWidgetContainer.prototype.lockTitle;
1922
+ /** @type {?} */
1923
+ RAWidgetContainer.prototype.domResized;
1851
1924
  /**
1852
1925
  * @type {?}
1853
1926
  * @private