@coolon/angular-ui-powerups 3.11.2 → 3.12.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

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.
@@ -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');
@@ -3176,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;
@@ -3198,7 +3318,7 @@
             this.tableModel._notifyCellClicked(columnModel, row);
         };
         return TableComponent;
-    }(DisposableComponent));
+    }(ResizeAwareComponent));
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-table',
@@ -3206,7 +3326,10 @@
                     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 }]
     };
@@ -5507,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