@angular/material 14.0.0-next.0 → 14.0.0-next.11

package/stepper/stepper.d.ts

@@ -9,7 +9,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { CdkStep, CdkStepper, StepperOptions } from '@angular/cdk/stepper';
 import { AnimationEvent } from '@angular/animations';
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, TemplateRef, ViewContainerRef } from '@angular/core';
-import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { ErrorStateMatcher, ThemePalette } from '@angular/material/core';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
@@ -34,42 +34,10 @@ export declare class MatStep extends CdkStep implements ErrorStateMatcher, After
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     /** Custom error state matcher that additionally checks for validity of interacted form. */
-    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean;
+    isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStep, [null, { skipSelf: true; }, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatStep, "mat-step", ["matStep"], { "color": "color"; }, {}, ["stepLabel", "_lazyContent"], ["*"]>;
 }
-/**
- * Proxies the public APIs from `MatStepper` to the deprecated `MatHorizontalStepper` and
- * `MatVerticalStepper`.
- * @deprecated Use `MatStepper` instead.
- * @breaking-change 13.0.0
- * @docs-private
- */
-declare abstract class _MatProxyStepperBase extends CdkStepper {
-    readonly steps: QueryList<MatStep>;
-    readonly animationDone: EventEmitter<void>;
-    disableRipple: boolean;
-    color: ThemePalette;
-    labelPosition: 'bottom' | 'end';
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatProxyStepperBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatProxyStepperBase, never, never, {}, {}, never>;
-}
-/**
- * @deprecated Use `MatStepper` instead.
- * @breaking-change 13.0.0
- */
-export declare class MatHorizontalStepper extends _MatProxyStepperBase {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatHorizontalStepper, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatHorizontalStepper, "mat-horizontal-stepper", never, {}, {}, never>;
-}
-/**
- * @deprecated Use `MatStepper` instead.
- * @breaking-change 13.0.0
- */
-export declare class MatVerticalStepper extends _MatProxyStepperBase {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatVerticalStepper, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatVerticalStepper, "mat-vertical-stepper", never, {}, {}, never>;
-}
 export declare class MatStepper extends CdkStepper implements AfterContentInit {
     /** The list of step headers of the steps in the stepper. */
     _stepHeader: QueryList<MatStepHeader>;
@@ -90,14 +58,23 @@ export declare class MatStepper extends CdkStepper implements AfterContentInit {
      * Only applies in the `horizontal` orientation.
      */
     labelPosition: 'bottom' | 'end';
+    /**
+     * Position of the stepper's header.
+     * Only applies in the `horizontal` orientation.
+     */
+    headerPosition: 'top' | 'bottom';
     /** Consumer-specified template-refs to be used to override the header icons. */
     _iconOverrides: Record<string, TemplateRef<MatStepperIconContext>>;
     /** Stream of animation `done` events when the body expands/collapses. */
     readonly _animationDone: Subject<AnimationEvent>;
-    constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _document: any);
+    /** Duration for the animation. Will be normalized to milliseconds if no units are set. */
+    get animationDuration(): string;
+    set animationDuration(value: string);
+    private _animationDuration;
+    constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>);
     ngAfterContentInit(): void;
     _stepIsNavigable(index: number, step: MatStep): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatStepper, [{ optional: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatStepper, "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "selectedIndex": "selectedIndex"; "disableRipple": "disableRipple"; "color": "color"; "labelPosition": "labelPosition"; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], never>;
+    _getAnimationDuration(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatStepper, [{ optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatStepper, "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "selectedIndex": "selectedIndex"; "disableRipple": "disableRipple"; "color": "color"; "labelPosition": "labelPosition"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], never>;
 }
-export {};

package/tabs/_tabs-common.scss

@@ -1,7 +1,8 @@
+@use '@angular/cdk';
+
 @use '../core/style/variables';
 @use '../core/style/private';
 @use '../core/style/vendor-prefixes';
-@use '../../cdk/a11y';
 
 $tab-bar-height: 48px !default;
 $tab-animation-duration: 500ms !default;
@@ -27,7 +28,7 @@ $tab-animation-duration: 500ms !default;
       opacity: 1;
     }
 
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       $outline-width: 2px;
       outline: dotted $outline-width;
       outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else.
@@ -37,7 +38,7 @@ $tab-animation-duration: 500ms !default;
   &.mat-tab-disabled {
     cursor: default;
 
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       opacity: 0.5;
     }
   }
@@ -49,7 +50,7 @@ $tab-animation-duration: 500ms !default;
     white-space: nowrap;
   }
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     opacity: 1;
   }
 }
@@ -69,7 +70,7 @@ $tab-animation-duration: 500ms !default;
     top: 0;
   }
 
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     outline: solid $height;
     height: 0;
   }
@@ -95,6 +96,15 @@ $tab-animation-duration: 500ms !default;
     z-index: 2;
     -webkit-tap-highlight-color: transparent;
     touch-action: none;
+    box-sizing: content-box;
+    background: none;
+    border: none;
+    outline: 0;
+    padding: 0;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
 
     .mat-tab-header-pagination-controls-enabled & {
       display: flex;

package/tabs/ink-bar.d.ts

@@ -44,11 +44,6 @@ export declare class MatInkBar {
     show(): void;
     /** Hides the ink bar. */
     hide(): void;
-    /**
-     * Sets the proper styles to the ink bar element.
-     * @param element
-     */
-    private _setStyles;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatInkBar, [null, null, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatInkBar, "mat-ink-bar", never, {}, {}, never>;
 }

package/tabs/paginated-tab-header.d.ts

@@ -7,7 +7,7 @@
  */
 import { ChangeDetectorRef, ElementRef, NgZone, QueryList, EventEmitter, AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NumberInput } from '@angular/cdk/coercion';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { FocusableOption } from '@angular/cdk/a11y';
 import { Subject } from 'rxjs';
@@ -74,7 +74,9 @@ export declare abstract class MatPaginatedTabHeader implements AfterContentCheck
      * Whether pagination should be disabled. This can be used to avoid unnecessary
      * layout recalculations if it's known that pagination won't be required.
      */
-    disablePagination: boolean;
+    get disablePagination(): boolean;
+    set disablePagination(value: BooleanInput);
+    private _disablePagination;
     /** The index of the active tab. */
     get selectedIndex(): number;
     set selectedIndex(value: NumberInput);

package/tabs/tab-body.d.ts

@@ -78,6 +78,8 @@ export declare abstract class _MatTabBodyBase implements OnInit, OnDestroy {
     origin: number | null;
     /** Duration for the tab's animation. */
     animationDuration: string;
+    /** Whether the tab's content should be kept in the DOM while it's off-screen. */
+    preserveContent: boolean;
     /** The shifted index position of the tab body, where zero represents the active center tab. */
     set position(position: number);
     constructor(_elementRef: ElementRef<HTMLElement>, _dir: Directionality, changeDetectorRef: ChangeDetectorRef);
@@ -100,7 +102,7 @@ export declare abstract class _MatTabBodyBase implements OnInit, OnDestroy {
      */
     private _computePositionFromOrigin;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabBodyBase, [null, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabBodyBase, never, never, { "_content": "content"; "origin": "origin"; "animationDuration": "animationDuration"; "position": "position"; }, { "_onCentering": "_onCentering"; "_beforeCentering": "_beforeCentering"; "_afterLeavingCenter": "_afterLeavingCenter"; "_onCentered": "_onCentered"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabBodyBase, never, never, { "_content": "content"; "origin": "origin"; "animationDuration": "animationDuration"; "preserveContent": "preserveContent"; "position": "position"; }, { "_onCentering": "_onCentering"; "_beforeCentering": "_beforeCentering"; "_afterLeavingCenter": "_afterLeavingCenter"; "_onCentered": "_onCentered"; }, never>;
 }
 /**
  * Wrapper for the contents of a tab.

package/tabs/tab-config.d.ts

@@ -24,6 +24,12 @@ export interface MatTabsConfig {
     dynamicHeight?: boolean;
     /** `tabindex` to be set on the inner element that wraps the tab content. */
     contentTabIndex?: number;
+    /**
+     * By default tabs remove their content from the DOM while it's off-screen.
+     * Setting this to `true` will keep it in the DOM which will prevent elements
+     * like iframes and videos from reloading next time it comes back into the view.
+     */
+    preserveContent?: boolean;
 }
 /** Injection token that can be used to provide the default options the tabs module. */
 export declare const MAT_TABS_CONFIG: InjectionToken<MatTabsConfig>;

package/tabs/tab-group.d.ts

@@ -50,6 +50,8 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
     _tabs: QueryList<MatTab>;
     /** The tab index that should be selected after the content has been checked. */
     private _indexToSelect;
+    /** Index of the tab that was focused last. */
+    private _lastFocusedTabIndex;
     /** Snapshot of the height of the tab body wrapper before another tab is activated. */
     private _tabBodyWrapperHeight;
     /** Subscription to tabs being added/removed. */
@@ -83,7 +85,17 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
      * Whether pagination should be disabled. This can be used to avoid unnecessary
      * layout recalculations if it's known that pagination won't be required.
      */
-    disablePagination: boolean;
+    get disablePagination(): boolean;
+    set disablePagination(value: BooleanInput);
+    private _disablePagination;
+    /**
+     * By default tabs remove their content from the DOM while it's off-screen.
+     * Setting this to `true` will keep it in the DOM which will prevent elements
+     * like iframes and videos from reloading next time it comes back into the view.
+     */
+    get preserveContent(): boolean;
+    set preserveContent(value: BooleanInput);
+    private _preserveContent;
     /** Background color of the tab group. */
     get backgroundColor(): ThemePalette;
     set backgroundColor(value: ThemePalette);
@@ -149,11 +161,11 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
     /** Handle click events, setting new selected index if appropriate. */
     _handleClick(tab: MatTab, tabHeader: MatTabGroupBaseHeader, index: number): void;
     /** Retrieves the tabindex for the tab. */
-    _getTabIndex(tab: MatTab, idx: number): number | null;
+    _getTabIndex(tab: MatTab, index: number): number | null;
     /** Callback for when the focused state of a tab has changed. */
     _tabFocusChanged(focusOrigin: FocusOrigin, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabGroupBase, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabGroupBase, never, never, { "dynamicHeight": "dynamicHeight"; "selectedIndex": "selectedIndex"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; "contentTabIndex": "contentTabIndex"; "disablePagination": "disablePagination"; "backgroundColor": "backgroundColor"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabGroupBase, never, never, { "dynamicHeight": "dynamicHeight"; "selectedIndex": "selectedIndex"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; "contentTabIndex": "contentTabIndex"; "disablePagination": "disablePagination"; "preserveContent": "preserveContent"; "backgroundColor": "backgroundColor"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, never>;
 }
 /**
  * Material design tab-group component. Supports basic tab pairs (label + content) and includes

package/tooltip/testing/tooltip-harness.d.ts

@@ -9,6 +9,9 @@ import { AsyncFactoryFn, ComponentHarness, HarnessPredicate, TestElement } from
 import { TooltipHarnessFilters } from './tooltip-harness-filters';
 export declare abstract class _MatTooltipHarnessBase extends ComponentHarness {
     protected abstract _optionalPanel: AsyncFactoryFn<TestElement | null>;
+    protected abstract _hiddenClass: string;
+    protected abstract _showAnimationName: string;
+    protected abstract _hideAnimationName: string;
     /** Shows the tooltip. */
     show(): Promise<void>;
     /** Hides the tooltip. */
@@ -21,6 +24,9 @@ export declare abstract class _MatTooltipHarnessBase extends ComponentHarness {
 /** Harness for interacting with a standard mat-tooltip in tests. */
 export declare class MatTooltipHarness extends _MatTooltipHarnessBase {
     protected _optionalPanel: AsyncFactoryFn<TestElement | null>;
+    protected _hiddenClass: string;
+    protected _showAnimationName: string;
+    protected _hideAnimationName: string;
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search

package/tooltip/tooltip.d.ts

@@ -5,12 +5,11 @@
  * 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 { AnimationEvent } from '@angular/animations';
 import { AriaDescriber, FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { ConnectedPosition, OriginConnectionPosition, Overlay, OverlayConnectionPosition, OverlayRef, ScrollStrategy } from '@angular/cdk/overlay';
+import { OriginConnectionPosition, Overlay, OverlayConnectionPosition, OverlayRef, ScrollStrategy, ConnectedPosition } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 import { ComponentType } from '@angular/cdk/portal';
 import { ScrollDispatcher } from '@angular/cdk/scrolling';
@@ -51,11 +50,18 @@ export declare const MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 };
 /** Default `matTooltip` options that can be overridden. */
 export interface MatTooltipDefaultOptions {
+    /** Default delay when the tooltip is shown. */
     showDelay: number;
+    /** Default delay when the tooltip is hidden. */
     hideDelay: number;
+    /** Default delay when hiding the tooltip on a touch device. */
     touchendHideDelay: number;
+    /** Default touch gesture handling for tooltips. */
     touchGestures?: TooltipTouchGestures;
+    /** Default position for tooltips. */
     position?: TooltipPosition;
+    /** Disables the ability for the user to interact with the tooltip element. */
+    disableTooltipInteractivity?: boolean;
 }
 /** Injection token to be used to override the default options for `matTooltip`. */
 export declare const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;
@@ -214,11 +220,25 @@ export declare abstract class _TooltipComponentBase implements OnDestroy {
     _hideTimeoutId: number | undefined;
     /** Property watched by the animation framework to show or hide the tooltip */
     _visibility: TooltipVisibility;
+    /** Element that caused the tooltip to open. */
+    _triggerElement: HTMLElement;
+    /** Amount of milliseconds to delay the closing sequence. */
+    _mouseLeaveHideDelay: number;
+    /** Whether animations are currently disabled. */
+    private _animationsDisabled;
+    /** Reference to the internal tooltip element. */
+    abstract _tooltip: ElementRef<HTMLElement>;
     /** Whether interactions on the page should close the tooltip */
     private _closeOnInteraction;
+    /** Whether the tooltip is currently visible. */
+    private _isVisible;
     /** Subject for notifying that the tooltip has been hidden from the view */
     private readonly _onHide;
-    constructor(_changeDetectorRef: ChangeDetectorRef);
+    /** Name of the show animation and the class that toggles it. */
+    protected abstract readonly _showAnimation: string;
+    /** Name of the hide animation and the class that toggles it. */
+    protected abstract readonly _hideAnimation: string;
+    constructor(_changeDetectorRef: ChangeDetectorRef, animationMode?: string);
     /**
      * Shows the tooltip with an animation originating from the provided origin
      * @param delay Amount of milliseconds to the delay showing the tooltip.
@@ -234,8 +254,6 @@ export declare abstract class _TooltipComponentBase implements OnDestroy {
     /** Whether the tooltip is being displayed. */
     isVisible(): boolean;
     ngOnDestroy(): void;
-    _animationStart(): void;
-    _animationDone(event: AnimationEvent): void;
     /**
      * Interactions on the HTML body should close the tooltip immediately as defined in the
      * material design spec.
@@ -248,13 +266,20 @@ export declare abstract class _TooltipComponentBase implements OnDestroy {
      * can be problematic in components with OnPush change detection.
      */
     _markForCheck(): void;
+    _handleMouseLeave({ relatedTarget }: MouseEvent): void;
     /**
      * Callback for when the timeout in this.show() gets completed.
      * This method is only needed by the mdc-tooltip, and so it is only implemented
      * in the mdc-tooltip, not here.
      */
     protected _onShow(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<_TooltipComponentBase, never>;
+    /** Event listener dispatched when an animation on the tooltip finishes. */
+    _handleAnimationEnd({ animationName }: AnimationEvent): void;
+    /** Handles the cleanup after an animation has finished. */
+    private _finalizeAnimation;
+    /** Toggles the visibility of the tooltip element. */
+    private _toggleVisibility;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_TooltipComponentBase, [null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<_TooltipComponentBase, never, never, {}, {}, never>;
 }
 /**
@@ -265,7 +290,10 @@ export declare class TooltipComponent extends _TooltipComponentBase {
     private _breakpointObserver;
     /** Stream that emits whether the user has a handset-sized display.  */
     _isHandset: Observable<BreakpointState>;
-    constructor(changeDetectorRef: ChangeDetectorRef, _breakpointObserver: BreakpointObserver);
-    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
+    _showAnimation: string;
+    _hideAnimation: string;
+    _tooltip: ElementRef<HTMLElement>;
+    constructor(changeDetectorRef: ChangeDetectorRef, _breakpointObserver: BreakpointObserver, animationMode?: string);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "mat-tooltip-component", never, {}, {}, never, never>;
 }