@ng-matero/extensions 19.4.1 → 20.0.1

package/fesm2022/mtxColumnResize.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Directive, Injectable, inject, NgZone, CSP_NONCE, ElementRef, NgModule, Injector } from '@angular/core';
-import { Subject, fromEvent, merge, combineLatest, Observable } from 'rxjs';
-import { map, takeUntil, filter, mapTo, take, startWith, pairwise, distinctUntilChanged, share, skip } from 'rxjs/operators';
-import { _COALESCED_STYLE_SCHEDULER, CdkTable } from '@angular/cdk/table';
-import { DOCUMENT } from '@angular/common';
+import { InjectionToken, inject, Renderer2, Directive, Input, Injectable, NgZone, CSP_NONCE, DOCUMENT, ElementRef, NgModule, Injector } from '@angular/core';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { Subject, merge, combineLatest, Observable } from 'rxjs';
+import { mapTo, take, takeUntil, startWith, pairwise, distinctUntilChanged, share, map, skip, filter } from 'rxjs/operators';
+import { CdkTable } from '@angular/cdk/table';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ESCAPE } from '@angular/cdk/keycodes';
@@ -13,7 +13,7 @@ import { ESCAPE } from '@angular/cdk/keycodes';
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 // TODO: Figure out how to remove `mat-` classes from the CDK part of the
 // column resize implementation.
@@ -26,7 +26,7 @@ const RESIZE_OVERLAY_SELECTOR = '.mat-column-resize-overlay-thumb';
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 /** closest implementation that is able to start from non-Element Nodes. */
 function closest(element, selector) {
@@ -45,20 +45,28 @@ function closest(element, selector) {
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 const HOVER_OR_ACTIVE_CLASS = 'cdk-column-resize-hover-or-active';
 const WITH_RESIZED_COLUMN_CLASS = 'cdk-column-resize-with-resized-column';
-let nextId = 0;
+const COLUMN_RESIZE_OPTIONS = new InjectionToken('CdkColumnResizeOptions');
 /**
  * Base class for ColumnResize directives which attach to mat-table elements to
  * provide common events and services for column resizing.
  */
 class ColumnResize {
     constructor() {
+        this._renderer = inject(Renderer2);
         this.destroyed = new Subject();
         /** Unique ID for this table instance. */
-        this.selectorId = `${++nextId}`;
+        this.selectorId = inject(_IdGenerator).getId('cdk-column-resize-');
+        /** @docs-private Whether a call to updateStickyColumnStyles is pending after a resize. */
+        this._flushPending = false;
+        /**
+         * Whether to update the column's width continuously as the mouse position
+         * changes, or to wait until mouseup to apply the new size.
+         */
+        this.liveResizeUpdates = inject(COLUMN_RESIZE_OPTIONS, { optional: true })?.liveResizeUpdates ?? true;
     }
     ngAfterViewInit() {
         this.elementRef.nativeElement.classList.add(this.getUniqueCssClass());
@@ -67,12 +75,17 @@ class ColumnResize {
         this._listenForHoverActivity();
     }
     ngOnDestroy() {
+        this._eventCleanups?.forEach(cleanup => cleanup());
         this.destroyed.next();
         this.destroyed.complete();
     }
     /** Gets the unique CSS class name for this table instance. */
     getUniqueCssClass() {
-        return `cdk-column-resize-${this.selectorId}`;
+        return this.selectorId;
+    }
+    /** Gets the ID for this table used for column size persistance. */
+    getTableId() {
+        return String(this.elementRef.nativeElement.id);
     }
     /** Called when a column in the table is resized. Applies a css class to the table element. */
     setResized() {
@@ -81,13 +94,17 @@ class ColumnResize {
     _listenForRowHoverEvents() {
         this.ngZone.runOutsideAngular(() => {
             const element = this.elementRef.nativeElement;
-            fromEvent(element, 'mouseover')
-                .pipe(map(event => closest(event.target, HEADER_CELL_SELECTOR)), takeUntil(this.destroyed))
-                .subscribe(this.eventDispatcher.headerCellHovered);
-            fromEvent(element, 'mouseleave')
-                .pipe(filter(event => !!event.relatedTarget &&
-                !event.relatedTarget.matches(RESIZE_OVERLAY_SELECTOR)), mapTo(null), takeUntil(this.destroyed))
-                .subscribe(this.eventDispatcher.headerCellHovered);
+            this._eventCleanups = [
+                this._renderer.listen(element, 'mouseover', (event) => {
+                    this.eventDispatcher.headerCellHovered.next(closest(event.target, HEADER_CELL_SELECTOR));
+                }),
+                this._renderer.listen(element, 'mouseleave', (event) => {
+                    if (event.relatedTarget &&
+                        !event.relatedTarget.matches(RESIZE_OVERLAY_SELECTOR)) {
+                        this.eventDispatcher.headerCellHovered.next(null);
+                    }
+                }),
+            ];
         });
     }
     _listenForResizeActivity() {
@@ -109,19 +126,21 @@ class ColumnResize {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnResize, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: ColumnResize, isStandalone: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnResize, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: ColumnResize, isStandalone: true, inputs: { liveResizeUpdates: "liveResizeUpdates" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnResize, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnResize, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { liveResizeUpdates: [{
+                type: Input
+            }] } });
 
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 /**
  * Originating source of column resize events within a table.
@@ -136,10 +155,10 @@ class ColumnResizeNotifierSource {
         /** Triggers a resize action. */
         this.triggerResize = new Subject();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnResizeNotifierSource }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnResizeNotifierSource }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
             type: Injectable
         }] });
 /** Service for triggering column resizes imperatively or being notified of them. */
@@ -158,10 +177,10 @@ class ColumnResizeNotifier {
             isStickyColumn: true,
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnResizeNotifier, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnResizeNotifier }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnResizeNotifier, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnResizeNotifier }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnResizeNotifier, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnResizeNotifier, decorators: [{
             type: Injectable
         }] });
 
@@ -170,7 +189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 /** Coordinates events between the column resize directives. */
 class HeaderRowEventDispatcher {
@@ -222,10 +241,10 @@ class HeaderRowEventDispatcher {
             complete: () => observer.complete(),
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HeaderRowEventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HeaderRowEventDispatcher }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: HeaderRowEventDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: HeaderRowEventDispatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: HeaderRowEventDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: HeaderRowEventDispatcher, decorators: [{
             type: Injectable
         }] });
 
@@ -234,7 +253,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
+ */
+/**
+ * @docs-private
+ */
+class _Schedule {
+    constructor() {
+        this.tasks = [];
+        this.endTasks = [];
+    }
+}
+/** Injection token used to provide a coalesced style scheduler. */
+const _COALESCED_STYLE_SCHEDULER = new InjectionToken('_COALESCED_STYLE_SCHEDULER');
+/**
+ * Allows grouping up CSSDom mutations after the current execution context.
+ * This can significantly improve performance when separate consecutive functions are
+ * reading from the CSSDom and then mutating it.
+ *
+ * @docs-private
+ */
+class _CoalescedStyleScheduler {
+    constructor() {
+        this._currentSchedule = null;
+        this._ngZone = inject(NgZone);
+    }
+    /**
+     * Schedules the specified task to run at the end of the current VM turn.
+     */
+    schedule(task) {
+        this._createScheduleIfNeeded();
+        this._currentSchedule.tasks.push(task);
+    }
+    /**
+     * Schedules the specified task to run after other scheduled tasks at the end of the current
+     * VM turn.
+     */
+    scheduleEnd(task) {
+        this._createScheduleIfNeeded();
+        this._currentSchedule.endTasks.push(task);
+    }
+    _createScheduleIfNeeded() {
+        if (this._currentSchedule) {
+            return;
+        }
+        this._currentSchedule = new _Schedule();
+        this._ngZone.runOutsideAngular(() => 
+        // TODO(mmalerba): Scheduling this using something that runs less frequently
+        //  (e.g. requestAnimationFrame, setTimeout, etc.) causes noticeable jank with the column
+        //  resizer. We should audit the usages of schedule / scheduleEnd in that component and see
+        //  if we can refactor it so that we don't need to flush the tasks quite so frequently.
+        queueMicrotask(() => {
+            while (this._currentSchedule.tasks.length || this._currentSchedule.endTasks.length) {
+                const schedule = this._currentSchedule;
+                // Capture new tasks scheduled by the current set of tasks.
+                this._currentSchedule = new _Schedule();
+                for (const task of schedule.tasks) {
+                    task();
+                }
+                for (const task of schedule.endTasks) {
+                    task();
+                }
+            }
+            this._currentSchedule = null;
+        }));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: _CoalescedStyleScheduler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: _CoalescedStyleScheduler }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: _CoalescedStyleScheduler, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
  */
 /**
  * Provides an implementation for resizing a column.
@@ -248,7 +344,7 @@ class ResizeStrategy {
     updateTableWidthAndStickyColumns(delta) {
         if (this._pendingResizeDelta === null) {
             const tableElement = this.columnResize.elementRef.nativeElement;
-            const tableWidth = getElementWidth(tableElement);
+            const tableWidth = this.getElementWidth(tableElement);
             this.styleScheduler.schedule(() => {
                 tableElement.style.width = coerceCssPixelValue(tableWidth + this._pendingResizeDelta);
                 this._pendingResizeDelta = null;
@@ -259,10 +355,16 @@ class ResizeStrategy {
         }
         this._pendingResizeDelta = (this._pendingResizeDelta ?? 0) + delta;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ResizeStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ResizeStrategy }); }
+    /** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */
+    getElementWidth(element) {
+        // Optimization: Check style.width first as we probably set it already before reading
+        // offsetWidth which triggers layout.
+        return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ResizeStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ResizeStrategy }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ResizeStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ResizeStrategy, decorators: [{
             type: Injectable
         }] });
 /**
@@ -274,13 +376,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  */
 class TableLayoutFixedResizeStrategy extends ResizeStrategy {
     constructor() {
-        super();
+        super(...arguments);
         this.columnResize = inject(ColumnResize);
         this.styleScheduler = inject(_COALESCED_STYLE_SCHEDULER);
         this.table = inject(CdkTable);
     }
     applyColumnSize(_, columnHeader, sizeInPx, previousSizeInPx) {
-        const delta = sizeInPx - (previousSizeInPx ?? getElementWidth(columnHeader));
+        const delta = sizeInPx - (previousSizeInPx ?? this.getElementWidth(columnHeader));
         if (delta === 0) {
             return;
         }
@@ -290,21 +392,21 @@ class TableLayoutFixedResizeStrategy extends ResizeStrategy {
         this.updateTableWidthAndStickyColumns(delta);
     }
     applyMinColumnSize(_, columnHeader, sizeInPx) {
-        const currentWidth = getElementWidth(columnHeader);
+        const currentWidth = this.getElementWidth(columnHeader);
         const newWidth = Math.max(currentWidth, sizeInPx);
         this.applyColumnSize(_, columnHeader, newWidth, currentWidth);
     }
     applyMaxColumnSize(_, columnHeader, sizeInPx) {
-        const currentWidth = getElementWidth(columnHeader);
+        const currentWidth = this.getElementWidth(columnHeader);
         const newWidth = Math.min(currentWidth, sizeInPx);
         this.applyColumnSize(_, columnHeader, newWidth, currentWidth);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableLayoutFixedResizeStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableLayoutFixedResizeStrategy }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: TableLayoutFixedResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: TableLayoutFixedResizeStrategy }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TableLayoutFixedResizeStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: TableLayoutFixedResizeStrategy, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 /**
  * The optimally performing resize strategy for flex mat-tables.
  * Tested against and outperformed:
@@ -378,7 +480,7 @@ class CdkFlexTableResizeStrategy extends ResizeStrategy {
         if (!this._styleElement) {
             this._styleElement = this._document.createElement('style');
             if (this._nonce) {
-                this._styleElement.nonce = this._nonce;
+                this._styleElement.setAttribute('nonce', this._nonce);
             }
             this._styleElement.appendChild(this._document.createTextNode(''));
             this._document.head.appendChild(this._styleElement);
@@ -414,22 +516,16 @@ class CdkFlexTableResizeStrategy extends ResizeStrategy {
         const body = propertyKeys.map(key => `${key}:${properties.get(key)}`).join(';');
         this._getStyleSheet().insertRule(`${selector} {${body}}`, index);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkFlexTableResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkFlexTableResizeStrategy }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkFlexTableResizeStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkFlexTableResizeStrategy }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkFlexTableResizeStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkFlexTableResizeStrategy, decorators: [{
             type: Injectable
         }] });
 /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
 function coercePixelsFromCssValue(cssValue) {
     return Number(cssValue.match(/(\d+)px/)?.[1]);
 }
-/** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */
-function getElementWidth(element) {
-    // Optimization: Check style.width first as we probably set it already before reading
-    // offsetWidth which triggers layout.
-    return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
-}
 /**
  * Converts CSS flex values as set in CdkFlexTableResizeStrategy to numbers,
  * eg "0 0.01 123px" to 123.
@@ -451,12 +547,13 @@ const FLEX_RESIZE_STRATEGY_PROVIDER = {
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 const PROVIDERS = [
     ColumnResizeNotifier,
     HeaderRowEventDispatcher,
     ColumnResizeNotifierSource,
+    { provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler },
 ];
 const TABLE_PROVIDERS = [
     ...PROVIDERS,
@@ -469,7 +566,7 @@ const FLEX_PROVIDERS = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 /**
  * Explicitly enables column resizing for a table-based cdk-table.
@@ -477,7 +574,7 @@ const FLEX_PROVIDERS = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER];
  */
 class CdkColumnResize extends ColumnResize {
     constructor() {
-        super();
+        super(...arguments);
         this.columnResizeNotifier = inject(ColumnResizeNotifier);
         this.elementRef = inject(ElementRef);
         this.eventDispatcher = inject(HeaderRowEventDispatcher);
@@ -485,23 +582,23 @@ class CdkColumnResize extends ColumnResize {
         this.notifier = inject(ColumnResizeNotifierSource);
         this.table = inject(CdkTable);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkColumnResize, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: CdkColumnResize, isStandalone: true, selector: "table[cdk-table][columnResize]", providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResize }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkColumnResize, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: CdkColumnResize, isStandalone: true, selector: "table[cdk-table][columnResize]", providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResize }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkColumnResize, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkColumnResize, decorators: [{
             type: Directive,
             args: [{
                     selector: 'table[cdk-table][columnResize]',
                     providers: [...TABLE_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResize }],
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 /**
  * Explicitly enables column resizing for a flexbox-based cdk-table.
@@ -509,7 +606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  */
 class CdkColumnResizeFlex extends ColumnResize {
     constructor() {
-        super();
+        super(...arguments);
         this.columnResizeNotifier = inject(ColumnResizeNotifier);
         this.elementRef = inject(ElementRef);
         this.eventDispatcher = inject(HeaderRowEventDispatcher);
@@ -517,34 +614,34 @@ class CdkColumnResizeFlex extends ColumnResize {
         this.notifier = inject(ColumnResizeNotifierSource);
         this.table = inject(CdkTable);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkColumnResizeFlex, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: CdkColumnResizeFlex, isStandalone: true, selector: "cdk-table[columnResize]", providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResizeFlex }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkColumnResizeFlex, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: CdkColumnResizeFlex, isStandalone: true, selector: "cdk-table[columnResize]", providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResizeFlex }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkColumnResizeFlex, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkColumnResizeFlex, decorators: [{
             type: Directive,
             args: [{
                     selector: 'cdk-table[columnResize]',
                     providers: [...FLEX_PROVIDERS, { provide: ColumnResize, useExisting: CdkColumnResizeFlex }],
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 /**
  * One of two NgModules for use with CdkColumnResize.
  * When using this module, columns are not resizable by default.
  */
 class CdkColumnResizeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: CdkColumnResizeModule, imports: [CdkColumnResize, CdkColumnResizeFlex], exports: [CdkColumnResize, CdkColumnResizeFlex] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkColumnResizeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkColumnResizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.1", ngImport: i0, type: CdkColumnResizeModule, imports: [CdkColumnResize, CdkColumnResizeFlex], exports: [CdkColumnResize, CdkColumnResizeFlex] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkColumnResizeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: CdkColumnResizeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: CdkColumnResizeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CdkColumnResize, CdkColumnResizeFlex],
@@ -557,16 +654,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 /**
  * Can be provided by the host application to enable persistence of column resize state.
  */
 class ColumnSizeStore {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnSizeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnSizeStore }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnSizeStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnSizeStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ColumnSizeStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ColumnSizeStore, decorators: [{
             type: Injectable
         }] });
 
@@ -575,15 +672,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 /** Tracks state of resize events in progress. */
 class ResizeRef {
-    constructor(origin, overlayRef, minWidthPx, maxWidthPx) {
+    constructor(origin, overlayRef, minWidthPx, maxWidthPx, liveUpdates = true) {
         this.origin = origin;
         this.overlayRef = overlayRef;
         this.minWidthPx = minWidthPx;
         this.maxWidthPx = maxWidthPx;
+        this.liveUpdates = liveUpdates;
     }
 }
 
@@ -771,10 +869,10 @@ class Resizable {
             this.elementRef.nativeElement.appendChild(this.inlineHandle);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Resizable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: Resizable, isStandalone: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: Resizable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: Resizable, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Resizable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: Resizable, decorators: [{
             type: Directive
         }] });
 
@@ -783,7 +881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Copyright Google LLC All Rights Reserved.
  *
  * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * found in the LICENSE file at https://angular.dev/license
  */
 // TODO: Take another look at using cdk drag drop. IIRC I ran into a couple
 // good reasons for not using it but I don't remember what they were at this point.
@@ -793,7 +891,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  */
 class ResizeOverlayHandle {
     constructor() {
+        this._renderer = inject(Renderer2);
         this.destroyed = new Subject();
+        this._cumulativeDeltaX = 0;
     }
     ngAfterViewInit() {
         this._listenForMouseEvents();
@@ -804,13 +904,13 @@ class ResizeOverlayHandle {
     }
     _listenForMouseEvents() {
         this.ngZone.runOutsideAngular(() => {
-            fromEvent(this.elementRef.nativeElement, 'mouseenter')
+            this._observableFromEvent(this.elementRef.nativeElement, 'mouseenter')
                 .pipe(mapTo(this.resizeRef.origin.nativeElement), takeUntil(this.destroyed))
                 .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));
-            fromEvent(this.elementRef.nativeElement, 'mouseleave')
+            this._observableFromEvent(this.elementRef.nativeElement, 'mouseleave')
                 .pipe(map(event => event.relatedTarget && closest(event.relatedTarget, HEADER_CELL_SELECTOR)), takeUntil(this.destroyed))
                 .subscribe(cell => this.eventDispatcher.headerCellHovered.next(cell));
-            fromEvent(this.elementRef.nativeElement, 'mousedown')
+            this._observableFromEvent(this.elementRef.nativeElement, 'mousedown')
                 .pipe(takeUntil(this.destroyed))
                 .subscribe(mousedownEvent => {
                 this._dragStarted(mousedownEvent);
@@ -822,15 +922,16 @@ class ResizeOverlayHandle {
         if (mousedownEvent.button !== 0) {
             return;
         }
-        const mouseup = fromEvent(this.document, 'mouseup');
-        const mousemove = fromEvent(this.document, 'mousemove');
-        const escape = fromEvent(this.document, 'keyup').pipe(filter(event => event.keyCode === ESCAPE));
+        const mouseup = this._observableFromEvent(this.document, 'mouseup');
+        const mousemove = this._observableFromEvent(this.document, 'mousemove');
+        const escape = this._observableFromEvent(this.document, 'keyup').pipe(filter(event => event.keyCode === ESCAPE));
         const startX = mousedownEvent.screenX;
         const initialSize = this._getOriginWidth();
         let overlayOffset = 0;
         let originOffset = this._getOriginOffset();
         let size = initialSize;
         let overshot = 0;
+        this._cumulativeDeltaX = 0;
         this.updateResizeActive(true);
         mouseup.pipe(takeUntil(merge(escape, this.destroyed))).subscribe(({ screenX }) => {
             this.styleScheduler.scheduleEnd(() => {
@@ -844,6 +945,12 @@ class ResizeOverlayHandle {
             .pipe(map(({ screenX }) => screenX), startWith(startX), distinctUntilChanged(), pairwise(), takeUntil(merge(mouseup, escape, this.destroyed)))
             .subscribe(([prevX, currX]) => {
             let deltaX = currX - prevX;
+            if (!this.resizeRef.liveUpdates) {
+                this._cumulativeDeltaX += deltaX;
+                const sizeDelta = this._computeNewSize(size, this._cumulativeDeltaX) - size;
+                this._updateOverlayOffset(sizeDelta);
+                return;
+            }
             // If the mouse moved further than the resize was able to match, limit the
             // movement of the overlay to match the actual size and position of the origin.
             if (overshot !== 0) {
@@ -861,14 +968,7 @@ class ResizeOverlayHandle {
                     }
                 }
             }
-            let computedNewSize = size + (this._isLtr() ? deltaX : -deltaX);
-            computedNewSize = Math.min(Math.max(computedNewSize, this.resizeRef.minWidthPx, 0), this.resizeRef.maxWidthPx);
-            this.resizeNotifier.triggerResize.next({
-                columnId: this.columnDef.name,
-                size: computedNewSize,
-                previousSize: size,
-                isStickyColumn: this.columnDef.sticky || this.columnDef.stickyEnd,
-            });
+            this._triggerResize(size, deltaX);
             this.styleScheduler.scheduleEnd(() => {
                 const originNewSize = this._getOriginWidth();
                 const originNewOffset = this._getOriginOffset();
@@ -885,6 +985,19 @@ class ResizeOverlayHandle {
     updateResizeActive(active) {
         this.eventDispatcher.overlayHandleActiveForCell.next(active ? this.resizeRef.origin.nativeElement : null);
     }
+    _triggerResize(startSize, deltaX) {
+        this.resizeNotifier.triggerResize.next({
+            columnId: this.columnDef.name,
+            size: this._computeNewSize(startSize, deltaX),
+            previousSize: startSize,
+            isStickyColumn: this.columnDef.sticky || this.columnDef.stickyEnd,
+        });
+    }
+    _computeNewSize(startSize, deltaX) {
+        let computedNewSize = startSize + (this._isLtr() ? deltaX : -deltaX);
+        computedNewSize = Math.min(Math.max(computedNewSize, this.resizeRef.minWidthPx, 0), this.resizeRef.maxWidthPx);
+        return computedNewSize;
+    }
     _getOriginWidth() {
         return this.resizeRef.origin.nativeElement.offsetWidth;
     }
@@ -900,8 +1013,14 @@ class ResizeOverlayHandle {
     _notifyResizeEnded(size, completedSuccessfully = false) {
         this.updateResizeActive(false);
         this.ngZone.run(() => {
-            const sizeMessage = { columnId: this.columnDef.name, size };
+            const sizeMessage = {
+                columnId: this.columnDef.name,
+                size: this._computeNewSize(size, this._cumulativeDeltaX),
+            };
             if (completedSuccessfully) {
+                if (!this.resizeRef.liveUpdates) {
+                    this._triggerResize(size, this._cumulativeDeltaX);
+                }
                 this.resizeNotifier.resizeCompleted.next(sizeMessage);
             }
             else {
@@ -909,10 +1028,20 @@ class ResizeOverlayHandle {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ResizeOverlayHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.2", type: ResizeOverlayHandle, isStandalone: true, ngImport: i0 }); }
+    _observableFromEvent(element, name) {
+        return new Observable(subscriber => {
+            const handler = (event) => subscriber.next(event);
+            const cleanup = this._renderer.listen(element, name, handler);
+            return () => {
+                cleanup();
+                subscriber.complete();
+            };
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ResizeOverlayHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.1", type: ResizeOverlayHandle, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ResizeOverlayHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: ResizeOverlayHandle, decorators: [{
             type: Directive
         }] });
 
@@ -920,5 +1049,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CdkColumnResize, CdkColumnResizeFlex, CdkColumnResizeModule, CdkFlexTableResizeStrategy, ColumnResize, ColumnResizeNotifier, ColumnResizeNotifierSource, ColumnSizeStore, FLEX_PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER, HeaderRowEventDispatcher, Resizable, ResizeOverlayHandle, ResizeRef, ResizeStrategy, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, TABLE_PROVIDERS, TableLayoutFixedResizeStrategy };
+export { COLUMN_RESIZE_OPTIONS, CdkColumnResize, CdkColumnResizeFlex, CdkColumnResizeModule, CdkFlexTableResizeStrategy, ColumnResize, ColumnResizeNotifier, ColumnResizeNotifierSource, ColumnSizeStore, FLEX_PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER, HeaderRowEventDispatcher, Resizable, ResizeOverlayHandle, ResizeRef, ResizeStrategy, TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, TABLE_PROVIDERS, TableLayoutFixedResizeStrategy, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, _Schedule };
 //# sourceMappingURL=mtxColumnResize.mjs.map