@coolon/angular-ui-powerups 3.11.1 → 3.12.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.12.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.11.2...v3.12.0) (2021-02-22)
+
+
+### Features
+
+* added visible row count model to tables to support paging ([e33e8c3](https://bitbucket.org/coolon/angular-ui-powerups/commit/e33e8c328bb43481f638db42bdee8852d843ca1c))
+
+### [3.11.2](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.11.1...v3.11.2) (2021-02-11)
+
+
+### Bug Fixes
+
+* added row selection backgound ([f6d6a2d](https://bitbucket.org/coolon/angular-ui-powerups/commit/f6d6a2d3bfbd7374470f5f21f805bfe4c167a5c8))
+* fixed broken schematic default for new places ([6dd720b](https://bitbucket.org/coolon/angular-ui-powerups/commit/6dd720b0e7ccc1da9d04ffa016ce9ab9d47ae4e7))
+
 ### [3.11.1](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.11.0...v3.11.1) (2021-02-10)
 
 

package/assets/table.scss

@@ -1,5 +1,6 @@
 aup-table {
   --default-column-gap: var(--column-gap, 24px); // material design table column padding
+  --resolved-row-selected-background-color: var(--row-selected-background-color, rgba(0, 0, 255, 0.04));
   --resolved-row-hover-background-color: var(--row-hover-background-color, rgba(0, 0, 0, 0.05));
 
   .mat-table {
@@ -8,8 +9,14 @@ aup-table {
       padding-left: 0;
     }
 
-    tr.enable-hover:hover {
-      background-color: var(--resolved-row-hover-background-color);
+    tr {
+      &.enable-hover:hover {
+        background-color: var(--resolved-row-hover-background-color);
+      }
+
+      &.aup-row-selected, &.aup-row-selected.enable-hover:hover {
+        background-color: var(--resolved-row-selected-background-color);
+      }
     }
 
     td.enable-cursor {
@@ -21,18 +28,12 @@ aup-table {
     // - columns with an explicit with will try to remain that width, but will expand to fit thier content.
     // - extra space will be allocated to columns that have the same width... e.g. setting all columns to 1px results
     //   in the same scenario as not specifying the width.
-    //
-    // The following setup keeps all cells to the min width except for the last which will expand to take up
-    // the remaining space. The downside is it'll wrap text by default. Which I could disable... but I need
-    // to think about it more.
-    //
-    //.mat-cell:not(.flex) {
-    //  width: 1px;
-    //}
-    //.mat-cell:last-of-type {
-    //  width: 0;
-    //}
-
+    .mat-cell, .mat-header-cell {
+      &:not(.flex) {
+        width: 1px;
+        white-space: nowrap;
+      }
+    }
   }
 
   aup-table-cell-renderer, aup-table-header-cell-renderer {

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('resize-observer-polyfill'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', 'resize-observer-polyfill', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global._, global.typescriptStringEnums, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ResizeObserver, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations));
-}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, _, typescriptStringEnums, typescriptUtilities, produce, flexLayout, i1, i1$1, overlay, ResizeObserver, list, fastMemoizeDecorator, reflectMetadata, animations$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', 'resize-observer-polyfill', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global._, global.typescriptStringEnums, global.ResizeObserver, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations));
+}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, _, typescriptStringEnums, ResizeObserver, typescriptUtilities, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-    var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
     var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
+    var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -729,7 +729,7 @@
         { type: i0.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))}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 td.enable-cursor{cursor:pointer}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 .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 = function () { return []; };
@@ -2328,6 +2328,113 @@
         __metadata("design:type", Object)
     ], SwitchCaseComponent.prototype, "switch", void 0);
 
+    var Dimension = /** @class */ (function () {
+        function Dimension(width, height) {
+            this.width = width;
+            this.height = height;
+        }
+        return Dimension;
+    }());
+
+    var Point = /** @class */ (function () {
+        function Point(x, y) {
+            this.x = x;
+            this.y = y;
+        }
+        Point.from = function (data) {
+            return new Point(data.x, data.y);
+        };
+        Point.prototype.translate = function (x, y) {
+            return new Point(this.x + x, this.y + y);
+        };
+        return Point;
+    }());
+
+    exports.Bounds = /** @class */ (function (_super) {
+        __extends(Bounds, _super);
+        function Bounds(top, left, width, height) {
+            var _this = _super.call(this, width, height) || this;
+            _this.top = top;
+            _this.left = left;
+            _this.width = width;
+            _this.height = height;
+            return _this;
+        }
+        Bounds.prototype.relativePositionOf = function (point) {
+            if (point instanceof MouseEvent) {
+                return new Point(point.clientX - this.left, point.clientY - this.top);
+            }
+            else {
+                return new Point(point.x - this.left, point.y - this.top);
+            }
+        };
+        return Bounds;
+    }(Dimension));
+    (function (Bounds) {
+        function ofElement(element) {
+            var rect = element.getBoundingClientRect();
+            return new Bounds(rect.top, rect.left, rect.width, rect.height);
+        }
+        Bounds.ofElement = ofElement;
+    })(exports.Bounds || (exports.Bounds = {}));
+
+    var ResizeAwareComponent = /** @class */ (function (_super) {
+        __extends(ResizeAwareComponent, _super);
+        function ResizeAwareComponent(elementRef, ngZone) {
+            var _this = _super.call(this) || this;
+            _this.elementRef = elementRef;
+            _this.ngZone = ngZone;
+            _this._boundsModel = new pectin.MutableValueModel(new exports.Bounds(0, 0, 0, 0));
+            return _this;
+        }
+        ResizeAwareComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.updateBounds();
+            var element = this.elementRef.nativeElement;
+            var ro = new ResizeObserver__default['default'](function (entries, observer) {
+                _this.ngZone.run(function () { return _this.updateBounds(); });
+            });
+            ro.observe(element);
+            this.onDispose(function () { return ro.disconnect(); });
+        };
+        Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
+            get: function () {
+                return this._boundsModel.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
+            get: function () {
+                return this.elementRef.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // TODO: Make this handle body scroll
+        ResizeAwareComponent.prototype.relativePositionOf = function (point) {
+            return this.bounds.relativePositionOf(point);
+        };
+        Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
+            get: function () {
+                return this._boundsModel.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ResizeAwareComponent.prototype.updateBounds = function () {
+            this._boundsModel.value = exports.Bounds.ofElement(this.nativeElement);
+        };
+        return ResizeAwareComponent;
+    }(DisposableComponent));
+    ResizeAwareComponent.decorators = [
+        { type: i0.Directive }
+    ];
+    ResizeAwareComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+
     var HEADER_CELL_RENDERER_PORTAL = Symbol('aup-cell-header-renderer-component-ref');
     var CELL_RENDERER_PORTAL = Symbol('aup-cell-renderer-component-ref');
     var CELL_EDITOR_PORTAL = Symbol('aup-cell-editor-component-ref');
@@ -3015,6 +3122,7 @@
             pectin.assert.isNil(this.selectionColumnModel);
             var columnId = 'selection-column';
             this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
+            this.addRowClass("aup-row-selected", function (row) { return selectionModel.isSelected(row); });
             return this.addColumn(this.selectionColumnModel);
         };
         AbstractTableModel.prototype.addEditControls = function (saveCommand) {
@@ -3161,6 +3269,8 @@
      * @example
      * aup-table {
      *   --column-gap: 10px; // defaults to 24px
+     *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
+     *   --row-selected-background-color: rebeccapurple; // defaults to transparent
      *   aup-table-cell-renderer {
      *     &:first-column {
      *       // do stuff
@@ -3173,8 +3283,21 @@
      */
     var TableComponent = /** @class */ (function (_super) {
         __extends(TableComponent, _super);
-        function TableComponent() {
-            return _super.call(this) || this;
+        function TableComponent(elementRef, ngZone) {
+            var _this = _super.call(this, elementRef, ngZone) || this;
+            // TODO: support user defined header and row heights via css vars.
+            _this.headerHeight = new pectin.MutableValueModel(56);
+            _this.rowHeight = new pectin.MutableValueModel(48);
+            var chain = pectin.Dsl.disposeWith(_this).chain;
+            _this.visibleRowCount = chain(_this.boundsModel).map(function (bounds) {
+                // TODO: this doesn't take into account any css styling adjustments etc.  Will invistigate if it's an issue.
+                var rawRowCount = (bounds.height - _this.headerHeight.value) / _this.rowHeight.value;
+                return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
+            }, {
+                dependsOn: [_this.headerHeight, _this.rowHeight],
+                postponeWhile: chain(_this.boundsModel).pluckNumeric('height').isLessThan(1)
+            });
+            return _this;
         }
         TableComponent.prototype.ngOnInit = function () {
             var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
@@ -3195,15 +3318,18 @@
             this.tableModel._notifyCellClicked(columnModel, row);
         };
         return TableComponent;
-    }(DisposableComponent));
+    }(ResizeAwareComponent));
     TableComponent.decorators = [
         { type: i0.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{flex:1;width:100%}.mat-column-selection-column{width:1px!important}.mat-cell:not(.flex),.mat-header-cell:not(.flex){white-space:nowrap;width:1px}"]
+                    styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{flex:1;width:100%}"]
                 },] }
     ];
-    TableComponent.ctorParameters = function () { return []; };
+    TableComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
     TableComponent.propDecorators = {
         tableModel: [{ type: i0.Input }]
     };
@@ -5504,113 +5630,6 @@
                 },] }
     ];
 
-    var Dimension = /** @class */ (function () {
-        function Dimension(width, height) {
-            this.width = width;
-            this.height = height;
-        }
-        return Dimension;
-    }());
-
-    var Point = /** @class */ (function () {
-        function Point(x, y) {
-            this.x = x;
-            this.y = y;
-        }
-        Point.from = function (data) {
-            return new Point(data.x, data.y);
-        };
-        Point.prototype.translate = function (x, y) {
-            return new Point(this.x + x, this.y + y);
-        };
-        return Point;
-    }());
-
-    exports.Bounds = /** @class */ (function (_super) {
-        __extends(Bounds, _super);
-        function Bounds(top, left, width, height) {
-            var _this = _super.call(this, width, height) || this;
-            _this.top = top;
-            _this.left = left;
-            _this.width = width;
-            _this.height = height;
-            return _this;
-        }
-        Bounds.prototype.relativePositionOf = function (point) {
-            if (point instanceof MouseEvent) {
-                return new Point(point.clientX - this.left, point.clientY - this.top);
-            }
-            else {
-                return new Point(point.x - this.left, point.y - this.top);
-            }
-        };
-        return Bounds;
-    }(Dimension));
-    (function (Bounds) {
-        function ofElement(element) {
-            var rect = element.getBoundingClientRect();
-            return new Bounds(rect.top, rect.left, rect.width, rect.height);
-        }
-        Bounds.ofElement = ofElement;
-    })(exports.Bounds || (exports.Bounds = {}));
-
-    var ResizeAwareComponent = /** @class */ (function (_super) {
-        __extends(ResizeAwareComponent, _super);
-        function ResizeAwareComponent(elementRef, ngZone) {
-            var _this = _super.call(this) || this;
-            _this.elementRef = elementRef;
-            _this.ngZone = ngZone;
-            _this._boundsModel = new pectin.MutableValueModel(new exports.Bounds(0, 0, 0, 0));
-            return _this;
-        }
-        ResizeAwareComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.updateBounds();
-            var element = this.elementRef.nativeElement;
-            var ro = new ResizeObserver__default['default'](function (entries, observer) {
-                _this.ngZone.run(function () { return _this.updateBounds(); });
-            });
-            ro.observe(element);
-            this.onDispose(function () { return ro.disconnect(); });
-        };
-        Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
-            get: function () {
-                return this._boundsModel.readonly;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
-            get: function () {
-                return this.elementRef.nativeElement;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        // TODO: Make this handle body scroll
-        ResizeAwareComponent.prototype.relativePositionOf = function (point) {
-            return this.bounds.relativePositionOf(point);
-        };
-        Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
-            get: function () {
-                return this._boundsModel.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ResizeAwareComponent.prototype.updateBounds = function () {
-            this._boundsModel.value = exports.Bounds.ofElement(this.nativeElement);
-        };
-        return ResizeAwareComponent;
-    }(DisposableComponent));
-    ResizeAwareComponent.decorators = [
-        { type: i0.Directive }
-    ];
-    ResizeAwareComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.NgZone }
-    ]; };
-
     /**
      * Example:
      * @example