@angular/material-experimental 13.3.3 → 14.0.0-next.10

package/mdc-tabs/_tabs-theme.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/tab-indicator' as mdc-tab-indicator;
@@ -6,15 +7,14 @@
 @use '@material/tab' as mdc-tab;
 @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';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
+  $config: mat.get-color-config($config-or-theme);
+  $primary: mat.get-color-from-palette(map.get($config, primary));
+  $accent: mat.get-color-from-palette(map.get($config, accent));
+  $warn: mat.get-color-from-palette(map.get($config, warn));
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-tab, .mat-mdc-tab-link {
@@ -110,8 +110,8 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2018-config(
+      mat.get-typography-config($config-or-theme));
   @include mdc-helpers.mat-using-mdc-typography($config) {
     @include mdc-tab.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -119,18 +119,18 @@
 }
 
 @mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+  $density-scale: mat.get-density-config($config-or-theme);
   .mat-mdc-tab-header {
     @include mdc-tab-bar.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-tabs') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-tabs') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);

package/mdc-tabs/tab-group.d.ts

@@ -24,7 +24,11 @@ export declare class MatTabGroup extends _MatTabGroupBase {
     get fitInkBarToContent(): boolean;
     set fitInkBarToContent(v: BooleanInput);
     private _fitInkBarToContent;
+    /** Whether tabs should be stretched to fill the header. */
+    get stretchTabs(): boolean;
+    set stretchTabs(v: BooleanInput);
+    private _stretchTabs;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabGroup, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": "color"; "disableRipple": "disableRipple"; "fitInkBarToContent": "fitInkBarToContent"; }, {}, ["_allTabs"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": "color"; "disableRipple": "disableRipple"; "fitInkBarToContent": "fitInkBarToContent"; "stretchTabs": "mat-stretch-tabs"; }, {}, ["_allTabs"], never>;
 }

package/mdc-tabs/tab-nav-bar/tab-nav-bar.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 { ElementRef, QueryList, OnDestroy, AfterContentInit, NgZone, ChangeDetectorRef, OnInit } from '@angular/core';
+import { ElementRef, QueryList, OnDestroy, AfterContentInit, AfterViewInit, NgZone, ChangeDetectorRef, OnInit } from '@angular/core';
 import { RippleGlobalOptions } from '@angular/material-experimental/mdc-core';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { _MatTabNavBase, _MatTabLinkBase, MatTabsConfig } from '@angular/material/tabs';
@@ -20,11 +20,15 @@ import * as i0 from "@angular/core";
  * Navigation component matching the styles of the tab group header.
  * Provides anchored navigation with animated ink bar.
  */
-export declare class MatTabNav extends _MatTabNavBase implements AfterContentInit {
+export declare class MatTabNav extends _MatTabNavBase implements AfterContentInit, AfterViewInit {
     /** Whether the ink bar should fit its width to the size of the tab label content. */
     get fitInkBarToContent(): boolean;
     set fitInkBarToContent(v: BooleanInput);
     _fitInkBarToContent: BehaviorSubject<boolean>;
+    /** Whether tabs should be stretched to fill the header. */
+    get stretchTabs(): boolean;
+    set stretchTabs(v: BooleanInput);
+    private _stretchTabs;
     _items: QueryList<MatTabLink>;
     _tabListContainer: ElementRef;
     _tabList: ElementRef;
@@ -34,8 +38,9 @@ export declare class MatTabNav extends _MatTabNavBase implements AfterContentIni
     _inkBar: MatInkBar;
     constructor(elementRef: ElementRef, dir: Directionality, ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, platform: Platform, animationMode?: string, defaultConfig?: MatTabsConfig);
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNav, [null, { optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "color": "color"; "fitInkBarToContent": "fitInkBarToContent"; }, {}, ["_items"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "color": "color"; "fitInkBarToContent": "fitInkBarToContent"; "stretchTabs": "mat-stretch-tabs"; }, {}, ["_items"], ["*"]>;
 }
 /**
  * Link inside of a `mat-tab-nav-bar`.

package/mdc-theming/_all-theme.scss

@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 @use '../mdc-core/core-theme';
 @use '../mdc-autocomplete/autocomplete-theme';
 @use '../mdc-button/button-theme';
@@ -22,11 +24,10 @@
 @use '../mdc-progress-spinner/progress-spinner-theme';
 @use '../mdc-input/input-theme';
 @use '../mdc-form-field/form-field-theme';
-@use '../../material/core/theming/theming';
 
 @mixin all-mdc-component-themes($theme-or-color-config) {
   $dedupe-key: 'angular-material-mdc-theme';
-  @include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
+  @include mat.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
     @include core-theme.theme($theme-or-color-config);
     @include autocomplete-theme.theme($theme-or-color-config);
     @include button-theme.theme($theme-or-color-config);