Merge branch 'angular:main' into chip-focus-trap-fix

.stylelintrc.json

@@ -81,7 +81,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-allowed-list": ["px", "%", "deg", "s", "ms", "em", "vh", "vw", "vmin"],
+    "unit-allowed-list": ["px", "%", "deg", "s", "ms", "em", "rem", "vh", "vw", "vmin"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",

CHANGELOG.md

@@ -1,3 +1,21 @@
+<a name="18.1.0-rc.0"></a>
+# 18.1.0-rc.0 "zirconium-zoo" (2024-07-03)
+### material
+| Commit | Type | Description |
+| -- | -- | -- |
+| [674538b77](https://github.com/angular/components/commit/674538b778e75d229ada06d19c362752db3a18cc) | fix | **core:** add fallback if ripples get stuck ([#29323](https://github.com/angular/components/pull/29323)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
+<a name="18.0.6"></a>
+# 18.0.6 "gallium-grape" (2024-07-03)
+### material
+| Commit | Type | Description |
+| -- | -- | -- |
+| [e5c5f151c](https://github.com/angular/components/commit/e5c5f151cc3a5293f629bfa84bcddb0b391cf268) | fix | **core:** add fallback if ripples get stuck ([#29323](https://github.com/angular/components/pull/29323)) |
+
+<!-- CHANGELOG SPLIT MARKER -->
+
 <a name="18.1.0-next.4"></a>
 # 18.1.0-next.4 "plastic-pliers" (2024-06-26)
 ### cdk

package.json

@@ -54,7 +54,7 @@
     "ci-notify-slack-failure": "node --no-warnings=ExperimentalWarning --loader ts-node/esm/transpile-only scripts/circleci/notify-slack-job-failure.mts",
     "prepare": "husky"
   },
-  "version": "18.1.0-next.4",
+  "version": "18.2.0-next.0",
   "dependencies": {
     "@angular/animations": "^18.1.0-next.3",
     "@angular/common": "^18.1.0-next.3",

src/cdk/drag-drop/directives/drag.ts

@@ -30,6 +30,7 @@ import {
   AfterViewInit,
   inject,
   Injector,
+  numberAttribute,
 } from '@angular/core';
 import {coerceElement, coerceNumberProperty} from '@angular/cdk/coercion';
 import {BehaviorSubject, Observable, Observer, Subject, merge} from 'rxjs';
@@ -159,6 +160,13 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
    */
   @Input('cdkDragPreviewContainer') previewContainer: PreviewContainer;
 
+  /**
+   * If the parent of the dragged element has a `scale` transform, it can throw off the
+   * positioning when the user starts dragging. Use this input to notify the CDK of the scale.
+   */
+  @Input({alias: 'cdkDragScale', transform: numberAttribute})
+  scale: number = 1;
+
   /** Emits when the user starts dragging the item. */
   @Output('cdkDragStarted') readonly started: EventEmitter<CdkDragStart> =
     new EventEmitter<CdkDragStart>();
@@ -261,6 +269,11 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     if (dropContainer) {
       this._dragRef._withDropContainer(dropContainer._dropListRef);
       dropContainer.addItem(this);
+
+      // The drop container reads this so we need to sync it here.
+      dropContainer._dropListRef.beforeStarted.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        this._dragRef.scale = this.scale;
+      });
     }
 
     this._syncInputs(this._dragRef);
@@ -448,6 +461,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
 
         ref.disabled = this.disabled;
         ref.lockAxis = this.lockAxis;
+        ref.scale = this.scale;
         ref.dragStartDelay =
           typeof dragStartDelay === 'object' && dragStartDelay
             ? dragStartDelay

src/cdk/drag-drop/directives/drop-list-shared.spec.ts

@@ -5006,6 +5006,7 @@ const DROP_ZONE_FIXTURE_TEMPLATE = `
       [cdkDragBoundary]="boundarySelector"
       [cdkDragPreviewClass]="previewClass"
       [cdkDragPreviewContainer]="previewContainer"
+      [cdkDragScale]="scale"
       [style.height.px]="item.height"
       [style.margin-bottom.px]="item.margin"
       (cdkDragStarted)="startedSpy($event)"
@@ -5041,6 +5042,7 @@ export class DraggableInDropZone implements AfterViewInit {
   previewContainer: PreviewContainer = 'global';
   dropDisabled = signal(false);
   dropLockAxis = signal<DragAxis | undefined>(undefined);
+  scale = 1;
 
   constructor(protected _elementRef: ElementRef) {}
 

src/cdk/drag-drop/directives/single-axis-drop-list.spec.ts

@@ -311,4 +311,29 @@ describe('Single-axis drop list', () => {
 
     dispatchMouseEvent(document, 'mouseup');
   }));
+
+  it('should lay out the elements correctly when scaled', fakeAsync(() => {
+    const fixture = createComponent(DraggableInDropZone);
+    fixture.componentInstance.scale = 0.5;
+    fixture.detectChanges();
+
+    const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement);
+    const {top, left} = items[0].getBoundingClientRect();
+
+    startDraggingViaMouse(fixture, items[0], left, top);
+
+    const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement;
+    const target = items[1];
+    const targetRect = target.getBoundingClientRect();
+
+    dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top + 5);
+    fixture.detectChanges();
+
+    expect(placeholder.style.transform).toBe(`translate3d(0px, ${ITEM_HEIGHT * 2}px, 0px)`);
+    expect(target.style.transform).toBe(`translate3d(0px, ${-ITEM_HEIGHT * 2}px, 0px)`);
+
+    dispatchMouseEvent(document, 'mouseup');
+    fixture.detectChanges();
+    flush();
+  }));
 });

src/cdk/drag-drop/directives/standalone-drag.spec.ts

@@ -1470,34 +1470,41 @@ describe('Standalone CdkDrag', () => {
     cleanup();
   }));
 
-  it(
-    'should update the free drag position if the user moves their pointer after the page ' +
-      'is scrolled',
-    fakeAsync(() => {
-      const fixture = createComponent(StandaloneDraggable);
-      fixture.detectChanges();
+  it('should update the free drag position if the user moves their pointer after the page is scrolled', fakeAsync(() => {
+    const fixture = createComponent(StandaloneDraggable);
+    fixture.detectChanges();
 
-      const cleanup = makeScrollable();
-      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+    const cleanup = makeScrollable();
+    const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
-      expect(dragElement.style.transform).toBeFalsy();
-      startDraggingViaMouse(fixture, dragElement, 0, 0);
-      dispatchMouseEvent(document, 'mousemove', 50, 100);
-      fixture.detectChanges();
+    expect(dragElement.style.transform).toBeFalsy();
+    startDraggingViaMouse(fixture, dragElement, 0, 0);
+    dispatchMouseEvent(document, 'mousemove', 50, 100);
+    fixture.detectChanges();
 
-      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+    expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
 
-      scrollTo(0, 500);
-      dispatchFakeEvent(document, 'scroll');
-      fixture.detectChanges();
-      dispatchMouseEvent(document, 'mousemove', 50, 200);
-      fixture.detectChanges();
+    scrollTo(0, 500);
+    dispatchFakeEvent(document, 'scroll');
+    fixture.detectChanges();
+    dispatchMouseEvent(document, 'mousemove', 50, 200);
+    fixture.detectChanges();
 
-      expect(dragElement.style.transform).toBe('translate3d(50px, 700px, 0px)');
+    expect(dragElement.style.transform).toBe('translate3d(50px, 700px, 0px)');
 
-      cleanup();
-    }),
-  );
+    cleanup();
+  }));
+
+  it('should account for scale when moving the element', fakeAsync(() => {
+    const fixture = createComponent(StandaloneDraggable);
+    fixture.componentInstance.scale = 0.5;
+    fixture.detectChanges();
+    const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+    expect(dragElement.style.transform).toBeFalsy();
+    dragElementViaMouse(fixture, dragElement, 50, 100);
+    expect(dragElement.style.transform).toBe('translate3d(100px, 200px, 0px)');
+  }));
 
   describe('with a handle', () => {
     it('should not be able to drag the entire element if it has a handle', fakeAsync(() => {
@@ -1718,6 +1725,7 @@ describe('Standalone CdkDrag', () => {
         [cdkDragFreeDragPosition]="freeDragPosition"
         [cdkDragDisabled]="dragDisabled()"
         [cdkDragLockAxis]="dragLockAxis()"
+        [cdkDragScale]="scale"
         (cdkDragStarted)="startedSpy($event)"
         (cdkDragReleased)="releasedSpy($event)"
         (cdkDragEnded)="endedSpy($event)"
@@ -1745,6 +1753,7 @@ class StandaloneDraggable {
   freeDragPosition?: {x: number; y: number};
   dragDisabled = signal(false);
   dragLockAxis = signal<DragAxis | undefined>(undefined);
+  scale = 1;
 }
 
 @Component({

src/cdk/drag-drop/drag-ref.ts

@@ -288,6 +288,12 @@ export class DragRef<T = any> {
   /** Class to be added to the preview element. */
   previewClass: string | string[] | undefined;
 
+  /**
+   * If the parent of the dragged element has a `scale` transform, it can throw off the
+   * positioning when the user starts dragging. Use this input to notify the CDK of the scale.
+   */
+  scale: number = 1;
+
   /** Whether starting to drag this element is disabled. */
   get disabled(): boolean {
     return this._disabled || !!(this._dropContainer && this._dropContainer.disabled);
@@ -1288,7 +1294,8 @@ export class DragRef<T = any> {
    * @param y New transform value along the Y axis.
    */
   private _applyRootElementTransform(x: number, y: number) {
-    const transform = getTransform(x, y);
+    const scale = 1 / this.scale;
+    const transform = getTransform(x * scale, y * scale);
     const styles = this._rootElement.style;
 
     // Cache the previous transform amount only after the first drag sequence, because

src/cdk/drag-drop/resets.scss

@@ -6,3 +6,10 @@
     color: inherit;
   }
 }
+
+// These elements get `pointer-events: none` when they're created, but any descendants might
+// override it back to `auto`. Reset them here since they can affect the pointer position detection.
+.cdk-drag-placeholder *,
+.cdk-drag-preview * {
+  pointer-events: none !important;
+}

src/cdk/drag-drop/sorting/single-axis-sort-strategy.ts

@@ -128,6 +128,8 @@ export class SingleAxisSortStrategy implements DropListSortStrategy {
       // Update the offset to reflect the new position.
       sibling.offset += offset;
 
+      const transformAmount = Math.round(sibling.offset * (1 / sibling.drag.scale));
+
       // Since we're moving the items with a `transform`, we need to adjust their cached
       // client rects to reflect their new position, as well as swap their positions in the cache.
       // Note that we shouldn't use `getBoundingClientRect` here to update the cache, because the
@@ -136,13 +138,13 @@ export class SingleAxisSortStrategy implements DropListSortStrategy {
         // Round the transforms since some browsers will
         // blur the elements, for sub-pixel transforms.
         elementToOffset.style.transform = combineTransforms(
-          `translate3d(${Math.round(sibling.offset)}px, 0, 0)`,
+          `translate3d(${transformAmount}px, 0, 0)`,
           sibling.initialTransform,
         );
         adjustDomRect(sibling.clientRect, 0, offset);
       } else {
         elementToOffset.style.transform = combineTransforms(
-          `translate3d(0, ${Math.round(sibling.offset)}px, 0)`,
+          `translate3d(0, ${transformAmount}px, 0)`,
           sibling.initialTransform,
         );
         adjustDomRect(sibling.clientRect, offset, 0);

src/cdk/listbox/listbox.md

@@ -120,23 +120,6 @@ The CDK Listbox supports both template driven forms and reactive forms.
   "region": "listbox"
 }) -->
 
-#### Forms validation
-
-The CDK listbox integrates with Angular's form validation API and has the following built-in
-validation errors:
-
-- `cdkListboxUnexpectedOptionValues` - Raised when the bound value contains values that do not
-  appear as option value in the listbox. The validation error contains a `values` property that
-  lists the invalid values
-- `cdkListboxUnexpectedMultipleValues` - Raised when a single-selection listbox is bound to a value
-  containing multiple selected options.
-
-<!-- example({
-  "example": "cdk-listbox-forms-validation",
-  "file": "cdk-listbox-forms-validation-example.ts",
-  "region": "errors"
-}) -->
-
 ### Disabling options
 
 You can disable options for selection by setting `cdkOptionDisabled`.

src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html

@@ -20,8 +20,5 @@
 }
 <p>
   Your zodiac sign is: <strong>{{signCtrl.value | json}}</strong>&nbsp;
-  <button (click)="signCtrl.setValue(['Cat'])">Set: Cat</button>&nbsp;
-  <button (click)="signCtrl.setValue(['Dragon', 'Snake'])">Set: Dragon, Snake</button>&nbsp;
-  <button (click)="signCtrl.setValue(['Cat', 'Rat'])">Set: Cat, Rat</button>&nbsp;
   <button (click)="signCtrl.setValue([])">Clear</button>
 </p>

src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts

@@ -45,13 +45,7 @@ export class CdkListboxFormsValidationExample {
     if (this.signCtrl.hasError('required')) {
       errors.push('You must enter your zodiac sign');
     }
-    if (this.signCtrl.hasError('cdkListboxUnexpectedMultipleValues')) {
-      errors.push('You can only select one zodiac sign');
-    }
-    if (this.signCtrl.hasError('cdkListboxUnexpectedOptionValues')) {
-      const invalidOptions = this.signCtrl.getError('cdkListboxUnexpectedOptionValues').values;
-      errors.push(`You entered an invalid zodiac sign: ${invalidOptions[0]}`);
-    }
+
     return errors.length ? errors : null;
   }
   // #enddocregion errors

src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.ts

@@ -16,7 +16,7 @@ import {MatInputModule} from '@angular/material/input';
 export class FormFieldPrefixSuffixExample {
   hide = signal(true);
   clickEvent(event: MouseEvent) {
-    this.hide.set(!this.hide);
+    this.hide.set(!this.hide());
     event.stopPropagation();
   }
 }

src/components-examples/material/table/table-http/table-http-example.css

@@ -35,9 +35,9 @@ table {
 /* Column Widths */
 .mat-column-number,
 .mat-column-state {
-  max-width: 64px;
+  width: 64px;
 }
 
 .mat-column-created {
-  max-width: 124px;
+  width: 124px;
 }

src/material/button/_button-base.scss

@@ -1,8 +1,5 @@
-@use '@material/touch-target' as mdc-touch-target;
-
 @use '../core/tokens/token-utils';
 @use '../core/style/layout-common';
-@use '../core/mdc-helpers/mdc-helpers';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
 // content for the state container's ::before and ::after so that they can be given a background
@@ -126,9 +123,19 @@
   // the button itself would require us to wrap it in another div. See:
   // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
   .mat-mdc-button-touch-target {
-    @include mdc-touch-target.touch-target(
-      $set-width: $is-square,
-      $query: mdc-helpers.$mdc-base-styles-query);
+    position: absolute;
+    top: 50%;
+    height: 48px;
+
+    @if $is-square {
+      left: 50%;
+      width: 48px;
+      transform: translate(-50%, -50%);
+    } @else {
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+    }
 
     @include token-utils.use-tokens($prefix, $slots) {
       @include token-utils.create-token-slot(display, touch-target-display);