@coolon/angular-ui-powerups 11.0.0-alpha.4 → 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 +21 -3
- 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/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 +19 -2
- 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
|
-
[{"__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"}]}}}}]
|
|
@@ -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) {
|