@angular/material-experimental 14.0.0-next.8 → 14.0.0-next.9

package/mdc-radio/_radio-theme.scss

@@ -1,11 +1,10 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/radio/radio' as mdc-radio;
 @use '@material/form-field' as mdc-form-field;
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 @mixin _color-palette($color-palette) {
   @include mdc-radio-theme.theme((
@@ -19,10 +18,10 @@
 }
 
 @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) {
     $on-surface: rgba(mdc-theme-color.$on-surface, 0.54);
@@ -58,8 +57,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-radio.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
     @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
@@ -67,7 +66,7 @@
 }
 
 @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-radio-button .mdc-radio {
     @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
@@ -80,11 +79,11 @@
 }
 
 @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-radio') {
-    $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-radio') {
+    $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-select/_select-theme.scss

@@ -1,10 +1,10 @@
+@use '@angular/material' as mat;
 @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/typography' as mdc-typography;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
 
 // Gets the color to use for some text that is highlighted while a select has focus.
 @function _get-mdc-focused-text-color($palette) {
@@ -12,7 +12,7 @@
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     $disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38);
@@ -62,8 +62,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-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);
 
@@ -80,11 +80,11 @@
 @mixin density($config-or-theme) {}
 
 @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-select') {
-    $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-select') {
+    $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-slide-toggle/_slide-toggle-theme.scss

@@ -1,12 +1,11 @@
 @use 'sass:map';
 @use 'sass:color';
+@use '@angular/material' as mat;
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/theme/color-palette' as mdc-color-palette;
 @use '@material/form-field' as mdc-form-field;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/theming/theming';
-@use '../../material/core/theming/palette';
 
 // Generates all color mapping for the properties that only change based on the theme.
 @function _get-theme-base-map($is-dark) {
@@ -70,10 +69,10 @@
 }
 
 @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));
   $is-dark: map.get($config, is-dark);
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
@@ -99,27 +98,27 @@
 }
 
 @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-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @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-slide-toggle {
     @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
   }
 }
 
 @mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
 
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
+    $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-slider/_slider-theme.scss

@@ -1,15 +1,14 @@
 @use 'sass:map';
 
+@use '@angular/material' as mat;
 @use '@material/slider/slider' as mdc-slider;
 @use '@material/slider/slider-theme';
 @use '@material/theme/variables' as theme-variables;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/typography/typography';
-@use '../../material/core/ripple/ripple-theme';
-@use '../../material/core/theming/theming';
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   @include mdc-helpers.mat-using-mdc-theme($config) {
     @include mdc-slider.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
 
@@ -47,8 +46,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-slider.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -57,11 +56,11 @@
 @mixin density($config-or-theme) {}
 
 @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-slider') {
-    $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-slider') {
+    $color: mat.get-color-config($theme);
+    $density: mat.get-density-config($theme);
+    $typography: mat.get-typography-config($theme);
 
     @if $color != null {
       @include color($color);
@@ -112,7 +111,7 @@
     $query: mdc-helpers.$mat-theme-styles-query
   );
   $ripple-color: map.get(theme-variables.$property-values, $color);
-  @include ripple-theme.color((
+  @include mat.ripple-color((
     foreground: (
       base: $ripple-color
     ),

package/mdc-slider/slider.d.ts

@@ -296,6 +296,10 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     private _SUPPORTS_POINTER_EVENTS;
     /** Subscription to changes to the directionality (LTR / RTL) context for the application. */
     private _dirChangeSubscription;
+    /** Observer used to monitor size changes in the slider. */
+    private _resizeObserver;
+    /** Timeout used to debounce resize listeners. */
+    private _resizeTimer;
     constructor(_ngZone: NgZone, _cdr: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _platform: Platform, _globalChangeAndInputListener: GlobalChangeAndInputListener<'input' | 'change'>, document: any, _dir: Directionality, _globalRippleOptions?: RippleGlobalOptions | undefined, animationMode?: string);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -361,6 +365,8 @@ export declare class MatSlider extends _MatSliderMixinBase implements AfterViewI
     _getTickMarkClass(tickMark: TickMark): string;
     /** Whether the slider thumb ripples should be disabled. */
     _isRippleDisabled(): boolean;
+    /** Starts observing and updating the slider if the host changes its size. */
+    private _observeHostResize;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlider, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatSlider, "mat-slider", ["matSlider"], { "color": "color"; "disableRipple": "disableRipple"; "disabled": "disabled"; "discrete": "discrete"; "showTickMarks": "showTickMarks"; "min": "min"; "max": "max"; "step": "step"; "displayWith": "displayWith"; }, {}, ["_inputs"], ["*"]>;
 }

package/mdc-snack-bar/_snack-bar-theme.scss

@@ -1,13 +1,13 @@
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/snackbar' as mdc-snackbar;
 @use 'sass:color';
 @use 'sass:map';
+
 @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);
+  $config: mat.get-color-config($config-or-theme);
 
   $orig-fill-color: mdc-snackbar.$fill-color;
   $orig-label-ink-color: mdc-snackbar.$label-ink-color;
@@ -41,7 +41,7 @@
   .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action.mdc-snackbar__action {
     $is-dark-theme: map.get($config, is-dark);
     $accent: map.get($config, accent);
-    color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text));
+    color: if($is-dark-theme, inherit, mat.get-color-from-palette($accent, text));
 
     .mat-ripple-element {
       background-color: currentColor;
@@ -51,8 +51,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-snackbar.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
@@ -61,11 +61,11 @@
 @mixin density($config-or-theme) {}
 
 @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-snack-bar') {
-    $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-snack-bar') {
+    $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-table/_table-theme.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/data-table/data-table' as mdc-data-table;
 @use '@material/data-table' as mdc-data-table-theme;
+
 @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);
+  $config: mat.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-selected-row-fill-color: mdc-data-table-theme.$selected-row-fill-color;
@@ -38,20 +38,20 @@
 
   .mat-mdc-table {
     $background: map.get($config, background);
-    background: theming.get-color-from-palette($background, 'card');
+    background: mat.get-color-from-palette($background, 'card');
   }
 }
 
 @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-data-table.table-styles($query: mdc-helpers.$mat-typography-styles-query);
   }
 }
 
 @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-table {
     @include mdc-data-table-theme.density($density-scale,
       $query: mdc-helpers.$mat-base-styles-query);
@@ -59,11 +59,11 @@
 }
 
 @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-table') {
-    $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-table') {
+    $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/_tabs-common.scss

@@ -1,9 +1,10 @@
+@use '@angular/cdk';
+@use '@angular/material' as mat;
 @use '@material/ripple' as mdc-ripple;
 @use '@material/tab' as mdc-tab;
 @use '@material/tab-indicator' as mdc-tab-indicator;
 @use 'sass:map';
-@use '../../material/core/style/vendor-prefixes';
-@use '../../cdk/a11y';
+
 @use '../mdc-helpers/mdc-helpers';
 
 $mat-tab-animation-duration: 500ms !default;
@@ -71,7 +72,7 @@ $mat-tab-animation-duration: 500ms !default;
 
     // The usual focus indication is color-based so it won't show up in
     // high contrast mode. Add an outline which is a bit more visible.
-    @include a11y.high-contrast {
+    @include cdk.high-contrast {
       $outline-width: 2px;
       outline: dotted $outline-width;
       outline-offset: -$outline-width; // Not supported on IE, but looks better everywhere else.
@@ -94,7 +95,7 @@ $mat-tab-animation-duration: 500ms !default;
   }
 
   .mat-mdc-tab-header-pagination {
-    @include vendor-prefixes.user-select(none);
+    @include mat.private-user-select(none);
     position: relative;
     display: none;
     justify-content: center;

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-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);