UNPKG

@ng-matero/extensions

Version:
458 lines (435 loc) 20.2 kB
import * as i0 from '@angular/core'; import { InjectionToken, AfterViewInit, OnDestroy, ElementRef, NgZone, Provider, Injector, ViewContainerRef, ChangeDetectorRef, Type } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { CdkTable, CdkColumnDef } from '@angular/cdk/table'; import { Directionality } from '@angular/cdk/bidi'; import { OverlayRef, Overlay } from '@angular/cdk/overlay'; /** Indicates the width of a column. */ interface ColumnSize { /** The ID/name of the column, as defined in CdkColumnDef. */ readonly columnId: string; /** The width in pixels of the column. */ readonly size: number; /** The width in pixels of the column prior to this update, if known. */ readonly previousSize?: number; } /** Interface describing column size changes. */ interface ColumnSizeAction extends ColumnSize { /** * Whether the resize action should be applied instantaneously. False for events triggered during * a UI-triggered resize (such as with the mouse) until the mouse button is released. True * for all programmatically triggered resizes. */ readonly completeImmediately?: boolean; /** * Whether the resize action is being applied to a sticky/stickyEnd column. */ readonly isStickyColumn?: boolean; } /** * Originating source of column resize events within a table. * @docs-private */ declare class ColumnResizeNotifierSource { /** Emits when an in-progress resize is canceled. */ readonly resizeCanceled: Subject<ColumnSizeAction>; /** Emits when a resize is applied. */ readonly resizeCompleted: Subject<ColumnSize>; /** Triggers a resize action. */ readonly triggerResize: Subject<ColumnSizeAction>; static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResizeNotifierSource, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ColumnResizeNotifierSource>; } /** Service for triggering column resizes imperatively or being notified of them. */ declare class ColumnResizeNotifier { private readonly _source; /** Emits whenever a column is resized. */ readonly resizeCompleted: Observable<ColumnSize>; /** Instantly resizes the specified column. */ resize(columnId: string, size: number): void; static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResizeNotifier, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ColumnResizeNotifier>; } /** Coordinates events between the column resize directives. */ declare class HeaderRowEventDispatcher { private readonly _ngZone; /** * Emits the currently hovered header cell or null when no header cells are hovered. * Exposed publicly for events to feed in, but subscribers should use headerCellHoveredDistinct, * defined below. */ readonly headerCellHovered: Subject<Element | null>; /** * Emits the header cell for which a user-triggered resize is active or null * when no resize is in progress. */ readonly overlayHandleActiveForCell: Subject<Element | null>; /** Distinct and shared version of headerCellHovered. */ readonly headerCellHoveredDistinct: Observable<Element | null>; /** * Emits the header that is currently hovered or hosting an active resize event (with active * taking precedence). */ readonly headerRowHoveredOrActiveDistinct: Observable<Element | null>; private readonly _headerRowHoveredOrActiveDistinctReenterZone; private _lastSeenRow; private _lastSeenRowHover; /** * Emits whether the specified row should show its overlay controls. * Emission occurs within the NgZone. */ resizeOverlayVisibleForHeaderRow(row: Element): Observable<boolean>; private _enterZone; static ɵfac: i0.ɵɵFactoryDeclaration<HeaderRowEventDispatcher, never>; static ɵprov: i0.ɵɵInjectableDeclaration<HeaderRowEventDispatcher>; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ /** Configurable options for column resize. */ interface ColumnResizeOptions { liveResizeUpdates?: boolean; } declare const COLUMN_RESIZE_OPTIONS: InjectionToken<ColumnResizeOptions>; /** * Base class for ColumnResize directives which attach to mat-table elements to * provide common events and services for column resizing. */ declare abstract class ColumnResize implements AfterViewInit, OnDestroy { private _renderer; private _eventCleanups; protected readonly destroyed: Subject<void>; abstract readonly columnResizeNotifier: ColumnResizeNotifier; abstract readonly elementRef: ElementRef<HTMLElement>; protected abstract readonly eventDispatcher: HeaderRowEventDispatcher; protected abstract readonly ngZone: NgZone; protected abstract readonly notifier: ColumnResizeNotifierSource; /** Unique ID for this table instance. */ protected readonly selectorId: string; /** The id attribute of the table, if specified. */ id?: string; /** @docs-private Whether a call to updateStickyColumnStyles is pending after a resize. */ _flushPending: boolean; /** * Whether to update the column's width continuously as the mouse position * changes, or to wait until mouseup to apply the new size. */ liveResizeUpdates: boolean; ngAfterViewInit(): void; ngOnDestroy(): void; /** Gets the unique CSS class name for this table instance. */ getUniqueCssClass(): string; /** Gets the ID for this table used for column size persistance. */ getTableId(): string; /** Called when a column in the table is resized. Applies a css class to the table element. */ setResized(): void; private _listenForRowHoverEvents; private _listenForResizeActivity; private _listenForHoverActivity; static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResize, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnResize, never, never, { "liveResizeUpdates": { "alias": "liveResizeUpdates"; "required": false; }; }, {}, never, never, true, never>; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ /** * Explicitly enables column resizing for a table-based cdk-table. * Individual columns must be annotated specifically. */ declare class CdkColumnResize extends ColumnResize { readonly columnResizeNotifier: ColumnResizeNotifier; readonly elementRef: ElementRef<HTMLElement>; protected readonly eventDispatcher: HeaderRowEventDispatcher; protected readonly ngZone: NgZone; protected readonly notifier: ColumnResizeNotifierSource; protected readonly table: CdkTable<unknown>; static ɵfac: i0.ɵɵFactoryDeclaration<CdkColumnResize, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<CdkColumnResize, "table[cdk-table][columnResize]", never, {}, {}, never, never, true, never>; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ /** * Explicitly enables column resizing for a flexbox-based cdk-table. * Individual columns must be annotated specifically. */ declare class CdkColumnResizeFlex extends ColumnResize { readonly columnResizeNotifier: ColumnResizeNotifier; readonly elementRef: ElementRef<HTMLElement>; protected readonly eventDispatcher: HeaderRowEventDispatcher; protected readonly ngZone: NgZone; protected readonly notifier: ColumnResizeNotifierSource; protected readonly table: CdkTable<unknown>; static ɵfac: i0.ɵɵFactoryDeclaration<CdkColumnResizeFlex, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<CdkColumnResizeFlex, "cdk-table[columnResize]", never, {}, {}, never, never, true, never>; } /** * One of two NgModules for use with CdkColumnResize. * When using this module, columns are not resizable by default. */ declare class CdkColumnResizeModule { static ɵfac: i0.ɵɵFactoryDeclaration<CdkColumnResizeModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<CdkColumnResizeModule, never, [typeof CdkColumnResize, typeof CdkColumnResizeFlex], [typeof CdkColumnResize, typeof CdkColumnResizeFlex]>; static ɵinj: i0.ɵɵInjectorDeclaration<CdkColumnResizeModule>; } /** * Can be provided by the host application to enable persistence of column resize state. */ declare abstract class ColumnSizeStore { /** Returns the persisted size of the specified column in the specified table. */ abstract getSize(tableId: string, columnId: string): Observable<number | null> | null; /** Persists the size of the specified column in the specified table. */ abstract setSize(tableId: string, columnId: string, sizePx: number): void; static ɵfac: i0.ɵɵFactoryDeclaration<ColumnSizeStore, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ColumnSizeStore>; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ /** * @docs-private */ declare class _Schedule { tasks: (() => unknown)[]; endTasks: (() => unknown)[]; } /** Injection token used to provide a coalesced style scheduler. */ declare const _COALESCED_STYLE_SCHEDULER: InjectionToken<_CoalescedStyleScheduler>; /** * Allows grouping up CSSDom mutations after the current execution context. * This can significantly improve performance when separate consecutive functions are * reading from the CSSDom and then mutating it. * * @docs-private */ declare class _CoalescedStyleScheduler { private _currentSchedule; private _ngZone; /** * Schedules the specified task to run at the end of the current VM turn. */ schedule(task: () => unknown): void; /** * Schedules the specified task to run after other scheduled tasks at the end of the current * VM turn. */ scheduleEnd(task: () => unknown): void; private _createScheduleIfNeeded; static ɵfac: i0.ɵɵFactoryDeclaration<_CoalescedStyleScheduler, never>; static ɵprov: i0.ɵɵInjectableDeclaration<_CoalescedStyleScheduler>; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ /** Tracks state of resize events in progress. */ declare class ResizeRef { readonly origin: ElementRef; readonly overlayRef: OverlayRef; readonly minWidthPx: number; readonly maxWidthPx: number; readonly liveUpdates: boolean; constructor(origin: ElementRef, overlayRef: OverlayRef, minWidthPx: number, maxWidthPx: number, liveUpdates?: boolean); } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ /** * Base class for a component shown over the edge of a resizable column that is responsible * for handling column resize mouse events and displaying any visible UI on the column edge. */ declare abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy { private _renderer; protected readonly destroyed: Subject<void>; protected abstract readonly columnDef: CdkColumnDef; protected abstract readonly document: Document; protected abstract readonly directionality: Directionality; protected abstract readonly elementRef: ElementRef; protected abstract readonly eventDispatcher: HeaderRowEventDispatcher; protected abstract readonly ngZone: NgZone; protected abstract readonly resizeNotifier: ColumnResizeNotifierSource; protected abstract readonly resizeRef: ResizeRef; protected abstract readonly styleScheduler: _CoalescedStyleScheduler; private _cumulativeDeltaX; ngAfterViewInit(): void; ngOnDestroy(): void; private _listenForMouseEvents; private _dragStarted; protected updateResizeActive(active: boolean): void; private _triggerResize; private _computeNewSize; private _getOriginWidth; private _getOriginOffset; private _updateOverlayOffset; private _isLtr; private _notifyResizeEnded; private _observableFromEvent; static ɵfac: i0.ɵɵFactoryDeclaration<ResizeOverlayHandle, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<ResizeOverlayHandle, never, never, {}, {}, never, never, true, never>; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ /** * Provides an implementation for resizing a column. * The details of how resizing works for tables for flex mat-tables are quite different. */ declare abstract class ResizeStrategy { protected abstract readonly columnResize: ColumnResize; protected abstract readonly styleScheduler: _CoalescedStyleScheduler; protected abstract readonly table: CdkTable<unknown>; private _pendingResizeDelta; /** Updates the width of the specified column. */ abstract applyColumnSize(cssFriendlyColumnName: string, columnHeader: HTMLElement, sizeInPx: number, previousSizeInPx?: number): void; /** Applies a minimum width to the specified column, updating its current width as needed. */ abstract applyMinColumnSize(cssFriendlyColumnName: string, columnHeader: HTMLElement, minSizeInPx: number): void; /** Applies a maximum width to the specified column, updating its current width as needed. */ abstract applyMaxColumnSize(cssFriendlyColumnName: string, columnHeader: HTMLElement, minSizeInPx: number): void; /** Adjusts the width of the table element by the specified delta. */ protected updateTableWidthAndStickyColumns(delta: number): void; /** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */ protected getElementWidth(element: HTMLElement): number; static ɵfac: i0.ɵɵFactoryDeclaration<ResizeStrategy, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ResizeStrategy>; } /** * The optimally performing resize strategy for &lt;table&gt; elements with table-layout: fixed. * Tested against and outperformed: * CSS selector * CSS selector w/ CSS variable * Updating all cell nodes */ declare class TableLayoutFixedResizeStrategy extends ResizeStrategy { protected readonly columnResize: ColumnResize; protected readonly styleScheduler: _CoalescedStyleScheduler; protected readonly table: CdkTable<unknown>; applyColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number, previousSizeInPx?: number): void; applyMinColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void; applyMaxColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void; static ɵfac: i0.ɵɵFactoryDeclaration<TableLayoutFixedResizeStrategy, never>; static ɵprov: i0.ɵɵInjectableDeclaration<TableLayoutFixedResizeStrategy>; } /** * The optimally performing resize strategy for flex mat-tables. * Tested against and outperformed: * CSS selector w/ CSS variable * Updating all mat-cell nodes */ declare class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDestroy { protected readonly columnResize: ColumnResize; protected readonly styleScheduler: _CoalescedStyleScheduler; protected readonly table: CdkTable<unknown>; private readonly _nonce; private readonly _document; private readonly _columnIndexes; private readonly _columnProperties; private _styleElement?; private _indexSequence; protected readonly defaultMinSize = 0; protected readonly defaultMaxSize: number; applyColumnSize(cssFriendlyColumnName: string, columnHeader: HTMLElement, sizeInPx: number, previousSizeInPx?: number): void; applyMinColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void; applyMaxColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void; protected getColumnCssClass(cssFriendlyColumnName: string): string; ngOnDestroy(): void; private _getPropertyValue; private _getAppliedWidth; private _applyProperty; private _getStyleSheet; private _getColumnPropertiesMap; private _applySizeCss; static ɵfac: i0.ɵɵFactoryDeclaration<CdkFlexTableResizeStrategy, never>; static ɵprov: i0.ɵɵInjectableDeclaration<CdkFlexTableResizeStrategy>; } declare const TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER: Provider; declare const FLEX_RESIZE_STRATEGY_PROVIDER: Provider; /** * Base class for Resizable directives which are applied to column headers to make those columns * resizable. */ declare abstract class Resizable<HandleComponent extends ResizeOverlayHandle> implements AfterViewInit, OnDestroy { protected isResizable: boolean; protected minWidthPxInternal: number; protected maxWidthPxInternal: number; protected inlineHandle?: HTMLElement; protected overlayRef?: OverlayRef; protected readonly destroyed: Subject<void>; protected abstract readonly columnDef: CdkColumnDef; protected abstract readonly columnResize: ColumnResize; protected abstract readonly directionality: Directionality; protected abstract readonly document: Document; protected abstract readonly elementRef: ElementRef; protected abstract readonly eventDispatcher: HeaderRowEventDispatcher; protected abstract readonly injector: Injector; protected abstract readonly ngZone: NgZone; protected abstract readonly overlay: Overlay; protected abstract readonly resizeNotifier: ColumnResizeNotifierSource; protected abstract readonly resizeStrategy: ResizeStrategy; protected abstract readonly styleScheduler: _CoalescedStyleScheduler; protected abstract readonly viewContainerRef: ViewContainerRef; protected abstract readonly changeDetectorRef: ChangeDetectorRef; private _viewInitialized; private _isDestroyed; /** The minimum width to allow the column to be sized to. */ get minWidthPx(): number; set minWidthPx(value: number); /** The maximum width to allow the column to be sized to. */ get maxWidthPx(): number; set maxWidthPx(value: number); ngAfterViewInit(): void; ngOnDestroy(): void; protected abstract getInlineHandleCssClassName(): string; protected abstract getOverlayHandleComponentType(): Type<HandleComponent>; private _createOverlayForHandle; private _listenForRowHoverEvents; private _listenForResizeEvents; private _completeResizeOperation; private _cleanUpAfterResize; private _createHandlePortal; private _showHandleOverlay; private _updateOverlayHandleHeight; private _applySize; private _applyMinWidthPx; private _applyMaxWidthPx; private _appendInlineHandle; static ɵfac: i0.ɵɵFactoryDeclaration<Resizable<any>, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<Resizable<any>, never, never, {}, {}, never, never, true, never>; } /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ declare const TABLE_PROVIDERS: Provider[]; declare const FLEX_PROVIDERS: Provider[]; export { COLUMN_RESIZE_OPTIONS, CdkColumnResize, CdkColumnResizeFlex, CdkColumnResizeModule, CdkFlexTableResizeStrategy, ColumnResize, ColumnResizeNotifier, ColumnResizeNotifierSource, ColumnSizeStore, FLEX_PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER, HeaderRowEventDispatcher, Resizable, ResizeOverlayHandle, ResizeRef, ResizeStrategy, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, TABLE_PROVIDERS, TableLayoutFixedResizeStrategy, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, _Schedule }; export type { ColumnResizeOptions, ColumnSize, ColumnSizeAction };