material-dynamic-table/fesm2022/material-dynamic-table.mjs.map

Dynamic table component for angular built on top of angular material table. It offers sorting, pagination, filtering per column and the ability to specify content types and components used for displaying them.

{"version":3,"file":"material-dynamic-table.mjs","sources":["../../../projects/material-dynamic-table/src/lib/multi-sort/multi-sort.directive.ts","../../../projects/material-dynamic-table/src/lib/column-filter.model.ts","../../../projects/material-dynamic-table/src/lib/table-cell/cell-types/column-filter.service.ts","../../../projects/material-dynamic-table/src/lib/column-resize/closest.ts","../../../projects/material-dynamic-table/src/lib/column-resize/selectors.ts","../../../projects/material-dynamic-table/src/lib/column-resize/column-resize.ts","../../../projects/material-dynamic-table/src/lib/column-resize/column-resize-notifier.ts","../../../projects/material-dynamic-table/src/lib/column-resize/event-dispatcher.ts","../../../projects/material-dynamic-table/src/lib/column-resize/resize-strategy.ts","../../../projects/material-dynamic-table/src/lib/column-resize/column-resize-directives/common.ts","../../../projects/material-dynamic-table/src/lib/column-resize/column-resize-directives/column-resize.ts","../../../projects/material-dynamic-table/src/lib/column-resize/resize-ref.ts","../../../projects/material-dynamic-table/src/lib/column-resize/resizable.ts","../../../projects/material-dynamic-table/src/lib/column-resize/cdk-overlay-handle.ts","../../../projects/material-dynamic-table/src/lib/column-resize/overlay-handle.ts","../../../projects/material-dynamic-table/src/lib/column-resize/resizable-directives/resizable.ts","../../../projects/material-dynamic-table/src/lib/table-cell/cell.directive.ts","../../../projects/material-dynamic-table/src/lib/column-config.model.ts","../../../projects/material-dynamic-table/src/lib/table-cell/cell-types/text-cell.component.ts","../../../projects/material-dynamic-table/src/lib/table-cell/cell-types/cell.service.ts","../../../projects/material-dynamic-table/src/lib/table-cell/table-cell.component.ts","../../../projects/material-dynamic-table/src/lib/multi-sort/multi-sort-header.ts","../../../projects/material-dynamic-table/src/lib/multi-sort/multi-sort-header.html","../../../projects/material-dynamic-table/src/lib/dynamic-table.component.ts","../../../projects/material-dynamic-table/src/lib/dynamic-table.component.html","../../../projects/material-dynamic-table/src/lib/multi-sort/multi-sort-data-source.ts","../../../projects/material-dynamic-table/src/lib/column-resize/column-resize-module.ts","../../../projects/material-dynamic-table/src/lib/table-cell/cell-types/date-cell.component.ts","../../../projects/material-dynamic-table/src/lib/dynamic-table.module.ts","../../../projects/material-dynamic-table/src/public_api.ts","../../../projects/material-dynamic-table/src/material-dynamic-table.ts"],"sourcesContent":["import {\r\n  Directive,\r\n  EventEmitter,\r\n  Input,\r\n  OnChanges,\r\n  OnDestroy,\r\n  OnInit,\r\n  Output,\r\n} from '@angular/core';\r\nimport { MatSort, MatSortable, SortDirection } from '@angular/material/sort';\r\nimport { MdtMultiSortHeader } from './multi-sort-header';\r\n\r\n/** The current sort state. */\r\nexport interface MultiSort {\r\n  sortedBy: { id: string, direction: 'asc' | 'desc' }[];\r\n}\r\n\r\n/** Container for MatSortables to manage the sort state and provide default sort parameters. */\r\n@Directive({\r\n  selector: '[mdtMultiSort]',\r\n  exportAs: 'mdtMultiSort',\r\n  inputs: ['disabled: matSortDisabled']\r\n})\r\nexport class MdtMultiSort extends MatSort implements OnChanges, OnDestroy, OnInit {\r\n\r\n  /**\r\n   * The array of active sort ids. Order defines sorting precedence.\r\n   */\r\n  @Input('mdtSortActive')\r\n  get sortedBy() {\r\n    return this._sortedBy;\r\n  }\r\n  set sortedBy(sortedBy: { id: string, direction: 'asc' | 'desc' }[]) {\r\n    this._sortedBy = sortedBy;\r\n    let sort = sortedBy ? sortedBy[0] : undefined;\r\n    let sortedValue = sort ? { active: sort.id, direction: sort.direction } : undefined;\r\n    this.sortChange.emit(sortedValue);\r\n    this.multiSortChange.emit({ sortedBy: this._sortedBy });\r\n  }\r\n\r\n  private _sortedBy: { id: string, direction: 'asc' | 'desc' }[]\r\n\r\n  start: 'asc' | 'desc' = 'asc';\r\n\r\n  @Input('mode') mode: 'single' | 'multi' = 'single';\r\n\r\n  isSortDirectionValid(direction: { [id: string]: SortDirection }): boolean {\r\n    return Object.keys(direction).every((id) => this.isIndividualSortDirectionValid(direction[id]));\r\n  }\r\n\r\n  isIndividualSortDirectionValid(direction: string): boolean {\r\n    return !direction || direction === 'asc' || direction === 'desc';\r\n  }\r\n\r\n  /** Event emitted when the user changes either the active sort or sort direction. */\r\n  @Output('matSortChange')\r\n  readonly multiSortChange: EventEmitter<MultiSort> = new EventEmitter<MultiSort>();\r\n\r\n  /** Sets the active sort id and determines the new sort direction. */\r\n  sort(sortable: MatSortable): void {\r\n    if (!Array.isArray(this.sortedBy)) {\r\n      let direction = sortable.start ? sortable.start : this.start;\r\n      this._sortedBy = [{\r\n        id: sortable.id,\r\n        direction: direction\r\n      }];  \r\n    } else {\r\n      const sort = this._sortedBy.find(s => s.id === sortable.id);\r\n      if (sort) {\r\n        this.direction = sort.direction;\r\n        let nextDirection = this.getNextSortDirection(sortable);        \r\n        if (nextDirection) {\r\n          sort.direction = nextDirection;\r\n        } else {\r\n          let index = this._sortedBy.indexOf(sort);\r\n          this._sortedBy.splice(index, 1);\r\n        }\r\n      } else {\r\n        let newSort = {\r\n          id: sortable.id,\r\n          direction: sortable.start ? sortable.start : this.start\r\n        }\r\n        if (this.mode === 'multi') {\r\n          this._sortedBy.push(newSort);\r\n        } else {\r\n          this._sortedBy = [newSort]\r\n        }\r\n      }\r\n    }\r\n\r\n    this.multiSortChange.emit({ sortedBy: this._sortedBy });   \r\n    super.sort(sortable);\r\n  }\r\n\r\n  ngOnInit() {\r\n    super.ngOnInit();\r\n  }\r\n}\r\n","import { ColumnConfig } from './column-config.model';\r\n\r\nexport class ColumnFilter {\r\n    column: ColumnConfig;\r\n    filter: any;\r\n}","import { Type, Injectable } from '@angular/core';\r\n\r\n@Injectable()\nexport class ColumnFilterService {\r\n\r\n    private registeredFilters: { [key: string]: Type<any>; } = {};\r\n    \r\n    registerFilter(type: string, component: Type<any>) {\r\n        this.registeredFilters[type] = component;\r\n    }\r\n\r\n    getFilter(type: string): Type<any> {\r\n        const component = this.registeredFilters[type];\r\n        \r\n        return component;\r\n    }\r\n}","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\n/** closest implementation that is able to start from non-Element Nodes. */\r\nexport function closest(\r\n  element: EventTarget | Element | null | undefined,\r\n  selector: string,\r\n): Element | null {\r\n  if (!(element instanceof Node)) {\r\n    return null;\r\n  }\r\n\r\n  let curr: Node | null = element;\r\n  while (curr != null && !(curr instanceof Element)) {\r\n    curr = curr.parentNode;\r\n  }\r\n\r\n  return curr?.closest(selector) ?? null;\r\n}\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\n// TODO: Figure out how to remove `mat-` classes from the CDK part of the\r\n// column resize implementation.\r\n\r\nexport const HEADER_CELL_SELECTOR = '.cdk-header-cell, .mat-header-cell';\r\n\r\nexport const HEADER_ROW_SELECTOR = '.cdk-header-row, .mat-header-row';\r\n\r\nexport const RESIZE_OVERLAY_SELECTOR = '.mat-column-resize-overlay-thumb';\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy } from '@angular/core';\r\nimport { fromEvent, merge, Subject } from 'rxjs';\r\nimport { filter, map, mapTo, pairwise, startWith, take, takeUntil } from 'rxjs/operators';\r\n\r\nimport { closest } from './closest';\r\n\r\nimport { ColumnResizeNotifier, ColumnResizeNotifierSource } from './column-resize-notifier';\r\nimport { HEADER_CELL_SELECTOR, RESIZE_OVERLAY_SELECTOR } from './selectors';\r\nimport { HeaderRowEventDispatcher } from './event-dispatcher';\r\n\r\nconst HOVER_OR_ACTIVE_CLASS = 'cdk-column-resize-hover-or-active';\r\nconst WITH_RESIZED_COLUMN_CLASS = 'cdk-column-resize-with-resized-column';\r\n\r\nlet nextId = 0;\r\n\r\n/**\r\n * Base class for ColumnResize directives which attach to mat-table elements to\r\n * provide common events and services for column resizing.\r\n */\r\n@Directive()\r\nexport abstract class ColumnResize implements AfterViewInit, OnDestroy {\r\n  protected readonly destroyed = new Subject<void>();\r\n\r\n  /* Publicly accessible interface for triggering and being notified of resizes. */\r\n  abstract readonly columnResizeNotifier: ColumnResizeNotifier;\r\n\r\n  /* ElementRef that this directive is attached to. Exposed For use by column-level directives */\r\n  abstract readonly elementRef: ElementRef<HTMLElement>;\r\n\r\n  protected abstract readonly eventDispatcher: HeaderRowEventDispatcher;\r\n  protected abstract readonly ngZone: NgZone;\r\n  protected abstract readonly notifier: ColumnResizeNotifierSource;\r\n\r\n  /** Unique ID for this table instance. */\r\n  protected readonly selectorId = `${++nextId}`;\r\n\r\n  /** The id attribute of the table, if specified. */\r\n  id?: string;\r\n\r\n  ngAfterViewInit() {\r\n    this.elementRef.nativeElement!.classList.add(this.getUniqueCssClass());\r\n\r\n    this._listenForRowHoverEvents();\r\n    this._listenForResizeActivity();\r\n    this._listenForHoverActivity();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.destroyed.next();\r\n    this.destroyed.complete();\r\n  }\r\n\r\n  /** Gets the unique CSS class name for this table instance. */\r\n  getUniqueCssClass() {\r\n    return `cdk-column-resize-${this.selectorId}`;\r\n  }\r\n\r\n  /** Called when a column in the table is resized. Applies a css class to the table element. */\r\n  setResized() {\r\n    this.elementRef.nativeElement!.classList.add(WITH_RESIZED_COLUMN_CLASS);\r\n  }\r\n\r\n  getTableHeight() {\r\n    return this.elementRef.nativeElement!.offsetHeight;\r\n  }\r\n\r\n  private _listenForRowHoverEvents() {\r\n    this.ngZone.runOutsideAngular(() => {\r\n      const element = this.elementRef.nativeElement!;\r\n\r\n      fromEvent<MouseEvent>(element, 'mouseover')\r\n        .pipe(\r\n          map(event => closest(event.target, HEADER_CELL_SELECTOR)),\r\n          takeUntil(this.destroyed),\r\n        )\r\n        .subscribe(this.eventDispatcher.headerCellHovered);\r\n      fromEvent<MouseEvent>(element, 'mouseleave')\r\n        .pipe(\r\n          filter(\r\n            event =>\r\n              !!event.relatedTarget &&\r\n              !(event.relatedTarget as Element).matches(RESIZE_OVERLAY_SELECTOR),\r\n          ),\r\n          mapTo(null),\r\n          takeUntil(this.destroyed),\r\n        )\r\n        .subscribe(this.eventDispatcher.headerCellHovered);\r\n    });\r\n  }\r\n\r\n  private _listenForResizeActivity() {\r\n    merge(\r\n      this.eventDispatcher.overlayHandleActiveForCell.pipe(mapTo(undefined)),\r\n      this.notifier.triggerResize.pipe(mapTo(undefined)),\r\n      this.notifier.resizeCompleted.pipe(mapTo(undefined)),\r\n    )\r\n      .pipe(take(1), takeUntil(this.destroyed))\r\n      .subscribe(() => {\r\n        this.setResized();\r\n      });\r\n  }\r\n\r\n  private _listenForHoverActivity() {\r\n    this.eventDispatcher.headerRowHoveredOrActiveDistinct\r\n      .pipe(startWith(null), pairwise(), takeUntil(this.destroyed))\r\n      .subscribe(([previousRow, hoveredRow]) => {\r\n        if (hoveredRow) {\r\n          hoveredRow.classList.add(HOVER_OR_ACTIVE_CLASS);\r\n        }\r\n        if (previousRow) {\r\n          previousRow.classList.remove(HOVER_OR_ACTIVE_CLASS);\r\n        }\r\n      });\r\n  }\r\n}\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport { Injectable } from '@angular/core';\r\nimport { Observable, Subject } from 'rxjs';\r\n\r\n/** Indicates the width of a column. */\r\nexport interface ColumnSize {\r\n  /** The ID/name of the column, as defined in CdkColumnDef. */\r\n  readonly columnId: string;\r\n\r\n  /** The width in pixels of the column. */\r\n  readonly size: number;\r\n\r\n  /** The width in pixels of the column prior to this update, if known. */\r\n  readonly previousSize?: number;\r\n}\r\n\r\n/** Interface describing column size changes. */\r\nexport interface ColumnSizeAction extends ColumnSize {\r\n  /**\r\n   * Whether the resize action should be applied instantaneously. False for events triggered during\r\n   * a UI-triggered resize (such as with the mouse) until the mouse button is released. True\r\n   * for all programmatically triggered resizes.\r\n   */\r\n  readonly completeImmediately?: boolean;\r\n\r\n  /**\r\n   * Whether the resize action is being applied to a sticky/stickyEnd column.\r\n   */\r\n  readonly isStickyColumn?: boolean;\r\n}\r\n\r\n/**\r\n * Originating source of column resize events within a table.\r\n * @docs-private\r\n */\r\n@Injectable()\r\nexport class ColumnResizeNotifierSource {\r\n  /** Emits when an in-progress resize is canceled. */\r\n  readonly resizeCanceled = new Subject<ColumnSizeAction>();\r\n\r\n  /** Emits when a resize is applied. */\r\n  readonly resizeCompleted = new Subject<ColumnSize>();\r\n\r\n  /** Triggers a resize action. */\r\n  readonly triggerResize = new Subject<ColumnSizeAction>();\r\n}\r\n\r\n/** Service for triggering column resizes imperatively or being notified of them. */\r\n@Injectable()\r\nexport class ColumnResizeNotifier {\r\n  /** Emits whenever a column is resized. */\r\n  readonly resizeCompleted: Observable<ColumnSize> = this._source.resizeCompleted;\r\n\r\n  constructor(private readonly _source: ColumnResizeNotifierSource) { }\r\n\r\n  /** Instantly resizes the specified column. */\r\n  resize(columnId: string, size: number): void {\r\n    this._source.triggerResize.next({\r\n      columnId,\r\n      size,\r\n      completeImmediately: true,\r\n      isStickyColumn: true,\r\n    });\r\n  }\r\n}\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport { Injectable, NgZone } from '@angular/core';\r\nimport { combineLatest, MonoTypeOperatorFunction, Observable, Subject } from 'rxjs';\r\nimport { distinctUntilChanged, map, share, skip, startWith } from 'rxjs/operators';\r\n\r\nimport { closest } from './closest';\r\n\r\nimport { HEADER_ROW_SELECTOR } from './selectors';\r\n\r\n/** Coordinates events between the column resize directives. */\r\n@Injectable()\r\nexport class HeaderRowEventDispatcher {\r\n  /**\r\n   * Emits the currently hovered header cell or null when no header cells are hovered.\r\n   * Exposed publicly for events to feed in, but subscribers should use headerCellHoveredDistinct,\r\n   * defined below.\r\n   */\r\n  readonly headerCellHovered = new Subject<Element | null>();\r\n\r\n  /**\r\n   * Emits the header cell for which a user-triggered resize is active or null\r\n   * when no resize is in progress.\r\n   */\r\n  readonly overlayHandleActiveForCell = new Subject<Element | null>();\r\n\r\n  constructor(private readonly _ngZone: NgZone) { }\r\n\r\n  /** Distinct and shared version of headerCellHovered. */\r\n  readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(distinctUntilChanged(), share());\r\n\r\n  /**\r\n   * Emits the header that is currently hovered or hosting an active resize event (with active\r\n   * taking precedence).\r\n   */\r\n  readonly headerRowHoveredOrActiveDistinct = combineLatest([\r\n    this.headerCellHoveredDistinct.pipe(\r\n      map(cell => closest(cell, HEADER_ROW_SELECTOR)),\r\n      startWith(null),\r\n      distinctUntilChanged(),\r\n    ),\r\n    this.overlayHandleActiveForCell.pipe(\r\n      map(cell => closest(cell, HEADER_ROW_SELECTOR)),\r\n      startWith(null),\r\n      distinctUntilChanged(),\r\n    ),\r\n  ]).pipe(\r\n    skip(1), // Ignore initial [null, null] emission.\r\n    map(([hovered, active]) => active || hovered),\r\n    distinctUntilChanged(),\r\n    share(),\r\n  );\r\n\r\n  private readonly _headerRowHoveredOrActiveDistinctReenterZone =\r\n    this.headerRowHoveredOrActiveDistinct.pipe(this._enterZone(), share());\r\n\r\n  // Optimization: Share row events observable with subsequent callers.\r\n  // At startup, calls will be sequential by row (and typically there's only one).\r\n  private _lastSeenRow: Element | null = null;\r\n  private _lastSeenRowHover: Observable<boolean> | null = null;\r\n\r\n  /**\r\n   * Emits whether the specified row should show its overlay controls.\r\n   * Emission occurs within the NgZone.\r\n   */\r\n  resizeOverlayVisibleForHeaderRow(row: Element): Observable<boolean> {\r\n    if (row !== this._lastSeenRow) {\r\n      this._lastSeenRow = row;\r\n      this._lastSeenRowHover = this._headerRowHoveredOrActiveDistinctReenterZone.pipe(\r\n        map(hoveredRow => hoveredRow === row),\r\n        distinctUntilChanged(),\r\n        share(),\r\n      );\r\n    }\r\n\r\n    return this._lastSeenRowHover!;\r\n  }\r\n\r\n  private _enterZone<T>(): MonoTypeOperatorFunction<T> {\r\n    return (source: Observable<T>) =>\r\n      new Observable<T>(observer =>\r\n        source.subscribe({\r\n          next: value => this._ngZone.run(() => observer.next(value)),\r\n          error: err => observer.error(err),\r\n          complete: () => observer.complete(),\r\n        }),\r\n      );\r\n  }\r\n}\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport { Inject, Injectable, OnDestroy, Provider, CSP_NONCE, Optional } from '@angular/core';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { coerceCssPixelValue } from '@angular/cdk/coercion';\r\nimport { CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER } from '@angular/cdk/table';\r\n\r\nimport { ColumnResize } from './column-resize';\r\n\r\n/**\r\n * Provides an implementation for resizing a column.\r\n * The details of how resizing works for tables for flex mat-tables are quite different.\r\n */\r\n@Injectable()\r\nexport abstract class ResizeStrategy {\r\n  protected abstract readonly columnResize: ColumnResize;\r\n  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;\r\n  protected abstract readonly table: CdkTable<unknown>;\r\n\r\n  private _pendingResizeDelta: number | null = null;\r\n\r\n  /** Updates the width of the specified column. */\r\n  abstract applyColumnSize(\r\n    cssFriendlyColumnName: string,\r\n    columnHeader: HTMLElement,\r\n    sizeInPx: number,\r\n    previousSizeInPx?: number,\r\n  ): void;\r\n\r\n  /** Applies a minimum width to the specified column, updating its current width as needed. */\r\n  abstract applyMinColumnSize(\r\n    cssFriendlyColumnName: string,\r\n    columnHeader: HTMLElement,\r\n    minSizeInPx: number,\r\n  ): void;\r\n\r\n  /** Applies a maximum width to the specified column, updating its current width as needed. */\r\n  abstract applyMaxColumnSize(\r\n    cssFriendlyColumnName: string,\r\n    columnHeader: HTMLElement,\r\n    minSizeInPx: number,\r\n  ): void;\r\n\r\n  /** Adjusts the width of the table element by the specified delta. */\r\n  protected updateTableWidthAndStickyColumns(delta: number): void {\r\n    if (this._pendingResizeDelta === null) {\r\n      const tableElement = this.columnResize.elementRef.nativeElement;\r\n      const tableWidth = getElementWidth(tableElement);\r\n\r\n      this.styleScheduler.schedule(() => {\r\n        tableElement.style.width = coerceCssPixelValue(tableWidth + this._pendingResizeDelta!);\r\n\r\n        this._pendingResizeDelta = null;\r\n      });\r\n\r\n      this.styleScheduler.scheduleEnd(() => {\r\n        this.table.updateStickyColumnStyles();\r\n      });\r\n    }\r\n\r\n    this._pendingResizeDelta = (this._pendingResizeDelta ?? 0) + delta;\r\n  }\r\n}\r\n\r\n/**\r\n * The optimally performing resize strategy for &lt;table&gt; elements with table-layout: fixed.\r\n * Tested against and outperformed:\r\n *   CSS selector\r\n *   CSS selector w/ CSS variable\r\n *   Updating all cell nodes\r\n */\r\n@Injectable()\r\nexport class TableLayoutFixedResizeStrategy extends ResizeStrategy {\r\n  constructor(\r\n    protected readonly columnResize: ColumnResize,\r\n    @Inject(_COALESCED_STYLE_SCHEDULER)\r\n    protected readonly styleScheduler: _CoalescedStyleScheduler,\r\n    protected readonly table: CdkTable<unknown>,\r\n  ) {\r\n    super();\r\n  }\r\n\r\n  applyColumnSize(\r\n    _: string,\r\n    columnHeader: HTMLElement,\r\n    sizeInPx: number,\r\n    previousSizeInPx?: number,\r\n  ): void {\r\n    const delta = sizeInPx - (previousSizeInPx ?? getElementWidth(columnHeader));\r\n\r\n    if (delta === 0) {\r\n      return;\r\n    }\r\n\r\n    this.styleScheduler.schedule(() => {\r\n      columnHeader.style.width = coerceCssPixelValue(sizeInPx);\r\n    });\r\n\r\n    this.updateTableWidthAndStickyColumns(delta);\r\n  }\r\n\r\n  applyMinColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void {\r\n    const currentWidth = getElementWidth(columnHeader);\r\n    const newWidth = Math.max(currentWidth, sizeInPx);\r\n\r\n    this.applyColumnSize(_, columnHeader, newWidth, currentWidth);\r\n  }\r\n\r\n  applyMaxColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void {\r\n    const currentWidth = getElementWidth(columnHeader);\r\n    const newWidth = Math.min(currentWidth, sizeInPx);\r\n\r\n    this.applyColumnSize(_, columnHeader, newWidth, currentWidth);\r\n  }\r\n}\r\n\r\n/**\r\n * The optimally performing resize strategy for flex mat-tables.\r\n * Tested against and outperformed:\r\n *   CSS selector w/ CSS variable\r\n *   Updating all mat-cell nodes\r\n */\r\n@Injectable()\r\nexport class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDestroy {\r\n  private readonly _document: Document;\r\n  private readonly _columnIndexes = new Map<string, number>();\r\n  private readonly _columnProperties = new Map<string, Map<string, string>>();\r\n\r\n  private _styleElement?: HTMLStyleElement;\r\n  private _indexSequence = 0;\r\n\r\n  protected readonly defaultMinSize = 0;\r\n  protected readonly defaultMaxSize = Number.MAX_SAFE_INTEGER;\r\n\r\n  constructor(\r\n    protected readonly columnResize: ColumnResize,\r\n    @Inject(_COALESCED_STYLE_SCHEDULER)\r\n    protected readonly styleScheduler: _CoalescedStyleScheduler,\r\n    protected readonly table: CdkTable<unknown>,\r\n    @Inject(DOCUMENT) document: any,\r\n    @Inject(CSP_NONCE) @Optional() private readonly _nonce?: string | null,\r\n  ) {\r\n    super();\r\n    this._document = document;\r\n  }\r\n\r\n  applyColumnSize(\r\n    cssFriendlyColumnName: string,\r\n    columnHeader: HTMLElement,\r\n    sizeInPx: number,\r\n    previousSizeInPx?: number,\r\n  ): void {\r\n    // Optimization: Check applied width first as we probably set it already before reading\r\n    // offsetWidth which triggers layout.\r\n    const delta =\r\n      sizeInPx -\r\n      (previousSizeInPx ??\r\n        (this._getAppliedWidth(cssFriendlyColumnName) || columnHeader.offsetWidth));\r\n\r\n    if (delta === 0) {\r\n      return;\r\n    }\r\n\r\n    const cssSize = coerceCssPixelValue(sizeInPx);\r\n\r\n    this._applyProperty(cssFriendlyColumnName, 'flex', `0 0.01 ${cssSize}`);\r\n    this.updateTableWidthAndStickyColumns(delta);\r\n  }\r\n\r\n  applyMinColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void {\r\n    const cssSize = coerceCssPixelValue(sizeInPx);\r\n\r\n    this._applyProperty(\r\n      cssFriendlyColumnName,\r\n      'min-width',\r\n      cssSize,\r\n      sizeInPx !== this.defaultMinSize,\r\n    );\r\n    this.updateTableWidthAndStickyColumns(0);\r\n  }\r\n\r\n  applyMaxColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void {\r\n    const cssSize = coerceCssPixelValue(sizeInPx);\r\n\r\n    this._applyProperty(\r\n      cssFriendlyColumnName,\r\n      'max-width',\r\n      cssSize,\r\n      sizeInPx !== this.defaultMaxSize,\r\n    );\r\n    this.updateTableWidthAndStickyColumns(0);\r\n  }\r\n\r\n  protected getColumnCssClass(cssFriendlyColumnName: string): string {\r\n    return `cdk-column-${cssFriendlyColumnName}`;\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this._styleElement?.remove();\r\n    this._styleElement = undefined;\r\n  }\r\n\r\n  private _getPropertyValue(cssFriendlyColumnName: string, key: string): string | undefined {\r\n    const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);\r\n    return properties.get(key);\r\n  }\r\n\r\n  private _getAppliedWidth(cssFriendslyColumnName: string): number {\r\n    return coercePixelsFromFlexValue(this._getPropertyValue(cssFriendslyColumnName, 'flex'));\r\n  }\r\n\r\n  private _applyProperty(\r\n    cssFriendlyColumnName: string,\r\n    key: string,\r\n    value: string,\r\n    enable = true,\r\n  ): void {\r\n    const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);\r\n\r\n    this.styleScheduler.schedule(() => {\r\n      if (enable) {\r\n        properties.set(key, value);\r\n      } else {\r\n        properties.delete(key);\r\n      }\r\n      this._applySizeCss(cssFriendlyColumnName);\r\n    });\r\n  }\r\n\r\n  private _getStyleSheet(): CSSStyleSheet {\r\n    if (!this._styleElement) {\r\n      this._styleElement = this._document.createElement('style');\r\n\r\n      if (this._nonce) {\r\n        this._styleElement.setAttribute('nonce', this._nonce);\r\n      }\r\n\r\n      this._styleElement.appendChild(this._document.createTextNode(''));\r\n      this._document.head.appendChild(this._styleElement);\r\n    }\r\n\r\n    return this._styleElement.sheet as CSSStyleSheet;\r\n  }\r\n\r\n  private _getColumnPropertiesMap(cssFriendlyColumnName: string): Map<string, string> {\r\n    let properties = this._columnProperties.get(cssFriendlyColumnName);\r\n    if (properties === undefined) {\r\n      properties = new Map<string, string>();\r\n      this._columnProperties.set(cssFriendlyColumnName, properties);\r\n    }\r\n    return properties;\r\n  }\r\n\r\n  private _applySizeCss(cssFriendlyColumnName: string) {\r\n    const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);\r\n    const propertyKeys = Array.from(properties.keys());\r\n\r\n    let index = this._columnIndexes.get(cssFriendlyColumnName);\r\n    if (index === undefined) {\r\n      if (!propertyKeys.length) {\r\n        // Nothing to set or unset.\r\n        return;\r\n      }\r\n\r\n      index = this._indexSequence++;\r\n      this._columnIndexes.set(cssFriendlyColumnName, index);\r\n    } else {\r\n      this._getStyleSheet().deleteRule(index);\r\n    }\r\n\r\n    const columnClassName = this.getColumnCssClass(cssFriendlyColumnName);\r\n    const tableClassName = this.columnResize.getUniqueCssClass();\r\n\r\n    const selector = `.${tableClassName} .${columnClassName}`;\r\n    const body = propertyKeys.map(key => `${key}:${properties.get(key)}`).join(';');\r\n\r\n    this._getStyleSheet().insertRule(`${selector} {${body}}`, index!);\r\n  }\r\n}\r\n\r\n/** Converts CSS pixel values to numbers, eg \"123px\" to 123. Returns NaN for non pixel values. */\r\nfunction coercePixelsFromCssValue(cssValue: string): number {\r\n  return Number(cssValue.match(/(\\d+)px/)?.[1]);\r\n}\r\n\r\n/** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */\r\nfunction getElementWidth(element: HTMLElement) {\r\n  // Optimization: Check style.width first as we probably set it already before reading\r\n  // offsetWidth which triggers layout.\r\n  return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;\r\n}\r\n\r\n/**\r\n * Converts CSS flex values as set in CdkFlexTableResizeStrategy to numbers,\r\n * eg \"0 0.01 123px\" to 123.\r\n */\r\nfunction coercePixelsFromFlexValue(flexValue: string | undefined): number {\r\n  return Number(flexValue?.match(/0 0\\.01 (\\d+)px/)?.[1]);\r\n}\r\n\r\nexport const TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER: Provider = {\r\n  provide: ResizeStrategy,\r\n  useClass: TableLayoutFixedResizeStrategy,\r\n};\r\nexport const FLEX_RESIZE_STRATEGY_PROVIDER: Provider = {\r\n  provide: ResizeStrategy,\r\n  useClass: CdkFlexTableResizeStrategy,\r\n};\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport { Provider } from '@angular/core';\r\n\r\nimport { ColumnResize } from '../column-resize';\r\nimport { ColumnResizeNotifier, ColumnResizeNotifierSource } from '../column-resize-notifier';\r\nimport { HeaderRowEventDispatcher } from '../event-dispatcher';\r\n\r\nimport { TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER } from '../resize-strategy';\r\n\r\nexport const TABLE_PROVIDERS: Provider[] = [\r\n  ColumnResizeNotifier,\r\n  HeaderRowEventDispatcher,\r\n  ColumnResizeNotifierSource,\r\n  TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,\r\n];\r\n\r\nexport const TABLE_HOST_BINDINGS = {\r\n  'class': 'mat-column-resize-table',\r\n};\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport { Directive, ElementRef, NgZone } from '@angular/core';\r\nimport { ColumnResize } from '../column-resize';\r\nimport { ColumnResizeNotifier, ColumnResizeNotifierSource } from '../column-resize-notifier';\r\nimport { HeaderRowEventDispatcher } from '../event-dispatcher';\r\n\r\nimport { TABLE_HOST_BINDINGS, TABLE_PROVIDERS } from './common';\r\n\r\n/**\r\n * Explicitly enables column resizing for a table-based mat-table.\r\n * Individual columns must be annotated specifically.\r\n */\r\n@Directive({\r\n  selector: 'table[mat-table][columnResize]',\r\n  host: TABLE_HOST_BINDINGS,\r\n  providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: MatColumnResize }],\r\n  standalone: true\r\n})\r\nexport class MatColumnResize extends ColumnResize {\r\n  constructor(\r\n    readonly columnResizeNotifier: ColumnResizeNotifier,\r\n    readonly elementRef: ElementRef<HTMLElement>,\r\n    protected readonly eventDispatcher: HeaderRowEventDispatcher,\r\n    protected readonly ngZone: NgZone,\r\n    protected readonly notifier: ColumnResizeNotifierSource,\r\n  ) {\r\n    super();\r\n  }\r\n}\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport { ElementRef } from '@angular/core';\r\nimport { OverlayRef } from '@angular/cdk/overlay';\r\n\r\n/** Tracks state of resize events in progress. */\r\nexport class ResizeRef {\r\n  constructor(\r\n    readonly origin: ElementRef,\r\n    readonly overlayRef: OverlayRef,\r\n    readonly minWidthPx: number,\r\n    readonly maxWidthPx: number,\r\n  ) { }\r\n}\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport {\r\n  AfterViewInit,\r\n  Directive,\r\n  ElementRef,\r\n  Injector,\r\n  NgZone,\r\n  OnDestroy,\r\n  Type,\r\n  ViewContainerRef,\r\n  ChangeDetectorRef,\r\n} from '@angular/core';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { ComponentPortal } from '@angular/cdk/portal';\r\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\r\nimport { CdkColumnDef, _CoalescedStyleScheduler } from '@angular/cdk/table';\r\nimport { merge, Subject } from 'rxjs';\r\nimport { filter, takeUntil } from 'rxjs/operators';\r\n\r\nimport { closest } from './closest';\r\n\r\nimport { HEADER_ROW_SELECTOR } from './selectors';\r\nimport { ResizeOverlayHandle } from './cdk-overlay-handle';\r\nimport { ColumnResize } from './column-resize';\r\nimport { ColumnSizeAction, ColumnResizeNotifierSource } from './column-resize-notifier';\r\nimport { HeaderRowEventDispatcher } from './event-dispatcher';\r\nimport { ResizeRef } from './resize-ref';\r\nimport { ResizeStrategy } from './resize-strategy';\r\n\r\nconst OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active';\r\n\r\n/**\r\n * Base class for Resizable directives which are applied to column headers to make those columns\r\n * resizable.\r\n */\r\n@Directive()\r\nexport abstract class Resizable<HandleComponent extends ResizeOverlayHandle>\r\n  implements AfterViewInit, OnDestroy {\r\n  protected minWidthPxInternal: number = 0;\r\n  protected maxWidthPxInternal: number = Number.MAX_SAFE_INTEGER;\r\n  protected enabled: boolean = false;\r\n\r\n  protected inlineHandle?: HTMLElement;\r\n  protected overlayRef?: OverlayRef;\r\n  protected readonly destroyed = new Subject<void>();\r\n\r\n  protected abstract readonly columnDef: CdkColumnDef;\r\n  protected abstract readonly columnResize: ColumnResize;\r\n  protected abstract readonly directionality: Directionality;\r\n  protected abstract readonly document: Document;\r\n  protected abstract readonly elementRef: ElementRef;\r\n  protected abstract readonly eventDispatcher: HeaderRowEventDispatcher;\r\n  protected abstract readonly injector: Injector;\r\n  protected abstract readonly ngZone: NgZone;\r\n  protected abstract readonly overlay: Overlay;\r\n  protected abstract readonly resizeNotifier: ColumnResizeNotifierSource;\r\n  protected abstract readonly resizeStrategy: ResizeStrategy;\r\n  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;\r\n  protected abstract readonly viewContainerRef: ViewContainerRef;\r\n  protected abstract readonly changeDetectorRef: ChangeDetectorRef;\r\n\r\n  private _viewInitialized = false;\r\n  private _isDestroyed = false;\r\n\r\n  /** The minimum width to allow the column to be sized to. */\r\n  get minWidthPx(): number {\r\n    return this.minWidthPxInternal;\r\n  }\r\n  set minWidthPx(value: number) {\r\n    this.minWidthPxInternal = value;\r\n\r\n    this.columnResize.setResized();\r\n    if (this.elementRef.nativeElement && this._viewInitialized) {\r\n      this._applyMinWidthPx();\r\n    }\r\n  }\r\n\r\n  get settings(): boolean | { minWidth: number, maxWidth: number } {\r\n    return this.enabled;\r\n  }\r\n  set settings(value: boolean | { minWidth: number, maxWidth: number }) {\r\n    this.enabled = !!value;\r\n\r\n    if (typeof value === 'object') {\r\n      if (value.minWidth) {\r\n        this.minWidthPx = value.minWidth;\r\n      }\r\n      if (value.maxWidth) {\r\n        this.maxWidthPx = value.maxWidth;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** The maximum width to allow the column to be sized to. */\r\n  get maxWidthPx(): number {\r\n    return this.maxWidthPxInternal;\r\n  }\r\n  set maxWidthPx(value: number) {\r\n    this.maxWidthPxInternal = value;\r\n\r\n    this.columnResize.setResized();\r\n    if (this.elementRef.nativeElement && this._viewInitialized) {\r\n      this._applyMaxWidthPx();\r\n    }\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this._listenForRowHoverEvents();\r\n    this._listenForResizeEvents();\r\n    this._appendInlineHandle();\r\n\r\n    this.styleScheduler.scheduleEnd(() => {\r\n      if (this._isDestroyed) return;\r\n      this._viewInitialized = true;\r\n      this._applyMinWidthPx();\r\n      this._applyMaxWidthPx();\r\n    });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this._isDestroyed = true;\r\n    this.destroyed.next();\r\n    this.destroyed.complete();\r\n    this.inlineHandle?.remove();\r\n    this.overlayRef?.dispose();\r\n  }\r\n\r\n  protected abstract getInlineHandleCssClassName(): string;\r\n\r\n  protected abstract getOverlayHandleComponentType(): Type<HandleComponent>;\r\n\r\n  private _createOverlayForHandle(): OverlayRef {\r\n    // Use of overlays allows us to properly capture click events spanning parts\r\n    // of two table cells and is also useful for displaying a resize thumb\r\n    // over both cells and extending it down the table as needed.\r\n\r\n    const isRtl = this.directionality.value === 'rtl';\r\n    const positionStrategy = this.overlay\r\n      .position()\r\n      .flexibleConnectedTo(this.elementRef.nativeElement!)\r\n      .withFlexibleDimensions(false)\r\n      .withGrowAfterOpen(false)\r\n      .withPush(false)\r\n      .withDefaultOffsetX(isRtl ? 1 : 0)\r\n      .withPositions([\r\n        {\r\n          originX: isRtl ? 'start' : 'end',\r\n          originY: 'top',\r\n          overlayX: 'center',\r\n          overlayY: 'top',\r\n        },\r\n      ]);\r\n\r\n    return this.overlay.create({\r\n      // Always position the overlay based on left-indexed coordinates.\r\n      direction: 'ltr',\r\n      disposeOnNavigation: true,\r\n      positionStrategy,\r\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\r\n      width: '16px',\r\n    });\r\n  }\r\n\r\n  private _listenForRowHoverEvents(): void {\r\n    const element = this.elementRef.nativeElement!;\r\n    const takeUntilDestroyed = takeUntil<boolean>(this.destroyed);\r\n\r\n    this.eventDispatcher\r\n      .resizeOverlayVisibleForHeaderRow(closest(element, HEADER_ROW_SELECTOR)!)\r\n      .pipe(takeUntilDestroyed)\r\n      .subscribe(hoveringRow => {\r\n        if (hoveringRow && this.enabled) {\r\n          if (!this.overlayRef) {\r\n            this.overlayRef = this._createOverlayForHandle();\r\n          }\r\n\r\n          this._showHandleOverlay();\r\n        } else if (this.overlayRef) {\r\n          // todo - can't detach during an active resize - need to work that out\r\n          this.overlayRef.detach();\r\n        }\r\n      });\r\n  }\r\n\r\n  private _listenForResizeEvents() {\r\n    const takeUntilDestroyed = takeUntil<ColumnSizeAction>(this.destroyed);\r\n\r\n    merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.triggerResize)\r\n      .pipe(\r\n        takeUntilDestroyed,\r\n        filter(columnSize => columnSize.columnId === this.columnDef.name),\r\n      )\r\n      .subscribe(({ size, previousSize, completeImmediately }) => {\r\n        this.elementRef.nativeElement!.classList.add(OVERLAY_ACTIVE_CLASS);\r\n        this._applySize(size, previousSize);\r\n\r\n        if (completeImmediately) {\r\n          this._completeResizeOperation();\r\n        }\r\n      });\r\n\r\n    merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.resizeCompleted)\r\n      .pipe(takeUntilDestroyed)\r\n      .subscribe(columnSize => {\r\n        this._cleanUpAfterResize(columnSize);\r\n      });\r\n  }\r\n\r\n  private _completeResizeOperation(): void {\r\n    this.ngZone.run(() => {\r\n      this.resizeNotifier.resizeCompleted.next({\r\n        columnId: this.columnDef.name,\r\n        size: this.elementRef.nativeElement!.offsetWidth,\r\n      });\r\n    });\r\n  }\r\n\r\n  private _cleanUpAfterResize(columnSize: ColumnSizeAction): void {\r\n    this.elementRef.nativeElement!.classList.remove(OVERLAY_ACTIVE_CLASS);\r\n\r\n    if (this.overlayRef && this.overlayRef.hasAttached()) {\r\n      this._updateOverlayHandleHeight();\r\n      this.overlayRef.updatePosition();\r\n\r\n      if (columnSize.columnId === this.columnDef.name) {\r\n        this.inlineHandle!.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  private _createHandlePortal(): ComponentPortal<HandleComponent> {\r\n    const injector = Injector.create({\r\n      parent: this.injector,\r\n      providers: [\r\n        {\r\n          provide: ResizeRef,\r\n          useValue: new ResizeRef(\r\n            this.elementRef,\r\n            this.overlayRef!,\r\n            this.minWidthPx,\r\n            this.maxWidthPx,\r\n          ),\r\n        },\r\n      ],\r\n    });\r\n\r\n    return new ComponentPortal(\r\n      this.getOverlayHandleComponentType(),\r\n      this.viewContainerRef,\r\n      injector,\r\n    );\r\n  }\r\n\r\n  private _showHandleOverlay(): void {\r\n    this._updateOverlayHandleHeight();\r\n    this.overlayRef!.attach(this._createHandlePortal());\r\n\r\n    // Needed to ensure that all of the lifecycle hooks inside the overlay run immediately.\r\n    this.changeDetectorRef.markForCheck();\r\n  }\r\n\r\n  private _updateOverlayHandleHeight() {\r\n    this.overlayRef!.updateSize({ height: this.elementRef.nativeElement!.offsetHeight });\r\n  }\r\n\r\n  private _applySize(sizeInPixels: number, previousSize?: number): void {\r\n    const sizeToApply = Math.min(Math.max(sizeInPixels, this.minWidthPx, 0), this.maxWidthPx);\r\n\r\n    this.resizeStrategy.applyColumnSize(\r\n      this.columnDef.cssClassFriendlyName,\r\n      this.elementRef.nativeElement!,\r\n      sizeToApply,\r\n      previousSize,\r\n    );\r\n  }\r\n\r\n  private _applyMinWidthPx(): void {\r\n    this.resizeStrategy.applyMinColumnSize(\r\n      this.columnDef.cssClassFriendlyName,\r\n      this.elementRef.nativeElement,\r\n      this.minWidthPx,\r\n    );\r\n  }\r\n\r\n  private _applyMaxWidthPx(): void {\r\n    this.resizeStrategy.applyMaxColumnSize(\r\n      this.columnDef.cssClassFriendlyName,\r\n      this.elementRef.nativeElement,\r\n      this.maxWidthPx,\r\n    );\r\n  }\r\n\r\n  private _appendInlineHandle(): void {\r\n    this.styleScheduler.schedule(() => {\r\n      this.inlineHandle = this.document.createElement('div');\r\n      this.inlineHandle.tabIndex = 0;\r\n      this.inlineHandle.className = this.getInlineHandleCssClassName();\r\n\r\n      // TODO: Apply correct aria role (probably slider) after a11y spec questions resolved.\r\n\r\n      this.elementRef.nativeElement!.appendChild(this.inlineHandle);\r\n    });\r\n  }\r\n}\r\n","/**\r\n * @license\r\n * Copyright Google LLC All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://angular.io/license\r\n */\r\n\r\nimport { AfterViewInit, Directive, ElementRef, OnDestroy, NgZone } from '@angular/core';\r\nimport { coerceCssPixelValue } from '@angular/cdk/coercion';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { ESCAPE } from '@angular/cdk/keycodes';\r\nimport { CdkColumnDef, _CoalescedStyleScheduler } from '@angular/cdk/table';\r\nimport { fromEvent, Subject, merge } from 'rxjs';\r\nimport {\r\n  distinctUntilChanged,\r\n  filter,\r\n  map,\r\n  mapTo,\r\n  pairwise,\r\n  startWith,\r\n  takeUntil,\r\n} from 'rxjs/operators';\r\n\r\nimport { closest } from './closest';\r\n\r\nimport { HEADER_CELL_SELECTOR } from './selectors';\r\nimport { ColumnResizeNotifierSource } from './column-resize-notifier';\r\nimport { HeaderRowEventDispatcher } from './event-dispatcher';\r\nimport { ResizeRef } from './resize-ref';\r\n\r\n// TODO: Take another look at using cdk drag drop. IIRC I ran into a couple\r\n// good reasons for not using it but I don't remember what they were at this point.\r\n/**\r\n * Base class for a component shown over the edge of a resizable column that is responsible\r\n * for handling column resize mouse events and displaying any visible UI on the column edge.\r\n */\r\n@Directive()\r\nexport abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {\r\n  protected readonly destroyed = new Subject<void>();\r\n\r\n  protected abstract readonly columnDef: CdkColumnDef;\r\n  protected abstract readonly document: Document;\r\n  protected abstract readonly directionality: Directionality;\r\n  protected abstract readonly elementRef: ElementRef;\r\n  protected abstract readonly eventDispatcher: HeaderRowEventDispatcher;\r\n  protected abstract readonly ngZone: NgZone;\r\n  protected abstract readonly resizeNotifier: ColumnResizeNotifierSource;\r\n  protected abstract readonly resizeRef: ResizeRef;\r\n  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;\r\n\r\n  ngAfterViewInit() {\r\n    this._listenForMouseEvents();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.destroyed.next();\r\n    this.destroyed.complete();\r\n  }\r\n\r\n  private _listenForMouseEvents() {\r\n    this.ngZone.runOutsideAngular(() => {\r\n      fromEvent<MouseEvent>(this.elementRef.nativeElement!, 'mouseenter')\r\n        .pipe(mapTo(this.resizeRef.origin.nativeElement!), takeUntil(this.destroyed))\r\n        .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));\r\n\r\n      fromEvent<MouseEvent>(this.elementRef.nativeElement!, 'mouseleave')\r\n        .pipe(\r\n          map(\r\n            event =>\r\n              event.relatedTarget && closest(event.relatedTarget as Element, HEADER_CELL_SELECTOR),\r\n          ),\r\n          takeUntil(this.destroyed),\r\n        )\r\n        .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));\r\n\r\n      fromEvent<MouseEvent>(this.elementRef.nativeElement!, 'mousedown')\r\n        .pipe(takeUntil(this.destroyed))\r\n        .subscribe(mousedownEvent => {\r\n          this._dragStarted(mousedownEvent);\r\n        });\r\n    });\r\n  }\r\n\r\n  private _dragStarted(mousedownEvent: MouseEvent) {\r\n    // Only allow dragging using the left mouse button.\r\n    if (mousedownEvent.button !== 0) {\r\n      return;\r\n    }\r\n\r\n    const mouseup = fromEvent<MouseEvent>(this.document, 'mouseup');\r\n    const mousemove = fromEvent<MouseEvent>(this.document, 'mousemove');\r\n    const escape = fromEvent<KeyboardEvent>(this.document, 'keyup').pipe(\r\n      filter(event => event.keyCode === ESCAPE),\r\n    );\r\n\r\n    const startX = mousedownEvent.screenX;\r\n\r\n    const initialSize = this._getOriginWidth();\r\n    let overlayOffset = 0;\r\n    let originOffset = this._getOriginOffset();\r\n    let size = initialSize;\r\n    let overshot = 0;\r\n\r\n    this.updateResizeActive(true);\r\n\r\n    mouseup.pipe(takeUntil(merge(escape, this.destroyed))).subscribe(({ screenX }) => {\r\n      this.styleScheduler.scheduleEnd(() => {\r\n        this._notifyResizeEnded(size, screenX !== startX);\r\n      });\r\n    });\r\n\r\n    escape.pipe(takeUntil(merge(mouseup, this.destroyed))).subscribe(() => {\r\n      this._notifyResizeEnded(initialSize);\r\n    });\r\n\r\n    mousemove\r\n      .pipe(\r\n        map(({ screenX }) => screenX),\r\n        startWith(startX),\r\n        distinctUntilChanged(),\r\n        pairwise(),\r\n        takeUntil(merge(mouseup, escape, this.destroyed)),\r\n      )\r\n      .subscribe(([prevX, currX]) => {\r\n        let deltaX = currX - prevX;\r\n\r\n        // If the mouse moved further than the resize was able to match, limit the\r\n        // movement of the overlay to match the actual size and position of the origin.\r\n        if (overshot !== 0) {\r\n          if ((overshot < 0 && deltaX < 0) || (overshot > 0 && deltaX > 0)) {\r\n            overshot += deltaX;\r\n            return;\r\n          } else {\r\n            const remainingOvershot = overshot + deltaX;\r\n            overshot =\r\n              overshot > 0 ? Math.max(remainingOvershot, 0) : Math.min(remainingOvershot, 0);\r\n            deltaX = remainingOvershot - overshot;\r\n\r\n            if (deltaX === 0) {\r\n              return;\r\n            }\r\n          }\r\n        }\r\n\r\n        let computedNewSize: number = size + (this._isLtr() ? deltaX : -deltaX);\r\n        computedNewSize = Math.min(\r\n          Math.max(computedNewSize, this.resizeRef.minWidthPx, 0),\r\n          this.resizeRef.maxWidthPx,\r\n        );\r\n\r\n        this.resizeNotifier.triggerResize.next({\r\n          columnId: this.columnDef.name,\r\n          size: computedNewSize,\r\n          previousSize: size,\r\n          isStickyColumn: this.columnDef.sticky || this.columnDef.stickyEnd,\r\n        });\r\n\r\n        this.styleScheduler.scheduleEnd(() => {\r\n          const originNewSize = this._getOriginWidth();\r\n          const originNewOffset = this._getOriginOffset();\r\n          const originOffsetDeltaX = originNewOffset - originOffset;\r\n          const originSizeDeltaX = originNewSize - size;\r\n          size = originNewSize;\r\n          originOffset = originNewOffset;\r\n\r\n          overshot += deltaX + (this._isLtr() ? -originSizeDeltaX : originSizeDeltaX);\r\n          overlayOffset += originOffsetDeltaX + (this._isLtr() ? originSizeDeltaX : 0);\r\n\r\n          this._updateOverlayOffset(overlayOffset);\r\n        });\r\n      });\r\n  }\r\n\r\n  protected updateResizeActive(active: boolean): void {\r\n    this.eventDispatcher.overlayHandleActiveForCell.next(\r\n      active ? this.resizeRef.origin.nativeElement! : null,\r\n    );\r\n  }\r\n\r\n  private _getOriginWidth(): number {\r\n    return this.resizeRef.origin.nativeElement!.offsetWidth;\r\n  }\r\n\r\n  private _getOriginOffset(): number {\r\n    return this.resizeRef.origin.nativeElement!.offsetLeft;\r\n  }\r\n\r\n  private _updateOverlayOffset(offset: number): void {\r\n    this.resizeRef.overlayRef.overlayElement.style.transform = `translateX