@angular/material 13.2.4 → 13.3.0

package/autocomplete/autocomplete-trigger.d.ts

@@ -143,6 +143,7 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     _handleKeydown(event: KeyboardEvent): void;
     _handleInput(event: KeyboardEvent): void;
     _handleFocus(): void;
+    _handleClick(): void;
     /**
      * In "auto" mode, the label will animate down as soon as focus is lost.
      * This causes the value to jump when selecting an option with the mouse.

package/badge/_badge-theme.scss

@@ -102,6 +102,14 @@ $_badge-structure-emitted: false !default;
     position: relative;
   }
 
+  // The badge should make sure its host is overflow visible so that the badge content
+  // can be rendered outside of the element. Some components such as <mat-icon> explicitly
+  // style `overflow: hidden` so this requires extra specificity so that it does not
+  // depend on style load order.
+  .mat-badge.mat-badge {
+    overflow: visible;
+  }
+
   .mat-badge-hidden {
     .mat-badge-content {
       display: none;

package/button-toggle/_button-toggle-theme.scss

@@ -11,6 +11,16 @@
   $foreground: map.get($config, foreground);
   $background: map.get($config, background);
   $divider-color: theming.get-color-from-palette($foreground, divider);
+  $theme-divider-color: map.get($foreground, divider);
+
+  // By default the theme usually has an rgba color for the dividers, which can
+  // stack up with the background of a button toggle. This can cause the border
+  // of a selected toggle to look different from an deselected one. We use a solid
+  // color to ensure that the border always stays the same.
+  $divider-color: if(type-of($theme-divider-color) == color,
+    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),
+    $theme-divider-color
+  );
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {

package/checkbox/_checkbox-theme.scss

@@ -71,7 +71,7 @@
     }
 
     .mat-checkbox-label {
-      color: theming.get-color-from-palette($foreground, secondary-text);
+      color: theming.get-color-from-palette($foreground, disabled);
     }
   }
 

package/core/theming/_theming.scss

@@ -437,3 +437,12 @@ $_emitted-density: () !default;
     color: $theme-or-color-config
   ));
 }
+
+
+// Approximates an rgba color into a solid hex color, given a background color.
+@function private-rgba-to-hex($color, $background-color) {
+  // We convert the rgba color into a solid one by taking the opacity from the rgba
+  // value and using it to determine the percentage of the background to put
+  // into foreground when mixing the colors together.
+  @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%);
+}

package/datepicker/calendar-body.d.ts

@@ -94,7 +94,28 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
     ngOnDestroy(): void;
     /** Returns whether a cell is active. */
     _isActiveCell(rowIndex: number, colIndex: number): boolean;
-    /** Focuses the active cell after the microtask queue is empty. */
+    /**
+     * Focuses the active cell after the microtask queue is empty.
+     *
+     * Adding a 0ms setTimeout seems to fix Voiceover losing focus when pressing PageUp/PageDown
+     * (issue #24330).
+     *
+     * Determined a 0ms by gradually increasing duration from 0 and testing two use cases with screen
+     * reader enabled:
+     *
+     * 1. Pressing PageUp/PageDown repeatedly with pausing between each key press.
+     * 2. Pressing and holding the PageDown key with repeated keys enabled.
+     *
+     * Test 1 worked roughly 95-99% of the time with 0ms and got a little bit better as the duration
+     * increased. Test 2 got slightly better until the duration was long enough to interfere with
+     * repeated keys. If the repeated key speed was faster than the timeout duration, then pressing
+     * and holding pagedown caused the entire page to scroll.
+     *
+     * Since repeated key speed can verify across machines, determined that any duration could
+     * potentially interfere with repeated keys. 0ms would be best because it almost entirely
+     * eliminates the focus being lost in Voiceover (#24330) without causing unintended side effects.
+     * Adding delay also complicates writing tests.
+     */
     _focusActiveCell(movePreview?: boolean): void;
     /** Gets whether a value is the start of the main range. */
     _isRangeStart(value: number): boolean;

package/dialog/dialog-config.d.ts

@@ -81,6 +81,8 @@ export declare class MatDialogConfig<D = any> {
      * previously-focused element, after it's closed.
      */
     restoreFocus?: boolean;
+    /** Whether to wait for the opening animation to finish before trapping focus. */
+    delayFocusTrap?: boolean;
     /** Scroll strategy to be used for the dialog. */
     scrollStrategy?: ScrollStrategy;
     /**

package/dialog/dialog-container.d.ts

@@ -98,10 +98,6 @@ export declare abstract class _MatDialogContainerBase extends BasePortalOutlet {
     protected _trapFocus(): void;
     /** Restores focus to the element that was focused before the dialog opened. */
     protected _restoreFocus(): void;
-    /** Sets up the focus trap. */
-    private _setupFocusTrap;
-    /** Captures the element that was focused before the dialog was opened. */
-    private _capturePreviouslyFocusedElement;
     /** Focuses the dialog container. */
     private _focusDialogContainer;
     /** Returns whether focus is inside the dialog. */
@@ -123,6 +119,7 @@ export declare class MatDialogContainer extends _MatDialogContainerBase {
     _onAnimationStart({ toState, totalTime }: AnimationEvent): void;
     /** Starts the dialog exit animation. */
     _startExitAnimation(): void;
+    _initializeWithAttachedContent(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never>;
 }

package/dialog/dialog.d.ts

@@ -36,15 +36,11 @@ export declare abstract class _MatDialogBase<C extends _MatDialogContainerBase>
     private _dialogRefConstructor;
     private _dialogContainerType;
     private _dialogDataToken;
-    private _animationMode?;
     private _openDialogsAtThisLevel;
     private readonly _afterAllClosedAtThisLevel;
     private readonly _afterOpenedAtThisLevel;
     private _ariaHiddenElements;
     private _scrollStrategy;
-    private _dialogAnimatingOpen;
-    private _animationStateSubscriptions;
-    private _lastDialogRef;
     /** Keeps track of the currently-open dialogs. */
     get openDialogs(): MatDialogRef<any>[];
     /** Stream that emits when a dialog has been opened. */
@@ -55,7 +51,12 @@ export declare abstract class _MatDialogBase<C extends _MatDialogContainerBase>
      * Will emit on subscribe if there are no open dialogs to begin with.
      */
     readonly afterAllClosed: Observable<void>;
-    constructor(_overlay: Overlay, _injector: Injector, _defaultOptions: MatDialogConfig | undefined, _parentDialog: _MatDialogBase<C> | undefined, _overlayContainer: OverlayContainer, scrollStrategy: any, _dialogRefConstructor: Type<MatDialogRef<any>>, _dialogContainerType: Type<C>, _dialogDataToken: InjectionToken<any>, _animationMode?: "NoopAnimations" | "BrowserAnimations" | undefined);
+    constructor(_overlay: Overlay, _injector: Injector, _defaultOptions: MatDialogConfig | undefined, _parentDialog: _MatDialogBase<C> | undefined, _overlayContainer: OverlayContainer, scrollStrategy: any, _dialogRefConstructor: Type<MatDialogRef<any>>, _dialogContainerType: Type<C>, _dialogDataToken: InjectionToken<any>, 
+    /**
+     * @deprecated No longer used. To be removed.
+     * @breaking-change 14.0.0
+     */
+    _animationMode?: 'NoopAnimations' | 'BrowserAnimations');
     /**
      * Opens a modal dialog containing the given component.
      * @param component Type of the component to load into the dialog.
@@ -142,7 +143,12 @@ export declare class MatDialog extends _MatDialogBase<MatDialogContainer> {
      * @deprecated `_location` parameter to be removed.
      * @breaking-change 10.0.0
      */
-    location: Location, defaultOptions: MatDialogConfig, scrollStrategy: any, parentDialog: MatDialog, overlayContainer: OverlayContainer, animationMode?: 'NoopAnimations' | 'BrowserAnimations');
+    location: Location, defaultOptions: MatDialogConfig, scrollStrategy: any, parentDialog: MatDialog, overlayContainer: OverlayContainer, 
+    /**
+     * @deprecated No longer used. To be removed.
+     * @breaking-change 14.0.0
+     */
+    animationMode?: 'NoopAnimations' | 'BrowserAnimations');
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialog, [null, null, { optional: true; }, { optional: true; }, null, { optional: true; skipSelf: true; }, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatDialog>;
 }

package/dialog/testing/dialog-opener.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @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
+ */
+import { ComponentType } from '@angular/cdk/overlay';
+import { OnDestroy } from '@angular/core';
+import { _MatDialogBase, _MatDialogContainerBase, MatDialog, MatDialogConfig, MatDialogContainer, MatDialogRef } from '@angular/material/dialog';
+/** Base class for a component that immediately opens a dialog when created. */
+export declare class _MatTestDialogOpenerBase<C extends _MatDialogContainerBase, T, R> implements OnDestroy {
+    dialog: _MatDialogBase<C>;
+    /** Component that should be opened with the MatDialog `open` method. */
+    protected static component: ComponentType<unknown> | undefined;
+    /** Config that should be provided to the MatDialog `open` method. */
+    protected static config: MatDialogConfig | undefined;
+    /** MatDialogRef returned from the MatDialog `open` method. */
+    dialogRef: MatDialogRef<T, R>;
+    /** Data passed to the `MatDialog` close method. */
+    closedResult: R | undefined;
+    private readonly _afterClosedSubscription;
+    constructor(dialog: _MatDialogBase<C>);
+    ngOnDestroy(): void;
+}
+/** Test component that immediately opens a dialog when created. */
+export declare class MatTestDialogOpener<T = unknown, R = unknown> extends _MatTestDialogOpenerBase<MatDialogContainer, T, R> {
+    constructor(dialog: MatDialog);
+    /** Static method that prepares this class to open the provided component. */
+    static withComponent<T = unknown, R = unknown>(component: ComponentType<T>, config?: MatDialogConfig): ComponentType<MatTestDialogOpener<T, R>>;
+}
+export declare class MatTestDialogOpenerModule {
+}

package/dialog/testing/public-api.d.ts

@@ -7,3 +7,4 @@
  */
 export * from './dialog-harness';
 export * from './dialog-harness-filters';
+export * from './dialog-opener';

package/esm2020/autocomplete/autocomplete-module.mjs

@@ -16,17 +16,17 @@ import { MatAutocompleteOrigin } from './autocomplete-origin';
 import * as i0 from "@angular/core";
 export class MatAutocompleteModule {
 }
-MatAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatAutocompleteModule, declarations: [MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin], imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule], exports: [MatAutocomplete,
+MatAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MatAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatAutocompleteModule, declarations: [MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin], imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule], exports: [MatAutocomplete,
         MatAutocompleteTrigger,
         MatAutocompleteOrigin,
         CdkScrollableModule,
         MatOptionModule,
         MatCommonModule] });
-MatAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [[OverlayModule, MatOptionModule, MatCommonModule, CommonModule], CdkScrollableModule,
+MatAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [[OverlayModule, MatOptionModule, MatCommonModule, CommonModule], CdkScrollableModule,
         MatOptionModule,
         MatCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule],

package/esm2020/autocomplete/autocomplete-origin.mjs

@@ -15,9 +15,9 @@ export class _MatAutocompleteOriginBase {
         this.elementRef = elementRef;
     }
 }
-_MatAutocompleteOriginBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _MatAutocompleteOriginBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-_MatAutocompleteOriginBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: _MatAutocompleteOriginBase, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: _MatAutocompleteOriginBase, decorators: [{
+_MatAutocompleteOriginBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: _MatAutocompleteOriginBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+_MatAutocompleteOriginBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: _MatAutocompleteOriginBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: _MatAutocompleteOriginBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 /**
@@ -26,9 +26,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  */
 export class MatAutocompleteOrigin extends _MatAutocompleteOriginBase {
 }
-MatAutocompleteOrigin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatAutocompleteOrigin, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MatAutocompleteOrigin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+MatAutocompleteOrigin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatAutocompleteOrigin, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MatAutocompleteOrigin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',