@angular/material 19.0.0-rc.0 → 19.0.0-rc.2

package/badge/index.d.ts

@@ -21,6 +21,7 @@ export declare class MatBadge implements OnInit, OnDestroy {
     private _ariaDescriber;
     private _renderer;
     private _animationMode;
+    private _idGenerator;
     /**
      * Theme color of the badge. This API is supported in M2 themes only, it
      * has no effect in M3 themes.
@@ -52,8 +53,6 @@ export declare class MatBadge implements OnInit, OnDestroy {
     size: MatBadgeSize;
     /** Whether the badge is hidden. */
     hidden: boolean;
-    /** Unique id for the badge */
-    _id: number;
     /** Visible badge element. */
     private _badgeElement;
     /** Inline badge description. Used when the badge is applied to non-interactive host elements. */

package/bottom-sheet/index.d.ts

@@ -115,6 +115,12 @@ export declare class MatBottomSheetConfig<D = any> {
     restoreFocus?: boolean;
     /** Scroll strategy to be used for the bottom sheet. */
     scrollStrategy?: ScrollStrategy;
+    /** Height for the bottom sheet. */
+    height?: string;
+    /** Minimum height for the bottom sheet. If a number is provided, assumes pixel units. */
+    minHeight?: number | string;
+    /** Maximum height for the bottom sheet. If a number is provided, assumes pixel units. */
+    maxHeight?: number | string;
 }
 
 /**

package/button-toggle/index.d.ts

@@ -53,6 +53,7 @@ export declare class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy
     private _changeDetectorRef;
     private _elementRef;
     private _focusMonitor;
+    private _idGenerator;
     private _checked;
     /**
      * Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will
@@ -150,7 +151,7 @@ export declare interface MatButtonToggleDefaultOptions {
      * setting an appearance on a button toggle or group.
      */
     appearance?: MatButtonToggleAppearance;
-    /** Whetehr icon indicators should be hidden for single-selection button toggle groups. */
+    /** Whether icon indicators should be hidden for single-selection button toggle groups. */
     hideSingleSelectionIndicator?: boolean;
     /** Whether icon indicators should be hidden for multiple-selection button toggle groups. */
     hideMultipleSelectionIndicator?: boolean;

package/core/m2/_theming.scss

@@ -1,6 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:color';
 @use '../theming/theming';
 @use './palette';
 
@@ -82,7 +83,7 @@
     @return $color;
   }
 
-  @return rgba($color, if($opacity == null, opacity($color), $opacity));
+  @return rgba($color, if($opacity == null, color.opacity($color), $opacity));
 }
 
 // Validates the specified theme by ensuring that the optional color config defines

package/core/theming/_inspection.scss

@@ -62,10 +62,17 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
 }
 
-/// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
-/// passed, the second argument is treated as the name of a color role. If 3 arguments are passed,
-/// the second argument is treated as the name of a color palette (primary, secondary, etc.) and the
-/// third is treated as the palette hue (10, 50, etc.)
+/// Gets a color from a theme object. This function take a different amount of arguments depending
+/// on if it's working with an M2 or M3 theme:
+/// - With an M3 theme it accepts either 2 or 3 arguments. If 2 arguments are passed, the second
+/// argument is treated as the name of a color role. If 3 arguments are passed, the second argument
+/// is treated as the name of a color palette (primary, secondary, etc.) and the third is treated
+/// as the palette hue (10, 50, etc.).
+/// - With an M2 theme theme it accepts between 2 and 4 arguments, or the equivalent of calling
+/// the `m2-get-theme-color` function. The first argument is the theme, the second one is the
+/// palette from which to extract the color, the third one is the hue within the palette and the
+/// fourth is the opacity of the returned color.
+/// the second one is the
 /// @param {Map} $theme The theme
 /// @param {String} $color-role-or-palette-name The name of the color role to get, or the name of a
 ///   color palette.
@@ -74,25 +81,29 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Color} The requested theme color.
 @function get-theme-color($theme, $args...) {
   $version: get-theme-version($theme);
-  $args-count: list.length($args);
-  @if $args-count != 1 and $args-count != 2 and $args-count != 3 {
-    @error #{'Expected between 2 and 4 arguments. Got:'} $args-count + 1;
-  }
+  $args-count: list.length($args) + 1;
 
+  // M2 theme
   @if $version == 0 {
+    @if $args-count < 2 or $args-count > 4 {
+      @error 'Expected between 2 and 4 arguments when working with an M2 theme. ' +
+             'Got: #{$args-count}';
+    }
     @return m2-inspection.get-theme-color($theme, $args...);
   }
-  @else if $version == 1 {
-    @if $args-count == 1 {
-      @return _get-theme-role-color($theme, $args...);
-    }
-    @else if $args-count == 2 {
-      @return _get-theme-palette-color($theme, $args...);
+
+  // M3 theme
+  @if $version == 1 {
+    @if $args-count < 2 or $args-count > 3 {
+      @error 'Expected either 2 or 3 arguments when working with an M3 theme. Got: #{$args-count}';
     }
+    @return if($args-count == 2,
+      _get-theme-role-color($theme, $args...),
+      _get-theme-palette-color($theme, $args...)
+    );
   }
-  @else {
-    @error #{'Unrecognized theme version:'} $version;
-  }
+
+  @error 'Unrecognized theme version: #{$version}';
 }
 
 /// Gets a role color from a theme object.

package/core/theming/_m2-inspection.scss

@@ -102,14 +102,14 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @return if(map.get($colors, is-dark), dark, light);
 }
 
-/// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
-/// passed, the second argument is treated as the name of a color role. If 3 arguments are passed,
-/// the second argument is treated as the name of a color palette (primary, secondary, etc.) and the
-/// third is treated as the palette hue (10, 50, etc.)
+/// Gets a color from a theme object. This function can take between 2 and 4 arguments. The first
+/// argument is the theme, the second one is the palette from which to extract the color, the third
+/// one is the hue within the palette and the fourth is the opacity of the returned color.
 /// @param {Map} $theme The theme
 /// @param {String} $palette-name The name of a color palette.
 /// @param {Number} $hue The palette hue to get (passing this argument means the second argument is
 ///   interpreted as a palette name).
+/// @param {Number} $opacity The alpha channel value for the color.
 /// @return {Color} The requested theme color.
 @function get-theme-color($theme, $palette-name, $args...) {
   $theme: _get-m2-config($theme);

package/core/theming/_theming.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:color';
 
 // Whether to enable compatibility with legacy methods for accessing theme information.
 $theme-legacy-inspection-api-compatibility: true !default;
@@ -332,7 +333,7 @@ $private-internal-name: _mat-theming-internals-do-not-access;
   // We convert the rgba color into a solid one by taking the opacity from the rgba
   // value and using it to determine the percentage of the background to put
   // into foreground when mixing the colors together.
-  @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%);
+  @return color.mix($background-color, rgba($color, 1), (1 - color.opacity($color)) * 100%);
 }
 
 // Clamps the density scale to a number between the given min and max.

package/core/tokens/_m3-tokens.scss

@@ -130,7 +130,7 @@ $_cached-token-slots: null;
 @function create-map($keys, $prefix) {
   $result: ();
   @each $key in $keys {
-    $result: map-merge($result, ($key: var(--#{$prefix}-#{$key})));
+    $result: map.merge($result, ($key: var(--#{$prefix}-#{$key})));
   }
   @return $result;
 }
@@ -191,8 +191,8 @@ $_cached-token-slots: null;
             'tertiary-fixed',
             'tertiary-fixed-dim'
     );
-    @return map-merge(create-map($keys, $prefix), (
-            shadow: map.get($mdc-sys-color, shadow)
+    @return map.merge(create-map($keys, $prefix), (
+      shadow: map.get($mdc-sys-color, shadow)
     ));
   }
 

package/core/tokens/_token-definition.scss

@@ -124,11 +124,12 @@ $_system-fallbacks: null;
 /// Maps the values in a map to new values using the given mapping function
 /// @param {Map} $map The maps whose values will be mapped to new values.
 /// @param {Function} $fn The value mapping function.
-/// @param {Map} A new map with its values updated using the mapping function.
-@function map-values($map, $fn) {
+/// @param {ArgList} $args Additional arguments to pass to the mapping function.
+/// @return {Map} A new map with its values updated using the mapping function.
+@function map-values($map, $fn, $args...) {
   $result: ();
   @each $key, $value in $map {
-    $result: map.set($result, $key, meta.call($fn, $value));
+    $result: map.set($result, $key, meta.call($fn, $value, $args...));
   }
   @return $result;
 }

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

@@ -56,7 +56,7 @@ $prefix: (mat, badge);
   // the value to determine the percentage of the background to put into foreground when
   // mixing the colors together.
   @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) {
-    $badge-opacity: opacity($disabled-background);
+    $badge-opacity: color.opacity($disabled-background);
     $disabled-background: color.mix($app-background,
       rgba($disabled-background, 1), (1 - $badge-opacity) * 100%);
   }

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

@@ -60,7 +60,7 @@ $private-default-overlap-color: #a8dab5;
   // for a solid border, but because we're using a dashed border for the
   // preview range, we need to bump its opacity to ensure that it's visible.
   @if meta.type-of($preview-outline-color) == color {
-    $preview-outline-opacity: math.min(opacity($preview-outline-color) * 2, 1);
+    $preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1);
     $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
   }
 

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

@@ -1,6 +1,7 @@
 @use '../../token-definition';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, menu);
@@ -18,9 +19,10 @@ $prefix: (mat, menu);
     item-trailing-spacing: 16px,
     item-with-icon-leading-spacing: 16px,
     item-with-icon-trailing-spacing: 16px,
-    // Note that this uses a value, rather than a computed box-shadow, because we use
-    // the value at runtime to determine which shadow to set based on the menu's depth.
-    base-elevation-level: 8,
+    container-elevation-shadow: elevation.get-box-shadow(8),
+
+    // Unused
+    base-elevation-level: null,
   );
 }
 

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

@@ -26,7 +26,7 @@ $prefix: (mat, sort);
   // when mixing the colors together. Otherwise, if it resolves to something different
   // (e.g. it resolves to a CSS variable), we use the color directly.
   @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
-    $text-opacity: opacity($text-color);
+    $text-opacity: color.opacity($text-color);
     $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
   }
   @else {

package/core/tokens/m3/mat/_menu.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../../style/sass-utils';
 @use '../../token-definition';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, menu);
@@ -35,9 +36,11 @@ $prefix: (mat, menu);
       item-with-icon-leading-spacing: token-definition.hardcode(12px, $exclude-hardcoded),
       item-with-icon-trailing-spacing: token-definition.hardcode(12px, $exclude-hardcoded),
       container-color: map.get($systems, md-sys-color, surface-container),
-      // Note that this uses a value, rather than a computed box-shadow, because we use
-      // the value at runtime to determine which shadow to set based on the menu's depth.
-      base-elevation-level: token-definition.hardcode(2, $exclude-hardcoded),
+      container-elevation-shadow: token-definition.hardcode(
+        elevation.get-box-shadow(2), $exclude-hardcoded),
+
+      // Unused
+      base-elevation-level: null,
     )
   );
 

package/core/tokens/m3/mdc/_filled-text-field.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:list';
 @use '../../token-definition';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -34,8 +33,8 @@ $prefix: (mdc, filled-text-field);
   );
 
   @return token-definition.namespace-tokens($prefix, (
-    _fix-tokens($mdc-tokens),
-    token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens))
+    _fix-tokens($mdc-tokens, $systems),
+    token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens), $systems)
   ), $token-slots);
 }
 
@@ -43,8 +42,9 @@ $prefix: (mdc, filled-text-field);
 /// Fixes inconsistent values in the filled text field tokens so that they can produce valid
 /// styles.
 /// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
+/// @param {Map} $systems The MDC system tokens
 /// @return {Map} The given tokens, with the invalid values replaced with valid ones.
-@function _fix-tokens($initial-tokens) {
+@function _fix-tokens($initial-tokens, $systems) {
   // Need to get the hardcoded values, because they include opacities that are used for the disabled
   // state.
   $hardcoded-tokens: token-definition.get-mdc-tokens('filled-text-field', (), false);
@@ -80,13 +80,11 @@ $prefix: (mdc, filled-text-field);
     )
   ));
 
-  $container-shape: map.get($tokens, container-shape);
-
-  // The M2 token slots define a single `container-shape` slot while the M3 tokens provide a list
-  // of shapes (e.g. top/bottom/left/right). Extract the first value so it matches the expected
-  // token slot in M2.
-  @if meta.type-of($container-shape) == 'list' {
-    $tokens: map.set($tokens, container-shape, list.nth($container-shape, 1));
+  // The system tokens have this set as `corner-extra-small-top` which assumes that the value will
+  // be set as a `border-radius`, however we set it as `border-top-left-radius` and
+  // `border-top-right-radius`. Changing it at this point will be breaking so instead we remap it.
+  @if (map.get($tokens, container-shape)) {
+    $tokens: map.set($tokens, container-shape, map.get($systems, md-sys-shape, corner-extra-small));
   }
 
   @return $tokens;

package/datepicker/index.d.ts

@@ -454,6 +454,10 @@ export declare class MatCalendarBody<D = any> implements OnChanges, OnDestroy, A
     _cellPadding: string;
     /** Width of an individual cell. */
     _cellWidth: string;
+    /** ID for the start date label. */
+    _startDateLabelId: string;
+    /** ID for the end date label. */
+    _endDateLabelId: string;
     private _didDragSinceMouseDown;
     private _injector;
     /**
@@ -554,9 +558,6 @@ export declare class MatCalendarBody<D = any> implements OnChanges, OnDestroy, A
     private _touchendHandler;
     /** Finds the MatCalendarCell that corresponds to a DOM node. */
     private _getCellFromElement;
-    private _id;
-    _startDateLabelId: string;
-    _endDateLabelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarBody<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarBody<any>, "[mat-calendar-body]", ["matCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "startValue": { "alias": "startValue"; "required": false; }; "endValue": { "alias": "endValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; "isRange": { "alias": "isRange"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "previewStart": { "alias": "previewStart"; "required": false; }; "previewEnd": { "alias": "previewEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; "previewChange": "previewChange"; "activeDateChange": "activeDateChange"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; }, never, never, true, never>;
 }
@@ -620,7 +621,6 @@ export declare class MatCalendarHeader<D> {
      * for the minimum year, and the second string is the formatted label for the maximum year.
      */
     private _formatMinAndMaxYearLabels;
-    private _id;
     _periodButtonLabelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarHeader<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarHeader<any>, "mat-calendar-header", ["matCalendarHeader"], {}, {}, never, ["*"], true, never>;

package/dialog/index.d.ts

@@ -125,6 +125,7 @@ export declare class MatDialog implements OnDestroy {
     private _defaultOptions;
     private _scrollStrategy;
     private _parentDialog;
+    private _idGenerator;
     protected _dialog: Dialog;
     private readonly _openDialogsAtThisLevel;
     private readonly _afterAllClosedAtThisLevel;

package/fesm2022/autocomplete.mjs

@@ -4,7 +4,7 @@ import { MAT_OPTION_PARENT_COMPONENT, MatOption, MAT_OPTGROUP, MatOptionSelectio
 export { MatOptgroup, MatOption } from '@angular/material/core';
 import { ViewportRuler, CdkScrollableModule } from '@angular/cdk/scrolling';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import { ActiveDescendantKeyManager, removeAriaReferencedId, addAriaReferencedId } from '@angular/cdk/a11y';
+import { _IdGenerator, ActiveDescendantKeyManager, removeAriaReferencedId, addAriaReferencedId } from '@angular/cdk/a11y';
 import { Platform, _getEventTarget } from '@angular/cdk/platform';
 import { trigger, state, style, transition, group, animate } from '@angular/animations';
 import { Subscription, Subject, merge, of, defer, fromEvent, Observable } from 'rxjs';
@@ -33,11 +33,6 @@ const panelAnimation = trigger('panelAnimation', [
     transition(':leave, visible => hidden', [animate('0.075s linear', style({ opacity: 0 }))]),
 ]);
 
-/**
- * Autocomplete IDs need to be unique across components, so this counter exists outside of
- * the component definition.
- */
-let _uniqueAutocompleteIdCounter = 0;
 /** Event object that is emitted when an autocomplete option is selected. */
 class MatAutocompleteSelectedEvent {
     source;
@@ -164,7 +159,7 @@ class MatAutocomplete {
         }
     }
     /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
-    id = `mat-autocomplete-${_uniqueAutocompleteIdCounter++}`;
+    id = inject(_IdGenerator).getId('mat-autocomplete-');
     /**
      * Tells any descendant `mat-optgroup` to use the inert a11y pattern.
      * @docs-private
@@ -247,10 +242,10 @@ class MatAutocomplete {
     _skipPredicate() {
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatAutocomplete, isStandalone: true, selector: "mat-autocomplete", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], displayWith: "displayWith", autoActiveFirstOption: ["autoActiveFirstOption", "autoActiveFirstOption", booleanAttribute], autoSelectActiveOption: ["autoSelectActiveOption", "autoSelectActiveOption", booleanAttribute], requireSelection: ["requireSelection", "requireSelection", booleanAttribute], panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], classList: ["class", "classList"], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute] }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed", optionActivated: "optionActivated" }, host: { classAttribute: "mat-mdc-autocomplete" }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], queries: [{ propertyName: "options", predicate: MatOption, descendants: true }, { propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], exportAs: ["matAutocomplete"], ngImport: i0, template: "<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [class]=\"_classList\"\n    [class.mat-mdc-autocomplete-visible]=\"showPanel\"\n    [class.mat-mdc-autocomplete-hidden]=\"!showPanel\"\n    [class.mat-primary]=\"_color === 'primary'\"\n    [class.mat-accent]=\"_color === 'accent'\"\n    [class.mat-warn]=\"_color === 'warn'\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n    (@panelAnimation.done)=\"_animationDone.next($event)\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;box-sizing:border-box;position:static;border-radius:var(--mat-autocomplete-container-shape, var(--mat-sys-corner-extra-small));box-shadow:var(--mat-autocomplete-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));background-color:var(--mat-autocomplete-background-color, var(--mat-sys-surface-container))}@media(forced-colors: active){div.mat-mdc-autocomplete-panel{outline:solid 1px}}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden;pointer-events:none}mat-autocomplete{display:none}"], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatAutocomplete, isStandalone: true, selector: "mat-autocomplete", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], displayWith: "displayWith", autoActiveFirstOption: ["autoActiveFirstOption", "autoActiveFirstOption", booleanAttribute], autoSelectActiveOption: ["autoSelectActiveOption", "autoSelectActiveOption", booleanAttribute], requireSelection: ["requireSelection", "requireSelection", booleanAttribute], panelWidth: "panelWidth", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], classList: ["class", "classList"], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute] }, outputs: { optionSelected: "optionSelected", opened: "opened", closed: "closed", optionActivated: "optionActivated" }, host: { classAttribute: "mat-mdc-autocomplete" }, providers: [{ provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete }], queries: [{ propertyName: "options", predicate: MatOption, descendants: true }, { propertyName: "optionGroups", predicate: MAT_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], exportAs: ["matAutocomplete"], ngImport: i0, template: "<ng-template let-formFieldId=\"id\">\n  <div\n    class=\"mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open\"\n    role=\"listbox\"\n    [id]=\"id\"\n    [class]=\"_classList\"\n    [class.mat-mdc-autocomplete-visible]=\"showPanel\"\n    [class.mat-mdc-autocomplete-hidden]=\"!showPanel\"\n    [class.mat-primary]=\"_color === 'primary'\"\n    [class.mat-accent]=\"_color === 'accent'\"\n    [class.mat-warn]=\"_color === 'warn'\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"_getPanelAriaLabelledby(formFieldId)\"\n    [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n    (@panelAnimation.done)=\"_animationDone.next($event)\"\n    #panel>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: ["div.mat-mdc-autocomplete-panel{width:100%;max-height:256px;visibility:hidden;transform-origin:center top;overflow:auto;padding:8px 0;box-sizing:border-box;position:static;border-radius:var(--mat-autocomplete-container-shape, var(--mat-sys-corner-extra-small));box-shadow:var(--mat-autocomplete-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));background-color:var(--mat-autocomplete-background-color, var(--mat-sys-surface-container))}@media(forced-colors: active){div.mat-mdc-autocomplete-panel{outline:solid 1px}}.cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) div.mat-mdc-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0}.mat-mdc-autocomplete-panel-above div.mat-mdc-autocomplete-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;transform-origin:center bottom}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{visibility:visible}div.mat-mdc-autocomplete-panel.mat-mdc-autocomplete-hidden{visibility:hidden;pointer-events:none}mat-autocomplete{display:none}"], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocomplete, decorators: [{
             type: Component,
             args: [{ selector: 'mat-autocomplete', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'matAutocomplete', host: {
                         'class': 'mat-mdc-autocomplete',
@@ -312,10 +307,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
 class MatAutocompleteOrigin {
     elementRef = inject(ElementRef);
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatAutocompleteOrigin, isStandalone: true, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matAutocompleteOrigin]',
@@ -1162,10 +1157,10 @@ class MatAutocompleteTrigger {
             this._trackedModal = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatAutocompleteTrigger, isStandalone: true, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled", booleanAttribute] }, host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-controls": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-mdc-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocompleteTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatAutocompleteTrigger, isStandalone: true, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: { autocomplete: ["matAutocomplete", "autocomplete"], position: ["matAutocompletePosition", "position"], connectedTo: ["matAutocompleteConnectedTo", "connectedTo"], autocompleteAttribute: ["autocomplete", "autocompleteAttribute"], autocompleteDisabled: ["matAutocompleteDisabled", "autocompleteDisabled", booleanAttribute] }, host: { listeners: { "focusin": "_handleFocus()", "blur": "_onTouched()", "input": "_handleInput($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick()" }, properties: { "attr.autocomplete": "autocompleteAttribute", "attr.role": "autocompleteDisabled ? null : \"combobox\"", "attr.aria-autocomplete": "autocompleteDisabled ? null : \"list\"", "attr.aria-activedescendant": "(panelOpen && activeOption) ? activeOption.id : null", "attr.aria-expanded": "autocompleteDisabled ? null : panelOpen.toString()", "attr.aria-controls": "(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id", "attr.aria-haspopup": "autocompleteDisabled ? null : \"listbox\"" }, classAttribute: "mat-mdc-autocomplete-trigger" }, providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR], exportAs: ["matAutocompleteTrigger"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocompleteTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[matAutocomplete], textarea[matAutocomplete]`,
@@ -1207,8 +1202,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
             }] } });
 
 class MatAutocompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocompleteModule, imports: [OverlayModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocompleteModule, imports: [OverlayModule,
             MatOptionModule,
             MatCommonModule,
             MatAutocomplete,
@@ -1219,13 +1214,13 @@ class MatAutocompleteModule {
             MatCommonModule,
             MatAutocompleteTrigger,
             MatAutocompleteOrigin] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [OverlayModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocompleteModule, providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [OverlayModule,
             MatOptionModule,
             MatCommonModule, CdkScrollableModule,
             MatOptionModule,
             MatCommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [