@coolon/angular-ui-powerups 3.14.0 → 3.15.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.15.1](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.15.0...v3.15.1) (2021-02-24)
+
+
+### Bug Fixes
+
+* removed console.logs ([9fdfba3](https://bitbucket.org/coolon/angular-ui-powerups/commit/9fdfba373e76d867b422304cb3479e36d0baa174))
+
+## [3.15.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.14.0...v3.15.0) (2021-02-23)
+
+
+### Features
+
+* added aup-table enableScrolling property ([e2ec5c2](https://bitbucket.org/coolon/angular-ui-powerups/commit/e2ec5c2fe023bc645809d9278214a6956d38b19d))
+
 ## [3.14.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.13.0...v3.14.0) (2021-02-23)
 
 

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

@@ -2389,13 +2389,13 @@
         }
         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(); });
+            setTimeout(function () { return _this._updateBounds(); });
         };
         Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
             get: function () {
@@ -3305,6 +3305,12 @@
         __extends(TableComponent, _super);
         function TableComponent(elementRef, ngZone) {
             var _this = _super.call(this, elementRef, ngZone) || this;
+            /**
+             * 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 pectin.MutableValueModel(56);
             _this.rowHeight = new pectin.MutableValueModel(48);
@@ -3315,7 +3321,9 @@
             _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 - actualHeaderHeight.value) / _this.rowHeight.value;
-                return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
+                var rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
+                // console.log({rowCount})
+                return rowCount;
             }, {
                 dependsOn: [actualHeaderHeight, _this.rowHeight],
                 postponeWhile: chain(_this.boundsModel).pluckNumeric('height').isLessThan(1)
@@ -3352,8 +3360,8 @@
     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()\" [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",
-                    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 = function () { return [
@@ -3364,6 +3372,7 @@
         tableModel: [{ type: i0.Input }],
         showHeaderModel: [{ type: i0.Input }],
         showHeader: [{ type: i0.Input }],
+        enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.enable-scrolling",] }],
         hideHeader: [{ type: i0.HostBinding, args: ["class.hide-header",] }]
     };
     __decorate([