@angular/material 14.0.0-next.7 → 14.0.0-rc.0

package/core/ripple/_ripple.scss

@@ -1,4 +1,4 @@
-@use '../../../cdk/a11y';
+@use '@angular/cdk';
 
 @mixin ripple() {
   // The host element of an mat-ripple directive should always have a position of "absolute" or
@@ -36,7 +36,7 @@
     transform: scale3d(0, 0, 0);
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.
-    @include a11y.high-contrast(active, off) {
+    @include cdk.high-contrast(active, off) {
       display: none;
     }
   }

package/core/style/_menu-common.scss

@@ -1,4 +1,5 @@
-@use '../../../cdk/a11y';
+@use '@angular/cdk';
+
 @use './list-common';
 @use './layout-common';
 
@@ -84,7 +85,7 @@ $icon-margin: 16px !default;
   }
 
   // Fix for Chromium-based browsers blending in the `currentColor` with the background.
-  @include a11y.high-contrast(active, off) {
+  @include cdk.high-contrast(active, off) {
     fill: CanvasText;
   }
 }

package/core/style/_private.scss

@@ -22,20 +22,11 @@
 // NOTE: Currently this mixin should only be used with components that do not
 // have any projected content.
 @mixin private-animation-noop() {
-  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
-  // done to allow a class to be added to be added to base of the scss nesting
-  // context.
-  // For example:
-  // .my-root {
-  //   .my-subclass {
-  //      @include mat-private-animation-noop();
-  //    }
-  // }
-  // results in:
-  // ._mat-animation-noopable.my-root .my-subclass { ... }
-  @at-root ._mat-animation-noopable#{&} {
-    transition: none;
-    animation: none;
+  &._mat-animation-noopable {
+    // Use !important here since we don't know what context this mixin will
+    // be included in and MDC can have some really specific selectors.
+    transition: none !important;
+    animation: none !important;
     @content;
   }
 }

package/core/style/_vendor-prefixes.scss

@@ -1,7 +1,6 @@
 // stylelint-disable material/no-prefixes
 @mixin user-select($value) {
   -webkit-user-select: $value;
-  -moz-user-select: $value;
   user-select: $value;
 }
 
@@ -25,27 +24,12 @@
   }
 }
 
-@mixin cursor-grab {
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-
-@mixin cursor-grabbing {
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
-}
-
 @mixin backface-visibility($value) {
   -webkit-backface-visibility: $value;
   backface-visibility: $value;
 }
 
-@mixin position-sticky($important: false) {
-  position: -webkit-sticky #{if($important, '!important', '')};
-  position: sticky #{if($important, '!important', '')};
-}
-
-@mixin private-color-adjust($value) {
+@mixin color-adjust($value) {
   -webkit-print-color-adjust: $value;
   color-adjust: $value;
 }

package/core/testing/index.d.ts

@@ -1,8 +1,64 @@
-/**
- * @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
- */
-export * from './public-api';
+import { BaseHarnessFilters } from '@angular/cdk/testing';
+import { ComponentHarness } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+
+/** Harness for interacting with a `mat-optgroup` in tests. */
+export declare class MatOptgroupHarness extends ComponentHarness {
+    /** Selector used to locate option group instances. */
+    static hostSelector: string;
+    private _label;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a `MatOptgroupHarness` that meets
+     * certain criteria.
+     * @param options Options for filtering which option instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: OptgroupHarnessFilters): HarnessPredicate<MatOptgroupHarness>;
+    /** Gets the option group's label text. */
+    getLabelText(): Promise<string>;
+    /** Gets whether the option group is disabled. */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Gets the options that are inside the group.
+     * @param filter Optionally filters which options are included.
+     */
+    getOptions(filter?: OptionHarnessFilters): Promise<MatOptionHarness[]>;
+}
+
+/** Harness for interacting with a `mat-option` in tests. */
+export declare class MatOptionHarness extends ComponentHarness {
+    /** Selector used to locate option instances. */
+    static hostSelector: string;
+    /** Element containing the option's text. */
+    private _text;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a `MatOptionsHarness` that meets
+     * certain criteria.
+     * @param options Options for filtering which option instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: OptionHarnessFilters): HarnessPredicate<MatOptionHarness>;
+    /** Clicks the option. */
+    click(): Promise<void>;
+    /** Gets the option's label text. */
+    getText(): Promise<string>;
+    /** Gets whether the option is disabled. */
+    isDisabled(): Promise<boolean>;
+    /** Gets whether the option is selected. */
+    isSelected(): Promise<boolean>;
+    /** Gets whether the option is active. */
+    isActive(): Promise<boolean>;
+    /** Gets whether the option is in multiple selection mode. */
+    isMultiple(): Promise<boolean>;
+}
+
+export declare interface OptgroupHarnessFilters extends BaseHarnessFilters {
+    labelText?: string | RegExp;
+}
+
+export declare interface OptionHarnessFilters extends BaseHarnessFilters {
+    text?: string | RegExp;
+    isSelected?: boolean;
+}
+
+export { }

package/core/theming/_theming.scss

@@ -12,7 +12,7 @@ $_generate-default-density: true !default;
 
 // Warning that will be printed if duplicated styles are generated by a theme.
 $_duplicate-warning: 'Read more about how style duplication can be avoided in a dedicated ' +
-  'guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md';
+  'guide. https://github.com/angular/components/blob/main/guides/duplicate-theming-styles.md';
 
 // These variable are not intended to be overridden externally. They use `!default` to
 // avoid being reset every time this file is imported.
@@ -74,7 +74,7 @@ $_emitted-density: () !default;
 
 /// Gets a color from a theme palette (the output of mat-palette).
 /// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
-/// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+/// hues (default, lighter, darker), or any of the aforementioned suffixed with "-contrast".
 ///
 /// @param {Map} $palette The palette from which to extract a color.
 /// @param {String | Number} $hue The hue from the palette to use. If this is a value between 0

package/core/typography/_typography.scss

@@ -8,7 +8,7 @@
 /// @param {String | Number} $font-weight The font-weight for this level.
 /// @param {String} $font-family The font-family for this level.
 /// @param {String} $letter-spacing The letter-spacing for this level.
-/// @returns {Map} A map representing the definition of this typpographic level.
+/// @returns {Map} A map representing the definition of this typographic level.
 @function define-typography-level(
   $font-size,
   $line-height: $font-size,
@@ -183,22 +183,41 @@
 @mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
   $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme));
 
-  .mat-h1, .mat-headline, #{$selector} h1 {
+  // Note that it seems redundant to prefix the class rules with the `$selector`, however it's
+  // necessary if we want to allow people to overwrite the tag selectors. This is due to
+  // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.
+  .mat-h1,
+  .mat-headline,
+  #{$selector} .mat-h1,
+  #{$selector} .mat-headline,
+  #{$selector} h1 {
     @include typography-utils.typography-level($config, headline);
     margin: 0 0 16px;
   }
 
-  .mat-h2, .mat-title, #{$selector} h2 {
+  .mat-h2,
+  .mat-title,
+  #{$selector} .mat-h2,
+  #{$selector} .mat-title,
+  #{$selector} h2 {
     @include typography-utils.typography-level($config, title);
     margin: 0 0 16px;
   }
 
-  .mat-h3, .mat-subheading-2, #{$selector} h3 {
+  .mat-h3,
+  .mat-subheading-2,
+  #{$selector} .mat-h3,
+  #{$selector} .mat-subheading-2,
+  #{$selector} h3 {
     @include typography-utils.typography-level($config, subheading-2);
     margin: 0 0 16px;
   }
 
-  .mat-h4, .mat-subheading-1, #{$selector} h4 {
+  .mat-h4,
+  .mat-subheading-1,
+  #{$selector} .mat-h4,
+  #{$selector} .mat-subheading-1,
+  #{$selector} h4 {
     @include typography-utils.typography-level($config, subheading-1);
     margin: 0 0 16px;
   }
@@ -206,7 +225,9 @@
   // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
   // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
   // and h6 at 0.67em.
-  .mat-h5, #{$selector} h5 {
+  .mat-h5,
+  #{$selector} .mat-h5,
+  #{$selector} h5 {
     @include typography-utils.font-shorthand(
        // calc is used here to support css variables
       calc(#{typography-utils.font-size($config, body-1)} * 0.83),
@@ -218,7 +239,9 @@
     margin: 0 0 12px;
   }
 
-  .mat-h6, #{$selector} h6 {
+  .mat-h6,
+  #{$selector} .mat-h6,
+  #{$selector} h6 {
     @include typography-utils.font-shorthand(
        // calc is used here to support css variables
       calc(#{typography-utils.font-size($config, body-1)} * 0.67),
@@ -230,11 +253,18 @@
     margin: 0 0 12px;
   }
 
-  .mat-body-strong, .mat-body-2 {
+  .mat-body-strong,
+  .mat-body-2,
+  #{$selector} .mat-body-strong,
+  #{$selector} .mat-body-2 {
     @include typography-utils.typography-level($config, body-2);
   }
 
-  .mat-body, .mat-body-1, #{$selector} {
+  .mat-body,
+  .mat-body-1,
+  #{$selector} .mat-body,
+  #{$selector} .mat-body-1,
+  #{$selector} {
     @include typography-utils.typography-level($config, body-1);
 
     p {
@@ -242,26 +272,33 @@
     }
   }
 
-  .mat-small, .mat-caption {
+  .mat-small,
+  .mat-caption,
+  #{$selector} .mat-small,
+  #{$selector} .mat-caption {
     @include typography-utils.typography-level($config, caption);
   }
 
-  .mat-display-4, #{$selector} .mat-display-4 {
+  .mat-display-4,
+  #{$selector} .mat-display-4 {
     @include typography-utils.typography-level($config, display-4);
     margin: 0 0 56px;
   }
 
-  .mat-display-3, #{$selector} .mat-display-3 {
+  .mat-display-3,
+  #{$selector} .mat-display-3 {
     @include typography-utils.typography-level($config, display-3);
     margin: 0 0 64px;
   }
 
-  .mat-display-2, #{$selector} .mat-display-2 {
+  .mat-display-2,
+  #{$selector} .mat-display-2 {
     @include typography-utils.typography-level($config, display-2);
     margin: 0 0 64px;
   }
 
-  .mat-display-1, #{$selector} .mat-display-1 {
+  .mat-display-1,
+  #{$selector} .mat-display-1 {
     @include typography-utils.typography-level($config, display-1);
     margin: 0 0 64px;
   }