@angular/material 13.2.0-next.1 → 13.2.2

package/sidenav/drawer.d.ts

@@ -11,7 +11,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
 import { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';
-import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, QueryList } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
@@ -45,7 +45,7 @@ export declare class MatDrawerContent extends CdkScrollable implements AfterCont
 /**
  * This component corresponds to a drawer that can be opened on the drawer container.
  */
-export declare class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestroy {
+export declare class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy {
     private _elementRef;
     private _focusTrapFactory;
     private _focusMonitor;
@@ -58,6 +58,10 @@ export declare class MatDrawer implements AfterContentInit, AfterContentChecked,
     private _elementFocusedBeforeDrawerWasOpened;
     /** Whether the drawer is initialized. Used for disabling the initial animation. */
     private _enableAnimations;
+    /** Whether the view of the component has been attached. */
+    private _isAttached;
+    /** Anchor node used to restore the drawer to its initial position. */
+    private _anchor;
     /** The side that the drawer is attached to. */
     get position(): 'start' | 'end';
     set position(value: 'start' | 'end');
@@ -109,6 +113,8 @@ export declare class MatDrawer implements AfterContentInit, AfterContentChecked,
     private readonly _destroyed;
     /** Event emitted when the drawer's position changes. */
     readonly onPositionChanged: EventEmitter<void>;
+    /** Reference to the inner element that contains all the content. */
+    _content: ElementRef<HTMLElement>;
     /**
      * An observable that emits when the drawer mode changes. This is used by the drawer container to
      * to know when to when the mode changes so it can adapt the margins on the content.
@@ -138,7 +144,7 @@ export declare class MatDrawer implements AfterContentInit, AfterContentChecked,
     private _restoreFocus;
     /** Whether focus is currently within the drawer. */
     private _isFocusWithinDrawer;
-    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     ngAfterContentChecked(): void;
     ngOnDestroy(): void;
     /**
@@ -168,6 +174,13 @@ export declare class MatDrawer implements AfterContentInit, AfterContentChecked,
     _getWidth(): number;
     /** Updates the enabled state of the focus trap. */
     private _updateFocusTrapState;
+    /**
+     * Updates the position of the drawer in the DOM. We need to move the element around ourselves
+     * when it's in the `end` position so that it comes after the content and the visual order
+     * matches the tab order. We also need to be able to move it back to `start` if the sidenav
+     * started off as `end` and was changed to `start`.
+     */
+    private _updatePositionInParent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawer, [null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawer, "mat-drawer", ["matDrawer"], { "position": "position"; "mode": "mode"; "disableClose": "disableClose"; "autoFocus": "autoFocus"; "opened": "opened"; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "openedStart": "openedStart"; "_closedStream": "closed"; "closedStart": "closedStart"; "onPositionChanged": "positionChanged"; }, never, ["*"]>;
 }

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/_tabs-common.scss

@@ -95,6 +95,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/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.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/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. */