@ng-matero/extensions/fesm2022/mtxColumnResize.mjs.map

Angular Material Extensions

{"version":3,"file":"mtxColumnResize.mjs","sources":["../../../projects/extensions/column-resize/selectors.ts","../../../projects/extensions/column-resize/polyfill.ts","../../../projects/extensions/column-resize/column-resize.ts","../../../projects/extensions/column-resize/column-resize-notifier.ts","../../../projects/extensions/column-resize/event-dispatcher.ts","../../../projects/extensions/column-resize/coalesced-style-scheduler.ts","../../../projects/extensions/column-resize/resize-strategy.ts","../../../projects/extensions/column-resize/column-resize-directives/constants.ts","../../../projects/extensions/column-resize/column-resize-directives/column-resize.ts","../../../projects/extensions/column-resize/column-resize-directives/column-resize-flex.ts","../../../projects/extensions/column-resize/column-resize-module.ts","../../../projects/extensions/column-resize/column-size-store.ts","../../../projects/extensions/column-resize/resize-ref.ts","../../../projects/extensions/column-resize/resizable.ts","../../../projects/extensions/column-resize/overlay-handle.ts","../../../projects/extensions/column-resize/mtxColumnResize.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\n// TODO: Figure out how to remove `mat-` classes from the CDK part of the\n// column resize implementation.\n\nexport const HEADER_CELL_SELECTOR = '.cdk-header-cell, .mat-header-cell';\n\nexport const HEADER_ROW_SELECTOR = '.cdk-header-row, .mat-header-row';\n\nexport const RESIZE_OVERLAY_SELECTOR = '.mat-column-resize-overlay-thumb';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\n/** closest implementation that is able to start from non-Element Nodes. */\nexport function closest(\n  element: EventTarget | Element | null | undefined,\n  selector: string\n): Element | null {\n  if (!(element instanceof Node)) {\n    return null;\n  }\n\n  let curr: Node | null = element;\n  while (curr != null && !(curr instanceof Element)) {\n    curr = curr.parentNode;\n  }\n\n  return curr?.closest(selector) ?? null;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n  AfterViewInit,\n  Directive,\n  ElementRef,\n  inject,\n  InjectionToken,\n  Input,\n  NgZone,\n  OnDestroy,\n  Renderer2,\n} from '@angular/core';\nimport { _IdGenerator } from '@angular/cdk/a11y';\nimport { merge, Subject } from 'rxjs';\nimport { mapTo, pairwise, startWith, take, takeUntil } from 'rxjs/operators';\n\nimport { ColumnResizeNotifier, ColumnResizeNotifierSource } from './column-resize-notifier';\nimport { HEADER_CELL_SELECTOR, RESIZE_OVERLAY_SELECTOR } from './selectors';\nimport { HeaderRowEventDispatcher } from './event-dispatcher';\nimport { closest } from './polyfill';\n\nconst HOVER_OR_ACTIVE_CLASS = 'cdk-column-resize-hover-or-active';\nconst WITH_RESIZED_COLUMN_CLASS = 'cdk-column-resize-with-resized-column';\n\n/** Configurable options for column resize. */\nexport interface ColumnResizeOptions {\n  liveResizeUpdates?: boolean; // Defaults to true.\n}\n\nexport const COLUMN_RESIZE_OPTIONS = new InjectionToken<ColumnResizeOptions>(\n  'CdkColumnResizeOptions'\n);\n\n/**\n * Base class for ColumnResize directives which attach to mat-table elements to\n * provide common events and services for column resizing.\n */\n@Directive()\nexport abstract class ColumnResize implements AfterViewInit, OnDestroy {\n  private _renderer = inject(Renderer2);\n  private _eventCleanups: (() => void)[] | undefined;\n  protected readonly destroyed = new Subject<void>();\n\n  /* Publicly accessible interface for triggering and being notified of resizes. */\n  abstract readonly columnResizeNotifier: ColumnResizeNotifier;\n\n  /* ElementRef that this directive is attached to. Exposed For use by column-level directives */\n  abstract readonly elementRef: ElementRef<HTMLElement>;\n\n  protected abstract readonly eventDispatcher: HeaderRowEventDispatcher;\n  protected abstract readonly ngZone: NgZone;\n  protected abstract readonly notifier: ColumnResizeNotifierSource;\n\n  /** Unique ID for this table instance. */\n  protected readonly selectorId = inject(_IdGenerator).getId('cdk-column-resize-');\n\n  /** The id attribute of the table, if specified. */\n  id?: string;\n\n  /** @docs-private Whether a call to updateStickyColumnStyles is pending after a resize. */\n  _flushPending = false;\n\n  /**\n   * Whether to update the column's width continuously as the mouse position\n   * changes, or to wait until mouseup to apply the new size.\n   */\n  @Input() liveResizeUpdates =\n    inject(COLUMN_RESIZE_OPTIONS, { optional: true })?.liveResizeUpdates ?? true;\n\n  ngAfterViewInit() {\n    this.elementRef.nativeElement!.classList.add(this.getUniqueCssClass());\n\n    this._listenForRowHoverEvents();\n    this._listenForResizeActivity();\n    this._listenForHoverActivity();\n  }\n\n  ngOnDestroy() {\n    this._eventCleanups?.forEach(cleanup => cleanup());\n    this.destroyed.next();\n    this.destroyed.complete();\n  }\n\n  /** Gets the unique CSS class name for this table instance. */\n  getUniqueCssClass() {\n    return this.selectorId;\n  }\n\n  /** Gets the ID for this table used for column size persistance. */\n  getTableId(): string {\n    return String(this.elementRef.nativeElement.id);\n  }\n\n  /** Called when a column in the table is resized. Applies a css class to the table element. */\n  setResized() {\n    this.elementRef.nativeElement!.classList.add(WITH_RESIZED_COLUMN_CLASS);\n  }\n\n  private _listenForRowHoverEvents() {\n    this.ngZone.runOutsideAngular(() => {\n      const element = this.elementRef.nativeElement;\n\n      this._eventCleanups = [\n        this._renderer.listen(element, 'mouseover', (event: MouseEvent) => {\n          this.eventDispatcher.headerCellHovered.next(closest(event.target, HEADER_CELL_SELECTOR));\n        }),\n        this._renderer.listen(element, 'mouseleave', (event: MouseEvent) => {\n          if (\n            event.relatedTarget &&\n            !(event.relatedTarget as Element).matches(RESIZE_OVERLAY_SELECTOR)\n          ) {\n            this.eventDispatcher.headerCellHovered.next(null);\n          }\n        }),\n      ];\n    });\n  }\n\n  private _listenForResizeActivity() {\n    merge(\n      this.eventDispatcher.overlayHandleActiveForCell.pipe(mapTo(undefined)),\n      this.notifier.triggerResize.pipe(mapTo(undefined)),\n      this.notifier.resizeCompleted.pipe(mapTo(undefined))\n    )\n      .pipe(take(1), takeUntil(this.destroyed))\n      .subscribe(() => {\n        this.setResized();\n      });\n  }\n\n  private _listenForHoverActivity() {\n    this.eventDispatcher.headerRowHoveredOrActiveDistinct\n      .pipe(startWith(null), pairwise(), takeUntil(this.destroyed))\n      .subscribe(([previousRow, hoveredRow]) => {\n        if (hoveredRow) {\n          hoveredRow.classList.add(HOVER_OR_ACTIVE_CLASS);\n        }\n        if (previousRow) {\n          previousRow.classList.remove(HOVER_OR_ACTIVE_CLASS);\n        }\n      });\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { inject, Injectable } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n/** Indicates the width of a column. */\nexport interface ColumnSize {\n  /** The ID/name of the column, as defined in CdkColumnDef. */\n  readonly columnId: string;\n\n  /** The width in pixels of the column. */\n  readonly size: number;\n\n  /** The width in pixels of the column prior to this update, if known. */\n  readonly previousSize?: number;\n}\n\n/** Interface describing column size changes. */\nexport interface ColumnSizeAction extends ColumnSize {\n  /**\n   * Whether the resize action should be applied instantaneously. False for events triggered during\n   * a UI-triggered resize (such as with the mouse) until the mouse button is released. True\n   * for all programmatically triggered resizes.\n   */\n  readonly completeImmediately?: boolean;\n\n  /**\n   * Whether the resize action is being applied to a sticky/stickyEnd column.\n   */\n  readonly isStickyColumn?: boolean;\n}\n\n/**\n * Originating source of column resize events within a table.\n * @docs-private\n */\n@Injectable()\nexport class ColumnResizeNotifierSource {\n  /** Emits when an in-progress resize is canceled. */\n  readonly resizeCanceled = new Subject<ColumnSizeAction>();\n\n  /** Emits when a resize is applied. */\n  readonly resizeCompleted = new Subject<ColumnSize>();\n\n  /** Triggers a resize action. */\n  readonly triggerResize = new Subject<ColumnSizeAction>();\n}\n\n/** Service for triggering column resizes imperatively or being notified of them. */\n@Injectable()\nexport class ColumnResizeNotifier {\n  private readonly _source = inject(ColumnResizeNotifierSource);\n\n  /** Emits whenever a column is resized. */\n  readonly resizeCompleted: Observable<ColumnSize> = this._source.resizeCompleted;\n\n  /** Instantly resizes the specified column. */\n  resize(columnId: string, size: number): void {\n    this._source.triggerResize.next({\n      columnId,\n      size,\n      completeImmediately: true,\n      isStickyColumn: true,\n    });\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { Injectable, NgZone, inject } from '@angular/core';\nimport { combineLatest, MonoTypeOperatorFunction, Observable, Subject } from 'rxjs';\nimport { distinctUntilChanged, map, share, skip, startWith } from 'rxjs/operators';\nimport { closest } from './polyfill';\n\nimport { HEADER_ROW_SELECTOR } from './selectors';\n\n/** Coordinates events between the column resize directives. */\n@Injectable()\nexport class HeaderRowEventDispatcher {\n  private readonly _ngZone = inject(NgZone);\n\n  /**\n   * Emits the currently hovered header cell or null when no header cells are hovered.\n   * Exposed publicly for events to feed in, but subscribers should use headerCellHoveredDistinct,\n   * defined below.\n   */\n  readonly headerCellHovered = new Subject<Element | null>();\n\n  /**\n   * Emits the header cell for which a user-triggered resize is active or null\n   * when no resize is in progress.\n   */\n  readonly overlayHandleActiveForCell = new Subject<Element | null>();\n\n  /** Distinct and shared version of headerCellHovered. */\n  readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(distinctUntilChanged(), share());\n\n  /**\n   * Emits the header that is currently hovered or hosting an active resize event (with active\n   * taking precedence).\n   */\n  readonly headerRowHoveredOrActiveDistinct = combineLatest([\n    this.headerCellHoveredDistinct.pipe(\n      map(cell => closest(cell, HEADER_ROW_SELECTOR)),\n      startWith(null),\n      distinctUntilChanged()\n    ),\n    this.overlayHandleActiveForCell.pipe(\n      map(cell => closest(cell, HEADER_ROW_SELECTOR)),\n      startWith(null),\n      distinctUntilChanged()\n    ),\n  ]).pipe(\n    skip(1), // Ignore initial [null, null] emission.\n    map(([hovered, active]) => active || hovered),\n    distinctUntilChanged(),\n    share()\n  );\n\n  private readonly _headerRowHoveredOrActiveDistinctReenterZone =\n    this.headerRowHoveredOrActiveDistinct.pipe(this._enterZone(), share());\n\n  // Optimization: Share row events observable with subsequent callers.\n  // At startup, calls will be sequential by row (and typically there's only one).\n  private _lastSeenRow: Element | null = null;\n  private _lastSeenRowHover: Observable<boolean> | null = null;\n\n  /**\n   * Emits whether the specified row should show its overlay controls.\n   * Emission occurs within the NgZone.\n   */\n  resizeOverlayVisibleForHeaderRow(row: Element): Observable<boolean> {\n    if (row !== this._lastSeenRow) {\n      this._lastSeenRow = row;\n      this._lastSeenRowHover = this._headerRowHoveredOrActiveDistinctReenterZone.pipe(\n        map(hoveredRow => hoveredRow === row),\n        distinctUntilChanged(),\n        share()\n      );\n    }\n\n    return this._lastSeenRowHover!;\n  }\n\n  private _enterZone<T>(): MonoTypeOperatorFunction<T> {\n    return (source: Observable<T>) =>\n      new Observable<T>(observer =>\n        source.subscribe({\n          next: value => this._ngZone.run(() => observer.next(value)),\n          error: err => observer.error(err),\n          complete: () => observer.complete(),\n        })\n      );\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { Injectable, InjectionToken, NgZone, inject } from '@angular/core';\n\n/**\n * @docs-private\n */\nexport class _Schedule {\n  tasks: (() => unknown)[] = [];\n  endTasks: (() => unknown)[] = [];\n}\n\n/** Injection token used to provide a coalesced style scheduler. */\nexport const _COALESCED_STYLE_SCHEDULER = new InjectionToken<_CoalescedStyleScheduler>(\n  '_COALESCED_STYLE_SCHEDULER'\n);\n\n/**\n * Allows grouping up CSSDom mutations after the current execution context.\n * This can significantly improve performance when separate consecutive functions are\n * reading from the CSSDom and then mutating it.\n *\n * @docs-private\n */\n@Injectable()\nexport class _CoalescedStyleScheduler {\n  private _currentSchedule: _Schedule | null = null;\n  private _ngZone = inject(NgZone);\n\n  /**\n   * Schedules the specified task to run at the end of the current VM turn.\n   */\n  schedule(task: () => unknown): void {\n    this._createScheduleIfNeeded();\n\n    this._currentSchedule!.tasks.push(task);\n  }\n\n  /**\n   * Schedules the specified task to run after other scheduled tasks at the end of the current\n   * VM turn.\n   */\n  scheduleEnd(task: () => unknown): void {\n    this._createScheduleIfNeeded();\n\n    this._currentSchedule!.endTasks.push(task);\n  }\n\n  private _createScheduleIfNeeded() {\n    if (this._currentSchedule) {\n      return;\n    }\n\n    this._currentSchedule = new _Schedule();\n\n    this._ngZone.runOutsideAngular(() =>\n      // TODO(mmalerba): Scheduling this using something that runs less frequently\n      //  (e.g. requestAnimationFrame, setTimeout, etc.) causes noticeable jank with the column\n      //  resizer. We should audit the usages of schedule / scheduleEnd in that component and see\n      //  if we can refactor it so that we don't need to flush the tasks quite so frequently.\n      queueMicrotask(() => {\n        while (this._currentSchedule!.tasks.length || this._currentSchedule!.endTasks.length) {\n          const schedule = this._currentSchedule!;\n\n          // Capture new tasks scheduled by the current set of tasks.\n          this._currentSchedule = new _Schedule();\n\n          for (const task of schedule.tasks) {\n            task();\n          }\n\n          for (const task of schedule.endTasks) {\n            task();\n          }\n        }\n\n        this._currentSchedule = null;\n      })\n    );\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { Injectable, OnDestroy, Provider, CSP_NONCE, inject, DOCUMENT } from '@angular/core';\n\nimport { coerceCssPixelValue } from '@angular/cdk/coercion';\nimport { CdkTable } from '@angular/cdk/table';\n\nimport { ColumnResize } from './column-resize';\nimport { _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler } from './coalesced-style-scheduler';\n\n/**\n * Provides an implementation for resizing a column.\n * The details of how resizing works for tables for flex mat-tables are quite different.\n */\n@Injectable()\nexport abstract class ResizeStrategy {\n  protected abstract readonly columnResize: ColumnResize;\n  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;\n  protected abstract readonly table: CdkTable<unknown>;\n\n  private _pendingResizeDelta: number | null = null;\n\n  /** Updates the width of the specified column. */\n  abstract applyColumnSize(\n    cssFriendlyColumnName: string,\n    columnHeader: HTMLElement,\n    sizeInPx: number,\n    previousSizeInPx?: number\n  ): void;\n\n  /** Applies a minimum width to the specified column, updating its current width as needed. */\n  abstract applyMinColumnSize(\n    cssFriendlyColumnName: string,\n    columnHeader: HTMLElement,\n    minSizeInPx: number\n  ): void;\n\n  /** Applies a maximum width to the specified column, updating its current width as needed. */\n  abstract applyMaxColumnSize(\n    cssFriendlyColumnName: string,\n    columnHeader: HTMLElement,\n    minSizeInPx: number\n  ): void;\n\n  /** Adjusts the width of the table element by the specified delta. */\n  protected updateTableWidthAndStickyColumns(delta: number): void {\n    if (this._pendingResizeDelta === null) {\n      const tableElement = this.columnResize.elementRef.nativeElement;\n      const tableWidth = this.getElementWidth(tableElement);\n\n      this.styleScheduler.schedule(() => {\n        tableElement.style.width = coerceCssPixelValue(tableWidth + this._pendingResizeDelta!);\n\n        this._pendingResizeDelta = null;\n      });\n\n      this.styleScheduler.scheduleEnd(() => {\n        this.table.updateStickyColumnStyles();\n      });\n    }\n\n    this._pendingResizeDelta = (this._pendingResizeDelta ?? 0) + delta;\n  }\n\n  /** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */\n  protected getElementWidth(element: HTMLElement) {\n    // Optimization: Check style.width first as we probably set it already before reading\n    // offsetWidth which triggers layout.\n    return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;\n  }\n}\n\n/**\n * The optimally performing resize strategy for &lt;table&gt; elements with table-layout: fixed.\n * Tested against and outperformed:\n *   CSS selector\n *   CSS selector w/ CSS variable\n *   Updating all cell nodes\n */\n@Injectable()\nexport class TableLayoutFixedResizeStrategy extends ResizeStrategy {\n  protected readonly columnResize = inject(ColumnResize);\n  protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER);\n  protected readonly table = inject<CdkTable<unknown>>(CdkTable);\n\n  applyColumnSize(\n    _: string,\n    columnHeader: HTMLElement,\n    sizeInPx: number,\n    previousSizeInPx?: number\n  ): void {\n    const delta = sizeInPx - (previousSizeInPx ?? this.getElementWidth(columnHeader));\n\n    if (delta === 0) {\n      return;\n    }\n\n    this.styleScheduler.schedule(() => {\n      columnHeader.style.width = coerceCssPixelValue(sizeInPx);\n    });\n\n    this.updateTableWidthAndStickyColumns(delta);\n  }\n\n  applyMinColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void {\n    const currentWidth = this.getElementWidth(columnHeader);\n    const newWidth = Math.max(currentWidth, sizeInPx);\n\n    this.applyColumnSize(_, columnHeader, newWidth, currentWidth);\n  }\n\n  applyMaxColumnSize(_: string, columnHeader: HTMLElement, sizeInPx: number): void {\n    const currentWidth = this.getElementWidth(columnHeader);\n    const newWidth = Math.min(currentWidth, sizeInPx);\n\n    this.applyColumnSize(_, columnHeader, newWidth, currentWidth);\n  }\n}\n\n/**\n * The optimally performing resize strategy for flex mat-tables.\n * Tested against and outperformed:\n *   CSS selector w/ CSS variable\n *   Updating all mat-cell nodes\n */\n@Injectable()\nexport class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDestroy {\n  protected readonly columnResize = inject(ColumnResize);\n  protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER);\n  protected readonly table = inject<CdkTable<unknown>>(CdkTable);\n  private readonly _nonce = inject(CSP_NONCE, { optional: true });\n\n  private readonly _document = inject(DOCUMENT);\n  private readonly _columnIndexes = new Map<string, number>();\n  private readonly _columnProperties = new Map<string, Map<string, string>>();\n\n  private _styleElement?: HTMLStyleElement;\n  private _indexSequence = 0;\n\n  protected readonly defaultMinSize = 0;\n  protected readonly defaultMaxSize = Number.MAX_SAFE_INTEGER;\n\n  applyColumnSize(\n    cssFriendlyColumnName: string,\n    columnHeader: HTMLElement,\n    sizeInPx: number,\n    previousSizeInPx?: number\n  ): void {\n    // Optimization: Check applied width first as we probably set it already before reading\n    // offsetWidth which triggers layout.\n    const delta =\n      sizeInPx -\n      (previousSizeInPx ??\n        (this._getAppliedWidth(cssFriendlyColumnName) || columnHeader.offsetWidth));\n\n    if (delta === 0) {\n      return;\n    }\n\n    const cssSize = coerceCssPixelValue(sizeInPx);\n\n    this._applyProperty(cssFriendlyColumnName, 'flex', `0 0.01 ${cssSize}`);\n    this.updateTableWidthAndStickyColumns(delta);\n  }\n\n  applyMinColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void {\n    const cssSize = coerceCssPixelValue(sizeInPx);\n\n    this._applyProperty(\n      cssFriendlyColumnName,\n      'min-width',\n      cssSize,\n      sizeInPx !== this.defaultMinSize\n    );\n    this.updateTableWidthAndStickyColumns(0);\n  }\n\n  applyMaxColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void {\n    const cssSize = coerceCssPixelValue(sizeInPx);\n\n    this._applyProperty(\n      cssFriendlyColumnName,\n      'max-width',\n      cssSize,\n      sizeInPx !== this.defaultMaxSize\n    );\n    this.updateTableWidthAndStickyColumns(0);\n  }\n\n  protected getColumnCssClass(cssFriendlyColumnName: string): string {\n    return `cdk-column-${cssFriendlyColumnName}`;\n  }\n\n  ngOnDestroy(): void {\n    this._styleElement?.remove();\n    this._styleElement = undefined;\n  }\n\n  private _getPropertyValue(cssFriendlyColumnName: string, key: string): string | undefined {\n    const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);\n    return properties.get(key);\n  }\n\n  private _getAppliedWidth(cssFriendslyColumnName: string): number {\n    return coercePixelsFromFlexValue(this._getPropertyValue(cssFriendslyColumnName, 'flex'));\n  }\n\n  private _applyProperty(\n    cssFriendlyColumnName: string,\n    key: string,\n    value: string,\n    enable = true\n  ): void {\n    const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);\n\n    this.styleScheduler.schedule(() => {\n      if (enable) {\n        properties.set(key, value);\n      } else {\n        properties.delete(key);\n      }\n      this._applySizeCss(cssFriendlyColumnName);\n    });\n  }\n\n  private _getStyleSheet(): CSSStyleSheet {\n    if (!this._styleElement) {\n      this._styleElement = this._document.createElement('style');\n\n      if (this._nonce) {\n        this._styleElement.setAttribute('nonce', this._nonce);\n      }\n\n      this._styleElement.appendChild(this._document.createTextNode(''));\n      this._document.head.appendChild(this._styleElement);\n    }\n\n    return this._styleElement.sheet as CSSStyleSheet;\n  }\n\n  private _getColumnPropertiesMap(cssFriendlyColumnName: string): Map<string, string> {\n    let properties = this._columnProperties.get(cssFriendlyColumnName);\n    if (properties === undefined) {\n      properties = new Map<string, string>();\n      this._columnProperties.set(cssFriendlyColumnName, properties);\n    }\n    return properties;\n  }\n\n  private _applySizeCss(cssFriendlyColumnName: string) {\n    const properties = this._getColumnPropertiesMap(cssFriendlyColumnName);\n    const propertyKeys = Array.from(properties.keys());\n\n    let index = this._columnIndexes.get(cssFriendlyColumnName);\n    if (index === undefined) {\n      if (!propertyKeys.length) {\n        // Nothing to set or unset.\n        return;\n      }\n\n      index = this._indexSequence++;\n      this._columnIndexes.set(cssFriendlyColumnName, index);\n    } else {\n      this._getStyleSheet().deleteRule(index);\n    }\n\n    const columnClassName = this.getColumnCssClass(cssFriendlyColumnName);\n    const tableClassName = this.columnResize.getUniqueCssClass();\n\n    const selector = `.${tableClassName} .${columnClassName}`;\n    const body = propertyKeys.map(key => `${key}:${properties.get(key)}`).join(';');\n\n    this._getStyleSheet().insertRule(`${selector} {${body}}`, index!);\n  }\n}\n\n/** Converts CSS pixel values to numbers, eg \"123px\" to 123. Returns NaN for non pixel values. */\nfunction coercePixelsFromCssValue(cssValue: string): number {\n  return Number(cssValue.match(/(\\d+)px/)?.[1]);\n}\n\n/**\n * Converts CSS flex values as set in CdkFlexTableResizeStrategy to numbers,\n * eg \"0 0.01 123px\" to 123.\n */\nfunction coercePixelsFromFlexValue(flexValue: string | undefined): number {\n  return Number(flexValue?.match(/0 0\\.01 (\\d+)px/)?.[1]);\n}\n\nexport const TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER: Provider = {\n  provide: ResizeStrategy,\n  useClass: TableLayoutFixedResizeStrategy,\n};\nexport const FLEX_RESIZE_STRATEGY_PROVIDER: Provider = {\n  provide: ResizeStrategy,\n  useClass: CdkFlexTableResizeStrategy,\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { Provider } from '@angular/core';\nimport { ColumnResizeNotifier, ColumnResizeNotifierSource } from '../column-resize-notifier';\nimport { HeaderRowEventDispatcher } from '../event-dispatcher';\nimport {\n  TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,\n  FLEX_RESIZE_STRATEGY_PROVIDER,\n} from '../resize-strategy';\nimport { _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler } from '../coalesced-style-scheduler';\n\nconst PROVIDERS: Provider[] = [\n  ColumnResizeNotifier,\n  HeaderRowEventDispatcher,\n  ColumnResizeNotifierSource,\n  { provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler },\n];\n\nexport const TABLE_PROVIDERS: Provider[] = [\n  ...PROVIDERS,\n  TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER,\n];\nexport const FLEX_PROVIDERS: Provider[] = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { Directive, ElementRef, NgZone, inject } from '@angular/core';\nimport { CdkTable } from '@angular/cdk/table';\n\nimport { ColumnResize } from '../column-resize';\nimport { ColumnResizeNotifier, ColumnResizeNotifierSource } from '../column-resize-notifier';\nimport { HeaderRowEventDispatcher } from '../event-dispatcher';\nimport { TABLE_PROVIDERS } from './constants';\n\n/**\n * Explicitly enables column resizing for a table-based cdk-table.\n * Individual columns must be annotated specifically.\n */\n@Directive({\n  selector: 'table[cdk-table][columnResize]',\n  providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResize }],\n})\nexport class CdkColumnResize extends ColumnResize {\n  readonly columnResizeNotifier = inject(ColumnResizeNotifier);\n  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected readonly eventDispatcher = inject(HeaderRowEventDispatcher);\n  protected readonly ngZone = inject(NgZone);\n  protected readonly notifier = inject(ColumnResizeNotifierSource);\n  protected readonly table = inject<CdkTable<unknown>>(CdkTable);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { Directive, ElementRef, NgZone, inject } from '@angular/core';\nimport { CdkTable } from '@angular/cdk/table';\n\nimport { ColumnResize } from '../column-resize';\nimport { ColumnResizeNotifier, ColumnResizeNotifierSource } from '../column-resize-notifier';\nimport { HeaderRowEventDispatcher } from '../event-dispatcher';\nimport { FLEX_PROVIDERS } from './constants';\n\n/**\n * Explicitly enables column resizing for a flexbox-based cdk-table.\n * Individual columns must be annotated specifically.\n */\n@Directive({\n  selector: 'cdk-table[columnResize]',\n  providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResizeFlex }],\n})\nexport class CdkColumnResizeFlex extends ColumnResize {\n  readonly columnResizeNotifier = inject(ColumnResizeNotifier);\n  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected readonly eventDispatcher = inject(HeaderRowEventDispatcher);\n  protected readonly ngZone = inject(NgZone);\n  protected readonly notifier = inject(ColumnResizeNotifierSource);\n  protected readonly table = inject<CdkTable<unknown>>(CdkTable);\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { NgModule } from '@angular/core';\n\nimport { CdkColumnResize } from './column-resize-directives/column-resize';\nimport { CdkColumnResizeFlex } from './column-resize-directives/column-resize-flex';\n\n/**\n * One of two NgModules for use with CdkColumnResize.\n * When using this module, columns are not resizable by default.\n */\n@NgModule({\n  imports: [CdkColumnResize, CdkColumnResizeFlex],\n  exports: [CdkColumnResize, CdkColumnResizeFlex],\n})\nexport class CdkColumnResizeModule {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n/**\n * Can be provided by the host application to enable persistence of column resize state.\n */\n@Injectable()\nexport abstract class ColumnSizeStore {\n  /** Returns the persisted size of the specified column in the specified table. */\n  abstract getSize(tableId: string, columnId: string): Observable<number | null> | null;\n\n  /** Persists the size of the specified column in the specified table. */\n  abstract setSize(tableId: string, columnId: string, sizePx: number): void;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport { ElementRef } from '@angular/core';\nimport { OverlayRef } from '@angular/cdk/overlay';\n\n/** Tracks state of resize events in progress. */\nexport class ResizeRef {\n  constructor(\n    readonly origin: ElementRef,\n    readonly overlayRef: OverlayRef,\n    readonly minWidthPx: number,\n    readonly maxWidthPx: number,\n    readonly liveUpdates = true\n  ) {}\n}\n","import { Directionality } from '@angular/cdk/bidi';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { CdkColumnDef } from '@angular/cdk/table';\nimport {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Directive,\n  ElementRef,\n  Injector,\n  NgZone,\n  OnDestroy,\n  Type,\n  ViewContainerRef,\n} from '@angular/core';\nimport { merge, Subject } from 'rxjs';\nimport { filter, takeUntil } from 'rxjs/operators';\n\nimport { _CoalescedStyleScheduler } from './coalesced-style-scheduler';\nimport { ColumnResize } from './column-resize';\nimport { ColumnResizeNotifierSource, ColumnSizeAction } from './column-resize-notifier';\nimport { HeaderRowEventDispatcher } from './event-dispatcher';\nimport { ResizeOverlayHandle } from './overlay-handle';\nimport { closest } from './polyfill';\nimport { ResizeRef } from './resize-ref';\nimport { ResizeStrategy } from './resize-strategy';\nimport { HEADER_ROW_SELECTOR } from './selectors';\n\nconst OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active';\n\n/**\n * Base class for Resizable directives which are applied to column headers to make those columns\n * resizable.\n */\n@Directive()\nexport abstract class Resizable<HandleComponent extends ResizeOverlayHandle>\n  implements AfterViewInit, OnDestroy\n{\n  protected isResizable = true;\n\n  protected minWidthPxInternal: number = 0;\n  protected maxWidthPxInternal: number = Number.MAX_SAFE_INTEGER;\n\n  protected inlineHandle?: HTMLElement;\n  protected overlayRef?: OverlayRef;\n  protected readonly destroyed = new Subject<void>();\n\n  protected abstract readonly columnDef: CdkColumnDef;\n  protected abstract readonly columnResize: ColumnResize;\n  protected abstract readonly directionality: Directionality;\n  protected abstract readonly document: Document;\n  protected abstract readonly elementRef: ElementRef;\n  protected abstract readonly eventDispatcher: HeaderRowEventDispatcher;\n  protected abstract readonly injector: Injector;\n  protected abstract readonly ngZone: NgZone;\n  protected abstract readonly overlay: Overlay;\n  protected abstract readonly resizeNotifier: ColumnResizeNotifierSource;\n  protected abstract readonly resizeStrategy: ResizeStrategy;\n  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;\n  protected abstract readonly viewContainerRef: ViewContainerRef;\n  protected abstract readonly changeDetectorRef: ChangeDetectorRef;\n\n  private _viewInitialized = false;\n  private _isDestroyed = false;\n\n  /** The minimum width to allow the column to be sized to. */\n  get minWidthPx(): number {\n    return this.minWidthPxInternal;\n  }\n  set minWidthPx(value: number) {\n    if (value) {\n      this.minWidthPxInternal = value;\n    }\n\n    this.columnResize.setResized();\n    if (this.elementRef.nativeElement && this._viewInitialized) {\n      this._applyMinWidthPx();\n    }\n  }\n\n  /** The maximum width to allow the column to be sized to. */\n  get maxWidthPx(): number {\n    return this.maxWidthPxInternal;\n  }\n  set maxWidthPx(value: number) {\n    if (value) {\n      this.maxWidthPxInternal = value;\n    }\n\n    this.columnResize.setResized();\n    if (this.elementRef.nativeElement && this._viewInitialized) {\n      this._applyMaxWidthPx();\n    }\n  }\n\n  ngAfterViewInit() {\n    if (this.isResizable) {\n      this._listenForRowHoverEvents();\n      this._listenForResizeEvents();\n      this._appendInlineHandle();\n\n      this.styleScheduler.scheduleEnd(() => {\n        if (this._isDestroyed) return;\n        this._viewInitialized = true;\n        this._applyMinWidthPx();\n        this._applyMaxWidthPx();\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this._isDestroyed = true;\n    this.destroyed.next();\n    this.destroyed.complete();\n    this.inlineHandle?.remove();\n    this.overlayRef?.dispose();\n  }\n\n  protected abstract getInlineHandleCssClassName(): string;\n\n  protected abstract getOverlayHandleComponentType(): Type<HandleComponent>;\n\n  private _createOverlayForHandle(): OverlayRef {\n    // Use of overlays allows us to properly capture click events spanning parts\n    // of two table cells and is also useful for displaying a resize thumb\n    // over both cells and extending it down the table as needed.\n\n    const isRtl = this.directionality.value === 'rtl';\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.elementRef.nativeElement)\n      .withFlexibleDimensions(false)\n      .withGrowAfterOpen(false)\n      .withPush(false)\n      .withDefaultOffsetX(isRtl ? 1 : 0)\n      .withPositions([\n        {\n          originX: isRtl ? 'start' : 'end',\n          originY: 'top',\n          overlayX: 'center',\n          overlayY: 'top',\n        },\n      ]);\n\n    return this.overlay.create({\n      // Always position the overlay based on left-indexed coordinates.\n      direction: 'ltr',\n      disposeOnNavigation: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      width: '16px',\n    });\n  }\n\n  private _listenForRowHoverEvents(): void {\n    const element = this.elementRef.nativeElement;\n    const takeUntilDestroyed = takeUntil<boolean>(this.destroyed);\n\n    this.eventDispatcher\n      .resizeOverlayVisibleForHeaderRow(closest(element, HEADER_ROW_SELECTOR)!)\n      .pipe(takeUntilDestroyed)\n      .subscribe(hoveringRow => {\n        if (hoveringRow) {\n          if (!this.overlayRef) {\n            this.overlayRef = this._createOverlayForHandle();\n          }\n\n          this._showHandleOverlay();\n        } else if (this.overlayRef) {\n          // todo - can't detach during an active resize - need to work that out\n          this.overlayRef.detach();\n        }\n      });\n  }\n\n  private _listenForResizeEvents() {\n    const takeUntilDestroyed = takeUntil<ColumnSizeAction>(this.destroyed);\n\n    merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.triggerResize)\n      .pipe(\n        takeUntilDestroyed,\n        filter(columnSize => columnSize.columnId === this.columnDef.name)\n      )\n      .subscribe(({ size, previousSize, completeImmediately }) => {\n        this.elementRef.nativeElement.classList.add(OVERLAY_ACTIVE_CLASS);\n        this._applySize(size, previousSize);\n\n        if (completeImmediately) {\n          this._completeResizeOperation();\n        }\n      });\n\n    merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.resizeCompleted)\n      .pipe(takeUntilDestroyed)\n      .subscribe(columnSize => {\n        this._cleanUpAfterResize(columnSize);\n      });\n  }\n\n  private _completeResizeOperation(): void {\n    this.ngZone.run(() => {\n      this.resizeNotifier.resizeCompleted.next({\n        columnId: this.columnDef.name,\n        size: this.elementRef.nativeElement.offsetWidth,\n      });\n    });\n  }\n\n  private _cleanUpAfterResize(columnSize: ColumnSizeAction): void {\n    this.elementRef.nativeElement.classList.remove(OVERLAY_ACTIVE_CLASS);\n\n    if (this.overlayRef && this.overlayRef.hasAttached()) {\n      this._updateOverlayHandleHeight();\n      this.overlayRef.updatePosition();\n\n      if (columnSize.columnId === this.columnDef.name) {\n        this.inlineHandle!.focus();\n      }\n    }\n  }\n\n  private _createHandlePortal(): ComponentPortal<HandleComponent> {\n    const injector = Injector.create({\n      parent: this.injector,\n      providers: [\n        {\n          provide: ResizeRef,\n          useValue: new ResizeRef(\n            this.elementRef,\n            this.overlayRef!,\n            this.minWidthPx,\n            this.maxWidthPx\n          ),\n        },\n      ],\n    });\n\n    return new ComponentPortal(\n      this.getOverlayHandleComponentType(),\n      this.viewContainerRef,\n      injector\n    );\n  }\n\n  private _showHandleOverlay(): void {\n    this._updateOverlayHandleHeight();\n    this.overlayRef!.attach(this._createHandlePortal());\n\n    // Needed to ensure that all of the lifecycle hooks inside the overlay run immediately.\n    this.changeDetectorRef.markForCheck();\n  }\n\n  private _updateOverlayHandleHeight() {\n    this.overlayRef!.updateSize({ height: this.elementRef.nativeElement.offsetHeight });\n  }\n\n  private _applySize(sizeInPixels: number, previousSize?: number): void {\n    const sizeToApply = Math.min(Math.max(sizeInPixels, this.minWidthPx, 0), this.maxWidthPx);\n\n    this.resizeStrategy.applyColumnSize(\n      this.columnDef.cssClassFriendlyName,\n      this.elementRef.nativeElement,\n      sizeToApply,\n      previousSize\n    );\n  }\n\n  private _applyMinWidthPx(): void {\n    this.resizeStrategy.applyMinColumnSize(\n      this.columnDef.cssClassFriendlyName,\n      this.elementRef.nativeElement,\n      this.minWidthPx\n    );\n  }\n\n  private _applyMaxWidthPx(): void {\n    this.resizeStrategy.applyMaxColumnSize(\n      this.columnDef.cssClassFriendlyName,\n      this.elementRef.nativeElement,\n      this.maxWidthPx\n    );\n  }\n\n  private _appendInlineHandle(): void {\n    this.styleScheduler.schedule(() => {\n      this.inlineHandle = this.document.createElement('div');\n      this.inlineHandle.tabIndex = 0;\n      this.inlineHandle.className = this.getInlineHandleCssClassName();\n\n      // TODO: Apply correct aria role (probably slider) after a11y spec questions resolved.\n\n      this.elementRef.nativeElement.appendChild(this.inlineHandle);\n    });\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n  AfterViewInit,\n  Directive,\n  ElementRef,\n  OnDestroy,\n  NgZone,\n  Renderer2,\n  inject,\n} from '@angular/core';\nimport { coerceCssPixelValue } from '@angular/cdk/coercion';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { ESCAPE } from '@angular/cdk/keycodes';\nimport { CdkColumnDef } from '@angular/cdk/table';\nimport { Subject, merge, Observable } from 'rxjs';\nimport {\n  distinctUntilChanged,\n  filter,\n  map,\n  mapTo,\n  pairwise,\n  startWith,\n  takeUntil,\n} from 'rxjs/operators';\n\nimport { HEADER_CELL_SELECTOR } from './selectors';\nimport { ColumnResizeNotifierSource } from './column-resize-notifier';\nimport { HeaderRowEventDispatcher } from './event-dispatcher';\nimport { ResizeRef } from './resize-ref';\nimport { _CoalescedStyleScheduler } from './coalesced-style-scheduler';\nimport { closest } from './polyfill';\n\n// TODO: Take another look at using cdk drag drop. IIRC I ran into a couple\n// good reasons for not using it but I don't remember what they were at this point.\n/**\n * Base class for a component shown over the edge of a resizable column that is responsible\n * for handling column resize mouse events and displaying any visible UI on the column edge.\n */\n@Directive()\nexport abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {\n  private _renderer = inject(Renderer2);\n  protected readonly destroyed = new Subject<void>();\n\n  protected abstract readonly columnDef: CdkColumnDef;\n  protected abstract readonly document: Document;\n  protected abstract readonly directionality: Directionality;\n  protected abstract readonly elementRef: ElementRef;\n  protected abstract readonly eventDispatcher: HeaderRowEventDispatcher;\n  protected abstract readonly ngZone: NgZone;\n  protected abstract readonly resizeNotifier: ColumnResizeNotifierSource;\n  protected abstract readonly resizeRef: ResizeRef;\n  protected abstract readonly styleScheduler: _CoalescedStyleScheduler;\n\n  private _cumulativeDeltaX = 0;\n\n  ngAfterViewInit() {\n    this._listenForMouseEvents();\n  }\n\n  ngOnDestroy() {\n    this.destroyed.next();\n    this.destroyed.complete();\n  }\n\n  private _listenForMouseEvents() {\n    this.ngZone.runOutsideAngular(() => {\n      this._observableFromEvent<MouseEvent>(this.elementRef.nativeElement!, 'mouseenter')\n        .pipe(mapTo(this.resizeRef.origin.nativeElement!), takeUntil(this.destroyed))\n        .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));\n\n      this._observableFromEvent<MouseEvent>(this.elementRef.nativeElement!, 'mouseleave')\n        .pipe(\n          map(\n            event =>\n              event.relatedTarget && closest(event.relatedTarget as Element, HEADER_CELL_SELECTOR)\n          ),\n          takeUntil(this.destroyed)\n        )\n        .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));\n\n      this._observableFromEvent<MouseEvent>(this.elementRef.nativeElement!, 'mousedown')\n        .pipe(takeUntil(this.destroyed))\n        .subscribe(mousedownEvent => {\n          this._dragStarted(mousedownEvent);\n        });\n    });\n  }\n\n  private _dragStarted(mousedownEvent: MouseEvent) {\n    // Only allow dragging using the left mouse button.\n    if (mousedownEvent.button !== 0) {\n      return;\n    }\n\n    const mouseup = this._observableFromEvent<MouseEvent>(this.document, 'mouseup');\n    const mousemove = this._observableFromEvent<MouseEvent>(this.document, 'mousemove');\n    const escape = this._observableFromEvent<KeyboardEvent>(this.document, 'keyup').pipe(\n      filter(event => event.keyCode === ESCAPE)\n    );\n\n    const startX = mousedownEvent.screenX;\n\n    const initialSize = this._getOriginWidth();\n    let overlayOffset = 0;\n    let originOffset = this._getOriginOffset();\n    let size = initialSize;\n    let overshot = 0;\n    this._cumulativeDeltaX = 0;\n\n    this.updateResizeActive(true);\n\n    mouseup.pipe(takeUntil(merge(escape, this.destroyed))).subscribe(({ screenX }) => {\n      this.styleScheduler.scheduleEnd(() => {\n        this._notifyResizeEnded(size, screenX !== startX);\n      });\n    });\n\n    escape.pipe(takeUntil(merge(mouseup, this.destroyed))).subscribe(() => {\n      this._notifyResizeEnded(initialSize);\n    });\n\n    mousemove\n      .pipe(\n        map(({ screenX }) => screenX),\n        startWith(startX),\n        distinctUntilChanged(),\n        pairwise(),\n        takeUntil(merge(mouseup, escape, this.destroyed))\n      )\n      .subscribe(([prevX, currX]) => {\n        let deltaX = currX - prevX;\n\n        if (!this.resizeRef.liveUpdates) {\n          this._cumulativeDeltaX += deltaX;\n          const sizeDelta = this._computeNewSize(size, this._cumulativeDeltaX) - size;\n          this._updateOverlayOffset(sizeDelta);\n\n          return;\n        }\n\n        // If the mouse moved further than the resize was able to match, limit the\n        // movement of the overlay to match the actual size and position of the origin.\n        if (overshot !== 0) {\n          if ((overshot < 0 && deltaX < 0) || (overshot > 0 && deltaX > 0)) {\n            overshot += deltaX;\n            return;\n          } else {\n            const remainingOvershot = overshot + deltaX;\n            overshot =\n              overshot > 0 ? Math.max(remainingOvershot, 0) : Math.min(remainingOvershot, 0);\n            deltaX = remainingOvershot - overshot;\n\n            if (deltaX === 0) {\n              return;\n            }\n          }\n        }\n\n        this._triggerResize(size, deltaX);\n\n        this.styleScheduler.scheduleEnd(() => {\n          const originNewSize = this._getOriginWidth();\n          const originNewOffset = this._getOriginOffset();\n          const originOffsetDeltaX = originNewOffset - originOffset;\n          const originSizeDeltaX = originNewSize - size;\n          size = originNewSize;\n          originOffset = originNewOffset;\n\n          overshot += deltaX + (this._isLtr() ? -originSizeDeltaX : originSizeDeltaX);\n          overlayOffset += originOffsetDeltaX + (this._isLtr() ? originSizeDeltaX : 0);\n\n          this._updateOverlayOffset(overlayOffset);\n        });\n      });\n  }\n\n  protected updateResizeActive(active: boolean): void {\n    this.eventDispatcher.overlayHandleActiveForCell.next(\n      active ? this.resizeRef.origin.nativeElement! : null\n    );\n  }\n\n  private _triggerResize(startSize: number, deltaX: number): void {\n    this.resizeNotifier.triggerResize.next({\n      columnId: this.columnDef.name,\n      size: this._computeNewSize(startSize, deltaX),\n      previousSize: startSize,\n      isStickyColumn: this.columnDef.sticky || this.columnDef.stickyEnd,\n    });\n  }\n\n  private _computeNewSize(startSize: number, deltaX: number): number {\n    let computedNewSize: number = startSize + (this._isLtr() ? deltaX : -deltaX);\n    computedNewSize = Math.min(\n      Math.max(computedNewSize, this.resizeRef.minWidthPx, 0),\n      this.resizeRef.maxWidthPx\n    );\n    return computedNewSize;\n  }\n\n  private _getOriginWidth(): number {\n    return this.resizeRef.origin.nativeElement!.offsetWidth;\n  }\n\n  private _getOriginOffset(): number {\n    return this.resizeRef.origin.nativeElement!.offsetLeft;\n  }\n\n  private _updateOverlayOffset(offset: number): void {\n    this.resizeRef.overlayRef.overlayElement.style.transform = `translateX(${coerceCssPixelValue(\n      offset\n    )})`;\n  }\n\n  private _isLtr(): boolean {\n    return this.directionality.value === 'ltr';\n  }\n\n  private _notifyResizeEnded(size: number, completedSuccessfully = false): void {\n    this.updateResizeActive(false);\n\n    this.ngZone.run(() => {\n      const sizeMessage = {\n        columnId: this.columnDef.name,\n        size: this._computeNewSize(size, this._cumulativeDeltaX),\n      };\n      if (completedSuccessfully) {\n        if (!this.resizeRef.liveUpdates) {\n          this._triggerResize(size, this._cumulativeDeltaX);\n        }\n\n        this.resizeNotifier.resizeCompleted.next(sizeMessage);\n      } else {\n        this.resizeNotifier.resizeCanceled.next(sizeMessage);\n      }\n    });\n  }\n\n  private _observableFromEvent<T extends Event>(element: Element | Document, name: string) {\n    return new Observable<T>(subscriber => {\n      const handler = (event: T) => subscriber.next(event);\n      const cleanup = this._renderer.listen(element, name, handler);\n      return () => {\n        clean