Merge branch 'angular:main' into main

Author: simonkovtyk

package.json

@@ -73,7 +73,7 @@
     "@angular-devkit/build-angular": "^19.0.0-next.10",
     "@angular-devkit/core": "^19.0.0-next.10",
     "@angular-devkit/schematics": "^19.0.0-next.10",
-    "@angular/bazel": "https://github.com/angular/bazel-builds.git#9e6140d1eef8ddf7113d00738f603e9cc3c310f1",
+    "@angular/bazel": "https://github.com/angular/bazel-builds.git#d9a8ea4f9e62cb475eff89519426a38631b2704d",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#74e0e7b090c6e16056290836b2d936ca7820b86f",
     "@angular/build": "^19.0.0-next.10",
     "@angular/cli": "^19.0.0-next.10",

src/bazel-tsconfig-build.json

@@ -21,8 +21,6 @@
     "importHelpers": true,
     "strictBindCallApply": true,
     "esModuleInterop": true,
-    // Keep the below in sync with https://github.com/angular/angular/blob/f9b821f07d8dba57a6a7e5fc127dc096247424aa/packages/bazel/src/ng_module/ng_module.bzl#L214
-    "useDefineForClassFields": false,
     "newLine": "lf",
     // Bazel either uses "umd" or "esnext". We replicate this here for IDE support.
     // https://github.com/bazelbuild/rules_typescript/blob/master/internal/common/tsconfig.bzl#L199

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -403,6 +403,7 @@ describe('CDK Popover Edit', () => {
         });
         fixture = TestBed.createComponent<BaseTestComponent>(componentClass);
         component = fixture.componentInstance;
+        component.renderData();
         fixture.detectChanges();
         tick(10);
         fixture.detectChanges();

src/cdk-experimental/selection/selection-module.ts

@@ -7,7 +7,6 @@
  */
 
 import {CdkTableModule} from '@angular/cdk/table';
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 
 import {CdkRowSelection} from './row-selection';
@@ -18,7 +17,6 @@ import {CdkSelectionToggle} from './selection-toggle';
 
 @NgModule({
   imports: [
-    CommonModule,
     CdkTableModule,
     CdkSelection,
     CdkSelectionToggle,

src/cdk/table/sticky-styler.ts

@@ -16,6 +16,12 @@ import {StickyPositioningListener} from './sticky-position-listener';
 
 export type StickyDirection = 'top' | 'bottom' | 'left' | 'right';
 
+interface UpdateStickyColumnsParams {
+  rows: HTMLElement[];
+  stickyStartStates: boolean[];
+  stickyEndStates: boolean[];
+}
+
 /**
  * List of all possible directions that can be used for sticky positioning.
  * @docs-private
@@ -27,6 +33,12 @@ export const STICKY_DIRECTIONS: StickyDirection[] = ['top', 'bottom', 'left', 'r
  * @docs-private
  */
 export class StickyStyler {
+  private _elemSizeCache = new WeakMap<HTMLElement, {width: number; height: number}>();
+  private _resizeObserver = globalThis?.ResizeObserver
+    ? new globalThis.ResizeObserver(entries => this._updateCachedSizes(entries))
+    : null;
+  private _updatedStickyColumnsParamsToReplay: UpdateStickyColumnsParams[] = [];
+  private _stickyColumnsReplayTimeout: number | null = null;
   private _cachedCellWidths: number[] = [];
   private readonly _borderCellCss: Readonly<{[d in StickyDirection]: string}>;
 
@@ -68,6 +80,10 @@ export class StickyStyler {
    * @param stickyDirections The directions that should no longer be set as sticky on the rows.
    */
   clearStickyPositioning(rows: HTMLElement[], stickyDirections: StickyDirection[]) {
+    if (stickyDirections.includes('left') || stickyDirections.includes('right')) {
+      this._removeFromStickyColumnReplayQueue(rows);
+    }
+
     const elementsToClear: HTMLElement[] = [];
     for (const row of rows) {
       // If the row isn't an element (e.g. if it's an `ng-container`),
@@ -100,13 +116,23 @@ export class StickyStyler {
    *     in this index position should be stuck to the end of the row.
    * @param recalculateCellWidths Whether the sticky styler should recalculate the width of each
    *     column cell. If `false` cached widths will be used instead.
+   * @param replay Whether to enqueue this call for replay after a ResizeObserver update.
    */
   updateStickyColumns(
     rows: HTMLElement[],
     stickyStartStates: boolean[],
     stickyEndStates: boolean[],
     recalculateCellWidths = true,
+    replay = true,
   ) {
+    if (replay) {
+      this._updateStickyColumnReplayQueue({
+        rows: [...rows],
+        stickyStartStates: [...stickyStartStates],
+        stickyEndStates: [...stickyEndStates],
+      });
+    }
+
     if (
       !rows.length ||
       !this._isBrowser ||
@@ -213,7 +239,7 @@ export class StickyStyler {
           ? (Array.from(row.children) as HTMLElement[])
           : [row];
 
-        const height = row.getBoundingClientRect().height;
+        const height = this._retrieveElementSize(row).height;
         stickyOffset += height;
         stickyCellHeights[rowIndex] = height;
       }
@@ -366,8 +392,8 @@ export class StickyStyler {
     const cellWidths: number[] = [];
     const firstRowCells = row.children;
     for (let i = 0; i < firstRowCells.length; i++) {
-      let cell: HTMLElement = firstRowCells[i] as HTMLElement;
-      cellWidths.push(cell.getBoundingClientRect().width);
+      const cell = firstRowCells[i] as HTMLElement;
+      cellWidths.push(this._retrieveElementSize(cell).width);
     }
 
     this._cachedCellWidths = cellWidths;
@@ -411,4 +437,103 @@ export class StickyStyler {
 
     return positions;
   }
+
+  /**
+   * Retreives the most recently observed size of the specified element from the cache, or
+   * meaures it directly if not yet cached.
+   */
+  private _retrieveElementSize(element: HTMLElement): {width: number; height: number} {
+    const cachedSize = this._elemSizeCache.get(element);
+    if (cachedSize) {
+      return cachedSize;
+    }
+
+    const clientRect = element.getBoundingClientRect();
+    const size = {width: clientRect.width, height: clientRect.height};
+
+    if (!this._resizeObserver) {
+      return size;
+    }
+
+    this._elemSizeCache.set(element, size);
+    this._resizeObserver.observe(element, {box: 'border-box'});
+    return size;
+  }
+
+  /**
+   * Conditionally enqueue the requested sticky update and clear previously queued updates
+   * for the same rows.
+   */
+  private _updateStickyColumnReplayQueue(params: UpdateStickyColumnsParams) {
+    this._removeFromStickyColumnReplayQueue(params.rows);
+
+    // No need to replay if a flush is pending.
+    if (this._stickyColumnsReplayTimeout) {
+      return;
+    }
+
+    this._updatedStickyColumnsParamsToReplay.push(params);
+  }
+
+  /** Remove updates for the specified rows from the queue. */
+  private _removeFromStickyColumnReplayQueue(rows: HTMLElement[]) {
+    const rowsSet = new Set(rows);
+    for (const update of this._updatedStickyColumnsParamsToReplay) {
+      update.rows = update.rows.filter(row => !rowsSet.has(row));
+    }
+    this._updatedStickyColumnsParamsToReplay = this._updatedStickyColumnsParamsToReplay.filter(
+      update => !!update.rows.length,
+    );
+  }
+
+  /** Update _elemSizeCache with the observed sizes. */
+  private _updateCachedSizes(entries: ResizeObserverEntry[]) {
+    let needsColumnUpdate = false;
+    for (const entry of entries) {
+      const newEntry = entry.borderBoxSize?.length
+        ? {
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize,
+          }
+        : {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+          };
+
+      if (
+        newEntry.width !== this._elemSizeCache.get(entry.target as HTMLElement)?.width &&
+        isCell(entry.target)
+      ) {
+        needsColumnUpdate = true;
+      }
+
+      this._elemSizeCache.set(entry.target as HTMLElement, newEntry);
+    }
+
+    if (needsColumnUpdate && this._updatedStickyColumnsParamsToReplay.length) {
+      if (this._stickyColumnsReplayTimeout) {
+        clearTimeout(this._stickyColumnsReplayTimeout);
+      }
+
+      this._stickyColumnsReplayTimeout = setTimeout(() => {
+        for (const update of this._updatedStickyColumnsParamsToReplay) {
+          this.updateStickyColumns(
+            update.rows,
+            update.stickyStartStates,
+            update.stickyEndStates,
+            true,
+            false,
+          );
+        }
+        this._updatedStickyColumnsParamsToReplay = [];
+        this._stickyColumnsReplayTimeout = null;
+      }, 0);
+    }
+  }
+}
+
+function isCell(element: Element) {
+  return ['cdk-cell', 'cdk-header-cell', 'cdk-footer-cell'].some(klass =>
+    element.classList.contains(klass),
+  );
 }

src/material-experimental/selection/selection-module.ts

@@ -8,7 +8,6 @@
 
 // TODO(yifange): Move the table-specific code to a separate module from the other selection
 // behaviors once we move it out of experimental.
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatTableModule} from '@angular/material/table';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -20,7 +19,6 @@ import {MatRowSelection} from './row-selection';
 
 @NgModule({
   imports: [
-    CommonModule,
     MatTableModule,
     MatCheckboxModule,
     MatSelectAll,

src/material/autocomplete/module.ts

@@ -8,7 +8,6 @@
 
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatOptionModule} from '@angular/material/core';
-import {CommonModule} from '@angular/common';
 import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {MatAutocomplete} from './autocomplete';
@@ -23,7 +22,6 @@ import {MatAutocompleteOrigin} from './autocomplete-origin';
     OverlayModule,
     MatOptionModule,
     MatCommonModule,
-    CommonModule,
     MatAutocomplete,
     MatAutocompleteTrigger,
     MatAutocompleteOrigin,

src/material/button/button-base.ts

@@ -215,6 +215,8 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
 
 /** Shared host configuration for buttons using the `<a>` tag. */
 export const MAT_ANCHOR_HOST = {
+  // Note that this is basically a noop on anchors,
+  // but it appears that some internal apps depend on it.
   '[attr.disabled]': '_getDisabledAttribute()',
   '[class.mat-mdc-button-disabled]': 'disabled',
   '[class.mat-mdc-button-disabled-interactive]': 'disabledInteractive',
@@ -224,7 +226,7 @@ export const MAT_ANCHOR_HOST = {
   // consistency with the `mat-button` applied on native buttons where even
   // though they have an index, they're not tabbable.
   '[attr.tabindex]': 'disabled && !disabledInteractive ? -1 : tabIndex',
-  '[attr.aria-disabled]': '_getDisabledAttribute()',
+  '[attr.aria-disabled]': '_getAriaDisabled()',
   // MDC automatically applies the primary theme color to the button, but we want to support
   // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
   // select and style this "theme".
@@ -267,6 +269,9 @@ export class MatAnchorBase extends MatButtonBase implements OnInit, OnDestroy {
   };
 
   protected override _getAriaDisabled() {
-    return this.ariaDisabled == null ? this.disabled : this.ariaDisabled;
+    if (this.ariaDisabled != null) {
+      return this.ariaDisabled;
+    }
+    return this.disabled || null;
   }
 }

src/material/button/button.spec.ts

@@ -316,13 +316,15 @@ describe('MatButton', () => {
   describe('interactive disabled buttons', () => {
     let fixture: ComponentFixture<TestApp>;
     let button: HTMLButtonElement;
+    let anchor: HTMLAnchorElement;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(TestApp);
       fixture.componentInstance.isDisabled = true;
       fixture.changeDetectorRef.markForCheck();
       fixture.detectChanges();
-      button = fixture.debugElement.query(By.css('button'))!.nativeElement;
+      button = fixture.nativeElement.querySelector('button');
+      anchor = fixture.nativeElement.querySelector('a');
     });
 
     it('should set a class when allowing disabled interactivity', () => {
@@ -354,6 +356,29 @@ describe('MatButton', () => {
 
       expect(button.hasAttribute('disabled')).toBe(false);
     });
+
+    it('should set aria-disabled on anchor when disabledInteractive is enabled', () => {
+      fixture.componentInstance.isDisabled = false;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      expect(anchor.hasAttribute('aria-disabled')).toBe(false);
+      expect(anchor.hasAttribute('disabled')).toBe(false);
+      expect(anchor.classList).not.toContain('mat-mdc-button-disabled-interactive');
+
+      fixture.componentInstance.isDisabled = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      expect(anchor.getAttribute('aria-disabled')).toBe('true');
+      expect(anchor.hasAttribute('disabled')).toBe(true);
+      expect(anchor.classList).not.toContain('mat-mdc-button-disabled-interactive');
+
+      fixture.componentInstance.disabledInteractive = true;
+      fixture.changeDetectorRef.markForCheck();
+      fixture.detectChanges();
+      expect(anchor.getAttribute('aria-disabled')).toBe('true');
+      expect(anchor.hasAttribute('disabled')).toBe(false);
+      expect(anchor.classList).toContain('mat-mdc-button-disabled-interactive');
+    });
   });
 });
 

src/material/card/module.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
 import {
@@ -44,7 +43,7 @@ const CARD_DIRECTIVES = [
 ];
 
 @NgModule({
-  imports: [MatCommonModule, CommonModule, ...CARD_DIRECTIVES],
+  imports: [MatCommonModule, ...CARD_DIRECTIVES],
   exports: [CARD_DIRECTIVES, MatCommonModule],
 })
 export class MatCardModule {}