@colijnit/extendedcomponents 12.0.6 → 12.0.7
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/colijnit-extendedcomponents.umd.js +15 -28
- package/bundles/colijnit-extendedcomponents.umd.js.map +1 -1
- package/esm2015/lib/components/stacked-line-chart/co-stacked-line-chart.component.js +7 -24
- package/esm2015/lib/components/summary-grid/components/recursive-list/recursive-list.component.js +15 -13
- package/esm2015/lib/components/summary-grid/summary-grid.component.js +8 -4
- package/fesm2015/colijnit-extendedcomponents.js +27 -38
- package/fesm2015/colijnit-extendedcomponents.js.map +1 -1
- package/lib/components/stacked-line-chart/co-stacked-line-chart.component.d.ts +2 -6
- package/lib/components/summary-grid/components/recursive-list/recursive-list.component.d.ts +3 -2
- package/lib/components/summary-grid/summary-grid.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -38,13 +38,7 @@
|
|
|
38
38
|
this.chartOptions = {
|
|
39
39
|
title: {},
|
|
40
40
|
tooltip: {
|
|
41
|
-
trigger: 'axis'
|
|
42
|
-
axisPointer: {
|
|
43
|
-
type: 'cross',
|
|
44
|
-
label: {
|
|
45
|
-
backgroundColor: '#6a7985'
|
|
46
|
-
}
|
|
47
|
-
}
|
|
41
|
+
trigger: 'axis'
|
|
48
42
|
},
|
|
49
43
|
legend: {},
|
|
50
44
|
grid: {
|
|
@@ -58,17 +52,12 @@
|
|
|
58
52
|
saveAsImage: {}
|
|
59
53
|
}
|
|
60
54
|
},
|
|
61
|
-
xAxis: {
|
|
62
|
-
type: 'category',
|
|
63
|
-
boundaryGap: false,
|
|
64
|
-
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
65
|
-
},
|
|
55
|
+
xAxis: {},
|
|
66
56
|
yAxis: {
|
|
67
57
|
type: 'value'
|
|
68
58
|
},
|
|
69
59
|
series: {}
|
|
70
60
|
};
|
|
71
|
-
this.chartEventEmitter = new i0.EventEmitter();
|
|
72
61
|
}
|
|
73
62
|
StackedLineChartComponent.prototype.showClass = function () {
|
|
74
63
|
return true;
|
|
@@ -83,19 +72,15 @@
|
|
|
83
72
|
};
|
|
84
73
|
this.chartOptions.legend['data'] = this.chartLegend;
|
|
85
74
|
};
|
|
86
|
-
StackedLineChartComponent.prototype.onChartEvent = function (event, type) {
|
|
87
|
-
console.log('chart event:', type, event);
|
|
88
|
-
this.chartEventEmitter.emit(event);
|
|
89
|
-
};
|
|
90
75
|
return StackedLineChartComponent;
|
|
91
76
|
}());
|
|
92
77
|
StackedLineChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StackedLineChartComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
93
|
-
StackedLineChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StackedLineChartComponent, selector: "co-stacked-line-chart", inputs: { chartName: "chartName", chartData: "chartData", chartLegend: "chartLegend", chartXAxis: "chartXAxis", chartHeight: "chartHeight", chartWidth: "chartWidth", chartOptions: "chartOptions" },
|
|
78
|
+
StackedLineChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StackedLineChartComponent, selector: "co-stacked-line-chart", inputs: { chartName: "chartName", chartData: "chartData", chartLegend: "chartLegend", chartXAxis: "chartXAxis", chartHeight: "chartHeight", chartWidth: "chartWidth", chartOptions: "chartOptions" }, host: { properties: { "class.co-co-stacked-line-chart": "this.showClass" } }, ngImport: i0__namespace, template: "\n\n <div echarts [options]=\"chartOptions\" [initOpts]=\"{\n width: chartWidth,\n height: chartHeight}\" class=\"chart\"></div>\n\n ", isInline: true, directives: [{ type: i1__namespace.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["autoResize", "loadingType", "options", "theme", "loading", "initOpts", "merge", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartPieSelectChanged", "chartPieSelected", "chartPieUnselected", "chartMapSelectChanged", "chartMapSelected", "chartMapUnselected", "chartAxisAreaSelected", "chartFocusNodeAdjacency", "chartUnfocusNodeAdjacency", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
94
79
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StackedLineChartComponent, decorators: [{
|
|
95
80
|
type: i0.Component,
|
|
96
81
|
args: [{
|
|
97
82
|
selector: "co-stacked-line-chart",
|
|
98
|
-
template: "\n\n <div echarts [options]=\"chartOptions\" [initOpts]=\"{\n width: chartWidth,\n height: chartHeight}\"
|
|
83
|
+
template: "\n\n <div echarts [options]=\"chartOptions\" [initOpts]=\"{\n width: chartWidth,\n height: chartHeight}\" class=\"chart\"></div>\n\n ",
|
|
99
84
|
encapsulation: i0.ViewEncapsulation.None
|
|
100
85
|
}]
|
|
101
86
|
}], propDecorators: { showClass: [{
|
|
@@ -115,8 +100,6 @@
|
|
|
115
100
|
type: i0.Input
|
|
116
101
|
}], chartOptions: [{
|
|
117
102
|
type: i0.Input
|
|
118
|
-
}], chartEventEmitter: [{
|
|
119
|
-
type: i0.Output
|
|
120
103
|
}] } });
|
|
121
104
|
|
|
122
105
|
var StackedLineChartModule = /** @class */ (function () {
|
|
@@ -817,10 +800,10 @@
|
|
|
817
800
|
RecursiveListComponent.prototype.getCurrentIcon = function (item) {
|
|
818
801
|
return item.expanded ? this.icons.ArrowPointDown : this.icons.ArrowPointRight;
|
|
819
802
|
};
|
|
820
|
-
RecursiveListComponent.prototype.formatDataValue = function (dataValue) {
|
|
803
|
+
RecursiveListComponent.prototype.formatDataValue = function (dataValue, params) {
|
|
821
804
|
if (this.dataPipe && typeof dataValue === 'number') {
|
|
822
805
|
// Apply data formatting pipe here
|
|
823
|
-
return this.dataPipe.transform(dataValue);
|
|
806
|
+
return this.dataPipe.transform(dataValue, params);
|
|
824
807
|
}
|
|
825
808
|
else {
|
|
826
809
|
return dataValue.toString(); // No formatting needed
|
|
@@ -829,12 +812,12 @@
|
|
|
829
812
|
return RecursiveListComponent;
|
|
830
813
|
}());
|
|
831
814
|
RecursiveListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RecursiveListComponent, deps: [{ token: IconCacheService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
832
|
-
RecursiveListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RecursiveListComponent, selector: "co-recursive-list", inputs: { collection: "collection", columns: "columns", tableLegend: "tableLegend", depth: "depth", indentation: "indentation", dataPipe: "dataPipe" }, ngImport: i0__namespace, template: "\n <div class=\"co-recursive-list\">\n <div class=\"table-header-row\">\n <div class=\"table-legend\" *ngIf=\"tableLegend.length > 1\">\n <span [textContent]=\"tableLegend\"></span>\n </div>\n <div class=\"table-header\" *ngIf=\"columns && columns.length > 0\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let column of columns\">\n <span [textContent]=\"column\"></span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"tree-node\" [class.background]=\"depth === 0\" *ngFor=\"let item of collection\" (click)=\"toggleCollapse($event, item)\">\n <div class=\"table-row\">\n <div class=\"table-cell node-text-icon\" [ngStyle]=\"{'padding-left.px' : indentation}\">\n <co-icon [iconData]=\"iconCacheService.getIcon(getCurrentIcon(item))\"></co-icon>\n <span [textContent]=\"item.name\"></span>\n </div>\n <div class=\"table-cell data-points\">\n <div *ngFor=\"let dataPoint of item.data\" class=\"custom-property\">\n <span [textContent]=\"formatDataValue(dataPoint)\"></span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"item.children && item.children.length > 0 && item.expanded\">\n <co-recursive-list [dataPipe]=\"dataPipe\" [collection]=\"item.children\" [depth]=\"depth + 1\" [indentation]=\"indentation + 20\"></co-recursive-list>\n </ng-container>\n </div>\n </div>\n ", isInline: true, components: [{ type: i2__namespace.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: RecursiveListComponent, selector: "co-recursive-list", inputs: ["collection", "columns", "tableLegend", "depth", "indentation", "dataPipe"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
815
|
+
RecursiveListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: RecursiveListComponent, selector: "co-recursive-list", inputs: { collection: "collection", columns: "columns", tableLegend: "tableLegend", depth: "depth", indentation: "indentation", dataPipe: "dataPipe", params: "params" }, ngImport: i0__namespace, template: "\n <div class=\"co-recursive-list\">\n <div class=\"table-header-row\">\n <div class=\"table-legend\" *ngIf=\"tableLegend.length > 1\">\n <span [textContent]=\"tableLegend\"></span>\n </div>\n <div class=\"table-header\" *ngIf=\"columns && columns.length > 0\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let column of columns\">\n <span [textContent]=\"formatDataValue(column)\"></span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"tree-node\" [class.background]=\"depth === 0\" *ngFor=\"let item of collection\" (click)=\"toggleCollapse($event, item)\">\n <div class=\"table-row\">\n <div class=\"table-cell node-text-icon\" [ngStyle]=\"{'padding-left.px' : indentation}\">\n <co-icon *ngIf=\"item.children && item.children.length > 0\" [iconData]=\"iconCacheService.getIcon(getCurrentIcon(item))\"></co-icon>\n <span [textContent]=\"item.name\"></span>\n </div>\n <div class=\"table-cell data-points\">\n <div *ngFor=\"let dataPoint of item.data\" class=\"custom-property\">\n <span [textContent]=\"formatDataValue(dataPoint, params)\"></span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"item.children && item.children.length > 0 && item.expanded\">\n <co-recursive-list [dataPipe]=\"dataPipe\" [collection]=\"item.children\" [depth]=\"depth + 1\" [indentation]=\"indentation + 20\" [params]=\"params\"></co-recursive-list>\n </ng-container>\n </div>\n </div>\n ", isInline: true, components: [{ type: i2__namespace.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { type: RecursiveListComponent, selector: "co-recursive-list", inputs: ["collection", "columns", "tableLegend", "depth", "indentation", "dataPipe", "params"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
833
816
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RecursiveListComponent, decorators: [{
|
|
834
817
|
type: i0.Component,
|
|
835
818
|
args: [{
|
|
836
819
|
selector: 'co-recursive-list',
|
|
837
|
-
template: "\n <div class=\"co-recursive-list\">\n <div class=\"table-header-row\">\n <div class=\"table-legend\" *ngIf=\"tableLegend.length > 1\">\n <span [textContent]=\"tableLegend\"></span>\n </div>\n <div class=\"table-header\" *ngIf=\"columns && columns.length > 0\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let column of columns\">\n <span [textContent]=\"column\"></span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"tree-node\" [class.background]=\"depth === 0\" *ngFor=\"let item of collection\" (click)=\"toggleCollapse($event, item)\">\n <div class=\"table-row\">\n <div class=\"table-cell node-text-icon\" [ngStyle]=\"{'padding-left.px' : indentation}\">\n <co-icon [iconData]=\"iconCacheService.getIcon(getCurrentIcon(item))\"></co-icon>\n <span [textContent]=\"item.name\"></span>\n </div>\n <div class=\"table-cell data-points\">\n <div *ngFor=\"let dataPoint of item.data\" class=\"custom-property\">\n <span [textContent]=\"formatDataValue(dataPoint)\"></span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"item.children && item.children.length > 0 && item.expanded\">\n <co-recursive-list [dataPipe]=\"dataPipe\" [collection]=\"item.children\" [depth]=\"depth + 1\" [indentation]=\"indentation + 20\"></co-recursive-list>\n </ng-container>\n </div>\n </div>\n ",
|
|
820
|
+
template: "\n <div class=\"co-recursive-list\">\n <div class=\"table-header-row\">\n <div class=\"table-legend\" *ngIf=\"tableLegend.length > 1\">\n <span [textContent]=\"tableLegend\"></span>\n </div>\n <div class=\"table-header\" *ngIf=\"columns && columns.length > 0\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let column of columns\">\n <span [textContent]=\"formatDataValue(column)\"></span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"tree-node\" [class.background]=\"depth === 0\" *ngFor=\"let item of collection\" (click)=\"toggleCollapse($event, item)\">\n <div class=\"table-row\">\n <div class=\"table-cell node-text-icon\" [ngStyle]=\"{'padding-left.px' : indentation}\">\n <co-icon *ngIf=\"item.children && item.children.length > 0\" [iconData]=\"iconCacheService.getIcon(getCurrentIcon(item))\"></co-icon>\n <span [textContent]=\"item.name\"></span>\n </div>\n <div class=\"table-cell data-points\">\n <div *ngFor=\"let dataPoint of item.data\" class=\"custom-property\">\n <span [textContent]=\"formatDataValue(dataPoint, params)\"></span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"item.children && item.children.length > 0 && item.expanded\">\n <co-recursive-list [dataPipe]=\"dataPipe\" [collection]=\"item.children\" [depth]=\"depth + 1\" [indentation]=\"indentation + 20\" [params]=\"params\"></co-recursive-list>\n </ng-container>\n </div>\n </div>\n ",
|
|
838
821
|
encapsulation: i0.ViewEncapsulation.None,
|
|
839
822
|
}]
|
|
840
823
|
}], ctorParameters: function () { return [{ type: IconCacheService }]; }, propDecorators: { collection: [{
|
|
@@ -849,6 +832,8 @@
|
|
|
849
832
|
type: i0.Input
|
|
850
833
|
}], dataPipe: [{
|
|
851
834
|
type: i0.Input
|
|
835
|
+
}], params: [{
|
|
836
|
+
type: i0.Input
|
|
852
837
|
}] } });
|
|
853
838
|
|
|
854
839
|
// summary-grid.component.ts
|
|
@@ -877,7 +862,7 @@
|
|
|
877
862
|
{
|
|
878
863
|
name: 'Grandchild 1.1.2',
|
|
879
864
|
expanded: false,
|
|
880
|
-
data: [7,
|
|
865
|
+
data: [7, 0],
|
|
881
866
|
},
|
|
882
867
|
],
|
|
883
868
|
},
|
|
@@ -915,12 +900,12 @@
|
|
|
915
900
|
return SummaryGridComponent;
|
|
916
901
|
}());
|
|
917
902
|
SummaryGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SummaryGridComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
918
|
-
SummaryGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SummaryGridComponent, selector: "co-summary-grid", inputs: { columns: "columns", tableLegend: "tableLegend", dataPipe: "dataPipe", collection: "collection" }, host: { properties: { "class.co-summary-grid": "this.showClass" } }, ngImport: i0__namespace, template: "\n <co-recursive-list\n [collection]=\"collection\"\n [columns]=\"columns\"\n [tableLegend]=\"tableLegend\"\n [dataPipe]=\"dataPipe\"\n ></co-recursive-list>\n ", isInline: true, components: [{ type: RecursiveListComponent, selector: "co-recursive-list", inputs: ["collection", "columns", "tableLegend", "depth", "indentation", "dataPipe"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
903
|
+
SummaryGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: SummaryGridComponent, selector: "co-summary-grid", inputs: { columns: "columns", tableLegend: "tableLegend", dataPipe: "dataPipe", params: "params", collection: "collection" }, host: { properties: { "class.co-summary-grid": "this.showClass" } }, ngImport: i0__namespace, template: "\n <co-recursive-list\n [collection]=\"collection\"\n [columns]=\"columns\"\n [tableLegend]=\"tableLegend\"\n [dataPipe]=\"dataPipe\"\n [params]=\"params\"\n ></co-recursive-list>\n ", isInline: true, components: [{ type: RecursiveListComponent, selector: "co-recursive-list", inputs: ["collection", "columns", "tableLegend", "depth", "indentation", "dataPipe", "params"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
919
904
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SummaryGridComponent, decorators: [{
|
|
920
905
|
type: i0.Component,
|
|
921
906
|
args: [{
|
|
922
907
|
selector: 'co-summary-grid',
|
|
923
|
-
template: "\n <co-recursive-list\n [collection]=\"collection\"\n [columns]=\"columns\"\n [tableLegend]=\"tableLegend\"\n [dataPipe]=\"dataPipe\"\n ></co-recursive-list>\n ",
|
|
908
|
+
template: "\n <co-recursive-list\n [collection]=\"collection\"\n [columns]=\"columns\"\n [tableLegend]=\"tableLegend\"\n [dataPipe]=\"dataPipe\"\n [params]=\"params\"\n ></co-recursive-list>\n ",
|
|
924
909
|
encapsulation: i0.ViewEncapsulation.None,
|
|
925
910
|
}]
|
|
926
911
|
}], propDecorators: { showClass: [{
|
|
@@ -932,6 +917,8 @@
|
|
|
932
917
|
type: i0.Input
|
|
933
918
|
}], dataPipe: [{
|
|
934
919
|
type: i0.Input
|
|
920
|
+
}], params: [{
|
|
921
|
+
type: i0.Input
|
|
935
922
|
}], collection: [{
|
|
936
923
|
type: i0.Input
|
|
937
924
|
}] } });
|