@coolon/angular-ui-powerups 16.1.0-aplpha.39 → 16.1.0-aplpha.41

package/fesm2022/coolon-angular-ui-powerups.mjs

@@ -17,7 +17,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i3$2 from '@angular/cdk/portal';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import * as i1$2 from '@angular/cdk/scrolling';
-import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { CdkScrollableModule, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i7 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2 from '@angular/material/button';
@@ -3455,25 +3455,14 @@ class Bounds extends Dimension {
 })(Bounds || (Bounds = {}));
 
 class ResizeAwareComponent extends DisposableComponent {
-    elementRef;
-    ngZone;
-    _bounds$ = new MutableValueModel(new Bounds(0, 0, 0, 0));
-    constructor(elementRef, ngZone) {
-        super();
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-    }
+    elementRef = this.inject(ElementRef);
+    ngZone = this.inject(NgZone);
+    boundsTracker = new ResizeAwareComponent.ResizeTracker(this.elementRef, this.ngZone);
     ngAfterViewInit() {
-        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());
+        this.boundsTracker.notifyViewReady();
     }
     get bounds$() {
-        return this._bounds$.readonly$;
+        return this.boundsTracker.bounds$;
     }
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -3483,17 +3472,65 @@ class ResizeAwareComponent extends DisposableComponent {
         return this.bounds.relativePositionOf(point);
     }
     get bounds() {
-        return this._bounds$.value;
-    }
-    _updateBounds() {
-        this._bounds$.value = Bounds.ofElement(this.nativeElement);
+        return this.bounds$.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ResizeAwareComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ResizeAwareComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: ResizeAwareComponent, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ResizeAwareComponent, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
+        }] });
+(function (ResizeAwareComponent) {
+    class ResizeTracker extends GarbageCollector {
+        elementRef;
+        ngZone;
+        _bounds$ = new MutableValueModel(new Bounds(0, 0, 0, 0));
+        width$;
+        height$;
+        top$;
+        left$;
+        bottom$;
+        right$;
+        constructor(elementRef, ngZone) {
+            super();
+            this.elementRef = elementRef;
+            this.ngZone = ngZone;
+            const { chain } = Dsl.disposeWith(this);
+            this.width$ = chain(this.bounds$).pluck("width");
+            this.height$ = chain(this.bounds$).pluck("height");
+            this.top$ = chain(this.bounds$).pluck("top");
+            this.left$ = chain(this.bounds$).pluck("left");
+            this.bottom$ = chain.numericValue(this.top$).add(this.height$);
+            this.right$ = chain.numericValue(this.left$).add(this.width$);
+        }
+        notifyViewReady() {
+            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 bounds$() {
+            return this._bounds$.readonly$;
+        }
+        get nativeElement() {
+            return this.elementRef.nativeElement;
+        }
+        // TODO: Make this handle body scroll
+        relativePositionOf(point) {
+            return this.bounds.relativePositionOf(point);
+        }
+        get bounds() {
+            return this._bounds$.value;
+        }
+        _updateBounds() {
+            this._bounds$.value = Bounds.ofElement(this.nativeElement);
+        }
+    }
+    ResizeAwareComponent.ResizeTracker = ResizeTracker;
+})(ResizeAwareComponent || (ResizeAwareComponent = {}));
 
 var ColumnOrderManager;
 (function (ColumnOrderManager) {
@@ -3543,7 +3580,6 @@ class ColumnManager extends GarbageCollector {
         const target = this._columnRefs$.query().findMatching(it => it.column === column);
         const position = this.computePosition(newPosition);
         this._columnRefs$.replace(target, { with: new ColumnRef(target.column, position) });
-        console.log(this._columnRefs$.value.map(r => [r.column.columnId, r.position]));
     }
     getColumn(id) {
         return this._columnsById$.get(id);
@@ -3571,17 +3607,13 @@ class ColumnManager extends GarbageCollector {
                 const index = q.findIndex(ref => ref.column === col);
                 const beforeCol = q.value[index];
                 const afterCol = index - 1 >= 0 ? q.value[index - 1] : undefined;
-                return afterCol ?
-                    generateKeyBetween(afterCol.position, beforeCol.position) :
-                    generateKeyBetween(null, beforeCol.position);
+                return generateKeyBetween(afterCol?.position, beforeCol.position);
             },
             after(col) {
                 const index = q.findIndex(ref => ref.column === col);
                 const afterCol = q.value[index];
                 const beforeCol = index + 1 < q.length ? q.value[index + 1] : undefined;
-                return beforeCol ?
-                    generateKeyBetween(afterCol.position, beforeCol.position) :
-                    generateKeyBetween(afterCol.position, null);
+                return generateKeyBetween(afterCol.position, beforeCol?.position);
             },
             first() {
                 return generateKeyBetween(null, q.first()?.position);
@@ -4305,8 +4337,8 @@ class TableBodyComponent extends ResizeAwareComponent {
     headerHeight$ = new MutableValueModel(29);
     rowHeight$ = new MutableValueModel(40);
     baseCssClass = "aup-table-component";
-    constructor(elementRef, ngZone) {
-        super(elementRef, ngZone);
+    constructor() {
+        super();
         const { chain, when } = Dsl.disposeWith(this);
         const actualHeaderHeight$ = chain(this.showHeader$).map(show => {
             return show ? this.headerHeight$.value : 0;
@@ -4355,7 +4387,7 @@ class TableBodyComponent extends ResizeAwareComponent {
         }
         return classes;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableBodyComponent, selector: "aup-table-body", inputs: { data$: "data$", tableModel: "tableModel", showHeader$: "showHeader$", showHeader: "showHeader", trackBy: "trackBy", enableScrolling: "enableScrolling" }, outputs: { visibleRowCount: "visibleRowCount" }, host: { properties: { "class.enable-scrolling": "this.enableScrolling", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"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 [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\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 [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]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { kind: "component", type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }] });
 }
 __decorate([
@@ -4377,7 +4409,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: "aup-table-body", template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"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 [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\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 [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]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { data$: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { data$: [{
                 type: Input
             }], tableModel: [{
                 type: Input
@@ -5741,7 +5773,8 @@ class ComponentsModule {
             MatMenuModule,
             MatDividerModule,
             MatProgressSpinnerModule,
-            MatProgressBarModule], exports: [NumberInputComponent,
+            MatProgressBarModule,
+            ScrollingModule], exports: [NumberInputComponent,
             StringInputComponent,
             TextInputComponent,
             PasswordInputComponent,
@@ -5803,7 +5836,8 @@ class ComponentsModule {
             MatMenuModule,
             MatDividerModule,
             MatProgressSpinnerModule,
-            MatProgressBarModule] });
+            MatProgressBarModule,
+            ScrollingModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ComponentsModule, decorators: [{
             type: NgModule,
@@ -5828,7 +5862,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         MatMenuModule,
                         MatDividerModule,
                         MatProgressSpinnerModule,
-                        MatProgressBarModule
+                        MatProgressBarModule,
+                        ScrollingModule
                     ],
                     declarations: [
                         AbstractInputComponent,