@angular/material 16.1.2 → 16.2.0-next.1

package/button/index.d.ts

@@ -11,8 +11,8 @@ import * as i0 from '@angular/core';
 import * as i4 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { MatRipple } from '@angular/material/core';
+import { MatRippleLoader } from '@angular/material/core';
 import { NgZone } from '@angular/core';
-import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
@@ -95,7 +95,7 @@ export declare class MatButton extends MatButtonBase {
 }
 
 /** Base class for all buttons.  */
-declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnChanges, OnDestroy {
+declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnDestroy {
     _platform: Platform;
     _ngZone: NgZone;
     _animationMode?: string | undefined;
@@ -104,7 +104,7 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
      * Handles the lazy creation of the MatButton ripple.
      * Used to improve initial load time of large applications.
      */
-    _rippleLoader: MatButtonLazyLoader;
+    _rippleLoader: MatRippleLoader;
     /** Whether this button is a FAB. Used to apply the correct class on the ripple. */
     _isFab: boolean;
     /**
@@ -114,43 +114,25 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
      */
     get ripple(): MatRipple;
     set ripple(v: MatRipple);
-    /** @docs-private Reference to the MatRipple instance of the button. */
-    protected _ripple?: MatRipple;
+    /** Whether the ripple effect is disabled or not. */
+    get disableRipple(): boolean;
+    set disableRipple(value: any);
+    private _disableRipple;
+    get disabled(): boolean;
+    set disabled(value: any);
+    private _disabled;
     constructor(elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
     ngAfterViewInit(): void;
-    ngOnChanges(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
     /** Gets whether the button has one of the given attributes. */
     private _hasHostAttributes;
+    private _updateRippleDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, {}, {}, never, never, false, never>;
 }
 
-/**
- * Handles attaching the MatButton's ripple on demand.
- *
- * This service allows us to avoid eagerly creating & attaching the MatButton's ripple.
- * It works by creating & attaching the ripple only when a MatButton is first interacted with.
- */
-declare class MatButtonLazyLoader implements OnDestroy {
-    private _document;
-    private _animationMode;
-    private _globalRippleOptions;
-    private _platform;
-    private _ngZone;
-    constructor();
-    ngOnDestroy(): void;
-    /** Handles creating and attaching button internals when a button is initially interacted with. */
-    private _onInteraction;
-    /** Creates a MatButtonRipple and appends it to the given button element. */
-    private _appendRipple;
-    _createMatRipple(button: HTMLElement): MatRipple | undefined;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonLazyLoader, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MatButtonLazyLoader>;
-}
-
 /** @docs-private */
 declare const _MatButtonMixin: _Constructor<CanColor> & _AbstractConstructor<CanColor> & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & {
     new (_elementRef: ElementRef): {
@@ -222,12 +204,6 @@ export declare class MatIconAnchor extends MatAnchorBase {
  * See https://material.io/develop/web/components/buttons/icon-buttons/
  */
 export declare class MatIconButton extends MatButtonBase {
-    /**
-     * Reference to the MatRipple instance of the button.
-     * @deprecated Considered an implementation detail. To be removed.
-     * @breaking-change 17.0.0
-     */
-    get ripple(): MatRipple;
     constructor(elementRef: ElementRef, platform: Platform, ngZone: NgZone, animationMode?: string);
     static ɵfac: i0.ɵɵFactoryDeclaration<MatIconButton, [null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatIconButton, "button[mat-icon-button]", ["matButton"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;

package/card/_card-theme.scss

@@ -79,11 +79,8 @@
 }
 
 @mixin theme-from-tokens($tokens) {
-  // Add values for card tokens.
-  .mat-mdc-card {
-    @include mdc-elevated-card-theme.theme(map.get($tokens, tokens-mdc-elevated-card.$prefix));
-    @include mdc-outlined-card-theme.theme(map.get($tokens, tokens-mdc-outlined-card.$prefix));
-    @include token-utils.create-token-values(
-        tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
-  }
+  @include mdc-elevated-card-theme.theme(map.get($tokens, tokens-mdc-elevated-card.$prefix));
+  @include mdc-outlined-card-theme.theme(map.get($tokens, tokens-mdc-outlined-card.$prefix));
+  @include token-utils.create-token-values(
+      tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
 }

package/checkbox/_checkbox-theme.scss

@@ -92,8 +92,5 @@
 @mixin theme-from-tokens($tokens) {
   // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
   //   so this mixin is currently incomplete.
-
-  .mat-mdc-checkbox {
-    @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
-  }
+  @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
 }

package/core/index.d.ts

@@ -797,6 +797,43 @@ export declare class MatRipple implements OnInit, OnDestroy, RippleTarget {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatRipple, "[mat-ripple], [matRipple]", ["matRipple"], { "color": { "alias": "matRippleColor"; "required": false; }; "unbounded": { "alias": "matRippleUnbounded"; "required": false; }; "centered": { "alias": "matRippleCentered"; "required": false; }; "radius": { "alias": "matRippleRadius"; "required": false; }; "animation": { "alias": "matRippleAnimation"; "required": false; }; "disabled": { "alias": "matRippleDisabled"; "required": false; }; "trigger": { "alias": "matRippleTrigger"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+/**
+ * Handles attaching ripples on demand.
+ *
+ * This service allows us to avoid eagerly creating & attaching MatRipples.
+ * It works by creating & attaching a ripple only when a component is first interacted with.
+ */
+export declare class MatRippleLoader implements OnDestroy {
+    private _document;
+    private _animationMode;
+    private _globalRippleOptions;
+    private _platform;
+    private _ngZone;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Configures the ripple that will be rendered by the ripple loader.
+     *
+     * Stores the given information about how the ripple should be configured on the host
+     * element so that it can later be retrived & used when the ripple is actually created.
+     */
+    configureRipple(host: HTMLElement, config: {
+        className?: string;
+        centered?: boolean;
+    }): void;
+    /** Returns the ripple instance for the given host element. */
+    getRipple(host: HTMLElement): MatRipple | undefined;
+    /** Sets the disabled state on the ripple instance corresponding to the given host element. */
+    setDisabled(host: HTMLElement, disabled: boolean): void;
+    /** Handles creating and attaching component internals when a component it is initially interacted with. */
+    private _onInteraction;
+    /** Creates a MatRipple and appends it to the given element. */
+    createRipple(host: HTMLElement): MatRipple | undefined;
+    attachRipple(host: Element, ripple: MatRipple): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleLoader, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MatRippleLoader>;
+}
+
 export declare class MatRippleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatRippleModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<MatRippleModule, [typeof i1_4.MatRipple], [typeof i1_2.MatCommonModule], [typeof i1_4.MatRipple, typeof i1_2.MatCommonModule]>;

package/core/style/_sass-utils.scss

@@ -14,6 +14,18 @@
   }
 }
 
+/// A version of the standard `map.merge` function that takes a variable number of arguments.
+/// Each argument is merged into the final result from left to right.
+/// @param {List} $maps The maps to combine with map.merge
+/// @return {Map} The combined result of successively calling map.merge with each parameter.
+@function merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}
+
 /// A version of the standard `map.deep-merge` function that takes a variable number of arguments.
 /// Each argument is deep-merged into the final result from left to right.
 /// @param {List} $maps The maps to combine with map.deep-merge

package/core/tokens/_token-utils.scss

@@ -71,12 +71,21 @@ $_component-prefix: null;
 
 // Emits a slot for the given token, provided that it has a non-null value in the token map passed
 // to `use-tokens`.
-@mixin create-token-slot($property, $token) {
+@mixin create-token-slot($property, $token, $emit-fallback: false) {
   @if $_component-prefix == null or $_tokens == null {
     @error '`create-token-slot` must be used within `use-tokens`';
   }
   @if map.get($_tokens, $token) != null {
-    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}');
+    $fallback: null;
+
+    @if ($emit-fallback == true) {
+      $fallback: map.get($_tokens, $token);
+    }
+    @else if ($emit-fallback) {
+      $fallback: $emit-fallback;
+    }
+
+    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}', $fallback: $fallback);
     @include mdc-theme.property($property, $value);
   }
 }

package/core/tokens/m2/mat/_slide-toggle.scss

@@ -0,0 +1,52 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, slide-toggle);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  // TODO(amysorto): The earlier implementation of the slide-toggle used MDC's APIs to create the
+  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
+  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
+  // fallback.
+  @if ($config == null) {
+    $config: mdc-helpers.private-fallback-typography-from-mdc();
+  }
+
+  @return (
+    label-text-font: typography-utils.font-family($config),
+    label-text-size: typography-utils.font-size($config, body-2),
+    label-text-letter-spacing: typography-utils.letter-spacing($config, body-2),
+    label-text-line-height: typography-utils.line-height($config, body-2),
+    label-text-weight: typography-utils.font-weight($config, body-2),
+  );
+ }
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_table.scss

@@ -0,0 +1,97 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, table);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    row-item-outline-width: 1px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+
+  @return (
+    background-color: theming.get-color-from-palette($background, 'card'),
+
+    header-headline-color: theming.get-color-from-palette($foreground, text),
+    row-item-label-text-color: theming.get-color-from-palette($foreground, text),
+    row-item-outline-color: theming.get-color-from-palette($foreground, divider),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font: typography-utils.font-family($config);
+  $cell-font-family: typography-utils.font-family($config, body-2) or $fallback-font;
+  $cell-line-height: typography-utils.line-height($config, body-2);
+  $cell-font-size: typography-utils.font-size($config, body-2);
+  $cell-font-weight: typography-utils.font-weight($config, body-2);
+  $cell-letter-spacing: typography-utils.letter-spacing($config, body-2);
+
+  @return (
+    header-headline-font: typography-utils.font-family($config, subtitle-2) or $fallback-font,
+    header-headline-line-height: typography-utils.line-height($config, subtitle-2),
+    header-headline-size: typography-utils.font-size($config, subtitle-2),
+    header-headline-weight: typography-utils.font-weight($config, subtitle-2),
+    header-headline-tracking: typography-utils.letter-spacing($config, subtitle-2),
+
+    // Plain cells and footer cells have the same typography.
+    row-item-label-text-font: $cell-font-family,
+    row-item-label-text-line-height: $cell-line-height,
+    row-item-label-text-size: $cell-font-size,
+    row-item-label-text-weight: $cell-font-weight,
+    row-item-label-text-tracking: $cell-letter-spacing,
+
+    footer-supporting-text-font: $cell-font-family,
+    footer-supporting-text-line-height: $cell-line-height,
+    footer-supporting-text-size: $cell-font-size,
+    footer-supporting-text-weight: $cell-font-weight,
+    footer-supporting-text-tracking: $cell-letter-spacing,
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -4);
+  $header-scale: (
+    0: 56px,
+    -1: 52px,
+    -2: 48px,
+    -3: 44px,
+    -4: 40px
+  );
+  $cell-scale: (
+    0: 52px,
+    -1: 48px,
+    -2: 44px,
+    -3: 40px,
+    -4: 36px
+  );
+
+  @return (
+    header-container-height: map.get($header-scale, $scale),
+    footer-container-height: map.get($cell-scale, $scale),
+    row-item-container-height: map.get($cell-scale, $scale),
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mdc/_switch.scss

@@ -0,0 +1,182 @@
+@use 'sass:map';
+@use '../../../style/elevation';
+@use '../../../style/sass-utils';
+@use '../../../theming/theming';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, switch);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
+
+@function get-unthemable-tokens() {
+  @return (
+    // Opacity of handle when disabled.
+    disabled-handle-opacity: 0.38,
+    // Opacity of icon when disabled and selected.
+    disabled-selected-icon-opacity: 0.38,
+    // Opacity of track when disabled.
+    disabled-track-opacity: 0.12,
+    // Opacity of icon when disabled and unselected.
+    disabled-unselected-icon-opacity: 0.38,
+    // Height of handle.
+    handle-height: 20px,
+    // Border radius of handle.
+    handle-shape: 10px,
+    // Width of handle.
+    handle-width: 20px,
+    // Width and height of icon when selected.
+    selected-icon-size: 18px,
+    // Height of track.
+    track-height: 14px,
+    // Border radius of track.
+    track-shape: 7px,
+    // Width of track.
+    track-width: 36px,
+    // Width and height of icon when unselected.
+    unselected-icon-size: 18px,
+    // The diameter of the handle ripple.
+    state-layer-size: 40px,
+    // Opacity of ripple when selected and focused.
+    selected-focus-state-layer-opacity: 0.12,
+    // Opacity of ripple when selected and on hover.
+    selected-hover-state-layer-opacity: 0.04,
+    // Opacity of ripple when selected and pressed.
+    selected-pressed-state-layer-opacity: 0.1,
+    // Opacity of ripple when unselected and focused.
+    unselected-focus-state-layer-opacity: 0.12,
+    // Opacity of ripple when unselected and on hover.
+    unselected-hover-state-layer-opacity: 0.04,
+    // Opacity of ripple when unselected and pressed.
+    unselected-pressed-state-layer-opacity: 0.1,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $foreground: map.get($config, foreground);
+  $elevation: theming.get-color-from-palette($foreground, elevation);
+  $is-dark: map.get($config, is-dark);
+  $on-surface: if($is-dark, #f5f5f5, #424242);
+  $hairline: if($is-dark, #616161, #e0e0e0);
+  $on-surface-variant: if($is-dark, #9e9e9e, #616161);
+  $on-surface-state-content: if($is-dark, #fafafa, #212121);
+  $disabled-handle-color: if($is-dark, #000, #424242);
+  $icon-color: if($is-dark, #212121, #fff);
+
+  // The default for tokens that rely on the theme will use the primary palette
+  $theme-color-tokens: private-get-color-palette-color-tokens(
+    map.get($config, primary),
+    $is-dark
+  );
+
+  @return map.merge(
+    $theme-color-tokens,
+    (
+      // Color of handle when selected while disabled.
+      disabled-selected-handle-color: $disabled-handle-color,
+      // Color of handle when selected while disabled.
+      disabled-selected-icon-color: $icon-color,
+      // Color of track when selected while disabled.
+      disabled-selected-track-color: $on-surface,
+      // Color of handle when unselected while disabled.
+      disabled-unselected-handle-color: $disabled-handle-color,
+      // Color of icon when unselected while disabled.
+      disabled-unselected-icon-color: $icon-color,
+      // Color of track when disabled.
+      disabled-unselected-track-color: $on-surface,
+      // Color of slide-toggle handle's surface.
+      handle-surface-color: surface,
+      // Elevation level for handle.
+      handle-elevation: 1,
+      // Color of handle's shadow
+      handle-shadow-color: if($elevation != null, $elevation, elevation.$color),
+      // Elevation level for handle when disabled.
+      disabled-handle-elevation: 0,
+      // Color of icon (ex. checkmark) when selected
+      selected-icon-color: $icon-color,
+      // Color of handle when unselected and focused.
+      unselected-focus-handle-color: $on-surface-state-content,
+      // Color of ripple when unselected and focused.
+      unselected-focus-state-layer-color: $on-surface,
+      // Color of track when unselected and focused.
+      unselected-focus-track-color: $hairline,
+      // Color of handle when unselected.
+      unselected-handle-color: $on-surface-variant,
+      // Color of handle when unselected and on hover.
+      unselected-hover-handle-color: $on-surface-state-content,
+      // Color of ripple when unselected and on hover.
+      unselected-hover-state-layer-color: $on-surface,
+      // Color of track when unselected and on hover.
+      unselected-hover-track-color: $hairline,
+      // Color of icon color when unselected.
+      unselected-icon-color: $icon-color,
+      // Color of handle when unselected and pressed.
+      unselected-pressed-handle-color: $on-surface-state-content,
+      // Color of ripple when unselected and pressed.
+      unselected-pressed-state-layer-color: $on-surface,
+      // Color of track when unselected and pressed.
+      unselected-pressed-track-color: $hairline,
+      // Color of track when selected.
+      unselected-track-color: $hairline,
+    )
+  );
+}
+
+// Generates the mapping for the properties that change based on the slide toggle color.
+@function private-get-color-palette-color-tokens($color-palette, $is-dark) {
+  $primary: theming.get-color-from-palette($color-palette, if($is-dark, 300, 600));
+  $state-content: theming.get-color-from-palette($color-palette, if($is-dark, 200, 900));
+  $inverse: theming.get-color-from-palette($color-palette, if($is-dark, 600, 300));
+
+  @return (
+    // Color of ripple when selected and focused.
+    selected-focus-state-layer-color: $primary,
+    // Color of handle when selected
+    selected-handle-color: $primary,
+    // Color of ripple when selected and on hover.
+    selected-hover-state-layer-color: $primary,
+    // Color of ripple when selected and pressed.
+    selected-pressed-state-layer-color: $primary,
+    // Color of handle when selected and focused.
+    selected-focus-handle-color: $state-content,
+    // Color of handle when selected and on hover.
+    selected-hover-handle-color: $state-content,
+    // Color of handle when selected and pressed.
+    selected-pressed-handle-color: $state-content,
+    // Color of track when selected and focused.
+    selected-focus-track-color: $inverse,
+    // Color of track when selected and on hover.
+    selected-hover-track-color: $inverse,
+    /// Color of track when selected and pressed.
+    selected-pressed-track-color: $inverse,
+    // Color of track when selected.
+    selected-track-color: $inverse,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}