npm - @coolon/angular-ui-powerups - Versions diffs - 3.13.0 → 3.15.0 - Mend

@coolon/angular-ui-powerups 3.13.0 → 3.15.0

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.

Files changed (36) hide show

package/esm2015/lib/components/table/table.component.metadata.json CHANGED Viewed

	@@ -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 <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()\">\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 >\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","styles":[":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}"]}]}],"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"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":81,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":81,"character":46}]}],"hideHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":99,"character":3},"arguments":["class.hide-header"]}]}],"ngOnInit":[{"__symbolic":"method"}],"isEditing":[{"__symbolic":"method"}],"registerColumnTemplate":[{"__symbolic":"method"}],"notifyCellClicked":[{"__symbolic":"method"}]}}}}]
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"}]}}}}]

package/fesm2015/coolon-angular-ui-powerups.js CHANGED Viewed

@@ -19,7 +19,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DirtyTrackingForm, ComputedListModel, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, DirtyTrackingForm, ComputedListModel, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import _, { find, filter, each, isNil, isEqual } from 'lodash';
@@ -520,7 +520,7 @@ CardContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-card-container',
                 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",
-                styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px;margin-bottom:var(--default-padding)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table.hide-header .mat-table thead{display:none}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.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{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
+                styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px;margin-bottom:var(--default-padding)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table.hide-header .mat-table thead,aup-table .mat-table td.hide,aup-table .mat-table th.hide{display:none}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.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{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
             },] }
 ];
 CardContainerComponent.ctorParameters = () => [];
@@ -1865,13 +1865,13 @@ class ResizeAwareComponent extends DisposableComponent {
         this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
     }
     ngAfterViewInit() {
-        this._updateBounds();
         const element = this.elementRef.nativeElement;
         const ro = new ResizeObserver((entries, observer) => {
             this.ngZone.run(() => this._updateBounds());
         });
         ro.observe(element);
         this.onDispose(() => ro.disconnect());
+        setTimeout(() => this._updateBounds());
     }
     get boundsModel() {
         return this._boundsModel.readonly;
@@ -2092,11 +2092,13 @@ class SelectCellRendererComponent extends DisposableComponent {
     constructor() {
         super();
         this.selectCommand = Command.create(() => {
-            this.selectionModel.selectCommand.execute(this.row);
+            var _a;
+            (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selectCommand.execute(this.row);
         });
     }
     isSelected() {
-        return this.selectionModel.isSelected(this.row);
+        var _a;
+        return (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.isSelected(this.row);
     }
 }
 SelectCellRendererComponent.decorators = [
@@ -2126,11 +2128,14 @@ class SelectHeaderCellRendererComponent extends DisposableComponent {
         var _a;
         return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.someSelected.value) || false;
     }
+    isVisible() {
+        return this.enableHeaderControls && this.selectionModel.getDelegate() instanceof MultipleSelectionModel;
+    }
 }
 SelectHeaderCellRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-select-header-cell-renderer',
-                template: "<mat-checkbox *ngIf=\"enableHeaderControls\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n",
+                template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n",
                 styles: [""]
             },] }
 ];
@@ -2139,13 +2144,14 @@ SelectHeaderCellRendererComponent.ctorParameters = () => [];
 const noop = () => {
 };
 const ɵ0 = noop;
-const CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
+const CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol('aup-cell-renderer:row-data-cache');
 class ColumnModel {
     constructor(columnId, textPropertiesProvider) {
         this.columnId = columnId;
         this.textPropertiesProvider = textPropertiesProvider;
         this._selectRowOnClick = undefined;
         this._flex = false;
+        this._visibleModel = new DelegatingValueModel().withDefault(true);
         this.installHeaderRenderer();
     }
     installHeaderRenderer() {
@@ -2157,6 +2163,16 @@ class ColumnModel {
         var _a;
         return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
     }
+    isVisible() {
+        return this.visible.value;
+    }
+    get visible() {
+        return this._visibleModel.readonly;
+    }
+    visibleWhile(visible) {
+        this._visibleModel.setDelegate(visible);
+        return this;
+    }
     getDefaultHeaderText() {
         return this.columnId;
     }
@@ -2422,19 +2438,24 @@ class CustomTemplateColumnModel extends ColumnModel {
 class SelectionColumnModel extends ColumnModel {
     constructor(columnId, defaults, selectionModel) {
         super(columnId, defaults);
-        this.selectionModel = selectionModel;
         this._enableHeaderControls = true;
+        this.selectionModel = DelegatingSelectionModel.createDelegate();
+        this.hasSelectionModel = new MutableValueModel(false);
         this.selectOnRowClick(false);
-        if (selectionModel instanceof MultipleSelectionModel) {
-            this.cellHeaderRenderer(SelectHeaderCellRendererComponent, (component) => {
-                component.selectionModel = selectionModel;
-                component.enableHeaderControls = this._enableHeaderControls;
-            });
-        }
+        this.cellHeaderRenderer(SelectHeaderCellRendererComponent, (component) => {
+            component.selectionModel = this.selectionModel;
+            component.enableHeaderControls = this._enableHeaderControls;
+        });
         this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectCellRendererComponent, (component, rowData) => {
             component.row = rowData.row;
-            component.selectionModel = selectionModel;
+            component.selectionModel = this.selectionModel;
         }));
+        this.setSelectionModel(selectionModel);
+        this.visibleWhile(this.hasSelectionModel);
+    }
+    setSelectionModel(selectionModel) {
+        this.selectionModel.setDelegate(selectionModel);
+        this.hasSelectionModel.value = !!selectionModel;
     }
     getDefaultHeaderText() {
         return '';
@@ -2454,6 +2475,9 @@ class SelectionColumnModel extends ColumnModel {
     selectRow(row) {
         this.selectionModel.selectCommand.execute(row);
     }
+    isSelected(row) {
+        return this.selectionModel.isSelected(row);
+    }
 }
 // export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
@@ -2506,7 +2530,7 @@ let AbstractTableModel = class AbstractTableModel extends GarbageCollector {
         assert.isNil(this.selectionColumnModel);
         const columnId = 'selection-column';
         this.selectionColumnModel = new SelectionColumnModel(columnId, () => this.getColumnTextProperties(columnId), selectionModel);
-        this.addRowClass("aup-row-selected", row => selectionModel.isSelected(row));
+        this.addRowClass("aup-row-selected", row => this.selectionColumnModel.isSelected(row));
         return this.addColumn(this.selectionColumnModel);
     }
     addEditControls(saveCommand) {
@@ -2548,10 +2572,6 @@ let AbstractTableModel = class AbstractTableModel extends GarbageCollector {
         }
         return column;
     }
-    get selectionModel() {
-        var _a;
-        return (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel;
-    }
     // removeColumn(column: ColumnModel<Row>) {
     //
     // }
@@ -2657,6 +2677,12 @@ AbstractTableModel = __decorate([
 class TableComponent extends ResizeAwareComponent {
     constructor(elementRef, ngZone) {
         super(elementRef, ngZone);
+        /**
+         * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
+         * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
+         * containment area.
+         */
+        this.enableScrolling = false;
         // TODO: support user defined header and row heights via css vars.
         this.headerHeight = new MutableValueModel(56);
         this.rowHeight = new MutableValueModel(48);
@@ -2667,7 +2693,9 @@ class TableComponent extends ResizeAwareComponent {
         this.visibleRowCount = chain(this.boundsModel).map(bounds => {
             // TODO: this doesn't take into account any css styling adjustments etc.  Will invistigate if it's an issue.
             const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;
-            return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
+            const rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
+            console.log({ rowCount });
+            return rowCount;
         }, {
             dependsOn: [actualHeaderHeight, this.rowHeight],
             postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)
@@ -2698,8 +2726,8 @@ class TableComponent extends ResizeAwareComponent {
 TableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-table',
-                template: "<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()\">\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    >\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",
-                styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}"]
+                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}"]
             },] }
 ];
 TableComponent.ctorParameters = () => [
@@ -2710,6 +2738,7 @@ TableComponent.propDecorators = {
     tableModel: [{ type: Input }],
     showHeaderModel: [{ type: Input }],
     showHeader: [{ type: Input }],
+    enableScrolling: [{ type: Input }, { type: HostBinding, args: ["class.enable-scrolling",] }],
     hideHeader: [{ type: HostBinding, args: ["class.hide-header",] }]
 };
 __decorate([