@coolon/angular-ui-powerups 11.0.0-alpha.3 → 11.0.0-alpha.5
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/coolon-angular-ui-powerups.umd.js +22 -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/card-container/card-container.component.js +1 -1
- package/esm2015/lib/components/card-container/card-container.component.metadata.json +1 -1
- package/esm2015/lib/components/components.module.ngfactory.js.map +1 -1
- package/esm2015/lib/components/table/table.component.js.map +1 -1
- package/esm2015/lib/components/table/table.component.metadata.json +1 -1
- package/esm2015/lib/components/tree-table/tree-table-component.js +21 -4
- package/esm2015/lib/components/tree-table/tree-table-component.js.map +1 -1
- package/esm2015/lib/components/tree-table/tree-table-component.metadata.json +1 -1
- package/fesm2015/coolon-angular-ui-powerups.js +20 -3
- package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
- package/lib/components/table/table.component.d.ts +4 -4
- package/lib/components/tree-table/tree-table-component.d.ts +9 -0
- package/package.json +1 -1
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;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, Trace,\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 * Column templates\n * @example\n * this.heroTableModel = TableModel.fromList(heroList, table => {\n * table.pluck(\"firstName\");\n * table.pluck(\"lastName\");\n * table.addTemplateColumn(\"specialColumn\");\n * });\n * <aup-table [tableModel]=\"heroTableModel\">\n * <div *aupColumnTemplate=\"let hero; columnId: 'specialColumn'; fillCell: true; padChild:false\">\n * {{hero.name}}\n * </div>\n * </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 /**\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 columns: ListModelChain<ColumnModel<Row>>;\n columnIds: ListModelChain<string>;\n private columnsById: MapModelChain<string, ColumnModel<Row>>;\n\n readonly visibleRowCount: ValueModel<number>;\n\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\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 // @Trace()\n isFirstVisibleColumn(columnId: string): boolean {\n return this.tableModel.firstVisibleColumn.query().value?.columnId === columnId;\n }\n\n // @Trace()\n isLastVisibleColumn(columnId: string): boolean {\n return this.tableModel.lastVisibleColumn.query().value?.columnId === columnId;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../resize-aware.component","name":"ResizeAwareComponent","line":70,"character":41},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":65,"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-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\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-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\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{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:scroll;display:flex;flex-direction:column;align-items:stretch}"]}]}],"members":{"tableModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":73,"character":3}}]}],"showHeaderModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":77,"character":3},"arguments":[{"defaultValue":true}]}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":81,"character":3},"arguments":["showHeaderModel"]}]}],"enableScrolling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../resize-aware.component","name":"ResizeAwareComponent","line":70,"character":41},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":65,"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-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\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-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\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{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:scroll;display:flex;flex-direction:column;align-items:stretch}"]}]}],"members":{"tableModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":73,"character":3}}]}],"showHeaderModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":77,"character":3},"arguments":[{"defaultValue":true}]}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":81,"character":3},"arguments":["showHeaderModel"]}]}],"enableScrolling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":90,"character":3},"arguments":["class.enable-scrolling"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":104,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":104,"character":46}]}],"hideHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":125,"character":3},"arguments":["class.hide-header"]}]}],"ngOnInit":[{"__symbolic":"method"}],"isEditing":[{"__symbolic":"method"}],"registerColumnTemplate":[{"__symbolic":"method"}],"notifyCellClicked":[{"__symbolic":"method"}],"isFirstVisibleColumn":[{"__symbolic":"method"}],"isLastVisibleColumn":[{"__symbolic":"method"}]}}}}]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
3
|
-
import { TrackExternal } from '@coolon/pectin';
|
|
2
|
+
import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
|
|
3
|
+
import { StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
|
|
4
4
|
import { DisposableComponent } from '../disposable-component';
|
|
5
5
|
import { TreeTableModel } from './tree-table-model';
|
|
6
6
|
//
|
|
@@ -41,12 +41,18 @@ import { TreeTableModel } from './tree-table-model';
|
|
|
41
41
|
export class TreeTableComponent extends DisposableComponent {
|
|
42
42
|
constructor() {
|
|
43
43
|
super();
|
|
44
|
+
/**
|
|
45
|
+
* Set to true to enable scrolling. Once enabled the table will have 0 implicit height. You will either
|
|
46
|
+
* need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
|
|
47
|
+
* containment area.
|
|
48
|
+
*/
|
|
49
|
+
this.enableScrolling = false;
|
|
44
50
|
}
|
|
45
51
|
}
|
|
46
52
|
TreeTableComponent.decorators = [
|
|
47
53
|
{ type: Component, args: [{
|
|
48
54
|
selector: "aup-tree-table",
|
|
49
|
-
template: "<aup-table [tableModel]=\"treeTableModel\"></aup-table>\n",
|
|
55
|
+
template: "<aup-table [tableModel]=\"treeTableModel\" [showHeaderModel]=\"showHeaderModel\" [enableScrolling]=\"enableScrolling\"></aup-table>\n",
|
|
50
56
|
encapsulation: ViewEncapsulation.None // allow us to target nested table styles
|
|
51
57
|
,
|
|
52
58
|
styles: ["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
|
|
@@ -54,10 +60,21 @@ TreeTableComponent.decorators = [
|
|
|
54
60
|
];
|
|
55
61
|
TreeTableComponent.ctorParameters = () => [];
|
|
56
62
|
TreeTableComponent.propDecorators = {
|
|
57
|
-
treeTableModel: [{ type: Input }]
|
|
63
|
+
treeTableModel: [{ type: Input }],
|
|
64
|
+
showHeaderModel: [{ type: Input }],
|
|
65
|
+
showHeader: [{ type: Input }],
|
|
66
|
+
enableScrolling: [{ type: Input }, { type: HostBinding, args: ['class.enable-scrolling',] }]
|
|
58
67
|
};
|
|
59
68
|
__decorate([
|
|
60
69
|
TrackExternal(),
|
|
61
70
|
__metadata("design:type", TreeTableModel)
|
|
62
71
|
], TreeTableComponent.prototype, "treeTableModel", void 0);
|
|
72
|
+
__decorate([
|
|
73
|
+
TrackExternal({ defaultValue: true }),
|
|
74
|
+
__metadata("design:type", ValueModel)
|
|
75
|
+
], TreeTableComponent.prototype, "showHeaderModel", void 0);
|
|
76
|
+
__decorate([
|
|
77
|
+
StoreInValueModel('showHeaderModel'),
|
|
78
|
+
__metadata("design:type", Boolean)
|
|
79
|
+
], TreeTableComponent.prototype, "showHeader", void 0);
|
|
63
80
|
//# sourceMappingURL=tree-table-component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-table-component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/tree-table/tree-table-component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"tree-table-component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/tree-table/tree-table-component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,EAAE;AACF,qBAAqB;AACrB,gEAAgE;AAChE,uEAAuE;AACvE,2EAA2E;AAC3E,wEAAwE;AACxE,yDAAyD;AACzD,8CAA8C;AAC9C,EAAE;AACF,wEAAwE;AACxE,+DAA+D;AAC/D,mEAAmE;AACnE,+EAA+E;AAC/E,8FAA8F;AAC9F,EAAE;AACF,0GAA0G;AAC1G,qFAAqF;AACrF,+BAA+B;AAC/B,yDAAyD;AACzD,yDAAyD;AACzD,kDAAkD;AAClD,sEAAsE;AACtE,gEAAgE;AAChE,iBAAiB;AACjB,gBAAgB;AAChB,oGAAoG;AACpG,4CAA4C;AAC5C,2DAA2D;AAC3D,kEAAkE;AAClE,mDAAmD;AACnD,uBAAuB;AACvB,gBAAgB;AAChB,EAAE;AACF,qBAAqB;AACrB,KAAK;AASL,MAAM,OAAO,kBAA0C,SAAQ,mBAAmB;IAyBhF;QACE,KAAK,EAAE,CAAC;QAXV;;;;WAIG;QAGH,oBAAe,GAAG,KAAK,CAAC;IAKxB,CAAC;;;YAjCF,SAAS,SAAC;gBACT,QAAQ,EAAE,gBAAgB;gBAC1B,iJAA0C;gBAE1C,aAAa,EAAE,iBAAiB,CAAC,IAAI,CAAC,yCAAyC;;;aAChF;;;;6BAGE,KAAK;8BAKL,KAAK;yBAIL,KAAK;8BASL,KAAK,YACL,WAAW,SAAC,wBAAwB;;AAjBrC;IADC,aAAa,EAAE;8BACA,cAAc;0DAAI;AAKlC;IADC,aAAa,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;8BACrB,UAAU;2DAAU;AAIrC;IADC,iBAAiB,CAAC,iBAAiB,CAAC;;sDACjB","sourcesContent":["import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\nimport { StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { DisposableComponent } from '../disposable-component';\nimport { TreeNode } from './tree-node';\nimport { TreeTableModel } from './tree-table-model';\n//\n// const template = `\n// <table-component list-model=\"zoneTreeController.visibleAreas\"\n// selection-model=\"zoneTreeController.selectionModel\"\n// selection-command=\"zoneTreeController.selectionCommand\"\n// hover-model=\"zoneTreeController.decoratedHoverModel\"\n// no-hover=\"zoneTreeController.noHover\"\n// no-lines=\"true\" no-scroll>\n//\n// <row-attr name=\"parent-id\" value=\"{{item.parent.id}}\"></row-attr>\n// <row-attr name=\"area-id\" value=\"{{item.id}}\"></row-attr>\n// <row-attr name=\"area-name\" value=\"{{item.name}}\"></row-attr>\n// <row-attr name=\"area-depth\" value=\"{{item.depthFromZone()}}\"></row-attr>\n// <row-attr name=\"collapsed\" value=\"{{zoneTreeController.isCollapsed(item)}}\"></row-attr>\n//\n// <column class=\"area\" ng-class=\"{root: item.isZone(), parent: item.isGroup()}\" class=\"allow-squish\">\n// <!--<label>Rooms in {{zoneTreeController.zoneModel.value.name}}</label>-->\n// <label>Rooms</label>\n// <div layout=\"row\" layout-align=\"start center\">\n// <tree-icons tree-item=\"item\"></tree-icons>\n// <area-icon area=\"item\"></area-icon>\n// <span ng-if=\"item.isZone()\">Zone ({{item.name}})</span>\n// <span ng-if=\"!item.isZone()\">{{item.name}}</span>\n// </div>\n// </column>\n// <column class=\"expand-collapse\" ng-class=\"{collapsed: zoneTreeController.isCollapsed(item)}\">\n// <md-button class=\"md-icon-button\"\n// ng-if=\"zoneTreeController.canCollapse(item)\"\n// ng-click=\"zoneTreeController.toggleCollapse(item)\">\n// <md-icon>keyboard_arrow_up</md-icon>\n// </md-button>\n// </column>\n//\n// </table-component>\n// `;\n\n\n@Component({\n selector: \"aup-tree-table\",\n templateUrl: './tree-table.component.html',\n styleUrls: ['./tree-table.component.scss'],\n encapsulation: ViewEncapsulation.None // allow us to target nested table styles\n})\nexport class TreeTableComponent<T extends TreeNode<T>> extends DisposableComponent {\n\n @Input()\n @TrackExternal()\n treeTableModel: TreeTableModel<T>;\n\n\n @Input()\n @TrackExternal({ defaultValue: true })\n showHeaderModel: ValueModel<boolean>;\n\n @Input()\n @StoreInValueModel('showHeaderModel')\n showHeader: boolean;\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\n constructor() {\n super();\n }\n\n // zoneTreeModel: TreeModel<T>;\n // noHover: boolean;\n //\n // static compile(tElement, tAttrs, $compile) {\n // const newContent = angular.element(template);\n //\n // // // find methods don't work here... sigh. and this is sensetive to whitespace in the template BEWARE!!\n // // let table = angular.element(newContent[2]);\n //\n // tElement.find('column').each((index, el) => newContent.append(el));\n // tElement.contents().remove();\n //\n // const transclude = $compile(newContent);\n // return (scope, element, attrs, ctrl) => {\n // transclude(scope, function(clone) {\n // element.append(clone);\n // });\n // };\n // }\n //\n // constructor() {\n // super();\n // }\n //\n // get zoneModel() {\n // return this.zoneTreeModel.rootNodeModel;\n // }\n //\n // get visibleAreas() {\n // return this.zoneTreeModel.decoratedVisibleAreas;\n // }\n //\n // get selectionModel() {\n // return this.zoneTreeModel.decoratedSelectionModel;\n // }\n //\n // selectArea(decoratedArea: TreeModel.DecoratedArea) {\n // this.zoneTreeModel.select(decoratedArea);\n // }\n //\n // get decoratedHoverModel() {\n // return this.zoneTreeModel.decoratedHoverModel;\n // }\n //\n // canCollapse(area: TreeModel.DecoratedArea) {\n // // @ts-ignore\n // return area && !area.isZone() && (area.isGroup() && area.hasChildren());\n // }\n //\n // isCollapsed(area: TreeModel.DecoratedArea): boolean {\n // return area && this.zoneTreeModel.isCollapsed(area);\n // }\n //\n // toggleCollapse(area: TreeModel.DecoratedArea) {\n // if (this.isCollapsed(area)) {\n // this.zoneTreeModel.expand(area);\n // } else {\n // this.zoneTreeModel.collapse(area);\n // }\n // }\n\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"TreeTableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":48,"character":63},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":42,"character":1},"arguments":[{"selector":"aup-tree-table","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":46,"character":17},"member":"None"},"template":"<aup-table [tableModel]=\"treeTableModel\"></aup-table>\n","styles":["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]}]}],"members":{"treeTableModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":51,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}}}}]
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"TreeTableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":48,"character":63},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":42,"character":1},"arguments":[{"selector":"aup-tree-table","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":46,"character":17},"member":"None"},"template":"<aup-table [tableModel]=\"treeTableModel\" [showHeaderModel]=\"showHeaderModel\" [enableScrolling]=\"enableScrolling\"></aup-table>\n","styles":["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]}]}],"members":{"treeTableModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":51,"character":3}}]}],"showHeaderModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":56,"character":3},"arguments":[{"defaultValue":true}]}]}],"showHeader":[{"__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":"StoreInValueModel","line":60,"character":3},"arguments":["showHeaderModel"]}]}],"enableScrolling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":69,"character":3},"arguments":["class.enable-scrolling"]}]}],"__ctor__":[{"__symbolic":"constructor"}]}}}}]
|
|
@@ -520,7 +520,7 @@ CardContainerComponent.decorators = [
|
|
|
520
520
|
{ type: Component, args: [{
|
|
521
521
|
selector: 'aup-card-container',
|
|
522
522
|
template: "<div class=\"card-container\">\n <ng-content></ng-content>\n\n <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n </div>\n\n <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n </div>\n\n</div>\n",
|
|
523
|
-
styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-
|
|
523
|
+
styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
|
|
524
524
|
},] }
|
|
525
525
|
];
|
|
526
526
|
CardContainerComponent.ctorParameters = () => [];
|
|
@@ -3554,12 +3554,18 @@ class FlattenStrategy extends SelfAndDescendantsVisitor {
|
|
|
3554
3554
|
class TreeTableComponent extends DisposableComponent {
|
|
3555
3555
|
constructor() {
|
|
3556
3556
|
super();
|
|
3557
|
+
/**
|
|
3558
|
+
* Set to true to enable scrolling. Once enabled the table will have 0 implicit height. You will either
|
|
3559
|
+
* need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
|
|
3560
|
+
* containment area.
|
|
3561
|
+
*/
|
|
3562
|
+
this.enableScrolling = false;
|
|
3557
3563
|
}
|
|
3558
3564
|
}
|
|
3559
3565
|
TreeTableComponent.decorators = [
|
|
3560
3566
|
{ type: Component, args: [{
|
|
3561
3567
|
selector: "aup-tree-table",
|
|
3562
|
-
template: "<aup-table [tableModel]=\"treeTableModel\"></aup-table>\n",
|
|
3568
|
+
template: "<aup-table [tableModel]=\"treeTableModel\" [showHeaderModel]=\"showHeaderModel\" [enableScrolling]=\"enableScrolling\"></aup-table>\n",
|
|
3563
3569
|
encapsulation: ViewEncapsulation.None // allow us to target nested table styles
|
|
3564
3570
|
,
|
|
3565
3571
|
styles: ["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
|
|
@@ -3567,12 +3573,23 @@ TreeTableComponent.decorators = [
|
|
|
3567
3573
|
];
|
|
3568
3574
|
TreeTableComponent.ctorParameters = () => [];
|
|
3569
3575
|
TreeTableComponent.propDecorators = {
|
|
3570
|
-
treeTableModel: [{ type: Input }]
|
|
3576
|
+
treeTableModel: [{ type: Input }],
|
|
3577
|
+
showHeaderModel: [{ type: Input }],
|
|
3578
|
+
showHeader: [{ type: Input }],
|
|
3579
|
+
enableScrolling: [{ type: Input }, { type: HostBinding, args: ['class.enable-scrolling',] }]
|
|
3571
3580
|
};
|
|
3572
3581
|
__decorate([
|
|
3573
3582
|
TrackExternal(),
|
|
3574
3583
|
__metadata("design:type", TreeTableModel)
|
|
3575
3584
|
], TreeTableComponent.prototype, "treeTableModel", void 0);
|
|
3585
|
+
__decorate([
|
|
3586
|
+
TrackExternal({ defaultValue: true }),
|
|
3587
|
+
__metadata("design:type", ValueModel)
|
|
3588
|
+
], TreeTableComponent.prototype, "showHeaderModel", void 0);
|
|
3589
|
+
__decorate([
|
|
3590
|
+
StoreInValueModel('showHeaderModel'),
|
|
3591
|
+
__metadata("design:type", Boolean)
|
|
3592
|
+
], TreeTableComponent.prototype, "showHeader", void 0);
|
|
3576
3593
|
|
|
3577
3594
|
class VerticalFocusContainerComponent extends FocusContainerComponent {
|
|
3578
3595
|
constructor(focusManager) {
|