@angular/material 16.2.0-next.3 → 16.2.0-next.5

package/autocomplete/index.d.ts

@@ -2,6 +2,7 @@ import { _AbstractConstructor } from '@angular/material/core';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
+import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { CanDisableRipple } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
@@ -98,19 +99,21 @@ export declare const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
  */
 export declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
 
-export declare class MatAutocomplete extends _MatAutocompleteBase {
+export declare class MatAutocomplete extends _MatAutocompleteBase implements OnDestroy {
     /** Reference to all option groups within the autocomplete. */
     optionGroups: QueryList<MatOptgroup>;
     /** Reference to all options within the autocomplete. */
     options: QueryList<MatOption>;
     protected _visibleClass: string;
     protected _hiddenClass: string;
+    _animationDone: EventEmitter<AnimationEvent_2>;
     /** Whether checkmark indicator for single-selection options is hidden. */
     get hideSingleSelectionIndicator(): boolean;
     set hideSingleSelectionIndicator(value: BooleanInput);
     private _hideSingleSelectionIndicator;
     /** Syncs the parent state with the individual options. */
     _syncParentProperties(): void;
+    ngOnDestroy(): void;
     protected _skipPredicate(_option: _MatOptionBase): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatAutocomplete, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatAutocomplete, "mat-autocomplete", ["matAutocomplete"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; }, {}, ["optionGroups", "options"], ["*"], false, never>;
@@ -134,6 +137,8 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     protected abstract _visibleClass: string;
     /** Class to apply to the panel when it's hidden. */
     protected abstract _hiddenClass: string;
+    /** Emits when the panel animation is done. Null if the panel doesn't animate. */
+    abstract _animationDone: EventEmitter<AnimationEvent_2> | null;
     /** Manages active item in option list based on key events. */
     _keyManager: ActiveDescendantKeyManager<_MatOptionBase>;
     /** Whether the autocomplete panel should be visible, depending on option length. */
@@ -170,6 +175,15 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     get autoSelectActiveOption(): boolean;
     set autoSelectActiveOption(value: BooleanInput);
     private _autoSelectActiveOption;
+    /**
+     * Whether the user is required to make a selection when they're interacting with the
+     * autocomplete. If the user moves away from the autcomplete without selecting an option from
+     * the list, the value will be reset. If the user opens the panel and closes it without
+     * interacting or selecting a value, the initial value will be kept.
+     */
+    get requireSelection(): boolean;
+    set requireSelection(value: BooleanInput);
+    private _requireSelection;
     /**
      * Specify the width of the autocomplete panel.  Can be any CSS sizing value, otherwise it will
      * match the width of its host.
@@ -220,7 +234,7 @@ export declare abstract class _MatAutocompleteBase extends _MatAutocompleteMixin
     private _setThemeClasses;
     protected _skipPredicate(option: _MatOptionBase): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatAutocompleteBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatAutocompleteBase, never, never, { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "displayWith": { "alias": "displayWith"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "requireSelection": { "alias": "requireSelection"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; "optionActivated": "optionActivated"; }, never, never, false, never>;
 }
 
 /** Default `mat-autocomplete` options that can be overridden. */
@@ -229,6 +243,11 @@ export declare interface MatAutocompleteDefaultOptions {
     autoActiveFirstOption?: boolean;
     /** Whether the active option should be selected as the user is navigating. */
     autoSelectActiveOption?: boolean;
+    /**
+     * Whether the user is required to make a selection when
+     * they're interacting with the autocomplete.
+     */
+    requireSelection?: boolean;
     /** Class or list of classes to be applied to the autocomplete's overlay panel. */
     overlayPanelClass?: string | string[];
     /** Wheter icon indicators should be hidden for single-selection. */
@@ -302,8 +321,12 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _componentDestroyed;
     private _autocompleteDisabled;
     private _scrollStrategy;
+    private _keydownSubscription;
+    private _outsideClickSubscription;
     /** Old value of the native input. Used to work around issues with the `input` event on IE. */
     private _previousValue;
+    /** Value of the input element when the panel was opened. */
+    private _valueOnOpen;
     /** Strategy that is used to position the panel. */
     private _positionStrategy;
     /** Whether or not the label state is being overridden. */
@@ -413,6 +436,11 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
      * stream every time the option list changes.
      */
     private _subscribeToClosingActions;
+    /**
+     * Emits the opened event once it's known that the panel will be shown and stores
+     * the state of the trigger right before the opening sequence was finished.
+     */
+    private _emitOpened;
     /** Destroys the autocomplete suggestion panel. */
     private _destroyPanel;
     private _assignOptionValue;
@@ -428,6 +456,10 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
      */
     private _clearPreviousSelectedOption;
     private _attachOverlay;
+    /** Handles keyboard events coming from the overlay panel. */
+    private _handlePanelKeydown;
+    /** Updates the panel's visibility state and any trigger state tied to id. */
+    private _updatePanelState;
     private _getOverlayConfig;
     private _getOverlayPosition;
     /** Sets the positions on a position strategy based on the directive's input state. */
@@ -450,8 +482,6 @@ export declare abstract class _MatAutocompleteTriggerBase implements ControlValu
     private _getWindow;
     /** Scrolls to a particular option in the list. */
     private _scrollToOption;
-    /** Handles keyboard events coming from the overlay panel. */
-    private _handleOverlayEvents;
     /**
      * Track which modal we have modified the `aria-owns` attribute of. When the combobox trigger is
      * inside an aria-modal, we apply aria-owns to the parent modal with the `id` of the options

package/badge/_badge-theme.scss

@@ -1,16 +1,15 @@
-// This contains all of the styles for the badge
-// rather than just the color/theme because of
-// no style sheet support for directives.
 @use 'sass:color';
 @use 'sass:map';
-@use 'sass:meta';
 @use 'sass:math';
 @use '@angular/cdk';
 
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
+@use '../core/tokens/m2/mat/badge' as tokens-mat-badge;
+@use '../core/tokens/token-utils';
+@use '../core/style/sass-utils';
 
+// TODO(crisbeto): some of these variables aren't used anymore and should be deleted.
 $font-size: 12px;
 $font-weight: 600;
 $default-size: 22px !default;
@@ -18,79 +17,71 @@ $small-size: $default-size - 6;
 $large-size: $default-size + 6;
 $_badge-structure-emitted: false !default;
 
+// Internally there are some builds that throw an error if they can't figure out the values
+// of CSS variables during compliation. This flag temporarily enables fallbacks for these builds.
+// Eventually we should clean them up.
+$_emit-fallback-vars: true;
+
 // Mixin for building offset given different sizes
-@mixin _badge-size($size) {
+@mixin _badge-size($size, $font-size-token) {
   // This mixin isn't used in the context of a theme so we can disable the ampersand check.
   // stylelint-disable material/no-ampersand-beyond-selector-start
   .mat-badge-content {
     width: $size;
     height: $size;
     line-height: $size;
-  }
 
-  &.mat-badge-above {
-    .mat-badge-content {
-      top: math.div(-$size, 2);
+    @if ($font-size-token) {
+      @include token-utils.use-tokens(tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-token-slots()) {
+        @include token-utils.create-token-slot(font-size, $font-size-token, $_emit-fallback-vars);
+      }
     }
   }
 
-  &.mat-badge-below {
-    .mat-badge-content {
-      bottom: math.div(-$size, 2);
-    }
+  &.mat-badge-above .mat-badge-content {
+    top: math.div(-$size, 2);
   }
 
-  &.mat-badge-before {
-    .mat-badge-content {
-      left: -$size;
-    }
+  &.mat-badge-below .mat-badge-content {
+    bottom: math.div(-$size, 2);
   }
 
-  [dir='rtl'] &.mat-badge-before {
-    .mat-badge-content {
-      left: auto;
-      right: -$size;
-    }
+  &.mat-badge-before .mat-badge-content {
+    left: -$size;
   }
 
-  &.mat-badge-after {
-    .mat-badge-content {
-      right: -$size;
-    }
+  [dir='rtl'] &.mat-badge-before .mat-badge-content {
+    left: auto;
+    right: -$size;
   }
 
-  [dir='rtl'] &.mat-badge-after {
-    .mat-badge-content {
-      right: auto;
-      left: -$size;
-    }
+  &.mat-badge-after .mat-badge-content {
+    right: -$size;
+  }
+
+  [dir='rtl'] &.mat-badge-after .mat-badge-content {
+    right: auto;
+    left: -$size;
   }
 
   &.mat-badge-overlap {
-    &.mat-badge-before {
-      .mat-badge-content {
-        left: math.div(-$size, 2);
-      }
+    &.mat-badge-before .mat-badge-content {
+      left: math.div(-$size, 2);
     }
 
-    [dir='rtl'] &.mat-badge-before {
-      .mat-badge-content {
-        left: auto;
-        right: math.div(-$size, 2);
-      }
+    [dir='rtl'] &.mat-badge-before .mat-badge-content {
+      left: auto;
+      right: math.div(-$size, 2);
     }
 
-    &.mat-badge-after {
-      .mat-badge-content {
-        right: math.div(-$size, 2);
-      }
+    &.mat-badge-after .mat-badge-content {
+      right: math.div(-$size, 2);
     }
 
-    [dir='rtl'] &.mat-badge-after {
-      .mat-badge-content {
-        right: auto;
-        left: math.div(-$size, 2);
-      }
+    [dir='rtl'] &.mat-badge-after .mat-badge-content {
+      right: auto;
+      left: math.div(-$size, 2);
     }
   }
   // stylelint-enable
@@ -101,19 +92,13 @@ $_badge-structure-emitted: false !default;
 @mixin _badge-structure {
   .mat-badge {
     position: relative;
-  }
 
-  // The badge should make sure its host is overflow visible so that the badge content
-  // can be rendered outside of the element. Some components such as <mat-icon> explicitly
-  // style `overflow: hidden` so this requires extra specificity so that it does not
-  // depend on style load order.
-  .mat-badge.mat-badge {
-    overflow: visible;
-  }
-
-  .mat-badge-hidden {
-    .mat-badge-content {
-      display: none;
+    // The badge should make sure its host is overflow visible so that the badge content
+    // can be rendered outside of the element. Some components such as <mat-icon> explicitly
+    // style `overflow: hidden` so this requires extra specificity so that it does not
+    // depend on style load order.
+    &.mat-badge {
+      overflow: visible;
     }
   }
 
@@ -128,6 +113,30 @@ $_badge-structure-emitted: false !default;
     white-space: nowrap;
     text-overflow: ellipsis;
     pointer-events: none;
+
+    @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
+      @include token-utils.create-token-slot(background-color, background-color);
+      @include token-utils.create-token-slot(color, text-color);
+      @include token-utils.create-token-slot(font-family, text-font, $_emit-fallback-vars);
+      @include token-utils.create-token-slot(font-size, text-size, $_emit-fallback-vars);
+      @include token-utils.create-token-slot(font-weight, text-weight, $_emit-fallback-vars);
+    }
+
+    @include cdk.high-contrast(active, off) {
+      outline: solid 1px;
+      border-radius: 0;
+    }
+  }
+
+  .mat-badge-disabled .mat-badge-content {
+    @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
+      @include token-utils.create-token-slot(background-color, disabled-state-background-color);
+      @include token-utils.create-token-slot(color, disabled-state-text-color);
+    }
+  }
+
+  .mat-badge-hidden .mat-badge-content {
+    display: none;
   }
 
   .ng-animate-disabled .mat-badge-content,
@@ -143,15 +152,15 @@ $_badge-structure-emitted: false !default;
   }
 
   .mat-badge-small {
-    @include _badge-size($small-size);
+    @include _badge-size($small-size, small-size-text-size);
   }
 
   .mat-badge-medium {
-    @include _badge-size($default-size);
+    @include _badge-size($default-size, null);
   }
 
   .mat-badge-large {
-    @include _badge-size($large-size);
+    @include _badge-size($large-size, large-size-text-size);
   }
 }
 
@@ -159,73 +168,30 @@ $_badge-structure-emitted: false !default;
   $config: theming.get-color-config($config-or-theme);
   $accent: map.get($config, accent);
   $warn: map.get($config, warn);
-  $primary: map.get($config, primary);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
 
-  .mat-badge-content {
-    color: theming.get-color-from-palette($primary, default-contrast);
-    background: theming.get-color-from-palette($primary);
-
-    @include cdk.high-contrast(active, off) {
-      outline: solid 1px;
-      border-radius: 0;
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+      tokens-mat-badge.get-color-tokens($config));
   }
 
   .mat-badge-accent {
-    .mat-badge-content {
-      background: theming.get-color-from-palette($accent);
-      color: theming.get-color-from-palette($accent, default-contrast);
-    }
+    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+      tokens-mat-badge.private-get-color-palette-color-tokens($accent));
   }
 
   .mat-badge-warn {
-    .mat-badge-content {
-      color: theming.get-color-from-palette($warn, default-contrast);
-      background: theming.get-color-from-palette($warn);
-    }
-  }
-
-  .mat-badge-disabled {
-    .mat-badge-content {
-      $app-background: theming.get-color-from-palette($background, 'background');
-      $badge-color: theming.get-color-from-palette($foreground, disabled-button);
-
-      // The disabled color usually has some kind of opacity, but because the badge is overlayed
-      // on top of something else, it won't look good if it's opaque. If it is a color *type*,
-      // we convert it into a solid color by taking the opacity from the rgba value and using
-      // the value to determine the percentage of the background to put into foreground when
-      // mixing the colors together.
-      @if (meta.type-of($badge-color) == color and meta.type-of($app-background) == color) {
-        $badge-opacity: opacity($badge-color);
-        background: color.mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
-      }
-      @else {
-        background: $badge-color;
-      }
-
-      color: theming.get-color-from-palette($foreground, disabled-text);
-    }
+    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+      tokens-mat-badge.private-get-color-palette-color-tokens($warn));
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2014-config(
       theming.get-typography-config($config-or-theme));
-  .mat-badge-content {
-    font-weight: $font-weight;
-    font-size: $font-size;
-    font-family: typography-utils.font-family($config);
-  }
-
-  .mat-badge-small .mat-badge-content {
-    // Set the font size to 75% of the original.
-    font-size: $font-size * 0.75;
-  }
 
-  .mat-badge-large .mat-badge-content {
-    font-size: $font-size * 2;
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-badge.$prefix,
+      tokens-mat-badge.get-typography-tokens($config));
   }
 }
 

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -1,26 +1,25 @@
-@use 'sass:map';
-@use '../core/style/private';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
 @use '../core/theming/theming';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
 
-  .mat-bottom-sheet-container {
-    @include private.private-theme-elevation(16, $config);
-    background: theming.get-color-from-palette($background, dialog);
-    color: theming.get-color-from-palette($foreground, text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
+      tokens-mat-bottom-sheet.get-color-tokens($config));
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2014-config(
       theming.get-typography-config($config-or-theme));
-  .mat-bottom-sheet-container {
-    @include typography-utils.typography-level($config, body-1);
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
+      tokens-mat-bottom-sheet.get-typography-tokens($config));
   }
 }
 

package/button/_fab-theme.scss

@@ -1,75 +1,102 @@
 @use 'sass:map';
 @use '@material/fab/fab' as mdc-fab;
 @use '@material/fab/fab-theme' as mdc-fab-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 
 @use './button-theme-private';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
+@use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
+@use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
 @use '../core/typography/typography';
 
-@mixin _fab-variant($foreground, $background) {
-  @include mdc-fab-theme.theme((
-    container-color: $background,
-    icon-color: $foreground,
-  ));
+@mixin _fab-variant($config, $foreground, $background) {
+  $color-config: map.merge(
+    $config,
+    (
+      primary: (
+        default: $background,
+        default-contrast: $foreground,
+      ),
+    )
+  );
+  $color-tokens: tokens-mdc-fab.get-color-tokens($color-config);
+  @include mdc-fab-theme.theme($color-tokens);
 
   --mat-mdc-fab-color: #{$foreground};
 }
 
+@function white-or-black($color, $is-dark) {
+  @return if(mdc-helpers.variable-safe-contrast-tone($color, $is-dark) == 'dark', #000, #fff);
+}
+
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $is-dark: map.get($config, is-dark);
 
-    .mat-mdc-fab, .mat-mdc-mini-fab {
+  $is-dark: map.get($config, is-dark);
+  $background: map.get($config, background);
+
+  $surface: theming.get-color-from-palette($background, card);
+  $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));
+
+  $on-surface: white-or-black($surface, $is-dark);
+  $on-primary: white-or-black($primary, $is-dark);
+  $on-accent: white-or-black($accent, $is-dark);
+  $on-warn: white-or-black($warn, $is-dark);
+
+  $disabled: rgba($on-surface, 0.12);
+  $on-disabled: rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38));
+
+  .mat-mdc-fab,
+  .mat-mdc-mini-fab {
+    // TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
+    // being wrapped by using-mdc-theme. This workaround needs to be
+    // revisited w/ a more holistic solution.
+    @include mdc-helpers.using-mdc-theme($config) {
       @include button-theme-private.ripple-theme-styles($config, true);
+    }
 
-      &.mat-unthemed {
-        @include _fab-variant($on-surface, mdc-theme-color.prop-value(surface));
-      }
-
-      &.mat-primary {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-primary),
-          mdc-theme-color.prop-value(primary)
-        );
-      }
-
-      &.mat-accent {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-secondary),
-          mdc-theme-color.prop-value(secondary)
-        );
-      }
-
-      &.mat-warn {
-        @include _fab-variant(
-          mdc-theme-color.prop-value(on-error),
-          mdc-theme-color.prop-value(error)
-        );
-      }
-
-      @include button-theme-private.apply-disabled-style() {
-        @include _fab-variant(
-          rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38)),
-          rgba($on-surface, 0.12)
-        );
-      }
+    @include button-theme-private.apply-disabled-style() {
+      @include _fab-variant($config, $on-disabled, $disabled);
+    }
+
+    &.mat-unthemed {
+      @include _fab-variant($config, $on-surface, $surface);
+    }
+
+    &.mat-primary {
+      @include _fab-variant($config, $on-primary, $primary);
+    }
+
+    &.mat-accent {
+      @include _fab-variant($config, $on-accent, $accent);
+    }
+
+    &.mat-warn {
+      @include _fab-variant($config, $on-warn, $warn);
     }
   }
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
-    theming.get-typography-config($config-or-theme));
+    theming.get-typography-config($config-or-theme)
+  );
+
   @include mdc-helpers.using-mdc-typography($config) {
     @include mdc-fab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
   }
+
+  $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($config);
+  .mat-mdc-extended-fab {
+    @include mdc-extended-fab-theme.theme($typography-tokens);
+  }
 }
 
-@mixin density($config-or-theme) {}
+@mixin density($config-or-theme) {
+}
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);