@angular/material 16.1.3 → 16.1.5

package/autocomplete/index.d.ts

@@ -302,6 +302,8 @@ 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;
     /** Strategy that is used to position the panel. */
@@ -428,6 +430,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 +456,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/core/index.d.ts

@@ -606,9 +606,9 @@ export declare class _MatOptionBase<T = any> implements FocusableOption, AfterVi
      */
     get viewValue(): string;
     /** Selects the option. */
-    select(): void;
+    select(emitEvent?: boolean): void;
     /** Deselects the option. */
-    deselect(): void;
+    deselect(emitEvent?: boolean): void;
     /** Sets focus onto this option. */
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
     /**

package/core/tokens/_token-utils.scss

@@ -39,6 +39,7 @@ $placeholder-typography-config: (
   caption: $_placeholder-typography-level-config,
   button: $_placeholder-typography-level-config,
   overline: $_placeholder-typography-level-config,
+  subheading-1: $_placeholder-typography-level-config,
 );
 
 // Placeholder density config that can be passed to token getter functions when generating token
@@ -84,6 +85,19 @@ $_component-prefix: null;
   }
 }
 
+// Returns the name of a token including the current prefix. Intended to be used in calculations
+// involving tokens. `create-token-slot` should be used when outputting tokens.
+@function get-token-variable($token) {
+  @if $_component-prefix == null or $_tokens == null {
+    @error '`get-token-variable` must be used within `use-tokens`';
+  }
+  @if not map.has-key($_tokens, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
+  }
+
+  @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
+}
+
 @mixin create-token-values($prefix, $tokens) {
   @include _configure-token-prefix($prefix...) {
     @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);

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

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, expansion);
+
+// 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 (
+    container-shape: 4px,
+  );
+}
+
+// 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 (
+    container-background-color: theming.get-color-from-palette($background, card),
+    container-text-color: theming.get-color-from-palette($foreground, text),
+    actions-divider-color: theming.get-color-from-palette($foreground, divider),
+    header-hover-state-layer-color: theming.get-color-from-palette($background, hover),
+    header-focus-state-layer-color: theming.get-color-from-palette($background, hover),
+    header-disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-button),
+    header-text-color: theming.get-color-from-palette($foreground, text),
+    header-description-color: theming.get-color-from-palette($foreground, secondary-text),
+    header-indicator-color: theming.get-color-from-palette($foreground, secondary-text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  $fallback-font-family: typography-utils.font-family($config);
+
+  @return (
+    header-text-font: typography-utils.font-family($config, subheading-1) or $fallback-font-family,
+    header-text-size: typography-utils.font-size($config, subheading-1),
+    header-text-weight: typography-utils.font-weight($config, subheading-1),
+
+    // TODO(crisbeto): these two properties weren't set at all before the introduction of tokens,
+    // but it's inconsistent not to provide them since the container sets all of them. Eventually
+    // we should change the values to use come from `subheading-1`.
+    header-text-line-height: inherit,
+    header-text-tracking: inherit,
+
+    container-text-font: typography-utils.font-family($config, body-1) or $fallback-font-family,
+    container-text-line-height: typography-utils.line-height($config, body-1),
+    container-text-size: typography-utils.font-size($config, body-1),
+    container-text-tracking: typography-utils.letter-spacing($config, body-1),
+    container-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -3);
+  $collapsed-scale: (
+    0: 48px,
+    -1: 44px,
+    -2: 40px,
+    -3: 36px,
+  );
+  $expanded-scale: (
+    0: 64px,
+    -1: 60px,
+    -2: 56px,
+    -3: 48px,
+  );
+
+  @return (
+    header-collapsed-state-height: map.get($collapsed-scale, $scale),
+    header-expanded-state-height: map.get($expanded-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/mat/_menu.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../style/sass-utils';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, menu);
+
+// 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 (
+    container-shape: 4px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $on-surface: if($is-dark, #fff, #000);
+  $active-state-layer-color: rgba($on-surface, if($is-dark, 0.08, 0.04));
+  $text-color: theming.get-color-from-palette($foreground, text);
+
+  @return (
+    item-label-text-color: $text-color,
+    item-icon-color: $text-color,
+    item-hover-state-layer-color: $active-state-layer-color,
+    item-focus-state-layer-color: $active-state-layer-color,
+    container-color: theming.get-color-from-palette($background, card),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    item-label-text-font:
+      typography-utils.font-family($config, body-1) or typography-utils.font-family($config),
+    item-label-text-size: typography-utils.font-size($config, body-1),
+    item-label-text-tracking: typography-utils.letter-spacing($config, body-1),
+    item-label-text-line-height: typography-utils.line-height($config, body-1),
+    item-label-text-weight: typography-utils.font-weight($config, body-1),
+  );
+}
+
+// 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/_stepper.scss

@@ -0,0 +1,118 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, stepper);
+
+// 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) {
+  $foreground: map.get($config, foreground);
+  $background: map.get($config, background);
+  $primary: map.get($config, primary);
+  $warn: map.get($config, warn);
+
+  @return map.merge(private-get-color-palette-color-tokens($primary), (
+    // Background for stepper container.
+    container-color: theming.get-color-from-palette($background, card),
+    // Color of the line indicator connecting the steps.
+    line-color: theming.get-color-from-palette($foreground, divider),
+    // Background color of the header while hovered.
+    header-hover-state-layer-color: theming.get-color-from-palette($background, hover),
+    // Background color of the header while focused.
+    header-focus-state-layer-color: theming.get-color-from-palette($background, hover),
+    // Color of the text inside the step header.
+    header-label-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    // Color for the "optional" label in the step header.
+    header-optional-label-text-color: theming.get-color-from-palette($foreground, secondary-text),
+    // Color of the header text when a step is selected.
+    header-selected-state-label-text-color: theming.get-color-from-palette($foreground, text),
+    // Color of the header text when a step is in an error state.
+    header-error-state-label-text-color: theming.get-color-from-palette($warn, text),
+    // Background color of the header icon.
+    header-icon-background-color: theming.get-color-from-palette($foreground, secondary-text),
+    // Foreground color of the header icon in the error state.
+    header-error-state-icon-foreground-color: theming.get-color-from-palette($warn, text),
+    // Background color of the header icon in the error state.
+    header-error-state-icon-background-color: transparent,
+  ));
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // Font family of the entire stepper.
+    container-text-font: typography-utils.font-family($config),
+    // Font family of the text inside the step header.
+    header-label-text-font: typography-utils.font-family($config, body-1) or
+      typography-utils.font-family($config),
+    // Size of the text inside the step header.
+    header-label-text-size: typography-utils.font-size($config, body-1),
+    // Weight of the text inside the step header.
+    header-label-text-weight: typography-utils.font-weight($config, body-1),
+    // Color of the header text when a step is in an error state.
+    header-error-state-label-text-size: typography-utils.font-size($config, body-2),
+    // Size of the header text in the selected state.
+    header-selected-state-label-text-size: typography-utils.font-size($config, body-2),
+    // Weight of the header text in the selected state.
+    header-selected-state-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) {
+  $scale: theming.clamp-density($config, -4);
+  $height-config: (
+    0: 72px,
+    -1: 68px,
+    -2: 64px,
+    -3: 60px,
+    -4: 42px,
+  );
+
+  @return (
+    header-height: map.get($height-config, $scale),
+  );
+}
+
+// Generates the tokens used to theme the stepper based on a palette.
+@function private-get-color-palette-color-tokens($palette) {
+  $active-state-foreground: theming.get-color-from-palette($palette, default-contrast);
+  $active-state-background: theming.get-color-from-palette($palette);
+
+  @return (
+    // Foreground color of the header icon.
+    header-icon-foreground-color: theming.get-color-from-palette($palette, default-contrast),
+    // Background color of the header icon in the selected state.
+    header-selected-state-icon-background-color: $active-state-background,
+    // Foreground color of the header icon in the selected state.
+    header-selected-state-icon-foreground-color: $active-state-foreground,
+    // Background color of the header icon in the selected state.
+    header-done-state-icon-background-color: $active-state-background,
+    // Foreground color of the header icon in the selected state.
+    header-done-state-icon-foreground-color: $active-state-foreground,
+    // Background color of the header icon in the editing state.
+    header-edit-state-icon-background-color: $active-state-background,
+    // Foreground color of the header icon in the editing state.
+    header-edit-state-icon-foreground-color: $active-state-foreground,
+  );
+}
+
+// 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/typography/_typography-utils.scss

@@ -7,6 +7,15 @@
 
 // Utility for fetching a nested value from a typography config.
 @function _mat-get-type-value($config, $level, $name) {
+  @if meta.type-of($config) != 'map' {
+    @error 'Typography config must be a map. Received #{meta.type-of($config)}.';
+  }
+
+  @if not map.has-key($config, $level) {
+    @error 'Typography config does not have a level called "#{$level}". ' +
+           'Available levels are: #{map.keys($config)}.';
+  }
+
   @return map.get(map.get($config, $level), $name);
 }
 
@@ -42,6 +51,10 @@
 /// @param {Map} $config A typography config.
 /// @param {Map} $level A typography level.
 @function font-family($config, $level: null) {
+  @if meta.type-of($config) != 'map' {
+    @error 'Typography config must be a map. Received #{meta.type-of($config)}.';
+  }
+
   $font-family: map.get($config, font-family);
 
   @if $level != null {