@angular/material 14.0.0-next.1 → 14.0.0-next.4

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

@@ -14,12 +14,14 @@
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {
-    @include private.private-theme-elevation(2, $config);
+    @include private.private-theme-overridable-elevation(2, $config);
   }
 
   .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
   .mat-button-toggle-group-appearance-standard {
-    box-shadow: none;
+    &:not([class*='mat-elevation-z']) {
+      box-shadow: none;
+    }
   }
 
   .mat-button-toggle {

package/chips/chip-input.d.ts

@@ -21,11 +21,8 @@ export interface MatChipInputEvent {
     input: HTMLInputElement;
     /** The value of the input. */
     value: string;
-    /**
-     * Reference to the chip input that emitted the event.
-     * @breaking-change 13.0.0 This property will be made required.
-     */
-    chipInput?: MatChipInput;
+    /** Reference to the chip input that emitted the event. */
+    chipInput: MatChipInput;
 }
 /**
  * Directive that adds chip-specific behaviors to an input element inside `<mat-form-field>`.

package/chips/chip-list.d.ts

@@ -13,17 +13,27 @@ import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter,
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldControl } from '@angular/material/form-field';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { MatChip, MatChipEvent, MatChipSelectionChange } from './chip';
 import { MatChipTextControl } from './chip-text-control';
 import * as i0 from "@angular/core";
 /** @docs-private */
 declare const _MatChipListBase: import("@angular/material/core")._Constructor<CanUpdateErrorState> & import("@angular/material/core")._AbstractConstructor<CanUpdateErrorState> & {
     new (_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl): {
+        /**
+         * Emits whenever the component state changes and should cause the parent
+         * form-field to update. Implemented as part of `MatFormFieldControl`.
+         * @docs-private
+         */
+        readonly stateChanges: Subject<void>;
         _defaultErrorStateMatcher: ErrorStateMatcher;
         _parentForm: NgForm;
         _parentFormGroup: FormGroupDirective;
-        /** @docs-private */
+        /**
+         * Form control bound to the component.
+         * Implemented as part of `MatFormFieldControl`.
+         * @docs-private
+         */
         ngControl: NgControl;
     };
 };
@@ -71,8 +81,6 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     protected _chipInput: MatChipTextControl;
     /** Uid of the chip list */
     _uid: string;
-    /** The aria-describedby attribute on the chip list for improved a11y. */
-    _ariaDescribedby: string;
     /** Tab index for the chip list. */
     _tabIndex: number;
     /**
@@ -91,6 +99,11 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     get selected(): MatChip[] | MatChip;
     /** The ARIA role applied to the chip list. */
     get role(): string | null;
+    /**
+     * Implemented as part of MatFormFieldControl.
+     * @docs-private
+     */
+    userAriaDescribedBy: string;
     /** An object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
     /** Whether the user should be allowed to select multiple chips. */
@@ -269,6 +282,6 @@ export declare class MatChipList extends _MatChipListBase implements MatFormFiel
     /** Syncs the list's state with the individual chips. */
     private _syncChipsState;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipList, [null, null, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipList, "mat-chip-list", ["matChipList"], { "errorStateMatcher": "errorStateMatcher"; "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "required": "required"; "placeholder": "placeholder"; "disabled": "disabled"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "tabIndex": "tabIndex"; }, { "change": "change"; "valueChange": "valueChange"; }, ["chips"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipList, "mat-chip-list", ["matChipList"], { "userAriaDescribedBy": "aria-describedby"; "errorStateMatcher": "errorStateMatcher"; "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "required": "required"; "placeholder": "placeholder"; "disabled": "disabled"; "ariaOrientation": "aria-orientation"; "selectable": "selectable"; "tabIndex": "tabIndex"; }, { "change": "change"; "valueChange": "valueChange"; }, ["chips"], ["*"]>;
 }
 export {};

package/core/common-behaviors/error-state.d.ts

@@ -11,8 +11,6 @@ import { ErrorStateMatcher } from '../error/error-options';
 import { AbstractConstructor, Constructor } from './constructor';
 /** @docs-private */
 export interface CanUpdateErrorState {
-    /** Emits whenever the component state changes. */
-    readonly stateChanges: Subject<void>;
     /** Updates the error state based on the provided error state matcher. */
     updateErrorState(): void;
     /** Whether the component is in an error state. */
@@ -27,6 +25,7 @@ export interface HasErrorState {
     _parentForm: NgForm;
     _defaultErrorStateMatcher: ErrorStateMatcher;
     ngControl: NgControl;
+    stateChanges: Subject<void>;
 }
 /**
  * Mixin to augment a directive with updateErrorState method.

package/core/datetime/index.d.ts

@@ -1,12 +1,11 @@
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/cdk/platform";
 export * from './date-adapter';
 export * from './date-formats';
 export * from './native-date-adapter';
 export * from './native-date-formats';
 export declare class NativeDateModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDateModule, never, [typeof i1.PlatformModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDateModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NativeDateModule>;
 }
 export declare class MatNativeDateModule {

package/core/ripple/index.d.ts

@@ -1,12 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./ripple";
 import * as i2 from "../common-behaviors/common-module";
-import * as i3 from "@angular/cdk/platform";
 export * from './ripple';
 export * from './ripple-ref';
 export * from './ripple-renderer';
 export declare class MatRippleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatRippleModule, [typeof i1.MatRipple], [typeof i2.MatCommonModule, typeof i3.PlatformModule], [typeof i1.MatRipple, typeof i2.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatRippleModule, [typeof i1.MatRipple], [typeof i2.MatCommonModule], [typeof i1.MatRipple, typeof i2.MatCommonModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatRippleModule>;
 }

package/core/ripple/ripple-ref.d.ts

@@ -39,6 +39,7 @@ export declare class RippleRef {
     element: HTMLElement;
     /** Ripple configuration used for the ripple. */
     config: RippleConfig;
+    _animationForciblyDisabledThroughCss: boolean;
     /** Current state of the ripple. */
     state: RippleState;
     constructor(_renderer: {
@@ -47,7 +48,7 @@ export declare class RippleRef {
     /** Reference to the ripple HTML element. */
     element: HTMLElement, 
     /** Ripple configuration used for the ripple. */
-    config: RippleConfig);
+    config: RippleConfig, _animationForciblyDisabledThroughCss?: boolean);
     /** Fades out the ripple element. */
     fadeOut(): void;
 }

package/core/ripple/ripple-renderer.d.ts

@@ -77,14 +77,21 @@ export declare class RippleRenderer implements EventListenerObject {
      * @docs-private
      */
     handleEvent(event: Event): void;
+    /** Method that will be called if the fade-in or fade-in transition completed. */
+    private _finishRippleTransition;
+    /**
+     * Starts the fade-out transition of the given ripple if it's not persistent and the pointer
+     * is not held down anymore.
+     */
+    private _startFadeOutTransition;
+    /** Destroys the given ripple by removing it from the DOM and updating its state. */
+    private _destroyRipple;
     /** Function being called whenever the trigger is being pressed using mouse. */
     private _onMousedown;
     /** Function being called whenever the trigger is being pressed using touch. */
     private _onTouchStart;
     /** Function being called whenever the trigger is being released. */
     private _onPointerUp;
-    /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
-    private _runTimeoutOutsideZone;
     /** Registers event listeners for a given list of events. */
     private _registerEvents;
     /** Removes previously registered event listeners from the trigger element. */

package/datepicker/calendar-body.d.ts

@@ -5,7 +5,7 @@
  * 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 { ElementRef, EventEmitter, NgZone, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, OnChanges, SimpleChanges, OnDestroy, AfterViewChecked } from '@angular/core';
 import * as i0 from "@angular/core";
 /** Extra CSS classes that can be associated with a calendar cell. */
 export declare type MatCalendarCellCssClasses = string | string[] | Set<string> | {
@@ -36,7 +36,7 @@ export interface MatCalendarUserEvent<D> {
  * An internal component used to display calendar data in a table.
  * @docs-private
  */
-export declare class MatCalendarBody implements OnChanges, OnDestroy {
+export declare class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
     private _elementRef;
     private _ngZone;
     /**
@@ -44,6 +44,10 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
      * We need a flag like this, because some browsers fire focus events asynchronously.
      */
     private _skipNextFocus;
+    /**
+     * Used to focus the active cell after change detection has run.
+     */
+    private _focusActiveCellAfterViewChecked;
     /** The label for the table. (e.g. "Jan 2017"). */
     label: string;
     /** The cells to display in the table. */
@@ -60,6 +64,7 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
     numCols: number;
     /** The cell number of the active cell in the table. */
     activeCell: number;
+    ngAfterViewChecked(): void;
     /** Whether a range is being selected. */
     isRange: boolean;
     /**
@@ -79,6 +84,7 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
     readonly selectedValueChange: EventEmitter<MatCalendarUserEvent<number>>;
     /** Emits when the preview has changed as a result of a user action. */
     readonly previewChange: EventEmitter<MatCalendarUserEvent<MatCalendarCell<any> | null>>;
+    readonly activeDateChange: EventEmitter<MatCalendarUserEvent<number>>;
     /** The number of blank cells to put at the beginning for the first row. */
     _firstRowOffset: number;
     /** Padding for the individual date cells. */
@@ -88,6 +94,7 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
     constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone);
     /** Called when a cell is clicked. */
     _cellClicked(cell: MatCalendarCell, event: MouseEvent): void;
+    _emitActiveDateChange(cell: MatCalendarCell, event: FocusEvent): void;
     /** Returns whether a cell should be marked as selected. */
     _isSelected(value: number): boolean;
     ngOnChanges(changes: SimpleChanges): void;
@@ -96,6 +103,8 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
     _isActiveCell(rowIndex: number, colIndex: number): boolean;
     /** Focuses the active cell after the microtask queue is empty. */
     _focusActiveCell(movePreview?: boolean): void;
+    /** Focuses the active cell after change detection has run and the microtask queue is empty. */
+    _scheduleFocusActiveCellAfterViewChecked(): void;
     /** Gets whether a value is the start of the main range. */
     _isRangeStart(value: number): boolean;
     /** Gets whether a value is the end of the main range. */
@@ -142,5 +151,5 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
     /** Finds the MatCalendarCell that corresponds to a DOM node. */
     private _getCellFromElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarBody, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarBody, "[mat-calendar-body]", ["matCalendarBody"], { "label": "label"; "rows": "rows"; "todayValue": "todayValue"; "startValue": "startValue"; "endValue": "endValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "activeCell": "activeCell"; "isRange": "isRange"; "cellAspectRatio": "cellAspectRatio"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "previewStart": "previewStart"; "previewEnd": "previewEnd"; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarBody, "[mat-calendar-body]", ["matCalendarBody"], { "label": "label"; "rows": "rows"; "todayValue": "todayValue"; "startValue": "startValue"; "endValue": "endValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "activeCell": "activeCell"; "isRange": "isRange"; "cellAspectRatio": "cellAspectRatio"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; "previewStart": "previewStart"; "previewEnd": "previewEnd"; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; }, never, never>;
 }

package/datepicker/date-range-input-parts.d.ts

@@ -41,7 +41,10 @@ declare abstract class MatDateRangeInputPartBase<D> extends MatDatepickerInputBa
     private _injector;
     _parentForm: NgForm;
     _parentFormGroup: FormGroupDirective;
-    /** @docs-private */
+    /**
+     * Form control bound to this input part.
+     * @docs-private
+     */
     ngControl: NgControl;
     /** @docs-private */
     abstract updateErrorState(): void;

package/datepicker/datepicker-base.d.ts

@@ -73,6 +73,8 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     _closeButtonFocused: boolean;
     /** Portal with projected action buttons. */
     _actionsPortal: TemplatePortal | null;
+    /** Id of the label for the `role="dialog"` element. */
+    _dialogLabelId: string | null;
     constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _globalModel: MatDateSelectionModel<S, D>, _dateAdapter: DateAdapter<D>, _rangeSelectionStrategy: MatDateRangeSelectionStrategy<D>, intl: MatDatepickerIntl);
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/datepicker/month-view.d.ts

@@ -85,6 +85,17 @@ export declare class MatMonthView<D> implements AfterContentInit, OnChanges, OnD
     ngOnDestroy(): void;
     /** Handles when a new date is selected. */
     _dateSelected(event: MatCalendarUserEvent<number>): void;
+    /**
+     * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that
+     * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
+     * that date.
+     *
+     * This fucntion is used to match each component's model of the active date with the calendar
+     * body cell that was focused. It updates its value of `activeDate` synchronously and updates the
+     * parent's value asynchonously via the `activeDateChange` event. The child component receives an
+     * updated value asynchronously via the `activeCell` Input.
+     */
+    _updateActiveDate(event: MatCalendarUserEvent<number>): void;
     /** Handles keydown events on the calendar body when calendar is in month view. */
     _handleCalendarBodyKeydown(event: KeyboardEvent): void;
     /** Handles keyup events on the calendar body when calendar is in month view. */
@@ -93,8 +104,15 @@ export declare class MatMonthView<D> implements AfterContentInit, OnChanges, OnD
     _init(): void;
     /** Focuses the active cell after the microtask queue is empty. */
     _focusActiveCell(movePreview?: boolean): void;
+    /** Focuses the active cell after change detection has run and the microtask queue is empty. */
+    _focusActiveCellAfterViewChecked(): void;
     /** Called when the user has activated a new cell and the preview needs to be updated. */
     _previewChanged({ event, value: cell }: MatCalendarUserEvent<MatCalendarCell<D> | null>): void;
+    /**
+     * Takes a day of the month and returns a new date in the same month and year as the currently
+     *  active date. The returned date will have the same day of the month as the argument date.
+     */
+    private _getDateFromDayOfMonth;
     /** Initializes the weekdays. */
     private _initWeekdays;
     /** Creates MatCalendarCells for the dates in this month. */

package/datepicker/multi-year-view.d.ts

@@ -58,6 +58,17 @@ export declare class MatMultiYearView<D> implements AfterContentInit, OnDestroy
     _init(): void;
     /** Handles when a new year is selected. */
     _yearSelected(event: MatCalendarUserEvent<number>): void;
+    /**
+     * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that
+     * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
+     * that date.
+     *
+     * This fucntion is used to match each component's model of the active date with the calendar
+     * body cell that was focused. It updates its value of `activeDate` synchronously and updates the
+     * parent's value asynchonously via the `activeDateChange` event. The child component receives an
+     * updated value asynchronously via the `activeCell` Input.
+     */
+    _updateActiveDate(event: MatCalendarUserEvent<number>): void;
     /** Handles keydown events on the calendar body when calendar is in multi-year view. */
     _handleCalendarBodyKeydown(event: KeyboardEvent): void;
     /** Handles keyup events on the calendar body when calendar is in multi-year view. */
@@ -65,6 +76,13 @@ export declare class MatMultiYearView<D> implements AfterContentInit, OnDestroy
     _getActiveCell(): number;
     /** Focuses the active cell after the microtask queue is empty. */
     _focusActiveCell(): void;
+    /** Focuses the active cell after change detection has run and the microtask queue is empty. */
+    _focusActiveCellAfterViewChecked(): void;
+    /**
+     * Takes a year and returns a new date on the same day and month as the currently active date
+     *  The returned date will have the same year as the argument date.
+     */
+    private _getDateFromYear;
     /** Creates an MatCalendarCell for the given year. */
     private _createCellForYear;
     /** Whether the given year is enabled. */

package/datepicker/year-view.d.ts

@@ -60,6 +60,17 @@ export declare class MatYearView<D> implements AfterContentInit, OnDestroy {
     ngOnDestroy(): void;
     /** Handles when a new month is selected. */
     _monthSelected(event: MatCalendarUserEvent<number>): void;
+    /**
+     * Takes the index of a calendar body cell wrapped in in an event as argument. For the date that
+     * corresponds to the given cell, set `activeDate` to that date and fire `activeDateChange` with
+     * that date.
+     *
+     * This fucntion is used to match each component's model of the active date with the calendar
+     * body cell that was focused. It updates its value of `activeDate` synchronously and updates the
+     * parent's value asynchonously via the `activeDateChange` event. The child component receives an
+     * updated value asynchronously via the `activeCell` Input.
+     */
+    _updateActiveDate(event: MatCalendarUserEvent<number>): void;
     /** Handles keydown events on the calendar body when calendar is in year view. */
     _handleCalendarBodyKeydown(event: KeyboardEvent): void;
     /** Handles keyup events on the calendar body when calendar is in year view. */
@@ -68,11 +79,18 @@ export declare class MatYearView<D> implements AfterContentInit, OnDestroy {
     _init(): void;
     /** Focuses the active cell after the microtask queue is empty. */
     _focusActiveCell(): void;
+    /** Schedules the matCalendarBody to focus the active cell after change detection has run */
+    _focusActiveCellAfterViewChecked(): void;
     /**
      * Gets the month in this year that the given Date falls on.
      * Returns null if the given Date is in another year.
      */
     private _getMonthInCurrentYear;
+    /**
+     * Takes a month and returns a new date in the same day and year as the currently active date.
+     *  The returned date will have the same month as the argument date.
+     */
+    private _getDateFromMonth;
     /** Creates an MatCalendarCell for the given month. */
     private _createCellForMonth;
     /** Whether the given month is enabled. */

package/dialog/dialog-content-directives.d.ts

@@ -67,6 +67,10 @@ export declare class MatDialogContent {
  * Stays fixed to the bottom when scrolling.
  */
 export declare class MatDialogActions {
+    /**
+     * Horizontal alignment of action buttons.
+     */
+    align?: 'start' | 'center' | 'end';
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, {}, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogActions, "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", never, { "align": "align"; }, {}, never>;
 }