@angular/material-experimental 13.2.0-next.0 → 13.2.1

package/mdc-select/_select-theme.scss

@@ -1,7 +1,6 @@
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list/evolution-mixins' as mdc-list;
-@use '@material/select' as mdc-select;
 @use '@material/typography' as mdc-typography;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
@@ -15,38 +14,25 @@
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
 
-  // Save original values of MDC global variables. We need to save these so we can restore the
-  // variables to their original values and prevent unintended side effects from using this mixin.
-  $orig-ink-color: mdc-select.$ink-color;
-  $orig-label-color: mdc-select.$label-color;
-  $orig-disabled-label-color: mdc-select.$disabled-label-color;
-  $orig-dropdown-icon-color: mdc-select.$dropdown-icon-color;
-  $orig-disabled-dropdown-icon-color: mdc-select.$disabled-dropdown-icon-color;
-
   @include mdc-helpers.mat-using-mdc-theme($config) {
-    mdc-select.$ink-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
-    mdc-select.$label-color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
-    mdc-select.$disabled-label-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
-    mdc-select.$dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
-    mdc-select.$disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
-
+    $disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
     @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
     @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
 
     .mat-mdc-select-value {
-      color: mdc-select.$ink-color;
+      color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
     }
 
     .mat-mdc-select-placeholder {
-      color: mdc-select.$label-color;
+      color: rgba(mdc-theme-color.prop-value(on-surface), 0.6);
     }
 
     .mat-mdc-select-disabled .mat-mdc-select-value {
-      color: mdc-select.$disabled-label-color;
+      color: $disabled-color;
     }
 
     .mat-mdc-select-arrow {
-      color: mdc-select.$dropdown-icon-color;
+      color: rgba(mdc-theme-color.prop-value(on-surface), 0.54);
     }
 
     .mat-mdc-form-field {
@@ -69,17 +55,10 @@
       }
 
       .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
-        color: mdc-select.$disabled-dropdown-icon-color;
+        color: $disabled-color;
       }
     }
   }
-
-  // Restore original values of MDC global variables.
-  mdc-select.$ink-color: $orig-ink-color;
-  mdc-select.$label-color: $orig-label-color;
-  mdc-select.$disabled-label-color: $orig-disabled-label-color;
-  mdc-select.$dropdown-icon-color: $orig-dropdown-icon-color;
-  mdc-select.$disabled-dropdown-icon-color: $orig-disabled-dropdown-icon-color;
 }
 
 @mixin typography($config-or-theme) {

package/mdc-slider/slider.d.ts

@@ -44,8 +44,10 @@ export declare class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
     disableRipple: boolean;
     /** The MatRipple for this slider thumb. */
     private readonly _ripple;
-    /** The slider thumb knob */
+    /** The slider thumb knob. */
     _knob: ElementRef<HTMLElement>;
+    /** The slider thumb value indicator container. */
+    _valueIndicatorContainer: ElementRef<HTMLElement>;
     /** The slider input corresponding to this slider thumb. */
     private _sliderInput;
     /** The RippleRef for the slider thumbs hover state. */
@@ -83,6 +85,11 @@ export declare class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
     _getHostElement(): HTMLElement;
     /** Gets the native HTML element of the slider thumb knob. */
     _getKnob(): HTMLElement;
+    /**
+     * Gets the native HTML element of the slider thumb value indicator
+     * container.
+     */
+    _getValueIndicatorContainer(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSliderVisualThumb, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatSliderVisualThumb, "mat-slider-visual-thumb", never, { "discrete": "discrete"; "thumbPosition": "thumbPosition"; "valueIndicatorText": "valueIndicatorText"; "disableRipple": "disableRipple"; }, {}, never, never>;
 }
@@ -336,6 +343,11 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     _getThumbElement(thumbPosition: Thumb): HTMLElement;
     /** Gets the slider knob HTML element of the given thumb position. */
     _getKnobElement(thumbPosition: Thumb): HTMLElement;
+    /**
+     * Gets the slider value indicator container HTML element of the given thumb
+     * position.
+     */
+    _getValueIndicatorContainerElement(thumbPosition: Thumb): HTMLElement;
     /**
      * Sets the value indicator text of the given thumb position using the given value.
      *

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

@@ -9,6 +9,6 @@ import * as i7 from "@angular/material-experimental/mdc-button";
 import * as i8 from "@angular/material-experimental/mdc-core";
 export declare class MatSnackBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSnackBarModule, [typeof i1.MatSimpleSnackBar, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction], [typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.CommonModule, typeof i7.MatButtonModule, typeof i8.MatCommonModule], [typeof i8.MatCommonModule, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSnackBarModule, [typeof i1.SimpleSnackBar, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction], [typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.CommonModule, typeof i7.MatButtonModule, typeof i8.MatCommonModule], [typeof i8.MatCommonModule, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSnackBarModule>;
 }

package/mdc-snack-bar/public-api.d.ts

@@ -10,4 +10,4 @@ export * from './snack-bar-container';
 export * from './snack-bar-content';
 export * from './snack-bar';
 export * from './module';
-export { MatSnackBarConfig, MatSnackBarDismiss, MatSnackBarRef, SimpleSnackBar, MAT_SNACK_BAR_DATA, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, TextOnlySnackBar, matSnackBarAnimations, } from '@angular/material/snack-bar';
+export { MatSnackBarConfig, MatSnackBarDismiss, MatSnackBarRef, MAT_SNACK_BAR_DATA, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition, TextOnlySnackBar, matSnackBarAnimations, } from '@angular/material/snack-bar';

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

@@ -1,6 +1,6 @@
-import { TextOnlySnackBar, MatSnackBarRef, SimpleSnackBar } from '@angular/material/snack-bar';
+import { TextOnlySnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import * as i0 from "@angular/core";
-export declare class MatSimpleSnackBar implements TextOnlySnackBar {
+export declare class SimpleSnackBar implements TextOnlySnackBar {
     snackBarRef: MatSnackBarRef<SimpleSnackBar>;
     data: {
         message: string;
@@ -14,6 +14,6 @@ export declare class MatSimpleSnackBar implements TextOnlySnackBar {
     action(): void;
     /** If the action button should be shown. */
     get hasAction(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSimpleSnackBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSimpleSnackBar, "mat-simple-snack-bar", ["matSnackBar"], {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleSnackBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleSnackBar, "simple-snack-bar", ["matSnackBar"], {}, {}, never, never>;
 }

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

@@ -1,14 +1,26 @@
-import { MatSnackBar as BaseMatSnackBar } from '@angular/material/snack-bar';
-import { MatSimpleSnackBar } from './simple-snack-bar';
+/**
+ * @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 { LiveAnnouncer } from '@angular/cdk/a11y';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { Overlay } from '@angular/cdk/overlay';
+import { Injector } from '@angular/core';
+import { MatSnackBarConfig, _MatSnackBarBase } from '@angular/material/snack-bar';
+import { SimpleSnackBar } from './simple-snack-bar';
 import { MatSnackBarContainer } from './snack-bar-container';
 import * as i0 from "@angular/core";
 /**
  * Service to dispatch Material Design snack bar messages.
  */
-export declare class MatSnackBar extends BaseMatSnackBar {
-    protected simpleSnackBarComponent: typeof MatSimpleSnackBar;
+export declare class MatSnackBar extends _MatSnackBarBase {
+    protected simpleSnackBarComponent: typeof SimpleSnackBar;
     protected snackBarContainerComponent: typeof MatSnackBarContainer;
     protected handsetCssClass: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBar, never>;
+    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/mdc-table/_table-theme.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/data-table/data-table' as mdc-data-table;
-@use '@material/data-table/data-table-theme' as mdc-data-table-theme;
+@use '@material/data-table' as mdc-data-table-theme;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
 @use '../../material/core/theming/theming';

package/mdc-tabs/_tabs-common.scss

@@ -11,7 +11,7 @@ $mat-tab-animation-duration: 500ms !default;
 // Combines the various structural styles we need for the tab group and tab nav bar.
 @mixin structural-styles {
   @include mdc-helpers.disable-fallback-declarations {
-    @include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-tab.static-styles($query: mdc-helpers.$mat-base-styles-query);
     @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
   }
 
@@ -51,6 +51,13 @@ $mat-tab-animation-duration: 500ms !default;
     pointer-events: none;
   }
 
+  // Required for `fitInkBarToContent` to work. This used to be included with MDC's `without-ripple`
+  // mixin, but that no longer appears to be the case with `static-styles`. Since the latter is
+  // ~10kb smaller, we include this one extra style ourselves.
+  .mdc-tab__content {
+    @include mdc-tab-indicator.surface;
+  }
+
   // We need to handle the hover and focus indication ourselves, because we don't use MDC's ripple.
   &:hover .mdc-tab__ripple::before {
     opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);

package/mdc-tabs/_tabs-theme.scss

@@ -4,7 +4,7 @@
 @use '@material/tab-indicator' as mdc-tab-indicator;
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab' as mdc-tab;
-@use '@material/tab/tab-theme' as mdc-tab-theme;
+@use '@material/tab/mixins' as mdc-tab-mixins;
 @use '@material/tab-bar' as mdc-tab-bar;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
@@ -18,39 +18,9 @@
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-tab, .mat-mdc-tab-link {
-      $surface: mdc-theme-color.$surface;
-      $on-surface: rgba(mdc-theme-color.$on-surface, 0.6);
-
-      // TODO(crisbeto): these styles should actually be set through the `theme` mixin while the
-      // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
-      // they are not, because `theme-styles` outputs the token values directly, rather than
-      // generating CSS variables.
-      @include mdc-tab-theme.primary-navigation-tab-theme-styles(map.merge(
-          mdc-tab-theme.$primary-light-theme,
-          (
-            container-color: $surface,
-            inactive-focus-state-layer-color: $on-surface,
-            inactive-hover-state-layer-color: $on-surface,
-            inactive-pressed-state-layer-color: $on-surface,
-            with-icon-inactive-focus-icon-color: $on-surface,
-            with-icon-inactive-hover-icon-color: $on-surface,
-            with-icon-inactive-icon-color: $on-surface,
-            with-icon-inactive-pressed-icon-color: $on-surface,
-            with-label-text-inactive-focus-label-text-color: $on-surface,
-            with-label-text-inactive-hover-label-text-color: $on-surface,
-            with-label-text-inactive-label-text-color: $on-surface,
-            with-label-text-inactive-pressed-label-text-color: $on-surface,
-
-            // TODO(crisbeto): MDC's styles are set up so that the icon size is set through a
-            // `font-size` at the root of the tab while the text size of the tab is set on
-            // `.mdc-tab__text-label` which overrides the one from the root. The problem is that
-            // the `$light-theme` is looking for a `subhead2` level which doesn't exist in MDC's
-            // code which in turn causes no text label styles to be emitted and for the icon size
-            // to be applied to the entire tab. Since we don't support icons inside the tab
-            // anyway, we can temporarily work around it by preventing MDC from emitting icon
-            // styles. The correct label typography will be applied by our theme instead.
-            with-icon-icon-size: null
-          )));
+      &:not(.mat-mdc-tab-disabled) {
+        @include mdc-tab-mixins.text-label-color(rgba(mdc-theme-color.$on-surface, 0.6));
+      }
 
       // MDC seems to include a background color on tabs which only stands out on dark themes.
       // Disable for now for backwards compatibility. These styles are inside the theme in order
@@ -125,27 +95,10 @@
 
 @mixin _palette-styles($color) {
   .mat-mdc-tab, .mat-mdc-tab-link {
-    // TODO(crisbeto): these styles should actually be set through the `theme` mixin while the
-    // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
-    // they are not, because `theme-styles` outputs the token values directly, rather than
-    // generating CSS variables.
-    @include mdc-tab-theme.primary-navigation-tab-theme-styles((
-      active-focus-state-layer-color: $color,
-      active-hover-state-layer-color: $color,
-      active-pressed-state-layer-color: $color,
-      with-icon-active-focus-icon-color: $color,
-      with-icon-active-hover-icon-color: $color,
-      with-icon-active-icon-color: $color,
-      with-icon-active-pressed-icon-color: $color,
-      with-label-text-active-focus-label-text-color: $color,
-      with-label-text-active-hover-label-text-color: $color,
-      with-label-text-active-label-text-color: $color,
-      with-label-text-active-pressed-label-text-color: $color,
-    ));
-
-    @include mdc-tab-indicator-theme.theme-styles((
-      active-indicator-color: $color
-    ));
+    &:not(.mat-mdc-tab-disabled) {
+      @include mdc-tab-mixins.active-text-label-color($color);
+      @include mdc-tab-indicator-theme.theme-styles((active-indicator-color: $color));
+    }
   }
 
   .mdc-tab__ripple::before,

package/mdc-tabs/module.d.ts

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

package/mdc-tabs/public-api.d.ts

@@ -14,5 +14,5 @@ export { MatTab } from './tab';
 export { MatInkBar } from './ink-bar';
 export { MatTabHeader } from './tab-header';
 export { MatTabGroup } from './tab-group';
-export { MatTabNav, MatTabLink } from './tab-nav-bar/tab-nav-bar';
+export { MatTabNav, MatTabNavPanel, MatTabLink } from './tab-nav-bar/tab-nav-bar';
 export { MatTabBodyPositionState, MatTabBodyOriginState, matTabsAnimations, _MatInkBarPositioner, _MAT_INK_BAR_POSITIONER, MatTabChangeEvent, MatTabHeaderPosition, MatTabsConfig, MAT_TABS_CONFIG, MAT_TAB_GROUP, MAT_TAB, ScrollDirection, } from '@angular/material/tabs';

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

@@ -50,3 +50,14 @@ export declare class MatTabLink extends _MatTabLinkBase implements MatInkBarItem
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLink, [null, null, { optional: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<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, ["*"]>;
+}

package/mdc-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/mdc-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 an MDC-based 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/mdc-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>;
+}