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

package/mdc-tooltip/_tooltip-theme.scss

@@ -1,41 +1,40 @@
 @use 'sass:map';
+@use '@angular/material' as mat;
 @use '@material/tooltip/tooltip';
 @use '@material/tooltip' as tooltip-theme;
+
 @use '../mdc-helpers/mdc-helpers';
-@use '../../material/core/theming/theming';
-@use '../../material/core/theming/palette';
-@use '../../material/core/typography/typography';
 
 @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 tooltip.core-styles($query: mdc-helpers.$mat-theme-styles-query);
     // We are defining our own tooltip background color because of concerns
     // surrounding the 0.6 background color opacity of the MDC tooltip styles.
     @include tooltip-theme.fill-color(
-      map.get(palette.$light-theme-background-palette, tooltip)
+      map.get(mat.$light-theme-background-palette, tooltip)
     );
   }
 }
 
 @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 tooltip.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);
 }
 
 @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-tooltip') {
-    $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-tooltip') {
+    $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-typography/_all-typography.scss

@@ -1,8 +1,8 @@
+@use '@angular/material' as mat;
 @use '@material/typography' as mdc-typography;
 @use 'sass:map';
+
 @use '../mdc-theming/all-theme';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
 @use '../mdc-helpers/mdc-helpers';
 
 /// Generates an Angular Material typography config based on values from the official Material
@@ -73,12 +73,12 @@
 }
 
 @mixin all-mdc-component-typographies($config-or-theme: null) {
-  $config: if(theming.private-is-theme-object($config-or-theme),
-      theming.get-typography-config($config-or-theme), $config-or-theme);
+  $config: if(mat.private-is-theme-object($config-or-theme),
+      mat.get-typography-config($config-or-theme), $config-or-theme);
 
   // If no actual color configuration has been specified, create a default one.
   @if $config == null {
-    $config: typography.define-typography-config();
+    $config: mat.define-typography-config();
   }
 
   @include all-theme.all-mdc-component-themes((

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "14.0.0-next.8",
+  "version": "14.0.0-next.9",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -426,15 +426,61 @@
   },
   "peerDependencies": {
     "@angular/animations": "^14.0.0-0 || ^15.0.0",
-    "@angular/cdk": "14.0.0-next.8",
+    "@angular/cdk": "14.0.0-next.9",
     "@angular/core": "^14.0.0-0 || ^15.0.0",
     "@angular/common": "^14.0.0-0 || ^15.0.0",
     "@angular/forms": "^14.0.0-0 || ^15.0.0",
     "@angular/platform-browser": "^14.0.0-0 || ^15.0.0",
-    "@angular/material": "14.0.0-next.8",
-    "material-components-web": "14.0.0-canary.9736ddce9.0"
+    "@angular/material": "14.0.0-next.9"
   },
   "dependencies": {
+    "@material/animation": "14.0.0-canary.9736ddce9.0",
+    "@material/auto-init": "14.0.0-canary.9736ddce9.0",
+    "@material/banner": "14.0.0-canary.9736ddce9.0",
+    "@material/base": "14.0.0-canary.9736ddce9.0",
+    "@material/button": "14.0.0-canary.9736ddce9.0",
+    "@material/card": "14.0.0-canary.9736ddce9.0",
+    "@material/checkbox": "14.0.0-canary.9736ddce9.0",
+    "@material/chips": "14.0.0-canary.9736ddce9.0",
+    "@material/circular-progress": "14.0.0-canary.9736ddce9.0",
+    "@material/data-table": "14.0.0-canary.9736ddce9.0",
+    "@material/density": "14.0.0-canary.9736ddce9.0",
+    "@material/dialog": "14.0.0-canary.9736ddce9.0",
+    "@material/dom": "14.0.0-canary.9736ddce9.0",
+    "@material/drawer": "14.0.0-canary.9736ddce9.0",
+    "@material/elevation": "14.0.0-canary.9736ddce9.0",
+    "@material/fab": "14.0.0-canary.9736ddce9.0",
+    "@material/feature-targeting": "14.0.0-canary.9736ddce9.0",
+    "@material/floating-label": "14.0.0-canary.9736ddce9.0",
+    "@material/form-field": "14.0.0-canary.9736ddce9.0",
+    "@material/icon-button": "14.0.0-canary.9736ddce9.0",
+    "@material/image-list": "14.0.0-canary.9736ddce9.0",
+    "@material/layout-grid": "14.0.0-canary.9736ddce9.0",
+    "@material/line-ripple": "14.0.0-canary.9736ddce9.0",
+    "@material/linear-progress": "14.0.0-canary.9736ddce9.0",
+    "@material/list": "14.0.0-canary.9736ddce9.0",
+    "@material/menu": "14.0.0-canary.9736ddce9.0",
+    "@material/menu-surface": "14.0.0-canary.9736ddce9.0",
+    "@material/notched-outline": "14.0.0-canary.9736ddce9.0",
+    "@material/radio": "14.0.0-canary.9736ddce9.0",
+    "@material/ripple": "14.0.0-canary.9736ddce9.0",
+    "@material/rtl": "14.0.0-canary.9736ddce9.0",
+    "@material/segmented-button": "14.0.0-canary.9736ddce9.0",
+    "@material/select": "14.0.0-canary.9736ddce9.0",
+    "@material/shape": "14.0.0-canary.9736ddce9.0",
+    "@material/slider": "14.0.0-canary.9736ddce9.0",
+    "@material/snackbar": "14.0.0-canary.9736ddce9.0",
+    "@material/switch": "14.0.0-canary.9736ddce9.0",
+    "@material/tab": "14.0.0-canary.9736ddce9.0",
+    "@material/tab-bar": "14.0.0-canary.9736ddce9.0",
+    "@material/tab-indicator": "14.0.0-canary.9736ddce9.0",
+    "@material/tab-scroller": "14.0.0-canary.9736ddce9.0",
+    "@material/textfield": "14.0.0-canary.9736ddce9.0",
+    "@material/theme": "14.0.0-canary.9736ddce9.0",
+    "@material/tooltip": "14.0.0-canary.9736ddce9.0",
+    "@material/top-app-bar": "14.0.0-canary.9736ddce9.0",
+    "@material/touch-target": "14.0.0-canary.9736ddce9.0",
+    "@material/typography": "14.0.0-canary.9736ddce9.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,

package/popover-edit/_popover-edit-theme.scss

@@ -1,21 +1,17 @@
 @use 'sass:map';
-@use '../../cdk/a11y';
-@use '../../material/core/style/variables';
-@use '../../material/core/style/private';
-@use '../../material/core/theming/theming';
-@use '../../material/core/typography/typography';
-@use '../../material/core/typography/typography-utils';
+@use '@angular/cdk';
+@use '@angular/material' as mat;
 
 @function _hover-content-background($direction, $background-color) {
   @return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
 }
 
 @mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
+  $config: mat.get-color-config($config-or-theme);
   $background: map.get($config, background);
   $foreground: map.get($config, foreground);
   $primary: map.get($config, primary);
-  $background-color: theming.get-color-from-palette($background, 'card');
+  $background-color: mat.get-color-from-palette($background, 'card');
 
   // TODO: these structural styles don't belong in the `color` part of a theme.
   // We should figure out a better place for them.
@@ -33,7 +29,8 @@
     position: absolute;
     right: 0;
     top: 0;
-    transition: opacity variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
+    transition: opacity mat.$private-swift-ease-in-duration
+      mat.$private-swift-ease-in-timing-function;
   }
 
   .mat-row-hover-content-rtl {
@@ -50,7 +47,7 @@
     position: relative;
 
     &::after {
-      background-color: theming.get-color-from-palette($primary);
+      background-color: mat.get-color-from-palette($primary);
       bottom: 0;
       content: '';
       height: 2px;
@@ -60,8 +57,8 @@
       right: 0;
       transform-origin: 50%;
       transform: scaleX(0.5);
-      transition: background-color variables.$swift-ease-in-duration
-        variables.$swift-ease-in-timing-function;
+      transition: background-color mat.$private-swift-ease-in-duration
+        mat.$private-swift-ease-in-timing-function;
       visibility: hidden;
     }
 
@@ -71,22 +68,22 @@
       &::after {
         opacity: 1;
         transform: scaleX(1);
-        transition: transform 300ms variables.$swift-ease-out-timing-function,
-                    opacity 100ms variables.$swift-ease-out-timing-function,
-                    background-color 300ms variables.$swift-ease-out-timing-function;
+        transition: transform 300ms mat.$private-swift-ease-out-timing-function,
+                    opacity 100ms mat.$private-swift-ease-out-timing-function,
+                    background-color 300ms mat.$private-swift-ease-out-timing-function;
         visibility: visible;
       }
     }
   }
 
   .mat-edit-pane {
-    @include private.private-theme-elevation(2, $config);
+    @include mat.private-theme-elevation(2, $config);
     background: $background-color;
-    color: theming.get-color-from-palette($foreground, text);
+    color: mat.get-color-from-palette($foreground, text);
     display: block;
     padding: 16px 24px;
 
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       // Note that normally we use 1px for high contrast outline, however here we use 3,
       // because the popover is rendered on top of a table which already has some borders
       // and doesn't have a backdrop. The thicker outline makes it easier to differentiate.
@@ -147,10 +144,10 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
+  $config: mat.private-typography-to-2014-config(
+      mat.get-typography-config($config-or-theme));
   [mat-edit-title] {
-    @include typography-utils.typography-level($config, title);
+    @include mat.typography-level($config, title);
   }
 }
 
@@ -158,11 +155,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-popover-edit') {
-    $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-popover-edit') {
+    $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/selection/_selection.scss

@@ -1,8 +1,8 @@
-@use '../../material/core/theming/theming';
+@use '@angular/material' as mat;
 
 @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-selection');
+  $theme: mat.private-legacy-get-theme($theme-or-color-config);
+  @include mat.private-check-duplicate-theme-styles($theme, 'mat-selection');
 }
 
 @mixin typography($config-or-theme) {}