@angular/material 16.1.4 → 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

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)
+  );
+}