@angular/material 14.0.0-next.6 → 14.0.0-next.9

package/_index.scss

@@ -14,6 +14,25 @@
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
 
+// Private/Internal
+@forward './core/density/private/all-density' as private-* show private-all-component-densities;
+@forward './core/theming/theming' show private-check-duplicate-theme-styles,
+  private-legacy-get-theme, private-is-theme-object;
+  @forward './core/style/layout-common' as private-* show private-fill;
+@forward './core/style/private' show private-theme-elevation, private-animation-noop;
+@forward './core/style/vendor-prefixes' as private-* show private-user-select,
+  private-position-sticky, private-color-adjust;
+@forward './core/theming/palette' as private-* show $private-dark-primary-text,
+  $private-dark-disabled-text;
+@forward './core/style/variables' as private-* show $private-swift-ease-in-duration,
+  $private-swift-ease-in-timing-function, $private-swift-ease-out-timing-function,
+  $private-ease-in-out-curve-function, $private-swift-ease-out-duration, $private-xsmall;
+@forward './core/typography/typography' show private-typography-to-2014-config,
+  private-typography-to-2018-config;
+@forward './table/table-flex-styles' show private-table-flex-styles;
+@forward './core/style/menu-common' as private-menu-common-*;
+@forward './core/style/button-common' as private-button-common-*;
+
 // Structural
 @forward './core/core' show core;
 @forward './core/ripple/ripple' show ripple;
@@ -49,7 +68,7 @@
   checkbox-typography;
 @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography;
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
-  datepicker-typography;
+  datepicker-typography, datepicker-date-range-colors;
 @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
   divider-typography;

package/badge/_badge-theme.scss

@@ -5,10 +5,11 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:math';
+@use '@angular/cdk';
+
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
-@use '../../cdk/a11y';
 
 $font-size: 12px;
 $font-weight: 600;
@@ -102,6 +103,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;
@@ -158,7 +167,7 @@ $_badge-structure-emitted: false !default;
     color: theming.get-color-from-palette($primary, default-contrast);
     background: theming.get-color-from-palette($primary);
 
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       outline: solid 1px;
       border-radius: 0;
     }

package/checkbox/testing/checkbox-harness-filters.d.ts

@@ -12,4 +12,6 @@ export interface CheckboxHarnessFilters extends BaseHarnessFilters {
     label?: string | RegExp;
     /** Only find instances whose name attribute is the given value. */
     name?: string;
+    /** Only find instances with the given checked value. */
+    checked?: boolean;
 }

package/core/_core.scss

@@ -1,6 +1,4 @@
-@use '../../cdk/overlay';
-@use '../../cdk/a11y';
-@use '../../cdk/text-field';
+@use '@angular/cdk';
 
 // Core styles that can be used to apply material design treatments to any element.
 @use './ripple/ripple';
@@ -11,10 +9,10 @@
 @mixin core($typography-config: null) {
   @include all-typography.all-component-typographies($typography-config);
   @include ripple.ripple();
-  @include a11y.a11y-visually-hidden();
-  @include overlay.overlay();
-  @include text-field.text-field-autosize();
-  @include text-field.text-field-autofill();
+  @include cdk.a11y-visually-hidden();
+  @include cdk.overlay();
+  @include cdk.text-field-autosize();
+  @include cdk.text-field-autofill();
 
   @include focus-indicators.private-strong-focus-indicators-positioning();
   @include _mdc-core();

package/core/ripple/_ripple.scss

@@ -1,4 +1,4 @@
-@use '../../../cdk/a11y';
+@use '@angular/cdk';
 
 @mixin ripple() {
   // The host element of an mat-ripple directive should always have a position of "absolute" or
@@ -36,7 +36,7 @@
     transform: scale3d(0, 0, 0);
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       display: none;
     }
   }

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

@@ -43,7 +43,12 @@ export declare class RippleRenderer implements EventListenerObject {
     private _triggerElement;
     /** Whether the pointer is currently down or not. */
     private _isPointerDown;
-    /** Set of currently active ripple references. */
+    /**
+     * Map of currently active ripple references.
+     * The ripple reference is mapped to its element event listeners.
+     * The reason why `| null` is used is that event listeners are added only
+     * when the condition is truthy (see the `_startFadeOutTransition` method).
+     */
     private _activeRipples;
     /** Latest non-persistent ripple that was triggered. */
     private _mostRecentTransientRipple;
@@ -94,6 +99,7 @@ export declare class RippleRenderer implements EventListenerObject {
     private _onPointerUp;
     /** Registers event listeners for a given list of events. */
     private _registerEvents;
+    private _getActiveRipples;
     /** Removes previously registered event listeners from the trigger element. */
     _removeTriggerEvents(): void;
 }

package/core/style/_menu-common.scss

@@ -1,4 +1,5 @@
-@use '../../../cdk/a11y';
+@use '@angular/cdk';
+
 @use './list-common';
 @use './layout-common';
 
@@ -84,7 +85,7 @@ $icon-margin: 16px !default;
   }
 
   // Fix for Chromium-based browsers blending in the `currentColor` with the background.
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     fill: CanvasText;
   }
 }

package/core/style/_vendor-prefixes.scss

@@ -1,7 +1,6 @@
 // stylelint-disable material/no-prefixes
 @mixin user-select($value) {
   -webkit-user-select: $value;
-  -moz-user-select: $value;
   user-select: $value;
 }
 
@@ -25,27 +24,12 @@
   }
 }
 
-@mixin cursor-grab {
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-
-@mixin cursor-grabbing {
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
-}
-
 @mixin backface-visibility($value) {
   -webkit-backface-visibility: $value;
   backface-visibility: $value;
 }
 
-@mixin position-sticky($important: false) {
-  position: -webkit-sticky #{if($important, '!important', '')};
-  position: sticky #{if($important, '!important', '')};
-}
-
-@mixin private-color-adjust($value) {
+@mixin color-adjust($value) {
   -webkit-print-color-adjust: $value;
   color-adjust: $value;
 }

package/core/typography/_typography.scss

@@ -8,7 +8,7 @@
 /// @param {String | Number} $font-weight The font-weight for this level.
 /// @param {String} $font-family The font-family for this level.
 /// @param {String} $letter-spacing The letter-spacing for this level.
-/// @returns {Map} A map representing the definition of this typpographic level.
+/// @returns {Map} A map representing the definition of this typographic level.
 @function define-typography-level(
   $font-size,
   $line-height: $font-size,
@@ -183,22 +183,41 @@
 @mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
   $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme));
 
-  .mat-h1, .mat-headline, #{$selector} h1 {
+  // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
+  // necessary if we want to allow people to overwrite the tag selectors. This is due to
+  // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.
+  .mat-h1,
+  .mat-headline,
+  #{$selector} .mat-h1,
+  #{$selector} .mat-headline,
+  #{$selector} h1 {
     @include typography-utils.typography-level($config, headline);
     margin: 0 0 16px;
   }
 
-  .mat-h2, .mat-title, #{$selector} h2 {
+  .mat-h2,
+  .mat-title,
+  #{$selector} .mat-h2,
+  #{$selector} .mat-title,
+  #{$selector} h2 {
     @include typography-utils.typography-level($config, title);
     margin: 0 0 16px;
   }
 
-  .mat-h3, .mat-subheading-2, #{$selector} h3 {
+  .mat-h3,
+  .mat-subheading-2,
+  #{$selector} .mat-h3,
+  #{$selector} .mat-subheading-2,
+  #{$selector} h3 {
     @include typography-utils.typography-level($config, subheading-2);
     margin: 0 0 16px;
   }
 
-  .mat-h4, .mat-subheading-1, #{$selector} h4 {
+  .mat-h4,
+  .mat-subheading-1,
+  #{$selector} .mat-h4,
+  #{$selector} .mat-subheading-1,
+  #{$selector} h4 {
     @include typography-utils.typography-level($config, subheading-1);
     margin: 0 0 16px;
   }
@@ -206,7 +225,9 @@
   // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
   // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
   // and h6 at 0.67em.
-  .mat-h5, #{$selector} h5 {
+  .mat-h5,
+  #{$selector} .mat-h5,
+  #{$selector} h5 {
     @include typography-utils.font-shorthand(
        // calc is used here to support css variables
       calc(#{typography-utils.font-size($config, body-1)} * 0.83),
@@ -218,7 +239,9 @@
     margin: 0 0 12px;
   }
 
-  .mat-h6, #{$selector} h6 {
+  .mat-h6,
+  #{$selector} .mat-h6,
+  #{$selector} h6 {
     @include typography-utils.font-shorthand(
        // calc is used here to support css variables
       calc(#{typography-utils.font-size($config, body-1)} * 0.67),
@@ -230,11 +253,18 @@
     margin: 0 0 12px;
   }
 
-  .mat-body-strong, .mat-body-2 {
+  .mat-body-strong,
+  .mat-body-2,
+  #{$selector} .mat-body-strong,
+  #{$selector} .mat-body-2 {
     @include typography-utils.typography-level($config, body-2);
   }
 
-  .mat-body, .mat-body-1, #{$selector} {
+  .mat-body,
+  .mat-body-1,
+  #{$selector} .mat-body,
+  #{$selector} .mat-body-1,
+  #{$selector} {
     @include typography-utils.typography-level($config, body-1);
 
     p {
@@ -242,26 +272,33 @@
     }
   }
 
-  .mat-small, .mat-caption {
+  .mat-small,
+  .mat-caption,
+  #{$selector} .mat-small,
+  #{$selector} .mat-caption {
     @include typography-utils.typography-level($config, caption);
   }
 
-  .mat-display-4, #{$selector} .mat-display-4 {
+  .mat-display-4,
+  #{$selector} .mat-display-4 {
     @include typography-utils.typography-level($config, display-4);
     margin: 0 0 56px;
   }
 
-  .mat-display-3, #{$selector} .mat-display-3 {
+  .mat-display-3,
+  #{$selector} .mat-display-3 {
     @include typography-utils.typography-level($config, display-3);
     margin: 0 0 64px;
   }
 
-  .mat-display-2, #{$selector} .mat-display-2 {
+  .mat-display-2,
+  #{$selector} .mat-display-2 {
     @include typography-utils.typography-level($config, display-2);
     margin: 0 0 64px;
   }
 
-  .mat-display-1, #{$selector} .mat-display-1 {
+  .mat-display-1,
+  #{$selector} .mat-display-1 {
     @include typography-utils.typography-level($config, display-1);
     margin: 0 0 64px;
   }

package/datepicker/calendar-body.d.ts

@@ -101,7 +101,28 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy, AfterViewC
     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;
     /** Focuses the active cell after change detection has run and the microtask queue is empty. */
     _scheduleFocusActiveCellAfterViewChecked(): void;

package/dialog/dialog-animations.d.ts

@@ -6,6 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { AnimationTriggerMetadata } from '@angular/animations';
+/**
+ * Default parameters for the animation for backwards compatibility.
+ * @docs-private
+ */
+export declare const defaultParams: {
+    params: {
+        enterAnimationDuration: string;
+        exitAnimationDuration: string;
+    };
+};
 /**
  * Animations used by MatDialog.
  * @docs-private

package/dialog/dialog-config.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 { ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
+import { ViewContainerRef, ComponentFactoryResolver, Injector } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 /** Options for where to set focus to automatically on dialog open */
@@ -34,6 +34,11 @@ export declare class MatDialogConfig<D = any> {
      * content will be rendered.
      */
     viewContainerRef?: ViewContainerRef;
+    /**
+     * Injector used for the instantiation of the component to be attached. If provided,
+     * takes precedence over the injector indirectly provided by `ViewContainerRef`.
+     */
+    injector?: Injector;
     /** ID for the dialog. If omitted, a unique one will be generated. */
     id?: string;
     /** The ARIA role of the dialog element. */
@@ -93,4 +98,8 @@ export declare class MatDialogConfig<D = any> {
     closeOnNavigation?: boolean;
     /** Alternate `ComponentFactoryResolver` to use when resolving the associated component. */
     componentFactoryResolver?: ComponentFactoryResolver;
+    /** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
+    enterAnimationDuration?: string;
+    /** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
+    exitAnimationDuration?: string;
 }

package/dialog/dialog-container.d.ts

@@ -120,6 +120,13 @@ export declare class MatDialogContainer extends _MatDialogContainerBase {
     /** Starts the dialog exit animation. */
     _startExitAnimation(): void;
     _initializeWithAttachedContent(): void;
+    _getAnimationState(): {
+        value: "enter" | "void" | "exit";
+        params: {
+            enterAnimationDuration: string;
+            exitAnimationDuration: string;
+        };
+    };
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogContainer, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDialogContainer, "mat-dialog-container", never, {}, {}, never, never>;
 }

package/dialog/public-api.d.ts

@@ -11,4 +11,4 @@ export * from './dialog-container';
 export * from './dialog-content-directives';
 export * from './dialog-config';
 export * from './dialog-ref';
-export * from './dialog-animations';
+export { matDialogAnimations } from './dialog-animations';

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: "14.0.0-next.5", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MatAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.5", ngImport: i0, type: MatAutocompleteModule, declarations: [MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteOrigin], imports: [OverlayModule, MatOptionModule, MatCommonModule, CommonModule], exports: [MatAutocomplete,
+MatAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MatAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.9", 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: "14.0.0-next.5", 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: "14.0.0-next.9", 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: "14.0.0-next.5", ngImport: i0, type: MatAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", 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: "14.0.0-next.5", ngImport: i0, type: _MatAutocompleteOriginBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-_MatAutocompleteOriginBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.5", type: _MatAutocompleteOriginBase, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.5", ngImport: i0, type: _MatAutocompleteOriginBase, decorators: [{
+_MatAutocompleteOriginBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: _MatAutocompleteOriginBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+_MatAutocompleteOriginBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: _MatAutocompleteOriginBase, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: _MatAutocompleteOriginBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 /**
@@ -26,9 +26,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.5",
  */
 export class MatAutocompleteOrigin extends _MatAutocompleteOriginBase {
 }
-MatAutocompleteOrigin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.5", ngImport: i0, type: MatAutocompleteOrigin, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-MatAutocompleteOrigin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.5", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.5", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+MatAutocompleteOrigin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MatAutocompleteOrigin, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+MatAutocompleteOrigin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',