@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
65 lines • 12.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, ElementRef, inject, Renderer2 } from '@angular/core';
import { combineLatest, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ResizableTableType } from './resizable-table-base.service';
import { RESIZABLE_TABLE_SERVICE_TOKEN } from './resizable-table-service.token';
import { ColumnUnit } from './table-column-resize-standard/resizable-table.service';
import * as i0 from "@angular/core";
export class ResizableTableCellComponent {
constructor() {
this._table = inject(RESIZABLE_TABLE_SERVICE_TOKEN);
this._elementRef = inject(ElementRef);
this._renderer = inject(Renderer2);
/** Unsubscribe from all subscriptions on destroy */
this._onDestroy = new Subject();
}
ngOnInit() {
this._minWidth = parseFloat(getComputedStyle(this._elementRef.nativeElement).minWidth);
// if the table has already been initialised then we should set the initial size
if (this._table.isInitialised$.value) {
this.setColumnWidth();
this.setColumnFlex();
}
// update the sizes when columns are resized
combineLatest([this._table.onResize$, this._table.isResizing$]).pipe(takeUntil(this._onDestroy)).subscribe(() => {
this.setColumnWidth();
this.setColumnFlex();
});
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
/** Get the column index this cell is part of */
getCellIndex() {
return this._elementRef.nativeElement.cellIndex;
}
/** Set the width of the column */
setColumnWidth() {
const width = this._table.isResizing$.value || this._table.getColumnDisabled(this.getCellIndex()) ?
`${this._table.getColumnWidth(this.getCellIndex(), ColumnUnit.Pixel)}px` :
`${this._table.getColumnWidth(this.getCellIndex(), ColumnUnit.Percentage)}%`;
if (this._table.type === ResizableTableType.Expand) {
const minWidth = Math.max(this._table.getColumnWidth(this.getCellIndex(), ColumnUnit.Pixel), this._minWidth);
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', `${minWidth}px`);
}
this._renderer.setStyle(this._elementRef.nativeElement, 'width', width);
}
/** Set the flex value of the column */
setColumnFlex() {
// if we are resizing then always return 'none' to allow free movement
if (this._table.isResizing$.value || this._table.getColumnDisabled(this.getCellIndex())) {
this._renderer.setStyle(this._elementRef.nativeElement, 'flex', 'none');
return;
}
const flex = this._table.isInitialised$.value ? `0 1 ${this._table.getColumnWidth(this.getCellIndex(), ColumnUnit.Percentage)}%` : '';
this._renderer.setStyle(this._elementRef.nativeElement, 'flex', flex);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ResizableTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ResizableTableCellComponent, selector: "[uxResizableTableCell]", ngImport: i0, template: "<div class=\"ux-resizable-table-cell-content\">\n <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ResizableTableCellComponent, decorators: [{
type: Component,
args: [{ selector: '[uxResizableTableCell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ux-resizable-table-cell-content\">\n <ng-content></ng-content>\n</div>\n" }]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXphYmxlLXRhYmxlLWNlbGwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGFibGUvdGFibGUtY29sdW1uLXJlc2l6ZS9yZXNpemFibGUtdGFibGUtY2VsbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy90YWJsZS90YWJsZS1jb2x1bW4tcmVzaXplL3Jlc2l6YWJsZS10YWJsZS1jZWxsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBcUIsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3JILE9BQU8sRUFBRSxhQUFhLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzlDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNwRSxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNoRixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sd0RBQXdELENBQUM7O0FBT3BGLE1BQU0sT0FBTywyQkFBMkI7SUFMeEM7UUFNcUIsV0FBTSxHQUFHLE1BQU0sQ0FBQyw2QkFBNkIsQ0FBQyxDQUFDO1FBRS9DLGdCQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRWpDLGNBQVMsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7UUFFL0Msb0RBQW9EO1FBQ25DLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0tBeURyRDtJQXBERyxRQUFRO1FBQ0osSUFBSSxDQUFDLFNBQVMsR0FBRyxVQUFVLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxh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LENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBRXRJLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztJQUMxRSxDQUFDOytHQWhFUSwyQkFBMkI7bUdBQTNCLDJCQUEyQiw4RENaeEMsMEZBR0E7OzRGRFNhLDJCQUEyQjtrQkFMdkMsU0FBUzsrQkFDSSx3QkFBd0IsbUJBRWpCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBpbmplY3QsIE9uRGVzdHJveSwgT25Jbml0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGNvbWJpbmVMYXRlc3QsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IFJlc2l6YWJsZVRhYmxlVHlwZSB9IGZyb20gJy4vcmVzaXphYmxlLXRhYmxlLWJhc2Uuc2VydmljZSc7XG5pbXBvcnQgeyBSRVNJWkFCTEVfVEFCTEVfU0VSVklDRV9UT0tFTiB9IGZyb20gJy4vcmVzaXphYmxlLXRhYmxlLXNlcnZpY2UudG9rZW4nO1xuaW1wb3J0IHsgQ29sdW1uVW5pdCB9IGZyb20gJy4vdGFibGUtY29sdW1uLXJlc2l6ZS1zdGFuZGFyZC9yZXNpemFibGUtdGFibGUuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnW3V4UmVzaXphYmxlVGFibGVDZWxsXScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3Jlc2l6YWJsZS10YWJsZS1jZWxsLmNvbXBvbmVudC5odG1sJyxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBSZXNpemFibGVUYWJsZUNlbGxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBfdGFibGUgPSBpbmplY3QoUkVTSVpBQkxFX1RBQkxFX1NFUlZJQ0VfVE9LRU4pO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBfZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcblxuICAgIHByaXZhdGUgcmVhZG9ubHkgX3JlbmRlcmVyID0gaW5qZWN0KFJlbmRlcmVyMik7XG5cbiAgICAvKiogVW5zdWJzY3JpYmUgZnJvbSBhbGwgc3Vic2NyaXB0aW9ucyBvbiBkZXN0cm95ICovXG4gICAgcHJpdmF0ZSByZWFkb25seSBfb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAgIC8qKiBNaW4gd2lkdGggb2YgdGhlIGNvbHVtbiovXG4gICAgcHJpdmF0ZSBfbWluV2lkdGg6IG51bWJlcjtcblxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLl9taW5XaWR0aCA9IHBhcnNlRmxvYXQoZ2V0Q29tcHV0ZWRTdHlsZSh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQpLm1pbldpZHRoKTtcblxuICAgICAgICAvLyBpZiB0aGUgdGFibGUgaGFzIGFscmVhZHkgYmVlbiBpbml0aWFsaXNlZCB0aGVuIHdlIHNob3VsZCBzZXQgdGhlIGluaXRpYWwgc2l6ZVxuICAgICAgICBpZiAodGhpcy5fdGFibGUuaXNJbml0aWFsaXNlZCQudmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMuc2V0Q29sdW1uV2lkdGgoKTtcbiAgICAgICAgICAgIHRoaXMuc2V0Q29sdW1uRmxleCgpO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gdXBkYXRlIHRoZSBzaXplcyB3aGVuIGNvbHVtbnMgYXJlIHJlc2l6ZWRcbiAgICAgICAgY29tYmluZUxhdGVzdChbdGhpcy5fdGFibGUub25SZXNpemUkLCB0aGlzLl90YWJsZS5pc1Jlc2l6aW5nJF0pLnBpcGUodGFrZVVudGlsKHRoaXMuX29uRGVzdHJveSkpLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnNldENvbHVtbldpZHRoKCk7XG4gICAgICAgICAgICB0aGlzLnNldENvbHVtbkZsZXgoKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuX29uRGVzdHJveS5uZXh0KCk7XG4gICAgICAgIHRoaXMuX29uRGVzdHJveS5jb21wbGV0ZSgpO1xuICAgIH1cblxuICAgIC8qKiBHZXQgdGhlIGNvbHVtbiBpbmRleCB0aGlzIGNlbGwgaXMgcGFydCBvZiAqL1xuICAgIHByaXZhdGUgZ2V0Q2VsbEluZGV4KCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiAodGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50IGFzIEhUTUxUYWJsZUNlbGxFbGVtZW50KS5jZWxsSW5kZXg7XG4gICAgfVxuXG4gICAgLyoqIFNldCB0aGUgd2lkdGggb2YgdGhlIGNvbHVtbiAqL1xuICAgIHByaXZhdGUgc2V0Q29sdW1uV2lkdGgoKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IHdpZHRoID0gdGhpcy5fdGFibGUuaXNSZXNpemluZyQudmFsdWUgfHwgdGhpcy5fdGFibGUuZ2V0Q29sdW1uRGlzYWJsZWQodGhpcy5nZXRDZWxsSW5kZXgoKSkgP1xuICAgICAgICAgICAgYCR7dGhpcy5fdGFibGUuZ2V0Q29sdW1uV2lkdGgodGhpcy5nZXRDZWxsSW5kZXgoKSwgQ29sdW1uVW5pdC5QaXhlbCl9cHhgIDpcbiAgICAgICAgICAgIGAke3RoaXMuX3RhYmxlLmdldENvbHVtbldpZHRoKHRoaXMuZ2V0Q2VsbEluZGV4KCksIENvbHVtblVuaXQuUGVyY2VudGFnZSl9JWA7XG5cbiAgICAgICAgaWYgKHRoaXMuX3RhYmxlLnR5cGUgPT09IFJlc2l6YWJsZVRhYmxlVHlwZS5FeHBhbmQpIHtcbiAgICAgICAgICAgIGNvbnN0IG1pbldpZHRoID0gTWF0aC5tYXgodGhpcy5fdGFibGUuZ2V0Q29sdW1uV2lkdGgodGhpcy5nZXRDZWxsSW5kZXgoKSwgQ29sdW1uVW5pdC5QaXhlbCksIHRoaXMuX21pbldpZHRoKTtcbiAgICAgICAgICAgIHRoaXMuX3JlbmRlcmVyLnNldFN0eWxlKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCwgJ21pbi13aWR0aCcsIGAke21pbldpZHRofXB4YCk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLl9yZW5kZXJlci5zZXRTdHlsZSh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICd3aWR0aCcsIHdpZHRoKTtcbiAgICB9XG5cbiAgICAvKiogU2V0IHRoZSBmbGV4IHZhbHVlIG9mIHRoZSBjb2x1bW4gKi9cbiAgICBwcml2YXRlIHNldENvbHVtbkZsZXgoKTogdm9pZCB7XG4gICAgICAgIC8vIGlmIHdlIGFyZSByZXNpemluZyB0aGVuIGFsd2F5cyByZXR1cm4gJ25vbmUnIHRvIGFsbG93IGZyZWUgbW92ZW1lbnRcbiAgICAgICAgaWYgKHRoaXMuX3RhYmxlLmlzUmVzaXppbmckLnZhbHVlIHx8IHRoaXMuX3RhYmxlLmdldENvbHVtbkRpc2FibGVkKHRoaXMuZ2V0Q2VsbEluZGV4KCkpKSB7XG4gICAgICAgICAgICB0aGlzLl9yZW5kZXJlci5zZXRTdHlsZSh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsICdmbGV4JywgJ25vbmUnKTtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IGZsZXggPSB0aGlzLl90YWJsZS5pc0luaXRpYWxpc2VkJC52YWx1ZSA/IGAwIDEgJHt0aGlzLl90YWJsZS5nZXRDb2x1bW5XaWR0aCh0aGlzLmdldENlbGxJbmRleCgpLCBDb2x1bW5Vbml0LlBlcmNlbnRhZ2UpfSVgIDogJyc7XG5cbiAgICAgICAgdGhpcy5fcmVuZGVyZXIuc2V0U3R5bGUodGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCAnZmxleCcsIGZsZXgpO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ1eC1yZXNpemFibGUtdGFibGUtY2VsbC1jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=