@schneideress/dashboardframework 0.0.247 → 0.0.249
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.
- package/bundles/schneideress-dashboardframework.umd.js +98 -105
- package/bundles/schneideress-dashboardframework.umd.js.map +1 -1
- package/bundles/schneideress-dashboardframework.umd.min.js +1 -1
- package/bundles/schneideress-dashboardframework.umd.min.js.map +1 -1
- package/esm2015/gridster/lib/gridster.component.js +65 -101
- package/esm2015/lib/ra-dashboard-area/ra.dashboard.area.js +9 -2
- package/esm2015/lib/ra-widget-container/ra.widget.container.component.js +27 -11
- package/esm2015/lib/ra.base.dashboard.template.js +5 -1
- package/esm2015/lib/ra.dashboard.service.js +1 -1
- package/esm2015/lib/ra.event.enum.js +3 -1
- package/esm5/gridster/lib/gridster.component.js +65 -101
- package/esm5/lib/ra-dashboard-area/ra.dashboard.area.js +9 -2
- package/esm5/lib/ra-widget-container/ra.widget.container.component.js +27 -11
- package/esm5/lib/ra.base.dashboard.template.js +5 -1
- package/esm5/lib/ra.dashboard.service.js +1 -1
- package/esm5/lib/ra.event.enum.js +3 -1
- package/fesm2015/schneideress-dashboardframework.js +98 -105
- package/fesm2015/schneideress-dashboardframework.js.map +1 -1
- package/fesm5/schneideress-dashboardframework.js +98 -105
- package/fesm5/schneideress-dashboardframework.js.map +1 -1
- package/gridster/lib/gridster.component.d.ts +9 -9
- package/lib/ra-dashboard-area/ra.dashboard.area.d.ts +4 -1
- package/lib/ra-widget-container/ra.widget.container.component.d.ts +3 -1
- package/lib/ra.base.dashboard.template.d.ts +2 -1
- package/lib/ra.event.enum.d.ts +3 -1
- package/package.json +1 -1
- package/schneideress-dashboardframework.metadata.json +1 -1
|
@@ -180,6 +180,8 @@ var RAEvent;
|
|
|
180
180
|
RAEvent["UpdateAppledFiterForInapplicableFilter"] = "UpdateAppledFiterForInapplicableFilter";
|
|
181
181
|
/**show inapplicable filter message in global filter flyout */
|
|
182
182
|
RAEvent["ShowInapplicableFilterMessage"] = "ShowInapplicableFilterMessage";
|
|
183
|
+
/** Bulk Action Clicked */
|
|
184
|
+
RAEvent["BulkActionClick"] = "BulkActionClick";
|
|
183
185
|
})(RAEvent || (RAEvent = {}));
|
|
184
186
|
var RAEventKey;
|
|
185
187
|
(function (RAEventKey) {
|
|
@@ -424,6 +426,9 @@ let RADashboardArea = class RADashboardArea {
|
|
|
424
426
|
}
|
|
425
427
|
else {
|
|
426
428
|
setTimeout(() => {
|
|
429
|
+
this.raDashboardEventBus.subscribe(RAEvent.BulkActionClick).subscribe((data) => {
|
|
430
|
+
this.bulkActionData = JSON.parse(JSON.stringify(data)); // To create a new reference;
|
|
431
|
+
});
|
|
427
432
|
this.gridcellHeight = this.options.api.getCurrentRowHeight();
|
|
428
433
|
this.domResized = !this.domResized;
|
|
429
434
|
this.setAreaHeight();
|
|
@@ -829,6 +834,10 @@ __decorate([
|
|
|
829
834
|
Input('app-config'),
|
|
830
835
|
__metadata("design:type", Object)
|
|
831
836
|
], RADashboardArea.prototype, "appConfig", void 0);
|
|
837
|
+
__decorate([
|
|
838
|
+
Input('dashboard-info'),
|
|
839
|
+
__metadata("design:type", Object)
|
|
840
|
+
], RADashboardArea.prototype, "dashboardInfo", void 0);
|
|
832
841
|
__decorate([
|
|
833
842
|
Output(),
|
|
834
843
|
__metadata("design:type", Object)
|
|
@@ -840,7 +849,7 @@ __decorate([
|
|
|
840
849
|
RADashboardArea = __decorate([
|
|
841
850
|
Component({
|
|
842
851
|
selector: 'ra-dashboard-area',
|
|
843
|
-
template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\" [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\"\r\n (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\" [global-filter]=\"globalFilter\"\r\n [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\" [widget-width]=\"item.cols\"\r\n [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"\r\n (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n </ra-widget-container>\r\n </gridster-item>\r\n </gridster>\r\n\r\n <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n <div class=\"empty-wrapper\">\r\n <div></div>\r\n <div class=\"m-1 empty-prefix\">\r\n <i class=\"fal fa-edit edit-icon\"></i>\r\n <span class=\"empty-title\">{{'dashboard.emptydashboard'|translate}}</span>\r\n </div>\r\n <div class=\"empty-content light\">\r\n <div>\r\n <div class=\"col-sm-12 empty-msg\">\r\n {{'dashboard.emptydashboardmessage'|translate}} <br />\r\n {{'dashboard.emptydashboardmessage2'|translate}}\r\n </div>\r\n <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm m-1 dashboard-button light\" (click)=\"addNewWidget()\">\r\n <i class=\"fal fa-plus m-1\"></i>{{'dashboard.addawidgets'|translate}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <notifier-container></notifier-container>\r\n</div>",
|
|
852
|
+
template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\" [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n <ra-widget-container [dashboard-info]=\"dashboardInfo\" [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\"\r\n (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\" [global-filter]=\"globalFilter\"\r\n [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\" [widget-width]=\"item.cols\"\r\n [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"\r\n (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n </ra-widget-container>\r\n </gridster-item>\r\n </gridster>\r\n\r\n <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n <div class=\"empty-wrapper\">\r\n <div></div>\r\n <div class=\"m-1 empty-prefix\">\r\n <i class=\"fal fa-edit edit-icon\"></i>\r\n <span class=\"empty-title\">{{'dashboard.emptydashboard'|translate}}</span>\r\n </div>\r\n <div class=\"empty-content light\">\r\n <div>\r\n <div class=\"col-sm-12 empty-msg\">\r\n {{'dashboard.emptydashboardmessage'|translate}} <br />\r\n {{'dashboard.emptydashboardmessage2'|translate}}\r\n </div>\r\n <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm m-1 dashboard-button light\" (click)=\"addNewWidget()\">\r\n <i class=\"fal fa-plus m-1\"></i>{{'dashboard.addawidgets'|translate}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <notifier-container></notifier-container>\r\n</div>",
|
|
844
853
|
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;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)}@media screen and (max-width:685px){.gridster-mobile{height:auto!important;margin-bottom:50px!important}}@media screen and (max-width:350px){.gridster-mobile{min-height:330px!important;margin-bottom:0!important}}.empty-padding{padding:40px 20px 20px;background-color:#ededed;display:flex;justify-content:center;align-content:center}.empty-wrapper{display:flex;background-color:#fff;border-radius:8px;min-height:125px;width:72%}.empty-prefix{color:#32ad3c;font-size:18px;display:flex;align-items:center;padding:10px 30px;min-width:-webkit-max-content;min-width:max-content;min-width:-moz-max-content}.empty-content{color:#333;border-left:1px solid #a9afb1;width:100%;display:flex;align-items:center;padding:15px 30px 10px 40px}.empty-msg{padding:0 0 5px;font-size:16px}.dashboard-button{padding:5px 10px 5px 5px!important}.btnLib{background-color:#ededed;color:#333!important}.btn-group-sm>.btn,.btn-sm{padding:5px 20px 5px 5px}.edit-icon{color:#32ad3c;font-size:24px;margin-right:15px}.empty-title{margin-top:10px}@media screen and (max-width:600px){.empty-padding{padding:10px;background-color:#ededed;width:100%;display:block}.empty-wrapper{display:flex;background-color:#fff;border-radius:8px;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:16px;display:flex;height:40px;padding:6px 10px 8px}.empty-content{color:#333;display:flex;padding:5px 10px 10px;margin-top:44px;margin-left:-185px;border-left:none}.empty-msg{padding:12px 10px 10px 5px;font-size:14px;border-top:1px solid #a9afb1}.edit-icon{color:#32ad3c;font-size:20px;margin-right:6px}.empty-title{margin-top:6px}}"]
|
|
845
854
|
}),
|
|
846
855
|
__metadata("design:paramtypes", [RaDashboardService,
|
|
@@ -977,20 +986,27 @@ let RAWidgetContainer = class RAWidgetContainer {
|
|
|
977
986
|
});
|
|
978
987
|
});
|
|
979
988
|
}
|
|
980
|
-
if (this.widgetElement
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
989
|
+
if (this.widgetElement) {
|
|
990
|
+
if (changes.bulkActionData && changes.bulkActionData.currentValue != changes.bulkActionData.previousValue) {
|
|
991
|
+
if (typeof this.widgetElement.bulkActionClicked === "function") {
|
|
992
|
+
this.widgetElement.bulkActionClicked(this.bulkActionData);
|
|
993
|
+
}
|
|
994
|
+
}
|
|
995
|
+
if (changes.globalFilter && changes.globalFilter.currentValue != changes.globalFilter.previousValue) {
|
|
996
|
+
let filterObj = this.getParsedConfig(this.globalFilter);
|
|
997
|
+
if (filterObj.WidgetInstanceId) {
|
|
998
|
+
if (this.data.widgetInfo.widgetInstanceId != filterObj.WidgetInstanceId)
|
|
999
|
+
this.refreshWidget(this.data.widgetInfo);
|
|
1000
|
+
}
|
|
1001
|
+
else {
|
|
984
1002
|
this.refreshWidget(this.data.widgetInfo);
|
|
1003
|
+
}
|
|
985
1004
|
}
|
|
986
|
-
|
|
987
|
-
|
|
1005
|
+
if (changes.width && changes.width.currentValue != changes.width.previousValue ||
|
|
1006
|
+
(changes.height && changes.height.currentValue != changes.height.previousValue)) {
|
|
1007
|
+
this.invokeWidgetResizedEvent();
|
|
988
1008
|
}
|
|
989
1009
|
}
|
|
990
|
-
if (changes.width && changes.width.currentValue != changes.width.previousValue ||
|
|
991
|
-
(changes.height && changes.height.currentValue != changes.height.previousValue)) {
|
|
992
|
-
this.invokeWidgetResizedEvent();
|
|
993
|
-
}
|
|
994
1010
|
}
|
|
995
1011
|
invokeWidgetResizedEvent() {
|
|
996
1012
|
if (this.widgetElement) {
|
|
@@ -1240,6 +1256,7 @@ let RAWidgetContainer = class RAWidgetContainer {
|
|
|
1240
1256
|
widgetConfigFilter.configChanges = this.getConfigChanges(false);
|
|
1241
1257
|
widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
|
|
1242
1258
|
widgetConfigFilter.globalFilter = this.globalFilter;
|
|
1259
|
+
widgetConfigFilter.dashboardInfo = me.dashboardInfo;
|
|
1243
1260
|
this.widgetElement.loadContent(widgetConfigFilter);
|
|
1244
1261
|
yield this.setLock(widgetConfigFilter.config);
|
|
1245
1262
|
yield this.setDownloadIcon();
|
|
@@ -1646,6 +1663,10 @@ __decorate([
|
|
|
1646
1663
|
Input('global-filter'),
|
|
1647
1664
|
__metadata("design:type", Object)
|
|
1648
1665
|
], RAWidgetContainer.prototype, "globalFilter", void 0);
|
|
1666
|
+
__decorate([
|
|
1667
|
+
Input('dashboard-info'),
|
|
1668
|
+
__metadata("design:type", Object)
|
|
1669
|
+
], RAWidgetContainer.prototype, "dashboardInfo", void 0);
|
|
1649
1670
|
__decorate([
|
|
1650
1671
|
Input('data'),
|
|
1651
1672
|
__metadata("design:type", Object)
|
|
@@ -1670,6 +1691,10 @@ __decorate([
|
|
|
1670
1691
|
Input('grid-cell-height'),
|
|
1671
1692
|
__metadata("design:type", Number)
|
|
1672
1693
|
], RAWidgetContainer.prototype, "gridCellHeight", void 0);
|
|
1694
|
+
__decorate([
|
|
1695
|
+
Input('bulk-action-data'),
|
|
1696
|
+
__metadata("design:type", Object)
|
|
1697
|
+
], RAWidgetContainer.prototype, "bulkActionData", void 0);
|
|
1673
1698
|
__decorate([
|
|
1674
1699
|
Output(),
|
|
1675
1700
|
__metadata("design:type", Object)
|
|
@@ -2552,10 +2577,10 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2552
2577
|
this.gridRenderer = new GridsterRenderer(this);
|
|
2553
2578
|
}
|
|
2554
2579
|
static checkCollisionTwoItems(item, item2) {
|
|
2555
|
-
return
|
|
2556
|
-
item.x + item.cols > item2.x
|
|
2557
|
-
item.y < item2.y + item2.rows
|
|
2558
|
-
item.y + item.rows > item2.y
|
|
2580
|
+
return item.x < item2.x + item2.cols
|
|
2581
|
+
&& item.x + item.cols > item2.x
|
|
2582
|
+
&& item.y < item2.y + item2.rows
|
|
2583
|
+
&& item.y + item.rows > item2.y;
|
|
2559
2584
|
}
|
|
2560
2585
|
ngOnInit() {
|
|
2561
2586
|
if (this.options.initCallback) {
|
|
@@ -2563,7 +2588,6 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2563
2588
|
}
|
|
2564
2589
|
}
|
|
2565
2590
|
ngOnChanges(changes) {
|
|
2566
|
-
console.log(this.$options);
|
|
2567
2591
|
if (changes.options) {
|
|
2568
2592
|
this.setOptions();
|
|
2569
2593
|
this.options.api = {
|
|
@@ -2572,7 +2596,7 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2572
2596
|
getNextPossiblePosition: this.getNextPossiblePosition.bind(this),
|
|
2573
2597
|
getFirstPossiblePosition: this.getFirstPossiblePosition.bind(this),
|
|
2574
2598
|
getLastPossiblePosition: this.getLastPossiblePosition.bind(this),
|
|
2575
|
-
getCurrentRowHeight: this.getCurrentRowHeight.bind(this)
|
|
2599
|
+
getCurrentRowHeight: this.getCurrentRowHeight.bind(this)
|
|
2576
2600
|
};
|
|
2577
2601
|
this.columns = this.$options.minCols;
|
|
2578
2602
|
this.rows = this.$options.minRows;
|
|
@@ -2586,7 +2610,7 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2586
2610
|
resize() {
|
|
2587
2611
|
let height;
|
|
2588
2612
|
let width;
|
|
2589
|
-
if (this.$options.gridType ===
|
|
2613
|
+
if (this.$options.gridType === 'fit' && !this.mobile) {
|
|
2590
2614
|
width = this.el.offsetWidth;
|
|
2591
2615
|
height = this.el.offsetHeight;
|
|
2592
2616
|
}
|
|
@@ -2594,15 +2618,14 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2594
2618
|
width = this.el.clientWidth;
|
|
2595
2619
|
height = this.el.clientHeight;
|
|
2596
2620
|
}
|
|
2597
|
-
if ((width !== this.curWidth || height !== this.curHeight) &&
|
|
2598
|
-
this.checkIfToResize()) {
|
|
2621
|
+
if ((width !== this.curWidth || height !== this.curHeight) && this.checkIfToResize()) {
|
|
2599
2622
|
this.onResize();
|
|
2600
2623
|
}
|
|
2601
2624
|
}
|
|
2602
2625
|
setOptions() {
|
|
2603
2626
|
this.$options = GridsterUtils.merge(this.$options, this.options, this.$options);
|
|
2604
2627
|
if (!this.$options.disableWindowResize && !this.windowResize) {
|
|
2605
|
-
this.windowResize = this.renderer.listen(
|
|
2628
|
+
this.windowResize = this.renderer.listen('window', 'resize', this.onResize.bind(this));
|
|
2606
2629
|
}
|
|
2607
2630
|
else if (this.$options.disableWindowResize && this.windowResize) {
|
|
2608
2631
|
this.windowResize();
|
|
@@ -2628,9 +2651,9 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2628
2651
|
}
|
|
2629
2652
|
//if (this.options.api) {
|
|
2630
2653
|
/* this.options.api getting undefined for new dashboard load- temp fix
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2654
|
+
* on new dashboard area load, old dashboard area gets destroyed, but that leads to
|
|
2655
|
+
* ondestroy of current this.options.api instance - needs to investigate further
|
|
2656
|
+
*/
|
|
2634
2657
|
if (false) {
|
|
2635
2658
|
this.options.api.resize = undefined;
|
|
2636
2659
|
this.options.api.optionsChanged = undefined;
|
|
@@ -2653,12 +2676,10 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2653
2676
|
const clientHeight = this.el.clientHeight;
|
|
2654
2677
|
const offsetHeight = this.el.offsetHeight;
|
|
2655
2678
|
const scrollHeight = this.el.scrollHeight;
|
|
2656
|
-
const verticalScrollPresent = clientWidth < offsetWidth &&
|
|
2657
|
-
scrollHeight
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
scrollWidth > offsetWidth &&
|
|
2661
|
-
scrollWidth - offsetWidth < offsetHeight - clientHeight;
|
|
2679
|
+
const verticalScrollPresent = clientWidth < offsetWidth && scrollHeight > offsetHeight
|
|
2680
|
+
&& scrollHeight - offsetHeight < offsetWidth - clientWidth;
|
|
2681
|
+
const horizontalScrollPresent = clientHeight < offsetHeight
|
|
2682
|
+
&& scrollWidth > offsetWidth && scrollWidth - offsetWidth < offsetHeight - clientHeight;
|
|
2662
2683
|
if (verticalScrollPresent) {
|
|
2663
2684
|
return false;
|
|
2664
2685
|
}
|
|
@@ -2668,8 +2689,7 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2668
2689
|
const el = this.el;
|
|
2669
2690
|
let width = el.clientWidth;
|
|
2670
2691
|
let height = el.clientHeight;
|
|
2671
|
-
if (this.$options.setGridSize ||
|
|
2672
|
-
(this.$options.gridType === "fit" && !this.mobile)) {
|
|
2692
|
+
if (this.$options.setGridSize || this.$options.gridType === 'fit' && !this.mobile) {
|
|
2673
2693
|
width = el.offsetWidth;
|
|
2674
2694
|
height = el.offsetHeight;
|
|
2675
2695
|
}
|
|
@@ -2684,11 +2704,11 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2684
2704
|
this.setGridSize();
|
|
2685
2705
|
if (!this.mobile && this.$options.mobileBreakpoint > this.curWidth) {
|
|
2686
2706
|
this.mobile = !this.mobile;
|
|
2687
|
-
this.renderer.addClass(this.el,
|
|
2707
|
+
this.renderer.addClass(this.el, 'mobile');
|
|
2688
2708
|
}
|
|
2689
2709
|
else if (this.mobile && this.$options.mobileBreakpoint < this.curWidth) {
|
|
2690
2710
|
this.mobile = !this.mobile;
|
|
2691
|
-
this.renderer.removeClass(this.el,
|
|
2711
|
+
this.renderer.removeClass(this.el, 'mobile');
|
|
2692
2712
|
}
|
|
2693
2713
|
let rows = this.$options.minRows, columns = this.$options.minCols;
|
|
2694
2714
|
let widgetsIndex = this.grid.length - 1, widget;
|
|
@@ -2716,57 +2736,57 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2716
2736
|
let marginWidth = -this.$options.margin;
|
|
2717
2737
|
if (this.$options.outerMarginLeft !== null) {
|
|
2718
2738
|
marginWidth += this.$options.outerMarginLeft;
|
|
2719
|
-
this.renderer.setStyle(this.el,
|
|
2739
|
+
this.renderer.setStyle(this.el, 'padding-left', this.$options.outerMarginLeft + 'px');
|
|
2720
2740
|
}
|
|
2721
2741
|
else {
|
|
2722
2742
|
marginWidth += this.$options.margin;
|
|
2723
|
-
this.renderer.setStyle(this.el,
|
|
2743
|
+
this.renderer.setStyle(this.el, 'padding-left', this.$options.margin + 'px');
|
|
2724
2744
|
}
|
|
2725
2745
|
if (this.$options.outerMarginRight !== null) {
|
|
2726
2746
|
marginWidth += this.$options.outerMarginRight;
|
|
2727
|
-
this.renderer.setStyle(this.el,
|
|
2747
|
+
this.renderer.setStyle(this.el, 'padding-right', this.$options.outerMarginRight + 'px');
|
|
2728
2748
|
}
|
|
2729
2749
|
else {
|
|
2730
2750
|
marginWidth += this.$options.margin;
|
|
2731
|
-
this.renderer.setStyle(this.el,
|
|
2751
|
+
this.renderer.setStyle(this.el, 'padding-right', this.$options.margin + 'px');
|
|
2732
2752
|
}
|
|
2733
2753
|
this.curColWidth = (this.curWidth - marginWidth) / this.columns;
|
|
2734
2754
|
let marginHeight = -this.$options.margin;
|
|
2735
2755
|
if (this.$options.outerMarginTop !== null) {
|
|
2736
2756
|
marginHeight += this.$options.outerMarginTop;
|
|
2737
|
-
this.renderer.setStyle(this.el,
|
|
2757
|
+
this.renderer.setStyle(this.el, 'padding-top', this.$options.outerMarginTop + 'px');
|
|
2738
2758
|
}
|
|
2739
2759
|
else {
|
|
2740
2760
|
marginHeight += this.$options.margin;
|
|
2741
|
-
this.renderer.setStyle(this.el,
|
|
2761
|
+
this.renderer.setStyle(this.el, 'padding-top', this.$options.margin + 'px');
|
|
2742
2762
|
}
|
|
2743
2763
|
if (this.$options.outerMarginBottom !== null) {
|
|
2744
2764
|
marginHeight += this.$options.outerMarginBottom;
|
|
2745
|
-
this.renderer.setStyle(this.el,
|
|
2765
|
+
this.renderer.setStyle(this.el, 'padding-bottom', this.$options.outerMarginBottom + 'px');
|
|
2746
2766
|
}
|
|
2747
2767
|
else {
|
|
2748
2768
|
marginHeight += this.$options.margin;
|
|
2749
|
-
this.renderer.setStyle(this.el,
|
|
2769
|
+
this.renderer.setStyle(this.el, 'padding-bottom', this.$options.margin + 'px');
|
|
2750
2770
|
}
|
|
2751
2771
|
this.curRowHeight = (this.curHeight - marginHeight) / this.rows;
|
|
2752
2772
|
}
|
|
2753
2773
|
else {
|
|
2754
2774
|
this.curColWidth = (this.curWidth + this.$options.margin) / this.columns;
|
|
2755
2775
|
this.curRowHeight = (this.curHeight + this.$options.margin) / this.rows;
|
|
2756
|
-
this.renderer.setStyle(this.el,
|
|
2757
|
-
this.renderer.setStyle(this.el,
|
|
2758
|
-
this.renderer.setStyle(this.el,
|
|
2759
|
-
this.renderer.setStyle(this.el,
|
|
2776
|
+
this.renderer.setStyle(this.el, 'padding-left', 0 + 'px');
|
|
2777
|
+
this.renderer.setStyle(this.el, 'padding-right', 0 + 'px');
|
|
2778
|
+
this.renderer.setStyle(this.el, 'padding-top', 0 + 'px');
|
|
2779
|
+
this.renderer.setStyle(this.el, 'padding-bottom', 0 + 'px');
|
|
2760
2780
|
}
|
|
2761
2781
|
this.gridRenderer.updateGridster();
|
|
2762
2782
|
this.updateGrid();
|
|
2763
2783
|
if (this.$options.setGridSize) {
|
|
2764
|
-
this.renderer.setStyle(this.el,
|
|
2765
|
-
this.renderer.setStyle(this.el,
|
|
2784
|
+
this.renderer.setStyle(this.el, 'width', (this.columns * this.curColWidth + this.$options.margin) + 'px');
|
|
2785
|
+
this.renderer.setStyle(this.el, 'height', (this.rows * this.curRowHeight + this.$options.margin) + 'px');
|
|
2766
2786
|
}
|
|
2767
2787
|
else {
|
|
2768
|
-
this.renderer.setStyle(this.el,
|
|
2769
|
-
this.renderer.setStyle(this.el,
|
|
2788
|
+
this.renderer.setStyle(this.el, 'width', '');
|
|
2789
|
+
this.renderer.setStyle(this.el, 'height', '');
|
|
2770
2790
|
}
|
|
2771
2791
|
let widgetsIndex = this.grid.length - 1, widget;
|
|
2772
2792
|
for (; widgetsIndex >= 0; widgetsIndex--) {
|
|
@@ -2778,23 +2798,18 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2778
2798
|
setTimeout(this.resize.bind(this), 100);
|
|
2779
2799
|
}
|
|
2780
2800
|
updateGrid() {
|
|
2781
|
-
if (this.$options.displayGrid ===
|
|
2782
|
-
this.renderer.addClass(this.el,
|
|
2801
|
+
if (this.$options.displayGrid === 'always' && !this.mobile) {
|
|
2802
|
+
this.renderer.addClass(this.el, 'display-grid');
|
|
2783
2803
|
}
|
|
2784
|
-
else if (this.$options.displayGrid ===
|
|
2785
|
-
this.
|
|
2786
|
-
this.renderer.addClass(this.el, "display-grid");
|
|
2804
|
+
else if (this.$options.displayGrid === 'onDrag&Resize' && this.dragInProgress) {
|
|
2805
|
+
this.renderer.addClass(this.el, 'display-grid');
|
|
2787
2806
|
}
|
|
2788
|
-
else if (this.$options.displayGrid ===
|
|
2789
|
-
|
|
2790
|
-
this.mobile) {
|
|
2791
|
-
this.renderer.removeClass(this.el, "display-grid");
|
|
2807
|
+
else if (this.$options.displayGrid === 'none' || !this.dragInProgress || this.mobile) {
|
|
2808
|
+
this.renderer.removeClass(this.el, 'display-grid');
|
|
2792
2809
|
}
|
|
2793
2810
|
this.setGridDimensions();
|
|
2794
|
-
this.gridColumns.length =
|
|
2795
|
-
|
|
2796
|
-
this.gridRows.length =
|
|
2797
|
-
Math.max(this.rows, Math.floor(this.curHeight / this.curRowHeight)) || 0;
|
|
2811
|
+
this.gridColumns.length = Math.max(this.columns, Math.floor(this.curWidth / this.curColWidth)) || 0;
|
|
2812
|
+
this.gridRows.length = Math.max(this.rows, Math.floor(this.curHeight / this.curRowHeight)) || 0;
|
|
2798
2813
|
this.cdRef.markForCheck();
|
|
2799
2814
|
}
|
|
2800
2815
|
addItem(itemComponent) {
|
|
@@ -2814,8 +2829,8 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2814
2829
|
else if (this.checkCollision(itemComponent.$item)) {
|
|
2815
2830
|
if (!this.$options.disableWarnings) {
|
|
2816
2831
|
itemComponent.notPlaced = true;
|
|
2817
|
-
console.warn(
|
|
2818
|
-
JSON.stringify(itemComponent.item, [
|
|
2832
|
+
console.warn('Can\'t be placed in the bounds of the dashboard, trying to auto position!/n' +
|
|
2833
|
+
JSON.stringify(itemComponent.item, ['cols', 'rows', 'x', 'y']));
|
|
2819
2834
|
}
|
|
2820
2835
|
if (!this.$options.disableAutoPositionOnConflict) {
|
|
2821
2836
|
this.autoPositionItem(itemComponent);
|
|
@@ -2854,43 +2869,24 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2854
2869
|
const noNegativePosition = item.y > -1 && item.x > -1;
|
|
2855
2870
|
const maxGridCols = item.cols + item.x <= this.$options.maxCols;
|
|
2856
2871
|
const maxGridRows = item.rows + item.y <= this.$options.maxRows;
|
|
2857
|
-
const maxItemCols = item.maxItemCols === undefined
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
const
|
|
2861
|
-
? this.$options.minItemCols
|
|
2862
|
-
: item.minItemCols;
|
|
2863
|
-
const maxItemRows = item.maxItemRows === undefined
|
|
2864
|
-
? this.$options.maxItemRows
|
|
2865
|
-
: item.maxItemRows;
|
|
2866
|
-
const minItemRows = item.minItemRows === undefined
|
|
2867
|
-
? this.$options.minItemRows
|
|
2868
|
-
: item.minItemRows;
|
|
2872
|
+
const maxItemCols = item.maxItemCols === undefined ? this.$options.maxItemCols : item.maxItemCols;
|
|
2873
|
+
const minItemCols = item.minItemCols === undefined ? this.$options.minItemCols : item.minItemCols;
|
|
2874
|
+
const maxItemRows = item.maxItemRows === undefined ? this.$options.maxItemRows : item.maxItemRows;
|
|
2875
|
+
const minItemRows = item.minItemRows === undefined ? this.$options.minItemRows : item.minItemRows;
|
|
2869
2876
|
const inColsLimits = item.cols <= maxItemCols && item.cols >= minItemCols;
|
|
2870
2877
|
const inRowsLimits = item.rows <= maxItemRows && item.rows >= minItemRows;
|
|
2871
|
-
const minAreaLimit = item.minItemArea === undefined
|
|
2872
|
-
|
|
2873
|
-
: item.minItemArea;
|
|
2874
|
-
const maxAreaLimit = item.maxItemArea === undefined
|
|
2875
|
-
? this.$options.maxItemArea
|
|
2876
|
-
: item.maxItemArea;
|
|
2878
|
+
const minAreaLimit = item.minItemArea === undefined ? this.$options.minItemArea : item.minItemArea;
|
|
2879
|
+
const maxAreaLimit = item.maxItemArea === undefined ? this.$options.maxItemArea : item.maxItemArea;
|
|
2877
2880
|
const area = item.cols * item.rows;
|
|
2878
2881
|
const inMinArea = minAreaLimit <= area;
|
|
2879
2882
|
const inMaxArea = maxAreaLimit >= area;
|
|
2880
|
-
return !(noNegativePosition &&
|
|
2881
|
-
maxGridCols &&
|
|
2882
|
-
maxGridRows &&
|
|
2883
|
-
inColsLimits &&
|
|
2884
|
-
inRowsLimits &&
|
|
2885
|
-
inMinArea &&
|
|
2886
|
-
inMaxArea);
|
|
2883
|
+
return !(noNegativePosition && maxGridCols && maxGridRows && inColsLimits && inRowsLimits && inMinArea && inMaxArea);
|
|
2887
2884
|
}
|
|
2888
2885
|
findItemWithItem(item) {
|
|
2889
2886
|
let widgetsIndex = this.grid.length - 1, widget;
|
|
2890
2887
|
for (; widgetsIndex > -1; widgetsIndex--) {
|
|
2891
2888
|
widget = this.grid[widgetsIndex];
|
|
2892
|
-
if (widget.$item !== item &&
|
|
2893
|
-
GridsterComponent_1.checkCollisionTwoItems(widget.$item, item)) {
|
|
2889
|
+
if (widget.$item !== item && GridsterComponent_1.checkCollisionTwoItems(widget.$item, item)) {
|
|
2894
2890
|
return widget;
|
|
2895
2891
|
}
|
|
2896
2892
|
}
|
|
@@ -2901,8 +2897,7 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2901
2897
|
let widgetsIndex = this.grid.length - 1, widget;
|
|
2902
2898
|
for (; widgetsIndex > -1; widgetsIndex--) {
|
|
2903
2899
|
widget = this.grid[widgetsIndex];
|
|
2904
|
-
if (widget.$item !== item &&
|
|
2905
|
-
GridsterComponent_1.checkCollisionTwoItems(widget.$item, item)) {
|
|
2900
|
+
if (widget.$item !== item && GridsterComponent_1.checkCollisionTwoItems(widget.$item, item)) {
|
|
2906
2901
|
a.push(widget);
|
|
2907
2902
|
}
|
|
2908
2903
|
}
|
|
@@ -2918,8 +2913,8 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2918
2913
|
else {
|
|
2919
2914
|
itemComponent.notPlaced = true;
|
|
2920
2915
|
if (!this.$options.disableWarnings) {
|
|
2921
|
-
console.warn(
|
|
2922
|
-
JSON.stringify(itemComponent.item, [
|
|
2916
|
+
console.warn('Can\'t be placed in the bounds of the dashboard!/n' +
|
|
2917
|
+
JSON.stringify(itemComponent.item, ['cols', 'rows', 'x', 'y']));
|
|
2923
2918
|
}
|
|
2924
2919
|
}
|
|
2925
2920
|
}
|
|
@@ -2965,10 +2960,7 @@ let GridsterComponent = GridsterComponent_1 = class GridsterComponent {
|
|
|
2965
2960
|
getLastPossiblePosition(item) {
|
|
2966
2961
|
let farthestItem = { y: 0, x: 0 };
|
|
2967
2962
|
farthestItem = this.grid.reduce((prev, curr) => {
|
|
2968
|
-
const currCoords = {
|
|
2969
|
-
y: curr.$item.y + curr.$item.rows - 1,
|
|
2970
|
-
x: curr.$item.x + curr.$item.cols - 1,
|
|
2971
|
-
};
|
|
2963
|
+
const currCoords = { y: curr.$item.y + curr.$item.rows - 1, x: curr.$item.x + curr.$item.cols - 1 };
|
|
2972
2964
|
if (GridsterUtils.compareItems(prev, currCoords) === 1) {
|
|
2973
2965
|
return currCoords;
|
|
2974
2966
|
}
|
|
@@ -3017,15 +3009,12 @@ __decorate([
|
|
|
3017
3009
|
], GridsterComponent.prototype, "options", void 0);
|
|
3018
3010
|
GridsterComponent = GridsterComponent_1 = __decorate([
|
|
3019
3011
|
Component({
|
|
3020
|
-
selector:
|
|
3012
|
+
selector: 'gridster',
|
|
3021
3013
|
template: "<div class=\"gridster-column\" *ngFor=\"let column of gridColumns; let i = index;\"\r\n [ngStyle]=\"gridRenderer.getGridColumnStyle(i)\"></div>\r\n<div class=\"gridster-row\" *ngFor=\"let row of gridRows; let i = index;\"\r\n [ngStyle]=\"gridRenderer.getGridRowStyle(i)\"></div>\r\n<ng-content></ng-content>\r\n<gridster-preview class=\"gridster-preview\"></gridster-preview>\r\n",
|
|
3022
3014
|
encapsulation: ViewEncapsulation.None,
|
|
3023
3015
|
styles: ["gridster{clear:both;position:relative;box-sizing:border-box;background:#fff;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:block;overflow:auto}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto;flex-flow:column}gridster.mobile gridster-item{position:relative;width:100%!important;min-height:300px!important}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid #ccc;border-right:1px solid #ccc}gridster .gridster-row{border-top:1px solid #ccc;border-bottom:1px solid #ccc}"]
|
|
3024
3016
|
}),
|
|
3025
|
-
__metadata("design:paramtypes", [ElementRef,
|
|
3026
|
-
Renderer2,
|
|
3027
|
-
ChangeDetectorRef,
|
|
3028
|
-
NgZone])
|
|
3017
|
+
__metadata("design:paramtypes", [ElementRef, Renderer2, ChangeDetectorRef, NgZone])
|
|
3029
3018
|
], GridsterComponent);
|
|
3030
3019
|
|
|
3031
3020
|
class GridsterItemComponentInterface {
|
|
@@ -4691,6 +4680,10 @@ __decorate([
|
|
|
4691
4680
|
Input('global-filter'),
|
|
4692
4681
|
__metadata("design:type", Object)
|
|
4693
4682
|
], RaBaseDashboardTemplate.prototype, "globalFilter", void 0);
|
|
4683
|
+
__decorate([
|
|
4684
|
+
Input('dashboard-info'),
|
|
4685
|
+
__metadata("design:type", Object)
|
|
4686
|
+
], RaBaseDashboardTemplate.prototype, "dashboardInfo", void 0);
|
|
4694
4687
|
__decorate([
|
|
4695
4688
|
Input(),
|
|
4696
4689
|
__metadata("design:type", Object)
|