@coolon/angular-ui-powerups 3.14.0 → 3.15.1
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/CHANGELOG.md +14 -0
- package/bundles/coolon-angular-ui-powerups.umd.js +13 -4
- package/bundles/coolon-angular-ui-powerups.umd.js.map +1 -1
- package/bundles/coolon-angular-ui-powerups.umd.min.js +1 -1
- package/bundles/coolon-angular-ui-powerups.umd.min.js.map +1 -1
- package/coolon-angular-ui-powerups.metadata.json +1 -1
- package/esm2015/lib/components/components.module.ngfactory.js.map +1 -1
- package/esm2015/lib/components/resize-aware.component.js +1 -1
- package/esm2015/lib/components/resize-aware.component.js.map +1 -1
- package/esm2015/lib/components/table/table.component.js +12 -3
- package/esm2015/lib/components/table/table.component.js.map +1 -1
- package/esm2015/lib/components/table/table.component.metadata.json +1 -1
- package/fesm2015/coolon-angular-ui-powerups.js +13 -4
- package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
- package/lib/components/table/table.component.d.ts +6 -0
- package/package.json +1 -1
|
@@ -36,6 +36,12 @@ import { CustomTemplateColumnModel } from './column-model';
|
|
|
36
36
|
export class TableComponent extends ResizeAwareComponent {
|
|
37
37
|
constructor(elementRef, ngZone) {
|
|
38
38
|
super(elementRef, ngZone);
|
|
39
|
+
/**
|
|
40
|
+
* Set to true to enable scrolling. Once enabled the table will have 0 implicit height. You will either
|
|
41
|
+
* need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
|
|
42
|
+
* containment area.
|
|
43
|
+
*/
|
|
44
|
+
this.enableScrolling = false;
|
|
39
45
|
// TODO: support user defined header and row heights via css vars.
|
|
40
46
|
this.headerHeight = new MutableValueModel(56);
|
|
41
47
|
this.rowHeight = new MutableValueModel(48);
|
|
@@ -46,7 +52,9 @@ export class TableComponent extends ResizeAwareComponent {
|
|
|
46
52
|
this.visibleRowCount = chain(this.boundsModel).map(bounds => {
|
|
47
53
|
// TODO: this doesn't take into account any css styling adjustments etc. Will invistigate if it's an issue.
|
|
48
54
|
const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;
|
|
49
|
-
|
|
55
|
+
const rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
|
|
56
|
+
// console.log({rowCount})
|
|
57
|
+
return rowCount;
|
|
50
58
|
}, {
|
|
51
59
|
dependsOn: [actualHeaderHeight, this.rowHeight],
|
|
52
60
|
postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)
|
|
@@ -77,8 +85,8 @@ export class TableComponent extends ResizeAwareComponent {
|
|
|
77
85
|
TableComponent.decorators = [
|
|
78
86
|
{ type: Component, args: [{
|
|
79
87
|
selector: 'aup-table',
|
|
80
|
-
template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n
|
|
81
|
-
styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}"]
|
|
88
|
+
template: "<div class=\"scroll-container\">\n <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell-renderer [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-header-cell-renderer>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell-renderer [column]=\"column\"\n [row]=\"row\"\n [tableModel]=\"tableModel\"\n [editSession]=\"tableModel.getEditSessionFor(row)\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-cell-renderer>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n ></tr>\n\n </table>\n</div>\n",
|
|
89
|
+
styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{align-items:stretch;display:flex;flex:1;flex-basis:0;flex-direction:column;overflow-y:scroll}"]
|
|
82
90
|
},] }
|
|
83
91
|
];
|
|
84
92
|
TableComponent.ctorParameters = () => [
|
|
@@ -89,6 +97,7 @@ TableComponent.propDecorators = {
|
|
|
89
97
|
tableModel: [{ type: Input }],
|
|
90
98
|
showHeaderModel: [{ type: Input }],
|
|
91
99
|
showHeader: [{ type: Input }],
|
|
100
|
+
enableScrolling: [{ type: Input }, { type: HostBinding, args: ["class.enable-scrolling",] }],
|
|
92
101
|
hideHeader: [{ type: HostBinding, args: ["class.hide-header",] }]
|
|
93
102
|
};
|
|
94
103
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/table/table.component.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,MAAM,EAIP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,GAAG,EAGH,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAe,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAMH,MAAM,OAAO,cAAoB,SAAQ,oBAAoB;
|
|
1
|
+
{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/table/table.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ElementRef,\n HostBinding,\n Input,\n NgZone,\n OnInit,\n TemplateRef,\n ViewContainerRef\n} from '@angular/core';\nimport {\n Dsl,\n ListModelChain,\n MapModelChain,\n MutableValueModel,\n StoreInValueModel,\n TrackExternal,\n ValueModel\n} from '@coolon/pectin';\nimport { ResizeAwareComponent } from '../resize-aware.component';\nimport { AbstractTableModel } from './abstract-table-model';\nimport { ColumnModel, CustomTemplateColumnModel } from './column-model';\n\n/**\n * Create your model:\n * @example\n * this.heroTableModel = TableModel.fromList(heroList, table => {\n * table.pluck(\"firstName\");\n * table.pluck(\"lastName\");\n * table.addCustomColumn(\"fullName\", hero => `${hero.firstName} ${hero.lastName}`);\n * });\n *\n * Create your table\n * @example\n * <aup-table [tableModel]=\"heroTableModel\"></aup-table>\n *\n * Styling\n * @example\n * aup-table {\n * --column-gap: 10px; // defaults to 24px\n * --row-hover-background-color, rgba(0, 0, 0, 0.05)\n * --row-selected-background-color: rebeccapurple; // defaults to transparent\n * aup-table-cell-renderer {\n * &:first-column {\n * // do stuff\n * }\n * &:last-column {\n * // do stuff\n * }\n * }\n * }\n */\n@Component({\n selector: 'aup-table',\n templateUrl: './table.component.html',\n styleUrls: ['./table.component.scss']\n})\nexport class TableComponent<Row> extends ResizeAwareComponent implements OnInit {\n\n @Input()\n @TrackExternal()\n tableModel: AbstractTableModel<Row>;\n\n @Input()\n @TrackExternal({defaultValue: true})\n showHeaderModel: ValueModel<boolean>;\n\n @Input()\n @StoreInValueModel(\"showHeaderModel\")\n showHeader: boolean;\n\n columns: ListModelChain<ColumnModel<Row>>;\n columnIds: ListModelChain<string>;\n private columnsById: MapModelChain<string, ColumnModel<Row>>;\n\n readonly visibleRowCount: ValueModel<number>;\n\n /**\n * Set to true to enable scrolling. Once enabled the table will have 0 implicit height. You will either\n * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's\n * containment area.\n */\n @Input()\n @HostBinding(\"class.enable-scrolling\")\n enableScrolling = false;\n\n // TODO: support user defined header and row heights via css vars.\n private readonly headerHeight = new MutableValueModel<number>(56);\n private readonly rowHeight = new MutableValueModel<number>(48);\n\n constructor(elementRef: ElementRef, ngZone: NgZone) {\n super(elementRef, ngZone);\n const { chain, when } = Dsl.disposeWith(this);\n\n const actualHeaderHeight = chain(this.showHeaderModel).map( show => {\n return show ? this.headerHeight.value : 0;\n }, {dependsOn: this.headerHeight});\n\n this.visibleRowCount = chain(this.boundsModel).map(bounds => {\n // TODO: this doesn't take into account any css styling adjustments etc. Will invistigate if it's an issue.\n const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;\n const rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);\n // console.log({rowCount})\n return rowCount;\n }, {\n dependsOn: [actualHeaderHeight, this.rowHeight],\n postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)\n });\n }\n\n @HostBinding(\"class.hide-header\")\n get hideHeader() {\n return !this.showHeader;\n }\n\n\n ngOnInit(): void {\n const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n this.columns = chain(this.tableModel.columns);\n this.columnIds = chain(this.columns).pluck('columnId');\n this.columnsById = chain(this.columns).indexBy('columnId');\n }\n\n isEditing(row: Row): boolean {\n return !!this.tableModel.getEditSessionFor(row);\n }\n\n registerColumnTemplate(columnId: string, templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, fillCell: boolean, padChild: boolean) {\n const column = this.columnsById.get(columnId);\n if (column instanceof CustomTemplateColumnModel) {\n column.setTemplate(templateRef, viewContainer, fillCell, padChild);\n }\n }\n\n notifyCellClicked(columnModel: ColumnModel<Row>, row: Row) {\n this.tableModel._notifyCellClicked(columnModel, row);\n }\n\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../resize-aware.component","name":"ResizeAwareComponent","line":57,"character":41},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":52,"character":1},"arguments":[{"selector":"aup-table","template":"<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../resize-aware.component","name":"ResizeAwareComponent","line":57,"character":41},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":52,"character":1},"arguments":[{"selector":"aup-table","template":"<div class=\"scroll-container\">\n <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell-renderer [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-header-cell-renderer>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell-renderer [column]=\"column\"\n [row]=\"row\"\n [tableModel]=\"tableModel\"\n [editSession]=\"tableModel.getEditSessionFor(row)\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-cell-renderer>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n ></tr>\n\n </table>\n</div>\n","styles":[":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{align-items:stretch;display:flex;flex:1;flex-basis:0;flex-direction:column;overflow-y:scroll}"]}]}],"members":{"tableModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":60,"character":3}}]}],"showHeaderModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":64,"character":3},"arguments":[{"defaultValue":true}]}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":68,"character":3},"arguments":["showHeaderModel"]}]}],"enableScrolling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":83,"character":3},"arguments":["class.enable-scrolling"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":90,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":90,"character":46}]}],"hideHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":110,"character":3},"arguments":["class.hide-header"]}]}],"ngOnInit":[{"__symbolic":"method"}],"isEditing":[{"__symbolic":"method"}],"registerColumnTemplate":[{"__symbolic":"method"}],"notifyCellClicked":[{"__symbolic":"method"}]}}}}]
|
|
@@ -1865,13 +1865,13 @@ class ResizeAwareComponent extends DisposableComponent {
|
|
|
1865
1865
|
this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
|
|
1866
1866
|
}
|
|
1867
1867
|
ngAfterViewInit() {
|
|
1868
|
-
this._updateBounds();
|
|
1869
1868
|
const element = this.elementRef.nativeElement;
|
|
1870
1869
|
const ro = new ResizeObserver((entries, observer) => {
|
|
1871
1870
|
this.ngZone.run(() => this._updateBounds());
|
|
1872
1871
|
});
|
|
1873
1872
|
ro.observe(element);
|
|
1874
1873
|
this.onDispose(() => ro.disconnect());
|
|
1874
|
+
setTimeout(() => this._updateBounds());
|
|
1875
1875
|
}
|
|
1876
1876
|
get boundsModel() {
|
|
1877
1877
|
return this._boundsModel.readonly;
|
|
@@ -2677,6 +2677,12 @@ AbstractTableModel = __decorate([
|
|
|
2677
2677
|
class TableComponent extends ResizeAwareComponent {
|
|
2678
2678
|
constructor(elementRef, ngZone) {
|
|
2679
2679
|
super(elementRef, ngZone);
|
|
2680
|
+
/**
|
|
2681
|
+
* Set to true to enable scrolling. Once enabled the table will have 0 implicit height. You will either
|
|
2682
|
+
* need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
|
|
2683
|
+
* containment area.
|
|
2684
|
+
*/
|
|
2685
|
+
this.enableScrolling = false;
|
|
2680
2686
|
// TODO: support user defined header and row heights via css vars.
|
|
2681
2687
|
this.headerHeight = new MutableValueModel(56);
|
|
2682
2688
|
this.rowHeight = new MutableValueModel(48);
|
|
@@ -2687,7 +2693,9 @@ class TableComponent extends ResizeAwareComponent {
|
|
|
2687
2693
|
this.visibleRowCount = chain(this.boundsModel).map(bounds => {
|
|
2688
2694
|
// TODO: this doesn't take into account any css styling adjustments etc. Will invistigate if it's an issue.
|
|
2689
2695
|
const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;
|
|
2690
|
-
|
|
2696
|
+
const rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
|
|
2697
|
+
// console.log({rowCount})
|
|
2698
|
+
return rowCount;
|
|
2691
2699
|
}, {
|
|
2692
2700
|
dependsOn: [actualHeaderHeight, this.rowHeight],
|
|
2693
2701
|
postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)
|
|
@@ -2718,8 +2726,8 @@ class TableComponent extends ResizeAwareComponent {
|
|
|
2718
2726
|
TableComponent.decorators = [
|
|
2719
2727
|
{ type: Component, args: [{
|
|
2720
2728
|
selector: 'aup-table',
|
|
2721
|
-
template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n
|
|
2722
|
-
styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}"]
|
|
2729
|
+
template: "<div class=\"scroll-container\">\n <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n <aup-table-header-cell-renderer [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-header-cell-renderer>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n [class.hide]=\"!column.isVisible()\"\n >\n <aup-table-cell-renderer [column]=\"column\"\n [row]=\"row\"\n [tableModel]=\"tableModel\"\n [editSession]=\"tableModel.getEditSessionFor(row)\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-cell-renderer>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n ></tr>\n\n </table>\n</div>\n",
|
|
2730
|
+
styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{align-items:stretch;display:flex;flex:1;flex-basis:0;flex-direction:column;overflow-y:scroll}"]
|
|
2723
2731
|
},] }
|
|
2724
2732
|
];
|
|
2725
2733
|
TableComponent.ctorParameters = () => [
|
|
@@ -2730,6 +2738,7 @@ TableComponent.propDecorators = {
|
|
|
2730
2738
|
tableModel: [{ type: Input }],
|
|
2731
2739
|
showHeaderModel: [{ type: Input }],
|
|
2732
2740
|
showHeader: [{ type: Input }],
|
|
2741
|
+
enableScrolling: [{ type: Input }, { type: HostBinding, args: ["class.enable-scrolling",] }],
|
|
2733
2742
|
hideHeader: [{ type: HostBinding, args: ["class.hide-header",] }]
|
|
2734
2743
|
};
|
|
2735
2744
|
__decorate([
|