@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
76 lines • 11.7 kB
JavaScript
import { ContentChildren, Directive } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { BaseResizableTableDirective } from '../resizable-table-base.directive';
import { ResizableTableColumnComponent } from '../resizable-table-column.component';
import { RESIZABLE_TABLE_SERVICE_TOKEN } from '../resizable-table-service.token';
import { ResizableTableService } from './resizable-table.service';
import * as i0 from "@angular/core";
export class ResizableTableDirective extends BaseResizableTableDirective {
constructor() {
super();
// we should hide any horizontal overflow when we are resizing
this._table.isResizing$.pipe(takeUntil(this._onDestroy)).subscribe(this.setOverflow.bind(this));
}
/**
* If this is being used within a modal the table width may initially be zero. This can cause some issues when it does actually appear
* visibily on screen. We should only setup the table once we actually have a width/
*/
onTableReady() {
// if we have already initialised or the table width is currently 0 then do nothing
if (this._initialised || this.getScrollWidth() === 0) {
return;
}
// ensure we initially set the table width
this._table.tableWidth = this.getScrollWidth();
// set the columns - prevent expression changed error
Promise.resolve().then(() => {
// initially set the columns
this._table.setColumns(this.columns);
// force relayout to occur to ensure the UI is consistent with the internal state
this.updateLayout();
});
// watch for any future changes to the columns
this.columns.changes.pipe(takeUntil(this._onDestroy)).subscribe(() => Promise.resolve().then(() => this._table.setColumns(this.columns)));
this._initialised = true;
}
/** Force the layout to recalculate */
updateLayout() {
Promise.resolve().then(() => this.columns.forEach((_column, index) => this._table.resizeColumn(index, 0)));
}
/**
* We should hide any horizontal overflow whenever we are resizing, this is because when we are dragging a column
* we must set the column widths in pixel values as percentages cause some jankiness when moving them. However pixel
* values are less precise and can in some cases cause overflow, so we should hide overflow when we are resizing
*/
setOverflow(isResizing) {
Array.from(this._elementRef.nativeElement.tBodies)
.forEach(tbody => this._renderer.setStyle(tbody, 'overflow-x', isResizing ? 'hidden' : null));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ResizableTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: ResizableTableDirective, selector: "[uxResizableTable]", host: { classAttribute: "ux-resizable-table" }, providers: [
{
provide: RESIZABLE_TABLE_SERVICE_TOKEN,
useClass: ResizableTableService
}
], queries: [{ propertyName: "columns", predicate: ResizableTableColumnComponent, descendants: true }], exportAs: ["ux-resizable-table"], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ResizableTableDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxResizableTable]',
exportAs: 'ux-resizable-table',
providers: [
{
provide: RESIZABLE_TABLE_SERVICE_TOKEN,
useClass: ResizableTableService
}
],
host: {
class: 'ux-resizable-table'
}
}]
}], ctorParameters: () => [], propDecorators: { columns: [{
type: ContentChildren,
args: [ResizableTableColumnComponent, { descendants: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXphYmxlLXRhYmxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3RhYmxlL3RhYmxlLWNvbHVtbi1yZXNpemUvdGFibGUtY29sdW1uLXJlc2l6ZS1zdGFuZGFyZC9yZXNpemFibGUtdGFibGUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsU0FBUyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNoRixPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUNwRixPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNqRixPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQzs7QUFlbEUsTUFBTSxPQUFPLHVCQUF3QixTQUFRLDJCQUEyQjtJQUtwRTtRQUNJLEtBQUssRUFBRSxDQUFDO1FBQ1IsOERBQThEO1FBQzlELElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDcEcsQ0FBQztJQUVEOzs7T0FHRztJQUNILFlBQVk7UUFFUixtRkFBbUY7UUFDbkYsSUFBSSxJQUFJLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUUsS0FBSyxDQUFDLEVBQUUsQ0FBQztZQUNuRCxPQUFPO1FBQ1gsQ0FBQztRQUVELDBDQUEwQztRQUMxQyxJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFFL0MscURBQXFEO1FBQ3JELE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ3hCLDRCQUE0QjtZQUM1QixJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7WUFFckMsaUZBQWlGO1lBQ2pGLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN4QixDQUFDLENBQUMsQ0FBQztRQUVILDhDQUE4QztRQUM5QyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FDakUsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FDckUsQ0FBQztRQUVGLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDO0lBQzdCLENBQUM7SUFFRCxzQ0FBc0M7SUFDdEMsWUFBWTtRQUNSLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQy9HLENBQUM7SUFFRDs7OztPQUlHO0lBQ0ssV0FBVyxDQUFDLFVBQW1CO1FBQ25DLEtBQUssQ0FBQyxJQUFJLENBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFrQyxDQUFDLE9BQU8sQ0FBQzthQUNuRSxPQUFPLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsWUFBWSxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBQ3RHLENBQUM7K0dBdkRRLHVCQUF1QjttR0FBdkIsdUJBQXVCLDZGQVZyQjtZQUNQO2dCQUNJLE9BQU8sRUFBRSw2QkFBNkI7Z0JBQ3RDLFFBQVEsRUFBRSxxQkFBcUI7YUFDbEM7U0FDSixrREFRZ0IsNkJBQTZCOzs0RkFIckMsdUJBQXVCO2tCQWJuQyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFNBQVMsRUFBRTt3QkFDUDs0QkFDSSxPQUFPLEVBQUUsNkJBQTZCOzRCQUN0QyxRQUFRLEVBQUUscUJBQXFCO3lCQUNsQztxQkFDSjtvQkFDRCxJQUFJLEVBQUU7d0JBQ0YsS0FBSyxFQUFFLG9CQUFvQjtxQkFDOUI7aUJBQ0o7d0RBSTBFLE9BQU87c0JBQTdFLGVBQWU7dUJBQUMsNkJBQTZCLEVBQUUsRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29udGVudENoaWxkcmVuLCBEaXJlY3RpdmUsIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgQmFzZVJlc2l6YWJsZVRhYmxlRGlyZWN0aXZlIH0gZnJvbSAnLi4vcmVzaXphYmxlLXRhYmxlLWJhc2UuZGlyZWN0aXZlJztcbmltcG9ydCB7IFJlc2l6YWJsZVRhYmxlQ29sdW1uQ29tcG9uZW50IH0gZnJvbSAnLi4vcmVzaXphYmxlLXRhYmxlLWNvbHVtbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgUkVTSVpBQkxFX1RBQkxFX1NFUlZJQ0VfVE9LRU4gfSBmcm9tICcuLi9yZXNpemFibGUtdGFibGUtc2VydmljZS50b2tlbic7XG5pbXBvcnQgeyBSZXNpemFibGVUYWJsZVNlcnZpY2UgfSBmcm9tICcuL3Jlc2l6YWJsZS10YWJsZS5zZXJ2aWNlJztcblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbdXhSZXNpemFibGVUYWJsZV0nLFxuICAgIGV4cG9ydEFzOiAndXgtcmVzaXphYmxlLXRhYmxlJyxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAge1xuICAgICAgICAgICAgcHJvdmlkZTogUkVTSVpBQkxFX1RBQkxFX1NFUlZJQ0VfVE9LRU4sXG4gICAgICAgICAgICB1c2VDbGFzczogUmVzaXphYmxlVGFibGVTZXJ2aWNlXG4gICAgICAgIH1cbiAgICBdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICd1eC1yZXNpemFibGUtdGFibGUnXG4gICAgfVxufSlcbmV4cG9ydCBjbGFzcyBSZXNpemFibGVUYWJsZURpcmVjdGl2ZSBleHRlbmRzIEJhc2VSZXNpemFibGVUYWJsZURpcmVjdGl2ZSB7XG5cbiAgICAvKiogR2V0IGFsbCB0aGUgY29sdW1uIGhlYWRlcnMgKi9cbiAgICBAQ29udGVudENoaWxkcmVuKFJlc2l6YWJsZVRhYmxlQ29sdW1uQ29tcG9uZW50LCB7IGRlc2NlbmRhbnRzOiB0cnVlIH0pIGNvbHVtbnM6IFF1ZXJ5TGlzdDxSZXNpemFibGVUYWJsZUNvbHVtbkNvbXBvbmVudD47XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoKTtcbiAgICAgICAgLy8gd2Ugc2hvdWxkIGhpZGUgYW55IGhvcml6b250YWwgb3ZlcmZsb3cgd2hlbiB3ZSBhcmUgcmVzaXppbmdcbiAgICAgICAgdGhpcy5fdGFibGUuaXNSZXNpemluZyQucGlwZSh0YWtlVW50aWwodGhpcy5fb25EZXN0cm95KSkuc3Vic2NyaWJlKHRoaXMuc2V0T3ZlcmZsb3cuYmluZCh0aGlzKSk7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogSWYgdGhpcyBpcyBiZWluZyB1c2VkIHdpdGhpbiBhIG1vZGFsIHRoZSB0YWJsZSB3aWR0aCBtYXkgaW5pdGlhbGx5IGJlIHplcm8uIFRoaXMgY2FuIGNhdXNlIHNvbWUgaXNzdWVzIHdoZW4gaXQgZG9lcyBhY3R1YWxseSBhcHBlYXJcbiAgICAgKiB2aXNpYmlseSBvbiBzY3JlZW4uIFdlIHNob3VsZCBvbmx5IHNldHVwIHRoZSB0YWJsZSBvbmNlIHdlIGFjdHVhbGx5IGhhdmUgYSB3aWR0aC9cbiAgICAgKi9cbiAgICBvblRhYmxlUmVhZHkoKTogdm9pZCB7XG5cbiAgICAgICAgLy8gaWYgd2UgaGF2ZSBhbHJlYWR5IGluaXRpYWxpc2VkIG9yIHRoZSB0YWJsZSB3aWR0aCBpcyBjdXJyZW50bHkgMCB0aGVuIGRvIG5vdGhpbmdcbiAgICAgICAgaWYgKHRoaXMuX2luaXRpYWxpc2VkIHx8IHRoaXMuZ2V0U2Nyb2xsV2lkdGgoKSA9PT0gMCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gZW5zdXJlIHdlIGluaXRpYWxseSBzZXQgdGhlIHRhYmxlIHdpZHRoXG4gICAgICAgIHRoaXMuX3RhYmxlLnRhYmxlV2lkdGggPSB0aGlzLmdldFNjcm9sbFdpZHRoKCk7XG5cbiAgICAgICAgLy8gc2V0IHRoZSBjb2x1bW5zIC0gcHJldmVudCBleHByZXNzaW9uIGNoYW5nZWQgZXJyb3JcbiAgICAgICAgUHJvbWlzZS5yZXNvbHZlKCkudGhlbigoKSA9PiB7XG4gICAgICAgICAgICAvLyBpbml0aWFsbHkgc2V0IHRoZSBjb2x1bW5zXG4gICAgICAgICAgICB0aGlzLl90YWJsZS5zZXRDb2x1bW5zKHRoaXMuY29sdW1ucyk7XG5cbiAgICAgICAgICAgIC8vIGZvcmNlIHJlbGF5b3V0IHRvIG9jY3VyIHRvIGVuc3VyZSB0aGUgVUkgaXMgY29uc2lzdGVudCB3aXRoIHRoZSBpbnRlcm5hbCBzdGF0ZVxuICAgICAgICAgICAgdGhpcy51cGRhdGVMYXlvdXQoKTtcbiAgICAgICAgfSk7XG5cbiAgICAgICAgLy8gd2F0Y2ggZm9yIGFueSBmdXR1cmUgY2hhbmdlcyB0byB0aGUgY29sdW1uc1xuICAgICAgICB0aGlzLmNvbHVtbnMuY2hhbmdlcy5waXBlKHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpKS5zdWJzY3JpYmUoKCkgPT5cbiAgICAgICAgICAgIFByb21pc2UucmVzb2x2ZSgpLnRoZW4oKCkgPT4gdGhpcy5fdGFibGUuc2V0Q29sdW1ucyh0aGlzLmNvbHVtbnMpKVxuICAgICAgICApO1xuXG4gICAgICAgIHRoaXMuX2luaXRpYWxpc2VkID0gdHJ1ZTtcbiAgICB9XG5cbiAgICAvKiogRm9yY2UgdGhlIGxheW91dCB0byByZWNhbGN1bGF0ZSAqL1xuICAgIHVwZGF0ZUxheW91dCgpOiB2b2lkIHtcbiAgICAgICAgUHJvbWlzZS5yZXNvbHZlKCkudGhlbigoKSA9PiB0aGlzLmNvbHVtbnMuZm9yRWFjaCgoX2NvbHVtbiwgaW5kZXgpID0+IHRoaXMuX3RhYmxlLnJlc2l6ZUNvbHVtbihpbmRleCwgMCkpKTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBXZSBzaG91bGQgaGlkZSBhbnkgaG9yaXpvbnRhbCBvdmVyZmxvdyB3aGVuZXZlciB3ZSBhcmUgcmVzaXppbmcsIHRoaXMgaXMgYmVjYXVzZSB3aGVuIHdlIGFyZSBkcmFnZ2luZyBhIGNvbHVtblxuICAgICAqIHdlIG11c3Qgc2V0IHRoZSBjb2x1bW4gd2lkdGhzIGluIHBpeGVsIHZhbHVlcyBhcyBwZXJjZW50YWdlcyBjYXVzZSBzb21lIGphbmtpbmVzcyB3aGVuIG1vdmluZyB0aGVtLiBIb3dldmVyIHBpeGVsXG4gICAgICogdmFsdWVzIGFyZSBsZXNzIHByZWNpc2UgYW5kIGNhbiBpbiBzb21lIGNhc2VzIGNhdXNlIG92ZXJmbG93LCBzbyB3ZSBzaG91bGQgaGlkZSBvdmVyZmxvdyB3aGVuIHdlIGFyZSByZXNpemluZ1xuICAgICAqL1xuICAgIHByaXZhdGUgc2V0T3ZlcmZsb3coaXNSZXNpemluZzogYm9vbGVhbik6IHZvaWQge1xuICAgICAgICBBcnJheS5mcm9tKCh0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQgYXMgSFRNTFRhYmxlRWxlbWVudCkudEJvZGllcylcbiAgICAgICAgICAgIC5mb3JFYWNoKHRib2R5ID0+IHRoaXMuX3JlbmRlcmVyLnNldFN0eWxlKHRib2R5LCAnb3ZlcmZsb3cteCcsIGlzUmVzaXppbmcgPyAnaGlkZGVuJyA6IG51bGwpKTtcbiAgICB9XG59XG4iXX0=