@angular/material 13.1.2 → 13.2.0-rc.0

package/slider/_slider-theme.scss

@@ -52,16 +52,18 @@
     background-color: $mat-slider-off-color;
   }
 
-  .mat-primary {
-    @include _inner-content-theme($primary);
-  }
+  .mat-slider {
+    &.mat-primary {
+      @include _inner-content-theme($primary);
+    }
 
-  .mat-accent {
-    @include _inner-content-theme($accent);
-  }
+    &.mat-accent {
+      @include _inner-content-theme($accent);
+    }
 
-  .mat-warn {
-    @include _inner-content-theme($warn);
+    &.mat-warn {
+      @include _inner-content-theme($warn);
+    }
   }
 
   .mat-slider:hover,
@@ -71,7 +73,7 @@
     }
   }
 
-  .mat-slider-disabled {
+  .mat-slider.mat-slider-disabled {
     .mat-slider-track-background,
     .mat-slider-track-fill,
     .mat-slider-thumb {
@@ -85,7 +87,7 @@
     }
   }
 
-  .mat-slider-min-value {
+  .mat-slider.mat-slider-min-value {
     .mat-slider-focus-ring {
       $opacity: 0.12;
       $color: theming.get-color-from-palette($foreground, base, $opacity);

package/snack-bar/snack-bar.d.ts

@@ -10,19 +10,16 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentType } from '@angular/cdk/portal';
 import { EmbeddedViewRef, InjectionToken, Injector, TemplateRef, OnDestroy, Type } from '@angular/core';
-import { TextOnlySnackBar } from './simple-snack-bar';
+import { TextOnlySnackBar, SimpleSnackBar } from './simple-snack-bar';
 import { MatSnackBarConfig } from './snack-bar-config';
-import { _SnackBarContainer } from './snack-bar-container';
+import { MatSnackBarContainer, _SnackBarContainer } from './snack-bar-container';
 import { MatSnackBarRef } from './snack-bar-ref';
 import * as i0 from "@angular/core";
 /** Injection token that can be used to specify default snack bar. */
 export declare const MAT_SNACK_BAR_DEFAULT_OPTIONS: InjectionToken<MatSnackBarConfig<any>>;
 /** @docs-private */
 export declare function MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY(): MatSnackBarConfig;
-/**
- * Service to dispatch Material Design snack bar messages.
- */
-export declare class MatSnackBar implements OnDestroy {
+export declare abstract class _MatSnackBarBase implements OnDestroy {
     private _overlay;
     private _live;
     private _injector;
@@ -36,15 +33,15 @@ export declare class MatSnackBar implements OnDestroy {
      */
     private _snackBarRefAtThisLevel;
     /** The component that should be rendered as the snack bar's simple component. */
-    protected simpleSnackBarComponent: Type<TextOnlySnackBar>;
+    protected abstract simpleSnackBarComponent: Type<TextOnlySnackBar>;
     /** The container component that attaches the provided template or component. */
-    protected snackBarContainerComponent: Type<_SnackBarContainer>;
+    protected abstract snackBarContainerComponent: Type<_SnackBarContainer>;
     /** The CSS class to apply for handset mode. */
-    protected handsetCssClass: string;
+    protected abstract handsetCssClass: string;
     /** Reference to the currently opened snackbar at *any* level. */
     get _openedSnackBarRef(): MatSnackBarRef<any> | null;
     set _openedSnackBarRef(value: MatSnackBarRef<any> | null);
-    constructor(_overlay: Overlay, _live: LiveAnnouncer, _injector: Injector, _breakpointObserver: BreakpointObserver, _parentSnackBar: MatSnackBar, _defaultConfig: MatSnackBarConfig);
+    constructor(_overlay: Overlay, _live: LiveAnnouncer, _injector: Injector, _breakpointObserver: BreakpointObserver, _parentSnackBar: _MatSnackBarBase, _defaultConfig: MatSnackBarConfig);
     /**
      * Creates and dispatches a snack bar with a custom component for the content, removing any
      * currently opened snack bars.
@@ -94,6 +91,17 @@ export declare class MatSnackBar implements OnDestroy {
      * @param snackBarRef Reference to the snack bar.
      */
     private _createInjector;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MatSnackBarBase, [null, null, null, null, { optional: true; skipSelf: true; }, null]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<_MatSnackBarBase>;
+}
+/**
+ * Service to dispatch Material Design snack bar messages.
+ */
+export declare class MatSnackBar extends _MatSnackBarBase {
+    protected simpleSnackBarComponent: typeof SimpleSnackBar;
+    protected snackBarContainerComponent: typeof MatSnackBarContainer;
+    protected handsetCssClass: string;
+    constructor(overlay: Overlay, live: LiveAnnouncer, injector: Injector, breakpointObserver: BreakpointObserver, parentSnackBar: MatSnackBar, defaultConfig: MatSnackBarConfig);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBar, [null, null, null, null, { optional: true; skipSelf: true; }, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MatSnackBar>;
 }

package/tabs/public-api.d.ts

@@ -13,7 +13,7 @@ export { MatTabHeader, _MatTabHeaderBase } from './tab-header';
 export { MatTabLabelWrapper } from './tab-label-wrapper';
 export { MatTab, MAT_TAB_GROUP } from './tab';
 export { MatTabLabel, MAT_TAB } from './tab-label';
-export { MatTabNav, MatTabLink, _MatTabNavBase, _MatTabLinkBase } from './tab-nav-bar/index';
+export { MatTabNav, MatTabLink, MatTabNavPanel, _MatTabNavBase, _MatTabLinkBase, } from './tab-nav-bar/index';
 export { MatTabContent } from './tab-content';
 export { ScrollDirection } from './paginated-tab-header';
 export * from './tabs-animations';

package/tabs/tab-group.d.ts

@@ -28,7 +28,8 @@ declare const _MatTabGroupMixinBase: import("@angular/material/core")._Construct
     };
 };
 interface MatTabGroupBaseHeader {
-    _alignInkBarToSelectedTab: () => void;
+    _alignInkBarToSelectedTab(): void;
+    updatePagination(): void;
     focusIndex: number;
 }
 /**
@@ -110,6 +111,14 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
     ngOnDestroy(): void;
     /** Re-aligns the ink bar to the selected tab element. */
     realignInkBar(): void;
+    /**
+     * Recalculates the tab group's pagination dimensions.
+     *
+     * WARNING: Calling this method can be very costly in terms of performance. It should be called
+     * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
+     * page.
+     */
+    updatePagination(): void;
     /**
      * Sets focus to a particular tab.
      * @param index Index of the tab to be focused.

package/tabs/tab-nav-bar/tab-nav-bar.d.ts

@@ -23,6 +23,7 @@ export declare abstract class _MatTabNavBase extends MatPaginatedTabHeader imple
     /** Query list of all tab links of the tab navigation. */
     abstract _items: QueryList<MatPaginatedTabHeaderItem & {
         active: boolean;
+        id: string;
     }>;
     /** Background color of the tab nav. */
     get backgroundColor(): ThemePalette;
@@ -34,13 +35,20 @@ export declare abstract class _MatTabNavBase extends MatPaginatedTabHeader imple
     private _disableRipple;
     /** Theme color of the nav bar. */
     color: ThemePalette;
+    /**
+     * Associated tab panel controlled by the nav bar. If not provided, then the nav bar
+     * follows the ARIA link / navigation landmark pattern. If provided, it follows the
+     * ARIA tabs design pattern.
+     */
+    tabPanel?: MatTabNavPanel;
     constructor(elementRef: ElementRef, dir: Directionality, ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, platform: Platform, animationMode?: string);
     protected _itemSelected(): void;
     ngAfterContentInit(): void;
     /** Notifies the component that the active link has been changed. */
     updateActiveLink(): void;
+    _getRole(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabNavBase, [null, { optional: true; }, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabNavBase, never, never, { "backgroundColor": "backgroundColor"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabNavBase, never, never, { "backgroundColor": "backgroundColor"; "disableRipple": "disableRipple"; "color": "color"; "tabPanel": "tabPanel"; }, {}, never>;
 }
 /**
  * Navigation component matching the styles of the tab group header.
@@ -83,6 +91,8 @@ export declare class _MatTabLinkBase extends _MatTabLinkMixinBase implements Aft
      * @docs-private
      */
     get rippleDisabled(): boolean;
+    /** Unique id for the tab. */
+    id: string;
     constructor(_tabNavBar: _MatTabNavBase, 
     /** @docs-private */ elementRef: ElementRef, globalRippleOptions: RippleGlobalOptions | null, tabIndex: string, _focusMonitor: FocusMonitor, animationMode?: string);
     /** Focuses the tab link. */
@@ -90,8 +100,14 @@ export declare class _MatTabLinkBase extends _MatTabLinkMixinBase implements Aft
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     _handleFocus(): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    _getAriaControls(): string | null;
+    _getAriaSelected(): string | null;
+    _getAriaCurrent(): string | null;
+    _getRole(): string | null;
+    _getTabIndex(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabLinkBase, [null, null, { optional: true; }, { attribute: "tabindex"; }, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabLinkBase, never, never, { "active": "active"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabLinkBase, never, never, { "active": "active"; "id": "id"; }, {}, never>;
 }
 /**
  * Link inside of a `mat-tab-nav-bar`.
@@ -104,4 +120,15 @@ export declare class MatTabLink extends _MatTabLinkBase implements OnDestroy {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLink, [null, null, null, null, { optional: true; }, { attribute: "tabindex"; }, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabLink, "[mat-tab-link], [matTabLink]", ["matTabLink"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; }, {}, never>;
 }
+/**
+ * Tab panel component associated with MatTabNav.
+ */
+export declare class MatTabNavPanel {
+    /** Unique id for the tab panel. */
+    id: string;
+    /** Id of the active tab in the nav bar. */
+    _activeTabId?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNavPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNavPanel, "mat-tab-nav-panel", ["matTabNavPanel"], { "id": "id"; }, {}, never, ["*"]>;
+}
 export {};

package/tabs/tab.d.ts

@@ -42,6 +42,16 @@ export declare class MatTab extends _MatTabBase implements OnInit, CanDisable, O
      * Will be cleared if `aria-label` is set at the same time.
      */
     ariaLabelledby: string;
+    /**
+     * Classes to be passed to the tab label inside the mat-tab-header container.
+     * Supports string and string array values, same as `ngClass`.
+     */
+    labelClass: string | string[];
+    /**
+     * Classes to be passed to the tab mat-tab-body container.
+     * Supports string and string array values, same as `ngClass`.
+     */
+    bodyClass: string | string[];
     /** Portal that will be the hosted content of the tab */
     private _contentPortal;
     /** @docs-private */
@@ -74,6 +84,6 @@ export declare class MatTab extends _MatTabBase implements OnInit, CanDisable, O
      */
     protected _setTemplateLabelInput(value: MatTabLabel | undefined): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTab, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTab, "mat-tab", ["matTab"], { "disabled": "disabled"; "textLabel": "label"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; }, {}, ["templateLabel", "_explicitContent"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTab, "mat-tab", ["matTab"], { "disabled": "disabled"; "textLabel": "label"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "labelClass": "labelClass"; "bodyClass": "bodyClass"; }, {}, ["templateLabel", "_explicitContent"], ["*"]>;
 }
 export {};

package/tabs/tabs-module.d.ts

@@ -15,6 +15,6 @@ import * as i13 from "@angular/cdk/observers";
 import * as i14 from "@angular/cdk/a11y";
 export declare class MatTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatTabsModule, [typeof i1.MatTabGroup, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatInkBar, typeof i5.MatTabLabelWrapper, typeof i6.MatTabNav, typeof i6.MatTabLink, typeof i7.MatTabBody, typeof i7.MatTabBodyPortal, typeof i8.MatTabHeader, typeof i9.MatTabContent], [typeof i10.CommonModule, typeof i11.MatCommonModule, typeof i12.PortalModule, typeof i11.MatRippleModule, typeof i13.ObserversModule, typeof i14.A11yModule], [typeof i11.MatCommonModule, typeof i1.MatTabGroup, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i6.MatTabNav, typeof i6.MatTabLink, typeof i9.MatTabContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatTabsModule, [typeof i1.MatTabGroup, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatInkBar, typeof i5.MatTabLabelWrapper, typeof i6.MatTabNav, typeof i6.MatTabNavPanel, typeof i6.MatTabLink, typeof i7.MatTabBody, typeof i7.MatTabBodyPortal, typeof i8.MatTabHeader, typeof i9.MatTabContent], [typeof i10.CommonModule, typeof i11.MatCommonModule, typeof i12.PortalModule, typeof i11.MatRippleModule, typeof i13.ObserversModule, typeof i14.A11yModule], [typeof i11.MatCommonModule, typeof i1.MatTabGroup, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i6.MatTabNav, typeof i6.MatTabNavPanel, typeof i6.MatTabLink, typeof i9.MatTabContent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatTabsModule>;
 }

package/tabs/testing/tab-harness-filters.d.ts

@@ -24,3 +24,6 @@ export interface TabLinkHarnessFilters extends BaseHarnessFilters {
 /** A set of criteria that can be used to filter a list of `MatTabNavBarHarness` instances. */
 export interface TabNavBarHarnessFilters extends BaseHarnessFilters {
 }
+/** A set of criteria that can be used to filter a list of `MatTabNavBarHarness` instances. */
+export interface TabNavPanelHarnessFilters extends BaseHarnessFilters {
+}

package/tabs/testing/tab-nav-bar-harness.d.ts

@@ -8,6 +8,7 @@
 import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
 import { TabNavBarHarnessFilters, TabLinkHarnessFilters } from './tab-harness-filters';
 import { MatTabLinkHarness } from './tab-link-harness';
+import { MatTabNavPanelHarness } from './tab-nav-panel-harness';
 /** Harness for interacting with a standard mat-tab-nav-bar in tests. */
 export declare class MatTabNavBarHarness extends ComponentHarness {
     /** The selector for the host element of a `MatTabNavBar` instance. */
@@ -32,4 +33,6 @@ export declare class MatTabNavBarHarness extends ComponentHarness {
      *     will be clicked.
      */
     clickLink(filter?: TabLinkHarnessFilters): Promise<void>;
+    /** Gets the panel associated with the nav bar. */
+    getPanel(): Promise<MatTabNavPanelHarness>;
 }

package/tabs/testing/tab-nav-panel-harness.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @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 { ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { TabNavPanelHarnessFilters } from './tab-harness-filters';
+/** Harness for interacting with a standard mat-tab-nav-panel in tests. */
+export declare class MatTabNavPanelHarness extends ContentContainerComponentHarness {
+    /** The selector for the host element of a `MatTabNavPanel` instance. */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a `MatTabNavPanel` that meets
+     * certain criteria.
+     * @param options Options for filtering which tab nav panel instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: TabNavPanelHarnessFilters): HarnessPredicate<MatTabNavPanelHarness>;
+    /** Gets the tab panel text content. */
+    getTextContent(): Promise<string>;
+}

package/tooltip/tooltip.d.ts

@@ -147,11 +147,6 @@ export declare abstract class _MatTooltipBase<T extends _TooltipComponentBase> i
     toggle(): void;
     /** Returns true if the tooltip is currently visible to the user */
     _isTooltipVisible(): boolean;
-    /**
-     * Handles the keydown events on the host element.
-     * Needs to be an arrow function so that we can use it in addEventListener.
-     */
-    private _handleKeydown;
     /** Create the overlay config and position strategy */
     private _createOverlay;
     /** Detaches the currently-attached tooltip. */